@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/drawer.js

@@ -1,18 +1,19 @@
-import { l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../popup-stack-CEEMib__.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { i as pathOwnedBy } from "../popup-portal-BziRX1yG.js";
-import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../breakpoints-CAbhDUht.js";
+import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../popup-stack-De05Y-mJ.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { i as pathOwnedBy } from "../popup-portal-HWhkd7oy.js";
+import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../breakpoints-DllybT82.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.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,12 +748,14 @@ 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.ts
-var MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
+let MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._portal = null;
@@ -762,7 +767,7 @@ var MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
 		this._slotFooter = [];
 	}
 	static {
-		this.styles = [unsafeCSS(drawer_default)];
+		this.styles = [unsafeCSS(drawer_css_raw_default)];
 	}
 	createRenderRoot() {
 		if (this._portal) return this._portal;
@@ -875,7 +880,7 @@ var MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
 		this._hasFooterSlotState = this._slotFooter.length > 0;
 		this._hasBodySlotState = unslottedSeen && this._slotBody.length > 0;
 		for (const node of capturedSlotNodes) if (node.parentNode === this) this.removeChild(node);
-		guardHostTextContent(this, new Map([
+		guardHostTextContent(this, /* @__PURE__ */ new Map([
 			["header", this._slotHeader],
 			["title", this._slotTitle],
 			["subtitle", this._slotSubtitle],
@@ -897,5 +902,6 @@ var MonoDrawer = class MonoDrawer extends MonoDrawerCore(LitElement) {
 	}
 };
 MonoDrawer = __decorate([customElement("mono-drawer")], MonoDrawer);
+
 //#endregion
-export { MonoDrawer };
+export { MonoDrawer };