@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/shadow/modal.js

@@ -1,21 +1,22 @@
-import { a as __decorate, c as defineHybridPropAlias, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as detachEventHandlers, t as applyProps } from "../../element-props-CLB6yvbm.js";
-import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../../breakpoints-CAbhDUht.js";
-import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../../popup-stack-CEEMib__.js";
-import { i as pathOwnedBy } from "../../popup-portal-BziRX1yG.js";
-import "../../mono-button.shadow-B_rKOY9N.js";
-import { t as createNotifier } from "../../notifier-CE4yxMUQ.js";
+import { a as __decorate, c as defineHybridPropAlias, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as detachEventHandlers, t as applyProps } from "../../element-props-xvw0EB7H.js";
+import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../../breakpoints-DllybT82.js";
+import { a as unregisterPopupLayer, n as refreshPopupStack, r as registerPopupLayer, t as getOpenPopupLayers } from "../../popup-stack-De05Y-mJ.js";
+import { i as pathOwnedBy } from "../../popup-portal-HWhkd7oy.js";
+import "../../mono-button.shadow-D9NdMsmH.js";
+import { t as createNotifier } from "../../notifier-BIrqUzRh.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/modal/modal-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 modalIdSeq = 0;
+let modalIdSeq = 0;
 /**
 * Named dimension presets for the sizing props — `width="lg"`, `max-height="sm"`.
 *
@@ -29,7 +30,7 @@ var modalIdSeq = 0;
 * are viewport-relative and match the drawer's top/bottom ladder, so one token means
 * the same thing on both components.
 */
-var WIDTH_PRESETS = {
+const WIDTH_PRESETS = {
 	xs: "min(90vw, 300px)",
 	sm: "min(90vw, 380px)",
 	md: "min(90vw, 520px)",
@@ -37,7 +38,7 @@ var WIDTH_PRESETS = {
 	xl: "min(95vw, 880px)",
 	xxl: "min(95vw, 1080px)"
 };
-var HEIGHT_PRESETS = {
+const HEIGHT_PRESETS = {
 	xs: "22vh",
 	sm: "30vh",
 	md: "50vh",
@@ -79,7 +80,7 @@ function toCssSize(value, axis) {
 *  - shadow (`mono-modal.shadow.ts`): a real shadow root with an inner
 *    `.mono-modal` root, native `<slot>`s, inline-SVG ✕ (mirrors dropdown).
 */
-var MonoModalCore = (superClass) => {
+const MonoModalCore = (superClass) => {
 	class MonoModalCoreClass extends superClass {
 		static {
 			this.monoPendingAuto = "never";
@@ -132,7 +133,8 @@ var MonoModalCore = (superClass) => {
 				const layers = getOpenPopupLayers();
 				if (layers[layers.length - 1] !== this) return;
 				const root = this.renderRoot instanceof Element ? this.renderRoot : null;
-				if (pathOwnedBy(event.composedPath(), root ? [this, root] : [this])) return;
+				const path = event.composedPath();
+				if (pathOwnedBy(path, root ? [this, root] : [this])) return;
 				this.hide("overlay", event);
 			};
 			this._onHeaderPointerDown = (event) => {
@@ -259,10 +261,12 @@ var MonoModalCore = (superClass) => {
 				"stackable"
 			]) if (typeof this[key] === "string") this[key] = this._toBoolean(this[key]);
 			if (changed.has("dataModal")) this._bindController();
-			if (changed.has("modelValue")) if (this.modelValue) {
-				this._resetDrag();
-				this._applyOpenSideEffects();
-			} else this._releaseSideEffects();
+			if (changed.has("modelValue")) {
+				if (this.modelValue) {
+					this._resetDrag();
+					this._applyOpenSideEffects();
+				} else this._releaseSideEffects();
+			}
 			super.willUpdate?.(changed);
 		}
 		updated(changed) {
@@ -830,25 +834,27 @@ var MonoModalCore = (superClass) => {
 	__decorate([query(".mono-modal-panel")], MonoModalCoreClass.prototype, "_panelEl", void 0);
 	return MonoModalCoreClass;
 };
+
 //#endregion
-//#region src/components/modal/modal.css?raw
-var modal_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-modal — a port of Basecoat's `.dialog` (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-modal size=\"lg\" color=\"success\" model-value title=\"Settings\">\r\n     <div mono-modal mono-size=\"lg\" mono-color=\"success\" mono-open\r\n          role=\"dialog\" aria-modal=\"true\">\r\n       <div mono-overlay></div>\r\n       <div mono-panel-wrap>\r\n         <div mono-panel role=\"document\">\r\n           <div mono-header>\r\n             <div mono-heading>\r\n               <div mono-title>Settings</div>\r\n               <div mono-subtitle>Manage your account</div>\r\n             </div>\r\n             <button mono-close type=\"button\" aria-label=\"Close\">…</button>\r\n           </div>\r\n           <div mono-body>…</div>\r\n           <div mono-footer>…</div>\r\n         </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). The element writes them on its ROOT — the\r\n   `<body>` portal in the light build, an inner root `<div>` in the shadow one —\r\n   along with every state below. The old classes (`.mono-modal.md.primary.open`)\r\n   are still emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-modal]        ≡ .dialog (the <dialog> itself) — DEVIATION: a fixed\r\n                           full-viewport wrapper, because this component predates\r\n                           `<dialog>` support and owns its own stacking through\r\n                           `composables/popup-stack`\r\n     [mono-overlay]      ≡ .dialog::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-wrap]   ≡ EXTENSION (upstream centres the panel itself with\r\n                           `fixed top-1/2 left-1/2 -translate-1/2`; a flex wrap\r\n                           centres a DRAGGED panel correctly, which that cannot)\r\n     [mono-panel]        ≡ .dialog > * (bg-popover text-popover-foreground ring-1\r\n                           ring-foreground/10 rounded-xl p-6 gap-6 text-sm\r\n                           max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)]\r\n                           flex flex-col sm:max-w-md)\r\n     [mono-header]         ≡ .dialog > * > header (flex flex-col gap-2) — DEVIATION:\r\n                           a ROW, because the ✕ lives inside it (see below)\r\n     [mono-heading]      ≡ upstream's header column itself (flex flex-col gap-2)\r\n                           — the ✕'s row-mate; `slot=\"header\"` replaces it\r\n     [mono-title]        ≡ .dialog > * > header > h2 (leading-none font-medium)\r\n     [mono-subtitle]     ≡ .dialog > * > header > p (text-muted-foreground text-sm\r\n                           leading-normal)\r\n     [mono-body]         ≡ .dialog > * > section (flex-1)\r\n     [mono-footer]         ≡ .dialog > * > footer (flex flex-col-reverse gap-2,\r\n                           sm:flex-row sm:justify-end)\r\n     [mono-close]        ≡ .dialog > * > button (opacity-70 hover:opacity-100,\r\n                           svg size-4) — DEVIATION: in flow inside the head\r\n                           rather than `absolute top-4 end-4`, because the head is\r\n                           also the drag handle; a `slot=\"header\"` replaces only\r\n                           the heading column, never the ✕\r\n     [mono-size]         ≡ EXTENSION. Upstream's `data-size` is a WIDTH; ours is\r\n                           the content scale (padding, type, radius, close box).\r\n                           Width is its own prop — a compact `sm` can still be\r\n                           wide — and defaults to `--mono-container-md`, which is\r\n                           upstream's `sm:max-w-md`.\r\n     [mono-color]        ≡ EXTENSION (upstream's dialog has no colour)\r\n\r\n   THE TINTED HEADER IS GONE. Upstream's dialog is one padded box: the panel\r\n   carries `p-6` and `gap-6`, and header / section / footer are unpadded,\r\n   unbordered, untinted regions inside it. The gradient head bar, the tinted\r\n   footer and both divider rules went with it — `--mono-modal-header-bg` and\r\n   `-foot-bg` remain as knobs, defaulting to `transparent`, so a consumer who\r\n   wants the bar back sets those two.\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-panel]`, `[mono-body]`, `[mono-title]` and\r\n   `[mono-close]` are also dropdown's, card's and input's part names, and a modal\r\n   BODY is where consumers put all three. Every rule here is written as an\r\n   explicit child path from the root, with `:where()` keeping the resting weight\r\n   at (0,1,0) so a `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-modal-{radius,padding,gap,ring-color,shadow,width,\r\n   title-font,overlay-bg,overlay-backdrop-filter,close-*}` (+ the per-size\r\n   forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dialog\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-modal {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Root — the layer\r\n   ========================================= */\r\n\r\n[mono-modal] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-modal-primary: var(--mono-modal-primary, var(--primary));\r\n  --_mono-modal-secondary: var(--mono-modal-secondary, var(--secondary-foreground));\r\n  --_mono-modal-success: var(--mono-modal-success, var(--success));\r\n  --_mono-modal-danger: var(--mono-modal-danger, var(--destructive));\r\n  --_mono-modal-warning: var(--mono-modal-warning, var(--warning));\r\n  --_mono-modal-info: var(--mono-modal-info, var(--info));\r\n  --_mono-modal-teal: var(--mono-modal-teal, var(--teal));\r\n  --_mono-modal-purple: var(--mono-modal-purple, var(--purple));\r\n  --_mono-modal-neutral: var(--mono-modal-neutral, var(--neutral));\r\n  --_mono-modal-dark: var(--mono-modal-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-modal-accent: var(--mono-modal-accent, var(--_mono-modal-accent-preset, var(--_mono-modal-primary)));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-modal-bg: var(--mono-modal-bg, var(--mono-modal-surface, var(--popover)));\r\n  --_mono-modal-text: var(--mono-modal-text, var(--popover-foreground));\r\n  --_mono-modal-border: var(--mono-modal-border, var(--border));\r\n  --_mono-modal-ring-width: var(--mono-modal-ring-width, var(--mono-border-width));\r\n  --_mono-modal-ring-color: var(--mono-modal-ring-color,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-modal-shadow: var(--mono-modal-shadow, var(--mono-shadow-lg));\r\n  /* a faint halo of the accent under the elevation — nothing until `color` is set */\r\n  --_mono-modal-glow: var(--mono-modal-glow, 0 0 #0000);\r\n\r\n  /* The tinted head / foot bars of the pre-port modal. Upstream has neither —\r\n     its dialog is ONE padded box — so both default to nothing, and a consumer\r\n     who wants the bar back sets the pair (and `-head-border` for the rule). */\r\n  --_mono-modal-header-bg: var(--mono-modal-header-bg, var(--mono-modal-head-bg, transparent));\r\n  --_mono-modal-footer-bg: var(--mono-modal-footer-bg, transparent);\r\n  --_mono-modal-header-border: var(--mono-modal-header-border, transparent);\r\n  --_mono-modal-footer-border: var(--mono-modal-footer-border, transparent);\r\n  /* 0, not a transparent hairline: upstream has no divider, and a transparent\r\n     one would still take a pixel of layout. Restoring the bar means setting the\r\n     width with the colour. */\r\n  --_mono-modal-header-border-width: var(--mono-modal-header-border-width, 0);\r\n  --_mono-modal-footer-border-width: var(--mono-modal-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 .dialog > * — rounded-xl p-6 gap-6 text-sm */\r\n  --_mono-modal-radius: var(--mono-modal-radius, var(--_mono-modal-radius-preset, var(--mono-modal-radius-md, var(--mono-radius-xl))));\r\n  --_mono-modal-pad: var(--mono-modal-pad, var(--_mono-modal-pad-preset, var(--mono-modal-pad-md, calc(var(--mono-spacing) * 6))));\r\n  --_mono-modal-gap: var(--mono-modal-gap, var(--_mono-modal-gap-preset, var(--mono-modal-gap-md, calc(var(--mono-spacing) * 6))));\r\n  --_mono-modal-header-gap: var(--mono-modal-header-gap, var(--_mono-modal-header-gap-preset, var(--mono-modal-header-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-modal-footer-gap: var(--mono-modal-footer-gap, var(--_mono-modal-footer-gap-preset, var(--mono-modal-footer-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-modal-body-font: var(--mono-modal-body-font, var(--_mono-modal-body-font-preset, var(--mono-modal-body-font-md, var(--mono-text-sm))));\r\n  --_mono-modal-body-line-height: var(--mono-modal-body-line-height, var(--_mono-modal-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  /* `leading-none font-medium`, at the panel's own size — four of the eight\r\n     flavors bump it to `text-base` and sera to `text-lg`. */\r\n  --_mono-modal-title-font: var(--mono-modal-title-font, var(--_mono-modal-title-font-preset, var(--mono-modal-title-font-md, var(--mono-text-sm))));\r\n  --_mono-modal-title-weight: var(--mono-modal-title-weight, var(--mono-font-weight-medium));\r\n  --_mono-modal-title-color: var(--mono-modal-title-color, var(--_mono-modal-text));\r\n  /* the description line — `text-muted-foreground text-sm leading-normal`; the\r\n     font follows the body's per-size step, which is `text-sm` at md */\r\n  --_mono-modal-subtitle-font: var(--mono-modal-subtitle-font, var(--_mono-modal-body-font));\r\n  --_mono-modal-subtitle-color: var(--mono-modal-subtitle-color, var(--muted-foreground));\r\n\r\n  /* ── the close ✕ — `opacity-70 hover:opacity-100`, glyph `size-4` ───────── */\r\n  --_mono-modal-close-size: var(--mono-modal-close-size, var(--_mono-modal-close-size-preset, var(--mono-modal-close-size-md, calc(var(--mono-spacing) * 7))));\r\n  --_mono-modal-close-glyph: var(--mono-modal-close-glyph, var(--_mono-modal-close-glyph-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-modal-close-radius: var(--mono-modal-close-radius, var(--mono-radius-sm));\r\n  --_mono-modal-close-bg: var(--mono-modal-close-bg, transparent);\r\n  --_mono-modal-close-color: var(--mono-modal-close-color, var(--_mono-modal-text));\r\n  --_mono-modal-close-opacity: var(--mono-modal-close-opacity, 0.7);\r\n  --_mono-modal-close-hover-opacity: var(--mono-modal-close-hover-opacity, 1);\r\n  --_mono-modal-close-hover-bg: var(--mono-modal-close-hover-bg, transparent);\r\n\r\n  /* ── the backdrop — `bg-black/10 backdrop-blur-xs` ─────────────────────── */\r\n  --_mono-modal-overlay-bg: var(--mono-modal-overlay-bg, var(--mono-mode-backdrop));\r\n  /* Public so a flavor can drop the blur; a descendant rule would not reach the\r\n     shadow build's overlay. */\r\n  --_mono-modal-overlay-backdrop-filter: var(--mono-modal-overlay-backdrop-filter, blur(var(--mono-blur-xs)));\r\n\r\n  --_mono-modal-z: var(--mono-modal-z, 600);\r\n\r\n  /* `max-w-[calc(100%-2rem)] sm:max-w-md` — the width is a PROP here (a dialog's\r\n     measure and its density are independent choices, which is why `size` does\r\n     not touch it), so the default is upstream's `md` container. */\r\n  --_mono-modal-width: var(--mono-modal-width, min(calc(100% - 2rem), var(--mono-container-md)));\r\n\r\n  /* Open/close animation duration. One source of truth for the panel's opacity +\r\n     transform AND the delayed `visibility` / `content-visibility` flips, which have\r\n     to stay in lockstep with them — they used to be six hand-maintained `0.22s`\r\n     literals. Set `--mono-modal-duration: 0s` for an instant, animation-free modal;\r\n     worth doing when the modal body holds a lot of components, since that is what\r\n     the open/close frames have to re-measure. */\r\n  --_mono-modal-duration: var(--mono-modal-duration, var(--mono-duration-slow));\r\n  /* The overlay keeps its own default so an explicit `--mono-modal-duration: 0s`\r\n     does not leave the scrim fading on its own. */\r\n  --_mono-modal-overlay-duration: var(--mono-modal-duration, var(--mono-duration-slow));\r\n\r\n  /* Sized in VIEWPORT units, not `inset: 0`/`100%`. Both of those resolve against\r\n     the initial containing block, which a horizontally-overflowing page inflates\r\n     under mobile emulation (measured: 481x1041 on a 390x844 screen) — the panel\r\n     then centres inside an oversized wrap and stops covering the screen. Viewport\r\n     units stay correct there. `dvh`/`dvw` additionally track mobile browser chrome,\r\n     so the `v*` line below is only 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-modal-z);\r\n  pointer-events: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-modal-text);\r\n}\r\n\r\n[mono-modal],\r\n:where([mono-modal]) *,\r\n:where([mono-modal]) *::before,\r\n:where([mono-modal]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream's `data-size` is a width; this is the density\r\n   ========================================= */\r\n\r\n[mono-modal][mono-size=\"xs\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xs, var(--mono-radius-md));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xs, var(--mono-spacing));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xs, var(--mono-spacing));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xs, var(--mono-text-xs));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xs, var(--mono-text-xs));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xs, calc(var(--mono-spacing) * 5));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-modal][mono-size=\"sm\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-sm, var(--mono-radius-lg));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-sm, calc(var(--mono-spacing) * 4));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-sm, calc(var(--mono-spacing) * 4));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-sm, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-sm, calc(var(--mono-spacing) * 2));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-sm, var(--mono-text-sm));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-sm, var(--mono-text-xs));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-sm, calc(var(--mono-spacing) * 6));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-modal][mono-size=\"lg\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-lg, var(--mono-radius-2xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-lg, calc(var(--mono-spacing) * 7));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-lg, calc(var(--mono-spacing) * 7));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-lg, var(--mono-text-base));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-lg, var(--mono-text-sm));\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-lg, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 4.5);\r\n}\r\n\r\n[mono-modal][mono-size=\"xl\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xl, var(--mono-radius-2xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xl, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xl, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xl, var(--mono-text-lg));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xl, var(--mono-text-base));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-modal][mono-size=\"xxl\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xxl, var(--mono-radius-4xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xxl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xxl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xxl, var(--mono-text-xl));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xxl, calc(var(--mono-spacing) * 10));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 5.5);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the ring and whatever the consumer\r\n   turns back on (the head bar, the close hover)\r\n   ========================================= */\r\n\r\n[mono-modal][mono-color=\"primary\"] { --_mono-modal-accent-preset: var(--_mono-modal-primary); }\r\n[mono-modal][mono-color=\"secondary\"] { --_mono-modal-accent-preset: var(--_mono-modal-secondary); }\r\n[mono-modal][mono-color=\"success\"] { --_mono-modal-accent-preset: var(--_mono-modal-success); }\r\n[mono-modal][mono-color=\"danger\"] { --_mono-modal-accent-preset: var(--_mono-modal-danger); }\r\n[mono-modal][mono-color=\"warning\"] { --_mono-modal-accent-preset: var(--_mono-modal-warning); }\r\n[mono-modal][mono-color=\"info\"] { --_mono-modal-accent-preset: var(--_mono-modal-info); }\r\n[mono-modal][mono-color=\"teal\"] { --_mono-modal-accent-preset: var(--_mono-modal-teal); }\r\n[mono-modal][mono-color=\"purple\"] { --_mono-modal-accent-preset: var(--_mono-modal-purple); }\r\n[mono-modal][mono-color=\"neutral\"] { --_mono-modal-accent-preset: var(--_mono-modal-neutral); }\r\n[mono-modal][mono-color=\"dark\"] { --_mono-modal-accent-preset: var(--_mono-modal-dark); }\r\n\r\n/* An explicit `color` shows on the panel itself, not only in the ✕ hover: a\r\n   thin line of the accent sits ON the ring and a faint halo of it under the\r\n   elevation — \"bordered green, glowing green just a little\". Both live in the\r\n   glow layer (first in the shadow list, so the translucent foreground/10 ring\r\n   does not muddy the line, and a flavour's own `--mono-modal-ring-color` is\r\n   left alone). Without `color` the layer is nothing. `--mono-modal-glow`\r\n   replaces the whole layer; `--mono-modal-accent-ring` recolours the line. */\r\n[mono-modal][mono-color] {\r\n  --_mono-modal-glow: var(--mono-modal-glow,\r\n    0 0 0 var(--_mono-modal-ring-width) var(--mono-modal-accent-ring, color-mix(in oklab, var(--_mono-modal-accent) 35%, var(--_mono-modal-border))),\r\n    0 0 24px -4px color-mix(in oklab, var(--_mono-modal-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 .dialog::backdrop, .alert-dialog::backdrop, .command-dialog::backdrop\r\n   — bg-black/10 backdrop-blur-xs duration-100. A real `::backdrop` cannot be\r\n   reached from a shadow sheet and cannot stack with this component's own layer\r\n   manager, so it is an element — the fill is upstream's, through the mode token. */\r\n:where([mono-modal]) > [mono-overlay] {\r\n  /* Viewport units, not `inset: 0` — see the note on the root. */\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  background: var(--_mono-modal-overlay-bg);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n\r\n  /* The blur is applied only while open; it used to be declared unconditionally with\r\n     `opacity: 0` as the only thing hiding it. Hygiene rather than a measured win —\r\n     `backdrop-filter` is a paint/composite cost, and the layout+style metrics used to\r\n     validate the `content-visibility` change below cannot attribute anything to it\r\n     either way. Kept because a filter on a never-shown full-viewport element is work\r\n     the browser should never be asked to consider, and the change is free.\r\n\r\n     Removal is DELAYED by the fade duration (the same idiom this file already uses\r\n     for `visibility` below): drop it immediately and the backdrop snaps sharp while\r\n     the scrim is still fading out. `backdrop-filter` is animatable, so a plain\r\n     delayed transition does the job — no `allow-discrete` needed. */\r\n  backdrop-filter: none;\r\n  -webkit-backdrop-filter: none;\r\n  transition:\r\n    opacity var(--_mono-modal-overlay-duration) var(--mono-ease),\r\n    backdrop-filter 0s linear var(--_mono-modal-overlay-duration),\r\n    -webkit-backdrop-filter 0s linear var(--_mono-modal-overlay-duration);\r\n}\r\n\r\n[mono-modal][mono-open] > [mono-overlay] {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  backdrop-filter: var(--_mono-modal-overlay-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-modal-overlay-backdrop-filter);\r\n  transition:\r\n    opacity var(--_mono-modal-overlay-duration) var(--mono-ease),\r\n    backdrop-filter 0s linear 0s,\r\n    -webkit-backdrop-filter 0s linear 0s;\r\n}\r\n\r\n[mono-modal][mono-no-overlay] > [mono-overlay] {\r\n  display: none;\r\n}\r\n\r\n/* Stacked modals: when another modal or drawer 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-modal][mono-open][mono-has-modal-above] > [mono-overlay] {\r\n  opacity: 0;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dialog > *`\r\n   ========================================= */\r\n\r\n/* EXTENSION — the centring box. Upstream centres the panel itself\r\n   (`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`), which this\r\n   component cannot: the drag offset is a `translate` too, and the two would\r\n   fight. A flex wrap centres without spending the transform. */\r\n:where([mono-modal]) > [mono-panel-wrap] {\r\n  /* Viewport units, not `inset: 0` — see the note on the root. This is the box\r\n     the panel centres in, so an inflated one offsets the panel off-screen. */\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  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 1rem;\r\n  pointer-events: none;\r\n  z-index: calc(var(--_mono-modal-z) + 1);\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog, .alert-dialog >> > * — fixed z-50\r\n   flex max-h-[calc(100%_-_2rem)] w-full flex-col transition-all outline-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * — bg-popover text-popover-foreground\r\n   ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1\r\n   duration-100 sm:max-w-md */\r\n:where([mono-modal] > [mono-panel-wrap]) > [mono-panel] {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-modal-gap);\r\n  width: var(--_mono-modal-width);\r\n  max-width: calc(100% - 2rem);\r\n  max-height: calc(100vh - 2rem);\r\n  max-height: calc(100dvh - 2rem);\r\n  padding: var(--_mono-modal-pad);\r\n  border-radius: var(--_mono-modal-radius);\r\n  background: var(--_mono-modal-bg);\r\n  color: var(--_mono-modal-text);\r\n  box-shadow:\r\n    var(--_mono-modal-glow),\r\n    0 0 0 var(--_mono-modal-ring-width) var(--_mono-modal-ring-color),\r\n    var(--_mono-modal-shadow);\r\n  overflow: hidden;\r\n  outline: none;\r\n  pointer-events: auto;\r\n\r\n  /* Closed state: invisible (hides shadow halo) + scaled-down, which is\r\n     upstream's `@starting-style` pair (`opacity-0` + `scale-95`) written as a\r\n     class transition — a `<dialog>`'s discrete open/close is not available to a\r\n     component that manages its own layer. The visibility flip is delayed on\r\n     close so the scale-out animation plays first. */\r\n  opacity: 0;\r\n  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(0.95);\r\n  visibility: hidden;\r\n  transition:\r\n    opacity var(--_mono-modal-duration) var(--mono-ease),\r\n    transform var(--_mono-modal-duration) var(--mono-ease),\r\n    visibility 0s linear var(--_mono-modal-duration);\r\n}\r\n\r\n[mono-modal][mono-open] > [mono-panel-wrap] > [mono-panel] {\r\n  opacity: 1;\r\n  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(1);\r\n  visibility: visible;\r\n  transition:\r\n    opacity var(--_mono-modal-duration) var(--mono-ease),\r\n    transform var(--_mono-modal-duration) var(--mono-ease),\r\n    visibility 0s linear 0s;\r\n}\r\n\r\n/* Draggable: the head is the drag handle; suppress the transform transition while\r\n   dragging so the panel tracks the pointer 1:1 and snaps instantly on drop. */\r\n[mono-modal][mono-draggable] > [mono-panel-wrap] > [mono-panel] > [mono-header] {\r\n  cursor: move;\r\n  touch-action: none;\r\n  user-select: none;\r\n}\r\n\r\n[mono-modal][mono-draggable] > [mono-panel-wrap] > [mono-panel] > [mono-header] [mono-close] {\r\n  cursor: pointer;\r\n}\r\n\r\n[mono-modal][mono-dragging] > [mono-panel-wrap] > [mono-panel] {\r\n  transition: none;\r\n}\r\n\r\n/* =========================================\r\n   Head — `> header`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > header — flex flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header — gap-2\r\n   DEVIATION: a ROW. Upstream's header is a column of title + description with the\r\n   ✕ absolutely positioned beside it; ours holds the ✕ because the head is the\r\n   drag handle. Upstream's column is `[mono-heading]` below, the ✕'s row-mate —\r\n   and all a `slot=\"header\"` replaces. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-header] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-modal-header-gap);\r\n  flex-shrink: 0;\r\n  padding: var(--mono-modal-header-pad, 0);\r\n  border-bottom: var(--_mono-modal-header-border-width) solid var(--_mono-modal-header-border);\r\n  background: var(--_mono-modal-header-bg);\r\n}\r\n\r\n/* No subtitle: a lone title line sits centred beside the taller ✕ instead of\r\n   riding its top edge. With a subtitle the head stays top-aligned. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-header][mono-no-subtitle] {\r\n  align-items: center;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header > h2, .dialog > * > [data-title]\r\n   — leading-none font-medium */\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > header — flex flex-col\r\n   (+ vega's gap-2): the title / subtitle column, taking the row beside the ✕. */\r\n:where([mono-modal] > [mono-panel-wrap] > [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-modal-heading-gap, var(--_mono-modal-header-gap));\r\n}\r\n\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-title] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-modal-title-font);\r\n  font-weight: var(--_mono-modal-title-weight);\r\n  line-height: var(--mono-leading-none, 1);\r\n  color: var(--_mono-modal-title-color);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header > p, .dialog > * > [data-description]\r\n   — text-muted-foreground text-sm leading-normal */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-subtitle] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-modal-subtitle-font);\r\n  line-height: var(--mono-modal-subtitle-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-modal-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-modal] > [mono-panel-wrap] > [mono-panel]) > :is([mono-header], [mono-footer])[mono-empty],\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) > [mono-heading][mono-empty],\r\n:where([mono-modal] > [mono-panel-wrap] > [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 — `> button`\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 focus-visible:outline-hidden disabled:pointer-events-none\r\n   DEVIATION: in flow inside the head rather than `absolute top-4 end-4` — see\r\n   the header note above. */\r\n:where([mono-modal] > [mono-panel-wrap] > [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-modal-close-size);\r\n  height: var(--_mono-modal-close-size);\r\n  padding: 0;\r\n  border: none;\r\n  border-radius: var(--_mono-modal-close-radius);\r\n  background: var(--_mono-modal-close-bg);\r\n  color: var(--_mono-modal-close-color);\r\n  opacity: var(--_mono-modal-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-modal] [mono-close]:hover {\r\n    opacity: var(--_mono-modal-close-hover-opacity);\r\n    background: var(--_mono-modal-close-hover-bg);\r\n  }\r\n}\r\n\r\n[mono-modal] [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/* basecoat@1.0.2 components/dialog.css .dialog >> > * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-'])\r\n   — size-4 */\r\n[mono-modal] [mono-close] > :is(svg, span) {\r\n  display: block;\r\n  width: var(--_mono-modal-close-glyph);\r\n  height: var(--_mono-modal-close-glyph);\r\n}\r\n\r\n/* =========================================\r\n   Body — `> section`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > section — flex-1\r\n   The panel's own `p-6` is the padding; `--mono-modal-body-pad` restores an\r\n   inner one for a body that scrolls under a restored head bar. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-body] {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: var(--mono-modal-body-pad, 0);\r\n  font-size: var(--_mono-modal-body-font);\r\n  line-height: var(--_mono-modal-body-line-height);\r\n  color: var(--_mono-modal-text);\r\n}\r\n\r\n/* =========================================\r\n   Foot — `> footer`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > footer\r\n   — flex flex-col-reverse sm:flex-row sm:justify-end */\r\n/* basecoat@1.0.2 styles/vega.css .alert-dialog > * > footer, .dialog > * > footer — gap-2 */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-footer] {\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n  gap: var(--_mono-modal-footer-gap);\r\n  flex-shrink: 0;\r\n  margin: var(--mono-modal-footer-margin, 0);\r\n  padding: var(--mono-modal-footer-pad, 0);\r\n  border-top: var(--_mono-modal-footer-border-width) solid var(--_mono-modal-footer-border);\r\n  border-end-start-radius: var(--mono-modal-footer-radius, 0);\r\n  border-end-end-radius: var(--mono-modal-footer-radius, 0);\r\n  background: var(--_mono-modal-footer-bg);\r\n}\r\n\r\n@media (width >= 40rem) {\r\n  [mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-footer] {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Full screen — both width and height passed as \"100%\"\r\n   ========================================= */\r\n\r\n[mono-modal][mono-fullscreen] > [mono-panel-wrap] {\r\n  padding: 0;\r\n}\r\n\r\n[mono-modal][mono-fullscreen] > [mono-panel-wrap] > [mono-panel] {\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  max-width: 100vw;\r\n  max-width: 100dvw;\r\n  max-height: 100vh;\r\n  max-height: 100dvh;\r\n  border-radius: 0;\r\n}\r\n\r\n/* A closed modal 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 modal the user never opened. That cost is paid at mount:\r\n   `mono-modal.ts` builds the <body> portal in `createRenderRoot()`, moves the\r\n   consumer's children into it, and forces a synchronous `performUpdate()` from\r\n   `connectedCallback`. `content-visibility: hidden` drops the closed subtree\r\n   entirely, so a heavy modal costs nothing until it is opened.\r\n\r\n   Measured (Chromium, ~400-node panels, 10 modal+drawer pairs, 20k DOM nodes):\r\n     layout objects: 12281 → 81 (−99.3%); with a single pair, 1237 → 18\r\n     mount layout+style: 94.6ms → 14.9ms, and flat in the number of modals\r\n   The trade, same as the accordion's: one open+close costs MORE (2.1ms → 8.0ms),\r\n   because an opening panel is laid out from scratch instead of incrementally. Worth\r\n   it — you mount once and toggle rarely — and `--mono-modal-duration: 0s` claws the\r\n   toggle back if a body is heavy enough to notice.\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 scale/opacity animation has something to composite;\r\n   closing holds it `visible` until 100%, so the panel scales out instead of\r\n   vanishing on the first frame.\r\n\r\n   Gated behind @supports deliberately: `content-visibility … allow-discrete` inside\r\n   the `transition` SHORTHAND is a parse error to a browser without the feature, and\r\n   one bad entry drops the WHOLE declaration — which would take the modal's fade and\r\n   scale with it. Inside the guard the shorthand is known to parse, so the list is\r\n   restated in full. Browsers without support keep exactly the previous behaviour.\r\n\r\n   Must stay ABOVE the reduced-motion block below: that block wins on `!important`,\r\n   but @supports adds no specificity, so source order is what keeps it winning. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-modal] > [mono-panel-wrap]) > [mono-panel] {\r\n    content-visibility: hidden;\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      opacity var(--_mono-modal-duration) var(--mono-ease),\r\n      transform var(--_mono-modal-duration) var(--mono-ease),\r\n      visibility 0s linear var(--_mono-modal-duration),\r\n      content-visibility var(--_mono-modal-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-modal][mono-open] > [mono-panel-wrap] > [mono-panel] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-modal] > [mono-overlay],\r\n  [mono-modal] > [mono-panel-wrap] > [mono-panel] {\r\n    transition: opacity 0.01s linear, visibility 0s linear !important;\r\n    transform: none !important;\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. The boundaries are\r\n   `<breakpoint> - 0.02px` so they match Tailwind's `max-*` variants exactly: at\r\n   exactly 640px `sm:` applies, so auto-fullscreen must NOT.\r\n\r\n   Two things to know before editing:\r\n\r\n   1. `!important` is required here, unlike `[mono-fullscreen]` above.\r\n      `_panelSizeStyle()` writes `width`/`height`/`min-*`/`max-*` as INLINE styles\r\n      whenever the consumer sets a sizing prop, and inline beats any selector —\r\n      without it `<mono-modal auto-fullscreen width=\"720\">` would stay 720px on a\r\n      phone. The `min-*` resets matter too: a `min-width` larger than `width` still\r\n      wins.\r\n   2. The five near-identical blocks are unavoidable — a media query cannot be\r\n      parameterised by an attribute or a custom property, so each breakpoint needs\r\n      its own. Keep them in sync.\r\n*/\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"sm\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"sm\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 767.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"md\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"md\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1023.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"lg\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"lg\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1279.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"xl\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"xl\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1535.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"2xl\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"2xl\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n/* ── Programmatic dialog (`controlMonoModal().dialog`) ─────────────────────────\r\n   The compact question box the controller builds by code — upstream's\r\n   `.alert-dialog`: the text centred, the actions centred under it, and a lighter\r\n   scrim, because what the question is about should stay readable behind it.\r\n   `mono-dialog` is set through `cssClassName` on the dialog's own modal, so an\r\n   ordinary <mono-modal> is untouched. */\r\n[mono-modal][mono-dialog] {\r\n  --_mono-modal-overlay-backdrop-filter: var(--mono-modal-overlay-backdrop-filter, none);\r\n  --_mono-modal-overlay-bg: var(--mono-modal-overlay-bg,\r\n    color-mix(in oklab, black 22%, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .alert-dialog >> > * > header — grid\r\n   place-items-center text-center sm:place-items-start sm:text-start\r\n   DEVIATION: centred at EVERY width. This box is one question and two buttons —\r\n   upstream's `sm:` left-align belongs to the icon+title+description layout its\r\n   alert dialog builds, which the controller does not produce. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-body] {\r\n  text-align: center;\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .alert-dialog >> &:is([data-size='sm']) > * > footer, > [data-size='sm'] > footer\r\n   — grid grid-cols-2. The controller's dialog is that `sm` alert: its actions sit\r\n   together under the question rather than trailing to the end. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-footer] {\r\n  justify-content: center;\r\n  flex-wrap: wrap;\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-modal] > [mono-panel-wrap] > [mono-panel] > [mono-footer]) > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* The captured footer lands in an inline `<span data-mono-slot=\"foot\">` outlet, so\r\n   the buttons would otherwise sit in a LINE box — baseline-aligned, a solid button\r\n   with an icon a few px lower than an outline one beside it, with line-height air\r\n   underneath. The outlet becomes the flex row instead, and the actions wrapper\r\n   dissolves into it. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-footer] > [data-mono-slot=\"foot\"] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-modal-footer-gap);\r\n  line-height: 1;\r\n}\r\n\r\n[mono-modal][mono-dialog] .mono-modal-dialog-actions {\r\n  display: contents;\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\modal\modal.css?raw.js
+var modal_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-modal — a port of Basecoat's `.dialog` (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-modal size=\"lg\" color=\"success\" model-value title=\"Settings\">\r\n     <div mono-modal mono-size=\"lg\" mono-color=\"success\" mono-open\r\n          role=\"dialog\" aria-modal=\"true\">\r\n       <div mono-overlay></div>\r\n       <div mono-panel-wrap>\r\n         <div mono-panel role=\"document\">\r\n           <div mono-header>\r\n             <div mono-heading>\r\n               <div mono-title>Settings</div>\r\n               <div mono-subtitle>Manage your account</div>\r\n             </div>\r\n             <button mono-close type=\"button\" aria-label=\"Close\">…</button>\r\n           </div>\r\n           <div mono-body>…</div>\r\n           <div mono-footer>…</div>\r\n         </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). The element writes them on its ROOT — the\r\n   `<body>` portal in the light build, an inner root `<div>` in the shadow one —\r\n   along with every state below. The old classes (`.mono-modal.md.primary.open`)\r\n   are still emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-modal]        ≡ .dialog (the <dialog> itself) — DEVIATION: a fixed\r\n                           full-viewport wrapper, because this component predates\r\n                           `<dialog>` support and owns its own stacking through\r\n                           `composables/popup-stack`\r\n     [mono-overlay]      ≡ .dialog::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-wrap]   ≡ EXTENSION (upstream centres the panel itself with\r\n                           `fixed top-1/2 left-1/2 -translate-1/2`; a flex wrap\r\n                           centres a DRAGGED panel correctly, which that cannot)\r\n     [mono-panel]        ≡ .dialog > * (bg-popover text-popover-foreground ring-1\r\n                           ring-foreground/10 rounded-xl p-6 gap-6 text-sm\r\n                           max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)]\r\n                           flex flex-col sm:max-w-md)\r\n     [mono-header]         ≡ .dialog > * > header (flex flex-col gap-2) — DEVIATION:\r\n                           a ROW, because the ✕ lives inside it (see below)\r\n     [mono-heading]      ≡ upstream's header column itself (flex flex-col gap-2)\r\n                           — the ✕'s row-mate; `slot=\"header\"` replaces it\r\n     [mono-title]        ≡ .dialog > * > header > h2 (leading-none font-medium)\r\n     [mono-subtitle]     ≡ .dialog > * > header > p (text-muted-foreground text-sm\r\n                           leading-normal)\r\n     [mono-body]         ≡ .dialog > * > section (flex-1)\r\n     [mono-footer]         ≡ .dialog > * > footer (flex flex-col-reverse gap-2,\r\n                           sm:flex-row sm:justify-end)\r\n     [mono-close]        ≡ .dialog > * > button (opacity-70 hover:opacity-100,\r\n                           svg size-4) — DEVIATION: in flow inside the head\r\n                           rather than `absolute top-4 end-4`, because the head is\r\n                           also the drag handle; a `slot=\"header\"` replaces only\r\n                           the heading column, never the ✕\r\n     [mono-size]         ≡ EXTENSION. Upstream's `data-size` is a WIDTH; ours is\r\n                           the content scale (padding, type, radius, close box).\r\n                           Width is its own prop — a compact `sm` can still be\r\n                           wide — and defaults to `--mono-container-md`, which is\r\n                           upstream's `sm:max-w-md`.\r\n     [mono-color]        ≡ EXTENSION (upstream's dialog has no colour)\r\n\r\n   THE TINTED HEADER IS GONE. Upstream's dialog is one padded box: the panel\r\n   carries `p-6` and `gap-6`, and header / section / footer are unpadded,\r\n   unbordered, untinted regions inside it. The gradient head bar, the tinted\r\n   footer and both divider rules went with it — `--mono-modal-header-bg` and\r\n   `-foot-bg` remain as knobs, defaulting to `transparent`, so a consumer who\r\n   wants the bar back sets those two.\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-panel]`, `[mono-body]`, `[mono-title]` and\r\n   `[mono-close]` are also dropdown's, card's and input's part names, and a modal\r\n   BODY is where consumers put all three. Every rule here is written as an\r\n   explicit child path from the root, with `:where()` keeping the resting weight\r\n   at (0,1,0) so a `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-modal-{radius,padding,gap,ring-color,shadow,width,\r\n   title-font,overlay-bg,overlay-backdrop-filter,close-*}` (+ the per-size\r\n   forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dialog\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-modal {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Root — the layer\r\n   ========================================= */\r\n\r\n[mono-modal] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-modal-primary: var(--mono-modal-primary, var(--primary));\r\n  --_mono-modal-secondary: var(--mono-modal-secondary, var(--secondary-foreground));\r\n  --_mono-modal-success: var(--mono-modal-success, var(--success));\r\n  --_mono-modal-danger: var(--mono-modal-danger, var(--destructive));\r\n  --_mono-modal-warning: var(--mono-modal-warning, var(--warning));\r\n  --_mono-modal-info: var(--mono-modal-info, var(--info));\r\n  --_mono-modal-teal: var(--mono-modal-teal, var(--teal));\r\n  --_mono-modal-purple: var(--mono-modal-purple, var(--purple));\r\n  --_mono-modal-neutral: var(--mono-modal-neutral, var(--neutral));\r\n  --_mono-modal-dark: var(--mono-modal-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-modal-accent: var(--mono-modal-accent, var(--_mono-modal-accent-preset, var(--_mono-modal-primary)));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-modal-bg: var(--mono-modal-bg, var(--mono-modal-surface, var(--popover)));\r\n  --_mono-modal-text: var(--mono-modal-text, var(--popover-foreground));\r\n  --_mono-modal-border: var(--mono-modal-border, var(--border));\r\n  --_mono-modal-ring-width: var(--mono-modal-ring-width, var(--mono-border-width));\r\n  --_mono-modal-ring-color: var(--mono-modal-ring-color,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-modal-shadow: var(--mono-modal-shadow, var(--mono-shadow-lg));\r\n  /* a faint halo of the accent under the elevation — nothing until `color` is set */\r\n  --_mono-modal-glow: var(--mono-modal-glow, 0 0 #0000);\r\n\r\n  /* The tinted head / foot bars of the pre-port modal. Upstream has neither —\r\n     its dialog is ONE padded box — so both default to nothing, and a consumer\r\n     who wants the bar back sets the pair (and `-head-border` for the rule). */\r\n  --_mono-modal-header-bg: var(--mono-modal-header-bg, var(--mono-modal-head-bg, transparent));\r\n  --_mono-modal-footer-bg: var(--mono-modal-footer-bg, transparent);\r\n  --_mono-modal-header-border: var(--mono-modal-header-border, transparent);\r\n  --_mono-modal-footer-border: var(--mono-modal-footer-border, transparent);\r\n  /* 0, not a transparent hairline: upstream has no divider, and a transparent\r\n     one would still take a pixel of layout. Restoring the bar means setting the\r\n     width with the colour. */\r\n  --_mono-modal-header-border-width: var(--mono-modal-header-border-width, 0);\r\n  --_mono-modal-footer-border-width: var(--mono-modal-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 .dialog > * — rounded-xl p-6 gap-6 text-sm */\r\n  --_mono-modal-radius: var(--mono-modal-radius, var(--_mono-modal-radius-preset, var(--mono-modal-radius-md, var(--mono-radius-xl))));\r\n  --_mono-modal-pad: var(--mono-modal-pad, var(--_mono-modal-pad-preset, var(--mono-modal-pad-md, calc(var(--mono-spacing) * 6))));\r\n  --_mono-modal-gap: var(--mono-modal-gap, var(--_mono-modal-gap-preset, var(--mono-modal-gap-md, calc(var(--mono-spacing) * 6))));\r\n  --_mono-modal-header-gap: var(--mono-modal-header-gap, var(--_mono-modal-header-gap-preset, var(--mono-modal-header-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-modal-footer-gap: var(--mono-modal-footer-gap, var(--_mono-modal-footer-gap-preset, var(--mono-modal-footer-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-modal-body-font: var(--mono-modal-body-font, var(--_mono-modal-body-font-preset, var(--mono-modal-body-font-md, var(--mono-text-sm))));\r\n  --_mono-modal-body-line-height: var(--mono-modal-body-line-height, var(--_mono-modal-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  /* `leading-none font-medium`, at the panel's own size — four of the eight\r\n     flavors bump it to `text-base` and sera to `text-lg`. */\r\n  --_mono-modal-title-font: var(--mono-modal-title-font, var(--_mono-modal-title-font-preset, var(--mono-modal-title-font-md, var(--mono-text-sm))));\r\n  --_mono-modal-title-weight: var(--mono-modal-title-weight, var(--mono-font-weight-medium));\r\n  --_mono-modal-title-color: var(--mono-modal-title-color, var(--_mono-modal-text));\r\n  /* the description line — `text-muted-foreground text-sm leading-normal`; the\r\n     font follows the body's per-size step, which is `text-sm` at md */\r\n  --_mono-modal-subtitle-font: var(--mono-modal-subtitle-font, var(--_mono-modal-body-font));\r\n  --_mono-modal-subtitle-color: var(--mono-modal-subtitle-color, var(--muted-foreground));\r\n\r\n  /* ── the close ✕ — `opacity-70 hover:opacity-100`, glyph `size-4` ───────── */\r\n  --_mono-modal-close-size: var(--mono-modal-close-size, var(--_mono-modal-close-size-preset, var(--mono-modal-close-size-md, calc(var(--mono-spacing) * 7))));\r\n  --_mono-modal-close-glyph: var(--mono-modal-close-glyph, var(--_mono-modal-close-glyph-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-modal-close-radius: var(--mono-modal-close-radius, var(--mono-radius-sm));\r\n  --_mono-modal-close-bg: var(--mono-modal-close-bg, transparent);\r\n  --_mono-modal-close-color: var(--mono-modal-close-color, var(--_mono-modal-text));\r\n  --_mono-modal-close-opacity: var(--mono-modal-close-opacity, 0.7);\r\n  --_mono-modal-close-hover-opacity: var(--mono-modal-close-hover-opacity, 1);\r\n  --_mono-modal-close-hover-bg: var(--mono-modal-close-hover-bg, transparent);\r\n\r\n  /* ── the backdrop — `bg-black/10 backdrop-blur-xs` ─────────────────────── */\r\n  --_mono-modal-overlay-bg: var(--mono-modal-overlay-bg, var(--mono-mode-backdrop));\r\n  /* Public so a flavor can drop the blur; a descendant rule would not reach the\r\n     shadow build's overlay. */\r\n  --_mono-modal-overlay-backdrop-filter: var(--mono-modal-overlay-backdrop-filter, blur(var(--mono-blur-xs)));\r\n\r\n  --_mono-modal-z: var(--mono-modal-z, 600);\r\n\r\n  /* `max-w-[calc(100%-2rem)] sm:max-w-md` — the width is a PROP here (a dialog's\r\n     measure and its density are independent choices, which is why `size` does\r\n     not touch it), so the default is upstream's `md` container. */\r\n  --_mono-modal-width: var(--mono-modal-width, min(calc(100% - 2rem), var(--mono-container-md)));\r\n\r\n  /* Open/close animation duration. One source of truth for the panel's opacity +\r\n     transform AND the delayed `visibility` / `content-visibility` flips, which have\r\n     to stay in lockstep with them — they used to be six hand-maintained `0.22s`\r\n     literals. Set `--mono-modal-duration: 0s` for an instant, animation-free modal;\r\n     worth doing when the modal body holds a lot of components, since that is what\r\n     the open/close frames have to re-measure. */\r\n  --_mono-modal-duration: var(--mono-modal-duration, var(--mono-duration-slow));\r\n  /* The overlay keeps its own default so an explicit `--mono-modal-duration: 0s`\r\n     does not leave the scrim fading on its own. */\r\n  --_mono-modal-overlay-duration: var(--mono-modal-duration, var(--mono-duration-slow));\r\n\r\n  /* Sized in VIEWPORT units, not `inset: 0`/`100%`. Both of those resolve against\r\n     the initial containing block, which a horizontally-overflowing page inflates\r\n     under mobile emulation (measured: 481x1041 on a 390x844 screen) — the panel\r\n     then centres inside an oversized wrap and stops covering the screen. Viewport\r\n     units stay correct there. `dvh`/`dvw` additionally track mobile browser chrome,\r\n     so the `v*` line below is only 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-modal-z);\r\n  pointer-events: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-modal-text);\r\n}\r\n\r\n[mono-modal],\r\n:where([mono-modal]) *,\r\n:where([mono-modal]) *::before,\r\n:where([mono-modal]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream's `data-size` is a width; this is the density\r\n   ========================================= */\r\n\r\n[mono-modal][mono-size=\"xs\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xs, var(--mono-radius-md));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xs, var(--mono-spacing));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xs, var(--mono-spacing));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xs, var(--mono-text-xs));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xs, var(--mono-text-xs));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xs, calc(var(--mono-spacing) * 5));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-modal][mono-size=\"sm\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-sm, var(--mono-radius-lg));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-sm, calc(var(--mono-spacing) * 4));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-sm, calc(var(--mono-spacing) * 4));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-sm, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-sm, calc(var(--mono-spacing) * 2));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-sm, var(--mono-text-sm));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-sm, var(--mono-text-xs));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-sm, calc(var(--mono-spacing) * 6));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-modal][mono-size=\"lg\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-lg, var(--mono-radius-2xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-lg, calc(var(--mono-spacing) * 7));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-lg, calc(var(--mono-spacing) * 7));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-lg, var(--mono-text-base));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-lg, var(--mono-text-sm));\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-lg, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 4.5);\r\n}\r\n\r\n[mono-modal][mono-size=\"xl\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xl, var(--mono-radius-2xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xl, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xl, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xl, var(--mono-text-lg));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xl, var(--mono-text-base));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-modal][mono-size=\"xxl\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xxl, var(--mono-radius-4xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xxl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xxl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xxl, var(--mono-text-xl));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xxl, calc(var(--mono-spacing) * 10));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 5.5);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the ring and whatever the consumer\r\n   turns back on (the head bar, the close hover)\r\n   ========================================= */\r\n\r\n[mono-modal][mono-color=\"primary\"] { --_mono-modal-accent-preset: var(--_mono-modal-primary); }\r\n[mono-modal][mono-color=\"secondary\"] { --_mono-modal-accent-preset: var(--_mono-modal-secondary); }\r\n[mono-modal][mono-color=\"success\"] { --_mono-modal-accent-preset: var(--_mono-modal-success); }\r\n[mono-modal][mono-color=\"danger\"] { --_mono-modal-accent-preset: var(--_mono-modal-danger); }\r\n[mono-modal][mono-color=\"warning\"] { --_mono-modal-accent-preset: var(--_mono-modal-warning); }\r\n[mono-modal][mono-color=\"info\"] { --_mono-modal-accent-preset: var(--_mono-modal-info); }\r\n[mono-modal][mono-color=\"teal\"] { --_mono-modal-accent-preset: var(--_mono-modal-teal); }\r\n[mono-modal][mono-color=\"purple\"] { --_mono-modal-accent-preset: var(--_mono-modal-purple); }\r\n[mono-modal][mono-color=\"neutral\"] { --_mono-modal-accent-preset: var(--_mono-modal-neutral); }\r\n[mono-modal][mono-color=\"dark\"] { --_mono-modal-accent-preset: var(--_mono-modal-dark); }\r\n\r\n/* An explicit `color` shows on the panel itself, not only in the ✕ hover: a\r\n   thin line of the accent sits ON the ring and a faint halo of it under the\r\n   elevation — \"bordered green, glowing green just a little\". Both live in the\r\n   glow layer (first in the shadow list, so the translucent foreground/10 ring\r\n   does not muddy the line, and a flavour's own `--mono-modal-ring-color` is\r\n   left alone). Without `color` the layer is nothing. `--mono-modal-glow`\r\n   replaces the whole layer; `--mono-modal-accent-ring` recolours the line. */\r\n[mono-modal][mono-color] {\r\n  --_mono-modal-glow: var(--mono-modal-glow,\r\n    0 0 0 var(--_mono-modal-ring-width) var(--mono-modal-accent-ring, color-mix(in oklab, var(--_mono-modal-accent) 35%, var(--_mono-modal-border))),\r\n    0 0 24px -4px color-mix(in oklab, var(--_mono-modal-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 .dialog::backdrop, .alert-dialog::backdrop, .command-dialog::backdrop\r\n   — bg-black/10 backdrop-blur-xs duration-100. A real `::backdrop` cannot be\r\n   reached from a shadow sheet and cannot stack with this component's own layer\r\n   manager, so it is an element — the fill is upstream's, through the mode token. */\r\n:where([mono-modal]) > [mono-overlay] {\r\n  /* Viewport units, not `inset: 0` — see the note on the root. */\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  background: var(--_mono-modal-overlay-bg);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n\r\n  /* The blur is applied only while open; it used to be declared unconditionally with\r\n     `opacity: 0` as the only thing hiding it. Hygiene rather than a measured win —\r\n     `backdrop-filter` is a paint/composite cost, and the layout+style metrics used to\r\n     validate the `content-visibility` change below cannot attribute anything to it\r\n     either way. Kept because a filter on a never-shown full-viewport element is work\r\n     the browser should never be asked to consider, and the change is free.\r\n\r\n     Removal is DELAYED by the fade duration (the same idiom this file already uses\r\n     for `visibility` below): drop it immediately and the backdrop snaps sharp while\r\n     the scrim is still fading out. `backdrop-filter` is animatable, so a plain\r\n     delayed transition does the job — no `allow-discrete` needed. */\r\n  backdrop-filter: none;\r\n  -webkit-backdrop-filter: none;\r\n  transition:\r\n    opacity var(--_mono-modal-overlay-duration) var(--mono-ease),\r\n    backdrop-filter 0s linear var(--_mono-modal-overlay-duration),\r\n    -webkit-backdrop-filter 0s linear var(--_mono-modal-overlay-duration);\r\n}\r\n\r\n[mono-modal][mono-open] > [mono-overlay] {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  backdrop-filter: var(--_mono-modal-overlay-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-modal-overlay-backdrop-filter);\r\n  transition:\r\n    opacity var(--_mono-modal-overlay-duration) var(--mono-ease),\r\n    backdrop-filter 0s linear 0s,\r\n    -webkit-backdrop-filter 0s linear 0s;\r\n}\r\n\r\n[mono-modal][mono-no-overlay] > [mono-overlay] {\r\n  display: none;\r\n}\r\n\r\n/* Stacked modals: when another modal or drawer 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-modal][mono-open][mono-has-modal-above] > [mono-overlay] {\r\n  opacity: 0;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dialog > *`\r\n   ========================================= */\r\n\r\n/* EXTENSION — the centring box. Upstream centres the panel itself\r\n   (`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`), which this\r\n   component cannot: the drag offset is a `translate` too, and the two would\r\n   fight. A flex wrap centres without spending the transform. */\r\n:where([mono-modal]) > [mono-panel-wrap] {\r\n  /* Viewport units, not `inset: 0` — see the note on the root. This is the box\r\n     the panel centres in, so an inflated one offsets the panel off-screen. */\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  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 1rem;\r\n  pointer-events: none;\r\n  z-index: calc(var(--_mono-modal-z) + 1);\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog, .alert-dialog >> > * — fixed z-50\r\n   flex max-h-[calc(100%_-_2rem)] w-full flex-col transition-all outline-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * — bg-popover text-popover-foreground\r\n   ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1\r\n   duration-100 sm:max-w-md */\r\n:where([mono-modal] > [mono-panel-wrap]) > [mono-panel] {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-modal-gap);\r\n  width: var(--_mono-modal-width);\r\n  max-width: calc(100% - 2rem);\r\n  max-height: calc(100vh - 2rem);\r\n  max-height: calc(100dvh - 2rem);\r\n  padding: var(--_mono-modal-pad);\r\n  border-radius: var(--_mono-modal-radius);\r\n  background: var(--_mono-modal-bg);\r\n  color: var(--_mono-modal-text);\r\n  box-shadow:\r\n    var(--_mono-modal-glow),\r\n    0 0 0 var(--_mono-modal-ring-width) var(--_mono-modal-ring-color),\r\n    var(--_mono-modal-shadow);\r\n  overflow: hidden;\r\n  outline: none;\r\n  pointer-events: auto;\r\n\r\n  /* Closed state: invisible (hides shadow halo) + scaled-down, which is\r\n     upstream's `@starting-style` pair (`opacity-0` + `scale-95`) written as a\r\n     class transition — a `<dialog>`'s discrete open/close is not available to a\r\n     component that manages its own layer. The visibility flip is delayed on\r\n     close so the scale-out animation plays first. */\r\n  opacity: 0;\r\n  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(0.95);\r\n  visibility: hidden;\r\n  transition:\r\n    opacity var(--_mono-modal-duration) var(--mono-ease),\r\n    transform var(--_mono-modal-duration) var(--mono-ease),\r\n    visibility 0s linear var(--_mono-modal-duration);\r\n}\r\n\r\n[mono-modal][mono-open] > [mono-panel-wrap] > [mono-panel] {\r\n  opacity: 1;\r\n  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(1);\r\n  visibility: visible;\r\n  transition:\r\n    opacity var(--_mono-modal-duration) var(--mono-ease),\r\n    transform var(--_mono-modal-duration) var(--mono-ease),\r\n    visibility 0s linear 0s;\r\n}\r\n\r\n/* Draggable: the head is the drag handle; suppress the transform transition while\r\n   dragging so the panel tracks the pointer 1:1 and snaps instantly on drop. */\r\n[mono-modal][mono-draggable] > [mono-panel-wrap] > [mono-panel] > [mono-header] {\r\n  cursor: move;\r\n  touch-action: none;\r\n  user-select: none;\r\n}\r\n\r\n[mono-modal][mono-draggable] > [mono-panel-wrap] > [mono-panel] > [mono-header] [mono-close] {\r\n  cursor: pointer;\r\n}\r\n\r\n[mono-modal][mono-dragging] > [mono-panel-wrap] > [mono-panel] {\r\n  transition: none;\r\n}\r\n\r\n/* =========================================\r\n   Head — `> header`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > header — flex flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header — gap-2\r\n   DEVIATION: a ROW. Upstream's header is a column of title + description with the\r\n   ✕ absolutely positioned beside it; ours holds the ✕ because the head is the\r\n   drag handle. Upstream's column is `[mono-heading]` below, the ✕'s row-mate —\r\n   and all a `slot=\"header\"` replaces. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-header] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-modal-header-gap);\r\n  flex-shrink: 0;\r\n  padding: var(--mono-modal-header-pad, 0);\r\n  border-bottom: var(--_mono-modal-header-border-width) solid var(--_mono-modal-header-border);\r\n  background: var(--_mono-modal-header-bg);\r\n}\r\n\r\n/* No subtitle: a lone title line sits centred beside the taller ✕ instead of\r\n   riding its top edge. With a subtitle the head stays top-aligned. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-header][mono-no-subtitle] {\r\n  align-items: center;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header > h2, .dialog > * > [data-title]\r\n   — leading-none font-medium */\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > header — flex flex-col\r\n   (+ vega's gap-2): the title / subtitle column, taking the row beside the ✕. */\r\n:where([mono-modal] > [mono-panel-wrap] > [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-modal-heading-gap, var(--_mono-modal-header-gap));\r\n}\r\n\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-title] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-modal-title-font);\r\n  font-weight: var(--_mono-modal-title-weight);\r\n  line-height: var(--mono-leading-none, 1);\r\n  color: var(--_mono-modal-title-color);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header > p, .dialog > * > [data-description]\r\n   — text-muted-foreground text-sm leading-normal */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-subtitle] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-modal-subtitle-font);\r\n  line-height: var(--mono-modal-subtitle-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-modal-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-modal] > [mono-panel-wrap] > [mono-panel]) > :is([mono-header], [mono-footer])[mono-empty],\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) > [mono-heading][mono-empty],\r\n:where([mono-modal] > [mono-panel-wrap] > [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 — `> button`\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 focus-visible:outline-hidden disabled:pointer-events-none\r\n   DEVIATION: in flow inside the head rather than `absolute top-4 end-4` — see\r\n   the header note above. */\r\n:where([mono-modal] > [mono-panel-wrap] > [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-modal-close-size);\r\n  height: var(--_mono-modal-close-size);\r\n  padding: 0;\r\n  border: none;\r\n  border-radius: var(--_mono-modal-close-radius);\r\n  background: var(--_mono-modal-close-bg);\r\n  color: var(--_mono-modal-close-color);\r\n  opacity: var(--_mono-modal-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-modal] [mono-close]:hover {\r\n    opacity: var(--_mono-modal-close-hover-opacity);\r\n    background: var(--_mono-modal-close-hover-bg);\r\n  }\r\n}\r\n\r\n[mono-modal] [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/* basecoat@1.0.2 components/dialog.css .dialog >> > * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-'])\r\n   — size-4 */\r\n[mono-modal] [mono-close] > :is(svg, span) {\r\n  display: block;\r\n  width: var(--_mono-modal-close-glyph);\r\n  height: var(--_mono-modal-close-glyph);\r\n}\r\n\r\n/* =========================================\r\n   Body — `> section`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > section — flex-1\r\n   The panel's own `p-6` is the padding; `--mono-modal-body-pad` restores an\r\n   inner one for a body that scrolls under a restored head bar. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-body] {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: var(--mono-modal-body-pad, 0);\r\n  font-size: var(--_mono-modal-body-font);\r\n  line-height: var(--_mono-modal-body-line-height);\r\n  color: var(--_mono-modal-text);\r\n}\r\n\r\n/* =========================================\r\n   Foot — `> footer`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > footer\r\n   — flex flex-col-reverse sm:flex-row sm:justify-end */\r\n/* basecoat@1.0.2 styles/vega.css .alert-dialog > * > footer, .dialog > * > footer — gap-2 */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-footer] {\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n  gap: var(--_mono-modal-footer-gap);\r\n  flex-shrink: 0;\r\n  margin: var(--mono-modal-footer-margin, 0);\r\n  padding: var(--mono-modal-footer-pad, 0);\r\n  border-top: var(--_mono-modal-footer-border-width) solid var(--_mono-modal-footer-border);\r\n  border-end-start-radius: var(--mono-modal-footer-radius, 0);\r\n  border-end-end-radius: var(--mono-modal-footer-radius, 0);\r\n  background: var(--_mono-modal-footer-bg);\r\n}\r\n\r\n@media (width >= 40rem) {\r\n  [mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-footer] {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Full screen — both width and height passed as \"100%\"\r\n   ========================================= */\r\n\r\n[mono-modal][mono-fullscreen] > [mono-panel-wrap] {\r\n  padding: 0;\r\n}\r\n\r\n[mono-modal][mono-fullscreen] > [mono-panel-wrap] > [mono-panel] {\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  max-width: 100vw;\r\n  max-width: 100dvw;\r\n  max-height: 100vh;\r\n  max-height: 100dvh;\r\n  border-radius: 0;\r\n}\r\n\r\n/* A closed modal 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 modal the user never opened. That cost is paid at mount:\r\n   `mono-modal.ts` builds the <body> portal in `createRenderRoot()`, moves the\r\n   consumer's children into it, and forces a synchronous `performUpdate()` from\r\n   `connectedCallback`. `content-visibility: hidden` drops the closed subtree\r\n   entirely, so a heavy modal costs nothing until it is opened.\r\n\r\n   Measured (Chromium, ~400-node panels, 10 modal+drawer pairs, 20k DOM nodes):\r\n     layout objects: 12281 → 81 (−99.3%); with a single pair, 1237 → 18\r\n     mount layout+style: 94.6ms → 14.9ms, and flat in the number of modals\r\n   The trade, same as the accordion's: one open+close costs MORE (2.1ms → 8.0ms),\r\n   because an opening panel is laid out from scratch instead of incrementally. Worth\r\n   it — you mount once and toggle rarely — and `--mono-modal-duration: 0s` claws the\r\n   toggle back if a body is heavy enough to notice.\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 scale/opacity animation has something to composite;\r\n   closing holds it `visible` until 100%, so the panel scales out instead of\r\n   vanishing on the first frame.\r\n\r\n   Gated behind @supports deliberately: `content-visibility … allow-discrete` inside\r\n   the `transition` SHORTHAND is a parse error to a browser without the feature, and\r\n   one bad entry drops the WHOLE declaration — which would take the modal's fade and\r\n   scale with it. Inside the guard the shorthand is known to parse, so the list is\r\n   restated in full. Browsers without support keep exactly the previous behaviour.\r\n\r\n   Must stay ABOVE the reduced-motion block below: that block wins on `!important`,\r\n   but @supports adds no specificity, so source order is what keeps it winning. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-modal] > [mono-panel-wrap]) > [mono-panel] {\r\n    content-visibility: hidden;\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      opacity var(--_mono-modal-duration) var(--mono-ease),\r\n      transform var(--_mono-modal-duration) var(--mono-ease),\r\n      visibility 0s linear var(--_mono-modal-duration),\r\n      content-visibility var(--_mono-modal-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-modal][mono-open] > [mono-panel-wrap] > [mono-panel] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-modal] > [mono-overlay],\r\n  [mono-modal] > [mono-panel-wrap] > [mono-panel] {\r\n    transition: opacity 0.01s linear, visibility 0s linear !important;\r\n    transform: none !important;\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. The boundaries are\r\n   `<breakpoint> - 0.02px` so they match Tailwind's `max-*` variants exactly: at\r\n   exactly 640px `sm:` applies, so auto-fullscreen must NOT.\r\n\r\n   Two things to know before editing:\r\n\r\n   1. `!important` is required here, unlike `[mono-fullscreen]` above.\r\n      `_panelSizeStyle()` writes `width`/`height`/`min-*`/`max-*` as INLINE styles\r\n      whenever the consumer sets a sizing prop, and inline beats any selector —\r\n      without it `<mono-modal auto-fullscreen width=\"720\">` would stay 720px on a\r\n      phone. The `min-*` resets matter too: a `min-width` larger than `width` still\r\n      wins.\r\n   2. The five near-identical blocks are unavoidable — a media query cannot be\r\n      parameterised by an attribute or a custom property, so each breakpoint needs\r\n      its own. Keep them in sync.\r\n*/\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"sm\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"sm\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 767.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"md\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"md\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1023.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"lg\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"lg\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1279.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"xl\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"xl\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1535.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"2xl\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"2xl\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n/* ── Programmatic dialog (`controlMonoModal().dialog`) ─────────────────────────\r\n   The compact question box the controller builds by code — upstream's\r\n   `.alert-dialog`: the text centred, the actions centred under it, and a lighter\r\n   scrim, because what the question is about should stay readable behind it.\r\n   `mono-dialog` is set through `cssClassName` on the dialog's own modal, so an\r\n   ordinary <mono-modal> is untouched. */\r\n[mono-modal][mono-dialog] {\r\n  --_mono-modal-overlay-backdrop-filter: var(--mono-modal-overlay-backdrop-filter, none);\r\n  --_mono-modal-overlay-bg: var(--mono-modal-overlay-bg,\r\n    color-mix(in oklab, black 22%, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .alert-dialog >> > * > header — grid\r\n   place-items-center text-center sm:place-items-start sm:text-start\r\n   DEVIATION: centred at EVERY width. This box is one question and two buttons —\r\n   upstream's `sm:` left-align belongs to the icon+title+description layout its\r\n   alert dialog builds, which the controller does not produce. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-body] {\r\n  text-align: center;\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .alert-dialog >> &:is([data-size='sm']) > * > footer, > [data-size='sm'] > footer\r\n   — grid grid-cols-2. The controller's dialog is that `sm` alert: its actions sit\r\n   together under the question rather than trailing to the end. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-footer] {\r\n  justify-content: center;\r\n  flex-wrap: wrap;\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-modal] > [mono-panel-wrap] > [mono-panel] > [mono-footer]) > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* The captured footer lands in an inline `<span data-mono-slot=\"foot\">` outlet, so\r\n   the buttons would otherwise sit in a LINE box — baseline-aligned, a solid button\r\n   with an icon a few px lower than an outline one beside it, with line-height air\r\n   underneath. The outlet becomes the flex row instead, and the actions wrapper\r\n   dissolves into it. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-footer] > [data-mono-slot=\"foot\"] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-modal-footer-gap);\r\n  line-height: 1;\r\n}\r\n\r\n[mono-modal][mono-dialog] .mono-modal-dialog-actions {\r\n  display: contents;\r\n}\r\n";
+
 //#endregion
 //#region src/components/modal/mono-modal.shadow.ts
 /**
 * Alias each region also answers to. `header`/`footer` mirror the drawer's slot
 * vocabulary and OUTRANK the original `head`/`foot` when both are supplied.
 */
-var ALIAS_OF = {
+const ALIAS_OF = {
 	head: "header",
 	foot: "footer"
 };
-var MonoModalShadow = class MonoModalShadow extends withShadowUtilityStyles(MonoModalCore(LitElement)) {
+let MonoModalShadow = class MonoModalShadow extends withShadowUtilityStyles(MonoModalCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(modal_default, { host: "mono-modal" }))];
+		this.styles = [unsafeCSS(toShadowCss(modal_css_raw_default, { host: "mono-modal" }))];
 	}
 	get _slotsAlwaysRender() {
 		return true;
@@ -970,6 +976,7 @@ var MonoModalShadow = class MonoModalShadow extends withShadowUtilityStyles(Mono
 	}
 };
 MonoModalShadow = __decorate([customElement("mono-shadow-modal")], MonoModalShadow);
+
 //#endregion
 //#region src/components/modal/mono-modal-controller.ts
 /**
@@ -978,7 +985,7 @@ MonoModalShadow = __decorate([customElement("mono-shadow-modal")], MonoModalShad
 * cannot be turned off — a dialog is a question, and the only way past it is one
 * of its own buttons.
 */
-var DIALOG_MODAL_DEFAULTS = {
+const DIALOG_MODAL_DEFAULTS = {
 	size: "xs",
 	color: "primary",
 	width: "fit-content",
@@ -989,16 +996,16 @@ var DIALOG_MODAL_DEFAULTS = {
 	cssClassName: "mono-modal-dialog"
 };
 /** Everything a dialog must refuse. Applied last, so `dialog.props` cannot undo it. */
-var DIALOG_LOCKS = {
+const DIALOG_LOCKS = {
 	persistent: true,
 	dismissible: false,
 	closeOnEscape: false,
 	closeOnOverlay: false
 };
 /** How long a closed dialog's element lingers for the close transition (`--mono-modal-duration` is 0.22s). */
-var DIALOG_REMOVE_DELAY = 320;
+const DIALOG_REMOVE_DELAY = 320;
 /** Light tag first; the shadow build registers its own name. */
-var resolveTag = (light, shadow) => {
+const resolveTag = (light, shadow) => {
 	if (typeof customElements === "undefined") return null;
 	if (customElements.get(light)) return light;
 	if (customElements.get(shadow)) return shadow;
@@ -1190,5 +1197,6 @@ function monoModal(options = {}) {
 		}
 	};
 }
+
 //#endregion
-export { MonoModalCore, MonoModalShadow, monoModal as controlMonoModal, monoModal };
+export { MonoModalCore, MonoModalShadow, monoModal as controlMonoModal, monoModal };

package/dist/ui/shadow/nav.js

@@ -1,11 +1,12 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../../css-class-BRKRzHx-.js";
-import { n as releaseLayoutVar, t as claimLayoutVar } from "../../layout-var-CZnzMC0s.js";
-import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../../color-DHYrfXsX.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../../css-class-B6Tc_MAx.js";
+import { n as releaseLayoutVar, t as claimLayoutVar } from "../../layout-var-BSBKY49k.js";
+import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../../color-CEYYtRX-.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
+
 //#region src/components/nav/nav-utils.ts
-var DENSITY_HEIGHTS = {
+const DENSITY_HEIGHTS = {
 	compact: 48,
 	comfortable: 56,
 	default: 64
@@ -41,6 +42,7 @@ function validateNavProps(props) {
 	].includes(props.variant)) errors.push(`Invalid variant: ${String(props.variant)}`);
 	return errors;
 }
+
 //#endregion
 //#region src/components/nav/nav-core.ts
 /**
@@ -54,7 +56,7 @@ function validateNavProps(props) {
 *  - the slot strategy — `renderSlot()` is a hook each wrapper overrides
 *    (light: empty, nodes are captured/placed; shadow: native `<slot>`).
 */
-var MonoNavCore = (superClass) => {
+const MonoNavCore = (superClass) => {
 	class MonoNavCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -154,7 +156,8 @@ var MonoNavCore = (superClass) => {
 		* it has to serialize from THIS getter or it will wipe the colour.
 		*/
 		get _inlineRootStyle() {
-			return customColorStyle(isThemeColorToken(this.color) || this.color === "surface" ? "" : this.color, "nav");
+			const raw = isThemeColorToken(this.color) || this.color === "surface" ? "" : this.color;
+			return customColorStyle(raw, "nav");
 		}
 		/**
 		* The Basecoat styling attributes, mirroring the props one for one. A prop
@@ -217,14 +220,16 @@ var MonoNavCore = (superClass) => {
 	__decorate([property({ attribute: false })], MonoNavCoreClass.prototype, "cssClassName", void 0);
 	return MonoNavCoreClass;
 };
+
 //#endregion
-//#region src/components/nav/nav.css?raw
-var nav_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-nav — the top app bar.\r\n\r\n   Basecoat ships NO nav component. basecoat-css@1.0.2 has dialog, drawer,\r\n   sidebar, tabs, dropdown-menu … and no header bar, so this is an EXTENSION:\r\n   the structure is mono's own and every VALUE is drawn from the Basecoat token\r\n   layer and from `.sidebar nav`, which is the other piece of app chrome and the\r\n   one this bar sits beside. Where a rule has an upstream counterpart it is\r\n   cited; everything else is ours.\r\n\r\n   Styled by ATTRIBUTE, like the rest of the port — and the attributes mirror\r\n   the element's props one for one, so hand-written markup reads like the Lit /\r\n   Vue tag:\r\n\r\n     <mono-nav density=\"compact\" color=\"primary\" variant=\"outlined\" extension>\r\n     <header mono-nav mono-density=\"compact\" mono-color=\"primary\"\r\n             mono-variant=\"outlined\" mono-has-extension role=\"banner\">\r\n       <div mono-inner>\r\n         <div mono-start>…</div>\r\n         <div mono-center>…</div>\r\n         <div mono-end>…</div>\r\n       </div>\r\n       <div mono-extension>…</div>\r\n     </header>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-density])` =\r\n   comfortable, `:not([mono-color])` = surface, `:not([mono-variant])` =\r\n   elevated). `sticky` defaults to TRUE, so it is the NEGATIVE that says\r\n   something: `mono-static` opts a bar out. The old classes\r\n   (`.mono-nav.comfortable.surface.elevated.sticky`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map:\r\n     [mono-nav]            the <header> — the bar, and the var scope\r\n     [mono-density=…]      EXTENSION (compact / comfortable / default)\r\n     [mono-color=…]        EXTENSION (ten palette roles, `surface`, `custom`)\r\n     [mono-variant=…]      EXTENSION (elevated / flat / outlined)\r\n     [mono-inner]          the bar row\r\n     [mono-start] / [mono-center] / [mono-end]   the three regions\r\n     [mono-extension]      the optional second row\r\n\r\n   COLOUR. `surface` (the default) leaves the bar unpainted: it takes\r\n   `--sidebar` / `--sidebar-foreground` / `--sidebar-border`, exactly what\r\n   upstream gives the sidebar's own chrome. Every other role PAINTS the bar in\r\n   that role and inks it in the role's `-foreground` token, the way\r\n   `.btn[data-variant='primary']` does — which is what finally retires the\r\n   `--*-rgb` triples and the hand-rolled contrast maths the pre-port sheet\r\n   needed. A literal `color` (\"#7c3aed\") still arrives inline from the component\r\n   (`composables/color.ts`) as `mono-color=\"custom\"`.\r\n\r\n   NO GRADIENTS, NO BLUR. The pre-port `surface` bar was a 96%-opaque\r\n   `backdrop-filter: blur(12px)` pane and `elevated` was an accent-tinted glow.\r\n   Both are gone: the bar is opaque and `elevated` is `--mono-shadow-sm`.\r\n   `--mono-nav-backdrop-filter` brings the blur back for a page that wants it.\r\n\r\n   DARK MODE comes free — every colour here resolves through a Basecoat token\r\n   that already flips, and the alphas are mode-independent. No `.dark` rule can\r\n   live in component CSS anyway: a selector crosses neither the custom-element\r\n   host nor the shadow boundary.\r\n\r\n   FLAVORS set `--mono-nav-{bar-height,pad-x,gap,extension-height,radius,shadow,\r\n   font-size,…}` (+ the per-density forms). Every fallback here is the token\r\n   layer's own value.\r\n   ========================================================================= */\r\n\r\nmono-nav {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the bar\r\n   ========================================= */\r\n\r\n[mono-nav] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-nav-primary: var(--mono-nav-primary, var(--primary));\r\n  --_mono-nav-secondary: var(--mono-nav-secondary, var(--secondary-foreground));\r\n  --_mono-nav-success: var(--mono-nav-success, var(--success));\r\n  --_mono-nav-danger: var(--mono-nav-danger, var(--destructive));\r\n  --_mono-nav-warning: var(--mono-nav-warning, var(--warning));\r\n  --_mono-nav-info: var(--mono-nav-info, var(--info));\r\n  --_mono-nav-teal: var(--mono-nav-teal, var(--teal));\r\n  --_mono-nav-purple: var(--mono-nav-purple, var(--purple));\r\n  --_mono-nav-neutral: var(--mono-nav-neutral, var(--neutral));\r\n  --_mono-nav-dark: var(--mono-nav-dark, var(--dark));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-nav-accent: var(--mono-nav-accent, var(--_mono-nav-accent-preset, var(--_mono-nav-primary)));\r\n  /* Ink for anything painted IN the accent. Each role points this at its own\r\n     `-foreground` token, so a light role (warning, neutral) gets readable ink\r\n     without a luminance calculation; a literal colour gets one written inline\r\n     by the component. */\r\n  --_mono-nav-on-accent: var(--mono-nav-on-accent, var(--_mono-nav-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── the unpainted surface ───────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground\r\n     `--sidebar` IS `--card` in the token layer, so this is the card's surface\r\n     under the name the one piece of upstream chrome actually uses. */\r\n  --_mono-nav-surface: var(--mono-nav-surface, var(--sidebar));\r\n  /* the `outlined` variant's bottom rule — a nav idiom with no card counterpart,\r\n     so it takes the card's ring colour rather than inventing one */\r\n  --_mono-nav-border: var(--mono-nav-border, var(--_mono-nav-ring-color));\r\n\r\n  --_mono-nav-bg: var(--mono-nav-bg, var(--_mono-nav-bg-preset, var(--_mono-nav-surface)));\r\n  --_mono-nav-text: var(--mono-nav-text, var(--_mono-nav-text-preset, var(--sidebar-foreground)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 …:\r\n     upstream's muted chrome ink is the bar ink at 70%, not a separate token. */\r\n  --_mono-nav-text-soft: var(--mono-nav-text-soft, var(--_mono-nav-text-soft-preset, color-mix(in oklab, var(--_mono-nav-text) 70%, transparent)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-nav-border-lite: var(--mono-nav-border-lite, var(--_mono-nav-border-lite-preset, var(--sidebar-border)));\r\n\r\n  /* ── comfortable metrics live on the unqualified root ON PURPOSE ───────── */\r\n  --_mono-nav-height: var(--mono-nav-bar-height, var(--_mono-nav-height-preset, var(--mono-nav-bar-height-comfortable, calc(var(--mono-spacing) * 14))));\r\n  --_mono-nav-extension-height: var(--mono-nav-extension-height, var(--_mono-nav-extension-height-preset, var(--mono-nav-extension-height-comfortable, calc(var(--mono-spacing) * 11))));\r\n  /* the card's own gutter — basecoat@1.0.2 styles/vega.css .card > header — gap-1 rounded-t-xl px-6 …\r\n     The compact and default steps SCALE from this one, so a flavor moves all\r\n     three gutters by setting `--mono-nav-pad-x-comfortable` alone. */\r\n  --_mono-nav-pad-unit: var(--mono-nav-pad-x-comfortable, calc(var(--mono-spacing) * 6));\r\n  --_mono-nav-pad-x: var(--mono-nav-pad-x, var(--_mono-nav-pad-x-preset, var(--_mono-nav-pad-unit)));\r\n  --_mono-nav-gap: var(--mono-nav-gap, var(--_mono-nav-gap-preset, var(--mono-nav-gap-comfortable, calc(var(--mono-spacing) * 3))));\r\n  --_mono-nav-font: var(--mono-nav-font, var(--_mono-nav-font-preset, var(--mono-nav-font-comfortable, var(--mono-text-sm))));\r\n  --_mono-nav-extension-font: var(--mono-nav-extension-font, var(--_mono-nav-extension-font-preset, var(--mono-nav-extension-font-comfortable, var(--mono-text-sm))));\r\n\r\n  /* ── chrome — THE NAV IS A CARD ─────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .card — ring-foreground/10 bg-card\r\n     text-card-foreground overflow-hidden rounded-xl text-sm shadow-xs ring-1 …\r\n\r\n     Basecoat has no nav, but it has a wide rectangular surface with an edge and\r\n     an elevation, and that is exactly what a top bar is. So the bar's chrome\r\n     tracks `.card` value for value — radius, ring, shadow, gutter and type —\r\n     and every flavor's nav delta is its CARD delta (sera square and roomy, maia\r\n     2xl, luma 4xl with shadow-md, mira lg, lyra square and tight, rhea 3xl).\r\n     Without this the eight styles all painted the same bar, which was the bug.\r\n\r\n     The ring is drawn INSIDE the border box, as card.css draws it: an outside\r\n     ring is the first pixel lost to any ancestor that clips, and a bar is\r\n     usually flush against one. A full-bleed bar that wants no edge at all sets\r\n     `--mono-nav-ring-width: 0`. */\r\n  --_mono-nav-radius: var(--mono-nav-radius, var(--mono-radius-xl));\r\n  --_mono-nav-ring-color: var(--mono-nav-ring-color, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-nav-ring-width: var(--mono-nav-ring-width, var(--mono-border-width));\r\n  --_mono-nav-ring: inset 0 0 0 var(--_mono-nav-ring-width) var(--_mono-nav-ring-color);\r\n  --_mono-nav-shadow: var(--mono-nav-shadow, var(--mono-shadow-xs));\r\n  --_mono-nav-border-width: var(--mono-nav-border-width, var(--mono-border-width));\r\n  --_mono-nav-backdrop-filter: var(--mono-nav-backdrop-filter, none);\r\n  --_mono-nav-z: var(--mono-nav-z, 30);\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  font-size: var(--_mono-nav-font);\r\n  color: var(--_mono-nav-text);\r\n  background: var(--_mono-nav-bg);\r\n  border-radius: var(--_mono-nav-radius);\r\n  border-bottom: var(--_mono-nav-border-width) solid transparent;\r\n  backdrop-filter: var(--_mono-nav-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-nav-backdrop-filter);\r\n  z-index: var(--_mono-nav-z);\r\n\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-nav],\r\n:where([mono-nav]) *,\r\n:where([mono-nav]) *::before,\r\n:where([mono-nav]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Density — EXTENSION: the bar's vertical rhythm\r\n   ========================================= */\r\n\r\n[mono-nav][mono-density=\"compact\"] {\r\n  --_mono-nav-height-preset: var(--mono-nav-bar-height-compact, calc(var(--mono-spacing) * 12));\r\n  --_mono-nav-extension-height-preset: var(--mono-nav-extension-height-compact, calc(var(--mono-spacing) * 9));\r\n  --_mono-nav-pad-x-preset: var(--mono-nav-pad-x-compact, calc(var(--_mono-nav-pad-unit) * 0.6667));\r\n  --_mono-nav-gap-preset: var(--mono-nav-gap-compact, calc(var(--mono-spacing) * 2));\r\n  --_mono-nav-font-preset: var(--mono-nav-font-compact, var(--mono-text-xs));\r\n  --_mono-nav-extension-font-preset: var(--mono-nav-extension-font-compact, var(--mono-text-xs));\r\n}\r\n\r\n[mono-nav][mono-density=\"default\"] {\r\n  --_mono-nav-height-preset: var(--mono-nav-bar-height-default, calc(var(--mono-spacing) * 16));\r\n  --_mono-nav-extension-height-preset: var(--mono-nav-extension-height-default, calc(var(--mono-spacing) * 12));\r\n  --_mono-nav-pad-x-preset: var(--mono-nav-pad-x-default, calc(var(--_mono-nav-pad-unit) * 1.3333));\r\n  --_mono-nav-gap-preset: var(--mono-nav-gap-default, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-nav-font-preset: var(--mono-nav-font-default, var(--mono-text-base));\r\n  --_mono-nav-extension-font-preset: var(--mono-nav-extension-font-default, var(--mono-text-sm));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: `surface` is the bar unpainted, every role paints it\r\n   ========================================= */\r\n\r\n[mono-nav][mono-color=\"primary\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-primary);\r\n  --_mono-nav-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"secondary\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-secondary);\r\n  --_mono-nav-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-nav][mono-color=\"success\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-success);\r\n  --_mono-nav-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"danger\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-danger);\r\n  --_mono-nav-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"warning\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-warning);\r\n  --_mono-nav-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"info\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-info);\r\n  --_mono-nav-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"teal\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-teal);\r\n  --_mono-nav-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"purple\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-purple);\r\n  --_mono-nav-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"neutral\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-neutral);\r\n  --_mono-nav-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"dark\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-dark);\r\n  --_mono-nav-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* A painted bar takes the role as its fill and the role's `-foreground` as its\r\n   ink — the `.btn[data-variant='primary']` pattern, one level up. Every\r\n   foreground on the bar is then mixed FROM that ink rather than from a literal\r\n   white, so `warning` and `neutral` stay readable. `custom` is the marker for a\r\n   literal `color`; its accent and ink arrive inline from the component. */\r\n[mono-nav]:is(\r\n    [mono-color=\"primary\"],\r\n    [mono-color=\"secondary\"],\r\n    [mono-color=\"success\"],\r\n    [mono-color=\"danger\"],\r\n    [mono-color=\"warning\"],\r\n    [mono-color=\"info\"],\r\n    [mono-color=\"teal\"],\r\n    [mono-color=\"purple\"],\r\n    [mono-color=\"neutral\"],\r\n    [mono-color=\"dark\"],\r\n    [mono-color=\"custom\"]\r\n  ) {\r\n  --_mono-nav-bg-preset: var(--_mono-nav-accent);\r\n  --_mono-nav-text-preset: var(--_mono-nav-on-accent);\r\n  --_mono-nav-text-soft-preset: color-mix(in oklab, var(--_mono-nav-on-accent) 70%, transparent);\r\n  --_mono-nav-border-lite-preset: color-mix(in oklab, var(--_mono-nav-on-accent) 20%, transparent);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `elevated` is the default, so the unqualified root carries it — and it is the\r\n   card exactly: the inset ring AND the elevation, in that order. */\r\n[mono-nav]:is(:not([mono-variant]), [mono-variant=\"elevated\"]) {\r\n  box-shadow: var(--_mono-nav-ring), var(--_mono-nav-shadow);\r\n}\r\n\r\n/* `flat` drops both. */\r\n[mono-nav][mono-variant=\"flat\"] {\r\n  box-shadow: none;\r\n  border-bottom-color: transparent;\r\n}\r\n\r\n/* `outlined` trades the elevation for a bottom rule — the nav idiom, and the\r\n   one piece of its chrome the card has no counterpart for. The ring stays, so\r\n   an outlined bar still reads as the same surface. */\r\n[mono-nav][mono-variant=\"outlined\"] {\r\n  box-shadow: var(--_mono-nav-ring);\r\n  border-bottom-color: var(--_mono-nav-border);\r\n}\r\n\r\n/* =========================================\r\n   Sticky\r\n   -----------------------------------------------------------------------------\r\n   `sticky` is ON by default, so the attribute that says something is the\r\n   negative. In the light build the host `<mono-nav>` is what sits in the parent\r\n   layout flow and the inner `<header>` only fills it, so the host is what has to\r\n   stick — a sticky inner header has no scroll distance inside a host that\r\n   shrink-wraps it (which is also why leaving the rule on both is harmless). In\r\n   hand-written markup the `<header>` IS the element in flow, and the same rule\r\n   does the work.\r\n\r\n   The host reflects the prop (`converter` empty-attr === true, missing ===\r\n   false), so `[sticky]` is the right selector there.\r\n   ========================================= */\r\n\r\nmono-nav[sticky],\r\n[mono-nav]:not([mono-static]) {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: var(--mono-nav-z, 30);\r\n}\r\n\r\n[mono-nav][mono-static] {\r\n  position: static;\r\n}\r\n\r\n/* =========================================\r\n   The bar row\r\n   ========================================= */\r\n\r\n:where([mono-nav]) > [mono-inner] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  padding: 0 var(--_mono-nav-pad-x);\r\n  height: var(--_mono-nav-height);\r\n  min-height: var(--_mono-nav-height);\r\n  width: 100%;\r\n}\r\n\r\n:where([mono-nav] > [mono-inner]) > [mono-start] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  flex-shrink: 0;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-nav] > [mono-inner]) > [mono-center] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n/* `margin-left: auto` keeps the end region at the trailing edge even when the\r\n   center is empty and collapsed. */\r\n:where([mono-nav] > [mono-inner]) > [mono-end] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-nav-gap) * 0.7);\r\n  flex-shrink: 0;\r\n  margin-left: auto;\r\n}\r\n\r\n/* An empty region is NOT hidden.\r\n\r\n   `:empty` cannot see across a shadow boundary: in the shadow build each region\r\n   holds a <slot> ELEMENT, so the region is never `:empty` whether or not anything\r\n   is assigned to it, and a <slot>'s own children are its fallback content rather\r\n   than the assigned nodes — there is no selector for \"nothing was slotted here\".\r\n   The light build WAS `:empty` in that case, so a bar with no center content laid\r\n   out with one flex gap in the light build and two in the shadow one: 12px apart\r\n   at max-content width, which is what a shrink-to-fit demo shows.\r\n\r\n   Leaving every region in place is what makes the two builds agree. It costs\r\n   nothing at a normal full-width bar — the center is `flex: 1` and eats the slack\r\n   either way, and the end region is pinned by its own `margin-left: auto`. */\r\n\r\n/* =========================================\r\n   Extension row\r\n   ========================================= */\r\n\r\n:where([mono-nav]) > [mono-extension] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  padding: 0 var(--_mono-nav-pad-x);\r\n  min-height: var(--_mono-nav-extension-height);\r\n  border-top: var(--_mono-nav-border-width) solid var(--_mono-nav-border-lite);\r\n  font-size: var(--_mono-nav-extension-font);\r\n}\r\n\r\n/* The element always renders the row so its slot target is stable; the root\r\n   attribute is what turns it on. Hand-written markup that simply omits the row\r\n   needs neither. */\r\n[mono-nav]:not([mono-has-extension]) > [mono-extension] {\r\n  display: none;\r\n}\r\n\r\n/* A slotted control inherits the bar's face, not the UA's. */\r\n[mono-nav] :is(button, input, select, textarea) {\r\n  font-family: inherit;\r\n}\r\n\r\n/* =========================================\r\n   Responsive — a wide bar steps down a density on a narrow screen\r\n   ========================================= */\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-nav][mono-density=\"default\"] {\r\n    --_mono-nav-height-preset: calc(var(--mono-spacing) * 14);\r\n    --_mono-nav-pad-x-preset: calc(var(--mono-spacing) * 4);\r\n    --_mono-nav-gap-preset: calc(var(--mono-spacing) * 2.5);\r\n  }\r\n\r\n  [mono-nav]:not([mono-density]) {\r\n    --_mono-nav-height-preset: calc(var(--mono-spacing) * 12);\r\n    --_mono-nav-pad-x-preset: calc(var(--mono-spacing) * 3.5);\r\n    --_mono-nav-gap-preset: calc(var(--mono-spacing) * 2);\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Layout helper\r\n   -----------------------------------------------------------------------------\r\n   Consumers wrap their main content in this to pad around the nav (and the\r\n   sidebar). The vars are written on `:root` by mono-nav and mono-sidebar\r\n   themselves. Kept as a CLASS — it is a consumer-applied utility, not a part of\r\n   this component — with the attribute form accepted for markup that would\r\n   rather stay attributes all the way down.\r\n   ========================================= */\r\n\r\n.mono-layout-content,\r\n[mono-layout-content] {\r\n  padding-top: var(--mono-nav-height, 0);\r\n  padding-left: var(--mono-sidebar-left-width, 0);\r\n  padding-right: var(--mono-sidebar-right-width, 0);\r\n  min-height: 100vh;\r\n  min-height: 100dvh;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-nav] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\nav\nav.css?raw.js
+var nav_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-nav — the top app bar.\r\n\r\n   Basecoat ships NO nav component. basecoat-css@1.0.2 has dialog, drawer,\r\n   sidebar, tabs, dropdown-menu … and no header bar, so this is an EXTENSION:\r\n   the structure is mono's own and every VALUE is drawn from the Basecoat token\r\n   layer and from `.sidebar nav`, which is the other piece of app chrome and the\r\n   one this bar sits beside. Where a rule has an upstream counterpart it is\r\n   cited; everything else is ours.\r\n\r\n   Styled by ATTRIBUTE, like the rest of the port — and the attributes mirror\r\n   the element's props one for one, so hand-written markup reads like the Lit /\r\n   Vue tag:\r\n\r\n     <mono-nav density=\"compact\" color=\"primary\" variant=\"outlined\" extension>\r\n     <header mono-nav mono-density=\"compact\" mono-color=\"primary\"\r\n             mono-variant=\"outlined\" mono-has-extension role=\"banner\">\r\n       <div mono-inner>\r\n         <div mono-start>…</div>\r\n         <div mono-center>…</div>\r\n         <div mono-end>…</div>\r\n       </div>\r\n       <div mono-extension>…</div>\r\n     </header>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-density])` =\r\n   comfortable, `:not([mono-color])` = surface, `:not([mono-variant])` =\r\n   elevated). `sticky` defaults to TRUE, so it is the NEGATIVE that says\r\n   something: `mono-static` opts a bar out. The old classes\r\n   (`.mono-nav.comfortable.surface.elevated.sticky`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map:\r\n     [mono-nav]            the <header> — the bar, and the var scope\r\n     [mono-density=…]      EXTENSION (compact / comfortable / default)\r\n     [mono-color=…]        EXTENSION (ten palette roles, `surface`, `custom`)\r\n     [mono-variant=…]      EXTENSION (elevated / flat / outlined)\r\n     [mono-inner]          the bar row\r\n     [mono-start] / [mono-center] / [mono-end]   the three regions\r\n     [mono-extension]      the optional second row\r\n\r\n   COLOUR. `surface` (the default) leaves the bar unpainted: it takes\r\n   `--sidebar` / `--sidebar-foreground` / `--sidebar-border`, exactly what\r\n   upstream gives the sidebar's own chrome. Every other role PAINTS the bar in\r\n   that role and inks it in the role's `-foreground` token, the way\r\n   `.btn[data-variant='primary']` does — which is what finally retires the\r\n   `--*-rgb` triples and the hand-rolled contrast maths the pre-port sheet\r\n   needed. A literal `color` (\"#7c3aed\") still arrives inline from the component\r\n   (`composables/color.ts`) as `mono-color=\"custom\"`.\r\n\r\n   NO GRADIENTS, NO BLUR. The pre-port `surface` bar was a 96%-opaque\r\n   `backdrop-filter: blur(12px)` pane and `elevated` was an accent-tinted glow.\r\n   Both are gone: the bar is opaque and `elevated` is `--mono-shadow-sm`.\r\n   `--mono-nav-backdrop-filter` brings the blur back for a page that wants it.\r\n\r\n   DARK MODE comes free — every colour here resolves through a Basecoat token\r\n   that already flips, and the alphas are mode-independent. No `.dark` rule can\r\n   live in component CSS anyway: a selector crosses neither the custom-element\r\n   host nor the shadow boundary.\r\n\r\n   FLAVORS set `--mono-nav-{bar-height,pad-x,gap,extension-height,radius,shadow,\r\n   font-size,…}` (+ the per-density forms). Every fallback here is the token\r\n   layer's own value.\r\n   ========================================================================= */\r\n\r\nmono-nav {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the bar\r\n   ========================================= */\r\n\r\n[mono-nav] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-nav-primary: var(--mono-nav-primary, var(--primary));\r\n  --_mono-nav-secondary: var(--mono-nav-secondary, var(--secondary-foreground));\r\n  --_mono-nav-success: var(--mono-nav-success, var(--success));\r\n  --_mono-nav-danger: var(--mono-nav-danger, var(--destructive));\r\n  --_mono-nav-warning: var(--mono-nav-warning, var(--warning));\r\n  --_mono-nav-info: var(--mono-nav-info, var(--info));\r\n  --_mono-nav-teal: var(--mono-nav-teal, var(--teal));\r\n  --_mono-nav-purple: var(--mono-nav-purple, var(--purple));\r\n  --_mono-nav-neutral: var(--mono-nav-neutral, var(--neutral));\r\n  --_mono-nav-dark: var(--mono-nav-dark, var(--dark));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-nav-accent: var(--mono-nav-accent, var(--_mono-nav-accent-preset, var(--_mono-nav-primary)));\r\n  /* Ink for anything painted IN the accent. Each role points this at its own\r\n     `-foreground` token, so a light role (warning, neutral) gets readable ink\r\n     without a luminance calculation; a literal colour gets one written inline\r\n     by the component. */\r\n  --_mono-nav-on-accent: var(--mono-nav-on-accent, var(--_mono-nav-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── the unpainted surface ───────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground\r\n     `--sidebar` IS `--card` in the token layer, so this is the card's surface\r\n     under the name the one piece of upstream chrome actually uses. */\r\n  --_mono-nav-surface: var(--mono-nav-surface, var(--sidebar));\r\n  /* the `outlined` variant's bottom rule — a nav idiom with no card counterpart,\r\n     so it takes the card's ring colour rather than inventing one */\r\n  --_mono-nav-border: var(--mono-nav-border, var(--_mono-nav-ring-color));\r\n\r\n  --_mono-nav-bg: var(--mono-nav-bg, var(--_mono-nav-bg-preset, var(--_mono-nav-surface)));\r\n  --_mono-nav-text: var(--mono-nav-text, var(--_mono-nav-text-preset, var(--sidebar-foreground)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 …:\r\n     upstream's muted chrome ink is the bar ink at 70%, not a separate token. */\r\n  --_mono-nav-text-soft: var(--mono-nav-text-soft, var(--_mono-nav-text-soft-preset, color-mix(in oklab, var(--_mono-nav-text) 70%, transparent)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-nav-border-lite: var(--mono-nav-border-lite, var(--_mono-nav-border-lite-preset, var(--sidebar-border)));\r\n\r\n  /* ── comfortable metrics live on the unqualified root ON PURPOSE ───────── */\r\n  --_mono-nav-height: var(--mono-nav-bar-height, var(--_mono-nav-height-preset, var(--mono-nav-bar-height-comfortable, calc(var(--mono-spacing) * 14))));\r\n  --_mono-nav-extension-height: var(--mono-nav-extension-height, var(--_mono-nav-extension-height-preset, var(--mono-nav-extension-height-comfortable, calc(var(--mono-spacing) * 11))));\r\n  /* the card's own gutter — basecoat@1.0.2 styles/vega.css .card > header — gap-1 rounded-t-xl px-6 …\r\n     The compact and default steps SCALE from this one, so a flavor moves all\r\n     three gutters by setting `--mono-nav-pad-x-comfortable` alone. */\r\n  --_mono-nav-pad-unit: var(--mono-nav-pad-x-comfortable, calc(var(--mono-spacing) * 6));\r\n  --_mono-nav-pad-x: var(--mono-nav-pad-x, var(--_mono-nav-pad-x-preset, var(--_mono-nav-pad-unit)));\r\n  --_mono-nav-gap: var(--mono-nav-gap, var(--_mono-nav-gap-preset, var(--mono-nav-gap-comfortable, calc(var(--mono-spacing) * 3))));\r\n  --_mono-nav-font: var(--mono-nav-font, var(--_mono-nav-font-preset, var(--mono-nav-font-comfortable, var(--mono-text-sm))));\r\n  --_mono-nav-extension-font: var(--mono-nav-extension-font, var(--_mono-nav-extension-font-preset, var(--mono-nav-extension-font-comfortable, var(--mono-text-sm))));\r\n\r\n  /* ── chrome — THE NAV IS A CARD ─────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .card — ring-foreground/10 bg-card\r\n     text-card-foreground overflow-hidden rounded-xl text-sm shadow-xs ring-1 …\r\n\r\n     Basecoat has no nav, but it has a wide rectangular surface with an edge and\r\n     an elevation, and that is exactly what a top bar is. So the bar's chrome\r\n     tracks `.card` value for value — radius, ring, shadow, gutter and type —\r\n     and every flavor's nav delta is its CARD delta (sera square and roomy, maia\r\n     2xl, luma 4xl with shadow-md, mira lg, lyra square and tight, rhea 3xl).\r\n     Without this the eight styles all painted the same bar, which was the bug.\r\n\r\n     The ring is drawn INSIDE the border box, as card.css draws it: an outside\r\n     ring is the first pixel lost to any ancestor that clips, and a bar is\r\n     usually flush against one. A full-bleed bar that wants no edge at all sets\r\n     `--mono-nav-ring-width: 0`. */\r\n  --_mono-nav-radius: var(--mono-nav-radius, var(--mono-radius-xl));\r\n  --_mono-nav-ring-color: var(--mono-nav-ring-color, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-nav-ring-width: var(--mono-nav-ring-width, var(--mono-border-width));\r\n  --_mono-nav-ring: inset 0 0 0 var(--_mono-nav-ring-width) var(--_mono-nav-ring-color);\r\n  --_mono-nav-shadow: var(--mono-nav-shadow, var(--mono-shadow-xs));\r\n  --_mono-nav-border-width: var(--mono-nav-border-width, var(--mono-border-width));\r\n  --_mono-nav-backdrop-filter: var(--mono-nav-backdrop-filter, none);\r\n  --_mono-nav-z: var(--mono-nav-z, 30);\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  font-size: var(--_mono-nav-font);\r\n  color: var(--_mono-nav-text);\r\n  background: var(--_mono-nav-bg);\r\n  border-radius: var(--_mono-nav-radius);\r\n  border-bottom: var(--_mono-nav-border-width) solid transparent;\r\n  backdrop-filter: var(--_mono-nav-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-nav-backdrop-filter);\r\n  z-index: var(--_mono-nav-z);\r\n\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-nav],\r\n:where([mono-nav]) *,\r\n:where([mono-nav]) *::before,\r\n:where([mono-nav]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Density — EXTENSION: the bar's vertical rhythm\r\n   ========================================= */\r\n\r\n[mono-nav][mono-density=\"compact\"] {\r\n  --_mono-nav-height-preset: var(--mono-nav-bar-height-compact, calc(var(--mono-spacing) * 12));\r\n  --_mono-nav-extension-height-preset: var(--mono-nav-extension-height-compact, calc(var(--mono-spacing) * 9));\r\n  --_mono-nav-pad-x-preset: var(--mono-nav-pad-x-compact, calc(var(--_mono-nav-pad-unit) * 0.6667));\r\n  --_mono-nav-gap-preset: var(--mono-nav-gap-compact, calc(var(--mono-spacing) * 2));\r\n  --_mono-nav-font-preset: var(--mono-nav-font-compact, var(--mono-text-xs));\r\n  --_mono-nav-extension-font-preset: var(--mono-nav-extension-font-compact, var(--mono-text-xs));\r\n}\r\n\r\n[mono-nav][mono-density=\"default\"] {\r\n  --_mono-nav-height-preset: var(--mono-nav-bar-height-default, calc(var(--mono-spacing) * 16));\r\n  --_mono-nav-extension-height-preset: var(--mono-nav-extension-height-default, calc(var(--mono-spacing) * 12));\r\n  --_mono-nav-pad-x-preset: var(--mono-nav-pad-x-default, calc(var(--_mono-nav-pad-unit) * 1.3333));\r\n  --_mono-nav-gap-preset: var(--mono-nav-gap-default, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-nav-font-preset: var(--mono-nav-font-default, var(--mono-text-base));\r\n  --_mono-nav-extension-font-preset: var(--mono-nav-extension-font-default, var(--mono-text-sm));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: `surface` is the bar unpainted, every role paints it\r\n   ========================================= */\r\n\r\n[mono-nav][mono-color=\"primary\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-primary);\r\n  --_mono-nav-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"secondary\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-secondary);\r\n  --_mono-nav-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-nav][mono-color=\"success\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-success);\r\n  --_mono-nav-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"danger\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-danger);\r\n  --_mono-nav-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"warning\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-warning);\r\n  --_mono-nav-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"info\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-info);\r\n  --_mono-nav-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"teal\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-teal);\r\n  --_mono-nav-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"purple\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-purple);\r\n  --_mono-nav-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"neutral\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-neutral);\r\n  --_mono-nav-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"dark\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-dark);\r\n  --_mono-nav-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* A painted bar takes the role as its fill and the role's `-foreground` as its\r\n   ink — the `.btn[data-variant='primary']` pattern, one level up. Every\r\n   foreground on the bar is then mixed FROM that ink rather than from a literal\r\n   white, so `warning` and `neutral` stay readable. `custom` is the marker for a\r\n   literal `color`; its accent and ink arrive inline from the component. */\r\n[mono-nav]:is(\r\n    [mono-color=\"primary\"],\r\n    [mono-color=\"secondary\"],\r\n    [mono-color=\"success\"],\r\n    [mono-color=\"danger\"],\r\n    [mono-color=\"warning\"],\r\n    [mono-color=\"info\"],\r\n    [mono-color=\"teal\"],\r\n    [mono-color=\"purple\"],\r\n    [mono-color=\"neutral\"],\r\n    [mono-color=\"dark\"],\r\n    [mono-color=\"custom\"]\r\n  ) {\r\n  --_mono-nav-bg-preset: var(--_mono-nav-accent);\r\n  --_mono-nav-text-preset: var(--_mono-nav-on-accent);\r\n  --_mono-nav-text-soft-preset: color-mix(in oklab, var(--_mono-nav-on-accent) 70%, transparent);\r\n  --_mono-nav-border-lite-preset: color-mix(in oklab, var(--_mono-nav-on-accent) 20%, transparent);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `elevated` is the default, so the unqualified root carries it — and it is the\r\n   card exactly: the inset ring AND the elevation, in that order. */\r\n[mono-nav]:is(:not([mono-variant]), [mono-variant=\"elevated\"]) {\r\n  box-shadow: var(--_mono-nav-ring), var(--_mono-nav-shadow);\r\n}\r\n\r\n/* `flat` drops both. */\r\n[mono-nav][mono-variant=\"flat\"] {\r\n  box-shadow: none;\r\n  border-bottom-color: transparent;\r\n}\r\n\r\n/* `outlined` trades the elevation for a bottom rule — the nav idiom, and the\r\n   one piece of its chrome the card has no counterpart for. The ring stays, so\r\n   an outlined bar still reads as the same surface. */\r\n[mono-nav][mono-variant=\"outlined\"] {\r\n  box-shadow: var(--_mono-nav-ring);\r\n  border-bottom-color: var(--_mono-nav-border);\r\n}\r\n\r\n/* =========================================\r\n   Sticky\r\n   -----------------------------------------------------------------------------\r\n   `sticky` is ON by default, so the attribute that says something is the\r\n   negative. In the light build the host `<mono-nav>` is what sits in the parent\r\n   layout flow and the inner `<header>` only fills it, so the host is what has to\r\n   stick — a sticky inner header has no scroll distance inside a host that\r\n   shrink-wraps it (which is also why leaving the rule on both is harmless). In\r\n   hand-written markup the `<header>` IS the element in flow, and the same rule\r\n   does the work.\r\n\r\n   The host reflects the prop (`converter` empty-attr === true, missing ===\r\n   false), so `[sticky]` is the right selector there.\r\n   ========================================= */\r\n\r\nmono-nav[sticky],\r\n[mono-nav]:not([mono-static]) {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: var(--mono-nav-z, 30);\r\n}\r\n\r\n[mono-nav][mono-static] {\r\n  position: static;\r\n}\r\n\r\n/* =========================================\r\n   The bar row\r\n   ========================================= */\r\n\r\n:where([mono-nav]) > [mono-inner] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  padding: 0 var(--_mono-nav-pad-x);\r\n  height: var(--_mono-nav-height);\r\n  min-height: var(--_mono-nav-height);\r\n  width: 100%;\r\n}\r\n\r\n:where([mono-nav] > [mono-inner]) > [mono-start] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  flex-shrink: 0;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-nav] > [mono-inner]) > [mono-center] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n/* `margin-left: auto` keeps the end region at the trailing edge even when the\r\n   center is empty and collapsed. */\r\n:where([mono-nav] > [mono-inner]) > [mono-end] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-nav-gap) * 0.7);\r\n  flex-shrink: 0;\r\n  margin-left: auto;\r\n}\r\n\r\n/* An empty region is NOT hidden.\r\n\r\n   `:empty` cannot see across a shadow boundary: in the shadow build each region\r\n   holds a <slot> ELEMENT, so the region is never `:empty` whether or not anything\r\n   is assigned to it, and a <slot>'s own children are its fallback content rather\r\n   than the assigned nodes — there is no selector for \"nothing was slotted here\".\r\n   The light build WAS `:empty` in that case, so a bar with no center content laid\r\n   out with one flex gap in the light build and two in the shadow one: 12px apart\r\n   at max-content width, which is what a shrink-to-fit demo shows.\r\n\r\n   Leaving every region in place is what makes the two builds agree. It costs\r\n   nothing at a normal full-width bar — the center is `flex: 1` and eats the slack\r\n   either way, and the end region is pinned by its own `margin-left: auto`. */\r\n\r\n/* =========================================\r\n   Extension row\r\n   ========================================= */\r\n\r\n:where([mono-nav]) > [mono-extension] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  padding: 0 var(--_mono-nav-pad-x);\r\n  min-height: var(--_mono-nav-extension-height);\r\n  border-top: var(--_mono-nav-border-width) solid var(--_mono-nav-border-lite);\r\n  font-size: var(--_mono-nav-extension-font);\r\n}\r\n\r\n/* The element always renders the row so its slot target is stable; the root\r\n   attribute is what turns it on. Hand-written markup that simply omits the row\r\n   needs neither. */\r\n[mono-nav]:not([mono-has-extension]) > [mono-extension] {\r\n  display: none;\r\n}\r\n\r\n/* A slotted control inherits the bar's face, not the UA's. */\r\n[mono-nav] :is(button, input, select, textarea) {\r\n  font-family: inherit;\r\n}\r\n\r\n/* =========================================\r\n   Responsive — a wide bar steps down a density on a narrow screen\r\n   ========================================= */\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-nav][mono-density=\"default\"] {\r\n    --_mono-nav-height-preset: calc(var(--mono-spacing) * 14);\r\n    --_mono-nav-pad-x-preset: calc(var(--mono-spacing) * 4);\r\n    --_mono-nav-gap-preset: calc(var(--mono-spacing) * 2.5);\r\n  }\r\n\r\n  [mono-nav]:not([mono-density]) {\r\n    --_mono-nav-height-preset: calc(var(--mono-spacing) * 12);\r\n    --_mono-nav-pad-x-preset: calc(var(--mono-spacing) * 3.5);\r\n    --_mono-nav-gap-preset: calc(var(--mono-spacing) * 2);\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Layout helper\r\n   -----------------------------------------------------------------------------\r\n   Consumers wrap their main content in this to pad around the nav (and the\r\n   sidebar). The vars are written on `:root` by mono-nav and mono-sidebar\r\n   themselves. Kept as a CLASS — it is a consumer-applied utility, not a part of\r\n   this component — with the attribute form accepted for markup that would\r\n   rather stay attributes all the way down.\r\n   ========================================= */\r\n\r\n.mono-layout-content,\r\n[mono-layout-content] {\r\n  padding-top: var(--mono-nav-height, 0);\r\n  padding-left: var(--mono-sidebar-left-width, 0);\r\n  padding-right: var(--mono-sidebar-right-width, 0);\r\n  min-height: 100vh;\r\n  min-height: 100dvh;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-nav] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/nav/mono-nav.shadow.ts
-var MonoNavShadow = class MonoNavShadow extends withShadowUtilityStyles(MonoNavCore(LitElement)) {
+let MonoNavShadow = class MonoNavShadow extends withShadowUtilityStyles(MonoNavCore(LitElement)) {
 	static {
-		this.styles = [unsafeCSS(toShadowCss(nav_default, { host: "mono-nav" }))];
+		this.styles = [unsafeCSS(toShadowCss(nav_css_raw_default, { host: "mono-nav" }))];
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -236,5 +241,6 @@ var MonoNavShadow = class MonoNavShadow extends withShadowUtilityStyles(MonoNavC
 	}
 };
 MonoNavShadow = __decorate([customElement("mono-shadow-nav")], MonoNavShadow);
+
 //#endregion
-export { MonoNavCore, MonoNavShadow, generateNavRootClasses, getNavHeight, validateNavProps };
+export { MonoNavCore, MonoNavShadow, generateNavRootClasses, getNavHeight, validateNavProps };