@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/shadow/date.js

@@ -1,13 +1,14 @@
-import { a as __decorate, f as customElement, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as buildSizeStyle } from "../../css-size-DhHSVZJK.js";
-import { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
+import { a as __decorate, f as customElement, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/date/date-core.ts
-var numberStringConverter = {
+const numberStringConverter = {
 	fromAttribute(value) {
 		if (value === null || value === "") return void 0;
 		const parsed = Number(value);
@@ -17,7 +18,7 @@ var numberStringConverter = {
 		return value === void 0 || value === null ? null : String(value);
 	}
 };
-var _uid = 0;
+let _uid = 0;
 /**
 * `MonoDateCore` — render-mode-agnostic logic for `mono-date` (props, hybrid
 * aliases, flatpickr instance lifecycle, validation/state, and the full
@@ -32,7 +33,7 @@ var _uid = 0;
 * (appended to `<body>`, client-only, styled by the global bundle), so this needs
 * no `PopupPortalController`/`popup-stack`.
 */
-var MonoDateCore = (superClass) => {
+const MonoDateCore = (superClass) => {
 	class MonoDateCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -209,7 +210,7 @@ var MonoDateCore = (superClass) => {
 		async _ensurePicker() {
 			if (isServer || this._fp || !this._nativeEl) return;
 			const token = ++this._buildToken;
-			const { default: flatpickr } = await import("../../esm-Ptok4SQZ.js");
+			const { default: flatpickr } = await import("../../esm-D0We7ndD.js");
 			if (token !== this._buildToken || !this.isConnected || !this._nativeEl || this._fp) return;
 			this._fp = flatpickr(this._nativeEl, this._buildConfig());
 			this._hasValue = Boolean(this.modelValue);
@@ -313,7 +314,7 @@ var MonoDateCore = (superClass) => {
 			this._fp?.destroy();
 			this._fp = null;
 			const token = ++this._buildToken;
-			import("../../esm-Ptok4SQZ.js").then(({ default: flatpickr }) => {
+			import("../../esm-D0We7ndD.js").then(({ default: flatpickr }) => {
 				if (token !== this._buildToken || !this.isConnected || !this._nativeEl) return;
 				this._fp = flatpickr(this._nativeEl, this._buildConfig());
 				if (open) this._fp.open();
@@ -667,10 +668,15 @@ var MonoDateCore = (superClass) => {
 	__decorate([query(".mono-date-native")], MonoDateCoreClass.prototype, "_nativeEl", void 0);
 	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/* =========================================\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";
+
 //#endregion
 //#region src/components/date/mono-date.shadow.ts
-var SHADOW_DATE_CSS = "/* @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/* =========================================\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".replace(/@import\s+['"][^'"]+['"][^;]*;/g, "");
-var MonoDateShadow = class MonoDateShadow extends MonoDateCore(LitElement) {
+const SHADOW_DATE_CSS = date_css_raw_default.replace(/@import\s+['"][^'"]+['"][^;]*;/g, "");
+let MonoDateShadow = class MonoDateShadow extends MonoDateCore(LitElement) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
@@ -708,5 +714,6 @@ var MonoDateShadow = class MonoDateShadow extends MonoDateCore(LitElement) {
 	}
 };
 MonoDateShadow = __decorate([customElement("mono-shadow-date")], MonoDateShadow);
+
 //#endregion
-export { MonoDateCore, MonoDateShadow };
+export { MonoDateCore, MonoDateShadow };

package/dist/ui/shadow/drawer.js

@@ -1,18 +1,19 @@
-import { a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../../breakpoints-CAbhDUht.js";
-import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../../popup-stack-CEEMib__.js";
-import { i as pathOwnedBy } from "../../popup-portal-BziRX1yG.js";
+import { a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../../breakpoints-DllybT82.js";
+import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../../popup-stack-De05Y-mJ.js";
+import { i as pathOwnedBy } from "../../popup-portal-HWhkd7oy.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/drawer/drawer-core.ts
 /** Per-instance id seed for the light build's heading ids (they live in the
 *  document, so they must be unique). The shadow build scopes ids to its own
 *  root and uses a constant — see `_headingIdBase`. */
-var drawerIdSeq = 0;
+let drawerIdSeq = 0;
 /**
 * Named dimension presets for `width` / `height` — `width="lg"`, `height="sm"`.
 *
@@ -24,7 +25,7 @@ var drawerIdSeq = 0;
 * stylesheet defaults (`420px` / `50vh`) exactly. Only the axis `position` leaves
 * free is ever read, so a token on the pinned axis is simply inert.
 */
-var WIDTH_PRESETS = {
+const WIDTH_PRESETS = {
 	xs: "220px",
 	sm: "280px",
 	md: "420px",
@@ -32,7 +33,7 @@ var WIDTH_PRESETS = {
 	xl: "720px",
 	xxl: "900px"
 };
-var HEIGHT_PRESETS = {
+const HEIGHT_PRESETS = {
 	xs: "22vh",
 	sm: "30vh",
 	md: "50vh",
@@ -73,7 +74,7 @@ function toCssSize(value, axis) {
 *  - shadow (`mono-drawer.shadow.ts`): a real shadow root with an inner
 *    `.mono-drawer` root, native `<slot>`s, inline-SVG ✕.
 */
-var MonoDrawerCore = (superClass) => {
+const MonoDrawerCore = (superClass) => {
 	class MonoDrawerCoreClass extends superClass {
 		static {
 			this.monoPendingAuto = "never";
@@ -227,8 +228,10 @@ var MonoDrawerCore = (superClass) => {
 				"resizeable",
 				"stackable"
 			]) if (typeof this[key] === "string") this[key] = this._toBoolean(this[key]);
-			if (changed.has("modelValue")) if (this.modelValue) this._applyOpenSideEffects();
-			else this._releaseSideEffects();
+			if (changed.has("modelValue")) {
+				if (this.modelValue) this._applyOpenSideEffects();
+				else this._releaseSideEffects();
+			}
 			super.willUpdate?.(changed);
 		}
 		updated(changed) {
@@ -745,17 +748,19 @@ var MonoDrawerCore = (superClass) => {
 	__decorate([query(".mono-drawer-panel")], MonoDrawerCoreClass.prototype, "_panelEl", void 0);
 	return MonoDrawerCoreClass;
 };
+
 //#endregion
-//#region src/components/drawer/drawer.css?raw
-var drawer_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";
+//#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.shadow.ts
-var MonoDrawerShadow = class MonoDrawerShadow extends withShadowUtilityStyles(MonoDrawerCore(LitElement)) {
+let MonoDrawerShadow = class MonoDrawerShadow extends withShadowUtilityStyles(MonoDrawerCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(drawer_default, { host: "mono-drawer" }))];
+		this.styles = [unsafeCSS(toShadowCss(drawer_css_raw_default, { host: "mono-drawer" }))];
 	}
 	get _slotsAlwaysRender() {
 		return true;
@@ -865,5 +870,6 @@ var MonoDrawerShadow = class MonoDrawerShadow extends withShadowUtilityStyles(Mo
 	}
 };
 MonoDrawerShadow = __decorate([customElement("mono-shadow-drawer")], MonoDrawerShadow);
+
 //#endregion
-export { MonoDrawerCore, MonoDrawerShadow };
+export { MonoDrawerCore, MonoDrawerShadow };