@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/input.js

@@ -1,17 +1,18 @@
-import { l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { t as buildSizeStyle } from "../css-size-DhHSVZJK.js";
-import { t as MonoFormControlCore } from "../form-control-core-eeRr0zLU.js";
-import { n as cssPart } from "../css-class-BRKRzHx-.js";
+import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
+import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
+import { n as cssPart } from "../css-class-B6Tc_MAx.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 `.`.
 *
@@ -258,9 +259,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);
@@ -284,7 +286,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);
@@ -660,7 +662,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 {}
@@ -962,12 +965,14 @@ var MonoInputCore = (superClass) => {
 	__decorate([state()], MonoInputCoreClass.prototype, "_hasHelperSlotState", void 0);
 	return MonoInputCoreClass;
 };
+
 //#endregion
-//#region src/components/input/input.css?raw
-var input_default = "/* =========================================================================\r\n   mono-input — a port of Basecoat's `.field` / `.input-group` / `.label`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.input-group:has([aria-invalid])`) —\r\n   and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Name\">\r\n     <div mono-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Name</label>\r\n       <div mono-field><input mono-native></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,\r\n   `:not([mono-validation-state])` = default). The element renders these\r\n   attributes on its wrapper (both builds); the old classes\r\n   (`.mono-input.sm.danger.filled`) are still emitted as inert hooks for\r\n   consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-input]                                  ≡ .field            (flex column, gap-3)\r\n     [mono-input] > [mono-label]                   ≡ .field > label / .label\r\n     [mono-input] > [mono-field]                   ≡ .input-group      (the bordered box: h-9 rounded-md border-input shadow-xs)\r\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, px-2.5 text-sm; `.input` for the metrics)\r\n     [mono-field] > [mono-prefix|mono-suffix]      ≡ .input-group > span[data-align='start'|'end']\r\n     [mono-field] > [mono-clear]                   ≡ .input-group > button[data-align='end']:has(> svg)\r\n     [mono-input] > [mono-message-wrap]            ≡ .field > p\r\n     [mono-message=\"helper\"]                       ≡ .field > p        (text-sm text-muted-foreground)\r\n     [mono-message=\"invalid\"]                      ≡ .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern with --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group: border-transparent bg-input/50, ring-ring/30)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: rounded-none border-b-input px-0, no ring)\r\n     [mono-disabled] / [mono-native]:disabled      ≡ .input-group:has(input:disabled) — opacity-50\r\n     [mono-readonly]                               ≡ EXTENSION (a muted surface)\r\n\r\n   Specificity contract (same as the pre-port class sheet, and as checkbox.css):\r\n   a part's RESTING rule is written `:where([mono-input]) [mono-part]` = exactly\r\n   one attribute, (0,1,0) — so a utility class composed onto the markup (the\r\n   `cssClass` prop, or a hand-written class in a css/ demo) wins by source order,\r\n   while the prop and state rules ([mono-size], [mono-variant], [mono-disabled],\r\n   :focus-within, [aria-invalid], …) stay heavier and still win over it.\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-field], [mono-prefix] / [mono-suffix] (+ [mono-empty] in the shadow\r\n   build for an unassigned slot), [mono-native], [mono-clear] > [mono-icon],\r\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\r\n   `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\r\n   `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\r\n   `box-shadow: ring, shadow` below, and every `dark:` variant → a\r\n   `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can).\r\n\r\n   FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set\r\n   the knobs read below — `--mono-input-radius`, `--mono-input-padding-x-<size>`,\r\n   `--mono-input-font-<size>`, `--mono-input-line-height`, `--mono-input-ring-width`,\r\n   `--mono-input-ring-alpha`, `--mono-input-gap`, `--mono-input-affix-*`,\r\n   `--mono-input-label-*`, `--mono-input-message-*`, `--mono-input-clear-radius`,\r\n   `--mono-input-disabled-bg`, and the outline-variant set `--mono-input-outline-\r\n   {bg,border-color,side-border-color,shadow,ring-width,radius,padding-x,affix-padding}`.\r\n   Every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(field|label|input|input-group)\\b\"`).\r\n\r\n   The public `--mono-input-*` knobs and the three-tier resolver\r\n   (`--mono-input-x` → `--_mono-input-x-preset` → base) are unchanged: a\r\n   colour / variant attribute only ever writes a `*-preset` slot, so a\r\n   consumer's own `--mono-input-bg` on the host still wins.\r\n   ========================================================================= */\r\n\r\nmono-input {\r\n  display: block;\r\n}\r\n\r\n[mono-input] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-input-text: var(--mono-input-color, var(--mono-input-text, var(--foreground)));\r\n  --_mono-input-placeholder: var(--mono-input-placeholder, var(--muted-foreground));\r\n  --_mono-input-muted: var(--mono-input-muted, var(--muted-foreground));\r\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\r\n  --_mono-input-primary: var(--mono-input-primary, var(--ring));\r\n  --_mono-input-secondary: var(--mono-input-secondary, var(--muted-foreground));\r\n  --_mono-input-success: var(--mono-input-success, var(--success));\r\n  --_mono-input-danger: var(--mono-input-danger, var(--destructive));\r\n  --_mono-input-warning: var(--mono-input-warning, var(--warning));\r\n  --_mono-input-info: var(--mono-input-info, var(--info));\r\n  --_mono-input-teal: var(--mono-input-teal, var(--teal));\r\n  --_mono-input-purple: var(--mono-input-purple, var(--purple));\r\n  --_mono-input-neutral: var(--mono-input-neutral, var(--neutral));\r\n  --_mono-input-dark: var(--mono-input-dark, var(--dark));\r\n  --_mono-input-valid: var(--mono-input-valid, var(--success));\r\n  --_mono-input-invalid: var(--mono-input-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\r\n  --_mono-input-ring-color: var(--mono-input-ring-color, var(--mono-input-focus-color, var(--_mono-input-ring-color-preset, var(--_mono-input-primary))));\r\n  --_mono-input-ring-width: var(--mono-input-ring-width, var(--_mono-input-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-input-ring-alpha: var(--mono-input-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-input-border-color: var(--mono-input-rest-border, var(--mono-input-border-color, var(--_mono-input-border-color-preset, var(--input))));\r\n  --_mono-input-bg: var(--mono-input-bg, var(--mono-input-surface, var(--_mono-input-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-input-shadow: var(--mono-input-shadow, var(--_mono-input-shadow-preset, 0 0 #0000));\r\n  --_mono-input-affix-padding: var(--mono-input-affix-padding, var(--_mono-input-affix-padding-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-input>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\r\n  --_mono-input-height: var(--mono-input-height-md, var(--mono-control-height-md));\r\n  --_mono-input-radius: var(--mono-input-radius-md, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-md, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-sm));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\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-input-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-input-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-input],\r\n:where([mono-input]) *,\r\n:where([mono-input]) *::before,\r\n:where([mono-input]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders every slot wrapper and marks an unassigned one\r\n   `mono-empty`; the light build simply omits it. Inert in the light build. */\r\n:where([mono-input]) :is([mono-label], [mono-prefix], [mono-suffix], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the field's painted height IS the token (tests/perf/field-heights).\r\n   EXTENSION: Basecoat sizes only its select (data-size=sm); the ladder is the\r\n   shared --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n/* `.input` is text-base under 48rem (no iOS zoom) and md:text-sm above it —\r\n   vendor behaviour, kept for the default size only. */\r\n@media (width < 48rem) {\r\n  [mono-input]:is(:not([mono-size]), [mono-size=\"md\"]) {\r\n    --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-base));\r\n    --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-base--lh)));\r\n  }\r\n}\r\n\r\n[mono-input][mono-size=\"xs\"] {\r\n  --_mono-input-height: var(--mono-input-height-xs, var(--mono-control-height-xs));\r\n  --_mono-input-radius: var(--mono-input-radius-xs, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xs, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-input-font-size: var(--mono-input-font-xs, var(--mono-text-xs));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-input][mono-size=\"sm\"] {\r\n  --_mono-input-height: var(--mono-input-height-sm, var(--mono-control-height-sm));\r\n  --_mono-input-radius: var(--mono-input-radius-sm, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-sm, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 5);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-input][mono-size=\"lg\"] {\r\n  --_mono-input-height: var(--mono-input-height-lg, var(--mono-control-height-lg));\r\n  --_mono-input-radius: var(--mono-input-radius-lg, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-lg, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-input][mono-size=\"xl\"] {\r\n  --_mono-input-height: var(--mono-input-height-xl, var(--mono-control-height-xl));\r\n  --_mono-input-radius: var(--mono-input-radius-xl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-input-font-size: var(--mono-input-font-xl, var(--mono-text-base));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-input][mono-size=\"xxl\"] {\r\n  --_mono-input-height: var(--mono-input-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-input-radius: var(--mono-input-radius-xxl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xxl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-input-font-size: var(--mono-input-font-xxl, var(--mono-text-lg));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   shadow-xs, bg-transparent (dark:bg-input/30 via --mono-mode-surface). The\r\n   `--mono-input-outline-*` knobs are how a flavor restyles THIS variant alone\r\n   (maia bg-input/30, luma / rhea border-transparent bg-input/50, sera the\r\n   underline) without touching filled / underlined. */\r\n[mono-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-input-bg-preset: var(--mono-input-outline-bg);\r\n  --_mono-input-border-color-preset: var(--mono-input-outline-border-color);\r\n  --_mono-input-side-border-color-preset: var(--mono-input-outline-side-border-color);\r\n  --_mono-input-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-input-ring-width-preset: var(--mono-input-outline-ring-width);\r\n  --_mono-input-radius-preset: var(--mono-input-outline-radius);\r\n  --_mono-input-padding-x-preset: var(--mono-input-outline-padding-x);\r\n  --_mono-input-affix-padding-preset: var(--mono-input-outline-affix-padding);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group:\r\n   border-transparent bg-input/50, no shadow-xs (the ring stays) */\r\n[mono-input][mono-variant=\"filled\"] {\r\n  --_mono-input-bg-preset: var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-input-border-color-preset: transparent;\r\n  --_mono-input-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no\r\n   shadow, no ring, focus-within:border-b-ring, has-[aria-invalid]:border-b-destructive.\r\n   Only the bottom edge paints; the sides are transparent in every state. */\r\n[mono-input][mono-variant=\"underlined\"] {\r\n  --_mono-input-bg-preset: transparent;\r\n  --_mono-input-side-border-color-preset: transparent;\r\n  --_mono-input-shadow-preset: 0 0 #0000;\r\n  --_mono-input-ring-width-preset: 0px;\r\n  --_mono-input-radius-preset: 0;\r\n  --_mono-input-padding-x-preset: 0;\r\n  --_mono-input-affix-padding-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border).\r\n   No resting tint: Basecoat fields rest on --input whatever their role.\r\n   ========================================= */\r\n\r\n[mono-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-primary);\r\n}\r\n[mono-input][mono-color=\"secondary\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-secondary);\r\n}\r\n[mono-input][mono-color=\"success\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-success);\r\n}\r\n[mono-input][mono-color=\"danger\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-danger);\r\n}\r\n[mono-input][mono-color=\"warning\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-warning);\r\n}\r\n[mono-input][mono-color=\"info\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-info);\r\n}\r\n[mono-input][mono-color=\"teal\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-teal);\r\n}\r\n[mono-input][mono-color=\"purple\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-purple);\r\n}\r\n[mono-input][mono-color=\"neutral\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-neutral);\r\n}\r\n[mono-input][mono-color=\"dark\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-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 — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n:where([mono-input]) > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-input-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-label-line-height, 1);\r\n  font-weight: var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-input-label-text-transform, none);\r\n  letter-spacing: var(--mono-input-label-letter-spacing, normal);\r\n  color: var(--_mono-input-text);\r\n  user-select: none;\r\n}\r\n\r\n/* in-data-[disabled=true]:opacity-50 / peer-disabled:opacity-50 */\r\n[mono-input][mono-disabled] > [mono-label],\r\n[mono-input]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-input][mono-validation-state=\"invalid\"] > [mono-label],\r\n[mono-input]:has(> [mono-field] > [mono-native][aria-invalid=\"true\"]) > [mono-label] {\r\n  color: var(--_mono-input-invalid);\r\n}\r\n\r\n/* EXTENSION — the required asterisk */\r\n:where([mono-input]) [mono-required-mark] {\r\n  color: var(--_mono-input-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the bordered box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group */\r\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border\r\n   border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50; mono: `--tw-ring-*` flattened to\r\n   the ring + shadow slots, the height is the control token, and the side\r\n   edges read their own slot so a flavor can keep only the bottom one */\r\n:where([mono-input]) > [mono-field] {\r\n  --_mono-input-bc: var(--_mono-input-border-color);\r\n  --_mono-input-side-bc: var(--mono-input-side-border-color, var(--_mono-input-side-border-color-preset, var(--_mono-input-bc)));\r\n  /* The focus / state ring slot — `0 0 #0000` until a state sets it. Kept as a\r\n     slot so a variant can neutralise the resting shadow without ever writing\r\n     `box-shadow: none` (which would out-specify the ring). */\r\n  --_mono-input-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-input-height);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-input-bc);\r\n  border-top-color: var(--_mono-input-side-bc);\r\n  border-inline-color: var(--_mono-input-side-bc);\r\n  border-radius: var(--_mono-input-radius);\r\n  background: var(--_mono-input-bg);\r\n  color: var(--_mono-input-text);\r\n  box-shadow: var(--_mono-input-ring), var(--_mono-input-shadow);\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  /* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n  &:focus-within {\r\n    --_mono-input-bc: var(--_mono-input-ring-color);\r\n    --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20\r\n   (dark: border /50, ring /40 — carried by the mode tokens). The ring is\r\n   permanent, and it wins over the focus ring — same as the vendor order. */\r\n[mono-input][mono-validation-state=\"invalid\"] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-input-bc: var(--mono-mode-invalid-border);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-input][mono-validation-state=\"valid\"] > [mono-field] {\r\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-input][mono-validation-state=\"warning\"] > [mono-field] {\r\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface */\r\n[mono-input][mono-readonly] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native]:read-only:not(:disabled)) {\r\n  background: var(--mono-input-readonly-bg, var(--muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50\r\n   (`--mono-input-disabled-bg`: nova / lyra add disabled:bg-input/50) */\r\n[mono-input][mono-disabled] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background: var(--mono-input-disabled-bg, var(--_mono-input-bg));\r\n}\r\n\r\n/* =========================================\r\n   The native input\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) —\r\n   block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent\r\n   text-foreground shadow-none outline-none placeholder:text-muted-foreground */\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control])\r\n   — px-2.5 py-1 text-sm; mono: no block padding — the FIELD owns the height\r\n   (`min-height: token`) and `align-self: stretch` spans the click target */\r\n:where([mono-input]) [mono-native] {\r\n  display: block;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-input-font-size);\r\n  line-height: var(--_mono-input-line-height);\r\n  padding-inline: var(--_mono-input-padding-x);\r\n  padding-block: 0;\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-input-placeholder);\r\n  }\r\n\r\n  /* .input:disabled — pointer-events-none cursor-not-allowed (the opacity is\r\n     on the field so the affixes fade with it) */\r\n  &:disabled {\r\n    pointer-events: none;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n\r\n  /* Kill the native focus outline in host projects; the field draws the ring. */\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &[type='number']::-webkit-outer-spin-button,\r\n  &[type='number']::-webkit-inner-spin-button {\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) — ps-1.5\r\n   (and pe-1.5 for an end affix). The clear button counts as an end affix. */\r\n:where([mono-input]) > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > [mono-native] {\r\n  padding-inline-start: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n:where([mono-input]) > [mono-field]:has(> :is([mono-suffix]:not([mono-empty]), [mono-clear])) > [mono-native] {\r\n  padding-inline-end: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* =========================================\r\n   Prefix / suffix\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(span, [role='group'], header, footer), .input-group > :is(svg, kbd, .popover, .dropdown-menu) — gap-2 py-1.5\r\n   text-sm font-medium text-muted-foreground select-none, svg size-4;\r\n   [data-align='start'] ps-2 / [data-align='end'] pe-2 */\r\n:where([mono-input]) [mono-prefix],\r\n:where([mono-input]) [mono-suffix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n  font-size: var(--mono-input-affix-font-size, var(--_mono-input-font-size));\r\n  line-height: var(--_mono-input-line-height);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  color: var(--_mono-input-muted);\r\n  user-select: none;\r\n}\r\n\r\n:where([mono-input]) [mono-prefix] {\r\n  padding-inline-start: var(--_mono-input-affix-padding);\r\n}\r\n\r\n:where([mono-input]) [mono-suffix] {\r\n  padding-inline-end: var(--_mono-input-affix-padding);\r\n}\r\n\r\n/* The light build re-appends slotted prefix/suffix content into this\r\n   `[data-mono-slot]` placeholder, one level below the inline-flex wrapper.\r\n   Make it a flex container too, so an `display: inline` icon span (e.g. a\r\n   UnoCSS `i-mdi-*`, which ignores width/height while inline) is blockified\r\n   into a flex item and actually renders its box. */\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) > [data-mono-slot] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n}\r\n\r\n/* `[&>svg:not([class*='size-'])]:size-4` — our icons are UnoCSS `i-*` mask\r\n   spans as often as SVGs, so every glyph in an affix takes the affix size. */\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) :is(svg, .mono-icon, [mono-icon]),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(svg),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(.mono-icon),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted([mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-input-affix-icon);\r\n  height: var(--_mono-input-affix-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Clear button — a ghost icon button in the end affix slot\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg)))\r\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5;\r\n   .input-group > button[data-align='end'] me-1; painted as .btn[data-variant='ghost'] */\r\n:where([mono-input]) [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-input-clear);\r\n  height: var(--_mono-input-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-inline-end: var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: var(--mono-input-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-input-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  }\r\n\r\n  &:active {\r\n    translate: 0 1px;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  :where([mono-input]) [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-input-text);\r\n  }\r\n}\r\n\r\n:where([mono-input]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-input-clear-glyph);\r\n  height: var(--_mono-input-clear-glyph);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p — text-sm text-muted-foreground\r\n   leading-normal font-normal text-start. The wrapper is always rendered\r\n   (aria-describedby points at it); it takes no space until it holds text. */\r\n:where([mono-input]) > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n\r\n:where([mono-input]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n:where([mono-input]) [mono-message] {\r\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-input-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:where([mono-input]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-input-invalid);\r\n}\r\n\r\n/* EXTENSION — the other two states in their role colour */\r\n:where([mono-input]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-input-valid);\r\n}\r\n\r\n:where([mono-input]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-input-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-input]) > [mono-field],\r\n  :where([mono-input]) [mono-clear] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\input\input.css?raw.js
+var input_css_raw_default = "/* =========================================================================\r\n   mono-input — a port of Basecoat's `.field` / `.input-group` / `.label`\r\n   (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.input-group:has([aria-invalid])`) —\r\n   and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Name\">\r\n     <div mono-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Name</label>\r\n       <div mono-field><input mono-native></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,\r\n   `:not([mono-validation-state])` = default). The element renders these\r\n   attributes on its wrapper (both builds); the old classes\r\n   (`.mono-input.sm.danger.filled`) are still emitted as inert hooks for\r\n   consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-input]                                  ≡ .field            (flex column, gap-3)\r\n     [mono-input] > [mono-label]                   ≡ .field > label / .label\r\n     [mono-input] > [mono-field]                   ≡ .input-group      (the bordered box: h-9 rounded-md border-input shadow-xs)\r\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, px-2.5 text-sm; `.input` for the metrics)\r\n     [mono-field] > [mono-prefix|mono-suffix]      ≡ .input-group > span[data-align='start'|'end']\r\n     [mono-field] > [mono-clear]                   ≡ .input-group > button[data-align='end']:has(> svg)\r\n     [mono-input] > [mono-message-wrap]            ≡ .field > p\r\n     [mono-message=\"helper\"]                       ≡ .field > p        (text-sm text-muted-foreground)\r\n     [mono-message=\"invalid\"]                      ≡ .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern with --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group: border-transparent bg-input/50, ring-ring/30)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: rounded-none border-b-input px-0, no ring)\r\n     [mono-disabled] / [mono-native]:disabled      ≡ .input-group:has(input:disabled) — opacity-50\r\n     [mono-readonly]                               ≡ EXTENSION (a muted surface)\r\n\r\n   Specificity contract (same as the pre-port class sheet, and as checkbox.css):\r\n   a part's RESTING rule is written `:where([mono-input]) [mono-part]` = exactly\r\n   one attribute, (0,1,0) — so a utility class composed onto the markup (the\r\n   `cssClass` prop, or a hand-written class in a css/ demo) wins by source order,\r\n   while the prop and state rules ([mono-size], [mono-variant], [mono-disabled],\r\n   :focus-within, [aria-invalid], …) stay heavier and still win over it.\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-field], [mono-prefix] / [mono-suffix] (+ [mono-empty] in the shadow\r\n   build for an unassigned slot), [mono-native], [mono-clear] > [mono-icon],\r\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\r\n   `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\r\n   `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\r\n   `box-shadow: ring, shadow` below, and every `dark:` variant → a\r\n   `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can).\r\n\r\n   FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set\r\n   the knobs read below — `--mono-input-radius`, `--mono-input-padding-x-<size>`,\r\n   `--mono-input-font-<size>`, `--mono-input-line-height`, `--mono-input-ring-width`,\r\n   `--mono-input-ring-alpha`, `--mono-input-gap`, `--mono-input-affix-*`,\r\n   `--mono-input-label-*`, `--mono-input-message-*`, `--mono-input-clear-radius`,\r\n   `--mono-input-disabled-bg`, and the outline-variant set `--mono-input-outline-\r\n   {bg,border-color,side-border-color,shadow,ring-width,radius,padding-x,affix-padding}`.\r\n   Every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(field|label|input|input-group)\\b\"`).\r\n\r\n   The public `--mono-input-*` knobs and the three-tier resolver\r\n   (`--mono-input-x` → `--_mono-input-x-preset` → base) are unchanged: a\r\n   colour / variant attribute only ever writes a `*-preset` slot, so a\r\n   consumer's own `--mono-input-bg` on the host still wins.\r\n   ========================================================================= */\r\n\r\nmono-input {\r\n  display: block;\r\n}\r\n\r\n[mono-input] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-input-text: var(--mono-input-color, var(--mono-input-text, var(--foreground)));\r\n  --_mono-input-placeholder: var(--mono-input-placeholder, var(--muted-foreground));\r\n  --_mono-input-muted: var(--mono-input-muted, var(--muted-foreground));\r\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\r\n  --_mono-input-primary: var(--mono-input-primary, var(--ring));\r\n  --_mono-input-secondary: var(--mono-input-secondary, var(--muted-foreground));\r\n  --_mono-input-success: var(--mono-input-success, var(--success));\r\n  --_mono-input-danger: var(--mono-input-danger, var(--destructive));\r\n  --_mono-input-warning: var(--mono-input-warning, var(--warning));\r\n  --_mono-input-info: var(--mono-input-info, var(--info));\r\n  --_mono-input-teal: var(--mono-input-teal, var(--teal));\r\n  --_mono-input-purple: var(--mono-input-purple, var(--purple));\r\n  --_mono-input-neutral: var(--mono-input-neutral, var(--neutral));\r\n  --_mono-input-dark: var(--mono-input-dark, var(--dark));\r\n  --_mono-input-valid: var(--mono-input-valid, var(--success));\r\n  --_mono-input-invalid: var(--mono-input-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\r\n  --_mono-input-ring-color: var(--mono-input-ring-color, var(--mono-input-focus-color, var(--_mono-input-ring-color-preset, var(--_mono-input-primary))));\r\n  --_mono-input-ring-width: var(--mono-input-ring-width, var(--_mono-input-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-input-ring-alpha: var(--mono-input-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-input-border-color: var(--mono-input-rest-border, var(--mono-input-border-color, var(--_mono-input-border-color-preset, var(--input))));\r\n  --_mono-input-bg: var(--mono-input-bg, var(--mono-input-surface, var(--_mono-input-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-input-shadow: var(--mono-input-shadow, var(--_mono-input-shadow-preset, 0 0 #0000));\r\n  --_mono-input-affix-padding: var(--mono-input-affix-padding, var(--_mono-input-affix-padding-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-input>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\r\n  --_mono-input-height: var(--mono-input-height-md, var(--mono-control-height-md));\r\n  --_mono-input-radius: var(--mono-input-radius-md, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-md, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-sm));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 6);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\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-input-gap, calc(var(--mono-spacing) * 3));\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-input-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-input],\r\n:where([mono-input]) *,\r\n:where([mono-input]) *::before,\r\n:where([mono-input]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders every slot wrapper and marks an unassigned one\r\n   `mono-empty`; the light build simply omits it. Inert in the light build. */\r\n:where([mono-input]) :is([mono-label], [mono-prefix], [mono-suffix], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the field's painted height IS the token (tests/perf/field-heights).\r\n   EXTENSION: Basecoat sizes only its select (data-size=sm); the ladder is the\r\n   shared --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n/* `.input` is text-base under 48rem (no iOS zoom) and md:text-sm above it —\r\n   vendor behaviour, kept for the default size only. */\r\n@media (width < 48rem) {\r\n  [mono-input]:is(:not([mono-size]), [mono-size=\"md\"]) {\r\n    --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-base));\r\n    --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-base--lh)));\r\n  }\r\n}\r\n\r\n[mono-input][mono-size=\"xs\"] {\r\n  --_mono-input-height: var(--mono-input-height-xs, var(--mono-control-height-xs));\r\n  --_mono-input-radius: var(--mono-input-radius-xs, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xs, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-input-font-size: var(--mono-input-font-xs, var(--mono-text-xs));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 4);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-input][mono-size=\"sm\"] {\r\n  --_mono-input-height: var(--mono-input-height-sm, var(--mono-control-height-sm));\r\n  --_mono-input-radius: var(--mono-input-radius-sm, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-sm, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 5);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-input][mono-size=\"lg\"] {\r\n  --_mono-input-height: var(--mono-input-height-lg, var(--mono-control-height-lg));\r\n  --_mono-input-radius: var(--mono-input-radius-lg, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-lg, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-input-font-size: var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm)));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-input][mono-size=\"xl\"] {\r\n  --_mono-input-height: var(--mono-input-height-xl, var(--mono-control-height-xl));\r\n  --_mono-input-radius: var(--mono-input-radius-xl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 3)));\r\n  --_mono-input-font-size: var(--mono-input-font-xl, var(--mono-text-base));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 7);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n[mono-input][mono-size=\"xxl\"] {\r\n  --_mono-input-height: var(--mono-input-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-input-radius: var(--mono-input-radius-xxl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\r\n  --_mono-input-padding-x: var(--mono-input-padding-x-xxl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-input-font-size: var(--mono-input-font-xxl, var(--mono-text-lg));\r\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-input-clear: calc(var(--mono-spacing) * 8);\r\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   shadow-xs, bg-transparent (dark:bg-input/30 via --mono-mode-surface). The\r\n   `--mono-input-outline-*` knobs are how a flavor restyles THIS variant alone\r\n   (maia bg-input/30, luma / rhea border-transparent bg-input/50, sera the\r\n   underline) without touching filled / underlined. */\r\n[mono-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-input-bg-preset: var(--mono-input-outline-bg);\r\n  --_mono-input-border-color-preset: var(--mono-input-outline-border-color);\r\n  --_mono-input-side-border-color-preset: var(--mono-input-outline-side-border-color);\r\n  --_mono-input-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-input-ring-width-preset: var(--mono-input-outline-ring-width);\r\n  --_mono-input-radius-preset: var(--mono-input-outline-radius);\r\n  --_mono-input-padding-x-preset: var(--mono-input-outline-padding-x);\r\n  --_mono-input-affix-padding-preset: var(--mono-input-outline-affix-padding);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group:\r\n   border-transparent bg-input/50, no shadow-xs (the ring stays) */\r\n[mono-input][mono-variant=\"filled\"] {\r\n  --_mono-input-bg-preset: var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-input-border-color-preset: transparent;\r\n  --_mono-input-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no\r\n   shadow, no ring, focus-within:border-b-ring, has-[aria-invalid]:border-b-destructive.\r\n   Only the bottom edge paints; the sides are transparent in every state. */\r\n[mono-input][mono-variant=\"underlined\"] {\r\n  --_mono-input-bg-preset: transparent;\r\n  --_mono-input-side-border-color-preset: transparent;\r\n  --_mono-input-shadow-preset: 0 0 #0000;\r\n  --_mono-input-ring-width-preset: 0px;\r\n  --_mono-input-radius-preset: 0;\r\n  --_mono-input-padding-x-preset: 0;\r\n  --_mono-input-affix-padding-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border).\r\n   No resting tint: Basecoat fields rest on --input whatever their role.\r\n   ========================================= */\r\n\r\n[mono-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-primary);\r\n}\r\n[mono-input][mono-color=\"secondary\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-secondary);\r\n}\r\n[mono-input][mono-color=\"success\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-success);\r\n}\r\n[mono-input][mono-color=\"danger\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-danger);\r\n}\r\n[mono-input][mono-color=\"warning\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-warning);\r\n}\r\n[mono-input][mono-color=\"info\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-info);\r\n}\r\n[mono-input][mono-color=\"teal\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-teal);\r\n}\r\n[mono-input][mono-color=\"purple\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-purple);\r\n}\r\n[mono-input][mono-color=\"neutral\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-neutral);\r\n}\r\n[mono-input][mono-color=\"dark\"] {\r\n  --_mono-input-ring-color-preset: var(--_mono-input-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 — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n:where([mono-input]) > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-input-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-label-line-height, 1);\r\n  font-weight: var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-input-label-text-transform, none);\r\n  letter-spacing: var(--mono-input-label-letter-spacing, normal);\r\n  color: var(--_mono-input-text);\r\n  user-select: none;\r\n}\r\n\r\n/* in-data-[disabled=true]:opacity-50 / peer-disabled:opacity-50 */\r\n[mono-input][mono-disabled] > [mono-label],\r\n[mono-input]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-input][mono-validation-state=\"invalid\"] > [mono-label],\r\n[mono-input]:has(> [mono-field] > [mono-native][aria-invalid=\"true\"]) > [mono-label] {\r\n  color: var(--_mono-input-invalid);\r\n}\r\n\r\n/* EXTENSION — the required asterisk */\r\n:where([mono-input]) [mono-required-mark] {\r\n  color: var(--_mono-input-danger);\r\n}\r\n\r\n/* =========================================\r\n   The field — the bordered box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group */\r\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border\r\n   border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring\r\n   focus-within:ring-3 focus-within:ring-ring/50; mono: `--tw-ring-*` flattened to\r\n   the ring + shadow slots, the height is the control token, and the side\r\n   edges read their own slot so a flavor can keep only the bottom one */\r\n:where([mono-input]) > [mono-field] {\r\n  --_mono-input-bc: var(--_mono-input-border-color);\r\n  --_mono-input-side-bc: var(--mono-input-side-border-color, var(--_mono-input-side-border-color-preset, var(--_mono-input-bc)));\r\n  /* The focus / state ring slot — `0 0 #0000` until a state sets it. Kept as a\r\n     slot so a variant can neutralise the resting shadow without ever writing\r\n     `box-shadow: none` (which would out-specify the ring). */\r\n  --_mono-input-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-input-height);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-input-bc);\r\n  border-top-color: var(--_mono-input-side-bc);\r\n  border-inline-color: var(--_mono-input-side-bc);\r\n  border-radius: var(--_mono-input-radius);\r\n  background: var(--_mono-input-bg);\r\n  color: var(--_mono-input-text);\r\n  box-shadow: var(--_mono-input-ring), var(--_mono-input-shadow);\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  /* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\r\n  &:focus-within {\r\n    --_mono-input-bc: var(--_mono-input-ring-color);\r\n    --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\r\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20\r\n   (dark: border /50, ring /40 — carried by the mode tokens). The ring is\r\n   permanent, and it wins over the focus ring — same as the vendor order. */\r\n[mono-input][mono-validation-state=\"invalid\"] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\r\n  --_mono-input-bc: var(--mono-mode-invalid-border);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-input][mono-validation-state=\"valid\"] > [mono-field] {\r\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-input][mono-validation-state=\"warning\"] > [mono-field] {\r\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface */\r\n[mono-input][mono-readonly] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native]:read-only:not(:disabled)) {\r\n  background: var(--mono-input-readonly-bg, var(--muted));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50\r\n   (`--mono-input-disabled-bg`: nova / lyra add disabled:bg-input/50) */\r\n[mono-input][mono-disabled] > [mono-field],\r\n:where([mono-input]) > [mono-field]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background: var(--mono-input-disabled-bg, var(--_mono-input-bg));\r\n}\r\n\r\n/* =========================================\r\n   The native input\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) —\r\n   block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent\r\n   text-foreground shadow-none outline-none placeholder:text-muted-foreground */\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control])\r\n   — px-2.5 py-1 text-sm; mono: no block padding — the FIELD owns the height\r\n   (`min-height: token`) and `align-self: stretch` spans the click target */\r\n:where([mono-input]) [mono-native] {\r\n  display: block;\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-input-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-input-font-size);\r\n  line-height: var(--_mono-input-line-height);\r\n  padding-inline: var(--_mono-input-padding-x);\r\n  padding-block: 0;\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-input-placeholder);\r\n  }\r\n\r\n  /* .input:disabled — pointer-events-none cursor-not-allowed (the opacity is\r\n     on the field so the affixes fade with it) */\r\n  &:disabled {\r\n    pointer-events: none;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:read-only {\r\n    cursor: inherit;\r\n  }\r\n\r\n  /* Kill the native focus outline in host projects; the field draws the ring. */\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &[type='number']::-webkit-outer-spin-button,\r\n  &[type='number']::-webkit-inner-spin-button {\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group:not([data-orientation='vertical']):has(> :is([data-align='start'], [data-align='inline-start'])) > :is(input, select, [data-control]) — ps-1.5\r\n   (and pe-1.5 for an end affix). The clear button counts as an end affix. */\r\n:where([mono-input]) > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > [mono-native] {\r\n  padding-inline-start: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n:where([mono-input]) > [mono-field]:has(> :is([mono-suffix]:not([mono-empty]), [mono-clear])) > [mono-native] {\r\n  padding-inline-end: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\r\n}\r\n\r\n/* =========================================\r\n   Prefix / suffix\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(span, [role='group'], header, footer), .input-group > :is(svg, kbd, .popover, .dropdown-menu) — gap-2 py-1.5\r\n   text-sm font-medium text-muted-foreground select-none, svg size-4;\r\n   [data-align='start'] ps-2 / [data-align='end'] pe-2 */\r\n:where([mono-input]) [mono-prefix],\r\n:where([mono-input]) [mono-suffix] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n  font-size: var(--mono-input-affix-font-size, var(--_mono-input-font-size));\r\n  line-height: var(--_mono-input-line-height);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  color: var(--_mono-input-muted);\r\n  user-select: none;\r\n}\r\n\r\n:where([mono-input]) [mono-prefix] {\r\n  padding-inline-start: var(--_mono-input-affix-padding);\r\n}\r\n\r\n:where([mono-input]) [mono-suffix] {\r\n  padding-inline-end: var(--_mono-input-affix-padding);\r\n}\r\n\r\n/* The light build re-appends slotted prefix/suffix content into this\r\n   `[data-mono-slot]` placeholder, one level below the inline-flex wrapper.\r\n   Make it a flex container too, so an `display: inline` icon span (e.g. a\r\n   UnoCSS `i-mdi-*`, which ignores width/height while inline) is blockified\r\n   into a flex item and actually renders its box. */\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) > [data-mono-slot] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: inherit;\r\n}\r\n\r\n/* `[&>svg:not([class*='size-'])]:size-4` — our icons are UnoCSS `i-*` mask\r\n   spans as often as SVGs, so every glyph in an affix takes the affix size. */\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) :is(svg, .mono-icon, [mono-icon]),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(svg),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(.mono-icon),\r\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted([mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-input-affix-icon);\r\n  height: var(--_mono-input-affix-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Clear button — a ghost icon button in the end affix slot\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(button, [role='group'] > button, header > button, footer > button):has(> svg):not(:has(> :not(svg)))\r\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5;\r\n   .input-group > button[data-align='end'] me-1; painted as .btn[data-variant='ghost'] */\r\n:where([mono-input]) [mono-clear] {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-input-clear);\r\n  height: var(--_mono-input-clear);\r\n  padding: 0;\r\n  margin: 0;\r\n  margin-inline-end: var(--mono-spacing);\r\n  border: 0;\r\n  border-radius: var(--mono-input-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-input-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  outline-style: none;\r\n  transition-property: color, background-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus-visible {\r\n    box-shadow: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\r\n  }\r\n\r\n  &:active {\r\n    translate: 0 1px;\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  :where([mono-input]) [mono-clear]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-input-text);\r\n  }\r\n}\r\n\r\n:where([mono-input]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-input-clear-glyph);\r\n  height: var(--_mono-input-clear-glyph);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p — text-sm text-muted-foreground\r\n   leading-normal font-normal text-start. The wrapper is always rendered\r\n   (aria-describedby points at it); it takes no space until it holds text. */\r\n:where([mono-input]) > [mono-message-wrap] {\r\n  display: block;\r\n}\r\n\r\n:where([mono-input]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n:where([mono-input]) [mono-message] {\r\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-input-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:where([mono-input]) [mono-message=\"invalid\"] {\r\n  color: var(--_mono-input-invalid);\r\n}\r\n\r\n/* EXTENSION — the other two states in their role colour */\r\n:where([mono-input]) [mono-message=\"valid\"] {\r\n  color: var(--_mono-input-valid);\r\n}\r\n\r\n:where([mono-input]) [mono-message=\"warning\"] {\r\n  color: var(--_mono-input-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-input]) > [mono-field],\r\n  :where([mono-input]) [mono-clear] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/input/mono-input.ts
-var MonoInput = class MonoInput extends MonoInputCore(LitElement) {
+let MonoInput = class MonoInput extends MonoInputCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotPrefix = [];
@@ -976,7 +981,7 @@ var MonoInput = class MonoInput extends MonoInputCore(LitElement) {
 		this._slotHelper = [];
 	}
 	static {
-		this.styles = [unsafeCSS(input_default)];
+		this.styles = [unsafeCSS(input_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -1086,6 +1091,7 @@ var MonoInput = class MonoInput extends MonoInputCore(LitElement) {
 	}
 };
 MonoInput = __decorate([customElement("mono-input")], MonoInput);
+
 //#endregion
 //#region src/components/input/input-utils.ts
 function validateInputProps(props) {
@@ -1172,5 +1178,6 @@ function getInputIcon(type) {
 	};
 	return iconMap[type] ?? iconMap.text;
 }
+
 //#endregion
-export { MonoInput, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };
+export { MonoInput, applyFormat, caretAfterFormat, generateInputAriaAttributes, generateInputAttributes, getInputIcon, localeSeparators, normaliseValue, parseFormat, resolveFormat, significantFor, stripFormat, validateInputProps };

package/dist/ui/menu.js

@@ -1,12 +1,13 @@
-import { l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { t as isIconifyClass } from "../icon-dVhYJUIH.js";
-import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../color-DHYrfXsX.js";
+import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { t as isIconifyClass } from "../icon-ClxnYhBG.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";
@@ -112,6 +113,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) {
@@ -260,9 +262,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}
@@ -346,6 +349,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. */
@@ -372,7 +376,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);
@@ -510,7 +514,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;
@@ -520,7 +525,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 [];
@@ -763,7 +769,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);
@@ -822,12 +829,14 @@ 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.ts
-var MonoMenu = class MonoMenu extends MonoMenuCore(LitElement) {
+let MonoMenu = class MonoMenu extends MonoMenuCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
@@ -835,7 +844,7 @@ var MonoMenu = class MonoMenu extends MonoMenuCore(LitElement) {
 		this._slotBody = [];
 	}
 	static {
-		this.styles = [unsafeCSS(menu_default)];
+		this.styles = [unsafeCSS(menu_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -926,10 +935,11 @@ var MonoMenu = class MonoMenu extends MonoMenuCore(LitElement) {
 __decorate([state()], MonoMenu.prototype, "_slotsCaptured", void 0);
 __decorate([state()], MonoMenu.prototype, "_hasBodySlot", void 0);
 MonoMenu = __decorate([customElement("mono-menu")], MonoMenu);
+
 //#endregion
 //#region src/components/menu/mono-menu-list.ts
-var autoMenuListId = 0;
-var MonoMenuList = class MonoMenuList extends LitElement {
+let autoMenuListId = 0;
+let MonoMenuList = class MonoMenuList extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.items = [];
@@ -1246,7 +1256,8 @@ var MonoMenuList = class MonoMenuList extends LitElement {
 			this._seedDefaultOpenIntoStandalone(item);
 			const row = this._renderSingleRow(item, ctx);
 			if (this._parentList) return html`${row}`;
-			return html`<ul class=${ctx.cssClass?.list ? `mono-menu-list ${ctx.cssClass.list}` : "mono-menu-list"} mono-list>${row}</ul>`;
+			const listClass = ctx.cssClass?.list ? `mono-menu-list ${ctx.cssClass.list}` : "mono-menu-list";
+			return html`<ul class=${listClass} mono-list>${row}</ul>`;
 		}
 		const ctx = this._buildContext(false);
 		const effectiveItems = this._getEffectiveItems();
@@ -1285,5 +1296,6 @@ __decorate([property({
 	type: Boolean
 })], MonoMenuList.prototype, "defaultOpen", void 0);
 MonoMenuList = __decorate([customElement("mono-menu-list")], MonoMenuList);
+
 //#endregion
-export { MonoMenu, MonoMenuList, collectDefaultOpenGroups, findActivePath, findItem, generateMenuRootClasses, getMenuAlias, isDivider, isGroup, isIconifyClass, isItem, isSubheader, renderMenuAppend, renderMenuBadge, renderMenuDivider, renderMenuGroup, renderMenuGroupsOnly, renderMenuIcon, renderMenuItemRow, renderMenuList, renderMenuSubheader, validateMenuProps };
+export { MonoMenu, MonoMenuList, collectDefaultOpenGroups, findActivePath, findItem, generateMenuRootClasses, getMenuAlias, isDivider, isGroup, isIconifyClass, isItem, isSubheader, renderMenuAppend, renderMenuBadge, renderMenuDivider, renderMenuGroup, renderMenuGroupsOnly, renderMenuIcon, renderMenuItemRow, renderMenuList, renderMenuSubheader, validateMenuProps };