@mono-lit/helper 0.0.3 → 0.0.5

package/dist/ui/shadow/textarea.js

@@ -2,6 +2,8 @@ import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
 import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { 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 { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -34,12 +36,24 @@ const MonoTextareaCore = (superClass) => {
 			this.size = "md";
 			this.color = "primary";
 			this.variant = "outlined";
+			this.labelPosition = "top";
+			this.validationPosition = "bottom";
 			this.modelValue = "";
 			this.value = "";
 			this.name = "";
 			this.placeholder = "";
 			this.label = "";
 			this.helperText = "";
+			this.tooltip = null;
+			this._tooltip = new FieldTooltipController(this, () => this.tooltip);
+			this._validation = new FieldValidationController(this, () => ({
+				position: this.validationPosition,
+				...this._validationNotice ?? {
+					state: void 0,
+					text: void 0
+				},
+				suppressed: false
+			}), () => this.renderRoot?.querySelector?.("[mono-textarea] > textarea[mono-native]"));
 			this.validationState = "default";
 			this.validationMessage = "";
 			this.errorMessage = "";
@@ -58,6 +72,8 @@ const MonoTextareaCore = (superClass) => {
 			this._messageId = `${this._textareaId}-message`;
 			this._lastAutoResizeWidth = -1;
 			defineHybridPropAliases(this, [
+				"labelPosition",
+				"validationPosition",
 				"modelValue",
 				"helperText",
 				"validationState",
@@ -219,6 +235,32 @@ const MonoTextareaCore = (superClass) => {
 			}
 			if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
 		}
+		/** The validation message and its state — the same precedence the message row uses. */
+		get _validationNotice() {
+			if (this.validationMessage) return {
+				state: this._resolvedValidationState,
+				text: this.validationMessage
+			};
+			if (this.errorMessage) return {
+				state: "invalid",
+				text: this.errorMessage
+			};
+			if (this.successMessage) return {
+				state: "valid",
+				text: this.successMessage
+			};
+			return null;
+		}
+		/** The message that moved to the icon / float bubble, kept for assistive tech only. */
+		_renderMovedMessage() {
+			const notice = this._validationNotice;
+			return html`<div
+      class=${`${this._cls("mono-textarea-message", "message")} ${notice.state}`}
+      mono-message=${notice.state}
+      mono-sr-only
+      role=${notice.state === "invalid" ? "alert" : nothing}
+    >${notice.text}</div>`;
+		}
 		willUpdate(changed) {
 			for (const key of [
 				"disabled",
@@ -463,10 +505,12 @@ const MonoTextareaCore = (superClass) => {
                 *
               </span>
             ` : nothing}
+        ${this._tooltip.render()}
       </label>
     `;
 		}
 		_renderMessage() {
+			if (this._validation.moved) return html`${this._renderHelperText()}${this._renderMovedMessage()}`;
 			if (this.validationMessage) return html`
         <div
           class=${`${this._cls("mono-textarea-message", "message")} ${this._resolvedValidationState}`}
@@ -485,6 +529,9 @@ const MonoTextareaCore = (superClass) => {
           ${this.successMessage}
         </div>
       `;
+			return this._renderHelperText();
+		}
+		_renderHelperText() {
 			if (this.helperText || this._hasHelperSlot || this._slotsAlwaysRender) return html`
         <div
           class=${`${this._cls("mono-textarea-message", "message")} helper`}
@@ -542,6 +589,8 @@ const MonoTextareaCore = (superClass) => {
         mono-size=${this.size === "md" ? nothing : this.size}
         mono-color=${this.color === "primary" ? nothing : this.color}
         mono-variant=${this.variant === "outlined" ? nothing : this.variant}
+        mono-label-position=${this.labelPosition === "top" ? nothing : this.labelPosition}
+        mono-validation-position=${this.validationPosition === "bottom" ? nothing : this.validationPosition}
         mono-validation-state=${this._resolvedValidationState === "default" ? nothing : this._resolvedValidationState}
         ?mono-disabled=${this.disabled}
         ?mono-readonly=${this.readonly}
@@ -550,6 +599,7 @@ const MonoTextareaCore = (superClass) => {
       >
         ${this._renderLabel()}
 
+        ${this._validation.renderIcon({ anchored: true })}
         <textarea
           id=${this._textareaId}
           class=${this._fieldClasses}
@@ -573,6 +623,8 @@ const MonoTextareaCore = (superClass) => {
         <div id=${this._messageId} mono-message-outlet>
           ${this._renderFooter()}
         </div>
+
+        ${this._validation.renderFloat()}
       </div>
     `;
 		}
@@ -613,6 +665,14 @@ const MonoTextareaCore = (superClass) => {
 	__decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "size", void 0);
 	__decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "color", void 0);
 	__decorate([property({ type: String })], MonoTextareaCoreClass.prototype, "variant", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "label-position"
+	})], MonoTextareaCoreClass.prototype, "labelPosition", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "validation-position"
+	})], MonoTextareaCoreClass.prototype, "validationPosition", void 0);
 	__decorate([property({
 		type: String,
 		attribute: "model-value",
@@ -626,6 +686,7 @@ const MonoTextareaCore = (superClass) => {
 		type: String,
 		attribute: "helper-text"
 	})], MonoTextareaCoreClass.prototype, "helperText", void 0);
+	__decorate([property()], MonoTextareaCoreClass.prototype, "tooltip", void 0);
 	__decorate([property({
 		type: String,
 		attribute: "validation-state"
@@ -717,7 +778,7 @@ const MonoTextareaCore = (superClass) => {
 
 //#endregion
 //#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\textarea\textarea.css?raw.js
-var textarea_css_raw_default = "/* =========================================================================\r\n   mono-textarea — a port of Basecoat's `.textarea` inside a `.field`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-textarea size=\"sm\" color=\"danger\" label=\"Notes\" placeholder=\"…\">\r\n     <div mono-textarea mono-size=\"sm\" mono-color=\"danger\">\r\n       <label mono-label>Notes</label>\r\n       <textarea mono-native placeholder=\"…\"></textarea>\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 (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The\r\n   element renders these on its root (both builds) plus the states\r\n   `mono-disabled` / `mono-readonly` / `mono-required` / `mono-auto-resize` and\r\n   `mono-validation-state=\"valid|invalid|warning\"`. The old classes\r\n   (`.mono-textarea.md.primary.outlined`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-textarea]                               ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-textarea] > [mono-label]                ≡ .field > label / .label\r\n     [mono-native]                                 ≡ .field > textarea / .textarea\r\n                                                     (field-sizing-content min-h-16 w-full rounded-md\r\n                                                      border-input bg-transparent px-2.5 py-2 shadow-xs\r\n                                                      text-base md:text-sm, focus ring-3 ring-ring/50)\r\n     [mono-message-wrap] > [mono-message=\"…\"]      ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the\r\n                                                     ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma/mira/rhea's textarea: bg-input/50, no shadow)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: border-transparent border-b-input,\r\n                                                     rounded-none px-0, the ring on the bottom edge only)\r\n     [mono-counter], [mono-footer]                 ≡ EXTENSION (the character counter row)\r\n\r\n   A textarea must NOT be --mono-control-height-* tall — it is multi-line — but\r\n   its metrics DERIVE from that token, or retuning the ladder leaves it behind:\r\n\r\n     padY       = (T - L) / 2 - B\r\n     min-height = ROWS x L + 2*padY + 2*B  =  T + (ROWS - 1) x L\r\n\r\n   with T the control height, L one text line (font x line-height) and B the\r\n   border. The first puts the textarea's FIRST line box at the same offset as an\r\n   input's single line, so the two start their text on the same baseline side by\r\n   side; the second reads as \"one input tall, plus N-1 lines\". ROWS is the only\r\n   per-size literal. (Upstream's own `min-h-16` is a flat 64px; the derivation is\r\n   mono's, and `field-sizing: content` still grows the box from there.)\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-textarea]) [mono-native]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-label] (+ [mono-required-mark]), [mono-native],\r\n   [mono-footer] > [mono-message-wrap] > [mono-message=\"helper|valid|invalid|\r\n   warning\"] / [mono-counter] (+ [mono-near], [mono-over]). The shadow build\r\n   marks an unassigned slot wrapper [mono-empty].\r\n\r\n   FLAVORS set `--mono-textarea-{radius,padding-x-<size>,padding-y-<size>,\r\n   font-<size>,line-height,ring-width,ring-alpha,gap,resize,bg,border-color,\r\n   shadow}` and the outline-scoped `--mono-textarea-outline-*`; every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"textarea\"`).\r\n   ========================================================================= */\r\n\r\nmono-textarea {\r\n  display: block;\r\n}\r\n\r\n[mono-textarea] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-textarea-text: var(--mono-textarea-color, var(--mono-textarea-text, var(--foreground)));\r\n  --_mono-textarea-placeholder: var(--mono-textarea-placeholder, var(--muted-foreground));\r\n  --_mono-textarea-muted: var(--mono-textarea-muted, var(--muted-foreground));\r\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\r\n  --_mono-textarea-primary: var(--mono-textarea-primary, var(--ring));\r\n  --_mono-textarea-secondary: var(--mono-textarea-secondary, var(--muted-foreground));\r\n  --_mono-textarea-success: var(--mono-textarea-success, var(--success));\r\n  --_mono-textarea-danger: var(--mono-textarea-danger, var(--destructive));\r\n  --_mono-textarea-warning: var(--mono-textarea-warning, var(--warning));\r\n  --_mono-textarea-info: var(--mono-textarea-info, var(--info));\r\n  --_mono-textarea-teal: var(--mono-textarea-teal, var(--teal));\r\n  --_mono-textarea-purple: var(--mono-textarea-purple, var(--purple));\r\n  --_mono-textarea-neutral: var(--mono-textarea-neutral, var(--neutral));\r\n  --_mono-textarea-dark: var(--mono-textarea-dark, var(--dark));\r\n  --_mono-textarea-valid: var(--mono-textarea-valid, var(--success));\r\n  --_mono-textarea-invalid: var(--mono-textarea-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = vega's .textarea ─────────── */\r\n  --_mono-textarea-ring-color: var(--mono-textarea-ring-color, var(--mono-textarea-focus-color, var(--_mono-textarea-ring-color-preset, var(--_mono-textarea-primary))));\r\n  --_mono-textarea-ring-width: var(--mono-textarea-ring-width, var(--_mono-textarea-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-textarea-ring-alpha: var(--mono-textarea-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-textarea-border-color: var(--mono-textarea-rest-border, var(--mono-textarea-border-color, var(--_mono-textarea-border-color-preset, var(--input))));\r\n  --_mono-textarea-side-border-color: var(--_mono-textarea-side-border-color-preset, var(--_mono-textarea-border-color));\r\n  --_mono-textarea-bg: var(--mono-textarea-bg, var(--mono-textarea-surface, var(--_mono-textarea-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-textarea-shadow: var(--mono-textarea-shadow, var(--_mono-textarea-shadow-preset, var(--mono-shadow-xs)));\r\n  --_mono-textarea-border-width: var(--mono-textarea-border-width, var(--mono-border-width));\r\n  --_mono-textarea-radius: var(--mono-textarea-radius, var(--_mono-textarea-radius-preset, var(--mono-radius-md)));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-textarea>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .textarea — px-2.5 py-2 text-base md:text-sm ── */\r\n  --_mono-textarea-height: var(--mono-textarea-height-md, var(--mono-control-height-md));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-md, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-md, var(--mono-text-sm));\r\n  --_mono-textarea-line-height: var(--mono-textarea-line-height, var(--mono-textarea-line-height-md, var(--mono-leading-normal)));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-md, 4));\r\n\r\n  /* one text line, and the two derived metrics that hang off it */\r\n  --_mono-textarea-line: calc(var(--_mono-textarea-font-size) * var(--_mono-textarea-line-height));\r\n  --_mono-textarea-padding-y: var(\r\n    --mono-textarea-padding-y,\r\n    max(0px, calc((var(--_mono-textarea-height) - var(--_mono-textarea-line)) / 2 - var(--_mono-textarea-border-width)))\r\n  );\r\n  --_mono-textarea-min-height: var(\r\n    --mono-textarea-min-height,\r\n    calc(var(--_mono-textarea-height) + (var(--_mono-textarea-rows) - 1) * var(--_mono-textarea-line))\r\n  );\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-textarea-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  min-width: 0;\r\n  color: var(--_mono-textarea-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-textarea],\r\n:where([mono-textarea]) *,\r\n:where([mono-textarea]) *::before,\r\n:where([mono-textarea]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The element wraps the footer in an aria-describedby outlet; hand-written markup\r\n   has no such wrapper. It is a flex child either way, so an EMPTY outlet still\r\n   paid the root's `gap` and made the element stand taller than the same raw\r\n   markup. The shadow build always RENDERS the footer and marks it empty, so the\r\n   test is for a footer that is actually showing. */\r\n[mono-textarea] > [mono-message-outlet]:not(:has([mono-footer]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n/* the shadow build renders every region and marks the empty ones; the light\r\n   build renders only what exists. Out-specifies the region rules on purpose —\r\n   a zero-weight hide would tie with them and lose on source order. */\r\n[mono-textarea] :is([mono-label], [mono-message], [mono-footer], [mono-counter])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat sizes only the select, so the ladder is\r\n   --mono-control-height-* and the derivation above\r\n   ========================================= */\r\n\r\n[mono-textarea][mono-size=\"xs\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-xs, var(--mono-control-height-xs));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-xs, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-xs, var(--mono-text-xs));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-xs, 3));\r\n}\r\n\r\n[mono-textarea][mono-size=\"sm\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-sm, var(--mono-control-height-sm));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-sm, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-sm, var(--mono-textarea-font-md, var(--mono-text-sm)));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-sm, 3));\r\n}\r\n\r\n[mono-textarea][mono-size=\"lg\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-lg, var(--mono-control-height-lg));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-lg, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-lg, var(--mono-textarea-font-md, var(--mono-text-sm)));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-lg, 4));\r\n}\r\n\r\n[mono-textarea][mono-size=\"xl\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-xl, var(--mono-control-height-xl));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-xl, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-xl, var(--mono-text-base));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-xl, 5));\r\n}\r\n\r\n[mono-textarea][mono-size=\"xxl\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-xxl, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-xxl, var(--mono-text-base));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-xxl, 5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the `color` prop is the FOCUS colour, nothing else\r\n   ========================================= */\r\n\r\n[mono-textarea][mono-color=\"secondary\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-secondary);\r\n}\r\n[mono-textarea][mono-color=\"success\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-success);\r\n}\r\n[mono-textarea][mono-color=\"danger\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-danger);\r\n}\r\n[mono-textarea][mono-color=\"warning\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-warning);\r\n}\r\n[mono-textarea][mono-color=\"info\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-info);\r\n}\r\n[mono-textarea][mono-color=\"teal\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-teal);\r\n}\r\n[mono-textarea][mono-color=\"purple\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-purple);\r\n}\r\n[mono-textarea][mono-color=\"neutral\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-neutral);\r\n}\r\n[mono-textarea][mono-color=\"dark\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label\r\n   — text-sm leading-snug font-medium */\r\n:where([mono-textarea]) > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-textarea-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-textarea-label-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-textarea-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--mono-textarea-label-color, var(--_mono-textarea-text));\r\n}\r\n\r\n[mono-textarea][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--mono-textarea-label-color, var(--_mono-textarea-invalid));\r\n}\r\n\r\n:where([mono-textarea]) [mono-required-mark] {\r\n  color: var(--mono-textarea-required-color, var(--destructive));\r\n}\r\n\r\n/* =========================================\r\n   The field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/textarea.css .field > textarea, .textarea\r\n   — flex field-sizing-content min-h-16 w-full outline-none\r\n   placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea\r\n   — rounded-md border border-input bg-transparent px-2.5 py-2 text-base md:text-sm\r\n   shadow-xs transition-[color,box-shadow] (dark:bg-input/30 via --mono-mode-surface);\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots, and the height is\r\n   derived from the control step rather than upstream's flat min-h-16 */\r\n:where([mono-textarea]) [mono-native] {\r\n  --_mono-textarea-ring: 0 0 #0000;\r\n  display: block;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-textarea-min-height);\r\n  padding: var(--_mono-textarea-padding-y) var(--_mono-textarea-padding-x);\r\n  border: var(--_mono-textarea-border-width) solid var(--_mono-textarea-border-color);\r\n  border-radius: var(--_mono-textarea-radius);\r\n  background-color: var(--_mono-textarea-bg);\r\n  color: var(--_mono-textarea-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-textarea-font-size);\r\n  line-height: var(--_mono-textarea-line-height);\r\n  resize: var(--mono-textarea-resize, vertical);\r\n  outline: none;\r\n  box-shadow: var(--_mono-textarea-ring), var(--_mono-textarea-shadow);\r\n  transition-property: color, background-color, border-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* Upstream grows the box with `field-sizing: content`, which has no ceiling.\r\n   mono's `auto-resize` is a JS height instead, BECAUSE it honours `min-rows` and\r\n   `max-rows` — so this rule must not hand the sizing back to the browser, or the\r\n   two fight over the height. All the attribute does here is drop the manual grip:\r\n   a box that resizes itself should not also offer one. */\r\n[mono-textarea][mono-auto-resize] > [mono-native] {\r\n  resize: var(--mono-textarea-resize, none);\r\n}\r\n\r\n/* placeholder:text-muted-foreground */\r\n:where([mono-textarea]) [mono-native]::placeholder {\r\n  color: var(--_mono-textarea-placeholder);\r\n  opacity: 1;\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 */\r\n:where([mono-textarea]) [mono-native]:focus-visible,\r\n:where([mono-textarea]) [mono-native]:focus {\r\n  border-color: var(--_mono-textarea-ring-color);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) color-mix(in oklab, var(--_mono-textarea-ring-color) var(--_mono-textarea-ring-alpha), transparent);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50 and /40, carried by the mode tokens) */\r\n[mono-textarea][mono-validation-state=\"invalid\"] > [mono-native],\r\n:where([mono-textarea]) [mono-native][aria-invalid=\"true\"] {\r\n  --_mono-textarea-border-color: var(--mono-mode-invalid-border);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in the success / warning roles */\r\n[mono-textarea][mono-validation-state=\"valid\"] > [mono-native] {\r\n  --_mono-textarea-border-color: color-mix(in oklab, var(--_mono-textarea-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) color-mix(in oklab, var(--_mono-textarea-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n[mono-textarea][mono-validation-state=\"warning\"] > [mono-native] {\r\n  --_mono-textarea-border-color: color-mix(in oklab, var(--_mono-textarea-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) color-mix(in oklab, var(--_mono-textarea-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* disabled:cursor-not-allowed disabled:opacity-50 */\r\n[mono-textarea][mono-disabled] > [mono-native],\r\n:where([mono-textarea]) [mono-native]:disabled {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  background-color: var(--mono-textarea-disabled-bg, var(--_mono-textarea-bg));\r\n}\r\n\r\n/* EXTENSION — readonly is legible, not dimmed: a muted surface and no caret */\r\n[mono-textarea][mono-readonly] > [mono-native],\r\n:where([mono-textarea]) [mono-native]:read-only:not(:disabled) {\r\n  background-color: var(--mono-textarea-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* =========================================\r\n   Variants — EXTENSION: the two other looks Basecoat's styles ship\r\n   ========================================= */\r\n\r\n/* `outlined` is the default and IS vega's textarea. The `--mono-textarea-outline-*`\r\n   knobs are how a FLAVOR restyles this variant alone: writing the shared\r\n   `--mono-textarea-bg` would repaint `filled` and `underlined` too (the public\r\n   tier out-ranks a variant's preset), which is exactly what made every style's\r\n   underlined textarea come out as a filled box. */\r\n[mono-textarea]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-textarea-bg-preset: var(--mono-textarea-outline-bg);\r\n  --_mono-textarea-border-color-preset: var(--mono-textarea-outline-border-color);\r\n  --_mono-textarea-side-border-color-preset: var(--mono-textarea-outline-side-border-color);\r\n  --_mono-textarea-shadow-preset: var(--mono-textarea-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-textarea-radius-preset: var(--mono-textarea-outline-radius);\r\n  --_mono-textarea-padding-x-preset: var(--mono-textarea-outline-padding-x);\r\n  --_mono-textarea-ring-width-preset: var(--mono-textarea-outline-ring-width);\r\n}\r\n\r\n/* `filled` ≡ luma / mira / rhea's textarea: a tinted surface, no border, no shadow */\r\n[mono-textarea][mono-variant=\"filled\"] {\r\n  --_mono-textarea-bg-preset: var(--mono-textarea-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-textarea-border-color-preset: transparent;\r\n  --_mono-textarea-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* `underlined` ≡ sera's: square, the bottom edge only, and the ring rides that\r\n   edge instead of wrapping the box (never `box-shadow: none` — the resting slot\r\n   is neutralised so a focus rule can still fill it) */\r\n[mono-textarea][mono-variant=\"underlined\"] {\r\n  --_mono-textarea-radius-preset: 0;\r\n  --_mono-textarea-bg-preset: transparent;\r\n  /* the bottom edge keeps --_mono-textarea-border-color; only the other three\r\n     sides are cleared, through the side slot */\r\n  --_mono-textarea-side-border-color-preset: transparent;\r\n  --_mono-textarea-shadow-preset: 0 0 #0000;\r\n  --_mono-textarea-padding-x-preset: 0px;\r\n  --_mono-textarea-ring-width-preset: 0px;\r\n}\r\n\r\n[mono-textarea][mono-variant=\"underlined\"] > [mono-native],\r\n[mono-textarea]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) > [mono-native] {\r\n  border-color: var(--_mono-textarea-side-border-color);\r\n  border-bottom-color: var(--_mono-textarea-border-color);\r\n}\r\n\r\n[mono-textarea][mono-variant=\"underlined\"] > [mono-native]:is(:focus, :focus-visible) {\r\n  border-color: var(--_mono-textarea-side-border-color);\r\n  border-bottom-color: var(--_mono-textarea-ring-color);\r\n}\r\n\r\n/* =========================================\r\n   Footer — EXTENSION: the message row and the character counter\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-textarea]) > [mono-footer] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n:where([mono-textarea]) [mono-message-wrap] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-textarea]) [mono-message] {\r\n  font-size: var(--mono-textarea-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-textarea-message-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-textarea-muted);\r\n}\r\n\r\n/* .field [role='alert'] — the invalid message is the destructive one */\r\n:where([mono-textarea]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-textarea-invalid);\r\n}\r\n\r\n:where([mono-textarea]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-textarea-valid);\r\n}\r\n\r\n:where([mono-textarea]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-textarea-warning);\r\n}\r\n\r\n:where([mono-textarea]) [mono-counter] {\r\n  flex: 0 0 auto;\r\n  font-size: var(--mono-textarea-counter-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-leading-normal);\r\n  font-variant-numeric: tabular-nums;\r\n  color: var(--_mono-textarea-muted);\r\n}\r\n\r\n:where([mono-textarea]) [mono-counter][mono-near] {\r\n  color: var(--_mono-textarea-warning);\r\n}\r\n\r\n:where([mono-textarea]) [mono-counter][mono-over] {\r\n  color: var(--_mono-textarea-invalid);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-textarea]) [mono-native] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+var textarea_css_raw_default = "/* =========================================================================\r\n   mono-textarea — a port of Basecoat's `.textarea` inside a `.field`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-textarea size=\"sm\" color=\"danger\" label=\"Notes\" placeholder=\"…\">\r\n     <div mono-textarea mono-size=\"sm\" mono-color=\"danger\">\r\n       <label mono-label>Notes</label>\r\n       <textarea mono-native placeholder=\"…\"></textarea>\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 (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The\r\n   element renders these on its root (both builds) plus the states\r\n   `mono-disabled` / `mono-readonly` / `mono-required` / `mono-auto-resize` and\r\n   `mono-validation-state=\"valid|invalid|warning\"`. The old classes\r\n   (`.mono-textarea.md.primary.outlined`) are still emitted as inert hooks until\r\n   2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-textarea]                               ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-textarea] > [mono-label]                ≡ .field > label / .label\r\n     [mono-native]                                 ≡ .field > textarea / .textarea\r\n                                                     (field-sizing-content min-h-16 w-full rounded-md\r\n                                                      border-input bg-transparent px-2.5 py-2 shadow-xs\r\n                                                      text-base md:text-sm, focus ring-3 ring-ring/50)\r\n     [mono-message-wrap] > [mono-message=\"…\"]      ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the\r\n                                                     ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma/mira/rhea's textarea: bg-input/50, no shadow)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: border-transparent border-b-input,\r\n                                                     rounded-none px-0, the ring on the bottom edge only)\r\n     [mono-counter], [mono-footer]                 ≡ EXTENSION (the character counter row)\r\n\r\n   A textarea must NOT be --mono-control-height-* tall — it is multi-line — but\r\n   its metrics DERIVE from that token, or retuning the ladder leaves it behind:\r\n\r\n     padY       = (T - L) / 2 - B\r\n     min-height = ROWS x L + 2*padY + 2*B  =  T + (ROWS - 1) x L\r\n\r\n   with T the control height, L one text line (font x line-height) and B the\r\n   border. The first puts the textarea's FIRST line box at the same offset as an\r\n   input's single line, so the two start their text on the same baseline side by\r\n   side; the second reads as \"one input tall, plus N-1 lines\". ROWS is the only\r\n   per-size literal. (Upstream's own `min-h-16` is a flat 64px; the derivation is\r\n   mono's, and `field-sizing: content` still grows the box from there.)\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-textarea]) [mono-native]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-label] (+ [mono-required-mark]), [mono-native],\r\n   [mono-footer] > [mono-message-wrap] > [mono-message=\"helper|valid|invalid|\r\n   warning\"] / [mono-counter] (+ [mono-near], [mono-over]). The shadow build\r\n   marks an unassigned slot wrapper [mono-empty].\r\n\r\n   FLAVORS set `--mono-textarea-{radius,padding-x-<size>,padding-y-<size>,\r\n   font-<size>,line-height,ring-width,ring-alpha,gap,resize,bg,border-color,\r\n   shadow}` and the outline-scoped `--mono-textarea-outline-*`; every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"textarea\"`).\r\n   ========================================================================= */\r\n\r\nmono-textarea {\r\n  display: block;\r\n}\r\n\r\n[mono-textarea] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-textarea-text: var(--mono-textarea-color, var(--mono-textarea-text, var(--foreground)));\r\n  --_mono-textarea-placeholder: var(--mono-textarea-placeholder, var(--muted-foreground));\r\n  --_mono-textarea-muted: var(--mono-textarea-muted, var(--muted-foreground));\r\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\r\n  --_mono-textarea-primary: var(--mono-textarea-primary, var(--ring));\r\n  --_mono-textarea-secondary: var(--mono-textarea-secondary, var(--muted-foreground));\r\n  --_mono-textarea-success: var(--mono-textarea-success, var(--success));\r\n  --_mono-textarea-danger: var(--mono-textarea-danger, var(--destructive));\r\n  --_mono-textarea-warning: var(--mono-textarea-warning, var(--warning));\r\n  --_mono-textarea-info: var(--mono-textarea-info, var(--info));\r\n  --_mono-textarea-teal: var(--mono-textarea-teal, var(--teal));\r\n  --_mono-textarea-purple: var(--mono-textarea-purple, var(--purple));\r\n  --_mono-textarea-neutral: var(--mono-textarea-neutral, var(--neutral));\r\n  --_mono-textarea-dark: var(--mono-textarea-dark, var(--dark));\r\n  --_mono-textarea-valid: var(--mono-textarea-valid, var(--success));\r\n  --_mono-textarea-invalid: var(--mono-textarea-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = vega's .textarea ─────────── */\r\n  --_mono-textarea-ring-color: var(--mono-textarea-ring-color, var(--mono-textarea-focus-color, var(--_mono-textarea-ring-color-preset, var(--_mono-textarea-primary))));\r\n  --_mono-textarea-ring-width: var(--mono-textarea-ring-width, var(--_mono-textarea-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-textarea-ring-alpha: var(--mono-textarea-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-textarea-border-color: var(--mono-textarea-rest-border, var(--mono-textarea-border-color, var(--_mono-textarea-border-color-preset, var(--input))));\r\n  --_mono-textarea-side-border-color: var(--_mono-textarea-side-border-color-preset, var(--_mono-textarea-border-color));\r\n  --_mono-textarea-bg: var(--mono-textarea-bg, var(--mono-textarea-surface, var(--_mono-textarea-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-textarea-shadow: var(--mono-textarea-shadow, var(--_mono-textarea-shadow-preset, var(--mono-shadow-xs)));\r\n  --_mono-textarea-border-width: var(--mono-textarea-border-width, var(--mono-border-width));\r\n  --_mono-textarea-radius: var(--mono-textarea-radius, var(--_mono-textarea-radius-preset, var(--mono-radius-md)));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-textarea>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .textarea — px-2.5 py-2 text-base md:text-sm ── */\r\n  --_mono-textarea-height: var(--mono-textarea-height-md, var(--mono-control-height-md));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-md, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-md, var(--mono-text-sm));\r\n  --_mono-textarea-line-height: var(--mono-textarea-line-height, var(--mono-textarea-line-height-md, var(--mono-leading-normal)));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-md, 4));\r\n\r\n  /* one text line, and the two derived metrics that hang off it */\r\n  --_mono-textarea-line: calc(var(--_mono-textarea-font-size) * var(--_mono-textarea-line-height));\r\n  --_mono-textarea-padding-y: var(\r\n    --mono-textarea-padding-y,\r\n    max(0px, calc((var(--_mono-textarea-height) - var(--_mono-textarea-line)) / 2 - var(--_mono-textarea-border-width)))\r\n  );\r\n  --_mono-textarea-min-height: var(\r\n    --mono-textarea-min-height,\r\n    calc(var(--_mono-textarea-height) + (var(--_mono-textarea-rows) - 1) * var(--_mono-textarea-line))\r\n  );\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-textarea-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  min-width: 0;\r\n  color: var(--_mono-textarea-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-textarea],\r\n:where([mono-textarea]) *,\r\n:where([mono-textarea]) *::before,\r\n:where([mono-textarea]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The element wraps the footer in an aria-describedby outlet; hand-written markup\r\n   has no such wrapper. It is a flex child either way, so an EMPTY outlet still\r\n   paid the root's `gap` and made the element stand taller than the same raw\r\n   markup. The shadow build always RENDERS the footer and marks it empty, so the\r\n   test is for a footer that is actually showing. */\r\n[mono-textarea] > [mono-message-outlet]:not(:has([mono-footer]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n/* the shadow build renders every region and marks the empty ones; the light\r\n   build renders only what exists. Out-specifies the region rules on purpose —\r\n   a zero-weight hide would tie with them and lose on source order. */\r\n[mono-textarea] :is([mono-label], [mono-message], [mono-footer], [mono-counter])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat sizes only the select, so the ladder is\r\n   --mono-control-height-* and the derivation above\r\n   ========================================= */\r\n\r\n[mono-textarea][mono-size=\"xs\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-xs, var(--mono-control-height-xs));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-xs, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-xs, var(--mono-text-xs));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-xs, 3));\r\n}\r\n\r\n[mono-textarea][mono-size=\"sm\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-sm, var(--mono-control-height-sm));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-sm, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-sm, var(--mono-textarea-font-md, var(--mono-text-sm)));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-sm, 3));\r\n}\r\n\r\n[mono-textarea][mono-size=\"lg\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-lg, var(--mono-control-height-lg));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-lg, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-lg, var(--mono-textarea-font-md, var(--mono-text-sm)));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-lg, 4));\r\n}\r\n\r\n[mono-textarea][mono-size=\"xl\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-xl, var(--mono-control-height-xl));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-xl, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-xl, var(--mono-text-base));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-xl, 5));\r\n}\r\n\r\n[mono-textarea][mono-size=\"xxl\"] {\r\n  --_mono-textarea-height: var(--mono-textarea-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-textarea-padding-x: var(--mono-textarea-padding-x-xxl, var(--_mono-textarea-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-textarea-font-size: var(--mono-textarea-font-xxl, var(--mono-text-base));\r\n  --_mono-textarea-rows: var(--mono-textarea-rows, var(--mono-textarea-rows-xxl, 5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the `color` prop is the FOCUS colour, nothing else\r\n   ========================================= */\r\n\r\n[mono-textarea][mono-color=\"secondary\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-secondary);\r\n}\r\n[mono-textarea][mono-color=\"success\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-success);\r\n}\r\n[mono-textarea][mono-color=\"danger\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-danger);\r\n}\r\n[mono-textarea][mono-color=\"warning\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-warning);\r\n}\r\n[mono-textarea][mono-color=\"info\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-info);\r\n}\r\n[mono-textarea][mono-color=\"teal\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-teal);\r\n}\r\n[mono-textarea][mono-color=\"purple\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-purple);\r\n}\r\n[mono-textarea][mono-color=\"neutral\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-neutral);\r\n}\r\n[mono-textarea][mono-color=\"dark\"] {\r\n  --_mono-textarea-ring-color-preset: var(--_mono-textarea-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label\r\n   — text-sm leading-snug font-medium */\r\n:where([mono-textarea]) > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-textarea-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-textarea-label-line-height, var(--mono-leading-snug));\r\n  font-weight: var(--mono-textarea-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--mono-textarea-label-color, var(--_mono-textarea-text));\r\n}\r\n\r\n[mono-textarea][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--mono-textarea-label-color, var(--_mono-textarea-invalid));\r\n}\r\n\r\n:where([mono-textarea]) [mono-required-mark] {\r\n  color: var(--mono-textarea-required-color, var(--destructive));\r\n}\r\n\r\n/* `tooltip` prop — the info icon at the end of the label row (the label's\r\n   flex gap spaces it). `pointer-events` is restored because a disabled field\r\n   switches its label's off, and a disabled field is exactly where the reason\r\n   is worth a hover. Knobs: --mono-textarea-label-tooltip-size / -color / -opacity. */\r\n:where([mono-textarea]) > [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-textarea-label-tooltip-size, 1.1em);\r\n  color: var(--mono-textarea-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-textarea-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\r\n:where([mono-textarea]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n\r\n:where([mono-textarea]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where([mono-textarea]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n/* =========================================\r\n   The field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/textarea.css .field > textarea, .textarea\r\n   — flex field-sizing-content min-h-16 w-full outline-none\r\n   placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea\r\n   — rounded-md border border-input bg-transparent px-2.5 py-2 text-base md:text-sm\r\n   shadow-xs transition-[color,box-shadow] (dark:bg-input/30 via --mono-mode-surface);\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots, and the height is\r\n   derived from the control step rather than upstream's flat min-h-16 */\r\n:where([mono-textarea]) [mono-native] {\r\n  --_mono-textarea-ring: 0 0 #0000;\r\n  display: block;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-textarea-min-height);\r\n  padding: var(--_mono-textarea-padding-y) var(--_mono-textarea-padding-x);\r\n  border: var(--_mono-textarea-border-width) solid var(--_mono-textarea-border-color);\r\n  border-radius: var(--_mono-textarea-radius);\r\n  background-color: var(--_mono-textarea-bg);\r\n  color: var(--_mono-textarea-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-textarea-font-size);\r\n  line-height: var(--_mono-textarea-line-height);\r\n  resize: var(--mono-textarea-resize, vertical);\r\n  outline: none;\r\n  box-shadow: var(--_mono-textarea-ring), var(--_mono-textarea-shadow);\r\n  transition-property: color, background-color, border-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* Upstream grows the box with `field-sizing: content`, which has no ceiling.\r\n   mono's `auto-resize` is a JS height instead, BECAUSE it honours `min-rows` and\r\n   `max-rows` — so this rule must not hand the sizing back to the browser, or the\r\n   two fight over the height. All the attribute does here is drop the manual grip:\r\n   a box that resizes itself should not also offer one. */\r\n[mono-textarea][mono-auto-resize] > [mono-native] {\r\n  resize: var(--mono-textarea-resize, none);\r\n}\r\n\r\n/* placeholder:text-muted-foreground */\r\n:where([mono-textarea]) [mono-native]::placeholder {\r\n  color: var(--_mono-textarea-placeholder);\r\n  opacity: 1;\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 */\r\n:where([mono-textarea]) [mono-native]:focus-visible,\r\n:where([mono-textarea]) [mono-native]:focus {\r\n  border-color: var(--_mono-textarea-ring-color);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) color-mix(in oklab, var(--_mono-textarea-ring-color) var(--_mono-textarea-ring-alpha), transparent);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50 and /40, carried by the mode tokens) */\r\n[mono-textarea][mono-validation-state=\"invalid\"] > [mono-native],\r\n:where([mono-textarea]) [mono-native][aria-invalid=\"true\"] {\r\n  --_mono-textarea-border-color: var(--mono-mode-invalid-border);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in the success / warning roles */\r\n[mono-textarea][mono-validation-state=\"valid\"] > [mono-native] {\r\n  --_mono-textarea-border-color: color-mix(in oklab, var(--_mono-textarea-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) color-mix(in oklab, var(--_mono-textarea-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n[mono-textarea][mono-validation-state=\"warning\"] > [mono-native] {\r\n  --_mono-textarea-border-color: color-mix(in oklab, var(--_mono-textarea-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-textarea-ring: 0 0 0 var(--_mono-textarea-ring-width) color-mix(in oklab, var(--_mono-textarea-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* disabled:cursor-not-allowed disabled:opacity-50 */\r\n[mono-textarea][mono-disabled] > [mono-native],\r\n:where([mono-textarea]) [mono-native]:disabled {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  background-color: var(--mono-textarea-disabled-bg, var(--_mono-textarea-bg));\r\n}\r\n\r\n/* EXTENSION — readonly is legible, not dimmed: a muted surface and no caret */\r\n[mono-textarea][mono-readonly] > [mono-native],\r\n:where([mono-textarea]) [mono-native]:read-only:not(:disabled) {\r\n  background-color: var(--mono-textarea-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* =========================================\r\n   Variants — EXTENSION: the two other looks Basecoat's styles ship\r\n   ========================================= */\r\n\r\n/* `outlined` is the default and IS vega's textarea. The `--mono-textarea-outline-*`\r\n   knobs are how a FLAVOR restyles this variant alone: writing the shared\r\n   `--mono-textarea-bg` would repaint `filled` and `underlined` too (the public\r\n   tier out-ranks a variant's preset), which is exactly what made every style's\r\n   underlined textarea come out as a filled box. */\r\n[mono-textarea]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-textarea-bg-preset: var(--mono-textarea-outline-bg);\r\n  --_mono-textarea-border-color-preset: var(--mono-textarea-outline-border-color);\r\n  --_mono-textarea-side-border-color-preset: var(--mono-textarea-outline-side-border-color);\r\n  --_mono-textarea-shadow-preset: var(--mono-textarea-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-textarea-radius-preset: var(--mono-textarea-outline-radius);\r\n  --_mono-textarea-padding-x-preset: var(--mono-textarea-outline-padding-x);\r\n  --_mono-textarea-ring-width-preset: var(--mono-textarea-outline-ring-width);\r\n}\r\n\r\n/* `filled` ≡ luma / mira / rhea's textarea: a tinted surface, no border, no shadow */\r\n[mono-textarea][mono-variant=\"filled\"] {\r\n  --_mono-textarea-bg-preset: var(--mono-textarea-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-textarea-border-color-preset: transparent;\r\n  --_mono-textarea-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* `underlined` ≡ sera's: square, the bottom edge only, and the ring rides that\r\n   edge instead of wrapping the box (never `box-shadow: none` — the resting slot\r\n   is neutralised so a focus rule can still fill it) */\r\n[mono-textarea][mono-variant=\"underlined\"] {\r\n  --_mono-textarea-radius-preset: 0;\r\n  --_mono-textarea-bg-preset: transparent;\r\n  /* the bottom edge keeps --_mono-textarea-border-color; only the other three\r\n     sides are cleared, through the side slot */\r\n  --_mono-textarea-side-border-color-preset: transparent;\r\n  --_mono-textarea-shadow-preset: 0 0 #0000;\r\n  --_mono-textarea-padding-x-preset: 0px;\r\n  --_mono-textarea-ring-width-preset: 0px;\r\n}\r\n\r\n[mono-textarea][mono-variant=\"underlined\"] > [mono-native],\r\n[mono-textarea]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) > [mono-native] {\r\n  border-color: var(--_mono-textarea-side-border-color);\r\n  border-bottom-color: var(--_mono-textarea-border-color);\r\n}\r\n\r\n[mono-textarea][mono-variant=\"underlined\"] > [mono-native]:is(:focus, :focus-visible) {\r\n  border-color: var(--_mono-textarea-side-border-color);\r\n  border-bottom-color: var(--_mono-textarea-ring-color);\r\n}\r\n\r\n/* =========================================\r\n   Footer — EXTENSION: the message row and the character counter\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-textarea]) > [mono-footer] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n:where([mono-textarea]) [mono-message-wrap] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-textarea]) [mono-message] {\r\n  font-size: var(--mono-textarea-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-textarea-message-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-textarea-muted);\r\n}\r\n\r\n/* .field [role='alert'] — the invalid message is the destructive one */\r\n:where([mono-textarea]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-textarea-invalid);\r\n}\r\n\r\n:where([mono-textarea]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-textarea-valid);\r\n}\r\n\r\n:where([mono-textarea]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-textarea-warning);\r\n}\r\n\r\n:where([mono-textarea]) [mono-counter] {\r\n  flex: 0 0 auto;\r\n  font-size: var(--mono-textarea-counter-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-leading-normal);\r\n  font-variant-numeric: tabular-nums;\r\n  color: var(--_mono-textarea-muted);\r\n}\r\n\r\n:where([mono-textarea]) [mono-counter][mono-near] {\r\n  color: var(--_mono-textarea-warning);\r\n}\r\n\r\n:where([mono-textarea]) [mono-counter][mono-over] {\r\n  color: var(--_mono-textarea-invalid);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-textarea]) [mono-native] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   label-position — the slots form/label-position.css reads\r\n   (top / notched / left / right; public knobs: --mono-textarea-label-width,\r\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\r\n   ========================================= */\r\n\r\n[mono-textarea][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-textarea-label-width, auto);\r\n  --_mono-lp-gap: var(--mono-textarea-label-side-gap, calc(var(--mono-spacing) * 3));\r\n  --_mono-lp-height: var(--_mono-textarea-height);\r\n  --_mono-lp-box-min: var(--_mono-textarea-min-height);\r\n  --_mono-lp-padding-x: var(--_mono-textarea-padding-x);\r\n  --_mono-lp-padding-y: var(--_mono-textarea-padding-y);\r\n  --_mono-lp-font: var(--mono-textarea-label-notch-font-size, var(--mono-text-xs));\r\n  --_mono-lp-notch-bg: var(--mono-textarea-label-notch-bg, var(--background));\r\n  --_mono-lp-field-bg: var(--_mono-textarea-bg);\r\n}\r\n";
 
 //#endregion
 //#region src/components/textarea/mono-textarea.shadow.ts
@@ -727,7 +788,7 @@ let MonoTextareaShadow = class MonoTextareaShadow extends withShadowUtilityStyle
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(textarea_css_raw_default, {
+		this.styles = [unsafeCSS(toShadowCss(textarea_css_raw_default + label_position_css_raw_default + field_tooltip_css_raw_default + field_validation_css_raw_default, {
 			host: "mono-textarea",
 			append: SHADOW_EXTRA_CSS
 		}))];

package/dist/ui/sidebar.js

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