@mono-lit/helper 0.0.2 → 0.0.3

package/dist/ui/shadow/sidebar.js

@@ -1,13 +1,14 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../../css-class-BRKRzHx-.js";
-import { n as 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 { i as setExternalScrollLock } from "../../popup-stack-CEEMib__.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../../css-class-B6Tc_MAx.js";
+import { n as 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 { i as setExternalScrollLock } from "../../popup-stack-De05Y-mJ.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
+
 //#region src/components/sidebar/sidebar-utils.ts
-var SIDEBAR_AUTO_BREAKPOINT = 768;
+const SIDEBAR_AUTO_BREAKPOINT = 768;
 /**
 * `typeof window === 'undefined'` alone is NOT a safe server guard: a DOM shim
 * can define `window` without `matchMedia` (the @lit-labs/ssr v3 shim happens
@@ -90,6 +91,7 @@ function sidebarRootAttrs(props) {
 		color: !props.color || props.color === "surface" ? null : isThemeColorToken(props.color) ? props.color : CUSTOM_COLOR_CLASS
 	};
 }
+
 //#endregion
 //#region src/components/sidebar/sidebar-core.ts
 /**
@@ -106,7 +108,7 @@ function sidebarRootAttrs(props) {
 * (light: empty + capture into `[data-mono-slot]`; shadow: native `<slot>`), and
 * `renderIcon()` (light: `.mono-icon` UnoCSS icon; shadow: inline SVG).
 */
-var MonoSidebarCore = (superClass) => {
+const MonoSidebarCore = (superClass) => {
 	class MonoSidebarCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -185,8 +187,10 @@ var MonoSidebarCore = (superClass) => {
 			if (changed.has("mode")) this._recomputeResolvedMode();
 			if (changed.has("mode") || changed.has("_resolvedMode") || changed.has("modelValue") || changed.has("rail") || changed.has("expandOnHover")) this._recomputeRailCollapsedAttr();
 			if (isServer) return;
-			if (changed.has("modelValue") || changed.has("mode")) if (this._resolvedMode === "temporary" && this.modelValue) this._applyOpenSideEffects();
-			else this._releaseSideEffects();
+			if (changed.has("modelValue") || changed.has("mode")) {
+				if (this._resolvedMode === "temporary" && this.modelValue) this._applyOpenSideEffects();
+				else this._releaseSideEffects();
+			}
 			if (changed.has("mode") || changed.has("width") || changed.has("railWidth") || changed.has("location") || changed.has("modelValue") || changed.has("contained")) this._writeLayoutVar();
 		}
 		/**
@@ -261,7 +265,7 @@ var MonoSidebarCore = (superClass) => {
 		}
 		_setupAutoModeListener() {
 			if (typeof window === "undefined" || !window.matchMedia) return;
-			this._autoMql = window.matchMedia(`(max-width: 767px)`);
+			this._autoMql = window.matchMedia(`(max-width: ${768 - 1}px)`);
 			this._autoMqlListener = () => {
 				if (this.mode === "auto") {
 					this._recomputeResolvedMode();
@@ -574,14 +578,16 @@ var MonoSidebarCore = (superClass) => {
 	__decorate([state()], MonoSidebarCoreClass.prototype, "_resolvedMode", void 0);
 	return MonoSidebarCoreClass;
 };
+
 //#endregion
-//#region src/components/sidebar/sidebar.css?raw
-var sidebar_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-sidebar — a port of Basecoat's `.sidebar` (basecoat-css@1.0.2, vega\r\n   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-sidebar mode=\"rail\" location=\"right\" color=\"primary\" model-value>\r\n     <div mono-sidebar mono-mode=\"rail\" mono-effective=\"rail\"\r\n          mono-location=\"right\" mono-color=\"primary\" mono-open role=\"navigation\">\r\n       <div mono-scrim></div>\r\n       <aside mono-panel>\r\n         <div mono-topbar>\r\n           <div mono-header>…</div>\r\n           <div mono-rail><button mono-rail-toggle>…</button></div>\r\n         </div>\r\n         <div mono-body>…</div>\r\n         <div mono-footer>…</div>\r\n       </aside>\r\n     </div>\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, `:not([mono-location])` = left). `mono-effective` carries the\r\n   mode after `auto` resolves, which is what the layout rules key on. The old\r\n   classes (`[mono-sidebar][mono-mode=\"auto\"][mono-effective=\"permanent\"][mono-location=\"left\"]…`) are\r\n   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-sidebar]     ≡ .sidebar (the overlay wrapper)\r\n     :where([mono-sidebar]) [mono-panel]       ≡ .sidebar nav (fixed inset-y-0 z-50 flex w-… flex-col\r\n                          transition-transform duration-300 ease-in-out)\r\n     :where([mono-sidebar]) [mono-scrim]       ≡ .sidebar:not([aria-hidden]) max-md:bg-black/50\r\n     :where([mono-sidebar]) [mono-header] / [mono-footer] ≡ .sidebar nav > header, > footer\r\n                          (flex flex-col, gap-2 p-2)\r\n     :where([mono-sidebar]) [mono-body]        ≡ .sidebar nav > section (flex min-h-0 flex-1 flex-col\r\n                          overflow-y-auto, gap-2)\r\n     [mono-location=…]  ≡ [data-side='left' | 'right'] (border-r / border-l)\r\n     :not([mono-open])  ≡ [aria-hidden=true] (translate the panel out)\r\n     :where([mono-sidebar]) [mono-rail] / [mono-rail-toggle] / [mono-topbar] ≡ EXTENSION (upstream has\r\n                          no rail mode)\r\n     [mono-mode=…] / [mono-variant=…] / [mono-density=…] / [mono-color=…]\r\n                        ≡ EXTENSION\r\n\r\n   NO GRADIENTS. The painted panel was a two-stop brand gradient with a coloured\r\n   halo; it is the flat role fill now, inked in that role's `-foreground` the\r\n   way `.btn[data-variant='primary']` is. The scrim is `--mono-mode-backdrop`.\r\n\r\n   DARK MODE comes free — every colour resolves through a Basecoat token that\r\n   already flips. A selector crosses neither the custom-element host nor the\r\n   shadow boundary, so no `[mono-color=\"dark\"]` rule can live in component CSS.\r\n\r\n   FLAVORS set `--mono-sidebar-{width,radius,shadow,pad-*,gap,scrim-*}` (+ the\r\n   per-density forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --grep \"sidebar\"`).\r\n   ========================================================================= */\r\n\r\nmono-sidebar {\r\n  display: contents;\r\n}\r\n\r\n[mono-sidebar] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ────────────── */\r\n  --_mono-sidebar-primary: var(--mono-sidebar-primary, var(--primary));\r\n  --_mono-sidebar-secondary: var(--mono-sidebar-secondary, var(--secondary-foreground));\r\n  --_mono-sidebar-success: var(--mono-sidebar-success, var(--success));\r\n  --_mono-sidebar-danger: var(--mono-sidebar-danger, var(--destructive));\r\n  --_mono-sidebar-warning: var(--mono-sidebar-warning, var(--warning));\r\n  --_mono-sidebar-info: var(--mono-sidebar-info, var(--info));\r\n  --_mono-sidebar-teal: var(--mono-sidebar-teal, var(--teal));\r\n  --_mono-sidebar-purple: var(--mono-sidebar-purple, var(--purple));\r\n  --_mono-sidebar-neutral: var(--mono-sidebar-neutral, var(--neutral));\r\n  --_mono-sidebar-dark: var(--mono-sidebar-dark, var(--dark));\r\n\r\n  /* ── the chrome surface — upstream's own sidebar tokens ──────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground */\r\n  --_mono-sidebar-surface: var(--mono-sidebar-surface, var(--_mono-sidebar-surface-preset, var(--sidebar)));\r\n  --_mono-sidebar-surface-soft: var(--mono-sidebar-surface-soft, var(--muted));\r\n  --_mono-sidebar-text: var(--mono-sidebar-text, var(--_mono-sidebar-text-preset, var(--sidebar-foreground)));\r\n  --_mono-sidebar-text-soft: var(--mono-sidebar-text-soft, var(--_mono-sidebar-text-soft-preset, color-mix(in oklab, var(--_mono-sidebar-text) 70%, transparent)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-sidebar-border: var(--mono-sidebar-border, var(--_mono-sidebar-border-preset, var(--sidebar-border)));\r\n  --_mono-sidebar-border-lite: var(--mono-sidebar-border-lite, var(--_mono-sidebar-border-lite-preset, var(--_mono-sidebar-border)));\r\n\r\n  --_mono-sidebar-accent: var(--mono-sidebar-accent, var(--_mono-sidebar-accent-preset, var(--_mono-sidebar-primary)));\r\n  /* Ink for a panel painted in the accent. Each role points this at its own\r\n     `-foreground` token, so a light role gets readable ink without a luminance\r\n     calculation; a literal colour gets one written inline by the component.\r\n     Every softened tint on a painted panel mixes from THIS, never from a\r\n     literal white, so the whole treatment flips with the ink. */\r\n  --_mono-sidebar-on-accent: var(--mono-sidebar-on-accent, var(--_mono-sidebar-on-accent-preset, var(--primary-foreground)));\r\n\r\n  --_mono-sidebar-bg: var(--mono-sidebar-bg, var(--_mono-sidebar-bg-preset, var(--_mono-sidebar-surface)));\r\n  /* upstream's `--sidebar-width` / `--sidebar-mobile-width` are the measure */\r\n  --_mono-sidebar-width: var(--mono-sidebar-width, var(--sidebar-width));\r\n  --_mono-sidebar-rail-width: var(--mono-sidebar-rail-width, calc(var(--mono-spacing) * 16));\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n  --_mono-sidebar-z: var(--mono-sidebar-z, 50);\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > header, .sidebar nav > footer — gap-2 p-2 */\r\n  --_mono-sidebar-pad-x: var(--mono-sidebar-pad-x, var(--_mono-sidebar-pad-x-preset, var(--mono-sidebar-pad-x-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-sidebar-pad-y: var(--mono-sidebar-pad-y, var(--_mono-sidebar-pad-y-preset, var(--mono-sidebar-pad-y-comfortable, calc(var(--mono-spacing) * 2))));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > section — gap-2 */\r\n  --_mono-sidebar-gap: var(--mono-sidebar-gap, var(--_mono-sidebar-gap-preset, var(--mono-sidebar-gap-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-sidebar-radius: var(--mono-sidebar-radius, 0);\r\n  --_mono-sidebar-shadow: var(--mono-sidebar-shadow, var(--mono-shadow-sm));\r\n  --_mono-sidebar-border-width: var(--mono-sidebar-border-width, var(--mono-border-width));\r\n  --_mono-sidebar-scrim-bg: var(--mono-sidebar-scrim-bg, var(--mono-mode-backdrop));\r\n  --_mono-sidebar-duration: var(--mono-sidebar-duration, var(--mono-duration-slow, 300ms));\r\n\r\n  /* Hand the panel's resolved palette to any <mono-menu> in the body. These are\r\n     menu's PUBLIC vars, so they inherit in the light build and pierce the shadow\r\n     boundary in the shadow one — the same handoff the rail layout uses below.\r\n\r\n     Unconditional on purpose. A panel gets painted from three independent places\r\n     — the `color` prop, a flavor, or a consumer's own `--mono-sidebar-bg` — and\r\n     only the first is visible to a selector here. Deriving from\r\n     `--_mono-sidebar-*` means the menu follows the panel whichever one painted\r\n     it; before this, a navy panel carried menu labels still inked near-black.\r\n\r\n     Only the HUE comes from the sidebar; the soft/faint steps keep menu's own\r\n     ratios rather than the sidebar's, which is tuned for chrome and would wash a\r\n     menu label out. */\r\n  --mono-menu-text: var(--_mono-sidebar-text);\r\n  --mono-menu-text-soft: color-mix(in oklab, var(--_mono-sidebar-text) 72%, transparent);\r\n  --mono-menu-text-faint: color-mix(in oklab, var(--_mono-sidebar-text) 68%, transparent);\r\n  --mono-menu-surface: transparent;\r\n  --mono-menu-border: var(--_mono-sidebar-border);\r\n  --mono-menu-border-lite: var(--_mono-sidebar-border-lite);\r\n  --mono-menu-accent: var(--_mono-sidebar-accent);\r\n  --mono-menu-hover-bg: color-mix(in oklab, var(--_mono-sidebar-text) 8%, transparent);\r\n  --mono-menu-hover-color: var(--_mono-sidebar-text);\r\n  --mono-menu-hover-border-color: color-mix(in oklab, var(--_mono-sidebar-text) 14%, transparent);\r\n  /* The pill is a wash of the menu accent over WHATEVER the panel is, so it has\r\n     to be mixed with `transparent`, not with the document's `--sidebar-accent`\r\n     the way menu's own default is. On a navy panel the accent is white, and\r\n     mixing white into the page's near-white chrome painted a white pill under\r\n     white ink. */\r\n  --mono-menu-active-bg: color-mix(in oklab, var(--_mono-sidebar-accent) 18%, transparent);\r\n  --mono-menu-active-color: var(--_mono-sidebar-accent);\r\n  --mono-menu-active-shadow: none;\r\n\r\n  font-family: inherit;\r\n  color: var(--_mono-sidebar-text);\r\n}\r\n\r\n[mono-sidebar],\r\n:where([mono-sidebar]) *,\r\n:where([mono-sidebar]) *::before,\r\n:where([mono-sidebar]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n/* ─────── DENSITY ─────── */\r\n[mono-sidebar][mono-density=\"compact\"] {\r\n  --_mono-sidebar-pad-x-preset: 0.6rem;\r\n  --_mono-sidebar-pad-y-preset: 0.6rem;\r\n  --_mono-sidebar-gap-preset: 0.3rem;\r\n}\r\n\r\n[mono-sidebar][mono-density=\"comfortable\"] {\r\n  --_mono-sidebar-pad-x-preset: 0.85rem;\r\n  --_mono-sidebar-pad-y-preset: 0.85rem;\r\n  --_mono-sidebar-gap-preset: 0.4rem;\r\n}\r\n\r\n[mono-sidebar][mono-density=\"default\"] {\r\n  --_mono-sidebar-pad-x-preset: 1.05rem;\r\n  --_mono-sidebar-pad-y-preset: 1.05rem;\r\n  --_mono-sidebar-gap-preset: 0.5rem;\r\n}\r\n\r\n/* ─────── COLOR ─────── */\r\n/* EVERY `-preset` here has to sit on `[mono-sidebar]`, the element that DECLARES the\r\n   resolvers above — never on the `[mono-panel]` child. A `var()` substitutes on\r\n   the element that declares it, so `--_mono-sidebar-bg` is already resolved by the time\r\n   a descendant sets `--_mono-sidebar-bg-preset`; the panel just inherits the finished\r\n   value and the preset is dead. The painting block below used to be written as\r\n   `[mono-sidebar][mono-color=\"primary\"] [mono-panel]`, which is exactly why no color ever\r\n   painted. Same trap as the one documented in checkbox.css's border-width block. */\r\n[mono-sidebar][mono-color=\"primary\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-primary);\r\n  --_mono-sidebar-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"secondary\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-secondary);\r\n  /* the role IS --secondary-foreground, so the ink on it is --secondary */\r\n  --_mono-sidebar-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"success\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-success);\r\n  --_mono-sidebar-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"danger\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-danger);\r\n  --_mono-sidebar-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"warning\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-warning);\r\n  --_mono-sidebar-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"info\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-info);\r\n  --_mono-sidebar-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"teal\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-teal);\r\n  --_mono-sidebar-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"purple\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-purple);\r\n  --_mono-sidebar-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"neutral\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-neutral);\r\n  --_mono-sidebar-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"dark\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-dark);\r\n  --_mono-sidebar-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* `color` given a literal (`#7c3aed`, `rgb(…)`) instead of a token name. The three\r\n   presets are written INLINE on this same element by `_inlineRootStyle`, because a\r\n   literal cannot be a class name and cannot be known to a stylesheet; this class only\r\n   opts the element into the painting treatment below. */\r\n[mono-sidebar][mono-color=\"custom\"] {\r\n  /* deliberately empty — the values arrive inline */\r\n}\r\n\r\n/* surface keeps the white-with-themed-border look — never painted.\r\n   It sets NO accent preset on purpose: the resolver's own fallback is already\r\n   `--_mono-sidebar-primary`, so declaring it here would add nothing under Mono while\r\n   overriding a flavor's accent (ONE sets a white one on <body>) for the default color. */\r\n[mono-sidebar][mono-color=\"surface\"] {\r\n  /* deliberately empty — see above */\r\n}\r\n\r\n/* Themed colors paint the panel with the accent, and every foreground on it is mixed\r\n   from `--_mono-sidebar-on-accent` so the treatment works with dark ink as well as\r\n   white. `color-mix(…, transparent)` rather than `rgba(255,255,255,α)` for the same\r\n   reason. `-surface-preset` re-tints the rail toggle, which would otherwise stay a\r\n   white chip carrying white glyphs. */\r\n[mono-sidebar][mono-color=\"primary\"],\r\n[mono-sidebar][mono-color=\"secondary\"],\r\n[mono-sidebar][mono-color=\"success\"],\r\n[mono-sidebar][mono-color=\"danger\"],\r\n[mono-sidebar][mono-color=\"warning\"],\r\n[mono-sidebar][mono-color=\"info\"],\r\n[mono-sidebar][mono-color=\"teal\"],\r\n[mono-sidebar][mono-color=\"purple\"],\r\n[mono-sidebar][mono-color=\"neutral\"],\r\n[mono-sidebar][mono-color=\"dark\"],\r\n[mono-sidebar][mono-color=\"custom\"] {\r\n  --_mono-sidebar-bg-preset: var(--_mono-sidebar-accent);\r\n  --_mono-sidebar-text-preset: var(--_mono-sidebar-on-accent);\r\n  --_mono-sidebar-text-soft-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 78%, transparent);\r\n  --_mono-sidebar-border-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 18%, transparent);\r\n  --_mono-sidebar-border-lite-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 12%, transparent);\r\n  --_mono-sidebar-surface-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 16%, transparent);\r\n\r\n  /* The whole menu palette — pill included — is forwarded unconditionally up in\r\n     `[mono-sidebar]` and keys off `--_mono-sidebar-accent`. On a PAINTED panel that\r\n     accent IS the panel colour, so the pill would sit invisibly on it. Re-point\r\n     the menu's copy at the on-accent ink — and only the menu's copy: the panel's\r\n     own `--_mono-sidebar-bg-preset` reads `--_mono-sidebar-accent` in this very\r\n     block, so shadowing it here would repaint the panel white. */\r\n  --mono-menu-accent: var(--_mono-sidebar-on-accent);\r\n  --mono-menu-active-bg: color-mix(in oklab, var(--_mono-sidebar-on-accent) 18%, transparent);\r\n  --mono-menu-active-color: var(--_mono-sidebar-on-accent);\r\n}\r\n\r\n/* ─────── PANEL (the visible container) ─────── */\r\n:where([mono-sidebar]) [mono-panel] {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  z-index: var(--_mono-sidebar-z);\r\n  width: var(--_mono-sidebar-current-width);\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > header, .sidebar nav > footer — gap-2 p-2\r\n     maia, luma and rhea set [--radius: var(--radius-xl)] on the shell, sera 0 —\r\n     the chrome inside a panel follows the flavor, and so does the panel itself\r\n     wherever its corner shows (a contained sidebar; a full-height one has none). */\r\n  border-radius: var(--_mono-sidebar-radius);\r\n  background: var(--_mono-sidebar-bg);\r\n  color: var(--_mono-sidebar-text);\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  pointer-events: auto;\r\n  transition:\r\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),\r\n    transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),\r\n    visibility 0s linear 0.26s,\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-sidebar][mono-contained] [mono-panel] {\r\n  position: absolute;\r\n}\r\n\r\n/* `contained` scopes the sidebar to its own box, so the page-level z ladder is wrong\r\n   for it: at 50 the panel outranked site chrome and painted OVER a sticky header while\r\n   the container scrolled past it (VitePress's navbar is z 30). Re-resolving the private\r\n   var with a LOCAL default keeps the panel above its own scrim and nothing else; an\r\n   explicit --mono-sidebar-z still wins. Not `isolation: isolate` — a stacking context\r\n   here would trap a fixed overlay (a modal or drawer opened from inside the sidebar)\r\n   in the container, which is the trap DemoPreview.vue's stage comment records. */\r\n[mono-sidebar][mono-contained] {\r\n  --_mono-sidebar-z: var(--mono-sidebar-z, 2);\r\n}\r\n\r\n/* Location anchor */\r\n[mono-sidebar][mono-location=\"left\"] [mono-panel] {\r\n  left: 0;\r\n}\r\n\r\n[mono-sidebar][mono-location=\"right\"] [mono-panel] {\r\n  right: 0;\r\n}\r\n\r\n/* ─────── VARIANT ─────── */\r\n[mono-sidebar][mono-variant=\"elevated\"][mono-location=\"left\"] [mono-panel] {\r\n  box-shadow: var(--_mono-sidebar-shadow);\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"elevated\"][mono-location=\"right\"] [mono-panel] {\r\n  box-shadow: -4px 0 24px color-mix(in oklab, var(--_mono-sidebar-accent) 8%, transparent);\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"flat\"] [mono-panel] {\r\n  box-shadow: none;\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"outlined\"][mono-location=\"left\"] [mono-panel] {\r\n  box-shadow: none;\r\n  border-right: 1px solid var(--_mono-sidebar-border);\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"outlined\"][mono-location=\"right\"] [mono-panel] {\r\n  box-shadow: none;\r\n  border-left: 1px solid var(--_mono-sidebar-border);\r\n}\r\n\r\n/* ─────── EFFECTIVE MODE: PERMANENT ─────── */\r\n/* Set --sidebar-current-width on the ROOT (not the panel) so the rail toggle\r\n   sibling can read it for its left/right offset. CSS variables only cascade\r\n   downward — putting the override on a sibling doesn't help the toggle. */\r\n[mono-sidebar][mono-effective=\"permanent\"] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"permanent\"] [mono-panel] {\r\n  visibility: visible;\r\n  transform: none;\r\n}\r\n\r\n/* ─────── EFFECTIVE MODE: RAIL ─────── */\r\n[mono-sidebar][mono-effective=\"rail\"] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-rail-width);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"] [mono-panel] {\r\n  visibility: visible;\r\n  transform: none;\r\n}\r\n\r\n/* In rail mode, when modelValue === true, expand to full width. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n/* expand-on-hover only applies when rail is collapsed (not user-toggled open).\r\n   Hover is on the root so both panel and toggle pick up the new width. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:not([mono-open]):hover {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n/* ─────── EFFECTIVE MODE: TEMPORARY ─────── */\r\n[mono-sidebar][mono-effective=\"temporary\"] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"] [mono-panel] {\r\n  visibility: hidden;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-location=\"left\"] [mono-panel] {\r\n  transform: translateX(-100%);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-location=\"right\"] [mono-panel] {\r\n  transform: translateX(100%);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-open] [mono-panel] {\r\n  visibility: visible;\r\n  transform: translateX(0);\r\n  transition:\r\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),\r\n    transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),\r\n    visibility 0s linear 0s,\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/* ─────── SCRIM (temporary mode only) ─────── */\r\n:where([mono-sidebar]) [mono-scrim] {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: calc(var(--_mono-sidebar-z) - 1);\r\n  background: var(--_mono-sidebar-scrim-bg);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  cursor: pointer;\r\n  transition: opacity 0.24s ease;\r\n  display: none;\r\n}\r\n\r\n[mono-sidebar][mono-contained] [mono-scrim] {\r\n  position: absolute;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"]:not([mono-no-scrim]) [mono-scrim] {\r\n  display: block;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-open] [mono-scrim] {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* ─────── HEADER / BODY / FOOTER ─────── */\r\n:where([mono-sidebar]) :where([mono-topbar]) > [mono-header] {\r\n  flex-shrink: 0;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  min-height: 0;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-topbar]) > [mono-header]:empty {\r\n  display: none;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-body] {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-body]:empty {\r\n  padding: 0;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-footer] {\r\n  flex-shrink: 0;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n  border-top: 1px solid var(--_mono-sidebar-border-lite);\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-footer]:empty {\r\n  display: none;\r\n}\r\n\r\n/* ─────── TOP BAR (header + rail share one row, justify-between) ─────── */\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar] {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: stretch;\r\n  min-width: 0;\r\n  border-bottom: 1px solid var(--_mono-sidebar-border-lite);\r\n}\r\n\r\n/* Hide the border when the topbar would be visually empty\r\n   (header empty AND no rail bar rendered at all). */\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar]:not(:has(> [mono-rail])):has(> [mono-header]:empty) {\r\n  border-bottom: none;\r\n}\r\n\r\n/* For right-located sidebar, mirror the row so the rail toggle sits on the\r\n   viewport-edge side and the header sits on the interior side. */\r\n[mono-sidebar][mono-location=\"right\"] :where([mono-panel]) > [mono-topbar] {\r\n  flex-direction: row-reverse;\r\n}\r\n\r\n/* When the row contains both header and rail, header takes the available\r\n   space and rail hugs its content — the visual \"justify-between\" effect. */\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar] > [mono-header] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar] > [mono-rail] {\r\n  flex: 0 0 auto;\r\n}\r\n\r\n/* In collapsed rail (no toggle-open, no hover-expand): show the header (so the\r\n   user sees their brand/avatar) and HIDE the rail bar (chevron). The chevron\r\n   only reveals when the user hovers the top row (see swap rule below). */\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]) :where([mono-panel]) > [mono-topbar] > [mono-rail] {\r\n  display: none;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]) :where([mono-panel]) > [mono-topbar] > [mono-header] {\r\n  flex: 1 1 auto;\r\n}\r\n\r\n/* Collapsed rail + topbar hover (no expand-on-hover): swap — hide the header\r\n   and reveal the chevron in its place. Hover scope is the whole topbar (not\r\n   just the header) so the swap doesn't flicker when the cursor crosses\r\n   between the header's slot content and the revealed chevron.\r\n   Skipped when `expand-on-hover` is set: that path widens the panel instead\r\n   and shows both header + chevron side-by-side via the rules below.\r\n   Also gated on `:has(> [mono-rail])` — when the user takes over via\r\n   the `rail` boolean prop the default chevron isn't rendered, so there's\r\n   nothing to swap to and we should leave the header alone. */\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]):not([mono-expand-on-hover]) :where([mono-panel]) > [mono-topbar]:has(> [mono-rail]):hover > [mono-header] {\r\n  display: none;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]):not([mono-expand-on-hover]) :where([mono-panel]) > [mono-topbar]:has(> [mono-rail]):hover > [mono-rail] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n/* Toggled-open or hover-expanded via expand-on-hover: header keeps its space,\r\n   rail hugs its content — both visible side-by-side. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-topbar] > [mono-rail],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-topbar] > [mono-rail] {\r\n  display: flex;\r\n  flex: 0 0 auto;\r\n}\r\n\r\n/* ─────── RAIL BAR (slot host for the chevron / user content) ─────── */\r\n:where([mono-sidebar]) [mono-rail] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  min-height: 44px;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n}\r\n\r\n/* Collapsed rail: zero horizontal padding, center the chevron inside the\r\n   full-width rail bar (header is hidden so the bar takes the whole panel). */\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]) [mono-rail] {\r\n  padding-left: 0;\r\n  padding-right: 0;\r\n  justify-content: center;\r\n}\r\n\r\n/* Expanded (toggled-open or hover-expanded): the rail hugs its content and\r\n   sits at the trailing edge of the row, so its inside padding only needs to\r\n   provide the gap between the chevron and the header. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] [mono-rail],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover [mono-rail] {\r\n  padding-left: var(--_mono-sidebar-pad-x);\r\n  padding-right: var(--_mono-sidebar-pad-x);\r\n  justify-content: center;\r\n}\r\n\r\n/* ─────── DEFAULT RAIL TOGGLE BUTTON ─────── */\r\n:where([mono-sidebar]) [mono-rail-toggle] {\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: var(--mono-sidebar-rail-toggle-radius, var(--mono-radius-md));\r\n  border: 1px solid var(--_mono-sidebar-border);\r\n  background: var(--_mono-sidebar-surface);\r\n  color: var(--_mono-sidebar-text-soft);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition:\r\n    background-color 0.14s ease,\r\n    color 0.14s ease,\r\n    border-color 0.14s ease;\r\n}\r\n\r\n:where([mono-sidebar]) [mono-rail-toggle]:hover {\r\n  background: var(--_mono-sidebar-surface);\r\n  color: var(--_mono-sidebar-accent);\r\n  border-color: var(--_mono-sidebar-accent);\r\n}\r\n\r\n/* On a painted panel the accent IS the surface behind this button, so the default\r\n   hover above would tint the glyph and its border into the background. Keep the\r\n   on-accent ink and let only the chip deepen. */\r\n[mono-sidebar][mono-color=\"primary\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"secondary\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"success\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"danger\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"warning\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"info\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"teal\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"purple\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"neutral\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"dark\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"custom\"] [mono-rail-toggle]:hover {\r\n  background: color-mix(in oklab, var(--_mono-sidebar-on-accent) 28%, transparent);\r\n  color: var(--_mono-sidebar-on-accent);\r\n  border-color: color-mix(in oklab, var(--_mono-sidebar-on-accent) 38%, transparent);\r\n}\r\n\r\n:where([mono-sidebar]) [mono-rail-toggle] > .mono-icon {\r\n  display: block;\r\n  width: var(--mono-icon-md);\r\n  height: var(--mono-icon-md);\r\n  transition: transform var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* Arrow direction (set directly on the icon via per-state rules so transitions\r\n   fire cleanly on every state flip — `var()`-driven transforms have known\r\n   quirks where some browsers skip the transition):\r\n   - location-left, collapsed → points right (►) to invite expansion\r\n   - location-left, expanded  → points left  (◄) to invite collapse\r\n   - location-right is mirrored\r\n   \"Expanded\" covers BOTH the toggled-open state (`[mono-open]`, set after click)\r\n   AND the hover-expanded state (`[mono-expand-on-hover]:hover`). */\r\n\r\n/* Default for location-right: mirror the icon so the chevron faces the panel. */\r\n[mono-sidebar][mono-location=\"right\"] [mono-rail-toggle] > .mono-icon {\r\n  transform: scaleX(-1);\r\n}\r\n\r\n/* Toggled open (after click): rotate to point inward. Active in any mode. */\r\n[mono-sidebar][mono-location=\"left\"][mono-open] [mono-rail-toggle] > .mono-icon {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n[mono-sidebar][mono-location=\"right\"][mono-open] [mono-rail-toggle] > .mono-icon {\r\n  transform: scaleX(-1) rotate(180deg);\r\n}\r\n\r\n/* Hover-expanded via expand-on-hover (panel widens on hover, no click yet).\r\n   Higher specificity than the [mono-open] rule, so when both apply (cursor still\r\n   over the panel after a click) the result is identical. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover][mono-location=\"left\"]:hover [mono-rail-toggle] > .mono-icon {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover][mono-location=\"right\"]:hover [mono-rail-toggle] > .mono-icon {\r\n  transform: scaleX(-1) rotate(180deg);\r\n}\r\n\r\n/* Opt-in label convention (brand text, footer labels, …): display is read from an\r\n   inherited custom property, so the rail-collapse below can hide it across the\r\n   shadow boundary (a shadow-scoped descendant selector can't reach a slotted\r\n   light-DOM label). Unset → the element's natural display. Mirrors the menu's\r\n   `display: var(--mono-menu-label-display, <natural>)` contract. */\r\n.mono-sidebar-label {\r\n  display: var(--mono-sidebar-label-display, revert);\r\n}\r\n\r\n/* ─────── RAIL: COLLAPSE MENU + LABELS ─────── */\r\n/* When the rail is collapsed (not toggled-open and not hover-expanded), the\r\n   panel is too narrow to fit icon + text — for both menu rows and header/footer\r\n   slot content. We:\r\n   1. Hide text-bearing parts of any descendant `<mono-menu>` and shrink each\r\n      action to a centered icon-only pill (so the active-state pill hugs the\r\n      icon instead of stretching across the full panel).\r\n   2. Zero the header / body / footer horizontal padding so their centered\r\n      content lines up on the panel's center column, keeping the header\r\n      avatar visually flush with the menu icons below it.\r\n   3. Hide any element opted into the `.mono-sidebar-label` convention —\r\n      the typical wrapper for brand text, footer labels, etc. that should\r\n      collapse alongside the menu titles.\r\n   Every rule unwinds under `[mono-open]` or `[mono-expand-on-hover]:hover`, so labels\r\n   reappear in lockstep with the panel widening. */\r\n\r\n/* 1 — the menu interior collapses to icons: text-bearing parts are hidden, the\r\n   tree loses its indent and guide, and a group folds shut visually even while\r\n   the menu's own `_openGroups` state still has it marked open — the state\r\n   survives the round-trip and reappears the moment the panel widens. */\r\n/* Rail-collapse, entirely through inherited custom properties. Set on the body\r\n   (the menu's flattened parent) they cross the shadow boundary into a slotted\r\n   shadow <mono-menu>, whose rows no descendant selector here can reach; menu.css\r\n   consumes every one of them. Restored to `initial` on open / hover-expand\r\n   below, so `var(--x, fallback)` falls back to each element's natural value.\r\n   Pure CSS → works on the server (no-JS) and syncs with `:hover`.\r\n\r\n   This used to run alongside a parallel `.mono-menu-*` descendant path that only\r\n   the light build could see, because only it still emits the old classes. Two\r\n   paths meant three builds: light centred its rows and closed the tree guide,\r\n   shadow and hand-written markup did neither. */\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-panel]) > [mono-body] {\r\n  --mono-menu-label-display: none;\r\n  --mono-menu-row-display: flex;\r\n  --mono-menu-row-justify: center;\r\n  --mono-menu-action-width: auto;\r\n  --mono-menu-action-justify: center;\r\n  --mono-menu-action-gap: 0;\r\n  --mono-menu-group-children-display: none;\r\n  /* a collapsed rail has no room for the tree's indent or its guide */\r\n  --mono-menu-indent: 0px;\r\n  --mono-menu-guide-width: 0px;\r\n  --mono-menu-guide-offset: 0px;\r\n}\r\n\r\n/* 2 — header / body / footer drop horizontal padding and center their content */\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-panel]) > [mono-footer] {\r\n  padding-left: 0;\r\n  padding-right: 0;\r\n  justify-content: center;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-panel]) > [mono-body] {\r\n  padding-left: 0;\r\n  padding-right: 0;\r\n}\r\n\r\n/* 3 — opt-in label convention for slot content (brand text, footer labels, …).\r\n   Display is driven by an inherited custom property so the rail-collapse reaches\r\n   slotted labels ACROSS the shadow boundary — the same contract the menu uses\r\n   (see `--mono-menu-label-display`). Set on the rail root so labels in ANY region\r\n   (header / body / footer) inherit it; the label consumes it via the base rule\r\n   below (`display: var(--mono-sidebar-label-display, revert)`). */\r\n[mono-sidebar][mono-effective=\"rail\"] {\r\n  --mono-sidebar-label-display: none;\r\n}\r\n\r\n/* ─── Restore on toggled-open or hover-expanded ─── */\r\n/* When the rail expands, defer to the data-open attribute — open groups\r\n   reveal their children, closed groups stay closed. */\r\n/* Restore the cross-shadow rail-collapse vars on toggle-open / hover-expand:\r\n   `initial` makes the menu's `var(--x, fallback)` resolve to each element's\r\n   natural value, re-expanding the slotted shadow <mono-menu> in lockstep. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-body],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-body] {\r\n  --mono-menu-label-display: initial;\r\n  --mono-menu-row-display: initial;\r\n  --mono-menu-row-justify: initial;\r\n  --mono-menu-action-width: initial;\r\n  --mono-menu-action-justify: initial;\r\n  --mono-menu-action-gap: initial;\r\n  --mono-menu-group-children-display: initial;\r\n  --mono-menu-indent: initial;\r\n  --mono-menu-guide-width: initial;\r\n  --mono-menu-guide-offset: initial;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-body],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-footer],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-body],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-footer] {\r\n  padding-left: var(--_mono-sidebar-pad-x);\r\n  padding-right: var(--_mono-sidebar-pad-x);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-footer],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-footer] {\r\n  justify-content: flex-start;\r\n}\r\n\r\n/* Restore the label on toggle-open / hover-expand: `initial` makes the custom\r\n   property guaranteed-invalid, so the label's `var(--x, revert)` falls back to\r\n   its natural display — re-expanding slotted labels (light + shadow) in lockstep\r\n   with the menu (mirrors the `--mono-menu-*` restore above). */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover {\r\n  --mono-sidebar-label-display: initial;\r\n}\r\n\r\n/* ─────── REDUCED MOTION ─────── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-sidebar]) [mono-panel],\r\n  :where([mono-sidebar]) [mono-scrim],\r\n  :where([mono-sidebar]) [mono-rail-toggle] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\sidebar\sidebar.css?raw.js
+var sidebar_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-sidebar — a port of Basecoat's `.sidebar` (basecoat-css@1.0.2, vega\r\n   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-sidebar mode=\"rail\" location=\"right\" color=\"primary\" model-value>\r\n     <div mono-sidebar mono-mode=\"rail\" mono-effective=\"rail\"\r\n          mono-location=\"right\" mono-color=\"primary\" mono-open role=\"navigation\">\r\n       <div mono-scrim></div>\r\n       <aside mono-panel>\r\n         <div mono-topbar>\r\n           <div mono-header>…</div>\r\n           <div mono-rail><button mono-rail-toggle>…</button></div>\r\n         </div>\r\n         <div mono-body>…</div>\r\n         <div mono-footer>…</div>\r\n       </aside>\r\n     </div>\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, `:not([mono-location])` = left). `mono-effective` carries the\r\n   mode after `auto` resolves, which is what the layout rules key on. The old\r\n   classes (`[mono-sidebar][mono-mode=\"auto\"][mono-effective=\"permanent\"][mono-location=\"left\"]…`) are\r\n   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-sidebar]     ≡ .sidebar (the overlay wrapper)\r\n     :where([mono-sidebar]) [mono-panel]       ≡ .sidebar nav (fixed inset-y-0 z-50 flex w-… flex-col\r\n                          transition-transform duration-300 ease-in-out)\r\n     :where([mono-sidebar]) [mono-scrim]       ≡ .sidebar:not([aria-hidden]) max-md:bg-black/50\r\n     :where([mono-sidebar]) [mono-header] / [mono-footer] ≡ .sidebar nav > header, > footer\r\n                          (flex flex-col, gap-2 p-2)\r\n     :where([mono-sidebar]) [mono-body]        ≡ .sidebar nav > section (flex min-h-0 flex-1 flex-col\r\n                          overflow-y-auto, gap-2)\r\n     [mono-location=…]  ≡ [data-side='left' | 'right'] (border-r / border-l)\r\n     :not([mono-open])  ≡ [aria-hidden=true] (translate the panel out)\r\n     :where([mono-sidebar]) [mono-rail] / [mono-rail-toggle] / [mono-topbar] ≡ EXTENSION (upstream has\r\n                          no rail mode)\r\n     [mono-mode=…] / [mono-variant=…] / [mono-density=…] / [mono-color=…]\r\n                        ≡ EXTENSION\r\n\r\n   NO GRADIENTS. The painted panel was a two-stop brand gradient with a coloured\r\n   halo; it is the flat role fill now, inked in that role's `-foreground` the\r\n   way `.btn[data-variant='primary']` is. The scrim is `--mono-mode-backdrop`.\r\n\r\n   DARK MODE comes free — every colour resolves through a Basecoat token that\r\n   already flips. A selector crosses neither the custom-element host nor the\r\n   shadow boundary, so no `[mono-color=\"dark\"]` rule can live in component CSS.\r\n\r\n   FLAVORS set `--mono-sidebar-{width,radius,shadow,pad-*,gap,scrim-*}` (+ the\r\n   per-density forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --grep \"sidebar\"`).\r\n   ========================================================================= */\r\n\r\nmono-sidebar {\r\n  display: contents;\r\n}\r\n\r\n[mono-sidebar] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ────────────── */\r\n  --_mono-sidebar-primary: var(--mono-sidebar-primary, var(--primary));\r\n  --_mono-sidebar-secondary: var(--mono-sidebar-secondary, var(--secondary-foreground));\r\n  --_mono-sidebar-success: var(--mono-sidebar-success, var(--success));\r\n  --_mono-sidebar-danger: var(--mono-sidebar-danger, var(--destructive));\r\n  --_mono-sidebar-warning: var(--mono-sidebar-warning, var(--warning));\r\n  --_mono-sidebar-info: var(--mono-sidebar-info, var(--info));\r\n  --_mono-sidebar-teal: var(--mono-sidebar-teal, var(--teal));\r\n  --_mono-sidebar-purple: var(--mono-sidebar-purple, var(--purple));\r\n  --_mono-sidebar-neutral: var(--mono-sidebar-neutral, var(--neutral));\r\n  --_mono-sidebar-dark: var(--mono-sidebar-dark, var(--dark));\r\n\r\n  /* ── the chrome surface — upstream's own sidebar tokens ──────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground */\r\n  --_mono-sidebar-surface: var(--mono-sidebar-surface, var(--_mono-sidebar-surface-preset, var(--sidebar)));\r\n  --_mono-sidebar-surface-soft: var(--mono-sidebar-surface-soft, var(--muted));\r\n  --_mono-sidebar-text: var(--mono-sidebar-text, var(--_mono-sidebar-text-preset, var(--sidebar-foreground)));\r\n  --_mono-sidebar-text-soft: var(--mono-sidebar-text-soft, var(--_mono-sidebar-text-soft-preset, color-mix(in oklab, var(--_mono-sidebar-text) 70%, transparent)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-sidebar-border: var(--mono-sidebar-border, var(--_mono-sidebar-border-preset, var(--sidebar-border)));\r\n  --_mono-sidebar-border-lite: var(--mono-sidebar-border-lite, var(--_mono-sidebar-border-lite-preset, var(--_mono-sidebar-border)));\r\n\r\n  --_mono-sidebar-accent: var(--mono-sidebar-accent, var(--_mono-sidebar-accent-preset, var(--_mono-sidebar-primary)));\r\n  /* Ink for a panel painted in the accent. Each role points this at its own\r\n     `-foreground` token, so a light role gets readable ink without a luminance\r\n     calculation; a literal colour gets one written inline by the component.\r\n     Every softened tint on a painted panel mixes from THIS, never from a\r\n     literal white, so the whole treatment flips with the ink. */\r\n  --_mono-sidebar-on-accent: var(--mono-sidebar-on-accent, var(--_mono-sidebar-on-accent-preset, var(--primary-foreground)));\r\n\r\n  --_mono-sidebar-bg: var(--mono-sidebar-bg, var(--_mono-sidebar-bg-preset, var(--_mono-sidebar-surface)));\r\n  /* upstream's `--sidebar-width` / `--sidebar-mobile-width` are the measure */\r\n  --_mono-sidebar-width: var(--mono-sidebar-width, var(--sidebar-width));\r\n  --_mono-sidebar-rail-width: var(--mono-sidebar-rail-width, calc(var(--mono-spacing) * 16));\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n  --_mono-sidebar-z: var(--mono-sidebar-z, 50);\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > header, .sidebar nav > footer — gap-2 p-2 */\r\n  --_mono-sidebar-pad-x: var(--mono-sidebar-pad-x, var(--_mono-sidebar-pad-x-preset, var(--mono-sidebar-pad-x-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-sidebar-pad-y: var(--mono-sidebar-pad-y, var(--_mono-sidebar-pad-y-preset, var(--mono-sidebar-pad-y-comfortable, calc(var(--mono-spacing) * 2))));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > section — gap-2 */\r\n  --_mono-sidebar-gap: var(--mono-sidebar-gap, var(--_mono-sidebar-gap-preset, var(--mono-sidebar-gap-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-sidebar-radius: var(--mono-sidebar-radius, 0);\r\n  --_mono-sidebar-shadow: var(--mono-sidebar-shadow, var(--mono-shadow-sm));\r\n  --_mono-sidebar-border-width: var(--mono-sidebar-border-width, var(--mono-border-width));\r\n  --_mono-sidebar-scrim-bg: var(--mono-sidebar-scrim-bg, var(--mono-mode-backdrop));\r\n  --_mono-sidebar-duration: var(--mono-sidebar-duration, var(--mono-duration-slow, 300ms));\r\n\r\n  /* Hand the panel's resolved palette to any <mono-menu> in the body. These are\r\n     menu's PUBLIC vars, so they inherit in the light build and pierce the shadow\r\n     boundary in the shadow one — the same handoff the rail layout uses below.\r\n\r\n     Unconditional on purpose. A panel gets painted from three independent places\r\n     — the `color` prop, a flavor, or a consumer's own `--mono-sidebar-bg` — and\r\n     only the first is visible to a selector here. Deriving from\r\n     `--_mono-sidebar-*` means the menu follows the panel whichever one painted\r\n     it; before this, a navy panel carried menu labels still inked near-black.\r\n\r\n     Only the HUE comes from the sidebar; the soft/faint steps keep menu's own\r\n     ratios rather than the sidebar's, which is tuned for chrome and would wash a\r\n     menu label out. */\r\n  --mono-menu-text: var(--_mono-sidebar-text);\r\n  --mono-menu-text-soft: color-mix(in oklab, var(--_mono-sidebar-text) 72%, transparent);\r\n  --mono-menu-text-faint: color-mix(in oklab, var(--_mono-sidebar-text) 68%, transparent);\r\n  --mono-menu-surface: transparent;\r\n  --mono-menu-border: var(--_mono-sidebar-border);\r\n  --mono-menu-border-lite: var(--_mono-sidebar-border-lite);\r\n  --mono-menu-accent: var(--_mono-sidebar-accent);\r\n  --mono-menu-hover-bg: color-mix(in oklab, var(--_mono-sidebar-text) 8%, transparent);\r\n  --mono-menu-hover-color: var(--_mono-sidebar-text);\r\n  --mono-menu-hover-border-color: color-mix(in oklab, var(--_mono-sidebar-text) 14%, transparent);\r\n  /* The pill is a wash of the menu accent over WHATEVER the panel is, so it has\r\n     to be mixed with `transparent`, not with the document's `--sidebar-accent`\r\n     the way menu's own default is. On a navy panel the accent is white, and\r\n     mixing white into the page's near-white chrome painted a white pill under\r\n     white ink. */\r\n  --mono-menu-active-bg: color-mix(in oklab, var(--_mono-sidebar-accent) 18%, transparent);\r\n  --mono-menu-active-color: var(--_mono-sidebar-accent);\r\n  --mono-menu-active-shadow: none;\r\n\r\n  font-family: inherit;\r\n  color: var(--_mono-sidebar-text);\r\n}\r\n\r\n[mono-sidebar],\r\n:where([mono-sidebar]) *,\r\n:where([mono-sidebar]) *::before,\r\n:where([mono-sidebar]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n/* ─────── DENSITY ─────── */\r\n[mono-sidebar][mono-density=\"compact\"] {\r\n  --_mono-sidebar-pad-x-preset: 0.6rem;\r\n  --_mono-sidebar-pad-y-preset: 0.6rem;\r\n  --_mono-sidebar-gap-preset: 0.3rem;\r\n}\r\n\r\n[mono-sidebar][mono-density=\"comfortable\"] {\r\n  --_mono-sidebar-pad-x-preset: 0.85rem;\r\n  --_mono-sidebar-pad-y-preset: 0.85rem;\r\n  --_mono-sidebar-gap-preset: 0.4rem;\r\n}\r\n\r\n[mono-sidebar][mono-density=\"default\"] {\r\n  --_mono-sidebar-pad-x-preset: 1.05rem;\r\n  --_mono-sidebar-pad-y-preset: 1.05rem;\r\n  --_mono-sidebar-gap-preset: 0.5rem;\r\n}\r\n\r\n/* ─────── COLOR ─────── */\r\n/* EVERY `-preset` here has to sit on `[mono-sidebar]`, the element that DECLARES the\r\n   resolvers above — never on the `[mono-panel]` child. A `var()` substitutes on\r\n   the element that declares it, so `--_mono-sidebar-bg` is already resolved by the time\r\n   a descendant sets `--_mono-sidebar-bg-preset`; the panel just inherits the finished\r\n   value and the preset is dead. The painting block below used to be written as\r\n   `[mono-sidebar][mono-color=\"primary\"] [mono-panel]`, which is exactly why no color ever\r\n   painted. Same trap as the one documented in checkbox.css's border-width block. */\r\n[mono-sidebar][mono-color=\"primary\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-primary);\r\n  --_mono-sidebar-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"secondary\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-secondary);\r\n  /* the role IS --secondary-foreground, so the ink on it is --secondary */\r\n  --_mono-sidebar-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"success\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-success);\r\n  --_mono-sidebar-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"danger\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-danger);\r\n  --_mono-sidebar-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"warning\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-warning);\r\n  --_mono-sidebar-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"info\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-info);\r\n  --_mono-sidebar-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"teal\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-teal);\r\n  --_mono-sidebar-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"purple\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-purple);\r\n  --_mono-sidebar-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"neutral\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-neutral);\r\n  --_mono-sidebar-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n[mono-sidebar][mono-color=\"dark\"] {\r\n  --_mono-sidebar-accent-preset: var(--_mono-sidebar-dark);\r\n  --_mono-sidebar-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* `color` given a literal (`#7c3aed`, `rgb(…)`) instead of a token name. The three\r\n   presets are written INLINE on this same element by `_inlineRootStyle`, because a\r\n   literal cannot be a class name and cannot be known to a stylesheet; this class only\r\n   opts the element into the painting treatment below. */\r\n[mono-sidebar][mono-color=\"custom\"] {\r\n  /* deliberately empty — the values arrive inline */\r\n}\r\n\r\n/* surface keeps the white-with-themed-border look — never painted.\r\n   It sets NO accent preset on purpose: the resolver's own fallback is already\r\n   `--_mono-sidebar-primary`, so declaring it here would add nothing under Mono while\r\n   overriding a flavor's accent (ONE sets a white one on <body>) for the default color. */\r\n[mono-sidebar][mono-color=\"surface\"] {\r\n  /* deliberately empty — see above */\r\n}\r\n\r\n/* Themed colors paint the panel with the accent, and every foreground on it is mixed\r\n   from `--_mono-sidebar-on-accent` so the treatment works with dark ink as well as\r\n   white. `color-mix(…, transparent)` rather than `rgba(255,255,255,α)` for the same\r\n   reason. `-surface-preset` re-tints the rail toggle, which would otherwise stay a\r\n   white chip carrying white glyphs. */\r\n[mono-sidebar][mono-color=\"primary\"],\r\n[mono-sidebar][mono-color=\"secondary\"],\r\n[mono-sidebar][mono-color=\"success\"],\r\n[mono-sidebar][mono-color=\"danger\"],\r\n[mono-sidebar][mono-color=\"warning\"],\r\n[mono-sidebar][mono-color=\"info\"],\r\n[mono-sidebar][mono-color=\"teal\"],\r\n[mono-sidebar][mono-color=\"purple\"],\r\n[mono-sidebar][mono-color=\"neutral\"],\r\n[mono-sidebar][mono-color=\"dark\"],\r\n[mono-sidebar][mono-color=\"custom\"] {\r\n  --_mono-sidebar-bg-preset: var(--_mono-sidebar-accent);\r\n  --_mono-sidebar-text-preset: var(--_mono-sidebar-on-accent);\r\n  --_mono-sidebar-text-soft-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 78%, transparent);\r\n  --_mono-sidebar-border-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 18%, transparent);\r\n  --_mono-sidebar-border-lite-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 12%, transparent);\r\n  --_mono-sidebar-surface-preset: color-mix(in oklab, var(--_mono-sidebar-on-accent) 16%, transparent);\r\n\r\n  /* The whole menu palette — pill included — is forwarded unconditionally up in\r\n     `[mono-sidebar]` and keys off `--_mono-sidebar-accent`. On a PAINTED panel that\r\n     accent IS the panel colour, so the pill would sit invisibly on it. Re-point\r\n     the menu's copy at the on-accent ink — and only the menu's copy: the panel's\r\n     own `--_mono-sidebar-bg-preset` reads `--_mono-sidebar-accent` in this very\r\n     block, so shadowing it here would repaint the panel white. */\r\n  --mono-menu-accent: var(--_mono-sidebar-on-accent);\r\n  --mono-menu-active-bg: color-mix(in oklab, var(--_mono-sidebar-on-accent) 18%, transparent);\r\n  --mono-menu-active-color: var(--_mono-sidebar-on-accent);\r\n}\r\n\r\n/* ─────── PANEL (the visible container) ─────── */\r\n:where([mono-sidebar]) [mono-panel] {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  z-index: var(--_mono-sidebar-z);\r\n  width: var(--_mono-sidebar-current-width);\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > header, .sidebar nav > footer — gap-2 p-2\r\n     maia, luma and rhea set [--radius: var(--radius-xl)] on the shell, sera 0 —\r\n     the chrome inside a panel follows the flavor, and so does the panel itself\r\n     wherever its corner shows (a contained sidebar; a full-height one has none). */\r\n  border-radius: var(--_mono-sidebar-radius);\r\n  background: var(--_mono-sidebar-bg);\r\n  color: var(--_mono-sidebar-text);\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  pointer-events: auto;\r\n  transition:\r\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),\r\n    transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),\r\n    visibility 0s linear 0.26s,\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-sidebar][mono-contained] [mono-panel] {\r\n  position: absolute;\r\n}\r\n\r\n/* `contained` scopes the sidebar to its own box, so the page-level z ladder is wrong\r\n   for it: at 50 the panel outranked site chrome and painted OVER a sticky header while\r\n   the container scrolled past it (VitePress's navbar is z 30). Re-resolving the private\r\n   var with a LOCAL default keeps the panel above its own scrim and nothing else; an\r\n   explicit --mono-sidebar-z still wins. Not `isolation: isolate` — a stacking context\r\n   here would trap a fixed overlay (a modal or drawer opened from inside the sidebar)\r\n   in the container, which is the trap DemoPreview.vue's stage comment records. */\r\n[mono-sidebar][mono-contained] {\r\n  --_mono-sidebar-z: var(--mono-sidebar-z, 2);\r\n}\r\n\r\n/* Location anchor */\r\n[mono-sidebar][mono-location=\"left\"] [mono-panel] {\r\n  left: 0;\r\n}\r\n\r\n[mono-sidebar][mono-location=\"right\"] [mono-panel] {\r\n  right: 0;\r\n}\r\n\r\n/* ─────── VARIANT ─────── */\r\n[mono-sidebar][mono-variant=\"elevated\"][mono-location=\"left\"] [mono-panel] {\r\n  box-shadow: var(--_mono-sidebar-shadow);\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"elevated\"][mono-location=\"right\"] [mono-panel] {\r\n  box-shadow: -4px 0 24px color-mix(in oklab, var(--_mono-sidebar-accent) 8%, transparent);\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"flat\"] [mono-panel] {\r\n  box-shadow: none;\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"outlined\"][mono-location=\"left\"] [mono-panel] {\r\n  box-shadow: none;\r\n  border-right: 1px solid var(--_mono-sidebar-border);\r\n}\r\n\r\n[mono-sidebar][mono-variant=\"outlined\"][mono-location=\"right\"] [mono-panel] {\r\n  box-shadow: none;\r\n  border-left: 1px solid var(--_mono-sidebar-border);\r\n}\r\n\r\n/* ─────── EFFECTIVE MODE: PERMANENT ─────── */\r\n/* Set --sidebar-current-width on the ROOT (not the panel) so the rail toggle\r\n   sibling can read it for its left/right offset. CSS variables only cascade\r\n   downward — putting the override on a sibling doesn't help the toggle. */\r\n[mono-sidebar][mono-effective=\"permanent\"] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"permanent\"] [mono-panel] {\r\n  visibility: visible;\r\n  transform: none;\r\n}\r\n\r\n/* ─────── EFFECTIVE MODE: RAIL ─────── */\r\n[mono-sidebar][mono-effective=\"rail\"] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-rail-width);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"] [mono-panel] {\r\n  visibility: visible;\r\n  transform: none;\r\n}\r\n\r\n/* In rail mode, when modelValue === true, expand to full width. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n/* expand-on-hover only applies when rail is collapsed (not user-toggled open).\r\n   Hover is on the root so both panel and toggle pick up the new width. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:not([mono-open]):hover {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n/* ─────── EFFECTIVE MODE: TEMPORARY ─────── */\r\n[mono-sidebar][mono-effective=\"temporary\"] {\r\n  --_mono-sidebar-current-width: var(--_mono-sidebar-width);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"] [mono-panel] {\r\n  visibility: hidden;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-location=\"left\"] [mono-panel] {\r\n  transform: translateX(-100%);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-location=\"right\"] [mono-panel] {\r\n  transform: translateX(100%);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-open] [mono-panel] {\r\n  visibility: visible;\r\n  transform: translateX(0);\r\n  transition:\r\n    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),\r\n    transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),\r\n    visibility 0s linear 0s,\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/* ─────── SCRIM (temporary mode only) ─────── */\r\n:where([mono-sidebar]) [mono-scrim] {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: calc(var(--_mono-sidebar-z) - 1);\r\n  background: var(--_mono-sidebar-scrim-bg);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  cursor: pointer;\r\n  transition: opacity 0.24s ease;\r\n  display: none;\r\n}\r\n\r\n[mono-sidebar][mono-contained] [mono-scrim] {\r\n  position: absolute;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"]:not([mono-no-scrim]) [mono-scrim] {\r\n  display: block;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"temporary\"][mono-open] [mono-scrim] {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* ─────── HEADER / BODY / FOOTER ─────── */\r\n:where([mono-sidebar]) :where([mono-topbar]) > [mono-header] {\r\n  flex-shrink: 0;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  min-height: 0;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-topbar]) > [mono-header]:empty {\r\n  display: none;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-body] {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-body]:empty {\r\n  padding: 0;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-footer] {\r\n  flex-shrink: 0;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n  border-top: 1px solid var(--_mono-sidebar-border-lite);\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-footer]:empty {\r\n  display: none;\r\n}\r\n\r\n/* ─────── TOP BAR (header + rail share one row, justify-between) ─────── */\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar] {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: stretch;\r\n  min-width: 0;\r\n  border-bottom: 1px solid var(--_mono-sidebar-border-lite);\r\n}\r\n\r\n/* Hide the border when the topbar would be visually empty\r\n   (header empty AND no rail bar rendered at all). */\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar]:not(:has(> [mono-rail])):has(> [mono-header]:empty) {\r\n  border-bottom: none;\r\n}\r\n\r\n/* For right-located sidebar, mirror the row so the rail toggle sits on the\r\n   viewport-edge side and the header sits on the interior side. */\r\n[mono-sidebar][mono-location=\"right\"] :where([mono-panel]) > [mono-topbar] {\r\n  flex-direction: row-reverse;\r\n}\r\n\r\n/* When the row contains both header and rail, header takes the available\r\n   space and rail hugs its content — the visual \"justify-between\" effect. */\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar] > [mono-header] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-sidebar]) :where([mono-panel]) > [mono-topbar] > [mono-rail] {\r\n  flex: 0 0 auto;\r\n}\r\n\r\n/* In collapsed rail (no toggle-open, no hover-expand): show the header (so the\r\n   user sees their brand/avatar) and HIDE the rail bar (chevron). The chevron\r\n   only reveals when the user hovers the top row (see swap rule below). */\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]) :where([mono-panel]) > [mono-topbar] > [mono-rail] {\r\n  display: none;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]) :where([mono-panel]) > [mono-topbar] > [mono-header] {\r\n  flex: 1 1 auto;\r\n}\r\n\r\n/* Collapsed rail + topbar hover (no expand-on-hover): swap — hide the header\r\n   and reveal the chevron in its place. Hover scope is the whole topbar (not\r\n   just the header) so the swap doesn't flicker when the cursor crosses\r\n   between the header's slot content and the revealed chevron.\r\n   Skipped when `expand-on-hover` is set: that path widens the panel instead\r\n   and shows both header + chevron side-by-side via the rules below.\r\n   Also gated on `:has(> [mono-rail])` — when the user takes over via\r\n   the `rail` boolean prop the default chevron isn't rendered, so there's\r\n   nothing to swap to and we should leave the header alone. */\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]):not([mono-expand-on-hover]) :where([mono-panel]) > [mono-topbar]:has(> [mono-rail]):hover > [mono-header] {\r\n  display: none;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]):not([mono-expand-on-hover]) :where([mono-panel]) > [mono-topbar]:has(> [mono-rail]):hover > [mono-rail] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n/* Toggled-open or hover-expanded via expand-on-hover: header keeps its space,\r\n   rail hugs its content — both visible side-by-side. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-topbar] > [mono-rail],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-topbar] > [mono-rail] {\r\n  display: flex;\r\n  flex: 0 0 auto;\r\n}\r\n\r\n/* ─────── RAIL BAR (slot host for the chevron / user content) ─────── */\r\n:where([mono-sidebar]) [mono-rail] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  min-height: 44px;\r\n  padding: var(--_mono-sidebar-pad-y) var(--_mono-sidebar-pad-x);\r\n}\r\n\r\n/* Collapsed rail: zero horizontal padding, center the chevron inside the\r\n   full-width rail bar (header is hidden so the bar takes the whole panel). */\r\n[mono-sidebar][mono-effective=\"rail\"]:not([mono-open]) [mono-rail] {\r\n  padding-left: 0;\r\n  padding-right: 0;\r\n  justify-content: center;\r\n}\r\n\r\n/* Expanded (toggled-open or hover-expanded): the rail hugs its content and\r\n   sits at the trailing edge of the row, so its inside padding only needs to\r\n   provide the gap between the chevron and the header. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] [mono-rail],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover [mono-rail] {\r\n  padding-left: var(--_mono-sidebar-pad-x);\r\n  padding-right: var(--_mono-sidebar-pad-x);\r\n  justify-content: center;\r\n}\r\n\r\n/* ─────── DEFAULT RAIL TOGGLE BUTTON ─────── */\r\n:where([mono-sidebar]) [mono-rail-toggle] {\r\n  width: 28px;\r\n  height: 28px;\r\n  border-radius: var(--mono-sidebar-rail-toggle-radius, var(--mono-radius-md));\r\n  border: 1px solid var(--_mono-sidebar-border);\r\n  background: var(--_mono-sidebar-surface);\r\n  color: var(--_mono-sidebar-text-soft);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition:\r\n    background-color 0.14s ease,\r\n    color 0.14s ease,\r\n    border-color 0.14s ease;\r\n}\r\n\r\n:where([mono-sidebar]) [mono-rail-toggle]:hover {\r\n  background: var(--_mono-sidebar-surface);\r\n  color: var(--_mono-sidebar-accent);\r\n  border-color: var(--_mono-sidebar-accent);\r\n}\r\n\r\n/* On a painted panel the accent IS the surface behind this button, so the default\r\n   hover above would tint the glyph and its border into the background. Keep the\r\n   on-accent ink and let only the chip deepen. */\r\n[mono-sidebar][mono-color=\"primary\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"secondary\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"success\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"danger\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"warning\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"info\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"teal\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"purple\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"neutral\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"dark\"] [mono-rail-toggle]:hover,\r\n[mono-sidebar][mono-color=\"custom\"] [mono-rail-toggle]:hover {\r\n  background: color-mix(in oklab, var(--_mono-sidebar-on-accent) 28%, transparent);\r\n  color: var(--_mono-sidebar-on-accent);\r\n  border-color: color-mix(in oklab, var(--_mono-sidebar-on-accent) 38%, transparent);\r\n}\r\n\r\n:where([mono-sidebar]) [mono-rail-toggle] > .mono-icon {\r\n  display: block;\r\n  width: var(--mono-icon-md);\r\n  height: var(--mono-icon-md);\r\n  transition: transform var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* Arrow direction (set directly on the icon via per-state rules so transitions\r\n   fire cleanly on every state flip — `var()`-driven transforms have known\r\n   quirks where some browsers skip the transition):\r\n   - location-left, collapsed → points right (►) to invite expansion\r\n   - location-left, expanded  → points left  (◄) to invite collapse\r\n   - location-right is mirrored\r\n   \"Expanded\" covers BOTH the toggled-open state (`[mono-open]`, set after click)\r\n   AND the hover-expanded state (`[mono-expand-on-hover]:hover`). */\r\n\r\n/* Default for location-right: mirror the icon so the chevron faces the panel. */\r\n[mono-sidebar][mono-location=\"right\"] [mono-rail-toggle] > .mono-icon {\r\n  transform: scaleX(-1);\r\n}\r\n\r\n/* Toggled open (after click): rotate to point inward. Active in any mode. */\r\n[mono-sidebar][mono-location=\"left\"][mono-open] [mono-rail-toggle] > .mono-icon {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n[mono-sidebar][mono-location=\"right\"][mono-open] [mono-rail-toggle] > .mono-icon {\r\n  transform: scaleX(-1) rotate(180deg);\r\n}\r\n\r\n/* Hover-expanded via expand-on-hover (panel widens on hover, no click yet).\r\n   Higher specificity than the [mono-open] rule, so when both apply (cursor still\r\n   over the panel after a click) the result is identical. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover][mono-location=\"left\"]:hover [mono-rail-toggle] > .mono-icon {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover][mono-location=\"right\"]:hover [mono-rail-toggle] > .mono-icon {\r\n  transform: scaleX(-1) rotate(180deg);\r\n}\r\n\r\n/* Opt-in label convention (brand text, footer labels, …): display is read from an\r\n   inherited custom property, so the rail-collapse below can hide it across the\r\n   shadow boundary (a shadow-scoped descendant selector can't reach a slotted\r\n   light-DOM label). Unset → the element's natural display. Mirrors the menu's\r\n   `display: var(--mono-menu-label-display, <natural>)` contract. */\r\n.mono-sidebar-label {\r\n  display: var(--mono-sidebar-label-display, revert);\r\n}\r\n\r\n/* ─────── RAIL: COLLAPSE MENU + LABELS ─────── */\r\n/* When the rail is collapsed (not toggled-open and not hover-expanded), the\r\n   panel is too narrow to fit icon + text — for both menu rows and header/footer\r\n   slot content. We:\r\n   1. Hide text-bearing parts of any descendant `<mono-menu>` and shrink each\r\n      action to a centered icon-only pill (so the active-state pill hugs the\r\n      icon instead of stretching across the full panel).\r\n   2. Zero the header / body / footer horizontal padding so their centered\r\n      content lines up on the panel's center column, keeping the header\r\n      avatar visually flush with the menu icons below it.\r\n   3. Hide any element opted into the `.mono-sidebar-label` convention —\r\n      the typical wrapper for brand text, footer labels, etc. that should\r\n      collapse alongside the menu titles.\r\n   Every rule unwinds under `[mono-open]` or `[mono-expand-on-hover]:hover`, so labels\r\n   reappear in lockstep with the panel widening. */\r\n\r\n/* 1 — the menu interior collapses to icons: text-bearing parts are hidden, the\r\n   tree loses its indent and guide, and a group folds shut visually even while\r\n   the menu's own `_openGroups` state still has it marked open — the state\r\n   survives the round-trip and reappears the moment the panel widens. */\r\n/* Rail-collapse, entirely through inherited custom properties. Set on the body\r\n   (the menu's flattened parent) they cross the shadow boundary into a slotted\r\n   shadow <mono-menu>, whose rows no descendant selector here can reach; menu.css\r\n   consumes every one of them. Restored to `initial` on open / hover-expand\r\n   below, so `var(--x, fallback)` falls back to each element's natural value.\r\n   Pure CSS → works on the server (no-JS) and syncs with `:hover`.\r\n\r\n   This used to run alongside a parallel `.mono-menu-*` descendant path that only\r\n   the light build could see, because only it still emits the old classes. Two\r\n   paths meant three builds: light centred its rows and closed the tree guide,\r\n   shadow and hand-written markup did neither. */\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-panel]) > [mono-body] {\r\n  --mono-menu-label-display: none;\r\n  --mono-menu-row-display: flex;\r\n  --mono-menu-row-justify: center;\r\n  --mono-menu-action-width: auto;\r\n  --mono-menu-action-justify: center;\r\n  --mono-menu-action-gap: 0;\r\n  --mono-menu-group-children-display: none;\r\n  /* a collapsed rail has no room for the tree's indent or its guide */\r\n  --mono-menu-indent: 0px;\r\n  --mono-menu-guide-width: 0px;\r\n  --mono-menu-guide-offset: 0px;\r\n}\r\n\r\n/* 2 — header / body / footer drop horizontal padding and center their content */\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-panel]) > [mono-footer] {\r\n  padding-left: 0;\r\n  padding-right: 0;\r\n  justify-content: center;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"] :where([mono-panel]) > [mono-body] {\r\n  padding-left: 0;\r\n  padding-right: 0;\r\n}\r\n\r\n/* 3 — opt-in label convention for slot content (brand text, footer labels, …).\r\n   Display is driven by an inherited custom property so the rail-collapse reaches\r\n   slotted labels ACROSS the shadow boundary — the same contract the menu uses\r\n   (see `--mono-menu-label-display`). Set on the rail root so labels in ANY region\r\n   (header / body / footer) inherit it; the label consumes it via the base rule\r\n   below (`display: var(--mono-sidebar-label-display, revert)`). */\r\n[mono-sidebar][mono-effective=\"rail\"] {\r\n  --mono-sidebar-label-display: none;\r\n}\r\n\r\n/* ─── Restore on toggled-open or hover-expanded ─── */\r\n/* When the rail expands, defer to the data-open attribute — open groups\r\n   reveal their children, closed groups stay closed. */\r\n/* Restore the cross-shadow rail-collapse vars on toggle-open / hover-expand:\r\n   `initial` makes the menu's `var(--x, fallback)` resolve to each element's\r\n   natural value, re-expanding the slotted shadow <mono-menu> in lockstep. */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-body],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-body] {\r\n  --mono-menu-label-display: initial;\r\n  --mono-menu-row-display: initial;\r\n  --mono-menu-row-justify: initial;\r\n  --mono-menu-action-width: initial;\r\n  --mono-menu-action-justify: initial;\r\n  --mono-menu-action-gap: initial;\r\n  --mono-menu-group-children-display: initial;\r\n  --mono-menu-indent: initial;\r\n  --mono-menu-guide-width: initial;\r\n  --mono-menu-guide-offset: initial;\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-body],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-footer],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-body],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-footer] {\r\n  padding-left: var(--_mono-sidebar-pad-x);\r\n  padding-right: var(--_mono-sidebar-pad-x);\r\n}\r\n\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open] :where([mono-panel]) > [mono-footer],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-topbar]) > [mono-header],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover :where([mono-panel]) > [mono-footer] {\r\n  justify-content: flex-start;\r\n}\r\n\r\n/* Restore the label on toggle-open / hover-expand: `initial` makes the custom\r\n   property guaranteed-invalid, so the label's `var(--x, revert)` falls back to\r\n   its natural display — re-expanding slotted labels (light + shadow) in lockstep\r\n   with the menu (mirrors the `--mono-menu-*` restore above). */\r\n[mono-sidebar][mono-effective=\"rail\"][mono-open],\r\n[mono-sidebar][mono-effective=\"rail\"][mono-expand-on-hover]:hover {\r\n  --mono-sidebar-label-display: initial;\r\n}\r\n\r\n/* ─────── REDUCED MOTION ─────── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-sidebar]) [mono-panel],\r\n  :where([mono-sidebar]) [mono-scrim],\r\n  :where([mono-sidebar]) [mono-rail-toggle] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/sidebar/mono-sidebar.shadow.ts
-var MonoSidebarShadow = class MonoSidebarShadow extends withShadowUtilityStyles(MonoSidebarCore(LitElement)) {
+let MonoSidebarShadow = class MonoSidebarShadow extends withShadowUtilityStyles(MonoSidebarCore(LitElement)) {
 	static {
-		this.styles = [unsafeCSS(toShadowCss(sidebar_default, { host: "mono-sidebar" }))];
+		this.styles = [unsafeCSS(toShadowCss(sidebar_css_raw_default, { host: "mono-sidebar" }))];
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -602,5 +608,6 @@ var MonoSidebarShadow = class MonoSidebarShadow extends withShadowUtilityStyles(
 	}
 };
 MonoSidebarShadow = __decorate([customElement("mono-shadow-sidebar")], MonoSidebarShadow);
+
 //#endregion
-export { MonoSidebarCore, MonoSidebarShadow, SIDEBAR_AUTO_BREAKPOINT, generateSidebarRootClasses, isAutoTemporary, resolveMode, validateSidebarProps };
+export { MonoSidebarCore, MonoSidebarShadow, SIDEBAR_AUTO_BREAKPOINT, generateSidebarRootClasses, isAutoTemporary, resolveMode, validateSidebarProps };

package/dist/ui/shadow/switch.js

@@ -1,9 +1,10 @@
-import { a as __decorate, c as defineHybridPropAlias, 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 { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+
 //#region src/components/switch/switch-core.ts
 /**
 * `MonoSwitchCore` — all render-mode-agnostic logic for `mono-switch`: reactive
@@ -17,7 +18,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 * `mono-checkbox`). SSR-safe: no `document`/`window`; `focus`/`blur` query
 * `this.renderRoot`.
 */
-var MonoSwitchCore = (superClass) => {
+const MonoSwitchCore = (superClass) => {
 	class MonoSwitchCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -289,18 +290,20 @@ var MonoSwitchCore = (superClass) => {
 	__decorate([state()], MonoSwitchCoreClass.prototype, "_hasDescriptionSlotState", void 0);
 	return MonoSwitchCoreClass;
 };
+
 //#endregion
-//#region src/components/switch/switch.css?raw
-var switch_default = "/* =========================================================================\r\n   mono-switch — a port of Basecoat's `.input[type='checkbox'][role='switch']`\r\n   and the `.label` beside it (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-switch size=\"sm\" color=\"danger\" label=\"Notifications\" model-value>\r\n     <label mono-switch mono-size=\"sm\" mono-color=\"danger\">\r\n       <input mono-input type=\"checkbox\" role=\"switch\" checked />\r\n       <span mono-track aria-hidden=\"true\"><span mono-thumb></span></span>\r\n       <span mono-label><span mono-label-text>Notifications</span></span>\r\n     </label>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary). The element renders these attributes on its\r\n   root <label> (both builds) plus the STATES `mono-checked` / `mono-loading`;\r\n   hand-written markup may rely on the native input's `:checked` instead — every\r\n   state rule reads both. The old classes (`.mono-switch.sm.mono-switch-checked`)\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-switch]                                 ≡ .label (flex gap-2 text-sm font-medium leading-snug select-none)\r\n     [mono-switch] > [mono-track]                  ≡ .input[type='checkbox'][role='switch'] (h-[18.4px] w-[32px] rounded-full border border-transparent shadow-xs, not-checked:bg-input)\r\n     [mono-track] > [mono-thumb]                   ≡ :before (size-4 rounded-full bg-background; dark not-checked:bg-foreground, checked:bg-primary-foreground — via --mono-mode-switch-thumb*)\r\n     [mono-checked] / [mono-input]:checked         ≡ :checked (bg-primary) + :before translate-x-[calc(100%-2px)]\r\n     [mono-input]:focus-visible + [mono-track]     ≡ focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n     [mono-invalid] / [mono-input][aria-invalid]   ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-disabled] / [mono-input]:disabled       ≡ disabled:cursor-not-allowed disabled:opacity-50\r\n     [mono-label-text]                             ≡ .label text\r\n     [mono-description]                            ≡ .field > p (text-sm text-muted-foreground)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION — upstream has two steps (default / data-size='sm');\r\n                                                     mono derives all six from --mono-control-height-*\r\n     [mono-color=\"…\"]                              ≡ EXTENSION (the ON track in the role's colour)\r\n     [mono-loading]                                ≡ EXTENSION (the thumb pulses while a change is in flight)\r\n\r\n   GEOMETRY — one anchor, everything else derived, and it lands exactly on\r\n   Basecoat at md: the THUMB is the checkbox box (--mono-control-height-md × 4/9\r\n   = 16px = upstream's `size-4`), the track is 1.15 × that tall (18.4px =\r\n   `h-[18.4px]`) and 2 × that wide (32px = `w-[32px]`). So a switch, a checkbox\r\n   and a radio in one column share one scale by construction. The thumb travels\r\n   the width of the track's CONTENT box minus its own — which parks it flush\r\n   inside the border at both ends, so there is no inset to tune. (Upstream writes\r\n   that as `calc(100% - 2px)`, the same number at vega's 1px border and 2:1\r\n   track, but wrong for any flavor that changes either.)\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-switch]) [mono-track]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while state rules (checked / focus / invalid / disabled / loading,\r\n   keyed on the root or the native input) stay heavier and win over it.\r\n\r\n   Inner parts: [mono-input], [mono-track] > [mono-thumb], [mono-label] >\r\n   [mono-label-text] / [mono-description]. The shadow build marks an unassigned\r\n   slot wrapper [mono-empty].\r\n\r\n   The track sits on the label's CAP BAND (see `--_mono-switch-line-offset`) —\r\n   mono's own alignment rule, kept, and the same numbers checkbox.css uses.\r\n\r\n   FLAVORS set `--mono-switch-{radius,shadow,border-width,border-color,\r\n   checked-border-color,ring-width,ring-alpha,track-off,track-height-md,\r\n   track-ratio,thumb-ratio,thumb-width-ratio,thumb-radius,thumb-shadow}` (the per-style `[role='switch']` deltas); every fallback here is\r\n   vega's value (`node scripts/basecoat-styles.mjs --varying \"role='switch'\"`).\r\n   ========================================================================= */\r\n\r\nmono-switch {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-switch] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-switch-text: var(--mono-switch-text, var(--foreground));\r\n  --_mono-switch-description: var(--mono-switch-description, var(--muted-foreground));\r\n  --_mono-switch-primary: var(--mono-switch-primary, var(--primary));\r\n  --_mono-switch-accent: var(--mono-switch-accent, var(--_mono-switch-accent-preset, var(--_mono-switch-primary)));\r\n  /* not-checked:bg-input (dark: /80 — the mode token carries it) */\r\n  --_mono-switch-track-off: var(--mono-switch-track-off, var(--mono-mode-surface-strong));\r\n  --_mono-switch-thumb: var(--mono-switch-thumb, var(--mono-mode-switch-thumb));\r\n  --_mono-switch-thumb-checked: var(--mono-switch-thumb-checked, var(--mono-mode-switch-thumb-checked));\r\n  --_mono-switch-shadow: var(--mono-switch-shadow, var(--mono-shadow-xs));\r\n  --_mono-switch-thumb-shadow: var(--mono-switch-thumb-shadow, 0 0 #0000);\r\n  --_mono-switch-radius: var(--mono-switch-radius, var(--mono-radius-full));\r\n  --_mono-switch-border-width: var(--mono-switch-border-width, var(--mono-border-width));\r\n  --_mono-switch-border-color: var(--mono-switch-border-color, transparent);\r\n  --_mono-switch-ring-color: var(--mono-switch-ring-color, var(--ring));\r\n  --_mono-switch-ring-width: var(--mono-switch-ring-width, var(--mono-ring-width));\r\n  --_mono-switch-ring-alpha: var(--mono-switch-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css [role='switch'] — h-[18.4px] w-[32px] with a\r\n     size-4 thumb; 18.4 = (36 × 4/9) × 1.15 and 32 = (36 × 4/9) × 2 */\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-md, calc(var(--mono-control-height-md) * 23 / 45)));\r\n  --_mono-switch-track-w: var(--mono-switch-track-width, calc(var(--_mono-switch-track-h) * var(--mono-switch-track-ratio, 1.7391)));\r\n  --_mono-switch-track-inner-h: calc(var(--_mono-switch-track-h) - 2 * var(--_mono-switch-border-width));\r\n  --_mono-switch-track-inner-w: calc(var(--_mono-switch-track-w) - 2 * var(--_mono-switch-border-width));\r\n  /* `min()` so a flavor with a thicker border (luma, rhea: border-2) cannot\r\n     push the thumb past the track content box. The width is its own ratio:\r\n     luma's thumb is a PILL (h-4 w-6), not a circle. */\r\n  --_mono-switch-thumb-size: min(\r\n    calc(var(--_mono-switch-track-h) * var(--mono-switch-thumb-ratio, 0.8696)),\r\n    var(--_mono-switch-track-inner-h)\r\n  );\r\n  --_mono-switch-thumb-w: min(\r\n    calc(var(--_mono-switch-track-h) * var(--mono-switch-thumb-width-ratio, var(--mono-switch-thumb-ratio, 0.8696))),\r\n    var(--_mono-switch-track-inner-w)\r\n  );\r\n  /* ON travel = the content box minus the thumb. Upstream writes it\r\n     `translate-x-[calc(100%-2px)]`, which is the same number at vega's 1px\r\n     border and 2:1 track — and only there: luma's border-2 left the thumb short\r\n     of the end, rhea's narrower track pushed it past. */\r\n  --_mono-switch-travel: calc(var(--_mono-switch-track-inner-w) - var(--_mono-switch-thumb-w));\r\n  /* ── whole pixels ────────────────────────────────────────────────────────\r\n     Every part of the switch is a ratio of the control step, so it lands on a\r\n     fraction (18.39px, 16.34px, 17.77px…). A fractional round shape is\r\n     antialiased on every edge, and the thumb — which parks flush against the\r\n     track's cap — picked up a dark rim that changed with the flavor and the\r\n     screen's pixel ratio.\r\n\r\n     Snap the THUMB and its inset, then build the track height from them, rather\r\n     than rounding each value on its own: rounding independently can leave half a\r\n     pixel above and below the thumb (an odd track around an even thumb), which\r\n     blurs exactly the edge this is meant to sharpen, or stretch the thumb into an\r\n     ellipse. `round()` has the same browser floor as `color-mix()` and `:has()`,\r\n     which this sheet already requires. */\r\n  --_mono-switch-thumb-h-px: round(nearest, var(--_mono-switch-thumb-size), 1px);\r\n  --_mono-switch-thumb-w-px: round(nearest, var(--_mono-switch-thumb-w), 1px);\r\n  --_mono-switch-thumb-inset-y: max(\r\n    0px,\r\n    round(nearest, calc((var(--_mono-switch-track-inner-h) - var(--_mono-switch-thumb-size)) / 2), 1px)\r\n  );\r\n  --_mono-switch-track-h-px: calc(\r\n    var(--_mono-switch-thumb-h-px) + 2 * var(--_mono-switch-border-width) + 2 * var(--_mono-switch-thumb-inset-y)\r\n  );\r\n  --_mono-switch-track-w-px: round(nearest, var(--_mono-switch-track-w), 1px);\r\n  --_mono-switch-travel-px: calc(\r\n    var(--_mono-switch-track-w-px) - 2 * var(--_mono-switch-border-width) - var(--_mono-switch-thumb-w-px)\r\n  );\r\n\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-md, var(--mono-text-sm));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-md, 0.8125rem);\r\n\r\n  /* ── alignment with the label ────────────────────────────────────────────\r\n     The track is centred on the label's CAP BAND — the ink the eye reads, not\r\n     the line box. Every number is checkbox.css's. */\r\n  --_mono-switch-label-line-height: var(--mono-switch-label-line-height, var(--mono-leading-snug));\r\n  --_mono-switch-optical-shift: 0.045;\r\n  --_mono-switch-optical-nudge: 0px;\r\n  --_mono-switch-line-offset: calc(\r\n    (var(--_mono-switch-label-font) * var(--_mono-switch-label-line-height) - var(--_mono-switch-track-h-px)) / 2 +\r\n      var(--_mono-switch-label-font) * var(--_mono-switch-optical-shift) + var(--_mono-switch-optical-nudge)\r\n  );\r\n\r\n  /* The element build nests this root inside its host, so it is never itself a\r\n     grid or flex item and shrink-wraps its content. Hand-written markup usually\r\n     IS the item (a radio in a `display: grid` list), and an item blockifies —\r\n     `inline-flex` becomes `flex` and the row stretches to the widest sibling,\r\n     wrapping its label at a different point than the element's. `fit-content`\r\n     keeps both shapes shrink-wrapped; a consumer who wants a full-width row\r\n     still sets a width. */\r\n  width: fit-content;\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-switch-gap);\r\n  position: relative;\r\n  vertical-align: top;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-switch-text);\r\n}\r\n\r\n[mono-switch],\r\n:where([mono-switch]) *,\r\n:where([mono-switch]) *::before,\r\n:where([mono-switch]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([mono-switch]) :is([mono-label], [mono-label-text], [mono-description])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* the track seats on the first line of a label that is actually there; a bare\r\n   track stays flush at the top */\r\n[mono-switch]:has([mono-label-text]:not([mono-empty])) > [mono-track] {\r\n  margin-top: var(--_mono-switch-line-offset, 0px);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream has two steps; mono derives six from the control\r\n   ladder, so the thumb is the checkbox box at every one of them\r\n   ========================================= */\r\n\r\n[mono-switch][mono-size=\"xs\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-xs, calc(var(--mono-control-height-xs) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-xs, calc(var(--mono-spacing) * 1.25)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-xs, var(--mono-text-xs));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-xs, 0.6875rem);\r\n}\r\n\r\n[mono-switch][mono-size=\"sm\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-sm, calc(var(--mono-control-height-sm) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-sm, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-sm, 0.8125rem);\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-sm, var(--mono-text-xs));\r\n}\r\n\r\n[mono-switch][mono-size=\"lg\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-lg, calc(var(--mono-control-height-lg) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-lg, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-lg, var(--mono-text-base));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-lg, var(--mono-text-sm));\r\n  /* 16px text rounds its ascent such that the track lands ~0.35px low */\r\n  --_mono-switch-optical-nudge: -0.35px;\r\n}\r\n\r\n[mono-switch][mono-size=\"xl\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-xl, calc(var(--mono-control-height-xl) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-xl, calc(var(--mono-spacing) * 3)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-xl, var(--mono-text-lg));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-xl, var(--mono-text-base));\r\n}\r\n\r\n[mono-switch][mono-size=\"xxl\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-xxl, calc(var(--mono-control-height-xxl) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-xxl, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-xxl, var(--mono-text-xl));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-xxl, var(--mono-text-lg));\r\n  /* 20px text rounds the other way, leaving the track ~1.1px high */\r\n  --_mono-switch-optical-nudge: 1.1px;\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the ON track in the role's colour\r\n   ========================================= */\r\n\r\n[mono-switch]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-switch-accent-preset: var(--_mono-switch-primary);\r\n}\r\n[mono-switch][mono-color=\"secondary\"] {\r\n  --_mono-switch-accent-preset: var(--secondary-foreground);\r\n}\r\n[mono-switch][mono-color=\"success\"] {\r\n  --_mono-switch-accent-preset: var(--success);\r\n}\r\n[mono-switch][mono-color=\"danger\"] {\r\n  --_mono-switch-accent-preset: var(--destructive);\r\n}\r\n[mono-switch][mono-color=\"warning\"] {\r\n  --_mono-switch-accent-preset: var(--warning);\r\n}\r\n[mono-switch][mono-color=\"info\"] {\r\n  --_mono-switch-accent-preset: var(--info);\r\n}\r\n[mono-switch][mono-color=\"teal\"] {\r\n  --_mono-switch-accent-preset: var(--teal);\r\n}\r\n[mono-switch][mono-color=\"purple\"] {\r\n  --_mono-switch-accent-preset: var(--purple);\r\n}\r\n[mono-switch][mono-color=\"neutral\"] {\r\n  --_mono-switch-accent-preset: var(--neutral);\r\n}\r\n[mono-switch][mono-color=\"dark\"] {\r\n  --_mono-switch-accent-preset: var(--dark);\r\n}\r\n\r\n/* =========================================\r\n   States on the root\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/switch.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — disabled:cursor-not-allowed disabled:opacity-50.\r\n   A BUSY switch is exempt: the input is disabled so a second click cannot race\r\n   the first, but it reads as \"working\", not \"unavailable\". */\r\n[mono-switch][mono-disabled]:not([mono-loading]),\r\n[mono-switch]:not([mono-loading]):has(> [mono-input]:disabled) {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-switch][mono-loading] {\r\n  cursor: progress;\r\n  pointer-events: none;\r\n}\r\n\r\n/* the native input is the accessible control; the track is its painted twin */\r\n:where([mono-switch]) [mono-input] {\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  /* the UA gives an <input> its own font; inside a shadow root nothing resets it,\r\n     so the hidden control ended up with a different computed font in the two\r\n     builds. It paints nothing either way — this just keeps them identical. */\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\n/* =========================================\r\n   The track\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/switch.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — inline-flex shrink-0 appearance-none items-center transition-all outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — rounded-full border border-transparent shadow-xs; not-checked:bg-input\r\n   (dark /80 via --mono-mode-surface-strong); checked:bg-primary;\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm'])\r\n   — h-[18.4px] w-[32px] (mono derives both from the control step) */\r\n:where([mono-switch]) > [mono-track] {\r\n  --_mono-switch-ring: 0 0 #0000;\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: var(--_mono-switch-track-w-px);\r\n  height: var(--_mono-switch-track-h-px);\r\n  border: var(--_mono-switch-border-width) solid var(--_mono-switch-border-color);\r\n  border-radius: var(--_mono-switch-radius);\r\n  background-color: var(--_mono-switch-track-off);\r\n  box-shadow: var(--_mono-switch-ring), var(--_mono-switch-shadow);\r\n  /* the track's own ink is the ACCENT, so a flavor that outlines the ON track\r\n     (luma, sera, rhea) says `--mono-switch-checked-border-color: currentColor`\r\n     with public knobs alone */\r\n  color: var(--_mono-switch-accent);\r\n  transition-property: box-shadow, background-color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 */\r\n:where([mono-switch]) > [mono-input]:focus-visible + [mono-track] {\r\n  border-color: var(--_mono-switch-ring-color);\r\n  --_mono-switch-ring: 0 0 0 var(--_mono-switch-ring-width) color-mix(in oklab, var(--_mono-switch-ring-color) var(--_mono-switch-ring-alpha), transparent);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50, /40 via the mode tokens) */\r\n[mono-switch][mono-invalid] > [mono-track],\r\n:where([mono-switch]) > [mono-input][aria-invalid=\"true\"] + [mono-track] {\r\n  border-color: var(--mono-mode-invalid-border);\r\n  --_mono-switch-ring: 0 0 0 var(--_mono-switch-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* checked:bg-primary — generalised per hue */\r\n[mono-switch][mono-checked] > [mono-track],\r\n:where([mono-switch]) > [mono-input]:checked + [mono-track] {\r\n  background-color: var(--_mono-switch-accent);\r\n  border-color: var(--mono-switch-checked-border-color, var(--_mono-switch-border-color));\r\n}\r\n\r\n/* =========================================\r\n   The thumb — upstream's `:before`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/switch.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — before:pointer-events-none before:block before:content-[''] before:ring-0 before:transition-transform */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before\r\n   — bg-background rounded-full (dark: not-checked bg-foreground / checked\r\n   bg-primary-foreground, via --mono-mode-switch-thumb*) */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']):before\r\n   — size-4 (mono: that share of the track, so it tracks every step) */\r\n:where([mono-switch]) > [mono-track] > [mono-thumb] {\r\n  display: block;\r\n  flex: 0 0 auto;\r\n  pointer-events: none;\r\n  width: var(--_mono-switch-thumb-w-px);\r\n  height: var(--_mono-switch-thumb-h-px);\r\n  border-radius: var(--mono-switch-thumb-radius, var(--mono-radius-full));\r\n  background-color: var(--_mono-switch-thumb);\r\n  box-shadow: var(--_mono-switch-thumb-shadow);\r\n  /* `translate`, not `transform`: the loading pulse owns `transform`, and the\r\n     two are independent properties, so they no longer collide */\r\n  translate: 0;\r\n  transition-property: translate, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* :checked:before — translate-x-[calc(100%-2px)]: the thumb parks flush inside\r\n   the track's border at both ends (see --_mono-switch-travel) */\r\n[mono-switch][mono-checked] > [mono-track] > [mono-thumb],\r\n:where([mono-switch]) > [mono-input]:checked + [mono-track] > [mono-thumb] {\r\n  translate: var(--_mono-switch-travel-px);\r\n  background-color: var(--_mono-switch-thumb-checked);\r\n}\r\n\r\n[mono-switch][mono-checked] > [mono-track] > [mono-thumb]:dir(rtl),\r\n:where([mono-switch]) > [mono-input]:checked + [mono-track] > [mono-thumb]:dir(rtl) {\r\n  translate: calc(-1 * var(--_mono-switch-travel-px));\r\n}\r\n\r\n/* EXTENSION — the thumb pulses while a change is in flight */\r\n[mono-switch][mono-loading] > [mono-track] > [mono-thumb] {\r\n  animation: mono-switch-pulse 1s ease-in-out infinite;\r\n}\r\n\r\n@keyframes mono-switch-pulse {\r\n  0%,\r\n  100% {\r\n    transform: scale(1);\r\n  }\r\n  50% {\r\n    transform: scale(0.86);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-switch]) > [mono-track],\r\n  :where([mono-switch]) > [mono-track] > [mono-thumb] {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-switch][mono-loading] > [mono-track] > [mono-thumb] {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n:where([mono-switch]) > [mono-label] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — text-sm leading-snug font-medium;\r\n   `block` so the first line box is exactly font × line-height */\r\n:where([mono-switch]) [mono-label-text] {\r\n  display: block;\r\n  font-size: var(--_mono-switch-label-font);\r\n  line-height: var(--_mono-switch-label-line-height);\r\n  font-weight: var(--mono-switch-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--_mono-switch-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal; EXTENSION: one step\r\n   under the label per size */\r\n:where([mono-switch]) [mono-description] {\r\n  display: block;\r\n  margin-top: calc(var(--mono-spacing) * 0.5);\r\n  font-size: var(--_mono-switch-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-switch-description);\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\switch\switch.css?raw.js
+var switch_css_raw_default = "/* =========================================================================\r\n   mono-switch — a port of Basecoat's `.input[type='checkbox'][role='switch']`\r\n   and the `.label` beside it (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-switch size=\"sm\" color=\"danger\" label=\"Notifications\" model-value>\r\n     <label mono-switch mono-size=\"sm\" mono-color=\"danger\">\r\n       <input mono-input type=\"checkbox\" role=\"switch\" checked />\r\n       <span mono-track aria-hidden=\"true\"><span mono-thumb></span></span>\r\n       <span mono-label><span mono-label-text>Notifications</span></span>\r\n     </label>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary). The element renders these attributes on its\r\n   root <label> (both builds) plus the STATES `mono-checked` / `mono-loading`;\r\n   hand-written markup may rely on the native input's `:checked` instead — every\r\n   state rule reads both. The old classes (`.mono-switch.sm.mono-switch-checked`)\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-switch]                                 ≡ .label (flex gap-2 text-sm font-medium leading-snug select-none)\r\n     [mono-switch] > [mono-track]                  ≡ .input[type='checkbox'][role='switch'] (h-[18.4px] w-[32px] rounded-full border border-transparent shadow-xs, not-checked:bg-input)\r\n     [mono-track] > [mono-thumb]                   ≡ :before (size-4 rounded-full bg-background; dark not-checked:bg-foreground, checked:bg-primary-foreground — via --mono-mode-switch-thumb*)\r\n     [mono-checked] / [mono-input]:checked         ≡ :checked (bg-primary) + :before translate-x-[calc(100%-2px)]\r\n     [mono-input]:focus-visible + [mono-track]     ≡ focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n     [mono-invalid] / [mono-input][aria-invalid]   ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-disabled] / [mono-input]:disabled       ≡ disabled:cursor-not-allowed disabled:opacity-50\r\n     [mono-label-text]                             ≡ .label text\r\n     [mono-description]                            ≡ .field > p (text-sm text-muted-foreground)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION — upstream has two steps (default / data-size='sm');\r\n                                                     mono derives all six from --mono-control-height-*\r\n     [mono-color=\"…\"]                              ≡ EXTENSION (the ON track in the role's colour)\r\n     [mono-loading]                                ≡ EXTENSION (the thumb pulses while a change is in flight)\r\n\r\n   GEOMETRY — one anchor, everything else derived, and it lands exactly on\r\n   Basecoat at md: the THUMB is the checkbox box (--mono-control-height-md × 4/9\r\n   = 16px = upstream's `size-4`), the track is 1.15 × that tall (18.4px =\r\n   `h-[18.4px]`) and 2 × that wide (32px = `w-[32px]`). So a switch, a checkbox\r\n   and a radio in one column share one scale by construction. The thumb travels\r\n   the width of the track's CONTENT box minus its own — which parks it flush\r\n   inside the border at both ends, so there is no inset to tune. (Upstream writes\r\n   that as `calc(100% - 2px)`, the same number at vega's 1px border and 2:1\r\n   track, but wrong for any flavor that changes either.)\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-switch]) [mono-track]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while state rules (checked / focus / invalid / disabled / loading,\r\n   keyed on the root or the native input) stay heavier and win over it.\r\n\r\n   Inner parts: [mono-input], [mono-track] > [mono-thumb], [mono-label] >\r\n   [mono-label-text] / [mono-description]. The shadow build marks an unassigned\r\n   slot wrapper [mono-empty].\r\n\r\n   The track sits on the label's CAP BAND (see `--_mono-switch-line-offset`) —\r\n   mono's own alignment rule, kept, and the same numbers checkbox.css uses.\r\n\r\n   FLAVORS set `--mono-switch-{radius,shadow,border-width,border-color,\r\n   checked-border-color,ring-width,ring-alpha,track-off,track-height-md,\r\n   track-ratio,thumb-ratio,thumb-width-ratio,thumb-radius,thumb-shadow}` (the per-style `[role='switch']` deltas); every fallback here is\r\n   vega's value (`node scripts/basecoat-styles.mjs --varying \"role='switch'\"`).\r\n   ========================================================================= */\r\n\r\nmono-switch {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-switch] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-switch-text: var(--mono-switch-text, var(--foreground));\r\n  --_mono-switch-description: var(--mono-switch-description, var(--muted-foreground));\r\n  --_mono-switch-primary: var(--mono-switch-primary, var(--primary));\r\n  --_mono-switch-accent: var(--mono-switch-accent, var(--_mono-switch-accent-preset, var(--_mono-switch-primary)));\r\n  /* not-checked:bg-input (dark: /80 — the mode token carries it) */\r\n  --_mono-switch-track-off: var(--mono-switch-track-off, var(--mono-mode-surface-strong));\r\n  --_mono-switch-thumb: var(--mono-switch-thumb, var(--mono-mode-switch-thumb));\r\n  --_mono-switch-thumb-checked: var(--mono-switch-thumb-checked, var(--mono-mode-switch-thumb-checked));\r\n  --_mono-switch-shadow: var(--mono-switch-shadow, var(--mono-shadow-xs));\r\n  --_mono-switch-thumb-shadow: var(--mono-switch-thumb-shadow, 0 0 #0000);\r\n  --_mono-switch-radius: var(--mono-switch-radius, var(--mono-radius-full));\r\n  --_mono-switch-border-width: var(--mono-switch-border-width, var(--mono-border-width));\r\n  --_mono-switch-border-color: var(--mono-switch-border-color, transparent);\r\n  --_mono-switch-ring-color: var(--mono-switch-ring-color, var(--ring));\r\n  --_mono-switch-ring-width: var(--mono-switch-ring-width, var(--mono-ring-width));\r\n  --_mono-switch-ring-alpha: var(--mono-switch-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css [role='switch'] — h-[18.4px] w-[32px] with a\r\n     size-4 thumb; 18.4 = (36 × 4/9) × 1.15 and 32 = (36 × 4/9) × 2 */\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-md, calc(var(--mono-control-height-md) * 23 / 45)));\r\n  --_mono-switch-track-w: var(--mono-switch-track-width, calc(var(--_mono-switch-track-h) * var(--mono-switch-track-ratio, 1.7391)));\r\n  --_mono-switch-track-inner-h: calc(var(--_mono-switch-track-h) - 2 * var(--_mono-switch-border-width));\r\n  --_mono-switch-track-inner-w: calc(var(--_mono-switch-track-w) - 2 * var(--_mono-switch-border-width));\r\n  /* `min()` so a flavor with a thicker border (luma, rhea: border-2) cannot\r\n     push the thumb past the track content box. The width is its own ratio:\r\n     luma's thumb is a PILL (h-4 w-6), not a circle. */\r\n  --_mono-switch-thumb-size: min(\r\n    calc(var(--_mono-switch-track-h) * var(--mono-switch-thumb-ratio, 0.8696)),\r\n    var(--_mono-switch-track-inner-h)\r\n  );\r\n  --_mono-switch-thumb-w: min(\r\n    calc(var(--_mono-switch-track-h) * var(--mono-switch-thumb-width-ratio, var(--mono-switch-thumb-ratio, 0.8696))),\r\n    var(--_mono-switch-track-inner-w)\r\n  );\r\n  /* ON travel = the content box minus the thumb. Upstream writes it\r\n     `translate-x-[calc(100%-2px)]`, which is the same number at vega's 1px\r\n     border and 2:1 track — and only there: luma's border-2 left the thumb short\r\n     of the end, rhea's narrower track pushed it past. */\r\n  --_mono-switch-travel: calc(var(--_mono-switch-track-inner-w) - var(--_mono-switch-thumb-w));\r\n  /* ── whole pixels ────────────────────────────────────────────────────────\r\n     Every part of the switch is a ratio of the control step, so it lands on a\r\n     fraction (18.39px, 16.34px, 17.77px…). A fractional round shape is\r\n     antialiased on every edge, and the thumb — which parks flush against the\r\n     track's cap — picked up a dark rim that changed with the flavor and the\r\n     screen's pixel ratio.\r\n\r\n     Snap the THUMB and its inset, then build the track height from them, rather\r\n     than rounding each value on its own: rounding independently can leave half a\r\n     pixel above and below the thumb (an odd track around an even thumb), which\r\n     blurs exactly the edge this is meant to sharpen, or stretch the thumb into an\r\n     ellipse. `round()` has the same browser floor as `color-mix()` and `:has()`,\r\n     which this sheet already requires. */\r\n  --_mono-switch-thumb-h-px: round(nearest, var(--_mono-switch-thumb-size), 1px);\r\n  --_mono-switch-thumb-w-px: round(nearest, var(--_mono-switch-thumb-w), 1px);\r\n  --_mono-switch-thumb-inset-y: max(\r\n    0px,\r\n    round(nearest, calc((var(--_mono-switch-track-inner-h) - var(--_mono-switch-thumb-size)) / 2), 1px)\r\n  );\r\n  --_mono-switch-track-h-px: calc(\r\n    var(--_mono-switch-thumb-h-px) + 2 * var(--_mono-switch-border-width) + 2 * var(--_mono-switch-thumb-inset-y)\r\n  );\r\n  --_mono-switch-track-w-px: round(nearest, var(--_mono-switch-track-w), 1px);\r\n  --_mono-switch-travel-px: calc(\r\n    var(--_mono-switch-track-w-px) - 2 * var(--_mono-switch-border-width) - var(--_mono-switch-thumb-w-px)\r\n  );\r\n\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-md, var(--mono-text-sm));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-md, 0.8125rem);\r\n\r\n  /* ── alignment with the label ────────────────────────────────────────────\r\n     The track is centred on the label's CAP BAND — the ink the eye reads, not\r\n     the line box. Every number is checkbox.css's. */\r\n  --_mono-switch-label-line-height: var(--mono-switch-label-line-height, var(--mono-leading-snug));\r\n  --_mono-switch-optical-shift: 0.045;\r\n  --_mono-switch-optical-nudge: 0px;\r\n  --_mono-switch-line-offset: calc(\r\n    (var(--_mono-switch-label-font) * var(--_mono-switch-label-line-height) - var(--_mono-switch-track-h-px)) / 2 +\r\n      var(--_mono-switch-label-font) * var(--_mono-switch-optical-shift) + var(--_mono-switch-optical-nudge)\r\n  );\r\n\r\n  /* The element build nests this root inside its host, so it is never itself a\r\n     grid or flex item and shrink-wraps its content. Hand-written markup usually\r\n     IS the item (a radio in a `display: grid` list), and an item blockifies —\r\n     `inline-flex` becomes `flex` and the row stretches to the widest sibling,\r\n     wrapping its label at a different point than the element's. `fit-content`\r\n     keeps both shapes shrink-wrapped; a consumer who wants a full-width row\r\n     still sets a width. */\r\n  width: fit-content;\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-switch-gap);\r\n  position: relative;\r\n  vertical-align: top;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-switch-text);\r\n}\r\n\r\n[mono-switch],\r\n:where([mono-switch]) *,\r\n:where([mono-switch]) *::before,\r\n:where([mono-switch]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([mono-switch]) :is([mono-label], [mono-label-text], [mono-description])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* the track seats on the first line of a label that is actually there; a bare\r\n   track stays flush at the top */\r\n[mono-switch]:has([mono-label-text]:not([mono-empty])) > [mono-track] {\r\n  margin-top: var(--_mono-switch-line-offset, 0px);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream has two steps; mono derives six from the control\r\n   ladder, so the thumb is the checkbox box at every one of them\r\n   ========================================= */\r\n\r\n[mono-switch][mono-size=\"xs\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-xs, calc(var(--mono-control-height-xs) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-xs, calc(var(--mono-spacing) * 1.25)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-xs, var(--mono-text-xs));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-xs, 0.6875rem);\r\n}\r\n\r\n[mono-switch][mono-size=\"sm\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-sm, calc(var(--mono-control-height-sm) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-sm, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-sm, 0.8125rem);\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-sm, var(--mono-text-xs));\r\n}\r\n\r\n[mono-switch][mono-size=\"lg\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-lg, calc(var(--mono-control-height-lg) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-lg, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-lg, var(--mono-text-base));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-lg, var(--mono-text-sm));\r\n  /* 16px text rounds its ascent such that the track lands ~0.35px low */\r\n  --_mono-switch-optical-nudge: -0.35px;\r\n}\r\n\r\n[mono-switch][mono-size=\"xl\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-xl, calc(var(--mono-control-height-xl) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-xl, calc(var(--mono-spacing) * 3)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-xl, var(--mono-text-lg));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-xl, var(--mono-text-base));\r\n}\r\n\r\n[mono-switch][mono-size=\"xxl\"] {\r\n  --_mono-switch-track-h: var(--mono-switch-track-height, var(--mono-switch-track-height-xxl, calc(var(--mono-control-height-xxl) * 23 / 45)));\r\n  --_mono-switch-gap: var(--mono-switch-gap, var(--mono-switch-gap-xxl, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-switch-label-font: var(--mono-switch-label-font-xxl, var(--mono-text-xl));\r\n  --_mono-switch-description-font: var(--mono-switch-description-font-xxl, var(--mono-text-lg));\r\n  /* 20px text rounds the other way, leaving the track ~1.1px high */\r\n  --_mono-switch-optical-nudge: 1.1px;\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the ON track in the role's colour\r\n   ========================================= */\r\n\r\n[mono-switch]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-switch-accent-preset: var(--_mono-switch-primary);\r\n}\r\n[mono-switch][mono-color=\"secondary\"] {\r\n  --_mono-switch-accent-preset: var(--secondary-foreground);\r\n}\r\n[mono-switch][mono-color=\"success\"] {\r\n  --_mono-switch-accent-preset: var(--success);\r\n}\r\n[mono-switch][mono-color=\"danger\"] {\r\n  --_mono-switch-accent-preset: var(--destructive);\r\n}\r\n[mono-switch][mono-color=\"warning\"] {\r\n  --_mono-switch-accent-preset: var(--warning);\r\n}\r\n[mono-switch][mono-color=\"info\"] {\r\n  --_mono-switch-accent-preset: var(--info);\r\n}\r\n[mono-switch][mono-color=\"teal\"] {\r\n  --_mono-switch-accent-preset: var(--teal);\r\n}\r\n[mono-switch][mono-color=\"purple\"] {\r\n  --_mono-switch-accent-preset: var(--purple);\r\n}\r\n[mono-switch][mono-color=\"neutral\"] {\r\n  --_mono-switch-accent-preset: var(--neutral);\r\n}\r\n[mono-switch][mono-color=\"dark\"] {\r\n  --_mono-switch-accent-preset: var(--dark);\r\n}\r\n\r\n/* =========================================\r\n   States on the root\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/switch.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — disabled:cursor-not-allowed disabled:opacity-50.\r\n   A BUSY switch is exempt: the input is disabled so a second click cannot race\r\n   the first, but it reads as \"working\", not \"unavailable\". */\r\n[mono-switch][mono-disabled]:not([mono-loading]),\r\n[mono-switch]:not([mono-loading]):has(> [mono-input]:disabled) {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-switch][mono-loading] {\r\n  cursor: progress;\r\n  pointer-events: none;\r\n}\r\n\r\n/* the native input is the accessible control; the track is its painted twin */\r\n:where([mono-switch]) [mono-input] {\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  /* the UA gives an <input> its own font; inside a shadow root nothing resets it,\r\n     so the hidden control ended up with a different computed font in the two\r\n     builds. It paints nothing either way — this just keeps them identical. */\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\n/* =========================================\r\n   The track\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/switch.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — inline-flex shrink-0 appearance-none items-center transition-all outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — rounded-full border border-transparent shadow-xs; not-checked:bg-input\r\n   (dark /80 via --mono-mode-surface-strong); checked:bg-primary;\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm'])\r\n   — h-[18.4px] w-[32px] (mono derives both from the control step) */\r\n:where([mono-switch]) > [mono-track] {\r\n  --_mono-switch-ring: 0 0 #0000;\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: var(--_mono-switch-track-w-px);\r\n  height: var(--_mono-switch-track-h-px);\r\n  border: var(--_mono-switch-border-width) solid var(--_mono-switch-border-color);\r\n  border-radius: var(--_mono-switch-radius);\r\n  background-color: var(--_mono-switch-track-off);\r\n  box-shadow: var(--_mono-switch-ring), var(--_mono-switch-shadow);\r\n  /* the track's own ink is the ACCENT, so a flavor that outlines the ON track\r\n     (luma, sera, rhea) says `--mono-switch-checked-border-color: currentColor`\r\n     with public knobs alone */\r\n  color: var(--_mono-switch-accent);\r\n  transition-property: box-shadow, background-color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 */\r\n:where([mono-switch]) > [mono-input]:focus-visible + [mono-track] {\r\n  border-color: var(--_mono-switch-ring-color);\r\n  --_mono-switch-ring: 0 0 0 var(--_mono-switch-ring-width) color-mix(in oklab, var(--_mono-switch-ring-color) var(--_mono-switch-ring-alpha), transparent);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50, /40 via the mode tokens) */\r\n[mono-switch][mono-invalid] > [mono-track],\r\n:where([mono-switch]) > [mono-input][aria-invalid=\"true\"] + [mono-track] {\r\n  border-color: var(--mono-mode-invalid-border);\r\n  --_mono-switch-ring: 0 0 0 var(--_mono-switch-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* checked:bg-primary — generalised per hue */\r\n[mono-switch][mono-checked] > [mono-track],\r\n:where([mono-switch]) > [mono-input]:checked + [mono-track] {\r\n  background-color: var(--_mono-switch-accent);\r\n  border-color: var(--mono-switch-checked-border-color, var(--_mono-switch-border-color));\r\n}\r\n\r\n/* =========================================\r\n   The thumb — upstream's `:before`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/switch.css .field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']\r\n   — before:pointer-events-none before:block before:content-[''] before:ring-0 before:transition-transform */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before\r\n   — bg-background rounded-full (dark: not-checked bg-foreground / checked\r\n   bg-primary-foreground, via --mono-mode-switch-thumb*) */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not([data-size='sm']):before\r\n   — size-4 (mono: that share of the track, so it tracks every step) */\r\n:where([mono-switch]) > [mono-track] > [mono-thumb] {\r\n  display: block;\r\n  flex: 0 0 auto;\r\n  pointer-events: none;\r\n  width: var(--_mono-switch-thumb-w-px);\r\n  height: var(--_mono-switch-thumb-h-px);\r\n  border-radius: var(--mono-switch-thumb-radius, var(--mono-radius-full));\r\n  background-color: var(--_mono-switch-thumb);\r\n  box-shadow: var(--_mono-switch-thumb-shadow);\r\n  /* `translate`, not `transform`: the loading pulse owns `transform`, and the\r\n     two are independent properties, so they no longer collide */\r\n  translate: 0;\r\n  transition-property: translate, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* :checked:before — translate-x-[calc(100%-2px)]: the thumb parks flush inside\r\n   the track's border at both ends (see --_mono-switch-travel) */\r\n[mono-switch][mono-checked] > [mono-track] > [mono-thumb],\r\n:where([mono-switch]) > [mono-input]:checked + [mono-track] > [mono-thumb] {\r\n  translate: var(--_mono-switch-travel-px);\r\n  background-color: var(--_mono-switch-thumb-checked);\r\n}\r\n\r\n[mono-switch][mono-checked] > [mono-track] > [mono-thumb]:dir(rtl),\r\n:where([mono-switch]) > [mono-input]:checked + [mono-track] > [mono-thumb]:dir(rtl) {\r\n  translate: calc(-1 * var(--_mono-switch-travel-px));\r\n}\r\n\r\n/* EXTENSION — the thumb pulses while a change is in flight */\r\n[mono-switch][mono-loading] > [mono-track] > [mono-thumb] {\r\n  animation: mono-switch-pulse 1s ease-in-out infinite;\r\n}\r\n\r\n@keyframes mono-switch-pulse {\r\n  0%,\r\n  100% {\r\n    transform: scale(1);\r\n  }\r\n  50% {\r\n    transform: scale(0.86);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-switch]) > [mono-track],\r\n  :where([mono-switch]) > [mono-track] > [mono-thumb] {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-switch][mono-loading] > [mono-track] > [mono-thumb] {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n:where([mono-switch]) > [mono-label] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — text-sm leading-snug font-medium;\r\n   `block` so the first line box is exactly font × line-height */\r\n:where([mono-switch]) [mono-label-text] {\r\n  display: block;\r\n  font-size: var(--_mono-switch-label-font);\r\n  line-height: var(--_mono-switch-label-line-height);\r\n  font-weight: var(--mono-switch-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--_mono-switch-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal; EXTENSION: one step\r\n   under the label per size */\r\n:where([mono-switch]) [mono-description] {\r\n  display: block;\r\n  margin-top: calc(var(--mono-spacing) * 0.5);\r\n  font-size: var(--_mono-switch-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-switch-description);\r\n}\r\n";
+
 //#endregion
 //#region src/components/switch/mono-switch.shadow.ts
-var SHADOW_EXTRA_CSS = "";
-var MonoSwitchShadow = class MonoSwitchShadow extends withShadowUtilityStyles(MonoSwitchCore(LitElement)) {
+const SHADOW_EXTRA_CSS = "";
+let MonoSwitchShadow = class MonoSwitchShadow extends withShadowUtilityStyles(MonoSwitchCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(switch_default, {
+		this.styles = [unsafeCSS(toShadowCss(switch_css_raw_default, {
 			host: "mono-switch",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -382,6 +385,7 @@ var MonoSwitchShadow = class MonoSwitchShadow extends withShadowUtilityStyles(Mo
 	}
 };
 MonoSwitchShadow = __decorate([customElement("mono-shadow-switch")], MonoSwitchShadow);
+
 //#endregion
 //#region src/components/switch/switch-utils.ts
 /**
@@ -424,5 +428,6 @@ function generateSwitchAttributes(disabled, loading, checked, label) {
 		"aria-label": label || void 0
 	};
 }
+
 //#endregion
-export { MonoSwitchCore, MonoSwitchShadow, generateSwitchAttributes, validateSwitchProps };
+export { MonoSwitchCore, MonoSwitchShadow, generateSwitchAttributes, validateSwitchProps };