@mono-lit/helper 0.0.6 → 0.0.7

package/dist/ui/chip.js

@@ -1,7 +1,7 @@
-import { n as defineMonoElement, t as customElement } from "../mono-element-Bc9wElPy.js";
+import { n as defineMonoElement, t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { n as bucketHasContent, r as captureLightSlots, s as placeSlotNode } from "../light-slots-BnBR29E7.js";
+import { n as bucketHasContent, r as captureLightSlots, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -268,10 +268,6 @@ const MonoChipCore = (superClass) => {
 	return MonoChipCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\chip\chip.css?raw.js
-var chip_css_raw_default = "/* =========================================================================\r\n   mono-chip — a port of Basecoat's `.badge` (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-chip size=\"lg\" color=\"success\" variant=\"solid\" label=\"Active\" dot>\r\n     <span mono-chip mono-size=\"lg\" mono-color=\"success\" mono-variant=\"solid\" mono-has-dot>\r\n       <span mono-main>\r\n         <span mono-content>\r\n           <span mono-dot></span>\r\n           <span mono-label>Active</span>\r\n           <button mono-close><span mono-glyph class=\"i-mdi-close\"></span></button>\r\n         </span>\r\n       </span>\r\n     </span>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = soft, no\r\n   `mono-rounded` = the pill). The element renders these on its root (both\r\n   builds) plus the states `mono-has-dot` (the dot PART is `mono-dot`, so the state\r\n   spells itself out) / `mono-removable` / `mono-clickable` /\r\n   `mono-disabled` / `mono-selected` and `mono-icon-position=\"right\"`. The old\r\n   classes (`.mono-chip.md.soft-primary`, `.chip-label`, `.chip-close`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them — except\r\n   `rounded-<step>`, which is GONE: that is Tailwind/UnoCSS's own utility\r\n   namespace, so on a page shipping those it was never inert (it rounded the\r\n   chip's outer box). Use `mono-rounded` / the `rounded` prop.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-chip]                   ≡ the layout box only — NOT painted (see below)\r\n     [mono-main]                   ≡ .badge (inline-flex w-fit shrink-0 items-center\r\n                                     justify-center overflow-hidden whitespace-nowrap,\r\n                                     h-5 gap-1 rounded-4xl border border-transparent\r\n                                     px-2 py-0.5 text-xs font-medium transition-all,\r\n                                     focus-visible:border-ring ring-[3px] ring-ring/50)\r\n     [mono-variant=\"solid\"]        ≡ .badge[data-variant='primary'] (bg-c text-c-foreground,\r\n                                     [a]:hover:bg-c/80) — generalised to every hue\r\n     [mono-variant=\"soft\"]         ≡ .badge[data-variant='destructive'] (bg-c/10 text-c,\r\n                                     [a]:hover:bg-c/20, dark bg-c/20) — generalised; the DEFAULT\r\n     [mono-variant=\"outline\"]      ≡ .badge[data-variant='outline'] (border-border text-foreground,\r\n                                     [a]:hover:bg-muted) + the hue on the edge and the ink\r\n     [mono-color=\"secondary\"]      ≡ .badge[data-variant='secondary'] (the muted surface pair)\r\n     [mono-size=\"md\"]              ≡ .badge's own h-5 px-2 text-xs; the other five are EXTENSION\r\n                                     (Basecoat ships one badge size)\r\n     [mono-rounded=\"…\"]            ≡ EXTENSION (the shared corner ladder; unset = rounded-4xl)\r\n     [mono-close]                  ≡ .combobox-chip-remove (opacity-50 hover:opacity-100, svg size-3.5)\r\n     [mono-has-dot] / [mono-dot] / [mono-selected] / [mono-clickable] ≡ EXTENSION\r\n     [mono-disabled]               ≡ .btn disabled:opacity-50\r\n     [mono-status-dot]             ≡ EXTENSION (the standalone status-dot helper)\r\n\r\n   WHY THE ROOT PAINTS NOTHING. `[mono-chip]` is also what a FIELD's internal\r\n   chip carries: `<mono-tag-input>` renders Basecoat combobox chips as\r\n   `[mono-chip] > [mono-chip-main] > …` and paints them in tag-input.css. Those\r\n   rules are `[mono-tag-input] [mono-chip]` = (0,2,0) and win over this sheet,\r\n   but only where they overlap — so this sheet keeps the root to layout plus\r\n   custom properties (which a field's rules simply don't read) and paints the\r\n   badge on `[mono-main]`, a part name a field chip does not have. The two never\r\n   collide, and a real `<mono-chip>` slotted INTO a field keeps its own look.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING\r\n   rule is exactly one attribute strong — `:where([mono-chip]) [mono-label]` =\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   Inner parts: [mono-main] > [mono-content] > [mono-dot] / [data-mono-slot=icon]\r\n   / [mono-label] / [mono-close] > [mono-glyph].\r\n\r\n   FLAVORS set `--mono-chip-{radius,border-width,font-weight,letter-spacing,\r\n   text-transform}` and the VARIANT-scoped paint knobs\r\n   `--mono-chip-{soft,solid,outline}-{bg,color,border-color}` (the shared\r\n   `--mono-chip-bg` / `-color` is the CONSUMER's blanket override and repaints\r\n   all three looks at once)` and the per-size `-height-<size>` /\r\n   `-padding-x-<size>` / `-gap-<size>` / `-font-size-<size>` /\r\n   `-glyph-size-<size>` (the size-agnostic twin of each of those is the\r\n   CONSUMER's override — a flavor writing it would flatten the whole ladder);\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.badge\"`).\r\n   ========================================================================= */\r\n\r\nmono-chip {\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-chip] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ──────────── */\r\n  --_mono-chip-primary: var(--mono-chip-primary, var(--primary));\r\n  --_mono-chip-primary-foreground: var(--mono-chip-primary-foreground, var(--primary-foreground));\r\n  --_mono-chip-secondary: var(--mono-chip-secondary, var(--secondary));\r\n  --_mono-chip-secondary-foreground: var(--mono-chip-secondary-foreground, var(--secondary-foreground));\r\n  --_mono-chip-success: var(--mono-chip-success, var(--success));\r\n  --_mono-chip-success-foreground: var(--mono-chip-success-foreground, var(--success-foreground));\r\n  --_mono-chip-danger: var(--mono-chip-danger, var(--destructive));\r\n  --_mono-chip-danger-foreground: var(--mono-chip-danger-foreground, var(--destructive-foreground));\r\n  --_mono-chip-warning: var(--mono-chip-warning, var(--warning));\r\n  --_mono-chip-warning-foreground: var(--mono-chip-warning-foreground, var(--warning-foreground));\r\n  --_mono-chip-info: var(--mono-chip-info, var(--info));\r\n  --_mono-chip-info-foreground: var(--mono-chip-info-foreground, var(--info-foreground));\r\n  --_mono-chip-teal: var(--mono-chip-teal, var(--teal));\r\n  --_mono-chip-teal-foreground: var(--mono-chip-teal-foreground, var(--teal-foreground));\r\n  --_mono-chip-purple: var(--mono-chip-purple, var(--purple));\r\n  --_mono-chip-purple-foreground: var(--mono-chip-purple-foreground, var(--purple-foreground));\r\n  --_mono-chip-neutral: var(--mono-chip-neutral, var(--neutral));\r\n  --_mono-chip-neutral-foreground: var(--mono-chip-neutral-foreground, var(--neutral-foreground));\r\n  --_mono-chip-dark: var(--mono-chip-dark, var(--dark));\r\n  --_mono-chip-dark-foreground: var(--mono-chip-dark-foreground, var(--dark-foreground));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border\r\n     border-transparent px-2 py-0.5 text-xs font-medium, [&>svg]:size-3 */\r\n  --_mono-chip-height: var(--mono-chip-height, var(--_mono-chip-height-preset, var(--mono-chip-height-md, calc(var(--mono-spacing) * 5))));\r\n  --_mono-chip-padding-x: var(--mono-chip-padding-x, var(--_mono-chip-padding-x-preset, var(--mono-chip-padding-x-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-chip-gap: var(--mono-chip-gap, var(--_mono-chip-gap-preset, var(--mono-chip-gap-md, var(--mono-spacing))));\r\n  --_mono-chip-font-size: var(--mono-chip-font-size, var(--_mono-chip-font-size-preset, var(--mono-chip-font-size-md, var(--mono-text-xs))));\r\n  --_mono-chip-glyph-size: var(--mono-chip-glyph-size, var(--_mono-chip-glyph-size-preset, var(--mono-chip-glyph-size-md, calc(var(--mono-spacing) * 3))));\r\n  /* `rounded-4xl` is the pill; a `rounded` step writes the preset tier, and an\r\n     explicit --mono-chip-radius still wins over the prop */\r\n  --_mono-chip-radius: var(--mono-chip-radius, var(--_mono-chip-radius-preset, var(--mono-radius-4xl)));\r\n  --_mono-chip-border-width: var(--mono-chip-border-width, var(--mono-border-width));\r\n  --_mono-chip-font-weight: var(--mono-chip-font-weight, var(--mono-font-weight-medium));\r\n\r\n  --_mono-chip-ring-color: var(--mono-chip-ring-color, var(--ring));\r\n  --_mono-chip-ring-width: var(--mono-chip-ring-width, var(--mono-ring-width));\r\n  --_mono-chip-ring-alpha: var(--mono-chip-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  max-width: 100%;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* =========================================\r\n   The badge box — `.badge`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — inline-flex w-fit shrink-0\r\n   items-center justify-center overflow-hidden whitespace-nowrap\r\n   [&>svg]:pointer-events-none */\r\n:where([mono-chip]) [mono-main] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  box-sizing: border-box;\r\n  height: var(--_mono-chip-height);\r\n  gap: var(--_mono-chip-gap);\r\n  padding-inline: var(--_mono-chip-padding-x);\r\n  border: var(--_mono-chip-border-width) solid transparent;\r\n  border-radius: var(--_mono-chip-radius);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-chip-font-size);\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  letter-spacing: var(--mono-chip-letter-spacing, normal);\r\n  text-transform: var(--mono-chip-text-transform, none);\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  /* `transition-all`, narrowed to what a chip actually animates */\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    opacity var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-ring, 0 0 #0000);\r\n}\r\n\r\n/* A LINK chip is a control, not prose. Host stylesheets routinely paint a bare\r\n   `a` — VitePress's own `.vp-doc a` sets a weight and an underline at (0,1,1) —\r\n   and that out-specifies the (0,1,0) part rule above, so the anchor form\r\n   restates what such a rule hijacks, one attribute heavier. Measured: the docs'\r\n   light link chip came out at weight 500 while the shadow one, beyond that\r\n   sheet's reach, kept the component's own 600. The colour needs no restatement:\r\n   every variant rule is already (0,2,0).\r\n\r\n   DEVIATION from the specificity contract, for this form only — a `cssClass.main`\r\n   utility that sets font-weight or text-decoration on a LINK chip now needs\r\n   `!important` (or the `--mono-chip-font-weight` knob). */\r\n[mono-chip] a[mono-main] {\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  text-decoration: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-chip]) [mono-main]:focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-chip-ring-color);\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-ring-color) var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE badge; md is its `.badge`\r\n   ========================================= */\r\n\r\n/* The ladder steps the same way the control heights do: 4px of box and one type\r\n   step per size, with md pinned to vega's h-5 / px-2 / text-xs. */\r\n[mono-chip][mono-size=\"xs\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xs, calc(var(--mono-spacing) * 4));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xs, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xs, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xs, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"sm\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-sm, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-sm, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-sm, calc(var(--mono-spacing) * 0.875));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-sm, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-sm, calc(var(--mono-spacing) * 2.75));\r\n}\r\n\r\n[mono-chip][mono-size=\"lg\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-lg, calc(var(--mono-spacing) * 6));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-lg, calc(var(--mono-spacing) * 1.25));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-lg, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-lg, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"xl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xl, calc(var(--mono-spacing) * 7));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xl, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xl, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xl, calc(var(--mono-spacing) * 4));\r\n}\r\n\r\n[mono-chip][mono-size=\"xxl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xxl, calc(var(--mono-spacing) * 8));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xxl, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xxl, var(--mono-text-base));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xxl, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Rounded — EXTENSION: the shared corner ladder. Unset is vega's rounded-4xl.\r\n   ========================================= */\r\n\r\n[mono-chip][mono-rounded=\"none\"] { --_mono-chip-radius-preset: 0; }\r\n[mono-chip][mono-rounded=\"xs\"] { --_mono-chip-radius-preset: calc(var(--mono-radius-sm) / 2); }\r\n[mono-chip][mono-rounded=\"sm\"] { --_mono-chip-radius-preset: var(--mono-radius-sm); }\r\n[mono-chip][mono-rounded=\"md\"] { --_mono-chip-radius-preset: var(--mono-radius-md); }\r\n[mono-chip][mono-rounded=\"lg\"] { --_mono-chip-radius-preset: var(--mono-radius-lg); }\r\n[mono-chip][mono-rounded=\"xl\"] { --_mono-chip-radius-preset: var(--mono-radius-xl); }\r\n[mono-chip][mono-rounded=\"xxl\"] { --_mono-chip-radius-preset: var(--mono-radius-2xl); }\r\n[mono-chip][mono-rounded=\"full\"] { --_mono-chip-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n   Colours — each publishes the pair the variants read\r\n   ========================================= */\r\n\r\n[mono-chip][mono-color=\"primary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='secondary'] —\r\n   bg-secondary text-secondary-foreground: a SURFACE pair, not a hue, so its\r\n   `soft` and `solid` land on the same muted plate (shadcn's meaning). */\r\n[mono-chip][mono-color=\"secondary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-secondary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-secondary-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"success\"] {\r\n  --_mono-chip-c: var(--_mono-chip-success);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-success-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"danger\"] {\r\n  --_mono-chip-c: var(--_mono-chip-danger);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-danger-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"warning\"] {\r\n  --_mono-chip-c: var(--_mono-chip-warning);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-warning-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"info\"] {\r\n  --_mono-chip-c: var(--_mono-chip-info);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-info-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"teal\"] {\r\n  --_mono-chip-c: var(--_mono-chip-teal);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-teal-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"purple\"] {\r\n  --_mono-chip-c: var(--_mono-chip-purple);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-purple-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"neutral\"] {\r\n  --_mono-chip-c: var(--_mono-chip-neutral);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-neutral-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"dark\"] {\r\n  --_mono-chip-c: var(--_mono-chip-dark);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `soft` is the DEFAULT and is Basecoat's tonal badge.\r\n   basecoat@1.0.2 styles/vega.css .badge[data-variant='destructive'] —\r\n   bg-destructive/10 text-destructive dark:bg-destructive/20 (the alpha pair\r\n   travels as --mono-mode-tint, which is what makes it dark-mode correct). */\r\n[mono-chip]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint), transparent)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-soft-border-color, transparent));\r\n}\r\n\r\n/* `secondary` is a surface, not a hue: tinting it would wash it out, so the\r\n   soft chip wears the plate itself (`.badge[data-variant='secondary']`). */\r\n[mono-chip][mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, var(--_mono-chip-secondary)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-secondary-foreground)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — bg-primary text-primary-foreground */\r\n[mono-chip][mono-variant=\"solid\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-solid-bg, var(--_mono-chip-c)));\r\n  color: var(--mono-chip-color, var(--mono-chip-solid-color, var(--_mono-chip-c-foreground)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-solid-border-color, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='outline'] — border-border\r\n   text-foreground — EXTENSION: the edge and the ink take the role's colour so\r\n   `outline` reads as the same family as the other two. */\r\n[mono-chip][mono-variant=\"outline\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-outline-bg, transparent));\r\n  color: var(--mono-chip-color, var(--mono-chip-outline-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-outline-border-color, var(--_mono-chip-c)));\r\n}\r\n\r\n[mono-chip][mono-color=\"secondary\"][mono-variant=\"outline\"] > [mono-main] {\r\n  color: var(--mono-chip-color, var(--foreground));\r\n  border-color: var(--mono-chip-border-color, var(--border));\r\n}\r\n\r\n/* =========================================\r\n   Interactive — a clickable / linked chip\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — [a]:hover:bg-primary/80: only a LINK badge reacts upstream; ours also\r\n   reacts when `clickable` made it a button (same gesture, no href). */\r\n[mono-chip][mono-clickable] > [mono-main] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"solid\"] > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) 80%, transparent);\r\n  }\r\n\r\n  /* .badge[data-variant='destructive'] — [a]:hover:bg-destructive/20 */\r\n  [mono-chip][mono-clickable]:not([mono-disabled]):is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint-hover), transparent);\r\n  }\r\n\r\n  /* `secondary` is a plate, not a tint: darken it the way the secondary button\r\n     does (basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']). */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklch, var(--_mono-chip-secondary), var(--foreground) 5%);\r\n  }\r\n\r\n  /* .badge[data-variant='outline'] — [a]:hover:bg-muted */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"outline\"] > [mono-main]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — `selected` rings the chip in its own colour, the one state\r\n   Basecoat's badge has no equivalent for (it is not a toggle upstream). */\r\n[mono-chip][mono-selected] > [mono-main] {\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-c) var(--_mono-chip-ring-alpha), transparent);\r\n  border-color: var(--_mono-chip-c);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none\r\n   disabled:opacity-50 */\r\n[mono-chip][mono-disabled] > [mono-main] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Inner content\r\n   ========================================= */\r\n\r\n:where([mono-chip]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-chip]) [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1;\r\n}\r\n\r\n/* EXTENSION — the leading status dot. It is the role's colour at full strength,\r\n   which reads on both the tinted `soft` plate and the solid one (`currentColor`\r\n   there). */\r\n:where([mono-chip]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  height: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* The shadow build renders the icon wrapper on every chip and marks the empty\r\n   one; this hides it so both builds measure the same content box. */\r\n[mono-chip] [data-mono-slot=\"icon\"][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* `[&>svg]:size-3!` — our icon is a slotted element or a mask span, sized by\r\n   the same token as the close glyph */\r\n:where([mono-chip]) [data-mono-slot=\"icon\"],\r\n:where([mono-chip]) [mono-main] > svg {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-chip]) [data-mono-slot=\"icon\"] > * {\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 .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, [&>svg]:size-3.5 — the same affordance a field chip uses */\r\n:where([mono-chip]) [mono-close] {\r\n  appearance: none;\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-full);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  opacity: 0.5;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-close-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-chip]) [mono-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n:where([mono-chip]) [mono-close]:focus-visible {\r\n  outline: none;\r\n  opacity: 1;\r\n  --_mono-chip-close-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, currentColor var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-chip]) [mono-close] :is([mono-glyph], svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-chip]) [mono-close] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Status dot — EXTENSION: `<mono-status-dot>`, a label with a state dot\r\n   ========================================= */\r\n\r\nmono-status-dot {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-status-dot] {\r\n  --_mono-status-dot-c: var(--mono-status-dot-color, var(--success));\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--mono-status-dot-gap, calc(var(--mono-spacing) * 1.5));\r\n  font-family: inherit;\r\n  font-size: var(--mono-status-dot-font-size, var(--mono-text-xs));\r\n  font-weight: var(--mono-status-dot-font-weight, var(--mono-font-weight-medium));\r\n  line-height: 1;\r\n  color: var(--_mono-status-dot-c);\r\n}\r\n\r\n[mono-status-dot][mono-status=\"offline\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--neutral)); }\r\n[mono-status-dot][mono-status=\"busy\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--destructive)); }\r\n[mono-status-dot][mono-status=\"away\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--warning)); }\r\n/* `custom` takes the colour from the `color` prop, which the element writes\r\n   inline as --mono-status-dot-color */\r\n[mono-status-dot][mono-status=\"custom\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--primary)); }\r\n\r\n:where([mono-status-dot]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  height: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n[mono-status-dot][mono-pulse] [mono-dot] {\r\n  animation: mono-status-pulse 1.8s var(--mono-ease) infinite;\r\n}\r\n\r\n@keyframes mono-status-pulse {\r\n  0%,\r\n  100% {\r\n    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);\r\n  }\r\n\r\n  50% {\r\n    box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-chip]) :is([mono-main], [mono-close]) {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-status-dot][mono-pulse] [mono-dot] {\r\n    animation: none;\r\n  }\r\n}\r\n";
-
 //#endregion
 //#region src/components/chip/mono-chip.ts
 let MonoChip = class MonoChip extends MonoChipCore(LitElement) {
@@ -280,9 +276,6 @@ let MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 		this._buckets = /* @__PURE__ */ new Map();
 		this._slotsCaptured = false;
 	}
-	static {
-		this.styles = [unsafeCSS(chip_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}
@@ -430,6 +423,10 @@ let MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 };
 MonoChip = __decorate([customElement("mono-chip")], MonoChip);
 
+//#endregion
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\chip\chip.css?raw.js
+var chip_css_raw_default = "/* =========================================================================\r\n   mono-chip — a port of Basecoat's `.badge` (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-chip size=\"lg\" color=\"success\" variant=\"solid\" label=\"Active\" dot>\r\n     <span mono-chip mono-size=\"lg\" mono-color=\"success\" mono-variant=\"solid\" mono-has-dot>\r\n       <span mono-main>\r\n         <span mono-content>\r\n           <span mono-dot></span>\r\n           <span mono-label>Active</span>\r\n           <button mono-close><span mono-glyph class=\"i-mdi-close\"></span></button>\r\n         </span>\r\n       </span>\r\n     </span>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = soft, no\r\n   `mono-rounded` = the pill). The element renders these on its root (both\r\n   builds) plus the states `mono-has-dot` (the dot PART is `mono-dot`, so the state\r\n   spells itself out) / `mono-removable` / `mono-clickable` /\r\n   `mono-disabled` / `mono-selected` and `mono-icon-position=\"right\"`. The old\r\n   classes (`.mono-chip.md.soft-primary`, `.chip-label`, `.chip-close`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them — except\r\n   `rounded-<step>`, which is GONE: that is Tailwind/UnoCSS's own utility\r\n   namespace, so on a page shipping those it was never inert (it rounded the\r\n   chip's outer box). Use `mono-rounded` / the `rounded` prop.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-chip]                   ≡ the layout box only — NOT painted (see below)\r\n     [mono-main]                   ≡ .badge (inline-flex w-fit shrink-0 items-center\r\n                                     justify-center overflow-hidden whitespace-nowrap,\r\n                                     h-5 gap-1 rounded-4xl border border-transparent\r\n                                     px-2 py-0.5 text-xs font-medium transition-all,\r\n                                     focus-visible:border-ring ring-[3px] ring-ring/50)\r\n     [mono-variant=\"solid\"]        ≡ .badge[data-variant='primary'] (bg-c text-c-foreground,\r\n                                     [a]:hover:bg-c/80) — generalised to every hue\r\n     [mono-variant=\"soft\"]         ≡ .badge[data-variant='destructive'] (bg-c/10 text-c,\r\n                                     [a]:hover:bg-c/20, dark bg-c/20) — generalised; the DEFAULT\r\n     [mono-variant=\"outline\"]      ≡ .badge[data-variant='outline'] (border-border text-foreground,\r\n                                     [a]:hover:bg-muted) + the hue on the edge and the ink\r\n     [mono-color=\"secondary\"]      ≡ .badge[data-variant='secondary'] (the muted surface pair)\r\n     [mono-size=\"md\"]              ≡ .badge's own h-5 px-2 text-xs; the other five are EXTENSION\r\n                                     (Basecoat ships one badge size)\r\n     [mono-rounded=\"…\"]            ≡ EXTENSION (the shared corner ladder; unset = rounded-4xl)\r\n     [mono-close]                  ≡ .combobox-chip-remove (opacity-50 hover:opacity-100, svg size-3.5)\r\n     [mono-has-dot] / [mono-dot] / [mono-selected] / [mono-clickable] ≡ EXTENSION\r\n     [mono-disabled]               ≡ .btn disabled:opacity-50\r\n     [mono-status-dot]             ≡ EXTENSION (the standalone status-dot helper)\r\n\r\n   WHY THE ROOT PAINTS NOTHING. `[mono-chip]` is also what a FIELD's internal\r\n   chip carries: `<mono-tag-input>` renders Basecoat combobox chips as\r\n   `[mono-chip] > [mono-chip-main] > …` and paints them in tag-input.css. Those\r\n   rules are `[mono-tag-input] [mono-chip]` = (0,2,0) and win over this sheet,\r\n   but only where they overlap — so this sheet keeps the root to layout plus\r\n   custom properties (which a field's rules simply don't read) and paints the\r\n   badge on `[mono-main]`, a part name a field chip does not have. The two never\r\n   collide, and a real `<mono-chip>` slotted INTO a field keeps its own look.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING\r\n   rule is exactly one attribute strong — `:where([mono-chip]) [mono-label]` =\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   Inner parts: [mono-main] > [mono-content] > [mono-dot] / [data-mono-slot=icon]\r\n   / [mono-label] / [mono-close] > [mono-glyph].\r\n\r\n   FLAVORS set `--mono-chip-{radius,border-width,font-weight,letter-spacing,\r\n   text-transform}` and the VARIANT-scoped paint knobs\r\n   `--mono-chip-{soft,solid,outline}-{bg,color,border-color}` (the shared\r\n   `--mono-chip-bg` / `-color` is the CONSUMER's blanket override and repaints\r\n   all three looks at once)` and the per-size `-height-<size>` /\r\n   `-padding-x-<size>` / `-gap-<size>` / `-font-size-<size>` /\r\n   `-glyph-size-<size>` (the size-agnostic twin of each of those is the\r\n   CONSUMER's override — a flavor writing it would flatten the whole ladder);\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.badge\"`).\r\n   ========================================================================= */\r\n\r\nmono-chip {\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-chip] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ──────────── */\r\n  --_mono-chip-primary: var(--mono-chip-primary, var(--primary));\r\n  --_mono-chip-primary-foreground: var(--mono-chip-primary-foreground, var(--primary-foreground));\r\n  --_mono-chip-secondary: var(--mono-chip-secondary, var(--secondary));\r\n  --_mono-chip-secondary-foreground: var(--mono-chip-secondary-foreground, var(--secondary-foreground));\r\n  --_mono-chip-success: var(--mono-chip-success, var(--success));\r\n  --_mono-chip-success-foreground: var(--mono-chip-success-foreground, var(--success-foreground));\r\n  --_mono-chip-danger: var(--mono-chip-danger, var(--destructive));\r\n  --_mono-chip-danger-foreground: var(--mono-chip-danger-foreground, var(--destructive-foreground));\r\n  --_mono-chip-warning: var(--mono-chip-warning, var(--warning));\r\n  --_mono-chip-warning-foreground: var(--mono-chip-warning-foreground, var(--warning-foreground));\r\n  --_mono-chip-info: var(--mono-chip-info, var(--info));\r\n  --_mono-chip-info-foreground: var(--mono-chip-info-foreground, var(--info-foreground));\r\n  --_mono-chip-teal: var(--mono-chip-teal, var(--teal));\r\n  --_mono-chip-teal-foreground: var(--mono-chip-teal-foreground, var(--teal-foreground));\r\n  --_mono-chip-purple: var(--mono-chip-purple, var(--purple));\r\n  --_mono-chip-purple-foreground: var(--mono-chip-purple-foreground, var(--purple-foreground));\r\n  --_mono-chip-neutral: var(--mono-chip-neutral, var(--neutral));\r\n  --_mono-chip-neutral-foreground: var(--mono-chip-neutral-foreground, var(--neutral-foreground));\r\n  --_mono-chip-dark: var(--mono-chip-dark, var(--dark));\r\n  --_mono-chip-dark-foreground: var(--mono-chip-dark-foreground, var(--dark-foreground));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border\r\n     border-transparent px-2 py-0.5 text-xs font-medium, [&>svg]:size-3 */\r\n  --_mono-chip-height: var(--mono-chip-height, var(--_mono-chip-height-preset, var(--mono-chip-height-md, calc(var(--mono-spacing) * 5))));\r\n  --_mono-chip-padding-x: var(--mono-chip-padding-x, var(--_mono-chip-padding-x-preset, var(--mono-chip-padding-x-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-chip-gap: var(--mono-chip-gap, var(--_mono-chip-gap-preset, var(--mono-chip-gap-md, var(--mono-spacing))));\r\n  --_mono-chip-font-size: var(--mono-chip-font-size, var(--_mono-chip-font-size-preset, var(--mono-chip-font-size-md, var(--mono-text-xs))));\r\n  --_mono-chip-glyph-size: var(--mono-chip-glyph-size, var(--_mono-chip-glyph-size-preset, var(--mono-chip-glyph-size-md, calc(var(--mono-spacing) * 3))));\r\n  /* `rounded-4xl` is the pill; a `rounded` step writes the preset tier, and an\r\n     explicit --mono-chip-radius still wins over the prop */\r\n  --_mono-chip-radius: var(--mono-chip-radius, var(--_mono-chip-radius-preset, var(--mono-radius-4xl)));\r\n  --_mono-chip-border-width: var(--mono-chip-border-width, var(--mono-border-width));\r\n  --_mono-chip-font-weight: var(--mono-chip-font-weight, var(--mono-font-weight-medium));\r\n\r\n  --_mono-chip-ring-color: var(--mono-chip-ring-color, var(--ring));\r\n  --_mono-chip-ring-width: var(--mono-chip-ring-width, var(--mono-ring-width));\r\n  --_mono-chip-ring-alpha: var(--mono-chip-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  max-width: 100%;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* =========================================\r\n   The badge box — `.badge`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — inline-flex w-fit shrink-0\r\n   items-center justify-center overflow-hidden whitespace-nowrap\r\n   [&>svg]:pointer-events-none */\r\n:where([mono-chip]) [mono-main] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  box-sizing: border-box;\r\n  height: var(--_mono-chip-height);\r\n  gap: var(--_mono-chip-gap);\r\n  padding-inline: var(--_mono-chip-padding-x);\r\n  border: var(--_mono-chip-border-width) solid transparent;\r\n  border-radius: var(--_mono-chip-radius);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-chip-font-size);\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  letter-spacing: var(--mono-chip-letter-spacing, normal);\r\n  text-transform: var(--mono-chip-text-transform, none);\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  /* `transition-all`, narrowed to what a chip actually animates */\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    opacity var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-ring, 0 0 #0000);\r\n}\r\n\r\n/* A LINK chip is a control, not prose. Host stylesheets routinely paint a bare\r\n   `a` — VitePress's own `.vp-doc a` sets a weight and an underline at (0,1,1) —\r\n   and that out-specifies the (0,1,0) part rule above, so the anchor form\r\n   restates what such a rule hijacks, one attribute heavier. Measured: the docs'\r\n   light link chip came out at weight 500 while the shadow one, beyond that\r\n   sheet's reach, kept the component's own 600. The colour needs no restatement:\r\n   every variant rule is already (0,2,0).\r\n\r\n   DEVIATION from the specificity contract, for this form only — a `cssClass.main`\r\n   utility that sets font-weight or text-decoration on a LINK chip now needs\r\n   `!important` (or the `--mono-chip-font-weight` knob). */\r\n[mono-chip] a[mono-main] {\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  text-decoration: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-chip]) [mono-main]:focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-chip-ring-color);\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-ring-color) var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE badge; md is its `.badge`\r\n   ========================================= */\r\n\r\n/* The ladder steps the same way the control heights do: 4px of box and one type\r\n   step per size, with md pinned to vega's h-5 / px-2 / text-xs. */\r\n[mono-chip][mono-size=\"xs\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xs, calc(var(--mono-spacing) * 4));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xs, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xs, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xs, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"sm\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-sm, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-sm, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-sm, calc(var(--mono-spacing) * 0.875));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-sm, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-sm, calc(var(--mono-spacing) * 2.75));\r\n}\r\n\r\n[mono-chip][mono-size=\"lg\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-lg, calc(var(--mono-spacing) * 6));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-lg, calc(var(--mono-spacing) * 1.25));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-lg, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-lg, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"xl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xl, calc(var(--mono-spacing) * 7));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xl, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xl, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xl, calc(var(--mono-spacing) * 4));\r\n}\r\n\r\n[mono-chip][mono-size=\"xxl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xxl, calc(var(--mono-spacing) * 8));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xxl, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xxl, var(--mono-text-base));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xxl, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Rounded — EXTENSION: the shared corner ladder. Unset is vega's rounded-4xl.\r\n   ========================================= */\r\n\r\n[mono-chip][mono-rounded=\"none\"] { --_mono-chip-radius-preset: 0; }\r\n[mono-chip][mono-rounded=\"xs\"] { --_mono-chip-radius-preset: calc(var(--mono-radius-sm) / 2); }\r\n[mono-chip][mono-rounded=\"sm\"] { --_mono-chip-radius-preset: var(--mono-radius-sm); }\r\n[mono-chip][mono-rounded=\"md\"] { --_mono-chip-radius-preset: var(--mono-radius-md); }\r\n[mono-chip][mono-rounded=\"lg\"] { --_mono-chip-radius-preset: var(--mono-radius-lg); }\r\n[mono-chip][mono-rounded=\"xl\"] { --_mono-chip-radius-preset: var(--mono-radius-xl); }\r\n[mono-chip][mono-rounded=\"xxl\"] { --_mono-chip-radius-preset: var(--mono-radius-2xl); }\r\n[mono-chip][mono-rounded=\"full\"] { --_mono-chip-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n   Colours — each publishes the pair the variants read\r\n   ========================================= */\r\n\r\n[mono-chip][mono-color=\"primary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='secondary'] —\r\n   bg-secondary text-secondary-foreground: a SURFACE pair, not a hue, so its\r\n   `soft` and `solid` land on the same muted plate (shadcn's meaning). */\r\n[mono-chip][mono-color=\"secondary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-secondary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-secondary-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"success\"] {\r\n  --_mono-chip-c: var(--_mono-chip-success);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-success-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"danger\"] {\r\n  --_mono-chip-c: var(--_mono-chip-danger);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-danger-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"warning\"] {\r\n  --_mono-chip-c: var(--_mono-chip-warning);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-warning-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"info\"] {\r\n  --_mono-chip-c: var(--_mono-chip-info);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-info-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"teal\"] {\r\n  --_mono-chip-c: var(--_mono-chip-teal);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-teal-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"purple\"] {\r\n  --_mono-chip-c: var(--_mono-chip-purple);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-purple-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"neutral\"] {\r\n  --_mono-chip-c: var(--_mono-chip-neutral);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-neutral-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"dark\"] {\r\n  --_mono-chip-c: var(--_mono-chip-dark);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `soft` is the DEFAULT and is Basecoat's tonal badge.\r\n   basecoat@1.0.2 styles/vega.css .badge[data-variant='destructive'] —\r\n   bg-destructive/10 text-destructive dark:bg-destructive/20 (the alpha pair\r\n   travels as --mono-mode-tint, which is what makes it dark-mode correct). */\r\n[mono-chip]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint), transparent)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-soft-border-color, transparent));\r\n}\r\n\r\n/* `secondary` is a surface, not a hue: tinting it would wash it out, so the\r\n   soft chip wears the plate itself (`.badge[data-variant='secondary']`). */\r\n[mono-chip][mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, var(--_mono-chip-secondary)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-secondary-foreground)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — bg-primary text-primary-foreground */\r\n[mono-chip][mono-variant=\"solid\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-solid-bg, var(--_mono-chip-c)));\r\n  color: var(--mono-chip-color, var(--mono-chip-solid-color, var(--_mono-chip-c-foreground)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-solid-border-color, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='outline'] — border-border\r\n   text-foreground — EXTENSION: the edge and the ink take the role's colour so\r\n   `outline` reads as the same family as the other two. */\r\n[mono-chip][mono-variant=\"outline\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-outline-bg, transparent));\r\n  color: var(--mono-chip-color, var(--mono-chip-outline-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-outline-border-color, var(--_mono-chip-c)));\r\n}\r\n\r\n[mono-chip][mono-color=\"secondary\"][mono-variant=\"outline\"] > [mono-main] {\r\n  color: var(--mono-chip-color, var(--foreground));\r\n  border-color: var(--mono-chip-border-color, var(--border));\r\n}\r\n\r\n/* =========================================\r\n   Interactive — a clickable / linked chip\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — [a]:hover:bg-primary/80: only a LINK badge reacts upstream; ours also\r\n   reacts when `clickable` made it a button (same gesture, no href). */\r\n[mono-chip][mono-clickable] > [mono-main] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"solid\"] > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) 80%, transparent);\r\n  }\r\n\r\n  /* .badge[data-variant='destructive'] — [a]:hover:bg-destructive/20 */\r\n  [mono-chip][mono-clickable]:not([mono-disabled]):is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint-hover), transparent);\r\n  }\r\n\r\n  /* `secondary` is a plate, not a tint: darken it the way the secondary button\r\n     does (basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']). */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklch, var(--_mono-chip-secondary), var(--foreground) 5%);\r\n  }\r\n\r\n  /* .badge[data-variant='outline'] — [a]:hover:bg-muted */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"outline\"] > [mono-main]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — `selected` rings the chip in its own colour, the one state\r\n   Basecoat's badge has no equivalent for (it is not a toggle upstream). */\r\n[mono-chip][mono-selected] > [mono-main] {\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-c) var(--_mono-chip-ring-alpha), transparent);\r\n  border-color: var(--_mono-chip-c);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none\r\n   disabled:opacity-50 */\r\n[mono-chip][mono-disabled] > [mono-main] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Inner content\r\n   ========================================= */\r\n\r\n:where([mono-chip]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-chip]) [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1;\r\n}\r\n\r\n/* EXTENSION — the leading status dot. It is the role's colour at full strength,\r\n   which reads on both the tinted `soft` plate and the solid one (`currentColor`\r\n   there). */\r\n:where([mono-chip]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  height: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* The shadow build renders the icon wrapper on every chip and marks the empty\r\n   one; this hides it so both builds measure the same content box. */\r\n[mono-chip] [data-mono-slot=\"icon\"][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* `[&>svg]:size-3!` — our icon is a slotted element or a mask span, sized by\r\n   the same token as the close glyph */\r\n:where([mono-chip]) [data-mono-slot=\"icon\"],\r\n:where([mono-chip]) [mono-main] > svg {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-chip]) [data-mono-slot=\"icon\"] > * {\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 .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, [&>svg]:size-3.5 — the same affordance a field chip uses */\r\n:where([mono-chip]) [mono-close] {\r\n  appearance: none;\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-full);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  opacity: 0.5;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-close-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-chip]) [mono-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n:where([mono-chip]) [mono-close]:focus-visible {\r\n  outline: none;\r\n  opacity: 1;\r\n  --_mono-chip-close-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, currentColor var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-chip]) [mono-close] :is([mono-glyph], svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-chip]) [mono-close] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Status dot — EXTENSION: `<mono-status-dot>`, a label with a state dot\r\n   ========================================= */\r\n\r\nmono-status-dot {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-status-dot] {\r\n  --_mono-status-dot-c: var(--mono-status-dot-color, var(--success));\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--mono-status-dot-gap, calc(var(--mono-spacing) * 1.5));\r\n  font-family: inherit;\r\n  font-size: var(--mono-status-dot-font-size, var(--mono-text-xs));\r\n  font-weight: var(--mono-status-dot-font-weight, var(--mono-font-weight-medium));\r\n  line-height: 1;\r\n  color: var(--_mono-status-dot-c);\r\n}\r\n\r\n[mono-status-dot][mono-status=\"offline\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--neutral)); }\r\n[mono-status-dot][mono-status=\"busy\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--destructive)); }\r\n[mono-status-dot][mono-status=\"away\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--warning)); }\r\n/* `custom` takes the colour from the `color` prop, which the element writes\r\n   inline as --mono-status-dot-color */\r\n[mono-status-dot][mono-status=\"custom\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--primary)); }\r\n\r\n:where([mono-status-dot]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  height: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n[mono-status-dot][mono-pulse] [mono-dot] {\r\n  animation: mono-status-pulse 1.8s var(--mono-ease) infinite;\r\n}\r\n\r\n@keyframes mono-status-pulse {\r\n  0%,\r\n  100% {\r\n    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);\r\n  }\r\n\r\n  50% {\r\n    box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-chip]) :is([mono-main], [mono-close]) {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-status-dot][mono-pulse] [mono-dot] {\r\n    animation: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/chip/mono-status-dot.ts
 /**

package/dist/ui/date.js

@@ -1,11 +1,11 @@
-import { d as buildSizeStyle } from "../mono-ui-KOBJcnXk.js";
-import { t as customElement } from "../mono-element-Bc9wElPy.js";
+import { d as buildSizeStyle } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { t as FieldTooltipController } from "../field-tooltip-FyMi9vNM.js";
-import { t as FieldValidationController } from "../field-validation-CHHQi1zl.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
+import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -731,16 +731,9 @@ const MonoDateCore = (superClass) => {
 	return MonoDateCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\date\date.css?raw.js
-var date_css_raw_default = "/* @unocss-include */\r\n\r\n/* flatpickr's base stylesheet. The calendar renders into <body>, so this must\r\n   live in the global bundle (dist/ui/index.css) — that's why date.css is\r\n   @imported from src/entries/index.css. */\r\n@import 'flatpickr/dist/flatpickr.css';\r\n\r\n/* =========================================================================\r\n   mono-date — the mono-input box (a port of Basecoat's `.input-group` with a\r\n   leading icon, basecoat-css@1.0.2, vega style) around a flatpickr field, plus\r\n   a calendar restyled in Basecoat's popover idiom.\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-date size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Start\">\r\n     <div mono-date mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Start</label>\r\n       <div mono-field>\r\n         <span mono-prefix><span mono-icon class=\"mono-icon i-mdi-calendar-outline\"></span></span>\r\n         <input mono-native type=\"text\" placeholder=\"Pick a date\" />\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these attributes on its wrapper (both builds); the old classes\r\n   (`.mono-date.sm.filled`) are still emitted as inert hooks until 2.0 but no\r\n   rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-date]                                   ≡ .field (flex column gap-3)\r\n     [mono-date] > [mono-label]                    ≡ .field > label / .label\r\n     [mono-date] > [mono-field]                    ≡ .input-group (h-9 rounded-md border-input shadow-xs)\r\n     [mono-field] > [mono-prefix] > [mono-icon]    ≡ .input-group > span[data-align='start'] > svg (ps-2, size-4, muted)\r\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, ps-1.5 after an affix, text-sm)\r\n     [mono-field] > [mono-clear] > [mono-icon]     ≡ .input-group > button[data-align='end']:has(> svg) (ghost, size-6)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"error\"]               ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"success\"]             ≡ EXTENSION (the invalid pattern in --success)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the --mono-control-height-* ladder)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: bottom edge only, no ring)\r\n     .flatpickr-calendar.mono-flatpickr            ≡ [data-popover] frame (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n                                                     + EXTENSION: shadcn Calendar values (Basecoat 1.0.2 ships no calendar)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-field], [mono-prefix] > [mono-icon], [mono-native], [mono-clear] >\r\n   [mono-icon], [mono-message-wrap] > [mono-message=\"helper|error|success\"].\r\n\r\n   The calendar renders into <body> (both builds), so it is styled through\r\n   flatpickr's own classes under our `.mono-flatpickr` marker and reads the page\r\n   tokens directly; the element copies the field's accent onto it as\r\n   `--cal-accent` / `--cal-accent-foreground` so it follows the `color` prop.\r\n\r\n   FLAVORS set the same knobs as mono-input, renamed `--mono-date-*` (see\r\n   input.css) plus `--mono-date-calendar-{radius,shadow,ring,day-radius}`. Every\r\n   fallback here is vega's value.\r\n   ========================================================================= */\r\n\r\nmono-date {\r\n  display: block;\r\n}\r\n\r\n[mono-date] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-date-text: var(--mono-date-color, var(--mono-date-text, var(--foreground)));\r\n  --_mono-date-placeholder: var(--mono-date-placeholder, var(--muted-foreground));\r\n  --_mono-date-muted: var(--mono-date-muted, var(--muted-foreground));\r\n  --_mono-date-primary: var(--mono-date-primary, var(--_mono-date-primary-preset, var(--ring)));\r\n  --_mono-date-primary-foreground: var(--mono-date-primary-foreground, var(--_mono-date-primary-foreground-preset, var(--primary-foreground)));\r\n  --_mono-date-danger: var(--mono-date-danger, var(--destructive));\r\n  --_mono-date-success: var(--mono-date-success, var(--success));\r\n  --_mono-date-warning: var(--mono-date-warning, var(--warning));\r\n  --_mono-date-info: var(--mono-date-info, var(--info));\r\n  --_mono-date-teal: var(--mono-date-teal, var(--teal));\r\n  --_mono-date-purple: var(--mono-date-purple, var(--purple));\r\n  --_mono-date-neutral: var(--mono-date-neutral, var(--neutral));\r\n  --_mono-date-dark: var(--mono-date-dark, var(--dark));\r\n  --_mono-date-secondary: var(--mono-date-secondary, var(--muted-foreground));\r\n\r\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\r\n  --_mono-date-ring-color: var(--mono-date-ring-color, var(--mono-date-focus-color, var(--_mono-date-primary)));\r\n  --_mono-date-ring-width: var(--mono-date-ring-width, var(--_mono-date-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-date-ring-alpha: var(--mono-date-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-date-border-color: var(--mono-date-rest-border, var(--mono-date-border-color, var(--mono-date-border, var(--_mono-date-border-color-preset, var(--input)))));\r\n  --_mono-date-bg: var(--mono-date-bg, var(--mono-date-surface, var(--_mono-date-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-date-shadow: var(--mono-date-shadow, var(--_mono-date-shadow-preset, 0 0 #0000));\r\n  --_mono-date-affix-padding: var(--mono-date-affix-padding, var(--_mono-date-affix-padding-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-date>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\r\n  --_mono-date-height: var(--mono-date-height-md, var(--mono-control-height-md));\r\n  --_mono-date-radius: var(--mono-date-radius-md, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-md, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-md, var(--mono-text-sm));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-date-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-date-text);\r\n}\r\n\r\n[mono-date],\r\n[mono-date] *,\r\n[mono-date] *::before,\r\n[mono-date] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-date] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the field's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: the shared --mono-control-height-* ladder; text follows .btn's steps\r\n   ========================================= */\r\n\r\n@media (width < 48rem) {\r\n  [mono-date]:is(:not([mono-size]), [mono-size=\"md\"]) {\r\n    --_mono-date-font-size: var(--mono-date-font-md, var(--mono-text-base));\r\n    --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-md, var(--mono-text-base--lh)));\r\n  }\r\n}\r\n\r\n[mono-date][mono-size=\"xs\"] {\r\n  --_mono-date-height: var(--mono-date-height-xs, var(--mono-control-height-xs));\r\n  --_mono-date-radius: var(--mono-date-radius-xs, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xs, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-date-font-size: var(--mono-date-font-xs, var(--mono-text-xs));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-date][mono-size=\"sm\"] {\r\n  --_mono-date-height: var(--mono-date-height-sm, var(--mono-control-height-sm));\r\n  --_mono-date-radius: var(--mono-date-radius-sm, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-sm, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-sm, var(--mono-date-font-md, var(--mono-text-sm)));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 5);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-date][mono-size=\"lg\"] {\r\n  --_mono-date-height: var(--mono-date-height-lg, var(--mono-control-height-lg));\r\n  --_mono-date-radius: var(--mono-date-radius-lg, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-lg, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-date-font-size: var(--mono-date-font-lg, var(--mono-date-font-md, var(--mono-text-sm)));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-date][mono-size=\"xl\"] {\r\n  --_mono-date-height: var(--mono-date-height-xl, var(--mono-control-height-xl));\r\n  --_mono-date-radius: var(--mono-date-radius-xl, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xl, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-date-font-size: var(--mono-date-font-xl, var(--mono-text-base));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-date][mono-size=\"xxl\"] {\r\n  --_mono-date-height: var(--mono-date-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-date-radius: var(--mono-date-radius-xxl, var(--_mono-date-radius-preset, var(--mono-date-radius, var(--mono-radius-md))));\r\n  --_mono-date-padding-x: var(--mono-date-padding-x-xxl, var(--mono-date-padding-x, var(--_mono-date-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-date-font-size: var(--mono-date-font-xxl, var(--mono-text-lg));\r\n  --_mono-date-line-height: var(--mono-date-line-height, var(--mono-date-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-date-affix-icon: var(--mono-date-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-date-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-date-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   shadow-xs bg-transparent (dark:bg-input/30 via --mono-mode-surface) */\r\n[mono-date]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-date-bg-preset: var(--mono-date-outline-bg);\r\n  --_mono-date-border-color-preset: var(--mono-date-outline-border-color);\r\n  --_mono-date-side-border-color-preset: var(--mono-date-outline-side-border-color);\r\n  --_mono-date-shadow-preset: var(--mono-date-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-date-ring-width-preset: var(--mono-date-outline-ring-width);\r\n  --_mono-date-radius-preset: var(--mono-date-outline-radius);\r\n  --_mono-date-padding-x-preset: var(--mono-date-outline-padding-x);\r\n  --_mono-date-affix-padding-preset: var(--mono-date-outline-affix-padding);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group */\r\n[mono-date][mono-variant=\"filled\"] {\r\n  --_mono-date-bg-preset: var(--mono-date-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-date-border-color-preset: transparent;\r\n  --_mono-date-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group */\r\n[mono-date][mono-variant=\"underlined\"] {\r\n  --_mono-date-bg-preset: transparent;\r\n  --_mono-date-side-border-color-preset: transparent;\r\n  --_mono-date-shadow-preset: 0 0 #0000;\r\n  --_mono-date-ring-width-preset: 0px;\r\n  --_mono-date-radius-preset: 0;\r\n  --_mono-date-padding-x-preset: 0;\r\n  --_mono-date-affix-padding-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the accent: the focus ring + the calendar's\r\n   selected day. Primary is Basecoat's --ring for the ring and --primary for the\r\n   calendar (copied by the element as --cal-accent).\r\n   ========================================= */\r\n\r\n[mono-date]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-date-primary-preset: var(--ring);\r\n  --_mono-date-primary-foreground-preset: var(--primary-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--primary));\r\n}\r\n[mono-date][mono-color=\"secondary\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-secondary);\r\n  --_mono-date-primary-foreground-preset: var(--background);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-secondary));\r\n}\r\n[mono-date][mono-color=\"success\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-success);\r\n  --_mono-date-primary-foreground-preset: var(--success-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-success));\r\n}\r\n[mono-date][mono-color=\"danger\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-danger);\r\n  --_mono-date-primary-foreground-preset: var(--destructive-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-danger));\r\n}\r\n[mono-date][mono-color=\"warning\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-warning);\r\n  --_mono-date-primary-foreground-preset: var(--warning-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-warning));\r\n}\r\n[mono-date][mono-color=\"info\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-info);\r\n  --_mono-date-primary-foreground-preset: var(--info-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-info));\r\n}\r\n[mono-date][mono-color=\"teal\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-teal);\r\n  --_mono-date-primary-foreground-preset: var(--teal-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-teal));\r\n}\r\n[mono-date][mono-color=\"purple\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-purple);\r\n  --_mono-date-primary-foreground-preset: var(--purple-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-purple));\r\n}\r\n[mono-date][mono-color=\"neutral\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-neutral);\r\n  --_mono-date-primary-foreground-preset: var(--neutral-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-neutral));\r\n}\r\n[mono-date][mono-color=\"dark\"] {\r\n  --_mono-date-primary-preset: var(--_mono-date-dark);\r\n  --_mono-date-primary-foreground-preset: var(--dark-foreground);\r\n  --_mono-date-calendar-accent: var(--mono-date-calendar-accent, var(--_mono-date-dark));\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-date] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-date-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-date-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-date-label-line-height, 1);\r\n  font-weight: var(--mono-date-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-date-label-text-transform, none);\r\n  letter-spacing: var(--mono-date-label-letter-spacing, normal);\r\n  color: var(--_mono-date-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-date][mono-disabled] > [mono-label],\r\n[mono-date]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-date][mono-validation-state=\"error\"] > [mono-label] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n[mono-date] [mono-required-mark] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n/* `tooltip` prop — the info icon at the end of the label row (the label's\r\n   flex gap spaces it). `pointer-events` is restored because a disabled field\r\n   switches its label's off, and a disabled field is exactly where the reason\r\n   is worth a hover. Knobs: --mono-date-label-tooltip-size / -color / -opacity. */\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-date-label-tooltip-size, 1.1em);\r\n  color: var(--mono-date-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-date-label-tooltip-opacity, 0.6);\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n}\r\n\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where([mono-date]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n/* =========================================\r\n   The field — the bordered box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group */\r\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border border-input\r\n   shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n[mono-date] > [mono-field] {\r\n  --_mono-date-bc: var(--_mono-date-border-color);\r\n  --_mono-date-side-bc: var(--mono-date-side-border-color, var(--_mono-date-side-border-color-preset, var(--_mono-date-bc)));\r\n  --_mono-date-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-date-height);\r\n  padding-block: var(--mono-date-padding-y, 0);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-date-bc);\r\n  border-top-color: var(--_mono-date-side-bc);\r\n  border-inline-color: var(--_mono-date-side-bc);\r\n  border-radius: var(--_mono-date-radius);\r\n  background: var(--_mono-date-bg);\r\n  color: var(--_mono-date-text);\r\n  box-shadow: var(--_mono-date-ring), var(--_mono-date-shadow);\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-within {\r\n    --_mono-date-bc: var(--_mono-date-ring-color);\r\n    --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-ring-color) var(--_mono-date-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20 */\r\n[mono-date][mono-validation-state=\"error\"] > [mono-field],\r\n[mono-date] > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-date-bc: var(--mono-mode-invalid-border);\r\n  --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — success is the invalid pattern in --success */\r\n[mono-date][mono-validation-state=\"success\"] > [mono-field] {\r\n  --_mono-date-bc: color-mix(in oklab, var(--_mono-date-success) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-date-ring: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-success) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — readonly: a muted surface */\r\n[mono-date][mono-readonly] > [mono-field] {\r\n  background: var(--mono-date-readonly-bg, var(--muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50 */\r\n[mono-date][mono-disabled] > [mono-field],\r\n[mono-date]:not([mono-readonly]) > [mono-field]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background: var(--mono-date-disabled-bg, var(--_mono-date-bg));\r\n}\r\n\r\n/* =========================================\r\n   The native input (flatpickr's altInput takes the same rule: it replaces the\r\n   native in the DOM and inherits its class + attributes)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) */\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control]) — px-2.5 py-1 text-sm */\r\n[mono-date] [mono-native],\r\n[mono-date] [mono-field] > input.flatpickr-input.altInput {\r\n  display: block;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-date-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-date-font-size);\r\n  line-height: var(--_mono-date-line-height);\r\n  padding-inline: var(--_mono-date-padding-x);\r\n  padding-block: 0;\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-date-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    pointer-events: none;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) — ps-1.5 */\r\n[mono-date] > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > :is([mono-native], input.flatpickr-input.altInput) {\r\n  padding-inline-start: var(--mono-date-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n[mono-date] > [mono-field]:has(> [mono-clear]) > :is([mono-native], input.flatpickr-input.altInput) {\r\n  padding-inline-end: var(--mono-date-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* =========================================\r\n   The leading icon\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(span, [role='group'], header, footer), .input-group > :is(svg, kbd, .popover, .dropdown-menu)\r\n   — text-muted-foreground select-none, svg size-4; [data-align='start'] ps-2 */\r\n[mono-date] [mono-prefix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  padding-inline-start: var(--_mono-date-affix-padding);\r\n  color: var(--_mono-date-muted);\r\n  user-select: none;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-date] [mono-prefix] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-date-affix-icon);\r\n  height: var(--_mono-date-affix-icon);\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* =========================================\r\n   Clear button — a ghost icon button in the end slot\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg)))\r\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5; me-1 */\r\n[mono-date] [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-date-clear);\r\n  height: var(--_mono-date-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-inline-end: var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: var(--mono-date-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-date-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-date-ring-width) color-mix(in oklab, var(--_mono-date-ring-color) var(--_mono-date-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted hover:text-foreground */\r\n@media (hover: hover) {\r\n  [mono-date] [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-date-text);\r\n  }\r\n}\r\n\r\n[mono-date] [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-date-clear-glyph);\r\n  height: var(--_mono-date-clear-glyph);\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[mono-date] > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n\r\n[mono-date] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-date] [mono-message] {\r\n  font-size: var(--mono-date-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-date-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-date-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-date] [mono-message=\"error\"] {\r\n  color: var(--_mono-date-danger);\r\n}\r\n\r\n[mono-date] [mono-message=\"success\"] {\r\n  color: var(--_mono-date-success);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-date] > [mono-field],\r\n  [mono-date] [mono-clear] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   flatpickr calendar — restyled in Basecoat's idiom\r\n   -----------------------------------------\r\n   The calendar renders into <body>, so it reads the page tokens and cannot see\r\n   the field's resolvers; the element copies the field's accent onto it as\r\n   `--cal-accent` / `--cal-accent-foreground` (inline) so it follows the `color`\r\n   prop. Every rule is scoped to our `.mono-flatpickr` marker; flatpickr's own\r\n   geometry (day cells, container widths) is kept — only colour, radius,\r\n   typography and the frame are ours.\r\n\r\n   basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — the frame:\r\n   bg-popover text-popover-foreground ring-1 ring-foreground/10 rounded-md\r\n   shadow-md. EXTENSION: the day / caption / nav values are shadcn's Calendar\r\n   (Basecoat 1.0.2 ships no calendar): day size-8 rounded-md text-sm,\r\n   hover / today / in-range bg-accent text-accent-foreground, selected\r\n   bg-primary text-primary-foreground, outside days text-muted-foreground/50,\r\n   caption text-sm font-medium, weekdays text-muted-foreground text-[0.8rem].\r\n   ========================================= */\r\n.flatpickr-calendar.mono-flatpickr {\r\n  --cal-bg: var(--mono-date-calendar-bg, var(--popover));\r\n  --cal-text: var(--mono-date-calendar-color, var(--popover-foreground));\r\n  --cal-muted: var(--muted-foreground);\r\n  --cal-faint: color-mix(in oklab, var(--muted-foreground) 50%, transparent);\r\n  --cal-border: var(--border);\r\n  --cal-soft: var(--accent);\r\n  --cal-soft-foreground: var(--accent-foreground);\r\n  --cal-accent: var(--primary);\r\n  --cal-accent-foreground: var(--primary-foreground);\r\n  --cal-radius: var(--mono-date-calendar-day-radius, var(--mono-radius-md));\r\n\r\n  background: var(--cal-bg);\r\n  border: 0;\r\n  border-radius: var(--mono-date-calendar-radius, var(--mono-radius-md));\r\n  box-shadow: var(--mono-date-calendar-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-date-calendar-shadow, var(--mono-shadow-md));\r\n  color: var(--cal-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n}\r\n\r\n/* a popover has no pointer arrow */\r\n.flatpickr-calendar.mono-flatpickr::before,\r\n.flatpickr-calendar.mono-flatpickr::after {\r\n  display: none;\r\n}\r\n\r\n/* months / header — text-sm font-medium */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-current-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-current-month input.cur-year {\r\n  color: var(--cal-text);\r\n  fill: var(--cal-text);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* nav — .btn[data-variant='outline'][data-size='icon-sm']: size-7 rounded-md\r\n   border-border bg-background hover:bg-muted, painted flat here */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month {\r\n  color: var(--cal-muted);\r\n  fill: var(--cal-muted);\r\n  border-radius: var(--cal-radius);\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month svg,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month svg {\r\n  fill: currentColor;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month:hover {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-prev-month:hover svg,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-next-month:hover svg {\r\n  fill: var(--cal-soft-foreground);\r\n}\r\n\r\n/* month dropdown — a native <select>. Its popup list is drawn by the browser\r\n   from the select's OWN background-color and the option colours (a transparent\r\n   select falls back to the OS palette, which is what mismatched the dark popover),\r\n   so the select carries the popover surface and never changes it on hover. */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-text);\r\n  color-scheme: inherit;\r\n  font-weight: var(--mono-font-weight-medium);\r\n  border-radius: var(--cal-radius);\r\n  transition-property: color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months:hover {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-accent);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {\r\n  background: var(--cal-bg);\r\n  color: var(--cal-text);\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:checked {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n/* year stepper */\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper:hover {\r\n  background: var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span {\r\n  border-color: var(--cal-border);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span:hover {\r\n  background: var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span.arrowUp::after {\r\n  border-bottom-color: var(--cal-muted);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .numInputWrapper span.arrowDown::after {\r\n  border-top-color: var(--cal-muted);\r\n}\r\n\r\n/* weekdays — text-muted-foreground text-[0.8rem] font-normal */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekdays {\r\n  background: transparent;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr span.flatpickr-weekday {\r\n  background: transparent;\r\n  color: var(--cal-muted);\r\n  font-size: 0.8rem;\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n/* days — rounded-md text-sm; hover bg-accent; today bg-accent; selected bg-primary */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day {\r\n  color: var(--cal-text);\r\n  border: 1px solid transparent;\r\n  border-radius: var(--cal-radius);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day:focus {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.today {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.startRange:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.endRange:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.selected.today {\r\n  background: var(--cal-accent);\r\n  border-color: var(--cal-accent);\r\n  color: var(--cal-accent-foreground);\r\n}\r\n\r\n/* range middle — bg-accent, squared between the two ends */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.inRange {\r\n  background: var(--cal-soft);\r\n  border-color: transparent;\r\n  color: var(--cal-soft-foreground);\r\n  border-radius: 0;\r\n  box-shadow: -5px 0 0 var(--cal-soft), 5px 0 0 var(--cal-soft);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.prevMonthDay,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.nextMonthDay {\r\n  color: var(--cal-faint);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.flatpickr-disabled,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-day.flatpickr-disabled:hover {\r\n  color: var(--cal-faint);\r\n  background: transparent;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* week numbers */\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekwrapper .flatpickr-weekday,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-weekwrapper span.flatpickr-day {\r\n  color: var(--cal-faint);\r\n}\r\n\r\n/* time */\r\n.flatpickr-calendar.mono-flatpickr.hasTime .flatpickr-time {\r\n  border-top: 1px solid var(--cal-border);\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-time-separator,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm {\r\n  color: var(--cal-text);\r\n  background: transparent;\r\n}\r\n\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time input:focus,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm:hover,\r\n.flatpickr-calendar.mono-flatpickr .flatpickr-time .flatpickr-am-pm:focus {\r\n  background: var(--cal-soft);\r\n  color: var(--cal-soft-foreground);\r\n}\r\n\r\n/* the inline calendar (`inline`) sits in the page flow, on the field's own surface */\r\n.flatpickr-calendar.mono-flatpickr.inline {\r\n  box-shadow: var(--mono-date-calendar-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent));\r\n}\r\n\r\n/* =========================================\r\n   label-position — the slots form/label-position.css reads\r\n   (top / notched / left / right; public knobs: --mono-date-label-width,\r\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\r\n   ========================================= */\r\n\r\n[mono-date][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-date-label-width, auto);\r\n  --_mono-lp-gap: var(--mono-date-label-side-gap, calc(var(--mono-spacing) * 3));\r\n  --_mono-lp-height: var(--_mono-date-height);\r\n  --_mono-lp-box-min: var(--_mono-date-height);\r\n  --_mono-lp-padding-x: var(--_mono-date-padding-x);\r\n  --_mono-lp-padding-y: 0px;\r\n  --_mono-lp-font: var(--mono-date-label-notch-font-size, var(--mono-text-xs));\r\n  --_mono-lp-notch-bg: var(--mono-date-label-notch-bg, var(--background));\r\n  --_mono-lp-field-bg: var(--_mono-date-bg);\r\n}\r\n";
-
 //#endregion
 //#region src/components/date/mono-date.ts
 let MonoDate = class MonoDate extends MonoDateCore(LitElement) {
-	static {
-		this.styles = [unsafeCSS(date_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/drawer.js

@@ -1,12 +1,12 @@
-import { g as monoHostChildNodes } from "../mono-ui-KOBJcnXk.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
 import { i as registerPopupLayer, o as unregisterPopupLayer, r as refreshPopupStack, t as getOpenPopupLayers } from "../popup-stack-C64WCuXq.js";
-import { t as customElement } from "../mono-element-Bc9wElPy.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-BnBR29E7.js";
-import { i as pathOwnedBy } from "../popup-portal-C8ttHDRX.js";
+import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import { i as pathOwnedBy } from "../popup-portal-CINuVjNY.js";
 import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../breakpoints-DllybT82.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 
 //#region src/components/drawer/drawer-core.ts
@@ -758,10 +758,6 @@ const MonoDrawerCore = (superClass) => {
 	return MonoDrawerCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\drawer\drawer.css?raw.js
-var drawer_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-drawer — a port of Basecoat's `.drawer` (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-drawer size=\"lg\" color=\"success\" position=\"left\" model-value>\r\n     <div mono-drawer mono-size=\"lg\" mono-color=\"success\" mono-position=\"left\"\r\n          mono-open role=\"dialog\" aria-modal=\"true\">\r\n       <div mono-overlay></div>\r\n       <div mono-panel role=\"document\">\r\n         <div mono-resizer role=\"separator\"></div>\r\n         <div mono-header>\r\n           <div mono-heading>\r\n             <div mono-title>Filters</div>\r\n             <div mono-subtitle>Narrow the results</div>\r\n           </div>\r\n           <button mono-close type=\"button\" aria-label=\"Close drawer\">…</button>\r\n         </div>\r\n         <div mono-body>…</div>\r\n         <div mono-footer>…</div>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-position])` = RIGHT — upstream's\r\n   unqualified side is `bottom`, ours is `right`). The element writes them on its\r\n   ROOT — the `<body>` portal in the light build, an inner root `<div>` in the\r\n   shadow one — along with every state below. The old classes\r\n   (`.mono-drawer.md.primary.position-right.open`) 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-drawer]        ≡ .drawer (the <dialog>) — DEVIATION: a var scope, not a\r\n                            `fixed inset-0` box, because the overlay and the panel\r\n                            are each `position: fixed` and this component owns its\r\n                            own layer through `composables/popup-stack`\r\n     [mono-overlay]       ≡ .drawer::backdrop (bg-black/10 backdrop-blur-xs) — the\r\n                            fill is `--mono-mode-backdrop`, a token, since a\r\n                            pseudo-element cannot be reached from a shadow sheet\r\n     [mono-panel]         ≡ .drawer > * (fixed flex h-auto flex-col\r\n                            transition-transform duration-500\r\n                            ease-[cubic-bezier(0.32,0.72,0,1)], bg-popover\r\n                            text-popover-foreground text-sm), plus the per-side\r\n                            inset / measure / translate and the ONE rounded edge\r\n                            and border that face the content\r\n     [mono-position=…]    ≡ [data-side='…'] (left / right / top / bottom)\r\n     [mono-header]        ≡ .drawer > * > header (flex flex-col gap-0.5 p-4\r\n                            text-start, md:gap-1.5) — DEVIATION: a ROW, because\r\n                            the ✕ lives inside it (see below), and NOT centred on\r\n                            the top / bottom sides for the same reason\r\n     [mono-heading]       ≡ upstream's header column itself (flex-col gap-0.5,\r\n                            md:gap-1.5) — the ✕'s row-mate; `slot=\"header\"`\r\n                            replaces it\r\n     [mono-title]         ≡ .drawer > * > header > h2 (text-lg font-semibold\r\n                            leading-none tracking-tight)\r\n     [mono-subtitle]      ≡ .drawer > * > header > p (text-muted-foreground\r\n                            text-sm)\r\n     [mono-body]          ≡ .drawer > * > section (min-h-0 flex-1 overflow-y-auto)\r\n                            — DEVIATION: padded. Upstream leaves the section bare\r\n                            and its own examples pad the content they put in it;\r\n                            here the body is a SLOT a consumer fills with plain\r\n                            text, so it brings the `p-4` itself\r\n                            (`--mono-drawer-body-pad` turns it off)\r\n     [mono-footer]        ≡ .drawer > * > footer (mt-auto flex flex-col gap-2 p-4)\r\n     [mono-close]         ≡ EXTENSION (upstream's drawer has no close button)\r\n     [mono-resizer]       ≡ EXTENSION (the grab bar on the inner edge)\r\n     [mono-size]/[mono-color] ≡ EXTENSION (upstream ships one drawer, no colour)\r\n\r\n   THE TINTED HEADER IS GONE, exactly as in the modal: `--mono-drawer-header-bg`\r\n   and `-footer-bg` remain as knobs, defaulting to transparent, with matching\r\n   `-border` / `-border-width` so a consumer who wants the bars back sets them.\r\n\r\n   THE FOOTER STACKS. Upstream's drawer footer is a COLUMN — it is the mobile\r\n   sheet idiom, where the actions are full-width and stacked — where this\r\n   component's was a right-aligned row. `--mono-drawer-footer-direction: row`\r\n   restores the row, and ONE sets it, so the default flavor is unchanged.\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-panel]`, `[mono-body]` and `[mono-title]`\r\n   are also dropdown's, card's and modal's part names, and a drawer BODY is where\r\n   consumers put all three. Every rule here is written as an explicit child path\r\n   from the root, with `:where()` keeping the resting weight at (0,1,0) so a\r\n   `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-drawer-{radius,shadow,overlay-*,pad,header-gap,footer-gap,\r\n   title-*,body-font,body-line-height,width,height}` (+ the per-size forms), and\r\n   the four that float the panel as a card set the `inset` trio as well\r\n   (`--mono-drawer-{inset,inset-radius,inset-border-width}` with\r\n   `--mono-drawer-panel-pad`). Every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \".drawer\"`).\r\n   ========================================================================= */\r\n\r\nmono-drawer {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Root — the layer\r\n   ========================================= */\r\n\r\n[mono-drawer] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-drawer-primary: var(--mono-drawer-primary, var(--primary));\r\n  --_mono-drawer-secondary: var(--mono-drawer-secondary, var(--secondary-foreground));\r\n  --_mono-drawer-success: var(--mono-drawer-success, var(--success));\r\n  --_mono-drawer-danger: var(--mono-drawer-danger, var(--destructive));\r\n  --_mono-drawer-warning: var(--mono-drawer-warning, var(--warning));\r\n  --_mono-drawer-info: var(--mono-drawer-info, var(--info));\r\n  --_mono-drawer-teal: var(--mono-drawer-teal, var(--teal));\r\n  --_mono-drawer-purple: var(--mono-drawer-purple, var(--purple));\r\n  --_mono-drawer-neutral: var(--mono-drawer-neutral, var(--neutral));\r\n  --_mono-drawer-dark: var(--mono-drawer-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-drawer-accent: var(--mono-drawer-accent, var(--_mono-drawer-accent-preset, var(--_mono-drawer-primary)));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground`, one border edge ── */\r\n  --_mono-drawer-bg: var(--mono-drawer-bg, var(--mono-drawer-surface, var(--popover)));\r\n  --_mono-drawer-text: var(--mono-drawer-text, var(--popover-foreground));\r\n  --_mono-drawer-border: var(--mono-drawer-border, var(--border));\r\n  --_mono-drawer-border-width: var(--mono-drawer-border-width, var(--mono-border-width));\r\n  --_mono-drawer-shadow: var(--mono-drawer-shadow, var(--mono-shadow-lg));\r\n  /* a faint halo of the accent under the elevation — nothing until `color` is set */\r\n  --_mono-drawer-glow: var(--mono-drawer-glow, 0 0 #0000);\r\n  /* maia, mira, luma and rhea float the panel as an INSET card (`before:inset-2`\r\n     over a transparent panel); at 0 the card is the panel itself, which is vega. */\r\n  --_mono-drawer-inset: var(--mono-drawer-inset, 0px);\r\n  --_mono-drawer-panel-pad: var(--mono-drawer-panel-pad, 0px);\r\n  /* vega borders the ONE edge that faces the content; an inset card is a free\r\n     floating box, so it borders all four (`before:border`). At 0 the per-side\r\n     rules below are the only edge, which is vega. */\r\n  --_mono-drawer-inset-border-width: var(--mono-drawer-inset-border-width, 0px);\r\n\r\n  /* The tinted head / foot bars of the pre-port drawer. Upstream has neither, so\r\n     both default to nothing — set the pair (and the `-border-width`) to restore. */\r\n  --_mono-drawer-header-bg: var(--mono-drawer-header-bg, var(--mono-drawer-head-bg, transparent));\r\n  --_mono-drawer-footer-bg: var(--mono-drawer-footer-bg, var(--mono-drawer-foot-bg, transparent));\r\n  --_mono-drawer-header-border: var(--mono-drawer-header-border, transparent);\r\n  --_mono-drawer-footer-border: var(--mono-drawer-footer-border, transparent);\r\n  --_mono-drawer-header-border-width: var(--mono-drawer-header-border-width, 0);\r\n  --_mono-drawer-footer-border-width: var(--mono-drawer-footer-border-width, 0);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .drawer > * > header — gap-0.5 p-4 (md:gap-1.5)\r\n     basecoat@1.0.2 styles/vega.css .drawer > * > footer — gap-2 p-4 */\r\n  --_mono-drawer-radius: var(--mono-drawer-radius, var(--_mono-drawer-radius-preset, var(--mono-drawer-radius-md, var(--mono-radius-xl))));\r\n  --_mono-drawer-pad: var(--mono-drawer-pad, var(--_mono-drawer-pad-preset, var(--mono-drawer-pad-md, calc(var(--mono-spacing) * 4))));\r\n  --_mono-drawer-header-gap: var(--mono-drawer-header-gap, var(--_mono-drawer-header-gap-preset, var(--mono-drawer-header-gap-md, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-drawer-footer-gap: var(--mono-drawer-footer-gap, var(--_mono-drawer-footer-gap-preset, var(--mono-drawer-footer-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-drawer-font: var(--mono-drawer-font, var(--_mono-drawer-font-preset, var(--mono-drawer-body-font-md, var(--mono-text-sm))));\r\n  --_mono-drawer-body-line-height: var(--mono-drawer-body-line-height, var(--_mono-drawer-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  /* `text-lg font-semibold leading-none tracking-tight` — the drawer's title is\r\n     the loud one; the dialog's is `font-medium` at the panel's own size. */\r\n  --_mono-drawer-title-font: var(--mono-drawer-title-font, var(--_mono-drawer-title-font-preset, var(--mono-drawer-title-font-md, var(--mono-text-lg))));\r\n  --_mono-drawer-title-weight: var(--mono-drawer-title-weight, var(--mono-font-weight-semibold));\r\n  --_mono-drawer-title-tracking: var(--mono-drawer-title-tracking, -0.015em);\r\n  --_mono-drawer-title-line-height: var(--mono-drawer-title-line-height, var(--mono-leading-none, 1));\r\n  --_mono-drawer-title-transform: var(--mono-drawer-title-transform, none);\r\n  --_mono-drawer-title-color: var(--mono-drawer-title-color, var(--_mono-drawer-text));\r\n  /* the description line — `text-muted-foreground text-sm`; the font follows the\r\n     drawer's per-size body step, which is `text-sm` at md */\r\n  --_mono-drawer-subtitle-font: var(--mono-drawer-subtitle-font, var(--_mono-drawer-font));\r\n  --_mono-drawer-subtitle-color: var(--mono-drawer-subtitle-color, var(--muted-foreground));\r\n\r\n  /* ── the close ✕ — EXTENSION, styled like the dialog's ─────────────────── */\r\n  --_mono-drawer-close-size: var(--mono-drawer-close-size, var(--_mono-drawer-close-size-preset, var(--mono-drawer-close-size-md, calc(var(--mono-spacing) * 7))));\r\n  --_mono-drawer-close-glyph: var(--mono-drawer-close-glyph, var(--_mono-drawer-icon-size-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-drawer-close-radius: var(--mono-drawer-close-radius, var(--mono-radius-sm));\r\n  --_mono-drawer-close-bg: var(--mono-drawer-close-bg, transparent);\r\n  --_mono-drawer-close-color: var(--mono-drawer-close-color, var(--_mono-drawer-text));\r\n  --_mono-drawer-close-opacity: var(--mono-drawer-close-opacity, 0.7);\r\n  --_mono-drawer-close-hover-opacity: var(--mono-drawer-close-hover-opacity, 1);\r\n  --_mono-drawer-close-hover-bg: var(--mono-drawer-close-hover-bg, transparent);\r\n\r\n  /* ── the backdrop — `bg-black/10 backdrop-blur-xs` ─────────────────────── */\r\n  --_mono-drawer-overlay-bg: var(--mono-drawer-overlay-bg, var(--mono-mode-backdrop));\r\n  --_mono-drawer-overlay-backdrop-filter: var(--mono-drawer-overlay-backdrop-filter, blur(var(--mono-blur-xs)));\r\n\r\n  --_mono-drawer-z: var(--mono-drawer-z, 9990);\r\n\r\n  /* `w-3/4 max-w-sm` on the side drawers; `max-h-[80vh]` with a content height on\r\n     the sheet ones. Both are PROPS here (`width` / `height`), so these are the\r\n     defaults they override. */\r\n  --_mono-drawer-width: var(--mono-drawer-width, min(75%, var(--mono-container-sm)));\r\n  --_mono-drawer-height: var(--mono-drawer-height, auto);\r\n  --_mono-drawer-max-height: var(--mono-drawer-max-height, 80vh);\r\n\r\n  /* ── the slide — `duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]` ────────\r\n     Open/close animation duration. One source of truth for the panel's slide AND\r\n     the delayed `visibility` / `content-visibility` flips, which have to stay in\r\n     lockstep with it. Set `--mono-drawer-duration: 0s` for an instant,\r\n     animation-free drawer — worth doing when the drawer body holds a lot of\r\n     components, since that is what the open/close frames have to re-measure. */\r\n  --_mono-drawer-duration: var(--mono-drawer-duration, 500ms);\r\n  --_mono-drawer-ease: var(--mono-drawer-ease, cubic-bezier(0.32, 0.72, 0, 1));\r\n  /* The overlay follows the panel unless it is given its own. */\r\n  --_mono-drawer-overlay-duration: var(--mono-drawer-duration, 500ms);\r\n\r\n  font-family: inherit;\r\n  color: var(--_mono-drawer-text);\r\n}\r\n\r\n[mono-drawer],\r\n:where([mono-drawer]) *,\r\n:where([mono-drawer]) *::before,\r\n:where([mono-drawer]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: `size` is the CONTENT scale, never the measure\r\n   ========================================= */\r\n\r\n[mono-drawer][mono-size=\"xs\"] {\r\n  --_mono-drawer-radius-preset: var(--mono-drawer-radius-xs, var(--mono-radius-md));\r\n  --_mono-drawer-pad-preset: var(--mono-drawer-pad-xs, calc(var(--mono-spacing) * 2));\r\n  --_mono-drawer-header-gap-preset: var(--mono-drawer-header-gap-xs, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-drawer-footer-gap-preset: var(--mono-drawer-footer-gap-xs, var(--mono-spacing));\r\n  --_mono-drawer-font-preset: var(--mono-drawer-body-font-xs, var(--mono-text-xs));\r\n  --_mono-drawer-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-drawer-title-font-preset: var(--mono-drawer-title-font-xs, var(--mono-text-sm));\r\n  --_mono-drawer-close-size-preset: var(--mono-drawer-close-size-xs, calc(var(--mono-spacing) * 5));\r\n  --_mono-drawer-icon-size-preset: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-drawer][mono-size=\"sm\"] {\r\n  --_mono-drawer-radius-preset: var(--mono-drawer-radius-sm, var(--mono-radius-lg));\r\n  --_mono-drawer-pad-preset: var(--mono-drawer-pad-sm, calc(var(--mono-spacing) * 3));\r\n  --_mono-drawer-header-gap-preset: var(--mono-drawer-header-gap-sm, var(--mono-spacing));\r\n  --_mono-drawer-footer-gap-preset: var(--mono-drawer-footer-gap-sm, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-drawer-font-preset: var(--mono-drawer-body-font-sm, var(--mono-text-xs));\r\n  --_mono-drawer-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-drawer-title-font-preset: var(--mono-drawer-title-font-sm, var(--mono-text-base));\r\n  --_mono-drawer-close-size-preset: var(--mono-drawer-close-size-sm, calc(var(--mono-spacing) * 6));\r\n  --_mono-drawer-icon-size-preset: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-drawer][mono-size=\"lg\"] {\r\n  --_mono-drawer-radius-preset: var(--mono-drawer-radius-lg, var(--mono-radius-2xl));\r\n  --_mono-drawer-pad-preset: var(--mono-drawer-pad-lg, calc(var(--mono-spacing) * 5));\r\n  --_mono-drawer-header-gap-preset: var(--mono-drawer-header-gap-lg, calc(var(--mono-spacing) * 2));\r\n  --_mono-drawer-footer-gap-preset: var(--mono-drawer-footer-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-drawer-font-preset: var(--mono-drawer-body-font-lg, var(--mono-text-base));\r\n  --_mono-drawer-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-drawer-title-font-preset: var(--mono-drawer-title-font-lg, var(--mono-text-xl));\r\n  --_mono-drawer-close-size-preset: var(--mono-drawer-close-size-lg, calc(var(--mono-spacing) * 8));\r\n  --_mono-drawer-icon-size-preset: calc(var(--mono-spacing) * 4.5);\r\n}\r\n\r\n[mono-drawer][mono-size=\"xl\"] {\r\n  --_mono-drawer-radius-preset: var(--mono-drawer-radius-xl, var(--mono-radius-2xl));\r\n  --_mono-drawer-pad-preset: var(--mono-drawer-pad-xl, calc(var(--mono-spacing) * 6));\r\n  --_mono-drawer-header-gap-preset: var(--mono-drawer-header-gap-xl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-drawer-footer-gap-preset: var(--mono-drawer-footer-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-drawer-font-preset: var(--mono-drawer-body-font-xl, var(--mono-text-lg));\r\n  --_mono-drawer-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-drawer-title-font-preset: var(--mono-drawer-title-font-xl, var(--mono-text-2xl, 1.5rem));\r\n  --_mono-drawer-close-size-preset: var(--mono-drawer-close-size-xl, calc(var(--mono-spacing) * 9));\r\n  --_mono-drawer-icon-size-preset: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-drawer][mono-size=\"xxl\"] {\r\n  --_mono-drawer-radius-preset: var(--mono-drawer-radius-xxl, var(--mono-radius-4xl));\r\n  --_mono-drawer-pad-preset: var(--mono-drawer-pad-xxl, calc(var(--mono-spacing) * 7));\r\n  --_mono-drawer-header-gap-preset: var(--mono-drawer-header-gap-xxl, calc(var(--mono-spacing) * 3));\r\n  --_mono-drawer-footer-gap-preset: var(--mono-drawer-footer-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-drawer-font-preset: var(--mono-drawer-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-drawer-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-drawer-title-font-preset: var(--mono-drawer-title-font-xxl, 1.75rem);\r\n  --_mono-drawer-close-size-preset: var(--mono-drawer-close-size-xxl, calc(var(--mono-spacing) * 10));\r\n  --_mono-drawer-icon-size-preset: calc(var(--mono-spacing) * 5.5);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the resizer and whatever the consumer\r\n   turns back on (the head bar, the close hover)\r\n   ========================================= */\r\n\r\n[mono-drawer][mono-color=\"primary\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-primary); }\r\n[mono-drawer][mono-color=\"secondary\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-secondary); }\r\n[mono-drawer][mono-color=\"success\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-success); }\r\n[mono-drawer][mono-color=\"danger\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-danger); }\r\n[mono-drawer][mono-color=\"warning\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-warning); }\r\n[mono-drawer][mono-color=\"info\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-info); }\r\n[mono-drawer][mono-color=\"teal\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-teal); }\r\n[mono-drawer][mono-color=\"purple\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-purple); }\r\n[mono-drawer][mono-color=\"neutral\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-neutral); }\r\n[mono-drawer][mono-color=\"dark\"] { --_mono-drawer-accent-preset: var(--_mono-drawer-dark); }\r\n\r\n/* An explicit `color` shows on the panel itself: its edge (the one border in\r\n   vega, the whole inset card in maia / mira / luma / rhea) becomes a thin line\r\n   of the accent and a faint halo of it sits under the elevation. Without\r\n   `color` the edge stays `--border` and there is no halo. A consumer's\r\n   `--mono-drawer-border` / `--mono-drawer-glow` still win. */\r\n[mono-drawer][mono-color] {\r\n  --_mono-drawer-border: var(--mono-drawer-border, var(--mono-drawer-accent-border, color-mix(in oklab, var(--_mono-drawer-accent) 35%, var(--border))));\r\n  --_mono-drawer-glow: var(--mono-drawer-glow, 0 0 24px -4px color-mix(in oklab, var(--_mono-drawer-accent) 45%, transparent));\r\n}\r\n\r\n/* =========================================\r\n   Overlay — `::backdrop`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .drawer::backdrop — bg-black/10 backdrop-blur-xs.\r\n   A real `::backdrop` cannot be reached from a shadow sheet and cannot stack with\r\n   this component's own layer manager, so it is an element. */\r\n:where([mono-drawer]) > [mono-overlay] {\r\n  /* Sized in VIEWPORT units, not `inset: 0`. `inset`/`100%` resolve against the\r\n     initial containing block, which a horizontally-overflowing page inflates under\r\n     mobile emulation (measured: 481x1041 on a 390x844 screen), so the scrim\r\n     overshot the screen. `dvh`/`dvw` also track mobile browser chrome; the plain\r\n     `v*` line above each is the pre-2022 fallback. */\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  z-index: var(--_mono-drawer-z);\r\n  background: var(--_mono-drawer-overlay-bg);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  cursor: pointer;\r\n\r\n  /* The blur is applied only while open, and its removal is DELAYED by the fade\r\n     so the backdrop does not snap sharp while the scrim is still going. */\r\n  backdrop-filter: none;\r\n  -webkit-backdrop-filter: none;\r\n  transition:\r\n    opacity var(--_mono-drawer-overlay-duration) var(--_mono-drawer-ease),\r\n    backdrop-filter 0s linear var(--_mono-drawer-overlay-duration),\r\n    -webkit-backdrop-filter 0s linear var(--_mono-drawer-overlay-duration);\r\n}\r\n\r\n[mono-drawer][mono-open] > [mono-overlay] {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  backdrop-filter: var(--_mono-drawer-overlay-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-drawer-overlay-backdrop-filter);\r\n  transition:\r\n    opacity var(--_mono-drawer-overlay-duration) var(--_mono-drawer-ease),\r\n    backdrop-filter 0s linear 0s,\r\n    -webkit-backdrop-filter 0s linear 0s;\r\n}\r\n\r\n[mono-drawer][mono-no-overlay] > [mono-overlay] {\r\n  display: none;\r\n}\r\n\r\n/* Stacked drawers: when another drawer or modal WITH an overlay is open above\r\n   this one, hide this backdrop so dim layers don't compound — the topmost\r\n   overlay alone dims everything beneath it. An `overlay=\"false\"` dialog above\r\n   does not count, so this one keeps dimming the page. */\r\n[mono-drawer][mono-open][mono-has-drawer-above] > [mono-overlay] {\r\n  opacity: 0;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.drawer > *`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> > * — fixed z-50 flex h-auto\r\n   flex-col transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]\r\n   will-change-transform outline-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .drawer > * — bg-popover text-popover-foreground text-sm */\r\n:where([mono-drawer]) > [mono-panel] {\r\n  position: fixed;\r\n  z-index: calc(var(--_mono-drawer-z) + 1);\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: var(--_mono-drawer-panel-pad);\r\n  color: var(--_mono-drawer-text);\r\n  font-size: var(--_mono-drawer-font);\r\n  outline: none;\r\n  pointer-events: auto;\r\n  will-change: transform;\r\n\r\n  /* Closed state: invisible (hides the shadow halo too) until the slide-in\r\n     begins. On close the visibility flip is delayed by the transform duration so\r\n     the slide-out animation plays first. */\r\n  visibility: hidden;\r\n  transition:\r\n    transform var(--_mono-drawer-duration) var(--_mono-drawer-ease),\r\n    visibility 0s linear var(--_mono-drawer-duration);\r\n}\r\n\r\n/* The panel's PAINT is a layer, not the panel's own box: maia, mira, luma and\r\n   rhea float the drawer as a card inset from the viewport edge\r\n   (`before:inset-2 before:rounded-4xl before:border`) over a transparent panel.\r\n   At `--mono-drawer-inset: 0` the layer is exactly the panel, which is vega. */\r\n[mono-drawer] > [mono-panel]::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: var(--_mono-drawer-inset);\r\n  z-index: -1;\r\n  background: var(--_mono-drawer-bg);\r\n  /* `inherit` picks up the panel's per-corner radii, which is the vega card.\r\n     A flavor that INSETS the layer rounds all four corners instead, so it sets\r\n     the radius outright. */\r\n  border-radius: var(--mono-drawer-inset-radius, inherit);\r\n  border: var(--_mono-drawer-inset-border-width) solid var(--_mono-drawer-border);\r\n  box-shadow: var(--_mono-drawer-glow), var(--_mono-drawer-shadow);\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-drawer][mono-open] > [mono-panel] {\r\n  visibility: visible;\r\n  transition:\r\n    transform var(--_mono-drawer-duration) var(--_mono-drawer-ease),\r\n    visibility 0s linear 0s;\r\n}\r\n\r\n/* =========================================\r\n   Positions — `[data-side]`\r\n   -----------------------------------------------------------------------------\r\n   Each side fixes the two insets it spans, takes its measure from the axis it\r\n   grows on, and rounds + borders the ONE edge that faces the content.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> &[data-side='right'] > *\r\n   — inset-y-0 right-0 w-3/4 max-w-sm translate-x-full */\r\n/* basecoat@1.0.2 styles/vega.css .drawer[data-side='right'] > * — rounded-l-xl border-l\r\n   DEVIATION: `right` is this component's DEFAULT side, where upstream's is\r\n   `bottom`, so the unqualified root is this one. */\r\n[mono-drawer]:is(:not([mono-position]), [mono-position=\"right\"]) > [mono-panel] {\r\n  top: 0;\r\n  right: 0;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  width: var(--_mono-drawer-width);\r\n  max-width: 100vw;\r\n  max-width: 100dvw;\r\n  transform: translateX(100%);\r\n  border-start-start-radius: var(--_mono-drawer-radius);\r\n  border-end-start-radius: var(--_mono-drawer-radius);\r\n}\r\n\r\n[mono-drawer]:is(:not([mono-position]), [mono-position=\"right\"]) > [mono-panel]::before {\r\n  border-left-width: var(--_mono-drawer-border-width);\r\n}\r\n\r\n[mono-drawer][mono-open]:is(:not([mono-position]), [mono-position=\"right\"]) > [mono-panel] {\r\n  transform: translateX(0);\r\n}\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> &[data-side='left'] > *\r\n   — inset-y-0 left-0 w-3/4 max-w-sm -translate-x-full */\r\n/* basecoat@1.0.2 styles/vega.css .drawer[data-side='left'] > * — rounded-r-xl border-r */\r\n[mono-drawer][mono-position=\"left\"] > [mono-panel] {\r\n  top: 0;\r\n  left: 0;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  width: var(--_mono-drawer-width);\r\n  max-width: 100vw;\r\n  max-width: 100dvw;\r\n  transform: translateX(-100%);\r\n  border-start-end-radius: var(--_mono-drawer-radius);\r\n  border-end-end-radius: var(--_mono-drawer-radius);\r\n}\r\n\r\n[mono-drawer][mono-position=\"left\"] > [mono-panel]::before {\r\n  border-right-width: var(--_mono-drawer-border-width);\r\n}\r\n\r\n[mono-drawer][mono-open][mono-position=\"left\"] > [mono-panel] {\r\n  transform: translateX(0);\r\n}\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> &[data-side='top'] > *\r\n   — inset-x-0 top-0 mb-24 max-h-[80vh] -translate-y-full */\r\n/* basecoat@1.0.2 styles/vega.css .drawer[data-side='top'] > * — rounded-b-xl border-b */\r\n[mono-drawer][mono-position=\"top\"] > [mono-panel] {\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: var(--_mono-drawer-height);\r\n  max-height: var(--_mono-drawer-max-height);\r\n  transform: translateY(-100%);\r\n  border-end-start-radius: var(--_mono-drawer-radius);\r\n  border-end-end-radius: var(--_mono-drawer-radius);\r\n}\r\n\r\n[mono-drawer][mono-position=\"top\"] > [mono-panel]::before {\r\n  border-bottom-width: var(--_mono-drawer-border-width);\r\n}\r\n\r\n[mono-drawer][mono-open][mono-position=\"top\"] > [mono-panel] {\r\n  transform: translateY(0);\r\n}\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> &:not([data-side]) > *, &[data-side='bottom'] > *\r\n   — inset-x-0 bottom-0 mt-24 max-h-[80vh] translate-y-full */\r\n/* basecoat@1.0.2 styles/vega.css .drawer:not([data-side]) > *, .drawer[data-side='bottom'] > *\r\n   — rounded-t-xl border-t */\r\n[mono-drawer][mono-position=\"bottom\"] > [mono-panel] {\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: var(--_mono-drawer-height);\r\n  max-height: var(--_mono-drawer-max-height);\r\n  transform: translateY(100%);\r\n  border-start-start-radius: var(--_mono-drawer-radius);\r\n  border-start-end-radius: var(--_mono-drawer-radius);\r\n}\r\n\r\n[mono-drawer][mono-position=\"bottom\"] > [mono-panel]::before {\r\n  border-top-width: var(--_mono-drawer-border-width);\r\n}\r\n\r\n[mono-drawer][mono-open][mono-position=\"bottom\"] > [mono-panel] {\r\n  transform: translateY(0);\r\n}\r\n\r\n/* =========================================\r\n   Resizer — EXTENSION: a grab bar on the panel's inner edge\r\n   ========================================= */\r\n\r\n:where([mono-drawer] > [mono-panel]) > [mono-resizer] {\r\n  position: absolute;\r\n  z-index: 2;\r\n  touch-action: none;\r\n  background: transparent;\r\n  transition: background-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-drawer] > [mono-panel] > [mono-resizer]:hover,\r\n[mono-drawer][mono-resizing] > [mono-panel] > [mono-resizer] {\r\n  background: color-mix(in oklab, var(--_mono-drawer-accent) 30%, transparent);\r\n}\r\n\r\n[mono-drawer]:is(:not([mono-position]), [mono-position=\"right\"]) > [mono-panel] > [mono-resizer] {\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 6px;\r\n  cursor: ew-resize;\r\n}\r\n\r\n[mono-drawer][mono-position=\"left\"] > [mono-panel] > [mono-resizer] {\r\n  top: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  width: 6px;\r\n  cursor: ew-resize;\r\n}\r\n\r\n[mono-drawer][mono-position=\"top\"] > [mono-panel] > [mono-resizer] {\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  height: 6px;\r\n  cursor: ns-resize;\r\n}\r\n\r\n[mono-drawer][mono-position=\"bottom\"] > [mono-panel] > [mono-resizer] {\r\n  left: 0;\r\n  right: 0;\r\n  top: 0;\r\n  height: 6px;\r\n  cursor: ns-resize;\r\n}\r\n\r\n/* No lag while dragging the handle. */\r\n[mono-drawer][mono-resizing] > [mono-panel] {\r\n  transition: none;\r\n}\r\n\r\n[mono-drawer][mono-resizing] {\r\n  user-select: none;\r\n}\r\n\r\n/* =========================================\r\n   Header — `> header`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> > * > header — flex flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .drawer > * > header — gap-0.5 p-4 text-start\r\n   DEVIATIONS: a ROW, because the ✕ lives inside it (upstream's drawer has no\r\n   close button and its header is a column of title + description); and NOT\r\n   centred on the top / bottom sides for the same reason — a centred title beside\r\n   a trailing ✕ reads as a mistake. */\r\n:where([mono-drawer] > [mono-panel]) > [mono-header] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-drawer-header-gap);\r\n  flex-shrink: 0;\r\n  padding: var(--_mono-drawer-pad);\r\n  text-align: start;\r\n  border-bottom: var(--_mono-drawer-header-border-width) solid var(--_mono-drawer-header-border);\r\n  background: var(--_mono-drawer-header-bg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .drawer > * > header > h2, .drawer > * > [data-title]\r\n   — text-lg font-semibold leading-none tracking-tight */\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> > * > header — flex flex-col\r\n   (+ vega's gap-0.5 md:gap-1.5): the title / subtitle column beside the ✕. */\r\n:where([mono-drawer] > [mono-panel] > [mono-header]) > [mono-heading] {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-drawer-heading-gap, var(--_mono-drawer-header-gap));\r\n}\r\n\r\n:where([mono-drawer] > [mono-panel] > [mono-header]) [mono-title] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-drawer-title-font);\r\n  font-weight: var(--_mono-drawer-title-weight);\r\n  line-height: var(--_mono-drawer-title-line-height);\r\n  letter-spacing: var(--_mono-drawer-title-tracking);\r\n  text-transform: var(--_mono-drawer-title-transform);\r\n  color: var(--_mono-drawer-title-color);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .drawer > * > header > p, .drawer > * > [data-description]\r\n   — text-muted-foreground text-sm */\r\n:where([mono-drawer] > [mono-panel] > [mono-header]) [mono-subtitle] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-drawer-subtitle-font);\r\n  line-height: var(--mono-drawer-subtitle-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-drawer-subtitle-color);\r\n}\r\n\r\n/* Empty regions. The light build omits them; the shadow build always renders\r\n   them (its native `<slot>`s must exist to be scanned) and marks them\r\n   [mono-empty]. The heading parts are matched as descendants because the shadow\r\n   build nests them inside the `header` slot's fallback. */\r\n:where([mono-drawer] > [mono-panel]) > :is([mono-header], [mono-footer])[mono-empty],\r\n:where([mono-drawer] > [mono-panel] > [mono-header]) > [mono-heading][mono-empty],\r\n:where([mono-drawer] > [mono-panel] > [mono-header] > [mono-heading]) :is([mono-title], [mono-subtitle])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Close — EXTENSION, styled like the dialog's\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > :is(button, form[method='dialog'] > button)\r\n   — inline-flex items-center justify-center opacity-70 transition-opacity\r\n   hover:opacity-100. Upstream's DRAWER has no close button at all; borrowing the\r\n   dialog's keeps the two consistent. */\r\n:where([mono-drawer] > [mono-panel] > [mono-header]) [mono-close] {\r\n  flex-shrink: 0;\r\n  /* stays at the end even when the heading column is empty (hidden) */\r\n  margin-inline-start: auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-drawer-close-size);\r\n  height: var(--_mono-drawer-close-size);\r\n  padding: 0;\r\n  border: none;\r\n  border-radius: var(--_mono-drawer-close-radius);\r\n  background: var(--_mono-drawer-close-bg);\r\n  color: var(--_mono-drawer-close-color);\r\n  opacity: var(--_mono-drawer-close-opacity);\r\n  cursor: pointer;\r\n  appearance: none;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-drawer] [mono-close]:hover {\r\n    opacity: var(--_mono-drawer-close-hover-opacity);\r\n    background: var(--_mono-drawer-close-hover-bg);\r\n  }\r\n}\r\n\r\n[mono-drawer] [mono-close]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width)\r\n    color-mix(in oklab, var(--ring) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n[mono-drawer] [mono-close] > :is(svg, span) {\r\n  display: block;\r\n  width: var(--_mono-drawer-close-glyph);\r\n  height: var(--_mono-drawer-close-glyph);\r\n}\r\n\r\n/* =========================================\r\n   Body — `> section`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> > * > section\r\n   — min-h-0 flex-1 overflow-y-auto\r\n   DEVIATION: padded. Upstream leaves the section bare and pads the content it\r\n   puts inside; here the body is a SLOT a consumer fills with plain text, so it\r\n   brings the same `p-4` the header and footer use. `--mono-drawer-body-pad: 0`\r\n   gives upstream's bare section back. */\r\n:where([mono-drawer] > [mono-panel]) > [mono-body] {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: var(--mono-drawer-body-pad, var(--_mono-drawer-pad));\r\n  font-size: var(--_mono-drawer-font);\r\n  line-height: var(--_mono-drawer-body-line-height);\r\n}\r\n\r\n/* =========================================\r\n   Footer — `> footer`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/drawer.css .drawer >> > * > footer — mt-auto flex flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .alert-dialog > * > footer, .dialog > * > footer — gap-2\r\n   basecoat@1.0.2 styles/vega.css .drawer > * > footer — gap-2 p-4\r\n   The COLUMN is upstream's: a drawer footer is the mobile-sheet idiom, where the\r\n   actions are full-width and stacked. `--mono-drawer-footer-direction: row`\r\n   restores the pre-port right-aligned row, and ONE sets it. */\r\n:where([mono-drawer] > [mono-panel]) > [mono-footer] {\r\n  display: flex;\r\n  flex-direction: var(--mono-drawer-footer-direction, column);\r\n  align-items: var(--mono-drawer-footer-align, stretch);\r\n  justify-content: var(--mono-drawer-footer-justify, flex-start);\r\n  gap: var(--_mono-drawer-footer-gap);\r\n  margin-top: auto;\r\n  flex-shrink: 0;\r\n  padding: var(--_mono-drawer-pad);\r\n  border-top: var(--_mono-drawer-footer-border-width) solid var(--_mono-drawer-footer-border);\r\n  background: var(--_mono-drawer-footer-bg);\r\n}\r\n\r\n/* The light build re-appends slotted nodes into a `[data-mono-slot]` outlet.\r\n   Left inline, that outlet is ONE flex child, so the footer's gap and\r\n   justification apply to IT rather than to the buttons inside it — while the\r\n   shadow build's `<slot>` is `display: contents` per the UA sheet and the\r\n   hand-written markup has no wrapper at all. Dissolving the outlet is what\r\n   makes the three agree, and it is what a consumer writing\r\n   `<button slot=\"footer\">` twice expects. */\r\n:where([mono-drawer] > [mono-panel] > [mono-footer]) > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Closed\r\n   ========================================= */\r\n\r\n[mono-drawer]:not([mono-open]) {\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-drawer]:not([mono-open]) > [mono-overlay] {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* A closed drawer is hidden with `visibility: hidden`, which skips PAINT but not\r\n   LAYOUT — so the panel and everything slotted into it kept generating boxes and\r\n   being measured even for a drawer the user never opened.\r\n   `content-visibility: hidden` drops the closed subtree entirely.\r\n\r\n   Measured alongside the modal (Chromium, ~400-node panels, 10 modal+drawer pairs):\r\n   layout objects 12281 → 81, mount layout+style 94.6ms → 14.9ms and flat in the\r\n   count. One open+close costs slightly more in exchange, since an opening panel is\r\n   laid out from scratch; `--mono-drawer-duration: 0s` removes that if it matters.\r\n\r\n   `allow-discrete` is what makes it safe to animate: opening flips the property to\r\n   `visible` at 0% so the slide-in has something to composite; closing holds it\r\n   `visible` until 100% so the panel slides out instead of vanishing on frame one.\r\n\r\n   Gated behind @supports deliberately — `content-visibility … allow-discrete` in the\r\n   `transition` SHORTHAND is a parse error without the feature, and one bad entry\r\n   drops the WHOLE declaration, which would take the slide with it. Inside the guard\r\n   the shorthand is known to parse, so the list is restated in full. Browsers without\r\n   support keep exactly the previous behaviour.\r\n\r\n   Safe for every position: the side drawers fix `top`/`bottom` and take an explicit\r\n   `width`, the sheet ones fix `left`/`right` and cap their height, so size\r\n   containment has no content-driven dimension to collapse while closed.\r\n\r\n   Must stay ABOVE the reduced-motion block below — @supports adds no specificity, so\r\n   source order is what keeps `transition: none` the winner there. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-drawer]) > [mono-panel] {\r\n    content-visibility: hidden;\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      transform var(--_mono-drawer-duration) var(--_mono-drawer-ease),\r\n      visibility 0s linear var(--_mono-drawer-duration),\r\n      content-visibility var(--_mono-drawer-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-drawer][mono-open] > [mono-panel] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-drawer] > [mono-panel],\r\n  [mono-drawer] > [mono-overlay] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Auto full-screen (`auto-fullscreen` prop)\r\n   =========================================\r\n\r\n   Fill the screen at a Tailwind breakpoint and below, keeping the drawer's\r\n   `position` — a `right` drawer still slides in from the right, it just covers the\r\n   viewport. Boundaries are `<breakpoint> - 0.02px` to match Tailwind's `max-*`\r\n   variants (at exactly 640px `sm:` applies, so auto-fullscreen must not).\r\n\r\n   No `!important` needed, unlike modal.css: drawer sizing arrives as the\r\n   `--mono-drawer-*` custom properties on the ROOT, while the panel's\r\n   `width`/`height` come from the position rules above — (0,2,1) selectors that\r\n   these, at (0,2,1) and declared AFTER, beat on order. Keep this section last.\r\n*/\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-drawer][mono-auto-fullscreen=\"sm\"] > [mono-panel] {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    max-width: none;\r\n    max-height: none;\r\n    border-radius: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"sm\"] > [mono-panel]::before {\r\n    border-width: 0;\r\n    inset: 0;\r\n  }\r\n\r\n  /* Load-bearing, not cosmetic: the rules above outrank the `--mono-drawer-width`\r\n     the resizer writes, so a drag here moves nothing visible YET still records a\r\n     width — and the drawer would snap to it the moment the viewport grew back past\r\n     the breakpoint. Hiding the handle removes the pointer target so no such drag\r\n     can begin (`_onResizeStart` also guards, as belt-and-braces). */\r\n  [mono-drawer][mono-auto-fullscreen=\"sm\"] > [mono-panel] > [mono-resizer] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 767.98px) {\r\n  [mono-drawer][mono-auto-fullscreen=\"md\"] > [mono-panel] {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    max-width: none;\r\n    max-height: none;\r\n    border-radius: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"md\"] > [mono-panel]::before {\r\n    border-width: 0;\r\n    inset: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"md\"] > [mono-panel] > [mono-resizer] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 1023.98px) {\r\n  [mono-drawer][mono-auto-fullscreen=\"lg\"] > [mono-panel] {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    max-width: none;\r\n    max-height: none;\r\n    border-radius: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"lg\"] > [mono-panel]::before {\r\n    border-width: 0;\r\n    inset: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"lg\"] > [mono-panel] > [mono-resizer] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 1279.98px) {\r\n  [mono-drawer][mono-auto-fullscreen=\"xl\"] > [mono-panel] {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    max-width: none;\r\n    max-height: none;\r\n    border-radius: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"xl\"] > [mono-panel]::before {\r\n    border-width: 0;\r\n    inset: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"xl\"] > [mono-panel] > [mono-resizer] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 1535.98px) {\r\n  [mono-drawer][mono-auto-fullscreen=\"2xl\"] > [mono-panel] {\r\n    width: 100vw;\r\n    width: 100dvw;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    max-width: none;\r\n    max-height: none;\r\n    border-radius: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"2xl\"] > [mono-panel]::before {\r\n    border-width: 0;\r\n    inset: 0;\r\n  }\r\n\r\n  [mono-drawer][mono-auto-fullscreen=\"2xl\"] > [mono-panel] > [mono-resizer] {\r\n    display: none;\r\n  }\r\n}\r\n";
-
 //#endregion
 //#region src/components/drawer/mono-drawer.ts
 let MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
@@ -775,9 +771,6 @@ let MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
 		this._slotBody = [];
 		this._slotFooter = [];
 	}
-	static {
-		this.styles = [unsafeCSS(drawer_css_raw_default)];
-	}
 	createRenderRoot() {
 		if (this._portal) return this._portal;
 		if (typeof document === "undefined") return this;