@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/shadow/input.js

@@ -1,15 +1,16 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as cssPart } from "../../css-class-BRKRzHx-.js";
-import { t as buildSizeStyle } from "../../css-size-DhHSVZJK.js";
-import { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
-import { t as input_default } from "../../input-zGOULADt.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as cssPart } from "../../css-class-B6Tc_MAx.js";
+import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as input_css_raw_default } from "../../input.css_raw-CGESifay.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";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/input/input-format.ts
-var SEPARATOR_CACHE = /* @__PURE__ */ new Map();
+const SEPARATOR_CACHE = /* @__PURE__ */ new Map();
 /**
 * Ask `Intl` which characters this locale uses, rather than assuming `,` and `.`.
 *
@@ -256,9 +257,10 @@ function resolveFormat(format, raw, ctx, mode) {
 	if (!descriptor) return null;
 	return mode === "display" ? applyFormat(raw, descriptor, ctx.locale) : normaliseValue(raw, descriptor);
 }
+
 //#endregion
 //#region src/components/input/input-core.ts
-var numberStringConverter = {
+const numberStringConverter = {
 	fromAttribute(value) {
 		if (value === null || value === "") return void 0;
 		const parsed = Number(value);
@@ -282,7 +284,7 @@ var numberStringConverter = {
 *    shared `_hasXxxSlotState` `@state` fields back both strategies and feed the
 *    class getters.
 */
-var MonoInputCore = (superClass) => {
+const MonoInputCore = (superClass) => {
 	class MonoInputCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -658,7 +660,8 @@ var MonoInputCore = (superClass) => {
 			input.value = next;
 			this._display = next;
 			if (caretBefore == null) return;
-			const caret = caretAfterFormat(next, caretBefore, prev, significantFor(this._displayDescriptor, this.formatLocale));
+			const significant = significantFor(this._displayDescriptor, this.formatLocale);
+			const caret = caretAfterFormat(next, caretBefore, prev, significant);
 			try {
 				input.setSelectionRange(caret, caret);
 			} catch {}
@@ -960,15 +963,16 @@ var MonoInputCore = (superClass) => {
 	__decorate([state()], MonoInputCoreClass.prototype, "_hasHelperSlotState", void 0);
 	return MonoInputCoreClass;
 };
+
 //#endregion
 //#region src/components/input/mono-input.shadow.ts
-var SHADOW_EXTRA_CSS = "";
-var MonoInputShadow = class MonoInputShadow extends withShadowUtilityStyles(MonoInputCore(LitElement)) {
+const SHADOW_EXTRA_CSS = "";
+let MonoInputShadow = class MonoInputShadow extends withShadowUtilityStyles(MonoInputCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(input_default, {
+		this.styles = [unsafeCSS(toShadowCss(input_css_raw_default, {
 			host: "mono-input",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -1060,6 +1064,7 @@ var MonoInputShadow = class MonoInputShadow extends withShadowUtilityStyles(Mono
 	}
 };
 MonoInputShadow = __decorate([customElement("mono-shadow-input")], MonoInputShadow);
+
 //#endregion
 //#region src/components/input/input-utils.ts
 function validateInputProps(props) {
@@ -1146,5 +1151,6 @@ function getInputIcon(type) {
 	};
 	return iconMap[type] ?? iconMap.text;
 }
+
 //#endregion
-export { MonoInputCore, MonoInputShadow, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };
+export { MonoInputCore, MonoInputShadow, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };

package/dist/ui/shadow/menu.js

@@ -1,9 +1,10 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as isIconifyClass } from "../../icon-CJkTlmTb.js";
-import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../../color-DHYrfXsX.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as isIconifyClass } from "../../icon-BM9N-jOt.js";
+import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../../color-CEYYtRX-.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
+
 //#region src/components/menu/menu-utils.ts
 function isItem(node) {
 	return !node.type || node.type === "item";
@@ -109,6 +110,7 @@ function menuRootAttrs(props) {
 		color: isThemeColorToken(props.color) || props.color === "surface" ? props.color === "primary" ? null : props.color : CUSTOM_COLOR_CLASS
 	};
 }
+
 //#endregion
 //#region src/components/menu/menu-render.ts
 function clsFor(base, key, cssClass) {
@@ -257,9 +259,10 @@ function renderMenuItemRow(item, ctx) {
 function renderMenuGroup(group, ctx) {
 	const open = ctx.isGroupOpen(group.id);
 	const ancestorActive = ctx.isGroupActive?.(group) ?? false;
+	const groupClasses = [clsFor("mono-menu-group", "group", ctx.cssClass), ancestorActive ? "active" : ""].filter(Boolean).join(" ");
 	return html`
     <li
-      class=${[clsFor("mono-menu-group", "group", ctx.cssClass), ancestorActive ? "active" : ""].filter(Boolean).join(" ")}
+      class=${groupClasses}
       mono-item
       mono-group
       ?mono-open=${open}
@@ -343,6 +346,7 @@ function renderMenuGroupsOnly(list, ctx) {
 	for (const item of list) if (isGroup(item)) out.push(renderMenuGroup(item, ctx));
 	return out;
 }
+
 //#endregion
 //#region src/components/menu/menu-core.ts
 /** Coerce any `items` input (array, JSON string, or other) to a MenuItem array. */
@@ -369,7 +373,7 @@ function coerceItems(value) {
 * capture / declarative `slot="body"`; shadow: items-driven only), and
 * `_chevronSvg()` (light: undefined → UnoCSS icon span; shadow: inline SVG).
 */
-var MonoMenuCore = (superClass) => {
+const MonoMenuCore = (superClass) => {
 	class MonoMenuCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -507,7 +511,8 @@ var MonoMenuCore = (superClass) => {
 		}
 		_findRegisteredItem(id) {
 			for (const child of this._listChildren) {
-				const found = findItem(child.getMenuItems?.() ?? [], id);
+				const items = child.getMenuItems?.() ?? [];
+				const found = findItem(items, id);
 				if (found) return found;
 			}
 			return null;
@@ -517,7 +522,8 @@ var MonoMenuCore = (superClass) => {
 		}
 		_getRegisteredActivePath(id) {
 			for (const child of this._listChildren) {
-				const path = findActivePath(child.getMenuItems?.() ?? [], id);
+				const items = child.getMenuItems?.() ?? [];
+				const path = findActivePath(items, id);
 				if (path.length) return path;
 			}
 			return [];
@@ -760,7 +766,8 @@ var MonoMenuCore = (superClass) => {
 		* it has to serialize from THIS getter or it will wipe the colour.
 		*/
 		get _inlineRootStyle() {
-			return customColorStyle(isThemeColorToken(this.color) || this.color === "surface" ? "" : this.color, "menu");
+			const raw = isThemeColorToken(this.color) || this.color === "surface" ? "" : this.color;
+			return customColorStyle(raw, "menu");
 		}
 		render() {
 			const attrs = menuRootAttrs(this);
@@ -819,14 +826,16 @@ var MonoMenuCore = (superClass) => {
 	__decorate([state()], MonoMenuCoreClass.prototype, "_openGroups", void 0);
 	return MonoMenuCoreClass;
 };
+
 //#endregion
-//#region src/components/menu/menu.css?raw
-var menu_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-menu — a port of Basecoat's sidebar NAVIGATION (basecoat-css@1.0.2,\r\n   vega style).\r\n\r\n   Basecoat has no standalone menu, but it has the thing a menu is: the list\r\n   inside `.sidebar nav` — a group, its rows, its headings and its separators.\r\n   That block is also the richest per-flavor surface in the whole vendor sheet,\r\n   so this port is where a flavor finally gets to say what a nav row looks like.\r\n\r\n   Styled by ATTRIBUTE, and the attributes mirror the element's props one for\r\n   one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-menu density=\"compact\" color=\"success\" :nav=\"false\">\r\n     <nav mono-menu mono-density=\"compact\" mono-color=\"success\" mono-plain\r\n          role=\"navigation\">\r\n       <ul mono-list>\r\n         <li mono-item mono-active>\r\n           <a mono-action href=\"/\" aria-current=\"page\">\r\n             <span mono-icon>…</span>\r\n             <span mono-content>\r\n               <span mono-title>Dashboard</span>\r\n               <span mono-subtitle>Overview</span>\r\n             </span>\r\n             <span mono-badge=\"info\">3</span>\r\n           </a>\r\n         </li>\r\n         <li mono-divider role=\"separator\"></li>\r\n         <li mono-subheader>Section</li>\r\n       </ul>\r\n     </nav>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-density])` =\r\n   comfortable, `:not([mono-color])` = primary, and `nav` defaults to TRUE so\r\n   `mono-plain` is what the other mode says). The old classes\r\n   (`.mono-menu.comfortable.primary.nav`) are still emitted as inert hooks\r\n   until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-menu]        ≡ .sidebar nav > section > [role=group]\r\n                          (relative flex w-full min-w-0 flex-col, p-2 text-sm)\r\n     :where([mono-menu]) [mono-list]        ≡ .sidebar nav ul (flex w-full min-w-0 flex-col, gap-1)\r\n     :where([mono-menu]) [mono-item]        ≡ .sidebar nav li (relative)\r\n     :where([mono-menu]) [mono-action]      ≡ .sidebar nav li > :is(a, button) — the row\r\n     [mono-active]      ≡ [aria-current=page], [data-active=true]\r\n                          (bg-sidebar-accent text-sidebar-accent-foreground font-medium)\r\n     :where([mono-menu]) [mono-subheader]   ≡ .sidebar nav h3\r\n     :where([mono-menu]) [mono-divider]     ≡ .sidebar nav [role=separator] (border-sidebar-border mx-2 w-auto)\r\n     :where([mono-menu]) [mono-group-header]≡ details > summary — the same row, plus the chevron\r\n     [mono-density=…]   ≡ [data-size='sm' | default | 'lg'] (h-7 / h-8 / h-12)\r\n     :where([mono-menu]) [mono-badge]       ≡ .badge — EXTENSION (upstream's rows carry none)\r\n     :where([mono-menu]) [mono-subtitle]    ≡ EXTENSION ([&>span:last-child]:truncate is upstream's\r\n                          only nod to a second line)\r\n     [mono-color=…]     ≡ EXTENSION (upstream has one accent)\r\n\r\n   THE ACTIVE ROW IS A NEUTRAL WASH, not a brand gradient. Upstream paints it\r\n   `bg-sidebar-accent text-sidebar-accent-foreground font-medium` — a flat\r\n   surface tint. The pre-port sheet filled it with a two-stop brand gradient and\r\n   a coloured shadow; both are gone. `color` still tints hover and the active\r\n   row through `--mono-menu-accent`, and `color=\"surface\"` leaves it upstream's\r\n   plain `--sidebar-accent`.\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 `.dark` rule can live in component CSS.\r\n\r\n   FLAVORS set `--mono-menu-{radius,pad-x,pad-y,height,font,gap,icon-size,\r\n   subheader-*,badge-*}` (+ the per-density forms); every fallback here is\r\n   vega's value (`node scripts/basecoat-styles.mjs --grep \"sidebar nav\"`).\r\n   ========================================================================= */\r\n\r\nmono-menu,\r\nmono-menu-list {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the group\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> > [role=group] — relative flex w-full min-w-0 flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav > section > [role=group] — p-2 text-sm */\r\n[mono-menu] {\r\n  /* ── the roles, each a public knob over a Basecoat token ────────────────── */\r\n  --_mono-menu-primary: var(--mono-menu-primary, var(--primary));\r\n  --_mono-menu-secondary: var(--mono-menu-secondary, var(--secondary-foreground));\r\n  --_mono-menu-success: var(--mono-menu-success, var(--success));\r\n  --_mono-menu-danger: var(--mono-menu-danger, var(--destructive));\r\n  --_mono-menu-warning: var(--mono-menu-warning, var(--warning));\r\n  --_mono-menu-info: var(--mono-menu-info, var(--info));\r\n  --_mono-menu-teal: var(--mono-menu-teal, var(--teal));\r\n  --_mono-menu-purple: var(--mono-menu-purple, var(--purple));\r\n  --_mono-menu-neutral: var(--mono-menu-neutral, var(--neutral));\r\n  --_mono-menu-dark: var(--mono-menu-dark, var(--dark));\r\n\r\n  --_mono-menu-accent: var(--mono-menu-accent, var(--_mono-menu-accent-preset, var(--_mono-menu-primary)));\r\n  --_mono-menu-on-accent: var(--mono-menu-on-accent, var(--_mono-menu-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── ink and surface — upstream's own chrome tokens ──────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground */\r\n  --_mono-menu-surface: var(--mono-menu-surface, transparent);\r\n  --_mono-menu-text: var(--mono-menu-text, var(--sidebar-foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 …:\r\n     upstream's muted chrome ink is the row ink at 70%. */\r\n  --_mono-menu-text-soft: var(--mono-menu-text-soft, color-mix(in oklab, var(--_mono-menu-text) 70%, transparent));\r\n  --_mono-menu-text-faint: var(--mono-menu-text-faint, color-mix(in oklab, var(--_mono-menu-text) 50%, transparent));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-menu-border: var(--mono-menu-border, var(--sidebar-border));\r\n  --_mono-menu-border-lite: var(--mono-menu-border-lite, var(--_mono-menu-border));\r\n\r\n  /* ── the row's resting / hover / active paint ────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button), .sidebar nav li > details > summary — ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4\r\n     Hover is a SURFACE wash upstream, not the brand — so the role only tints\r\n     it, at `--mono-mode-tint`, and `color=\"surface\"` leaves it exactly\r\n     `--sidebar-accent`. */\r\n  --_mono-menu-hover-tint: var(--mono-menu-hover-tint, var(--_mono-menu-hover-tint-preset, var(--mono-mode-tint)));\r\n  --_mono-menu-hover-bg: var(--mono-menu-hover-bg, color-mix(in oklab, var(--_mono-menu-accent) var(--_mono-menu-hover-tint), var(--sidebar-accent)));\r\n  --_mono-menu-hover-color: var(--mono-menu-hover-color, var(--sidebar-accent-foreground));\r\n  --_mono-menu-hover-border-color: var(--mono-menu-hover-border-color, transparent);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]), .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) — bg-sidebar-accent text-sidebar-accent-foreground font-medium */\r\n  --_mono-menu-active-tint: var(--mono-menu-active-tint, var(--_mono-menu-active-tint-preset, var(--mono-mode-tint-hover)));\r\n  --_mono-menu-active-bg: var(--mono-menu-active-bg, color-mix(in oklab, var(--_mono-menu-accent) var(--_mono-menu-active-tint), var(--sidebar-accent)));\r\n  --_mono-menu-active-color: var(--mono-menu-active-color, var(--_mono-menu-active-color-preset, var(--_mono-menu-accent)));\r\n  --_mono-menu-active-weight: var(--mono-menu-active-weight, var(--mono-font-weight-medium));\r\n  /* the pre-port glow; upstream has none, so it starts at nothing */\r\n  --_mono-menu-active-shadow: var(--mono-menu-active-shadow, none);\r\n\r\n  /* ── comfortable metrics live on the unqualified root ON PURPOSE ─────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button):not([data-size]), .sidebar nav li > details > summary:not([data-size]), .sidebar nav li > :is(a, button)[data-size=default], .sidebar nav li > details > summary[data-size=default] — h-8 text-sm */\r\n  --_mono-menu-height: var(--mono-menu-height, var(--_mono-menu-height-preset, var(--mono-menu-height-comfortable, calc(var(--mono-spacing) * 8))));\r\n  --_mono-menu-pad-x: var(--mono-menu-pad-x, var(--_mono-menu-pad-x-preset, var(--mono-menu-pad-x-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-menu-pad-y: var(--mono-menu-pad-y, var(--_mono-menu-pad-y-preset, var(--mono-menu-pad-y-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-menu-font: var(--mono-menu-font, var(--_mono-menu-font-preset, var(--mono-menu-font-comfortable, var(--mono-text-sm))));\r\n  --_mono-menu-line-height: var(--mono-menu-line-height, var(--_mono-menu-line-height-preset, var(--mono-text-sm--lh)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > section > [role=group] > ul — gap-1 */\r\n  --_mono-menu-gap: var(--mono-menu-gap, var(--_mono-menu-gap-preset, var(--mono-menu-gap-comfortable, var(--mono-spacing))));\r\n  /* the row's own gap — `gap-2` between icon, label and append */\r\n  --_mono-menu-row-gap: var(--mono-menu-row-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-radius: var(--mono-menu-radius, var(--_mono-menu-radius-preset, var(--mono-menu-radius-comfortable, var(--mono-radius-md))));\r\n  /* `[&>svg]:size-4` */\r\n  --_mono-menu-icon-size: var(--mono-menu-icon-size, var(--_mono-menu-icon-size-preset, var(--mono-menu-icon-size-comfortable, calc(var(--mono-spacing) * 4))));\r\n  /* the group's own padding — `p-2` */\r\n  --_mono-menu-group-pad: var(--mono-menu-group-pad, var(--_mono-menu-group-pad-preset, var(--mono-menu-group-pad-comfortable, calc(var(--mono-spacing) * 2))));\r\n  /* ── the nested tree — EXTENSION ─────────────────────────────────────────\r\n     Upstream nests a list and leaves it flush — `.sidebar nav … ul > ul` is only\r\n     `flex min-w-0 flex-col` — so a child list reads as one straight column with\r\n     its parent. mono keeps its pre-port tree affordance instead: a child list\r\n     steps in by one gutter and hangs off a guide rule drawn under the centre of\r\n     the parent row's icon, so depth is legible without reading the labels. */\r\n  --_mono-menu-indent: var(--mono-menu-indent, var(--_mono-menu-indent-preset, var(--mono-menu-indent-comfortable, calc(var(--mono-spacing) * 4))));\r\n  --_mono-menu-guide-width: var(--mono-menu-guide-width, var(--mono-border-width));\r\n  --_mono-menu-guide-color: var(--mono-menu-guide-color, var(--_mono-menu-border-lite));\r\n  /* the guide lines up with the middle of the parent row's icon */\r\n  --_mono-menu-guide-offset: var(--mono-menu-guide-offset, calc(var(--_mono-menu-pad-x) + (var(--_mono-menu-icon-size) / 2)));\r\n\r\n  /* ── the subheader — `.sidebar nav h3` ───────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear */\r\n  --_mono-menu-subheader-height: var(--mono-menu-subheader-height, calc(var(--mono-spacing) * 8));\r\n  --_mono-menu-subheader-pad-x: var(--mono-menu-subheader-pad-x, var(--_mono-menu-subheader-pad-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-menu-subheader-font: var(--mono-menu-subheader-font, var(--mono-text-xs));\r\n  --_mono-menu-subheader-weight: var(--mono-menu-subheader-weight, var(--mono-font-weight-medium));\r\n  --_mono-menu-subheader-transform: var(--mono-menu-subheader-transform, none);\r\n  --_mono-menu-subheader-tracking: var(--mono-menu-subheader-tracking, normal);\r\n  --_mono-menu-subheader-radius: var(--mono-menu-subheader-radius, var(--_mono-menu-subheader-radius-preset, var(--mono-radius-md)));\r\n\r\n  /* ── the badge — EXTENSION, borrowing `.badge`'s shape ───────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n  --_mono-menu-badge-height: var(--mono-menu-badge-height, calc(var(--mono-spacing) * 5));\r\n  --_mono-menu-badge-pad-x: var(--mono-menu-badge-pad-x, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-badge-radius: var(--mono-menu-badge-radius, var(--mono-radius-4xl));\r\n  --_mono-menu-badge-font: var(--mono-menu-badge-font, var(--mono-text-xs));\r\n  --_mono-menu-badge-weight: var(--mono-menu-badge-weight, var(--mono-font-weight-medium));\r\n  --_mono-menu-badge-bg: var(--mono-menu-badge-bg, var(--secondary));\r\n  --_mono-menu-badge-color: var(--mono-menu-badge-color, var(--secondary-foreground));\r\n\r\n  /* the two knobs a rail collapses with — the sidebar writes them */\r\n  /* ── the rail-collapse contract ──────────────────────────────────────────\r\n     A sidebar in collapsed rail mode hands these down as inherited custom\r\n     properties, because a descendant selector cannot reach a slotted SHADOW\r\n     menu's rows. Every one of them has to be consumed here or the collapse\r\n     only happens in the build the sidebar's own legacy class rules could\r\n     reach — which is exactly how the light build ended up centring its rows\r\n     while the shadow build and the hand-written twins did not. */\r\n  --_mono-menu-label-display: var(--mono-menu-label-display, inline-flex);\r\n  /* the same switch, for the parts whose natural display is block-level */\r\n  --_mono-menu-block-display: var(--mono-menu-label-display, list-item);\r\n  --_mono-menu-row-display: var(--mono-menu-row-display, list-item);\r\n  --_mono-menu-row-justify: var(--mono-menu-row-justify, normal);\r\n  --_mono-menu-action-width: var(--mono-menu-action-width, 100%);\r\n  --_mono-menu-action-justify: var(--mono-menu-action-justify, flex-start);\r\n  --_mono-menu-action-gap: var(--mono-menu-action-gap, var(--_mono-menu-row-gap));\r\n\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: var(--_mono-menu-group-pad);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-menu-font);\r\n  color: var(--_mono-menu-text);\r\n  background: var(--_mono-menu-surface);\r\n}\r\n\r\n[mono-menu],\r\n:where([mono-menu]) *,\r\n:where([mono-menu]) *::before,\r\n:where([mono-menu]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Density — upstream's `data-size` ladder\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button)[data-size=sm], .sidebar nav li > details > summary[data-size=sm] — h-7 text-xs */\r\n[mono-menu][mono-density=\"compact\"] {\r\n  --_mono-menu-height-preset: var(--mono-menu-height-compact, calc(var(--mono-spacing) * 7));\r\n  --_mono-menu-pad-x-preset: var(--mono-menu-pad-x-compact, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-pad-y-preset: var(--mono-menu-pad-y-compact, calc(var(--mono-spacing) * 1));\r\n  --_mono-menu-font-preset: var(--mono-menu-font-compact, var(--mono-text-xs));\r\n  --_mono-menu-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-menu-gap-preset: var(--mono-menu-gap-compact, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-menu-icon-size-preset: var(--mono-menu-icon-size-compact, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-menu-group-pad-preset: var(--mono-menu-group-pad-compact, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-menu-indent-preset: var(--mono-menu-indent-compact, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button)[data-size=lg], .sidebar nav li > details > summary[data-size=lg] — h-12 text-sm */\r\n[mono-menu][mono-density=\"default\"] {\r\n  --_mono-menu-height-preset: var(--mono-menu-height-default, calc(var(--mono-spacing) * 12));\r\n  --_mono-menu-pad-x-preset: var(--mono-menu-pad-x-default, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-pad-y-preset: var(--mono-menu-pad-y-default, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-font-preset: var(--mono-menu-font-default, var(--mono-text-sm));\r\n  --_mono-menu-gap-preset: var(--mono-menu-gap-default, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-menu-icon-size-preset: var(--mono-menu-icon-size-default, calc(var(--mono-spacing) * 5));\r\n  --_mono-menu-group-pad-preset: var(--mono-menu-group-pad-default, calc(var(--mono-spacing) * 3));\r\n  --_mono-menu-indent-preset: var(--mono-menu-indent-default, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role TINTS upstream's neutral wash\r\n   ========================================= */\r\n\r\n[mono-menu][mono-color=\"primary\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-primary);\r\n  --_mono-menu-on-accent-preset: var(--primary-foreground);\r\n}\r\n[mono-menu][mono-color=\"secondary\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-secondary);\r\n  --_mono-menu-on-accent-preset: var(--secondary);\r\n}\r\n[mono-menu][mono-color=\"success\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-success);\r\n  --_mono-menu-on-accent-preset: var(--success-foreground);\r\n}\r\n[mono-menu][mono-color=\"danger\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-danger);\r\n  --_mono-menu-on-accent-preset: var(--destructive-foreground);\r\n}\r\n[mono-menu][mono-color=\"warning\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-warning);\r\n  --_mono-menu-on-accent-preset: var(--warning-foreground);\r\n}\r\n[mono-menu][mono-color=\"info\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-info);\r\n  --_mono-menu-on-accent-preset: var(--info-foreground);\r\n}\r\n[mono-menu][mono-color=\"teal\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-teal);\r\n  --_mono-menu-on-accent-preset: var(--teal-foreground);\r\n}\r\n[mono-menu][mono-color=\"purple\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-purple);\r\n  --_mono-menu-on-accent-preset: var(--purple-foreground);\r\n}\r\n[mono-menu][mono-color=\"neutral\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-neutral);\r\n  --_mono-menu-on-accent-preset: var(--neutral-foreground);\r\n}\r\n[mono-menu][mono-color=\"dark\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-dark);\r\n  --_mono-menu-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* `surface` is upstream exactly: the wash is `--sidebar-accent`, untinted, and\r\n   the active row is inked `--sidebar-accent-foreground` rather than a role. */\r\n[mono-menu][mono-color=\"surface\"] {\r\n  --_mono-menu-hover-tint-preset: 0%;\r\n  --_mono-menu-active-tint-preset: 0%;\r\n  --_mono-menu-active-color-preset: var(--sidebar-accent-foreground);\r\n}\r\n\r\n/* =========================================\r\n   The list\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul — flex w-full min-w-0 flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav > section > [role=group] > ul — gap-1\r\n   The root is in the selector so `.vp-doc ul, .vp-doc ol` (0,1,1) cannot inject\r\n   the left padding that would break a flush menu. */\r\n:where([mono-menu]) [mono-list] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  min-width: 0;\r\n  gap: var(--_mono-menu-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> ul — flex min-w-0 flex-col\r\n   Upstream stops at the flex column. The rest is mono's own tree affordance:\r\n   the child list is pushed in under the parent row's icon, hangs off a guide\r\n   rule, and clears the row above it by one list gap — a nested `ul` is a block\r\n   child of its `li`, so the parent list's `gap` never reaches it.\r\n\r\n   `:has(> *)` because a declarative row always renders its children list, even\r\n   with no children in it: an empty one would otherwise hang a guide off every\r\n   leaf row and push the next row down by a gap. */\r\n:where([mono-menu]) [mono-list] [mono-list]:has(> *) {\r\n  width: auto;\r\n  margin-top: var(--_mono-menu-gap);\r\n  margin-inline-start: var(--_mono-menu-guide-offset);\r\n  padding-inline-start: var(--_mono-menu-indent);\r\n  border-inline-start: var(--_mono-menu-guide-width) solid var(--_mono-menu-guide-color);\r\n}\r\n\r\n/* The DECLARATIVE body (`slot=\"body\"` + `<mono-menu-list>`). Each top-level\r\n   row renders its own `<ul mono-list>`, so they are siblings of one another\r\n   rather than `li`s of one list — nothing was left to carry the row gap, and a\r\n   declarative menu's top-level rows sat flush while an items-driven one (and\r\n   every hand-written twin) spaced them. Lay the body out as the list would, and\r\n   dissolve the element the author hung `slot=\"body\"` on so the rows become its\r\n   own children. */\r\n:where([mono-menu]) [mono-body] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  min-width: 0;\r\n  gap: var(--_mono-menu-gap);\r\n}\r\n\r\n:where([mono-menu]) [mono-body] > [mono-slotted] {\r\n  display: contents;\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li — relative */\r\n:where([mono-menu]) [mono-item] {\r\n  position: relative;\r\n  display: var(--_mono-menu-row-display);\r\n  justify-content: var(--_mono-menu-row-justify);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/* =========================================\r\n   The row\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li >> > a, > button, > details > summary — flex w-full items-center overflow-hidden text-left outline-hidden transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0 */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button), .sidebar nav li > details > summary — ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4 */\r\n:where([mono-menu]) :is([mono-action], [mono-group-header]) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: var(--_mono-menu-action-justify);\r\n  gap: var(--_mono-menu-action-gap);\r\n  width: var(--_mono-menu-action-width);\r\n  min-height: var(--_mono-menu-height);\r\n  padding: var(--_mono-menu-pad-y) var(--_mono-menu-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-menu-radius);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  font-size: var(--_mono-menu-font);\r\n  line-height: var(--_mono-menu-line-height);\r\n  text-align: left;\r\n  text-decoration: none;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n  outline: none;\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* VitePress's `.vp-doc a` (0,1,1) underlines and re-inks every link. */\r\n[mono-menu] a[mono-action] {\r\n  text-decoration: none;\r\n  color: inherit;\r\n}\r\n\r\n[mono-menu] a[mono-action]::after {\r\n  display: none !important;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-menu] :is([mono-action], [mono-group-header]):hover {\r\n    background: var(--_mono-menu-hover-bg);\r\n    color: var(--_mono-menu-hover-color);\r\n    border-color: var(--_mono-menu-hover-border-color);\r\n  }\r\n}\r\n\r\n/* `focus-visible:ring-2` on `ring-sidebar-ring` */\r\n[mono-menu] :is([mono-action], [mono-group-header]):focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width)\r\n    color-mix(in oklab, var(--sidebar-ring, var(--ring)) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]), .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) — bg-sidebar-accent text-sidebar-accent-foreground font-medium\r\n   A flat wash and a weight step — NOT the pre-port brand gradient and glow. */\r\n[mono-menu] [mono-item][mono-active] > :is([mono-action], [mono-group-header]) {\r\n  background: var(--_mono-menu-active-bg);\r\n  color: var(--_mono-menu-active-color);\r\n  font-weight: var(--_mono-menu-active-weight);\r\n  box-shadow: var(--_mono-menu-active-shadow);\r\n}\r\n\r\n/* `disabled:pointer-events-none disabled:opacity-50 aria-disabled:…` */\r\n[mono-menu] [mono-item][mono-disabled] > :is([mono-action], [mono-group-header]),\r\n[mono-menu] :is([mono-action], [mono-group-header]):disabled,\r\n[mono-menu][mono-disabled] :is([mono-action], [mono-group-header]) {\r\n  opacity: var(--mono-disabled-opacity, 0.5);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* `plain` — the non-`nav` mode: rows read as list entries, not links. */\r\n[mono-menu][mono-plain] :is([mono-action], [mono-group-header]) {\r\n  border-radius: 0;\r\n}\r\n\r\n/* =========================================\r\n   Row content\r\n   ========================================= */\r\n\r\n/* `[&>svg]:shrink-0 [&>svg]:size-4` */\r\n:where([mono-menu]) [mono-icon] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-menu-icon-size);\r\n  height: var(--_mono-menu-icon-size);\r\n  font-size: var(--_mono-menu-icon-size);\r\n  line-height: 1;\r\n}\r\n\r\n/* Three shapes end up inside the box and all must fill it:\r\n     shadow build, user-slotted → <slot> → ::slotted(svg)\r\n     light build, user-slotted  → <span data-mono-slot=\"icon-<id>\"> → svg\r\n     inline `item.icon` markup  → a direct child svg\r\n   The light placeholder parks the captured child, so the SVG is a GRANDchild\r\n   and a `> svg` rule misses it entirely. */\r\n[mono-menu] [mono-icon] > svg,\r\n[mono-menu] [mono-icon] > [data-mono-slot] > svg,\r\n[mono-menu] [mono-icon] slot::slotted(svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-menu] [mono-icon] > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* Class + attribute = specificity (0,2,0), deliberately. UnoCSS's `i-…`\r\n   utilities set `width`/`height: 1.2em` (presetIcons `scale: 1.2`) at (0,1,0)\r\n   and their sheet loads AFTER this one, so a single selector loses and the\r\n   glyph overflows its box. Two selectors win regardless of sheet order — and it\r\n   is the only thing that works for the SHADOW build, where this span is a\r\n   LIGHT-DOM child of the host that no shadow-scoped selector can reach.\r\n   Scoped to the menu: its OWN class (every build sets it on the span — the shadow\r\n   build's span is a light-DOM child of the host, outside [mono-menu]) OR anything\r\n   inside a [mono-menu] root (raw CSS markup writes a bare\r\n   `<span mono-glyph class=\"i-…\">`). Still (0,2,0): `:is()` weighs its heaviest\r\n   argument. A bare `[mono-glyph][mono-glyph]` is global and stretched every other\r\n   component's `[mono-glyph]` to 100% — the accordion's icon chip filled its header. */\r\n:is(.mono-menu-iconify, [mono-menu] *)[mono-glyph] {\r\n  display: inline-block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n/* An `alias` icon is the placeholder a row shows when it has no glyph of its\r\n   own — a dimmed dot rather than a hole in the column. */\r\n[mono-menu] [mono-icon][mono-alias] {\r\n  opacity: 0.55;\r\n}\r\n\r\n/* `[&>span:last-child]:truncate` */\r\n:where([mono-menu]) [mono-content] {\r\n  display: var(--_mono-menu-label-display);\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  flex: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n:where([mono-menu]) [mono-title] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  font-size: inherit;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-menu]) [mono-subtitle] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  color: var(--_mono-menu-text-soft);\r\n}\r\n\r\n:where([mono-menu]) [mono-append] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-menu-icon-size);\r\n  height: var(--_mono-menu-icon-size);\r\n  color: var(--_mono-menu-text-faint);\r\n}\r\n\r\n/* =========================================\r\n   Group — upstream's `<details><summary>`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li >> > details >> > summary >> &::after — ms-auto block size-3.5 bg-current content-[''] transition-transform ease-linear */\r\n:where([mono-menu]) [mono-chevron] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-inline-start: auto;\r\n  width: calc(var(--mono-spacing) * 3.5);\r\n  height: calc(var(--mono-spacing) * 3.5);\r\n  color: var(--_mono-menu-text-faint);\r\n  transition: rotate var(--mono-duration) linear;\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li >> > details >> &:not([open]) >> > summary >> &::after — -rotate-90 rtl:rotate-90\r\n   Upstream's marker is a chevron-DOWN, so it rotates the CLOSED state a quarter\r\n   turn back to point along the reading direction. mono's marker is a\r\n   chevron-RIGHT, which already points that way at rest — so the rotation\r\n   belongs on the OPEN state instead. Taking upstream's rule literally left an\r\n   open group pointing right and a closed one pointing up. */\r\n[mono-menu] [mono-group][mono-open] > [mono-group-header] > [mono-chevron] {\r\n  rotate: 90deg;\r\n}\r\n\r\n[dir=\"rtl\"] [mono-menu] [mono-group]:not([mono-open]) > [mono-group-header] > [mono-chevron] {\r\n  rotate: 180deg;\r\n}\r\n\r\n[mono-menu] [mono-group]:not([mono-open]) > [mono-group-body] {\r\n  display: none;\r\n}\r\n\r\n[mono-menu] [mono-group] > [mono-group-body] {\r\n  display: var(--mono-menu-group-children-display, flex);\r\n}\r\n\r\n/* =========================================\r\n   Subheader and divider\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> h3 — flex shrink-0 items-center outline-hidden transition-[margin,opacity] duration-200 ease-linear [&>svg]:shrink-0 */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear */\r\n:where([mono-menu]) [mono-subheader] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  height: var(--_mono-menu-subheader-height);\r\n  padding: 0 var(--_mono-menu-subheader-pad-x);\r\n  margin: 0;\r\n  border-radius: var(--_mono-menu-subheader-radius);\r\n  list-style: none;\r\n  font-size: var(--_mono-menu-subheader-font);\r\n  font-weight: var(--_mono-menu-subheader-weight);\r\n  text-transform: var(--_mono-menu-subheader-transform);\r\n  letter-spacing: var(--_mono-menu-subheader-tracking);\r\n  color: var(--_mono-menu-text-soft);\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> [role=separator] — w-auto */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n:where([mono-menu]) [mono-divider] {\r\n  display: var(--_mono-menu-block-display);\r\n  width: auto;\r\n  height: 0;\r\n  /* `mx-2` and nothing else: upstream gives the separator no block margin at\r\n     all, because it is a flex item of the list and the list's own `gap` already\r\n     spaces it from the rows either side. Adding a block margin on top double-\r\n     spaced it — and put the one property on this row that `.vp-doc li + li`\r\n     (0,1,2) could out-specify. */\r\n  margin-inline: calc(var(--mono-spacing) * 2);\r\n  padding: 0;\r\n  border: 0;\r\n  border-top: var(--mono-border-width) solid var(--_mono-menu-border-lite);\r\n  list-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Badge — EXTENSION, borrowing `.badge`'s shape\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n:where([mono-menu]) [mono-badge] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-spacing);\r\n  margin-inline-start: auto;\r\n  height: var(--_mono-menu-badge-height);\r\n  padding: 0 var(--_mono-menu-badge-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-menu-badge-radius);\r\n  font-size: var(--_mono-menu-badge-font);\r\n  font-weight: var(--_mono-menu-badge-weight);\r\n  line-height: 1;\r\n  background: var(--_mono-menu-badge-bg);\r\n  color: var(--_mono-menu-badge-color);\r\n}\r\n\r\n[mono-menu] [mono-badge=\"primary\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-primary) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-primary);\r\n}\r\n[mono-menu] [mono-badge=\"success\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-success) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-success);\r\n}\r\n[mono-menu] [mono-badge=\"danger\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-danger) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-danger);\r\n}\r\n[mono-menu] [mono-badge=\"warning\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-warning) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-warning);\r\n}\r\n[mono-menu] [mono-badge=\"info\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-info) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-info);\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-menu] :is([mono-action], [mono-group-header], [mono-chevron]) {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\menu\menu.css?raw.js
+var menu_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-menu — a port of Basecoat's sidebar NAVIGATION (basecoat-css@1.0.2,\r\n   vega style).\r\n\r\n   Basecoat has no standalone menu, but it has the thing a menu is: the list\r\n   inside `.sidebar nav` — a group, its rows, its headings and its separators.\r\n   That block is also the richest per-flavor surface in the whole vendor sheet,\r\n   so this port is where a flavor finally gets to say what a nav row looks like.\r\n\r\n   Styled by ATTRIBUTE, and the attributes mirror the element's props one for\r\n   one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-menu density=\"compact\" color=\"success\" :nav=\"false\">\r\n     <nav mono-menu mono-density=\"compact\" mono-color=\"success\" mono-plain\r\n          role=\"navigation\">\r\n       <ul mono-list>\r\n         <li mono-item mono-active>\r\n           <a mono-action href=\"/\" aria-current=\"page\">\r\n             <span mono-icon>…</span>\r\n             <span mono-content>\r\n               <span mono-title>Dashboard</span>\r\n               <span mono-subtitle>Overview</span>\r\n             </span>\r\n             <span mono-badge=\"info\">3</span>\r\n           </a>\r\n         </li>\r\n         <li mono-divider role=\"separator\"></li>\r\n         <li mono-subheader>Section</li>\r\n       </ul>\r\n     </nav>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-density])` =\r\n   comfortable, `:not([mono-color])` = primary, and `nav` defaults to TRUE so\r\n   `mono-plain` is what the other mode says). The old classes\r\n   (`.mono-menu.comfortable.primary.nav`) are still emitted as inert hooks\r\n   until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-menu]        ≡ .sidebar nav > section > [role=group]\r\n                          (relative flex w-full min-w-0 flex-col, p-2 text-sm)\r\n     :where([mono-menu]) [mono-list]        ≡ .sidebar nav ul (flex w-full min-w-0 flex-col, gap-1)\r\n     :where([mono-menu]) [mono-item]        ≡ .sidebar nav li (relative)\r\n     :where([mono-menu]) [mono-action]      ≡ .sidebar nav li > :is(a, button) — the row\r\n     [mono-active]      ≡ [aria-current=page], [data-active=true]\r\n                          (bg-sidebar-accent text-sidebar-accent-foreground font-medium)\r\n     :where([mono-menu]) [mono-subheader]   ≡ .sidebar nav h3\r\n     :where([mono-menu]) [mono-divider]     ≡ .sidebar nav [role=separator] (border-sidebar-border mx-2 w-auto)\r\n     :where([mono-menu]) [mono-group-header]≡ details > summary — the same row, plus the chevron\r\n     [mono-density=…]   ≡ [data-size='sm' | default | 'lg'] (h-7 / h-8 / h-12)\r\n     :where([mono-menu]) [mono-badge]       ≡ .badge — EXTENSION (upstream's rows carry none)\r\n     :where([mono-menu]) [mono-subtitle]    ≡ EXTENSION ([&>span:last-child]:truncate is upstream's\r\n                          only nod to a second line)\r\n     [mono-color=…]     ≡ EXTENSION (upstream has one accent)\r\n\r\n   THE ACTIVE ROW IS A NEUTRAL WASH, not a brand gradient. Upstream paints it\r\n   `bg-sidebar-accent text-sidebar-accent-foreground font-medium` — a flat\r\n   surface tint. The pre-port sheet filled it with a two-stop brand gradient and\r\n   a coloured shadow; both are gone. `color` still tints hover and the active\r\n   row through `--mono-menu-accent`, and `color=\"surface\"` leaves it upstream's\r\n   plain `--sidebar-accent`.\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 `.dark` rule can live in component CSS.\r\n\r\n   FLAVORS set `--mono-menu-{radius,pad-x,pad-y,height,font,gap,icon-size,\r\n   subheader-*,badge-*}` (+ the per-density forms); every fallback here is\r\n   vega's value (`node scripts/basecoat-styles.mjs --grep \"sidebar nav\"`).\r\n   ========================================================================= */\r\n\r\nmono-menu,\r\nmono-menu-list {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the group\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> > [role=group] — relative flex w-full min-w-0 flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav > section > [role=group] — p-2 text-sm */\r\n[mono-menu] {\r\n  /* ── the roles, each a public knob over a Basecoat token ────────────────── */\r\n  --_mono-menu-primary: var(--mono-menu-primary, var(--primary));\r\n  --_mono-menu-secondary: var(--mono-menu-secondary, var(--secondary-foreground));\r\n  --_mono-menu-success: var(--mono-menu-success, var(--success));\r\n  --_mono-menu-danger: var(--mono-menu-danger, var(--destructive));\r\n  --_mono-menu-warning: var(--mono-menu-warning, var(--warning));\r\n  --_mono-menu-info: var(--mono-menu-info, var(--info));\r\n  --_mono-menu-teal: var(--mono-menu-teal, var(--teal));\r\n  --_mono-menu-purple: var(--mono-menu-purple, var(--purple));\r\n  --_mono-menu-neutral: var(--mono-menu-neutral, var(--neutral));\r\n  --_mono-menu-dark: var(--mono-menu-dark, var(--dark));\r\n\r\n  --_mono-menu-accent: var(--mono-menu-accent, var(--_mono-menu-accent-preset, var(--_mono-menu-primary)));\r\n  --_mono-menu-on-accent: var(--mono-menu-on-accent, var(--_mono-menu-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── ink and surface — upstream's own chrome tokens ──────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground */\r\n  --_mono-menu-surface: var(--mono-menu-surface, transparent);\r\n  --_mono-menu-text: var(--mono-menu-text, var(--sidebar-foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 …:\r\n     upstream's muted chrome ink is the row ink at 70%. */\r\n  --_mono-menu-text-soft: var(--mono-menu-text-soft, color-mix(in oklab, var(--_mono-menu-text) 70%, transparent));\r\n  --_mono-menu-text-faint: var(--mono-menu-text-faint, color-mix(in oklab, var(--_mono-menu-text) 50%, transparent));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-menu-border: var(--mono-menu-border, var(--sidebar-border));\r\n  --_mono-menu-border-lite: var(--mono-menu-border-lite, var(--_mono-menu-border));\r\n\r\n  /* ── the row's resting / hover / active paint ────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button), .sidebar nav li > details > summary — ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4\r\n     Hover is a SURFACE wash upstream, not the brand — so the role only tints\r\n     it, at `--mono-mode-tint`, and `color=\"surface\"` leaves it exactly\r\n     `--sidebar-accent`. */\r\n  --_mono-menu-hover-tint: var(--mono-menu-hover-tint, var(--_mono-menu-hover-tint-preset, var(--mono-mode-tint)));\r\n  --_mono-menu-hover-bg: var(--mono-menu-hover-bg, color-mix(in oklab, var(--_mono-menu-accent) var(--_mono-menu-hover-tint), var(--sidebar-accent)));\r\n  --_mono-menu-hover-color: var(--mono-menu-hover-color, var(--sidebar-accent-foreground));\r\n  --_mono-menu-hover-border-color: var(--mono-menu-hover-border-color, transparent);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]), .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) — bg-sidebar-accent text-sidebar-accent-foreground font-medium */\r\n  --_mono-menu-active-tint: var(--mono-menu-active-tint, var(--_mono-menu-active-tint-preset, var(--mono-mode-tint-hover)));\r\n  --_mono-menu-active-bg: var(--mono-menu-active-bg, color-mix(in oklab, var(--_mono-menu-accent) var(--_mono-menu-active-tint), var(--sidebar-accent)));\r\n  --_mono-menu-active-color: var(--mono-menu-active-color, var(--_mono-menu-active-color-preset, var(--_mono-menu-accent)));\r\n  --_mono-menu-active-weight: var(--mono-menu-active-weight, var(--mono-font-weight-medium));\r\n  /* the pre-port glow; upstream has none, so it starts at nothing */\r\n  --_mono-menu-active-shadow: var(--mono-menu-active-shadow, none);\r\n\r\n  /* ── comfortable metrics live on the unqualified root ON PURPOSE ─────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button):not([data-size]), .sidebar nav li > details > summary:not([data-size]), .sidebar nav li > :is(a, button)[data-size=default], .sidebar nav li > details > summary[data-size=default] — h-8 text-sm */\r\n  --_mono-menu-height: var(--mono-menu-height, var(--_mono-menu-height-preset, var(--mono-menu-height-comfortable, calc(var(--mono-spacing) * 8))));\r\n  --_mono-menu-pad-x: var(--mono-menu-pad-x, var(--_mono-menu-pad-x-preset, var(--mono-menu-pad-x-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-menu-pad-y: var(--mono-menu-pad-y, var(--_mono-menu-pad-y-preset, var(--mono-menu-pad-y-comfortable, calc(var(--mono-spacing) * 2))));\r\n  --_mono-menu-font: var(--mono-menu-font, var(--_mono-menu-font-preset, var(--mono-menu-font-comfortable, var(--mono-text-sm))));\r\n  --_mono-menu-line-height: var(--mono-menu-line-height, var(--_mono-menu-line-height-preset, var(--mono-text-sm--lh)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav > section > [role=group] > ul — gap-1 */\r\n  --_mono-menu-gap: var(--mono-menu-gap, var(--_mono-menu-gap-preset, var(--mono-menu-gap-comfortable, var(--mono-spacing))));\r\n  /* the row's own gap — `gap-2` between icon, label and append */\r\n  --_mono-menu-row-gap: var(--mono-menu-row-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-radius: var(--mono-menu-radius, var(--_mono-menu-radius-preset, var(--mono-menu-radius-comfortable, var(--mono-radius-md))));\r\n  /* `[&>svg]:size-4` */\r\n  --_mono-menu-icon-size: var(--mono-menu-icon-size, var(--_mono-menu-icon-size-preset, var(--mono-menu-icon-size-comfortable, calc(var(--mono-spacing) * 4))));\r\n  /* the group's own padding — `p-2` */\r\n  --_mono-menu-group-pad: var(--mono-menu-group-pad, var(--_mono-menu-group-pad-preset, var(--mono-menu-group-pad-comfortable, calc(var(--mono-spacing) * 2))));\r\n  /* ── the nested tree — EXTENSION ─────────────────────────────────────────\r\n     Upstream nests a list and leaves it flush — `.sidebar nav … ul > ul` is only\r\n     `flex min-w-0 flex-col` — so a child list reads as one straight column with\r\n     its parent. mono keeps its pre-port tree affordance instead: a child list\r\n     steps in by one gutter and hangs off a guide rule drawn under the centre of\r\n     the parent row's icon, so depth is legible without reading the labels. */\r\n  --_mono-menu-indent: var(--mono-menu-indent, var(--_mono-menu-indent-preset, var(--mono-menu-indent-comfortable, calc(var(--mono-spacing) * 4))));\r\n  --_mono-menu-guide-width: var(--mono-menu-guide-width, var(--mono-border-width));\r\n  --_mono-menu-guide-color: var(--mono-menu-guide-color, var(--_mono-menu-border-lite));\r\n  /* the guide lines up with the middle of the parent row's icon */\r\n  --_mono-menu-guide-offset: var(--mono-menu-guide-offset, calc(var(--_mono-menu-pad-x) + (var(--_mono-menu-icon-size) / 2)));\r\n\r\n  /* ── the subheader — `.sidebar nav h3` ───────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear */\r\n  --_mono-menu-subheader-height: var(--mono-menu-subheader-height, calc(var(--mono-spacing) * 8));\r\n  --_mono-menu-subheader-pad-x: var(--mono-menu-subheader-pad-x, var(--_mono-menu-subheader-pad-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-menu-subheader-font: var(--mono-menu-subheader-font, var(--mono-text-xs));\r\n  --_mono-menu-subheader-weight: var(--mono-menu-subheader-weight, var(--mono-font-weight-medium));\r\n  --_mono-menu-subheader-transform: var(--mono-menu-subheader-transform, none);\r\n  --_mono-menu-subheader-tracking: var(--mono-menu-subheader-tracking, normal);\r\n  --_mono-menu-subheader-radius: var(--mono-menu-subheader-radius, var(--_mono-menu-subheader-radius-preset, var(--mono-radius-md)));\r\n\r\n  /* ── the badge — EXTENSION, borrowing `.badge`'s shape ───────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n  --_mono-menu-badge-height: var(--mono-menu-badge-height, calc(var(--mono-spacing) * 5));\r\n  --_mono-menu-badge-pad-x: var(--mono-menu-badge-pad-x, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-badge-radius: var(--mono-menu-badge-radius, var(--mono-radius-4xl));\r\n  --_mono-menu-badge-font: var(--mono-menu-badge-font, var(--mono-text-xs));\r\n  --_mono-menu-badge-weight: var(--mono-menu-badge-weight, var(--mono-font-weight-medium));\r\n  --_mono-menu-badge-bg: var(--mono-menu-badge-bg, var(--secondary));\r\n  --_mono-menu-badge-color: var(--mono-menu-badge-color, var(--secondary-foreground));\r\n\r\n  /* the two knobs a rail collapses with — the sidebar writes them */\r\n  /* ── the rail-collapse contract ──────────────────────────────────────────\r\n     A sidebar in collapsed rail mode hands these down as inherited custom\r\n     properties, because a descendant selector cannot reach a slotted SHADOW\r\n     menu's rows. Every one of them has to be consumed here or the collapse\r\n     only happens in the build the sidebar's own legacy class rules could\r\n     reach — which is exactly how the light build ended up centring its rows\r\n     while the shadow build and the hand-written twins did not. */\r\n  --_mono-menu-label-display: var(--mono-menu-label-display, inline-flex);\r\n  /* the same switch, for the parts whose natural display is block-level */\r\n  --_mono-menu-block-display: var(--mono-menu-label-display, list-item);\r\n  --_mono-menu-row-display: var(--mono-menu-row-display, list-item);\r\n  --_mono-menu-row-justify: var(--mono-menu-row-justify, normal);\r\n  --_mono-menu-action-width: var(--mono-menu-action-width, 100%);\r\n  --_mono-menu-action-justify: var(--mono-menu-action-justify, flex-start);\r\n  --_mono-menu-action-gap: var(--mono-menu-action-gap, var(--_mono-menu-row-gap));\r\n\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: var(--_mono-menu-group-pad);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-menu-font);\r\n  color: var(--_mono-menu-text);\r\n  background: var(--_mono-menu-surface);\r\n}\r\n\r\n[mono-menu],\r\n:where([mono-menu]) *,\r\n:where([mono-menu]) *::before,\r\n:where([mono-menu]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Density — upstream's `data-size` ladder\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button)[data-size=sm], .sidebar nav li > details > summary[data-size=sm] — h-7 text-xs */\r\n[mono-menu][mono-density=\"compact\"] {\r\n  --_mono-menu-height-preset: var(--mono-menu-height-compact, calc(var(--mono-spacing) * 7));\r\n  --_mono-menu-pad-x-preset: var(--mono-menu-pad-x-compact, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-pad-y-preset: var(--mono-menu-pad-y-compact, calc(var(--mono-spacing) * 1));\r\n  --_mono-menu-font-preset: var(--mono-menu-font-compact, var(--mono-text-xs));\r\n  --_mono-menu-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-menu-gap-preset: var(--mono-menu-gap-compact, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-menu-icon-size-preset: var(--mono-menu-icon-size-compact, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-menu-group-pad-preset: var(--mono-menu-group-pad-compact, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-menu-indent-preset: var(--mono-menu-indent-compact, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button)[data-size=lg], .sidebar nav li > details > summary[data-size=lg] — h-12 text-sm */\r\n[mono-menu][mono-density=\"default\"] {\r\n  --_mono-menu-height-preset: var(--mono-menu-height-default, calc(var(--mono-spacing) * 12));\r\n  --_mono-menu-pad-x-preset: var(--mono-menu-pad-x-default, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-pad-y-preset: var(--mono-menu-pad-y-default, calc(var(--mono-spacing) * 2));\r\n  --_mono-menu-font-preset: var(--mono-menu-font-default, var(--mono-text-sm));\r\n  --_mono-menu-gap-preset: var(--mono-menu-gap-default, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-menu-icon-size-preset: var(--mono-menu-icon-size-default, calc(var(--mono-spacing) * 5));\r\n  --_mono-menu-group-pad-preset: var(--mono-menu-group-pad-default, calc(var(--mono-spacing) * 3));\r\n  --_mono-menu-indent-preset: var(--mono-menu-indent-default, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role TINTS upstream's neutral wash\r\n   ========================================= */\r\n\r\n[mono-menu][mono-color=\"primary\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-primary);\r\n  --_mono-menu-on-accent-preset: var(--primary-foreground);\r\n}\r\n[mono-menu][mono-color=\"secondary\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-secondary);\r\n  --_mono-menu-on-accent-preset: var(--secondary);\r\n}\r\n[mono-menu][mono-color=\"success\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-success);\r\n  --_mono-menu-on-accent-preset: var(--success-foreground);\r\n}\r\n[mono-menu][mono-color=\"danger\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-danger);\r\n  --_mono-menu-on-accent-preset: var(--destructive-foreground);\r\n}\r\n[mono-menu][mono-color=\"warning\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-warning);\r\n  --_mono-menu-on-accent-preset: var(--warning-foreground);\r\n}\r\n[mono-menu][mono-color=\"info\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-info);\r\n  --_mono-menu-on-accent-preset: var(--info-foreground);\r\n}\r\n[mono-menu][mono-color=\"teal\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-teal);\r\n  --_mono-menu-on-accent-preset: var(--teal-foreground);\r\n}\r\n[mono-menu][mono-color=\"purple\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-purple);\r\n  --_mono-menu-on-accent-preset: var(--purple-foreground);\r\n}\r\n[mono-menu][mono-color=\"neutral\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-neutral);\r\n  --_mono-menu-on-accent-preset: var(--neutral-foreground);\r\n}\r\n[mono-menu][mono-color=\"dark\"] {\r\n  --_mono-menu-accent-preset: var(--_mono-menu-dark);\r\n  --_mono-menu-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* `surface` is upstream exactly: the wash is `--sidebar-accent`, untinted, and\r\n   the active row is inked `--sidebar-accent-foreground` rather than a role. */\r\n[mono-menu][mono-color=\"surface\"] {\r\n  --_mono-menu-hover-tint-preset: 0%;\r\n  --_mono-menu-active-tint-preset: 0%;\r\n  --_mono-menu-active-color-preset: var(--sidebar-accent-foreground);\r\n}\r\n\r\n/* =========================================\r\n   The list\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul — flex w-full min-w-0 flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav > section > [role=group] > ul — gap-1\r\n   The root is in the selector so `.vp-doc ul, .vp-doc ol` (0,1,1) cannot inject\r\n   the left padding that would break a flush menu. */\r\n:where([mono-menu]) [mono-list] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  min-width: 0;\r\n  gap: var(--_mono-menu-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> ul — flex min-w-0 flex-col\r\n   Upstream stops at the flex column. The rest is mono's own tree affordance:\r\n   the child list is pushed in under the parent row's icon, hangs off a guide\r\n   rule, and clears the row above it by one list gap — a nested `ul` is a block\r\n   child of its `li`, so the parent list's `gap` never reaches it.\r\n\r\n   `:has(> *)` because a declarative row always renders its children list, even\r\n   with no children in it: an empty one would otherwise hang a guide off every\r\n   leaf row and push the next row down by a gap. */\r\n:where([mono-menu]) [mono-list] [mono-list]:has(> *) {\r\n  width: auto;\r\n  margin-top: var(--_mono-menu-gap);\r\n  margin-inline-start: var(--_mono-menu-guide-offset);\r\n  padding-inline-start: var(--_mono-menu-indent);\r\n  border-inline-start: var(--_mono-menu-guide-width) solid var(--_mono-menu-guide-color);\r\n}\r\n\r\n/* The DECLARATIVE body (`slot=\"body\"` + `<mono-menu-list>`). Each top-level\r\n   row renders its own `<ul mono-list>`, so they are siblings of one another\r\n   rather than `li`s of one list — nothing was left to carry the row gap, and a\r\n   declarative menu's top-level rows sat flush while an items-driven one (and\r\n   every hand-written twin) spaced them. Lay the body out as the list would, and\r\n   dissolve the element the author hung `slot=\"body\"` on so the rows become its\r\n   own children. */\r\n:where([mono-menu]) [mono-body] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  min-width: 0;\r\n  gap: var(--_mono-menu-gap);\r\n}\r\n\r\n:where([mono-menu]) [mono-body] > [mono-slotted] {\r\n  display: contents;\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li — relative */\r\n:where([mono-menu]) [mono-item] {\r\n  position: relative;\r\n  display: var(--_mono-menu-row-display);\r\n  justify-content: var(--_mono-menu-row-justify);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n/* =========================================\r\n   The row\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li >> > a, > button, > details > summary — flex w-full items-center overflow-hidden text-left outline-hidden transition-[width,height,padding] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0 */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button), .sidebar nav li > details > summary — ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-sm focus-visible:ring-2 text-left focus-visible:outline-hidden data-[open]:hover:bg-sidebar-accent data-[open]:hover:text-sidebar-accent-foreground [&>svg]:shrink-0 [&>svg]:size-4 */\r\n:where([mono-menu]) :is([mono-action], [mono-group-header]) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: var(--_mono-menu-action-justify);\r\n  gap: var(--_mono-menu-action-gap);\r\n  width: var(--_mono-menu-action-width);\r\n  min-height: var(--_mono-menu-height);\r\n  padding: var(--_mono-menu-pad-y) var(--_mono-menu-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-menu-radius);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  font-size: var(--_mono-menu-font);\r\n  line-height: var(--_mono-menu-line-height);\r\n  text-align: left;\r\n  text-decoration: none;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n  outline: none;\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* VitePress's `.vp-doc a` (0,1,1) underlines and re-inks every link. */\r\n[mono-menu] a[mono-action] {\r\n  text-decoration: none;\r\n  color: inherit;\r\n}\r\n\r\n[mono-menu] a[mono-action]::after {\r\n  display: none !important;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-menu] :is([mono-action], [mono-group-header]):hover {\r\n    background: var(--_mono-menu-hover-bg);\r\n    color: var(--_mono-menu-hover-color);\r\n    border-color: var(--_mono-menu-hover-border-color);\r\n  }\r\n}\r\n\r\n/* `focus-visible:ring-2` on `ring-sidebar-ring` */\r\n[mono-menu] :is([mono-action], [mono-group-header]):focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width)\r\n    color-mix(in oklab, var(--sidebar-ring, var(--ring)) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav li > :is(a, button):is([aria-current=page], [data-active=true]), .sidebar nav li > details > summary:is([aria-current=page], [data-active=true]) — bg-sidebar-accent text-sidebar-accent-foreground font-medium\r\n   A flat wash and a weight step — NOT the pre-port brand gradient and glow. */\r\n[mono-menu] [mono-item][mono-active] > :is([mono-action], [mono-group-header]) {\r\n  background: var(--_mono-menu-active-bg);\r\n  color: var(--_mono-menu-active-color);\r\n  font-weight: var(--_mono-menu-active-weight);\r\n  box-shadow: var(--_mono-menu-active-shadow);\r\n}\r\n\r\n/* `disabled:pointer-events-none disabled:opacity-50 aria-disabled:…` */\r\n[mono-menu] [mono-item][mono-disabled] > :is([mono-action], [mono-group-header]),\r\n[mono-menu] :is([mono-action], [mono-group-header]):disabled,\r\n[mono-menu][mono-disabled] :is([mono-action], [mono-group-header]) {\r\n  opacity: var(--mono-disabled-opacity, 0.5);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* `plain` — the non-`nav` mode: rows read as list entries, not links. */\r\n[mono-menu][mono-plain] :is([mono-action], [mono-group-header]) {\r\n  border-radius: 0;\r\n}\r\n\r\n/* =========================================\r\n   Row content\r\n   ========================================= */\r\n\r\n/* `[&>svg]:shrink-0 [&>svg]:size-4` */\r\n:where([mono-menu]) [mono-icon] {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-menu-icon-size);\r\n  height: var(--_mono-menu-icon-size);\r\n  font-size: var(--_mono-menu-icon-size);\r\n  line-height: 1;\r\n}\r\n\r\n/* Three shapes end up inside the box and all must fill it:\r\n     shadow build, user-slotted → <slot> → ::slotted(svg)\r\n     light build, user-slotted  → <span data-mono-slot=\"icon-<id>\"> → svg\r\n     inline `item.icon` markup  → a direct child svg\r\n   The light placeholder parks the captured child, so the SVG is a GRANDchild\r\n   and a `> svg` rule misses it entirely. */\r\n[mono-menu] [mono-icon] > svg,\r\n[mono-menu] [mono-icon] > [data-mono-slot] > svg,\r\n[mono-menu] [mono-icon] slot::slotted(svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-menu] [mono-icon] > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* Class + attribute = specificity (0,2,0), deliberately. UnoCSS's `i-…`\r\n   utilities set `width`/`height: 1.2em` (presetIcons `scale: 1.2`) at (0,1,0)\r\n   and their sheet loads AFTER this one, so a single selector loses and the\r\n   glyph overflows its box. Two selectors win regardless of sheet order — and it\r\n   is the only thing that works for the SHADOW build, where this span is a\r\n   LIGHT-DOM child of the host that no shadow-scoped selector can reach.\r\n   Scoped to the menu: its OWN class (every build sets it on the span — the shadow\r\n   build's span is a light-DOM child of the host, outside [mono-menu]) OR anything\r\n   inside a [mono-menu] root (raw CSS markup writes a bare\r\n   `<span mono-glyph class=\"i-…\">`). Still (0,2,0): `:is()` weighs its heaviest\r\n   argument. A bare `[mono-glyph][mono-glyph]` is global and stretched every other\r\n   component's `[mono-glyph]` to 100% — the accordion's icon chip filled its header. */\r\n:is(.mono-menu-iconify, [mono-menu] *)[mono-glyph] {\r\n  display: inline-block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n  color: inherit;\r\n}\r\n\r\n/* An `alias` icon is the placeholder a row shows when it has no glyph of its\r\n   own — a dimmed dot rather than a hole in the column. */\r\n[mono-menu] [mono-icon][mono-alias] {\r\n  opacity: 0.55;\r\n}\r\n\r\n/* `[&>span:last-child]:truncate` */\r\n:where([mono-menu]) [mono-content] {\r\n  display: var(--_mono-menu-label-display);\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  flex: 1;\r\n  overflow: hidden;\r\n}\r\n\r\n:where([mono-menu]) [mono-title] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  font-size: inherit;\r\n  color: inherit;\r\n}\r\n\r\n:where([mono-menu]) [mono-subtitle] {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  color: var(--_mono-menu-text-soft);\r\n}\r\n\r\n:where([mono-menu]) [mono-append] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-menu-icon-size);\r\n  height: var(--_mono-menu-icon-size);\r\n  color: var(--_mono-menu-text-faint);\r\n}\r\n\r\n/* =========================================\r\n   Group — upstream's `<details><summary>`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li >> > details >> > summary >> &::after — ms-auto block size-3.5 bg-current content-[''] transition-transform ease-linear */\r\n:where([mono-menu]) [mono-chevron] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-inline-start: auto;\r\n  width: calc(var(--mono-spacing) * 3.5);\r\n  height: calc(var(--mono-spacing) * 3.5);\r\n  color: var(--_mono-menu-text-faint);\r\n  transition: rotate var(--mono-duration) linear;\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> ul >> li >> > details >> &:not([open]) >> > summary >> &::after — -rotate-90 rtl:rotate-90\r\n   Upstream's marker is a chevron-DOWN, so it rotates the CLOSED state a quarter\r\n   turn back to point along the reading direction. mono's marker is a\r\n   chevron-RIGHT, which already points that way at rest — so the rotation\r\n   belongs on the OPEN state instead. Taking upstream's rule literally left an\r\n   open group pointing right and a closed one pointing up. */\r\n[mono-menu] [mono-group][mono-open] > [mono-group-header] > [mono-chevron] {\r\n  rotate: 90deg;\r\n}\r\n\r\n[dir=\"rtl\"] [mono-menu] [mono-group]:not([mono-open]) > [mono-group-header] > [mono-chevron] {\r\n  rotate: 180deg;\r\n}\r\n\r\n[mono-menu] [mono-group]:not([mono-open]) > [mono-group-body] {\r\n  display: none;\r\n}\r\n\r\n[mono-menu] [mono-group] > [mono-group-body] {\r\n  display: var(--mono-menu-group-children-display, flex);\r\n}\r\n\r\n/* =========================================\r\n   Subheader and divider\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> > section >> h3 — flex shrink-0 items-center outline-hidden transition-[margin,opacity] duration-200 ease-linear [&>svg]:shrink-0 */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav h3 — text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium focus-visible:ring-2 [&>svg]:size-4 transition-[margin,opacity] duration-200 ease-linear */\r\n:where([mono-menu]) [mono-subheader] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  height: var(--_mono-menu-subheader-height);\r\n  padding: 0 var(--_mono-menu-subheader-pad-x);\r\n  margin: 0;\r\n  border-radius: var(--_mono-menu-subheader-radius);\r\n  list-style: none;\r\n  font-size: var(--_mono-menu-subheader-font);\r\n  font-weight: var(--_mono-menu-subheader-weight);\r\n  text-transform: var(--_mono-menu-subheader-transform);\r\n  letter-spacing: var(--_mono-menu-subheader-tracking);\r\n  color: var(--_mono-menu-text-soft);\r\n}\r\n\r\n/* basecoat@1.0.2 components/sidebar.css .sidebar >> nav >> [role=separator] — w-auto */\r\n/* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n:where([mono-menu]) [mono-divider] {\r\n  display: var(--_mono-menu-block-display);\r\n  width: auto;\r\n  height: 0;\r\n  /* `mx-2` and nothing else: upstream gives the separator no block margin at\r\n     all, because it is a flex item of the list and the list's own `gap` already\r\n     spaces it from the rows either side. Adding a block margin on top double-\r\n     spaced it — and put the one property on this row that `.vp-doc li + li`\r\n     (0,1,2) could out-specify. */\r\n  margin-inline: calc(var(--mono-spacing) * 2);\r\n  padding: 0;\r\n  border: 0;\r\n  border-top: var(--mono-border-width) solid var(--_mono-menu-border-lite);\r\n  list-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Badge — EXTENSION, borrowing `.badge`'s shape\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! */\r\n:where([mono-menu]) [mono-badge] {\r\n  flex-shrink: 0;\r\n  display: var(--_mono-menu-label-display);\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-spacing);\r\n  margin-inline-start: auto;\r\n  height: var(--_mono-menu-badge-height);\r\n  padding: 0 var(--_mono-menu-badge-pad-x);\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--_mono-menu-badge-radius);\r\n  font-size: var(--_mono-menu-badge-font);\r\n  font-weight: var(--_mono-menu-badge-weight);\r\n  line-height: 1;\r\n  background: var(--_mono-menu-badge-bg);\r\n  color: var(--_mono-menu-badge-color);\r\n}\r\n\r\n[mono-menu] [mono-badge=\"primary\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-primary) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-primary);\r\n}\r\n[mono-menu] [mono-badge=\"success\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-success) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-success);\r\n}\r\n[mono-menu] [mono-badge=\"danger\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-danger) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-danger);\r\n}\r\n[mono-menu] [mono-badge=\"warning\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-warning) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-warning);\r\n}\r\n[mono-menu] [mono-badge=\"info\"] {\r\n  background: color-mix(in oklab, var(--_mono-menu-info) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-menu-info);\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-menu] :is([mono-action], [mono-group-header], [mono-chevron]) {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/menu/mono-menu.shadow.ts
-var MonoMenuShadow = class MonoMenuShadow extends withShadowUtilityStyles(MonoMenuCore(LitElement)) {
+let MonoMenuShadow = class MonoMenuShadow extends withShadowUtilityStyles(MonoMenuCore(LitElement)) {
 	static {
-		this.styles = [unsafeCSS(toShadowCss(menu_default, { host: "mono-menu" }))];
+		this.styles = [unsafeCSS(toShadowCss(menu_css_raw_default, { host: "mono-menu" }))];
 	}
 	_useIconSlots() {
 		return true;
@@ -895,5 +904,6 @@ var MonoMenuShadow = class MonoMenuShadow extends withShadowUtilityStyles(MonoMe
 	}
 };
 MonoMenuShadow = __decorate([customElement("mono-shadow-menu")], MonoMenuShadow);
+
 //#endregion
-export { MonoMenuCore, MonoMenuShadow, collectDefaultOpenGroups, findActivePath, findItem, generateMenuRootClasses, getMenuAlias, isDivider, isGroup, isIconifyClass, isItem, isSubheader, renderMenuAppend, renderMenuBadge, renderMenuDivider, renderMenuGroup, renderMenuGroupsOnly, renderMenuIcon, renderMenuItemRow, renderMenuList, renderMenuSubheader, validateMenuProps };
+export { MonoMenuCore, MonoMenuShadow, collectDefaultOpenGroups, findActivePath, findItem, generateMenuRootClasses, getMenuAlias, isDivider, isGroup, isIconifyClass, isItem, isSubheader, renderMenuAppend, renderMenuBadge, renderMenuDivider, renderMenuGroup, renderMenuGroupsOnly, renderMenuIcon, renderMenuItemRow, renderMenuList, renderMenuSubheader, validateMenuProps };