@mono-lit/helper 0.0.5 → 0.0.7

package/dist/ui/shadow/dropdown.js

@@ -1,7 +1,7 @@
-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 { 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-BaE9gN3C.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 applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../../popup-portal-C8ttHDRX.js";
+import { n as applyPopupPlacement, r as computePopupPlacement, t as PopupPortalController } from "../../popup-portal-CINuVjNY.js";
 import { LitElement, html, isServer, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -147,6 +147,7 @@ const MonoDropdownCore = (superClass) => {
 			this._appliedHostClasses = /* @__PURE__ */ new Set();
 			this._viewportBound = false;
 			this._viewportFrame = 0;
+			this._documentBound = false;
 			this._handleTriggerClick = (event) => {
 				if (this.disabled || this.trigger !== "click") return;
 				event.stopPropagation();
@@ -217,15 +218,13 @@ const MonoDropdownCore = (superClass) => {
 			this._resolvedSide = this._sideFromPlacement(this.placement);
 			this._updateHostClasses();
 			if (isServer) return;
-			document.addEventListener("click", this._handleDocumentClick, true);
-			document.addEventListener("keydown", this._handleDocumentKeydown);
-			if (this.modelValue) this._bindViewport();
+			if (this.modelValue) {
+				this._bindViewport();
+				this._bindDocument();
+			}
 		}
 		disconnectedCallback() {
-			if (!isServer) {
-				document.removeEventListener("click", this._handleDocumentClick, true);
-				document.removeEventListener("keydown", this._handleDocumentKeydown);
-			}
+			this._unbindDocument();
 			this._unbindViewport();
 			this._detachTriggerListeners();
 			super.disconnectedCallback();
@@ -236,9 +235,30 @@ const MonoDropdownCore = (superClass) => {
 			this._syncTriggerListeners();
 			if (this.modelValue) {
 				this._bindViewport();
-				this._popup.reposition();
+				this._bindDocument();
+				if (changed.has("modelValue")) this._popup.reposition();
 				this._positionPanel();
-			} else this._unbindViewport();
+			} else {
+				this._unbindViewport();
+				this._unbindDocument();
+			}
+		}
+		/**
+		* Outside-click / Escape listeners, bound while OPEN only (select's rule). Both handlers
+		* bail when closed, so at rest they cost only dispatch — two `document` listeners per
+		* dropdown (one capture-phase) in the path of every click and keystroke on the page.
+		*/
+		_bindDocument() {
+			if (isServer || this._documentBound) return;
+			this._documentBound = true;
+			document.addEventListener("click", this._handleDocumentClick, true);
+			document.addEventListener("keydown", this._handleDocumentKeydown);
+		}
+		_unbindDocument() {
+			if (isServer || !this._documentBound) return;
+			this._documentBound = false;
+			document.removeEventListener("click", this._handleDocumentClick, true);
+			document.removeEventListener("keydown", this._handleDocumentKeydown);
 		}
 		_toBoolean(value) {
 			if (typeof value === "boolean") return value;

package/dist/ui/shadow/file-upload.js

@@ -1,7 +1,7 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as mdiGlyph, t as isIconifyClass } from "../../icon-BM9N-jOt.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";

package/dist/ui/shadow/filter.js

@@ -1,6 +1,5 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { _ as buildSizeStyle, a as __decorate, c as defineHybridPropAlias, f as customElement, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
-import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
 import { n as detachEventHandlers, t as applyProps } from "../../element-props-xvw0EB7H.js";
 import { c as splitMulti, d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "../../filter-odata-Bi27XUpQ.js";
 import { t as monoFilterBuilder } from "../../filter-builder-B6Y2mmbM.js";

package/dist/ui/shadow/input.js

@@ -1,12 +1,11 @@
-import { a as __decorate, 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 { _ as buildSizeStyle, a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as cssPart } from "../../css-class-B6Tc_MAx.js";
 import { a as parseFormat, c as stripFormat, i as normaliseValue, n as caretAfterFormat, o as resolveFormat, r as localeSeparators, s as significantFor, t as applyFormat } from "../../input-format-GrRCJBqV.js";
-import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
-import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-DEctHXKm.js";
-import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-B3Iu33rS.js";
-import { t as input_css_raw_default } from "../../input.css_raw-CQu2fAsU.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
+import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-U5UeTa2d.js";
+import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-Cx6SGrfP.js";
+import { t as input_css_raw_default } from "../../input.css_raw-Br-T8RWv.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";

package/dist/ui/shadow/menu.js

@@ -1,4 +1,4 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { t as isIconifyClass } from "../../icon-BM9N-jOt.js";
 import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../../color-CEYYtRX-.js";

package/dist/ui/shadow/modal.js

@@ -1,10 +1,10 @@
-import { a as __decorate, c as defineHybridPropAlias, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, c as defineHybridPropAlias, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as detachEventHandlers, t as applyProps } from "../../element-props-xvw0EB7H.js";
 import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../../breakpoints-DllybT82.js";
 import { i as registerPopupLayer, o as unregisterPopupLayer, r as refreshPopupStack, t as getOpenPopupLayers } from "../../popup-stack-C64WCuXq.js";
-import { i as pathOwnedBy } from "../../popup-portal-C8ttHDRX.js";
-import "../../mono-button.shadow-D9NdMsmH.js";
+import { i as pathOwnedBy } from "../../popup-portal-CINuVjNY.js";
+import "../../mono-button.shadow-DqZMpcqY.js";
 import { t as createNotifier } from "../../notifier-BIrqUzRh.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";

package/dist/ui/shadow/nav.js

@@ -1,4 +1,4 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.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";

package/dist/ui/shadow/otp.js

@@ -1,10 +1,9 @@
-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 { _ as buildSizeStyle, 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-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as cssPart } from "../../css-class-B6Tc_MAx.js";
-import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
-import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-DEctHXKm.js";
-import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-B3Iu33rS.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
+import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-U5UeTa2d.js";
+import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-Cx6SGrfP.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -756,7 +755,7 @@ const MonoOtpCore = (superClass) => {
 
 //#endregion
 //#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\otp\otp.css?raw.js
-var otp_css_raw_default = "/* =========================================================================\n   mono-otp — a one-time-code field: N single-character boxes that act as one\n   input. Same look as mono-input (Basecoat `.input-group`, vega) applied to\n   EACH box, and the same attribute contract:\n\n     <mono-otp length=\"6\" groups=\"3\" size=\"sm\" color=\"success\" label=\"Code\">\n     <div mono-otp mono-size=\"sm\" mono-color=\"success\">\n       <label mono-label>Code</label>\n       <div mono-field>\n         <div mono-otp-group><input mono-otp-cell>…</div>\n         <span mono-otp-separator>-</span>\n         <div mono-otp-group><input mono-otp-cell>…</div>\n       </div>\n       <div mono-message-wrap><div mono-message=\"helper\">…</div></div>\n     </div>\n\n   An absent attribute is the prop's default (md / primary / outlined /\n   default state). Parts:\n     [mono-field]            the ROW (no border — every box is its own field)\n     [mono-otp-group]        one run of boxes\n     [mono-otp-cell]         a box (a native <input>); [mono-filled] holds a char,\n                             [mono-active] has focus (the element sets both;\n                             hand-written markup gets :focus / :placeholder-shown)\n     [mono-otp-separator]    the text between groups\n     [mono-otp-affix]        prefix / suffix (=\"prefix\" | \"suffix\")\n     [mono-clear]            the clear button\n\n   Knobs — every one falls back to the matching mono-input knob, so a theme\n   flavor that restyles the input restyles the code field too:\n     --mono-otp-cell-size-<size> / --mono-otp-cell-width   box height / width\n     --mono-otp-font-<size>, --mono-otp-font-weight        character type\n     --mono-otp-gap, --mono-otp-group-gap                  spacing\n     --mono-otp-radius, --mono-otp-bg, --mono-otp-border-color, --mono-otp-shadow\n     --mono-otp-ring-color, --mono-otp-ring-width, --mono-otp-ring-alpha\n     --mono-otp-filled-bg, --mono-otp-separator-color, --mono-otp-placeholder\n     --mono-otp-<color> (primary … dark, valid, invalid)\n     --mono-otp-label-width / -label-side-gap              label-position left/right\n\n   Specificity contract as input.css: a part's resting rule is\n   `:where([mono-otp]) [mono-part]` (0,1,0) so `cssClass` utilities win;\n   state rules stay heavier.\n   ========================================================================= */\n\nmono-otp {\n  display: block;\n}\n\n[mono-otp] {\n  /* ── palette ── */\n  --_mono-otp-text: var(--mono-otp-color, var(--mono-input-color, var(--mono-input-text, var(--foreground))));\n  --_mono-otp-placeholder: var(--mono-otp-placeholder, var(--mono-input-placeholder, var(--muted-foreground)));\n  --_mono-otp-muted: var(--mono-otp-muted, var(--mono-input-muted, var(--muted-foreground)));\n  --_mono-otp-primary: var(--mono-otp-primary, var(--mono-input-primary, var(--ring)));\n  --_mono-otp-secondary: var(--mono-otp-secondary, var(--mono-input-secondary, var(--muted-foreground)));\n  --_mono-otp-success: var(--mono-otp-success, var(--mono-input-success, var(--success)));\n  --_mono-otp-danger: var(--mono-otp-danger, var(--mono-input-danger, var(--destructive)));\n  --_mono-otp-warning: var(--mono-otp-warning, var(--mono-input-warning, var(--warning)));\n  --_mono-otp-info: var(--mono-otp-info, var(--mono-input-info, var(--info)));\n  --_mono-otp-teal: var(--mono-otp-teal, var(--mono-input-teal, var(--teal)));\n  --_mono-otp-purple: var(--mono-otp-purple, var(--mono-input-purple, var(--purple)));\n  --_mono-otp-neutral: var(--mono-otp-neutral, var(--mono-input-neutral, var(--neutral)));\n  --_mono-otp-dark: var(--mono-otp-dark, var(--mono-input-dark, var(--dark)));\n  --_mono-otp-valid: var(--mono-otp-valid, var(--mono-input-valid, var(--success)));\n  --_mono-otp-invalid: var(--mono-otp-invalid, var(--mono-input-invalid, var(--destructive)));\n\n  /* ── the painted box — public knob → variant preset → input knob → token ── */\n  --_mono-otp-ring-color: var(--mono-otp-ring-color, var(--mono-otp-focus-color, var(--_mono-otp-ring-color-preset, var(--_mono-otp-primary))));\n  --_mono-otp-ring-width: var(--mono-otp-ring-width, var(--_mono-otp-ring-width-preset, var(--mono-input-ring-width, var(--mono-ring-width))));\n  --_mono-otp-ring-alpha: var(--mono-otp-ring-alpha, var(--mono-input-ring-alpha, var(--mono-ring-alpha)));\n  --_mono-otp-border-color: var(--mono-otp-border-color, var(--_mono-otp-border-color-preset, var(--mono-input-rest-border, var(--mono-input-border-color, var(--input)))));\n  --_mono-otp-bg: var(--mono-otp-bg, var(--_mono-otp-bg-preset, var(--mono-input-bg, var(--mono-input-surface, var(--mono-mode-surface)))));\n  --_mono-otp-shadow: var(--mono-otp-shadow, var(--_mono-otp-shadow-preset, 0 0 #0000));\n  --_mono-otp-radius: var(--mono-otp-radius, var(--_mono-otp-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n\n  /* ── md metrics on the unqualified root (hand-written markup = md) ── */\n  --_mono-otp-size: var(--mono-otp-cell-size-md, var(--mono-input-height-md, var(--mono-control-height-md)));\n  --_mono-otp-font-size: var(--mono-otp-font-md, var(--mono-text-base));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 6);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 3.5);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--mono-otp-label-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3)));\n  width: 100%;\n  font-family: inherit;\n  color: var(--_mono-otp-text);\n}\n\n[mono-otp],\n:where([mono-otp]) *,\n:where([mono-otp]) *::before,\n:where([mono-otp]) *::after {\n  box-sizing: border-box;\n}\n\n/* shadow build: unassigned slot wrappers carry `mono-empty` */\n:where([mono-otp]) :is([mono-label], [mono-otp-affix], [mono-message])[mono-empty] {\n  display: none;\n}\n\n/* =========================================\n   Sizes — box height IS the control token\n   ========================================= */\n\n[mono-otp][mono-size=\"xs\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-xs, var(--mono-input-height-xs, var(--mono-control-height-xs)));\n  --_mono-otp-font-size: var(--mono-otp-font-xs, var(--mono-text-xs));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 4);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 3);\n}\n[mono-otp][mono-size=\"sm\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-sm, var(--mono-input-height-sm, var(--mono-control-height-sm)));\n  --_mono-otp-font-size: var(--mono-otp-font-sm, var(--mono-text-sm));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 5);\n}\n[mono-otp][mono-size=\"lg\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-lg, var(--mono-input-height-lg, var(--mono-control-height-lg)));\n  --_mono-otp-font-size: var(--mono-otp-font-lg, var(--mono-text-lg));\n}\n[mono-otp][mono-size=\"xl\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-xl, var(--mono-input-height-xl, var(--mono-control-height-xl)));\n  --_mono-otp-font-size: var(--mono-otp-font-xl, var(--mono-text-xl));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 7);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n[mono-otp][mono-size=\"xxl\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-xxl, var(--mono-input-height-xxl, var(--mono-control-height-xxl)));\n  --_mono-otp-font-size: var(--mono-otp-font-xxl, calc(var(--mono-text-xl) * 1.25));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 8);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n/* =========================================\n   Variants — write `*-preset` slots only (same as input.css)\n   ========================================= */\n\n[mono-otp]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\n  --_mono-otp-bg-preset: var(--mono-input-outline-bg);\n  --_mono-otp-border-color-preset: var(--mono-input-outline-border-color);\n  --_mono-otp-side-border-color-preset: var(--mono-input-outline-side-border-color);\n  --_mono-otp-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\n  --_mono-otp-ring-width-preset: var(--mono-input-outline-ring-width);\n  --_mono-otp-radius-preset: var(--mono-input-outline-radius);\n}\n\n[mono-otp][mono-variant=\"filled\"] {\n  --_mono-otp-bg-preset: var(--mono-otp-filled-bg, var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent)));\n  --_mono-otp-border-color-preset: transparent;\n  --_mono-otp-shadow-preset: 0 0 #0000;\n}\n\n[mono-otp][mono-variant=\"underlined\"] {\n  --_mono-otp-bg-preset: transparent;\n  --_mono-otp-side-border-color-preset: transparent;\n  --_mono-otp-shadow-preset: 0 0 #0000;\n  --_mono-otp-ring-width-preset: 0px;\n  --_mono-otp-radius-preset: 0;\n}\n\n/* =========================================\n   Colours — the focus colour\n   ========================================= */\n\n[mono-otp]:is(:not([mono-color]), [mono-color=\"primary\"]) { --_mono-otp-ring-color-preset: var(--_mono-otp-primary); }\n[mono-otp][mono-color=\"secondary\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-secondary); }\n[mono-otp][mono-color=\"success\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-success); }\n[mono-otp][mono-color=\"danger\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-danger); }\n[mono-otp][mono-color=\"warning\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-warning); }\n[mono-otp][mono-color=\"info\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-info); }\n[mono-otp][mono-color=\"teal\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-teal); }\n[mono-otp][mono-color=\"purple\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-purple); }\n[mono-otp][mono-color=\"neutral\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-neutral); }\n[mono-otp][mono-color=\"dark\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-dark); }\n\n/* =========================================\n   Label (same rules as input's)\n   ========================================= */\n\n:where([mono-otp]) > [mono-label] {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  gap: var(--mono-otp-label-gap, var(--mono-input-label-gap, calc(var(--mono-spacing) * 2)));\n  font-size: var(--mono-otp-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-otp-label-line-height, var(--mono-input-label-line-height, 1));\n  font-weight: var(--mono-otp-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\n  text-transform: var(--mono-otp-label-text-transform, var(--mono-input-label-text-transform, none));\n  letter-spacing: var(--mono-otp-label-letter-spacing, var(--mono-input-label-letter-spacing, normal));\n  color: var(--_mono-otp-text);\n  user-select: none;\n}\n\n[mono-otp][mono-disabled] > [mono-label] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n[mono-otp][mono-validation-state=\"invalid\"] > [mono-label] {\n  color: var(--_mono-otp-invalid);\n}\n\n:where([mono-otp]) [mono-required-mark] {\n  color: var(--_mono-otp-danger);\n}\n\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip] {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mono-otp-label-tooltip-size, var(--mono-input-label-tooltip-size, 1.1em));\n  color: var(--mono-otp-label-tooltip-color, var(--mono-input-label-tooltip-color, currentColor));\n  opacity: var(--mono-otp-label-tooltip-opacity, var(--mono-input-label-tooltip-opacity, 0.6));\n  border-radius: 9999px;\n  cursor: help;\n  pointer-events: auto;\n  outline: none;\n  transition: opacity 150ms ease;\n}\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\n  opacity: 1;\n}\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip]:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\n  width: 1em;\n  height: 1em;\n}\n\n/* =========================================\n   The row, groups and separators\n   ========================================= */\n\n:where([mono-otp]) > [mono-field] {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mono-otp-group-gap, calc(var(--mono-spacing) * 2));\n  min-width: 0;\n}\n\n:where([mono-otp]) [mono-otp-group] {\n  display: flex;\n  align-items: center;\n  gap: var(--mono-otp-gap, calc(var(--mono-spacing) * 2));\n}\n\n:where([mono-otp]) [mono-otp-separator] {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_mono-otp-font-size);\n  line-height: 1;\n  color: var(--mono-otp-separator-color, var(--_mono-otp-muted));\n  user-select: none;\n}\n\n/* =========================================\n   The box — input.css's [mono-field], per character\n   ========================================= */\n\n:where([mono-otp]) [mono-otp-cell] {\n  --_mono-otp-bc: var(--_mono-otp-border-color);\n  --_mono-otp-side-bc: var(--mono-otp-side-border-color, var(--_mono-otp-side-border-color-preset, var(--_mono-otp-bc)));\n  --_mono-otp-ring: 0 0 #0000;\n\n  display: block;\n  flex: none;\n  width: var(--mono-otp-cell-width, var(--_mono-otp-size));\n  height: var(--_mono-otp-size);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  outline: none;\n  border: var(--mono-border-width) solid var(--_mono-otp-bc);\n  border-top-color: var(--_mono-otp-side-bc);\n  border-inline-color: var(--_mono-otp-side-bc);\n  border-radius: var(--_mono-otp-radius);\n  background: var(--_mono-otp-bg);\n  box-shadow: var(--_mono-otp-ring), var(--_mono-otp-shadow);\n  color: var(--_mono-otp-text);\n  caret-color: var(--_mono-otp-ring-color);\n  font-family: inherit;\n  font-size: var(--_mono-otp-font-size);\n  font-weight: var(--mono-otp-font-weight, var(--mono-font-weight-semibold));\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  text-align: center;\n  transition-property: color, box-shadow, border-color, background-color;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  &::placeholder {\n    color: var(--_mono-otp-placeholder);\n    font-weight: var(--mono-font-weight-normal);\n  }\n\n  /* The box is selected on focus so a keystroke replaces it; the ring already\n     marks the active box, so the selection highlight would only be noise. */\n  &::selection {\n    background: transparent;\n    color: inherit;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none !important;\n  }\n\n  /* focus:border-ring focus:ring-3 focus:ring-ring/50 — the box with the caret */\n  &:focus,\n  &[mono-active] {\n    --_mono-otp-bc: var(--_mono-otp-ring-color);\n    --_mono-otp-side-bc: var(--mono-otp-side-border-color, var(--_mono-otp-side-border-color-preset, var(--_mono-otp-ring-color)));\n    --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-ring-color) var(--_mono-otp-ring-alpha), transparent);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    cursor: default;\n  }\n}\n\n/* ── validation states (same tokens as input's box) ── */\n[mono-otp][mono-validation-state=\"invalid\"] [mono-otp-cell],\n:where([mono-otp]) [mono-otp-cell][aria-invalid=\"true\"] {\n  --_mono-otp-bc: var(--mono-mode-invalid-border);\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) var(--mono-mode-invalid-ring);\n}\n[mono-otp][mono-validation-state=\"valid\"] [mono-otp-cell] {\n  --_mono-otp-bc: color-mix(in oklab, var(--_mono-otp-valid) var(--mono-mode-state-border-alpha), transparent);\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-valid) var(--mono-mode-state-ring-alpha), transparent);\n}\n[mono-otp][mono-validation-state=\"warning\"] [mono-otp-cell] {\n  --_mono-otp-bc: color-mix(in oklab, var(--_mono-otp-warning) var(--mono-mode-state-border-alpha), transparent);\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-warning) var(--mono-mode-state-ring-alpha), transparent);\n}\n\n/* ── readonly / disabled ── */\n[mono-otp][mono-readonly] [mono-otp-cell] {\n  background: var(--mono-otp-readonly-bg, var(--mono-input-readonly-bg, var(--muted)));\n}\n\n[mono-otp][mono-disabled] > [mono-field],\n:where([mono-otp]) > [mono-field]:has([mono-otp-cell]:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n[mono-otp][mono-disabled] [mono-otp-cell] {\n  background: var(--mono-otp-disabled-bg, var(--mono-input-disabled-bg, var(--_mono-otp-bg)));\n}\n\n/* =========================================\n   Prefix / suffix / clear\n   ========================================= */\n\n:where([mono-otp]) [mono-otp-affix] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--mono-spacing) * 2);\n  font-size: var(--mono-text-sm);\n  font-weight: var(--mono-font-weight-medium);\n  color: var(--_mono-otp-muted);\n  user-select: none;\n}\n\n:where([mono-otp]) [mono-otp-affix] > [data-mono-slot] {\n  display: inline-flex;\n  align-items: center;\n  gap: inherit;\n}\n\n:where([mono-otp]) [mono-otp-affix] :is(svg, .mono-icon, [mono-icon]),\n:where([mono-otp]) [mono-otp-affix] ::slotted(svg),\n:where([mono-otp]) [mono-otp-affix] ::slotted(.mono-icon),\n:where([mono-otp]) [mono-otp-affix] ::slotted([mono-icon]) {\n  display: block;\n  width: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\n  height: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n:where([mono-otp]) [mono-clear] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--_mono-otp-clear);\n  height: var(--_mono-otp-clear);\n  padding: 0;\n  margin: 0;\n  border: 0;\n  border-radius: var(--mono-otp-clear-radius, var(--mono-input-clear-radius, calc(var(--radius) - 5px)));\n  background: transparent;\n  box-shadow: none;\n  color: var(--_mono-otp-muted);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  outline-style: none;\n  transition-property: color, background-color, box-shadow;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-ring-color) var(--_mono-otp-ring-alpha), transparent);\n  }\n}\n\n@media (hover: hover) {\n  :where([mono-otp]) [mono-clear]:hover {\n    background: var(--mono-mode-ghost-hover);\n    color: var(--_mono-otp-text);\n  }\n}\n\n:where([mono-otp]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\n  display: block;\n  width: var(--_mono-otp-clear-glyph);\n  height: var(--_mono-otp-clear-glyph);\n  pointer-events: none;\n}\n\n/* =========================================\n   Message\n   ========================================= */\n\n:where([mono-otp]) > [mono-message-wrap] {\n  display: block;\n}\n:where([mono-otp]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\n  display: none;\n}\n\n:where([mono-otp]) [mono-message] {\n  font-size: var(--mono-otp-message-font-size, var(--mono-input-message-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-otp-message-line-height, var(--mono-input-message-line-height, var(--mono-leading-normal)));\n  font-weight: var(--mono-font-weight-normal);\n  text-align: start;\n  color: var(--_mono-otp-muted);\n}\n:where([mono-otp]) [mono-message=\"invalid\"] { color: var(--_mono-otp-invalid); }\n:where([mono-otp]) [mono-message=\"valid\"] { color: var(--_mono-otp-valid); }\n:where([mono-otp]) [mono-message=\"warning\"] { color: var(--_mono-otp-warning); }\n\n/* hidden form value */\n:where([mono-otp]) [mono-otp-hidden] {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where([mono-otp]) :is([mono-otp-cell], [mono-clear]) {\n    transition: none;\n  }\n}\n\n/* =========================================\n   label-position — left / right (form/label-position.css).\n   `notched` renders as top: there is no single box to notch.\n   ========================================= */\n\n[mono-otp][mono-label-position] {\n  --_mono-lp-width: var(--mono-otp-label-width, var(--mono-input-label-width, auto));\n  --_mono-lp-gap: var(--mono-otp-label-side-gap, var(--mono-input-label-side-gap, calc(var(--mono-spacing) * 3)));\n  --_mono-lp-height: var(--_mono-otp-size);\n  --_mono-lp-box-min: var(--_mono-otp-size);\n  --_mono-lp-padding-x: 0px;\n  --_mono-lp-padding-y: 0px;\n  --_mono-lp-font: var(--mono-text-xs);\n  --_mono-lp-notch-bg: var(--background);\n  --_mono-lp-field-bg: var(--_mono-otp-bg);\n}\n";
+var otp_css_raw_default = "/* =========================================================================\r\n   mono-otp — a one-time-code field: N single-character boxes that act as one\r\n   input. Same look as mono-input (Basecoat `.input-group`, vega) applied to\r\n   EACH box, and the same attribute contract:\r\n\r\n     <mono-otp length=\"6\" groups=\"3\" size=\"sm\" color=\"success\" label=\"Code\">\r\n     <div mono-otp mono-size=\"sm\" mono-color=\"success\">\r\n       <label mono-label>Code</label>\r\n       <div mono-field>\r\n         <div mono-otp-group><input mono-otp-cell>…</div>\r\n         <span mono-otp-separator>-</span>\r\n         <div mono-otp-group><input mono-otp-cell>…</div>\r\n       </div>\r\n       <div mono-message-wrap><div mono-message=\"helper\">…</div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (md / primary / outlined /\r\n   default state). Parts:\r\n     [mono-field]            the ROW (no border — every box is its own field)\r\n     [mono-otp-group]        one run of boxes\r\n     [mono-otp-cell]         a box (a native <input>); [mono-filled] holds a char,\r\n                             [mono-active] has focus (the element sets both;\r\n                             hand-written markup gets :focus / :placeholder-shown)\r\n     [mono-otp-separator]    the text between groups\r\n     [mono-otp-affix]        prefix / suffix (=\"prefix\" | \"suffix\")\r\n     [mono-clear]            the clear button\r\n\r\n   Knobs — every one falls back to the matching mono-input knob, so a theme\r\n   flavor that restyles the input restyles the code field too:\r\n     --mono-otp-cell-size-<size> / --mono-otp-cell-width   box height / width\r\n     --mono-otp-font-<size>, --mono-otp-font-weight        character type\r\n     --mono-otp-gap, --mono-otp-group-gap                  spacing\r\n     --mono-otp-radius, --mono-otp-bg, --mono-otp-border-color, --mono-otp-shadow\r\n     --mono-otp-ring-color, --mono-otp-ring-width, --mono-otp-ring-alpha\r\n     --mono-otp-filled-bg, --mono-otp-separator-color, --mono-otp-placeholder\r\n     --mono-otp-<color> (primary … dark, valid, invalid)\r\n     --mono-otp-label-width / -label-side-gap              label-position left/right\r\n\r\n   Specificity contract as input.css: a part's resting rule is\r\n   `:where([mono-otp]) [mono-part]` (0,1,0) so `cssClass` utilities win;\r\n   state rules stay heavier.\r\n   ========================================================================= */\r\n\r\nmono-otp {\r\n  display: block;\r\n}\r\n\r\n[mono-otp] {\r\n  /* ── palette ── */\r\n  --_mono-otp-text: var(--mono-otp-color, var(--mono-input-color, var(--mono-input-text, var(--foreground))));\r\n  --_mono-otp-placeholder: var(--mono-otp-placeholder, var(--mono-input-placeholder, var(--muted-foreground)));\r\n  --_mono-otp-muted: var(--mono-otp-muted, var(--mono-input-muted, var(--muted-foreground)));\r\n  --_mono-otp-primary: var(--mono-otp-primary, var(--mono-input-primary, var(--ring)));\r\n  --_mono-otp-secondary: var(--mono-otp-secondary, var(--mono-input-secondary, var(--muted-foreground)));\r\n  --_mono-otp-success: var(--mono-otp-success, var(--mono-input-success, var(--success)));\r\n  --_mono-otp-danger: var(--mono-otp-danger, var(--mono-input-danger, var(--destructive)));\r\n  --_mono-otp-warning: var(--mono-otp-warning, var(--mono-input-warning, var(--warning)));\r\n  --_mono-otp-info: var(--mono-otp-info, var(--mono-input-info, var(--info)));\r\n  --_mono-otp-teal: var(--mono-otp-teal, var(--mono-input-teal, var(--teal)));\r\n  --_mono-otp-purple: var(--mono-otp-purple, var(--mono-input-purple, var(--purple)));\r\n  --_mono-otp-neutral: var(--mono-otp-neutral, var(--mono-input-neutral, var(--neutral)));\r\n  --_mono-otp-dark: var(--mono-otp-dark, var(--mono-input-dark, var(--dark)));\r\n  --_mono-otp-valid: var(--mono-otp-valid, var(--mono-input-valid, var(--success)));\r\n  --_mono-otp-invalid: var(--mono-otp-invalid, var(--mono-input-invalid, var(--destructive)));\r\n\r\n  /* ── the painted box — public knob → variant preset → input knob → token ── */\r\n  --_mono-otp-ring-color: var(--mono-otp-ring-color, var(--mono-otp-focus-color, var(--_mono-otp-ring-color-preset, var(--_mono-otp-primary))));\r\n  --_mono-otp-ring-width: var(--mono-otp-ring-width, var(--_mono-otp-ring-width-preset, var(--mono-input-ring-width, var(--mono-ring-width))));\r\n  --_mono-otp-ring-alpha: var(--mono-otp-ring-alpha, var(--mono-input-ring-alpha, var(--mono-ring-alpha)));\r\n  --_mono-otp-border-color: var(--mono-otp-border-color, var(--_mono-otp-border-color-preset, var(--mono-input-rest-border, var(--mono-input-border-color, var(--input)))));\r\n  --_mono-otp-bg: var(--mono-otp-bg, var(--_mono-otp-bg-preset, var(--mono-input-bg, var(--mono-input-surface, var(--mono-mode-surface)))));\r\n  --_mono-otp-shadow: var(--mono-otp-shadow, var(--_mono-otp-shadow-preset, 0 0 #0000));\r\n  --_mono-otp-radius: var(--mono-otp-radius, var(--_mono-otp-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n\r\n  /* ── md metrics on the unqualified root (hand-written markup = md) ── */\r\n  --_mono-otp-size: var(--mono-otp-cell-size-md, var(--mono-input-height-md, var(--mono-control-height-md)));\r\n  --_mono-otp-font-size: var(--mono-otp-font-md, var(--mono-text-base));\r\n  --_mono-otp-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-otp-label-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3)));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-otp-text);\r\n}\r\n\r\n[mono-otp],\r\n:where([mono-otp]) *,\r\n:where([mono-otp]) *::before,\r\n:where([mono-otp]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* shadow build: unassigned slot wrappers carry `mono-empty` */\r\n:where([mono-otp]) :is([mono-label], [mono-otp-affix], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — box height IS the control token\r\n   ========================================= */\r\n\r\n[mono-otp][mono-size=\"xs\"] {\r\n  --_mono-otp-size: var(--mono-otp-cell-size-xs, var(--mono-input-height-xs, var(--mono-control-height-xs)));\r\n  --_mono-otp-font-size: var(--mono-otp-font-xs, var(--mono-text-xs));\r\n  --_mono-otp-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n[mono-otp][mono-size=\"sm\"] {\r\n  --_mono-otp-size: var(--mono-otp-cell-size-sm, var(--mono-input-height-sm, var(--mono-control-height-sm)));\r\n  --_mono-otp-font-size: var(--mono-otp-font-sm, var(--mono-text-sm));\r\n  --_mono-otp-clear: calc(var(--mono-spacing) * 5);\r\n}\r\n[mono-otp][mono-size=\"lg\"] {\r\n  --_mono-otp-size: var(--mono-otp-cell-size-lg, var(--mono-input-height-lg, var(--mono-control-height-lg)));\r\n  --_mono-otp-font-size: var(--mono-otp-font-lg, var(--mono-text-lg));\r\n}\r\n[mono-otp][mono-size=\"xl\"] {\r\n  --_mono-otp-size: var(--mono-otp-cell-size-xl, var(--mono-input-height-xl, var(--mono-control-height-xl)));\r\n  --_mono-otp-font-size: var(--mono-otp-font-xl, var(--mono-text-xl));\r\n  --_mono-otp-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n[mono-otp][mono-size=\"xxl\"] {\r\n  --_mono-otp-size: var(--mono-otp-cell-size-xxl, var(--mono-input-height-xxl, var(--mono-control-height-xxl)));\r\n  --_mono-otp-font-size: var(--mono-otp-font-xxl, calc(var(--mono-text-xl) * 1.25));\r\n  --_mono-otp-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — write `*-preset` slots only (same as input.css)\r\n   ========================================= */\r\n\r\n[mono-otp]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-otp-bg-preset: var(--mono-input-outline-bg);\r\n  --_mono-otp-border-color-preset: var(--mono-input-outline-border-color);\r\n  --_mono-otp-side-border-color-preset: var(--mono-input-outline-side-border-color);\r\n  --_mono-otp-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-otp-ring-width-preset: var(--mono-input-outline-ring-width);\r\n  --_mono-otp-radius-preset: var(--mono-input-outline-radius);\r\n}\r\n\r\n[mono-otp][mono-variant=\"filled\"] {\r\n  --_mono-otp-bg-preset: var(--mono-otp-filled-bg, var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent)));\r\n  --_mono-otp-border-color-preset: transparent;\r\n  --_mono-otp-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n[mono-otp][mono-variant=\"underlined\"] {\r\n  --_mono-otp-bg-preset: transparent;\r\n  --_mono-otp-side-border-color-preset: transparent;\r\n  --_mono-otp-shadow-preset: 0 0 #0000;\r\n  --_mono-otp-ring-width-preset: 0px;\r\n  --_mono-otp-radius-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the focus colour\r\n   ========================================= */\r\n\r\n[mono-otp]:is(:not([mono-color]), [mono-color=\"primary\"]) { --_mono-otp-ring-color-preset: var(--_mono-otp-primary); }\r\n[mono-otp][mono-color=\"secondary\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-secondary); }\r\n[mono-otp][mono-color=\"success\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-success); }\r\n[mono-otp][mono-color=\"danger\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-danger); }\r\n[mono-otp][mono-color=\"warning\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-warning); }\r\n[mono-otp][mono-color=\"info\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-info); }\r\n[mono-otp][mono-color=\"teal\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-teal); }\r\n[mono-otp][mono-color=\"purple\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-purple); }\r\n[mono-otp][mono-color=\"neutral\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-neutral); }\r\n[mono-otp][mono-color=\"dark\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-dark); }\r\n\r\n/* =========================================\r\n   Label (same rules as input's)\r\n   ========================================= */\r\n\r\n:where([mono-otp]) > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-otp-label-gap, var(--mono-input-label-gap, calc(var(--mono-spacing) * 2)));\r\n  font-size: var(--mono-otp-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-otp-label-line-height, var(--mono-input-label-line-height, 1));\r\n  font-weight: var(--mono-otp-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\r\n  text-transform: var(--mono-otp-label-text-transform, var(--mono-input-label-text-transform, none));\r\n  letter-spacing: var(--mono-otp-label-letter-spacing, var(--mono-input-label-letter-spacing, normal));\r\n  color: var(--_mono-otp-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-otp][mono-disabled] > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-otp][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-otp-invalid);\r\n}\r\n\r\n:where([mono-otp]) [mono-required-mark] {\r\n  color: var(--_mono-otp-danger);\r\n}\r\n\r\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-otp-label-tooltip-size, var(--mono-input-label-tooltip-size, 1.1em));\r\n  color: var(--mono-otp-label-tooltip-color, var(--mono-input-label-tooltip-color, currentColor));\r\n  opacity: var(--mono-otp-label-tooltip-opacity, var(--mono-input-label-tooltip-opacity, 0.6));\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n}\r\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n/* =========================================\r\n   The row, groups and separators\r\n   ========================================= */\r\n\r\n:where([mono-otp]) > [mono-field] {\r\n  position: relative;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--mono-otp-group-gap, calc(var(--mono-spacing) * 2));\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-otp]) [mono-otp-group] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-otp-gap, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n:where([mono-otp]) [mono-otp-separator] {\r\n  flex: none;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--_mono-otp-font-size);\r\n  line-height: 1;\r\n  color: var(--mono-otp-separator-color, var(--_mono-otp-muted));\r\n  user-select: none;\r\n}\r\n\r\n/* =========================================\r\n   The box — input.css's [mono-field], per character\r\n   ========================================= */\r\n\r\n:where([mono-otp]) [mono-otp-cell] {\r\n  --_mono-otp-bc: var(--_mono-otp-border-color);\r\n  --_mono-otp-side-bc: var(--mono-otp-side-border-color, var(--_mono-otp-side-border-color-preset, var(--_mono-otp-bc)));\r\n  --_mono-otp-ring: 0 0 #0000;\r\n\r\n  display: block;\r\n  flex: none;\r\n  width: var(--mono-otp-cell-width, var(--_mono-otp-size));\r\n  height: var(--_mono-otp-size);\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  appearance: none;\r\n  outline: none;\r\n  border: var(--mono-border-width) solid var(--_mono-otp-bc);\r\n  border-top-color: var(--_mono-otp-side-bc);\r\n  border-inline-color: var(--_mono-otp-side-bc);\r\n  border-radius: var(--_mono-otp-radius);\r\n  background: var(--_mono-otp-bg);\r\n  box-shadow: var(--_mono-otp-ring), var(--_mono-otp-shadow);\r\n  color: var(--_mono-otp-text);\r\n  caret-color: var(--_mono-otp-ring-color);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-otp-font-size);\r\n  font-weight: var(--mono-otp-font-weight, var(--mono-font-weight-semibold));\r\n  font-variant-numeric: tabular-nums;\r\n  line-height: 1;\r\n  text-align: center;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-otp-placeholder);\r\n    font-weight: var(--mono-font-weight-normal);\r\n  }\r\n\r\n  /* The box is selected on focus so a keystroke replaces it; the ring already\r\n     marks the active box, so the selection highlight would only be noise. */\r\n  &::selection {\r\n    background: transparent;\r\n    color: inherit;\r\n  }\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  /* focus:border-ring focus:ring-3 focus:ring-ring/50 — the box with the caret */\r\n  &:focus,\r\n  &[mono-active] {\r\n    --_mono-otp-bc: var(--_mono-otp-ring-color);\r\n    --_mono-otp-side-bc: var(--mono-otp-side-border-color, var(--_mono-otp-side-border-color-preset, var(--_mono-otp-ring-color)));\r\n    --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-ring-color) var(--_mono-otp-ring-alpha), transparent);\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: default;\r\n  }\r\n}\r\n\r\n/* ── validation states (same tokens as input's box) ── */\r\n[mono-otp][mono-validation-state=\"invalid\"] [mono-otp-cell],\r\n:where([mono-otp]) [mono-otp-cell][aria-invalid=\"true\"] {\r\n  --_mono-otp-bc: var(--mono-mode-invalid-border);\r\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n[mono-otp][mono-validation-state=\"valid\"] [mono-otp-cell] {\r\n  --_mono-otp-bc: color-mix(in oklab, var(--_mono-otp-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-otp][mono-validation-state=\"warning\"] [mono-otp-cell] {\r\n  --_mono-otp-bc: color-mix(in oklab, var(--_mono-otp-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* ── readonly / disabled ── */\r\n[mono-otp][mono-readonly] [mono-otp-cell] {\r\n  background: var(--mono-otp-readonly-bg, var(--mono-input-readonly-bg, var(--muted)));\r\n}\r\n\r\n[mono-otp][mono-disabled] > [mono-field],\r\n:where([mono-otp]) > [mono-field]:has([mono-otp-cell]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n[mono-otp][mono-disabled] [mono-otp-cell] {\r\n  background: var(--mono-otp-disabled-bg, var(--mono-input-disabled-bg, var(--_mono-otp-bg)));\r\n}\r\n\r\n/* =========================================\r\n   Prefix / suffix / clear\r\n   ========================================= */\r\n\r\n:where([mono-otp]) [mono-otp-affix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  color: var(--_mono-otp-muted);\r\n  user-select: none;\r\n}\r\n\r\n:where([mono-otp]) [mono-otp-affix] > [data-mono-slot] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n}\r\n\r\n:where([mono-otp]) [mono-otp-affix] :is(svg, .mono-icon, [mono-icon]),\r\n:where([mono-otp]) [mono-otp-affix] ::slotted(svg),\r\n:where([mono-otp]) [mono-otp-affix] ::slotted(.mono-icon),\r\n:where([mono-otp]) [mono-otp-affix] ::slotted([mono-icon]) {\r\n  display: block;\r\n  width: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n  height: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-otp]) [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-otp-clear);\r\n  height: var(--_mono-otp-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-otp-clear-radius, var(--mono-input-clear-radius, calc(var(--radius) - 5px)));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-otp-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-ring-color) var(--_mono-otp-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-otp]) [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-otp-text);\r\n  }\r\n}\r\n\r\n:where([mono-otp]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-otp-clear-glyph);\r\n  height: var(--_mono-otp-clear-glyph);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message\r\n   ========================================= */\r\n\r\n:where([mono-otp]) > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n:where([mono-otp]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n:where([mono-otp]) [mono-message] {\r\n  font-size: var(--mono-otp-message-font-size, var(--mono-input-message-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-otp-message-line-height, var(--mono-input-message-line-height, var(--mono-leading-normal)));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-otp-muted);\r\n}\r\n:where([mono-otp]) [mono-message=\"invalid\"] { color: var(--_mono-otp-invalid); }\r\n:where([mono-otp]) [mono-message=\"valid\"] { color: var(--_mono-otp-valid); }\r\n:where([mono-otp]) [mono-message=\"warning\"] { color: var(--_mono-otp-warning); }\r\n\r\n/* hidden form value */\r\n:where([mono-otp]) [mono-otp-hidden] {\r\n  display: none;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-otp]) :is([mono-otp-cell], [mono-clear]) {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   label-position — left / right (form/label-position.css).\r\n   `notched` renders as top: there is no single box to notch.\r\n   ========================================= */\r\n\r\n[mono-otp][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-otp-label-width, var(--mono-input-label-width, auto));\r\n  --_mono-lp-gap: var(--mono-otp-label-side-gap, var(--mono-input-label-side-gap, calc(var(--mono-spacing) * 3)));\r\n  --_mono-lp-height: var(--_mono-otp-size);\r\n  --_mono-lp-box-min: var(--_mono-otp-size);\r\n  --_mono-lp-padding-x: 0px;\r\n  --_mono-lp-padding-y: 0px;\r\n  --_mono-lp-font: var(--mono-text-xs);\r\n  --_mono-lp-notch-bg: var(--background);\r\n  --_mono-lp-field-bg: var(--_mono-otp-bg);\r\n}\r\n";
 
 //#endregion
 //#region src/components/otp/mono-otp.shadow.ts

package/dist/ui/shadow/radio.js

@@ -1,6 +1,6 @@
-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 { 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-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";

package/dist/ui/shadow/rich-text-editor.js

@@ -1,7 +1,6 @@
-import { a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { _ as buildSizeStyle, a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, v as toCssSize } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
-import { n as toCssSize, t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";

package/dist/ui/shadow/select.js

@@ -1,15 +1,14 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { _ as buildSizeStyle, a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, v as toCssSize } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
-import { n as toCssSize, t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
-import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
 import { c as spinnerIcon, s as refreshIcon } from "../../field-icons-t8rXRCKs.js";
-import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-DEctHXKm.js";
-import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-B3Iu33rS.js";
-import { t as PopupPortalController } from "../../popup-portal-C8ttHDRX.js";
+import { n as FieldTooltipController, t as field_tooltip_css_raw_default } from "../../field-tooltip.css_raw-U5UeTa2d.js";
+import { n as label_position_css_raw_default, r as FieldValidationController, t as field_validation_css_raw_default } from "../../field-validation.css_raw-Cx6SGrfP.js";
+import { t as PopupPortalController } from "../../popup-portal-CINuVjNY.js";
 import { a as rateLimitHasChanged } from "../../rate-limit-e9Jlpl5l.js";
 import { t as getFieldValue } from "../../field-path-BabiMrrA.js";
 import { a as errorTitle, d as MonoSourceSearch, i as errorText, m as searchRowPredicate, n as describeError, p as resolveSearchFields } from "../../normalize-error-BmLbgANw.js";
-import { t as LateSlotWatcher } from "../../light-slots-4ZCjOcBg.js";
+import { t as LateSlotWatcher } from "../../light-slots-_no0r2Z-.js";
 import { n as unwrapReactive } from "../../reactive-Dtd-esHO.js";
 import { t as DataSourceController } from "../../data-source-controller-C6C4ej_M.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
@@ -981,6 +980,10 @@ const MonoSelectCore = (superClass) => {
 			this._cursorPending = false;
 			this.requestUpdate();
 			if (this._searchTimer) clearTimeout(this._searchTimer);
+			if (!this._serverSearch()) {
+				this._searchTimer = void 0;
+				return;
+			}
 			const wait = Math.max(0, Number(this.searchDebounce) || 0);
 			this._searchTimer = setTimeout(() => void this._applySearch(this._query), wait);
 		}
@@ -1426,6 +1429,7 @@ const MonoSelectCore = (superClass) => {
 		* back fresh row objects under the same keys, and a consumer reading `e.item.Nama` must see them.
 		*/
 		_syncListEntries() {
+			if (!this.dataForm || !this.keyForm) return;
 			const next = this._listEntries();
 			const prev = this._publishedEntries;
 			let same = prev.length === next.length;

package/dist/ui/shadow/sidebar.js

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