@mono-lit/helper 0.0.5 → 0.0.7

package/dist/ui/input.js

@@ -1,15 +1,14 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { d as buildSizeStyle, g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.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 { s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
 import { a as parseFormat, c as stripFormat, i as normaliseValue, n as caretAfterFormat, o as resolveFormat, r as localeSeparators, s as significantFor, t as applyFormat } from "../input-format-GrRCJBqV.js";
 import { n as cssPart } from "../css-class-B6Tc_MAx.js";
-import { t as FieldTooltipController } from "../field-tooltip-FyMi9vNM.js";
-import { t as FieldValidationController } from "../field-validation-CHHQi1zl.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
+import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
+import { LitElement, html, isServer, nothing } 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";
@@ -1055,10 +1054,6 @@ const MonoInputCore = (superClass) => {
 	return MonoInputCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\input\input.css?raw.js
-var input_css_raw_default = "/* =========================================================================\n   mono-input — a port of Basecoat's `.field` / `.input-group` / `.label`\n   (basecoat-css@1.0.2, vega style).\n\n   Styled by ATTRIBUTE, like Basecoat (`.input-group:has([aria-invalid])`) —\n   and the attributes mirror the element's props one for one, so hand-written\n   markup reads like the Lit / Vue tag:\n\n     <mono-input size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Name\">\n     <div mono-input mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\n       <label mono-label>Name</label>\n       <div mono-field><input mono-native></div>\n     </div>\n\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined,\n   `:not([mono-validation-state])` = default). The element renders these\n   attributes on its wrapper (both builds); the old classes\n   (`.mono-input.sm.danger.filled`) are still emitted as inert hooks for\n   consumer CSS until 2.0 but no rule here reads them.\n\n   Selector map (ours ≡ upstream):\n     [mono-input]                                  ≡ .field            (flex column, gap-3)\n     [mono-input] > [mono-label]                   ≡ .field > label / .label\n     [mono-input] > [mono-field]                   ≡ .input-group      (the bordered box: h-9 rounded-md border-input shadow-xs)\n     [mono-field] > [mono-native]                  ≡ .input-group > input (borderless, px-2.5 text-sm; `.input` for the metrics)\n     [mono-field] > [mono-prefix|mono-suffix]      ≡ .input-group > span[data-align='start'|'end']\n     [mono-field] > [mono-clear]                   ≡ .input-group > button[data-align='end']:has(> svg)\n     [mono-input] > [mono-message-wrap]            ≡ .field > p\n     [mono-message=\"helper\"]                       ≡ .field > p        (text-sm text-muted-foreground)\n     [mono-message=\"invalid\"]                      ≡ .field [role='alert']\n     [mono-validation-state=\"invalid\"]             ≡ .input-group:has([aria-invalid=true]) + .field[data-invalid]\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern with --success / --warning)\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat sizes only the select; the ladder is --mono-control-height-*)\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .input-group: border-transparent bg-input/50, ring-ring/30)\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's .input-group: rounded-none border-b-input px-0, no ring)\n     [mono-disabled] / [mono-native]:disabled      ≡ .input-group:has(input:disabled) — opacity-50\n     [mono-readonly]                               ≡ EXTENSION (a muted surface)\n\n   Specificity contract (same as the pre-port class sheet, and as checkbox.css):\n   a part's RESTING rule is written `:where([mono-input]) [mono-part]` = exactly\n   one attribute, (0,1,0) — so a utility class composed onto the markup (the\n   `cssClass` prop, or a hand-written class in a css/ demo) wins by source order,\n   while the prop and state rules ([mono-size], [mono-variant], [mono-disabled],\n   :focus-within, [aria-invalid], …) stay heavier and still win over it.\n\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\n   [mono-field], [mono-prefix] / [mono-suffix] (+ [mono-empty] in the shadow\n   build for an unassigned slot), [mono-native], [mono-clear] > [mono-icon],\n   [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\n\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\n   vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\n   `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\n   `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\n   `box-shadow: ring, shadow` below, and every `dark:` variant → a\n   `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\n   inherited custom property can).\n\n   FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set\n   the knobs read below — `--mono-input-radius`, `--mono-input-padding-x-<size>`,\n   `--mono-input-font-<size>`, `--mono-input-line-height`, `--mono-input-ring-width`,\n   `--mono-input-ring-alpha`, `--mono-input-gap`, `--mono-input-affix-*`,\n   `--mono-input-label-*`, `--mono-input-message-*`, `--mono-input-clear-radius`,\n   `--mono-input-disabled-bg`, and the outline-variant set `--mono-input-outline-\n   {bg,border-color,side-border-color,shadow,ring-width,radius,padding-x,affix-padding}`.\n   Every fallback here is vega's value\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.(field|label|input|input-group)\\b\"`).\n\n   The public `--mono-input-*` knobs and the three-tier resolver\n   (`--mono-input-x` → `--_mono-input-x-preset` → base) are unchanged: a\n   colour / variant attribute only ever writes a `*-preset` slot, so a\n   consumer's own `--mono-input-bg` on the host still wins.\n   ========================================================================= */\n\nmono-input {\n  display: block;\n}\n\n[mono-input] {\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\n  --_mono-input-text: var(--mono-input-color, var(--mono-input-text, var(--foreground)));\n  --_mono-input-placeholder: var(--mono-input-placeholder, var(--muted-foreground));\n  --_mono-input-muted: var(--mono-input-muted, var(--muted-foreground));\n  /* the `color` prop picks the FOCUS colour; primary is Basecoat's `--ring` */\n  --_mono-input-primary: var(--mono-input-primary, var(--ring));\n  --_mono-input-secondary: var(--mono-input-secondary, var(--muted-foreground));\n  --_mono-input-success: var(--mono-input-success, var(--success));\n  --_mono-input-danger: var(--mono-input-danger, var(--destructive));\n  --_mono-input-warning: var(--mono-input-warning, var(--warning));\n  --_mono-input-info: var(--mono-input-info, var(--info));\n  --_mono-input-teal: var(--mono-input-teal, var(--teal));\n  --_mono-input-purple: var(--mono-input-purple, var(--purple));\n  --_mono-input-neutral: var(--mono-input-neutral, var(--neutral));\n  --_mono-input-dark: var(--mono-input-dark, var(--dark));\n  --_mono-input-valid: var(--mono-input-valid, var(--success));\n  --_mono-input-invalid: var(--mono-input-invalid, var(--destructive));\n  /* the FILL colour of a range (Basecoat paints the slider with --primary, not\n     --ring); the `color` prop writes the preset, a validation state outranks it */\n  --_mono-input-accent: var(--mono-input-accent, var(--_mono-input-accent-preset, var(--mono-input-primary, var(--primary))));\n\n  /* ── the painted result — three tiers, base = .input-group (vega) ──────── */\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))));\n  --_mono-input-ring-width: var(--mono-input-ring-width, var(--_mono-input-ring-width-preset, var(--mono-ring-width)));\n  --_mono-input-ring-alpha: var(--mono-input-ring-alpha, var(--mono-ring-alpha));\n  --_mono-input-border-color: var(--mono-input-rest-border, var(--mono-input-border-color, var(--_mono-input-border-color-preset, var(--input))));\n  --_mono-input-bg: var(--mono-input-bg, var(--mono-input-surface, var(--_mono-input-bg-preset, var(--mono-mode-surface))));\n  --_mono-input-shadow: var(--mono-input-shadow, var(--_mono-input-shadow-preset, 0 0 #0000));\n  --_mono-input-affix-padding: var(--mono-input-affix-padding, var(--_mono-input-affix-padding-preset, calc(var(--mono-spacing) * 2)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\n\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\n        `<div mono-input>` that names no size renders exactly like size=\"md\".\n        basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md; > input px-2.5 text-sm ── */\n  --_mono-input-height: var(--mono-input-height-md, var(--mono-control-height-md));\n  --_mono-input-radius: var(--mono-input-radius-md, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-md, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\n  --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-sm));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-sm--lh)));\n  --_mono-input-clear: calc(var(--mono-spacing) * 6);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\n\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\n  display: flex;\n  flex-direction: column;\n  gap: var(--mono-input-gap, calc(var(--mono-spacing) * 3));\n  width: 100%;\n  font-family: inherit;\n  color: var(--_mono-input-text);\n}\n\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\n   boundary; scoped here so both builds measure the same. */\n[mono-input],\n:where([mono-input]) *,\n:where([mono-input]) *::before,\n:where([mono-input]) *::after {\n  box-sizing: border-box;\n}\n\n/* The shadow build renders every slot wrapper and marks an unassigned one\n   `mono-empty`; the light build simply omits it. Inert in the light build. */\n:where([mono-input]) :is([mono-label], [mono-prefix], [mono-suffix], [mono-message])[mono-empty] {\n  display: none;\n}\n\n/* =========================================\n   Sizes — the field's painted height IS the token (tests/perf/field-heights).\n   EXTENSION: Basecoat sizes only its select (data-size=sm); the ladder is the\n   shared --mono-control-height-* scale and the text follows .btn's steps.\n   ========================================= */\n\n/* `.input` is text-base under 48rem (no iOS zoom) and md:text-sm above it —\n   vendor behaviour, kept for the default size only. */\n@media (width < 48rem) {\n  [mono-input]:is(:not([mono-size]), [mono-size=\"md\"]) {\n    --_mono-input-font-size: var(--mono-input-font-md, var(--mono-text-base));\n    --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-md, var(--mono-text-base--lh)));\n  }\n}\n\n[mono-input][mono-size=\"xs\"] {\n  --_mono-input-height: var(--mono-input-height-xs, var(--mono-control-height-xs));\n  --_mono-input-radius: var(--mono-input-radius-xs, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-xs, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2)));\n  --_mono-input-font-size: var(--mono-input-font-xs, var(--mono-text-xs));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xs, var(--mono-text-xs--lh)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 3.5));\n  --_mono-input-clear: calc(var(--mono-spacing) * 4);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3);\n}\n\n[mono-input][mono-size=\"sm\"] {\n  --_mono-input-height: var(--mono-input-height-sm, var(--mono-control-height-sm));\n  --_mono-input-radius: var(--mono-input-radius-sm, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-sm, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\n  --_mono-input-font-size: var(--mono-input-font-sm, var(--mono-input-font-md, var(--mono-text-sm)));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-sm, var(--mono-text-sm--lh)));\n  --_mono-input-clear: calc(var(--mono-spacing) * 5);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 3.5);\n}\n\n[mono-input][mono-size=\"lg\"] {\n  --_mono-input-height: var(--mono-input-height-lg, var(--mono-control-height-lg));\n  --_mono-input-radius: var(--mono-input-radius-lg, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-lg, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 2.5)));\n  --_mono-input-font-size: var(--mono-input-font-lg, var(--mono-input-font-md, var(--mono-text-sm)));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-lg, var(--mono-text-sm--lh)));\n}\n\n[mono-input][mono-size=\"xl\"] {\n  --_mono-input-height: var(--mono-input-height-xl, var(--mono-control-height-xl));\n  --_mono-input-radius: var(--mono-input-radius-xl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-xl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 3)));\n  --_mono-input-font-size: var(--mono-input-font-xl, var(--mono-text-base));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xl, var(--mono-text-base--lh)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\n  --_mono-input-clear: calc(var(--mono-spacing) * 7);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n[mono-input][mono-size=\"xxl\"] {\n  --_mono-input-height: var(--mono-input-height-xxl, var(--mono-control-height-xxl));\n  --_mono-input-radius: var(--mono-input-radius-xxl, var(--_mono-input-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n  --_mono-input-padding-x: var(--mono-input-padding-x-xxl, var(--_mono-input-padding-x-preset, calc(var(--mono-spacing) * 4)));\n  --_mono-input-font-size: var(--mono-input-font-xxl, var(--mono-text-lg));\n  --_mono-input-line-height: var(--mono-input-line-height, var(--mono-input-line-height-xxl, var(--mono-text-lg--lh)));\n  --_mono-input-affix-icon: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 5));\n  --_mono-input-clear: calc(var(--mono-spacing) * 8);\n  --_mono-input-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n/* =========================================\n   Variants — each writes only `*-preset` slots\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\n   shadow-xs, bg-transparent (dark:bg-input/30 via --mono-mode-surface). The\n   `--mono-input-outline-*` knobs are how a flavor restyles THIS variant alone\n   (maia bg-input/30, luma / rhea border-transparent bg-input/50, sera the\n   underline) without touching filled / underlined. */\n[mono-input]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\n  --_mono-input-bg-preset: var(--mono-input-outline-bg);\n  --_mono-input-border-color-preset: var(--mono-input-outline-border-color);\n  --_mono-input-side-border-color-preset: var(--mono-input-outline-side-border-color);\n  --_mono-input-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\n  --_mono-input-ring-width-preset: var(--mono-input-outline-ring-width);\n  --_mono-input-radius-preset: var(--mono-input-outline-radius);\n  --_mono-input-padding-x-preset: var(--mono-input-outline-padding-x);\n  --_mono-input-affix-padding-preset: var(--mono-input-outline-affix-padding);\n}\n\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .input-group:\n   border-transparent bg-input/50, no shadow-xs (the ring stays) */\n[mono-input][mono-variant=\"filled\"] {\n  --_mono-input-bg-preset: var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\n  --_mono-input-border-color-preset: transparent;\n  --_mono-input-shadow-preset: 0 0 #0000;\n}\n\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .input-group:\n   rounded-none border-transparent border-b-input bg-transparent px-0, no\n   shadow, no ring, focus-within:border-b-ring, has-[aria-invalid]:border-b-destructive.\n   Only the bottom edge paints; the sides are transparent in every state. */\n[mono-input][mono-variant=\"underlined\"] {\n  --_mono-input-bg-preset: transparent;\n  --_mono-input-side-border-color-preset: transparent;\n  --_mono-input-shadow-preset: 0 0 #0000;\n  --_mono-input-ring-width-preset: 0px;\n  --_mono-input-radius-preset: 0;\n  --_mono-input-padding-x-preset: 0;\n  --_mono-input-affix-padding-preset: 0;\n}\n\n/* =========================================\n   Colours — the `color` prop is the FOCUS colour (ring + focused border).\n   No resting tint: Basecoat fields rest on --input whatever their role.\n   ========================================= */\n\n[mono-input]:is(:not([mono-color]), [mono-color=\"primary\"]) {\n  --_mono-input-ring-color-preset: var(--_mono-input-primary);\n}\n[mono-input][mono-color=\"secondary\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-secondary);\n  --_mono-input-accent-preset: var(--_mono-input-secondary);\n}\n[mono-input][mono-color=\"success\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-success);\n  --_mono-input-accent-preset: var(--_mono-input-success);\n}\n[mono-input][mono-color=\"danger\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-danger);\n  --_mono-input-accent-preset: var(--_mono-input-danger);\n}\n[mono-input][mono-color=\"warning\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-warning);\n  --_mono-input-accent-preset: var(--_mono-input-warning);\n}\n[mono-input][mono-color=\"info\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-info);\n  --_mono-input-accent-preset: var(--_mono-input-info);\n}\n[mono-input][mono-color=\"teal\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-teal);\n  --_mono-input-accent-preset: var(--_mono-input-teal);\n}\n[mono-input][mono-color=\"purple\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-purple);\n  --_mono-input-accent-preset: var(--_mono-input-purple);\n}\n[mono-input][mono-color=\"neutral\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-neutral);\n  --_mono-input-accent-preset: var(--_mono-input-neutral);\n}\n[mono-input][mono-color=\"dark\"] {\n  --_mono-input-ring-color-preset: var(--_mono-input-dark);\n  --_mono-input-accent-preset: var(--_mono-input-dark);\n}\n\n/* =========================================\n   Label\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\n   gap-2 text-sm leading-none font-medium select-none w-fit */\n:where([mono-input]) > [mono-label] {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  gap: var(--mono-input-label-gap, calc(var(--mono-spacing) * 2));\n  font-size: var(--mono-input-label-font-size, var(--mono-text-sm));\n  line-height: var(--mono-input-label-line-height, 1);\n  font-weight: var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\n  text-transform: var(--mono-input-label-text-transform, none);\n  letter-spacing: var(--mono-input-label-letter-spacing, normal);\n  color: var(--_mono-input-text);\n  user-select: none;\n}\n\n/* in-data-[disabled=true]:opacity-50 / peer-disabled:opacity-50 */\n[mono-input][mono-disabled] > [mono-label],\n[mono-input]:has(> [mono-field] > [mono-native]:disabled) > [mono-label] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\n[mono-input][mono-validation-state=\"invalid\"] > [mono-label],\n[mono-input]:has(> [mono-field] > [mono-native][aria-invalid=\"true\"]) > [mono-label] {\n  color: var(--_mono-input-invalid);\n}\n\n/* EXTENSION — the required asterisk */\n:where([mono-input]) [mono-required-mark] {\n  color: var(--_mono-input-danger);\n}\n\n/* `tooltip` prop — the info icon at the end of the label row (the label's\n   flex gap spaces it). `pointer-events` is restored because a disabled field\n   switches its label's off, and a disabled field is exactly where the reason\n   is worth a hover. Knobs: --mono-input-label-tooltip-size / -color / -opacity. */\n:where([mono-input]) > [mono-label] > [mono-label-tooltip] {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mono-input-label-tooltip-size, 1.1em);\n  color: var(--mono-input-label-tooltip-color, currentColor);\n  opacity: var(--mono-input-label-tooltip-opacity, 0.6);\n  border-radius: 9999px;\n  cursor: help;\n  pointer-events: auto;\n  outline: none;\n  transition: opacity 150ms ease;\n}\n\n:where([mono-input]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\n  opacity: 1;\n}\n\n:where([mono-input]) > [mono-label] > [mono-label-tooltip]:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n:where([mono-input]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\n  width: 1em;\n  height: 1em;\n}\n\n/* =========================================\n   The field — the bordered box\n   ========================================= */\n\n/* basecoat@1.0.2 components/input-group.css .input-group */\n/* basecoat@1.0.2 styles/vega.css .input-group — h-9 rounded-md border\n   border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring\n   focus-within:ring-3 focus-within:ring-ring/50; mono: `--tw-ring-*` flattened to\n   the ring + shadow slots, the height is the control token, and the side\n   edges read their own slot so a flavor can keep only the bottom one */\n:where([mono-input]) > [mono-field] {\n  --_mono-input-bc: var(--_mono-input-border-color);\n  --_mono-input-side-bc: var(--mono-input-side-border-color, var(--_mono-input-side-border-color-preset, var(--_mono-input-bc)));\n  /* The focus / state ring slot — `0 0 #0000` until a state sets it. Kept as a\n     slot so a variant can neutralise the resting shadow without ever writing\n     `box-shadow: none` (which would out-specify the ring). */\n  --_mono-input-ring: 0 0 #0000;\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  min-height: var(--_mono-input-height);\n  outline-style: none;\n  border: var(--mono-border-width) solid var(--_mono-input-bc);\n  border-top-color: var(--_mono-input-side-bc);\n  border-inline-color: var(--_mono-input-side-bc);\n  border-radius: var(--_mono-input-radius);\n  background: var(--_mono-input-bg);\n  color: var(--_mono-input-text);\n  box-shadow: var(--_mono-input-ring), var(--_mono-input-shadow);\n  transition-property: color, box-shadow, border-color, background-color;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  /* focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 */\n  &:focus-within {\n    --_mono-input-bc: var(--_mono-input-ring-color);\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);\n  }\n}\n\n/* basecoat@1.0.2 styles/vega.css .input-group — has-[[aria-invalid=true]]:border-destructive\n   has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive/20\n   (dark: border /50, ring /40 — carried by the mode tokens). The ring is\n   permanent, and it wins over the focus ring — same as the vendor order. */\n[mono-input][mono-validation-state=\"invalid\"] > [mono-field],\n:where([mono-input]) > [mono-field]:has(> [mono-native][aria-invalid=\"true\"]) {\n  --_mono-input-bc: var(--mono-mode-invalid-border);\n  --_mono-input-ring: 0 0 0 var(--_mono-input-ring-width) var(--mono-mode-invalid-ring);\n}\n\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\n[mono-input][mono-validation-state=\"valid\"] > [mono-field] {\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-valid) var(--mono-mode-state-border-alpha), transparent);\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);\n}\n[mono-input][mono-validation-state=\"warning\"] > [mono-field] {\n  --_mono-input-bc: color-mix(in oklab, var(--_mono-input-warning) var(--mono-mode-state-border-alpha), transparent);\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);\n}\n\n/* EXTENSION — readonly: focusable, on a muted surface */\n[mono-input][mono-readonly] > [mono-field],\n:where([mono-input]) > [mono-field]:has(> [mono-native]:read-only:not(:disabled):not([mono-file]):not([mono-range])) {\n  background: var(--mono-input-readonly-bg, var(--muted));\n}\n\n/* basecoat@1.0.2 styles/vega.css .input-group:has(> :is(input, textarea, select, [data-control]):disabled) — opacity-50\n   (`--mono-input-disabled-bg`: nova / lyra add disabled:bg-input/50) */\n[mono-input][mono-disabled] > [mono-field],\n:where([mono-input]) > [mono-field]:has(> [mono-native]:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: var(--mono-input-disabled-bg, var(--_mono-input-bg));\n}\n\n/* =========================================\n   The native input\n   ========================================= */\n\n/* basecoat@1.0.2 components/input-group.css .input-group > :is(input, textarea, select, [data-control]) —\n   block min-w-0 flex-1 appearance-none rounded-none border-0 bg-transparent\n   text-foreground shadow-none outline-none placeholder:text-muted-foreground */\n/* basecoat@1.0.2 styles/vega.css .input-group > :is(input, select, [data-control])\n   — px-2.5 py-1 text-sm; mono: no block padding — the FIELD owns the height\n   (`min-height: token`) and `align-self: stretch` spans the click target */\n:where([mono-input]) [mono-native] {\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  align-self: stretch;\n  appearance: none;\n  margin: 0;\n  border: 0;\n  border-radius: 0;\n  outline: none;\n  background: transparent;\n  box-shadow: none;\n  color: var(--_mono-input-text);\n  font-family: inherit;\n  font-size: var(--_mono-input-font-size);\n  line-height: var(--_mono-input-line-height);\n  padding-inline: var(--_mono-input-padding-x);\n  padding-block: 0;\n\n  &::placeholder {\n    color: var(--_mono-input-placeholder);\n  }\n\n  /* .input:disabled — pointer-events-none cursor-not-allowed (the opacity is\n     on the field so the affixes fade with it) */\n  &:disabled {\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    cursor: inherit;\n  }\n\n  /* Kill the native focus outline in host projects; the field draws the ring. */\n  &:focus,\n  &:focus-visible {\n    outline: none !important;\n  }\n\n  &[type='number']::-webkit-outer-spin-button,\n  &[type='number']::-webkit-inner-spin-button {\n    margin: 0;\n  }\n}\n\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\n   (and pe-1.5 for an end affix). The clear button counts as an end affix. */\n:where([mono-input]) > [mono-field]:has(> [mono-prefix]:not([mono-empty])) > [mono-native] {\n  padding-inline-start: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\n}\n:where([mono-input]) > [mono-field]:has(> :is([mono-suffix]:not([mono-empty]), [mono-clear])) > [mono-native] {\n  padding-inline-end: var(--mono-input-affix-gap, calc(var(--mono-spacing) * 1.5));\n}\n\n/* =========================================\n   Prefix / suffix\n   ========================================= */\n\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\n   text-sm font-medium text-muted-foreground select-none, svg size-4;\n   [data-align='start'] ps-2 / [data-align='end'] pe-2 */\n:where([mono-input]) [mono-prefix],\n:where([mono-input]) [mono-suffix] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--mono-spacing) * 2);\n  font-size: var(--mono-input-affix-font-size, var(--_mono-input-font-size));\n  line-height: var(--_mono-input-line-height);\n  font-weight: var(--mono-font-weight-medium);\n  color: var(--_mono-input-muted);\n  user-select: none;\n}\n\n:where([mono-input]) [mono-prefix] {\n  padding-inline-start: var(--_mono-input-affix-padding);\n}\n\n:where([mono-input]) [mono-suffix] {\n  padding-inline-end: var(--_mono-input-affix-padding);\n}\n\n/* The light build re-appends slotted prefix/suffix content into this\n   `[data-mono-slot]` placeholder, one level below the inline-flex wrapper.\n   Make it a flex container too, so an `display: inline` icon span (e.g. a\n   UnoCSS `i-mdi-*`, which ignores width/height while inline) is blockified\n   into a flex item and actually renders its box. */\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) > [data-mono-slot] {\n  display: inline-flex;\n  align-items: center;\n  gap: inherit;\n}\n\n/* `[&>svg:not([class*='size-'])]:size-4` — our icons are UnoCSS `i-*` mask\n   spans as often as SVGs, so every glyph in an affix takes the affix size. */\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) :is(svg, .mono-icon, [mono-icon]),\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(svg),\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted(.mono-icon),\n:where([mono-input]) :is([mono-prefix], [mono-suffix]) ::slotted([mono-icon]) {\n  display: block;\n  width: var(--_mono-input-affix-icon);\n  height: var(--_mono-input-affix-icon);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n/* =========================================\n   Clear button — a ghost icon button in the end affix slot\n   ========================================= */\n\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)))\n   — size-6 rounded-[calc(var(--radius)-5px)] p-0 shadow-none, svg size-3.5;\n   .input-group > button[data-align='end'] me-1; painted as .btn[data-variant='ghost'] */\n:where([mono-input]) [mono-clear] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--_mono-input-clear);\n  height: var(--_mono-input-clear);\n  padding: 0;\n  margin: 0;\n  margin-inline-end: var(--mono-spacing);\n  border: 0;\n  border-radius: var(--mono-input-clear-radius, calc(var(--radius) - 5px));\n  background: transparent;\n  box-shadow: none;\n  color: var(--_mono-input-muted);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  outline-style: none;\n  transition-property: color, background-color, box-shadow;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--_mono-input-ring-width) color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\n  }\n\n  &:active {\n    translate: 0 1px;\n  }\n}\n\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\n@media (hover: hover) {\n  :where([mono-input]) [mono-clear]:hover {\n    background: var(--mono-mode-ghost-hover);\n    color: var(--_mono-input-text);\n  }\n}\n\n:where([mono-input]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\n  display: block;\n  width: var(--_mono-input-clear-glyph);\n  height: var(--_mono-input-clear-glyph);\n  pointer-events: none;\n}\n\n/* =========================================\n   EXTENSION — type=\"file\": a read-only name field in front of a hidden native\n   picker, with an upload glyph (`[mono-file-icon]`, a `[mono-suffix]`) at the\n   end. The whole field reads as one button. The `mono-file` native is\n   `readonly` only as a means — it stays off the muted read-only surface above\n   unless `readonly` is actually set.\n   ========================================= */\n\n:where([mono-input][mono-type=\"file\"]) > [mono-field],\n:where([mono-input][mono-type=\"file\"]) [mono-native][mono-file],\n:where([mono-input][mono-type=\"file\"]) [mono-file-icon] {\n  cursor: pointer;\n}\n\n:where([mono-input][mono-type=\"file\"]) [mono-native][mono-file] {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n:where([mono-input][mono-type=\"file\"][mono-readonly]) :is([mono-field], [mono-native][mono-file], [mono-file-icon]) {\n  cursor: default;\n}\n\n:where([mono-input][mono-type=\"file\"][mono-disabled]) :is([mono-field], [mono-native][mono-file], [mono-file-icon]) {\n  cursor: not-allowed;\n}\n\n:where([mono-input]) [mono-file-input] {\n  display: none !important;\n}\n\n/* =========================================\n   type=\"range\" — a port of Basecoat's components/range.css (`.field > input[type='range']`)\n\n     [mono-input][mono-type=\"range\"]   the root; `> [mono-field]` loses its box (a Basecoat\n                                       range sits straight in the .field, no .input-group)\n     [mono-native][mono-range]         ≡ .field > input[type='range'] (h-5, the track + thumb)\n     [mono-range-value]                EXTENSION — the value readout: end of the label row, or\n                                       after the slider when there is no label (EJI ONE's\n                                       `.eji-range__row`; Basecoat has no readout)\n\n   The fill is upstream's gradient stop: the element writes the position as\n   `--mono-input-range-value` (upstream `--slider-value`) inline on the native,\n   and raw markup sets it itself. The track/thumb paint in currentColor, and the\n   native's `color` is the ACCENT (`--_mono-input-accent`: the `color` prop, or a\n   validation state), so a flavor that wants the accent writes `currentColor`\n   — a flavor block may never read a `--_mono-*` private.\n\n   Knobs (vega fallbacks below; every Basecoat style + ONE writes its own in\n   flavors/*.css, `node scripts/basecoat-styles.mjs --varying \"range\"`):\n   --mono-input-range-{height, gap, track-height, track-radius, track-bg, fill,\n   thumb-size, thumb-width, thumb-radius, thumb-bg, thumb-border-width,\n   thumb-border-color, thumb-shadow, thumb-ring-width, thumb-ring-color,\n   ring-width, hover-ring-width, label-color, label-font-size, label-line-height,\n   label-font-weight, value-color,\n   value-font-family, value-font-size, value-font-weight, value-min-width}.\n   A flavor sets the md geometry only: `size` multiplies it (xs .75 … xxl\n   1.375), so every flavor keeps a whole xs→xxl ladder.\n   ========================================= */\n\n[mono-input][mono-type=\"range\"] {\n  --_mono-input-range-scale: 1;\n  gap: var(--mono-input-range-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3)));\n}\n[mono-input][mono-type=\"range\"][mono-size=\"xs\"] { --_mono-input-range-scale: 0.75; }\n[mono-input][mono-type=\"range\"][mono-size=\"sm\"] { --_mono-input-range-scale: 0.875; }\n[mono-input][mono-type=\"range\"][mono-size=\"lg\"] { --_mono-input-range-scale: 1.125; }\n[mono-input][mono-type=\"range\"][mono-size=\"xl\"] { --_mono-input-range-scale: 1.25; }\n[mono-input][mono-type=\"range\"][mono-size=\"xxl\"] { --_mono-input-range-scale: 1.375; }\n\n/* a validation state recolours the fill + thumb (after the colour rules, so it wins) */\n[mono-input][mono-type=\"range\"][mono-validation-state=\"invalid\"] { --_mono-input-accent-preset: var(--_mono-input-invalid); }\n[mono-input][mono-type=\"range\"][mono-validation-state=\"valid\"] { --_mono-input-accent-preset: var(--_mono-input-valid); }\n[mono-input][mono-type=\"range\"][mono-validation-state=\"warning\"] { --_mono-input-accent-preset: var(--_mono-input-warning); }\n\n/* No .input-group around a Basecoat range: the field keeps only its flex row\n   (prefix / slider / readout / suffix). Placed after the readonly / disabled\n   field rules, which it ties, so the box stays off in every state; the\n   disabled opacity is kept. */\n[mono-input][mono-type=\"range\"] > [mono-field] {\n  gap: calc(var(--mono-spacing) * 3);\n  min-height: 0;\n  border-width: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n\n[mono-input][mono-type=\"range\"] :is([mono-prefix], [mono-suffix]) {\n  padding-inline: 0;\n}\n\n/* the label spans the row so the readout can sit at its end (EJI ONE) */\n[mono-input][mono-type=\"range\"] > [mono-label] {\n  width: 100%;\n  font-size: var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1));\n  color: var(--mono-input-range-label-color, var(--_mono-input-text));\n  font-weight: var(--mono-input-range-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\n}\n\n/* basecoat@1.0.2 components/range.css .field > input[type='range'], .input[type='range'] — flex appearance-none items-center\n   p-0 outline-none disabled:pointer-events-none disabled:opacity-50 (the opacity is the field's) */\n/* basecoat@1.0.2 styles/vega.css .field > input[type='range'], .input[type='range'] — h-5, --slider-track-height: 0.375rem, --slider-thumb-size: 1rem */\n[mono-native][mono-range] {\n  --_mono-input-range-track-h: round(nearest, calc(var(--mono-input-range-track-height, 0.375rem) * var(--_mono-input-range-scale, 1)), 1px);\n  --_mono-input-range-thumb-h: round(nearest, calc(var(--mono-input-range-thumb-size, 1rem) * var(--_mono-input-range-scale, 1)), 1px);\n  --_mono-input-range-thumb-w: round(nearest, calc(var(--mono-input-range-thumb-width, var(--mono-input-range-thumb-size, 1rem)) * var(--_mono-input-range-scale, 1)), 1px);\n  --_mono-input-range-fill: var(--mono-input-range-fill, currentColor);\n  --_mono-input-range-track: var(--mono-input-range-track-bg, var(--muted));\n  --_mono-input-range-dir: to right;\n  --_mono-input-range-ring-w: var(--mono-input-range-ring-width, 4px);\n  --_mono-input-range-hover-ring-w: var(--mono-input-range-hover-ring-width, var(--_mono-input-range-ring-w));\n  --_mono-input-range-ring-c: color-mix(in oklab, var(--_mono-input-ring-color) var(--_mono-input-ring-alpha), transparent);\n  /* the hover / focus halo slot — `0 0 #0000` at rest */\n  --_mono-input-range-halo: 0 0 #0000;\n\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  height: max(round(nearest, calc(var(--mono-input-range-height, 1.25rem) * var(--_mono-input-range-scale, 1)), 1px), var(--_mono-input-range-thumb-h));\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  background: transparent;\n  color: var(--_mono-input-accent);\n  cursor: pointer;\n  outline: none;\n\n  &:dir(rtl) {\n    --_mono-input-range-dir: to left;\n  }\n\n  /* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-runnable-track — bg-muted h-1.5 rounded-full\n     (+ components/range.css: w-full appearance-none, the --primary / --muted gradient stop) */\n  &::-webkit-slider-runnable-track {\n    width: 100%;\n    height: var(--_mono-input-range-track-h);\n    appearance: none;\n    border-radius: var(--mono-input-range-track-radius, 9999px);\n    background: linear-gradient(var(--_mono-input-range-dir), var(--_mono-input-range-fill) var(--mono-input-range-value, 20%), var(--_mono-input-range-track) var(--mono-input-range-value, 20%));\n  }\n\n  &::-moz-range-track {\n    width: 100%;\n    height: var(--_mono-input-range-track-h);\n    appearance: none;\n    border-radius: var(--mono-input-range-track-radius, 9999px);\n    background: linear-gradient(var(--_mono-input-range-dir), var(--_mono-input-range-fill) var(--mono-input-range-value, 20%), var(--_mono-input-range-track) var(--mono-input-range-value, 20%));\n  }\n\n  /* basecoat@1.0.2 styles/vega.css :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb — border-primary ring-ring/50 size-4\n     rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4\n     -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)]; mono: border-box, so\n     size-4 is the painted size whatever the border; the ring is three slots — a\n     resting ring (luma / rhea ring-1, ONE's navy rim), the halo, the shadow */\n  &::-webkit-slider-thumb {\n    display: block;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    width: var(--_mono-input-range-thumb-w);\n    height: var(--_mono-input-range-thumb-h);\n    margin-top: calc((var(--_mono-input-range-track-h) - var(--_mono-input-range-thumb-h)) / 2);\n    appearance: none;\n    border: var(--mono-input-range-thumb-border-width, 1px) solid var(--mono-input-range-thumb-border-color, currentColor);\n    border-radius: var(--mono-input-range-thumb-radius, 9999px);\n    background: var(--mono-input-range-thumb-bg, #fff);\n    box-shadow:\n      0 0 0 var(--mono-input-range-thumb-ring-width, 0px) var(--mono-input-range-thumb-ring-color, transparent),\n      var(--_mono-input-range-halo),\n      var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm));\n    transition-property: color, box-shadow, background-color, border-color;\n    transition-timing-function: var(--mono-ease);\n    transition-duration: var(--mono-duration);\n  }\n\n  &::-moz-range-thumb {\n    display: block;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    width: var(--_mono-input-range-thumb-w);\n    height: var(--_mono-input-range-thumb-h);\n    appearance: none;\n    border: var(--mono-input-range-thumb-border-width, 1px) solid var(--mono-input-range-thumb-border-color, currentColor);\n    border-radius: var(--mono-input-range-thumb-radius, 9999px);\n    background: var(--mono-input-range-thumb-bg, #fff);\n    box-shadow:\n      0 0 0 var(--mono-input-range-thumb-ring-width, 0px) var(--mono-input-range-thumb-ring-color, transparent),\n      var(--_mono-input-range-halo),\n      var(--mono-input-range-thumb-shadow, var(--mono-shadow-sm));\n    transition-property: color, box-shadow, background-color, border-color;\n    transition-timing-function: var(--mono-ease);\n    transition-duration: var(--mono-duration);\n  }\n\n  /* focus-visible:ring-4 focus-visible:outline-hidden */\n  &:focus-visible {\n    --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-ring-w) var(--_mono-input-range-ring-c);\n  }\n\n  &:disabled {\n    pointer-events: none;\n  }\n}\n\n/* hover:ring-4 (lyra / mira / nova also active:) */\n@media (hover: hover) {\n  [mono-native][mono-range]:hover:not(:disabled, :focus-visible) {\n    --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-hover-ring-w) var(--_mono-input-range-ring-c);\n  }\n}\n[mono-native][mono-range]:active:not(:disabled, :focus-visible) {\n  --_mono-input-range-halo: 0 0 0 var(--_mono-input-range-hover-ring-w) var(--_mono-input-range-ring-c);\n}\n\n/* readonly: a native range ignores `readonly`, so the element reverts any move;\n   the pointer is switched off so a drag never even starts */\n[mono-input][mono-readonly] [mono-native][mono-range] {\n  pointer-events: none;\n  cursor: default;\n}\n\n/* EXTENSION — the value readout (EJI ONE `.eji-range__val`: the number is always\n   on screen). Tabular figures so the row does not shimmer while dragging. */\n:where([mono-input]) [mono-range-value] {\n  flex: none;\n  margin-inline-start: auto;\n  font-family: var(--mono-input-range-value-font-family, inherit);\n  font-size: var(--mono-input-range-value-font-size, var(--mono-input-range-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm))));\n  font-weight: var(--mono-input-range-value-font-weight, var(--mono-font-weight-medium));\n  line-height: var(--mono-input-range-label-line-height, var(--mono-input-label-line-height, 1));\n  font-variant-numeric: tabular-nums;\n  color: var(--mono-input-range-value-color, var(--_mono-input-muted));\n  white-space: nowrap;\n  user-select: none;\n}\n\n/* after the slider (no label): a reserved width, so the track does not resize\n   as the number gains a digit */\n:where([mono-input]) > [mono-field] > [mono-range-value] {\n  min-width: var(--mono-input-range-value-min-width, 3ch);\n  text-align: end;\n}\n\n/* =========================================\n   Message — helper / validation text under the field\n   ========================================= */\n\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p — text-sm text-muted-foreground\n   leading-normal font-normal text-start. The wrapper is always rendered\n   (aria-describedby points at it); it takes no space until it holds text. */\n:where([mono-input]) > [mono-message-wrap] {\n  display: block;\n}\n\n:where([mono-input]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\n  display: none;\n}\n\n:where([mono-input]) [mono-message] {\n  font-size: var(--mono-input-message-font-size, var(--mono-text-sm));\n  line-height: var(--mono-input-message-line-height, var(--mono-leading-normal));\n  font-weight: var(--mono-font-weight-normal);\n  text-align: start;\n  color: var(--_mono-input-muted);\n}\n\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\n:where([mono-input]) [mono-message=\"invalid\"] {\n  color: var(--_mono-input-invalid);\n}\n\n/* EXTENSION — the other two states in their role colour */\n:where([mono-input]) [mono-message=\"valid\"] {\n  color: var(--_mono-input-valid);\n}\n\n:where([mono-input]) [mono-message=\"warning\"] {\n  color: var(--_mono-input-warning);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where([mono-input]) > [mono-field],\n  :where([mono-input]) [mono-clear] {\n    transition: none;\n  }\n}\n\n/* =========================================\n   label-position — the slots form/label-position.css reads\n   (top / notched / left / right; public knobs: --mono-input-label-width,\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\n   ========================================= */\n\n[mono-input][mono-label-position] {\n  --_mono-lp-width: var(--mono-input-label-width, auto);\n  --_mono-lp-gap: var(--mono-input-label-side-gap, calc(var(--mono-spacing) * 3));\n  --_mono-lp-height: var(--_mono-input-height);\n  --_mono-lp-box-min: var(--_mono-input-height);\n  --_mono-lp-padding-x: var(--_mono-input-padding-x);\n  --_mono-lp-padding-y: 0px;\n  --_mono-lp-font: var(--mono-input-label-notch-font-size, var(--mono-text-xs));\n  --_mono-lp-notch-bg: var(--mono-input-label-notch-bg, var(--background));\n  --_mono-lp-field-bg: var(--_mono-input-bg);\n}\n";
-
 //#endregion
 //#region src/components/input/mono-input.ts
 let MonoInput = class MonoInput extends MonoInputCore(LitElement) {
@@ -1069,9 +1064,6 @@ let MonoInput = class MonoInput extends MonoInputCore(LitElement) {
 		this._slotLabel = [];
 		this._slotHelper = [];
 	}
-	static {
-		this.styles = [unsafeCSS(input_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/menu.js

@@ -1,11 +1,11 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.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 { t as isIconifyClass } from "../icon-ClxnYhBG.js";
-import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { a as parkDetachedNodes, s as placeSlotNode } from "../light-slots-B5Ck0t_E.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 { LitElement, html, isServer, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 //#region src/components/menu/menu-utils.ts
@@ -830,10 +830,6 @@ const MonoMenuCore = (superClass) => {
 	return MonoMenuCoreClass;
 };
 
-//#endregion
-//#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
 let MonoMenu = class MonoMenu extends MonoMenuCore(LitElement) {
@@ -843,9 +839,6 @@ let MonoMenu = class MonoMenu extends MonoMenuCore(LitElement) {
 		this._hasBodySlot = false;
 		this._slotBody = [];
 	}
-	static {
-		this.styles = [unsafeCSS(menu_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/modal.js

@@ -1,15 +1,15 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
 import { n as detachEventHandlers, t as applyProps } from "../element-props-xvw0EB7H.js";
 import { t as monoModal } from "../mono-modal-controller-ClObbHUs.js";
 import { i as registerPopupLayer, o as unregisterPopupLayer, r as refreshPopupStack, t as getOpenPopupLayers } from "../popup-stack-C64WCuXq.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
-import "../mono-button-CeDB9khW.js";
-import { i as pathOwnedBy } from "../popup-portal-C8ttHDRX.js";
+import { a as parkDetachedNodes, i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
+import "../mono-button-CLkHg3WW.js";
+import { i as pathOwnedBy } from "../popup-portal-CINuVjNY.js";
 import { n as isBelowBreakpoint, r as resolveAutoFullscreen, t as autoFullscreenConverter } from "../breakpoints-DllybT82.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
@@ -845,10 +845,6 @@ const MonoModalCore = (superClass) => {
 	return MonoModalCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\modal\modal.css?raw.js
-var modal_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-modal — a port of Basecoat's `.dialog` (basecoat-css@1.0.2, vega style).\r\n\r\n   Styled by ATTRIBUTE, like Basecoat — and the attributes mirror the element's\r\n   props one for one, so hand-written markup reads like the Lit / Vue tag:\r\n\r\n     <mono-modal size=\"lg\" color=\"success\" model-value title=\"Settings\">\r\n     <div mono-modal mono-size=\"lg\" mono-color=\"success\" mono-open\r\n          role=\"dialog\" aria-modal=\"true\">\r\n       <div mono-overlay></div>\r\n       <div mono-panel-wrap>\r\n         <div mono-panel role=\"document\">\r\n           <div mono-header>\r\n             <div mono-heading>\r\n               <div mono-title>Settings</div>\r\n               <div mono-subtitle>Manage your account</div>\r\n             </div>\r\n             <button mono-close type=\"button\" aria-label=\"Close\">…</button>\r\n           </div>\r\n           <div mono-body>…</div>\r\n           <div mono-footer>…</div>\r\n         </div>\r\n       </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). The element writes them on its ROOT — the\r\n   `<body>` portal in the light build, an inner root `<div>` in the shadow one —\r\n   along with every state below. The old classes (`.mono-modal.md.primary.open`)\r\n   are still emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-modal]        ≡ .dialog (the <dialog> itself) — DEVIATION: a fixed\r\n                           full-viewport wrapper, because this component predates\r\n                           `<dialog>` support and owns its own stacking through\r\n                           `composables/popup-stack`\r\n     [mono-overlay]      ≡ .dialog::backdrop (bg-black/10 backdrop-blur-xs) — the\r\n                           fill is `--mono-mode-backdrop`, a token, since a\r\n                           pseudo-element cannot be reached from a shadow sheet\r\n     [mono-panel-wrap]   ≡ EXTENSION (upstream centres the panel itself with\r\n                           `fixed top-1/2 left-1/2 -translate-1/2`; a flex wrap\r\n                           centres a DRAGGED panel correctly, which that cannot)\r\n     [mono-panel]        ≡ .dialog > * (bg-popover text-popover-foreground ring-1\r\n                           ring-foreground/10 rounded-xl p-6 gap-6 text-sm\r\n                           max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)]\r\n                           flex flex-col sm:max-w-md)\r\n     [mono-header]         ≡ .dialog > * > header (flex flex-col gap-2) — DEVIATION:\r\n                           a ROW, because the ✕ lives inside it (see below)\r\n     [mono-heading]      ≡ upstream's header column itself (flex flex-col gap-2)\r\n                           — the ✕'s row-mate; `slot=\"header\"` replaces it\r\n     [mono-title]        ≡ .dialog > * > header > h2 (leading-none font-medium)\r\n     [mono-subtitle]     ≡ .dialog > * > header > p (text-muted-foreground text-sm\r\n                           leading-normal)\r\n     [mono-body]         ≡ .dialog > * > section (flex-1)\r\n     [mono-footer]         ≡ .dialog > * > footer (flex flex-col-reverse gap-2,\r\n                           sm:flex-row sm:justify-end)\r\n     [mono-close]        ≡ .dialog > * > button (opacity-70 hover:opacity-100,\r\n                           svg size-4) — DEVIATION: in flow inside the head\r\n                           rather than `absolute top-4 end-4`, because the head is\r\n                           also the drag handle; a `slot=\"header\"` replaces only\r\n                           the heading column, never the ✕\r\n     [mono-size]         ≡ EXTENSION. Upstream's `data-size` is a WIDTH; ours is\r\n                           the content scale (padding, type, radius, close box).\r\n                           Width is its own prop — a compact `sm` can still be\r\n                           wide — and defaults to `--mono-container-md`, which is\r\n                           upstream's `sm:max-w-md`.\r\n     [mono-color]        ≡ EXTENSION (upstream's dialog has no colour)\r\n\r\n   THE TINTED HEADER IS GONE. Upstream's dialog is one padded box: the panel\r\n   carries `p-6` and `gap-6`, and header / section / footer are unpadded,\r\n   unbordered, untinted regions inside it. The gradient head bar, the tinted\r\n   footer and both divider rules went with it — `--mono-modal-header-bg` and\r\n   `-foot-bg` remain as knobs, defaulting to `transparent`, so a consumer who\r\n   wants the bar back sets those two.\r\n\r\n   PART NAMES ARE PATH-SCOPED. `[mono-panel]`, `[mono-body]`, `[mono-title]` and\r\n   `[mono-close]` are also dropdown's, card's and input's part names, and a modal\r\n   BODY is where consumers put all three. Every rule here is written as an\r\n   explicit child path from the root, with `:where()` keeping the resting weight\r\n   at (0,1,0) so a `cssClass` utility still wins by source order.\r\n\r\n   FLAVORS set `--mono-modal-{radius,padding,gap,ring-color,shadow,width,\r\n   title-font,overlay-bg,overlay-backdrop-filter,close-*}` (+ the per-size\r\n   forms); every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dialog\"` prints the matrix).\r\n   ========================================================================= */\r\n\r\nmono-modal {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Root — the layer\r\n   ========================================= */\r\n\r\n[mono-modal] {\r\n  /* ── the six roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-modal-primary: var(--mono-modal-primary, var(--primary));\r\n  --_mono-modal-secondary: var(--mono-modal-secondary, var(--secondary-foreground));\r\n  --_mono-modal-success: var(--mono-modal-success, var(--success));\r\n  --_mono-modal-danger: var(--mono-modal-danger, var(--destructive));\r\n  --_mono-modal-warning: var(--mono-modal-warning, var(--warning));\r\n  --_mono-modal-info: var(--mono-modal-info, var(--info));\r\n  --_mono-modal-teal: var(--mono-modal-teal, var(--teal));\r\n  --_mono-modal-purple: var(--mono-modal-purple, var(--purple));\r\n  --_mono-modal-neutral: var(--mono-modal-neutral, var(--neutral));\r\n  --_mono-modal-dark: var(--mono-modal-dark, var(--dark));\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-modal-accent: var(--mono-modal-accent, var(--_mono-modal-accent-preset, var(--_mono-modal-primary)));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-modal-bg: var(--mono-modal-bg, var(--mono-modal-surface, var(--popover)));\r\n  --_mono-modal-text: var(--mono-modal-text, var(--popover-foreground));\r\n  --_mono-modal-border: var(--mono-modal-border, var(--border));\r\n  --_mono-modal-ring-width: var(--mono-modal-ring-width, var(--mono-border-width));\r\n  --_mono-modal-ring-color: var(--mono-modal-ring-color,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-modal-shadow: var(--mono-modal-shadow, var(--mono-shadow-lg));\r\n  /* a faint halo of the accent under the elevation — nothing until `color` is set */\r\n  --_mono-modal-glow: var(--mono-modal-glow, 0 0 #0000);\r\n\r\n  /* The tinted head / foot bars of the pre-port modal. Upstream has neither —\r\n     its dialog is ONE padded box — so both default to nothing, and a consumer\r\n     who wants the bar back sets the pair (and `-head-border` for the rule). */\r\n  --_mono-modal-header-bg: var(--mono-modal-header-bg, var(--mono-modal-head-bg, transparent));\r\n  --_mono-modal-footer-bg: var(--mono-modal-footer-bg, transparent);\r\n  --_mono-modal-header-border: var(--mono-modal-header-border, transparent);\r\n  --_mono-modal-footer-border: var(--mono-modal-footer-border, transparent);\r\n  /* 0, not a transparent hairline: upstream has no divider, and a transparent\r\n     one would still take a pixel of layout. Restoring the bar means setting the\r\n     width with the colour. */\r\n  --_mono-modal-header-border-width: var(--mono-modal-header-border-width, 0);\r\n  --_mono-modal-footer-border-width: var(--mono-modal-footer-border-width, 0);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .dialog > * — rounded-xl p-6 gap-6 text-sm */\r\n  --_mono-modal-radius: var(--mono-modal-radius, var(--_mono-modal-radius-preset, var(--mono-modal-radius-md, var(--mono-radius-xl))));\r\n  --_mono-modal-pad: var(--mono-modal-pad, var(--_mono-modal-pad-preset, var(--mono-modal-pad-md, calc(var(--mono-spacing) * 6))));\r\n  --_mono-modal-gap: var(--mono-modal-gap, var(--_mono-modal-gap-preset, var(--mono-modal-gap-md, calc(var(--mono-spacing) * 6))));\r\n  --_mono-modal-header-gap: var(--mono-modal-header-gap, var(--_mono-modal-header-gap-preset, var(--mono-modal-header-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-modal-footer-gap: var(--mono-modal-footer-gap, var(--_mono-modal-footer-gap-preset, var(--mono-modal-footer-gap-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-modal-body-font: var(--mono-modal-body-font, var(--_mono-modal-body-font-preset, var(--mono-modal-body-font-md, var(--mono-text-sm))));\r\n  --_mono-modal-body-line-height: var(--mono-modal-body-line-height, var(--_mono-modal-body-line-height-preset, var(--mono-text-sm--lh)));\r\n  /* `leading-none font-medium`, at the panel's own size — four of the eight\r\n     flavors bump it to `text-base` and sera to `text-lg`. */\r\n  --_mono-modal-title-font: var(--mono-modal-title-font, var(--_mono-modal-title-font-preset, var(--mono-modal-title-font-md, var(--mono-text-sm))));\r\n  --_mono-modal-title-weight: var(--mono-modal-title-weight, var(--mono-font-weight-medium));\r\n  --_mono-modal-title-color: var(--mono-modal-title-color, var(--_mono-modal-text));\r\n  /* the description line — `text-muted-foreground text-sm leading-normal`; the\r\n     font follows the body's per-size step, which is `text-sm` at md */\r\n  --_mono-modal-subtitle-font: var(--mono-modal-subtitle-font, var(--_mono-modal-body-font));\r\n  --_mono-modal-subtitle-color: var(--mono-modal-subtitle-color, var(--muted-foreground));\r\n\r\n  /* ── the close ✕ — `opacity-70 hover:opacity-100`, glyph `size-4` ───────── */\r\n  --_mono-modal-close-size: var(--mono-modal-close-size, var(--_mono-modal-close-size-preset, var(--mono-modal-close-size-md, calc(var(--mono-spacing) * 7))));\r\n  --_mono-modal-close-glyph: var(--mono-modal-close-glyph, var(--_mono-modal-close-glyph-preset, calc(var(--mono-spacing) * 4)));\r\n  --_mono-modal-close-radius: var(--mono-modal-close-radius, var(--mono-radius-sm));\r\n  --_mono-modal-close-bg: var(--mono-modal-close-bg, transparent);\r\n  --_mono-modal-close-color: var(--mono-modal-close-color, var(--_mono-modal-text));\r\n  --_mono-modal-close-opacity: var(--mono-modal-close-opacity, 0.7);\r\n  --_mono-modal-close-hover-opacity: var(--mono-modal-close-hover-opacity, 1);\r\n  --_mono-modal-close-hover-bg: var(--mono-modal-close-hover-bg, transparent);\r\n\r\n  /* ── the backdrop — `bg-black/10 backdrop-blur-xs` ─────────────────────── */\r\n  --_mono-modal-overlay-bg: var(--mono-modal-overlay-bg, var(--mono-mode-backdrop));\r\n  /* Public so a flavor can drop the blur; a descendant rule would not reach the\r\n     shadow build's overlay. */\r\n  --_mono-modal-overlay-backdrop-filter: var(--mono-modal-overlay-backdrop-filter, blur(var(--mono-blur-xs)));\r\n\r\n  --_mono-modal-z: var(--mono-modal-z, 600);\r\n\r\n  /* `max-w-[calc(100%-2rem)] sm:max-w-md` — the width is a PROP here (a dialog's\r\n     measure and its density are independent choices, which is why `size` does\r\n     not touch it), so the default is upstream's `md` container. */\r\n  --_mono-modal-width: var(--mono-modal-width, min(calc(100% - 2rem), var(--mono-container-md)));\r\n\r\n  /* Open/close animation duration. One source of truth for the panel's opacity +\r\n     transform AND the delayed `visibility` / `content-visibility` flips, which have\r\n     to stay in lockstep with them — they used to be six hand-maintained `0.22s`\r\n     literals. Set `--mono-modal-duration: 0s` for an instant, animation-free modal;\r\n     worth doing when the modal body holds a lot of components, since that is what\r\n     the open/close frames have to re-measure. */\r\n  --_mono-modal-duration: var(--mono-modal-duration, var(--mono-duration-slow));\r\n  /* The overlay keeps its own default so an explicit `--mono-modal-duration: 0s`\r\n     does not leave the scrim fading on its own. */\r\n  --_mono-modal-overlay-duration: var(--mono-modal-duration, var(--mono-duration-slow));\r\n\r\n  /* Sized in VIEWPORT units, not `inset: 0`/`100%`. Both of those resolve against\r\n     the initial containing block, which a horizontally-overflowing page inflates\r\n     under mobile emulation (measured: 481x1041 on a 390x844 screen) — the panel\r\n     then centres inside an oversized wrap and stops covering the screen. Viewport\r\n     units stay correct there. `dvh`/`dvw` additionally track mobile browser chrome,\r\n     so the `v*` line below is only the pre-2022 fallback. */\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  z-index: var(--_mono-modal-z);\r\n  pointer-events: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-modal-text);\r\n}\r\n\r\n[mono-modal],\r\n:where([mono-modal]) *,\r\n:where([mono-modal]) *::before,\r\n:where([mono-modal]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: upstream's `data-size` is a width; this is the density\r\n   ========================================= */\r\n\r\n[mono-modal][mono-size=\"xs\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xs, var(--mono-radius-md));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xs, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xs, var(--mono-spacing));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xs, var(--mono-spacing));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xs, var(--mono-text-xs));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xs, var(--mono-text-xs));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xs, calc(var(--mono-spacing) * 5));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n[mono-modal][mono-size=\"sm\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-sm, var(--mono-radius-lg));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-sm, calc(var(--mono-spacing) * 4));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-sm, calc(var(--mono-spacing) * 4));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-sm, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-sm, calc(var(--mono-spacing) * 2));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-sm, var(--mono-text-sm));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-sm, var(--mono-text-xs));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-xs--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-sm, calc(var(--mono-spacing) * 6));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 3.5);\r\n}\r\n\r\n[mono-modal][mono-size=\"lg\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-lg, var(--mono-radius-2xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-lg, calc(var(--mono-spacing) * 7));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-lg, calc(var(--mono-spacing) * 7));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-lg, var(--mono-text-base));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-lg, var(--mono-text-sm));\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-lg, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 4.5);\r\n}\r\n\r\n[mono-modal][mono-size=\"xl\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xl, var(--mono-radius-2xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xl, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xl, calc(var(--mono-spacing) * 8));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xl, var(--mono-text-lg));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xl, var(--mono-text-base));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-base--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-modal][mono-size=\"xxl\"] {\r\n  --_mono-modal-radius-preset: var(--mono-modal-radius-xxl, var(--mono-radius-4xl));\r\n  --_mono-modal-pad-preset: var(--mono-modal-pad-xxl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-gap-preset: var(--mono-modal-gap-xxl, calc(var(--mono-spacing) * 9));\r\n  --_mono-modal-header-gap-preset: var(--mono-modal-header-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-modal-footer-gap-preset: var(--mono-modal-footer-gap-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-modal-title-font-preset: var(--mono-modal-title-font-xxl, var(--mono-text-xl));\r\n  --_mono-modal-body-font-preset: var(--mono-modal-body-font-xxl, var(--mono-text-lg));\r\n  --_mono-modal-body-line-height-preset: var(--mono-text-lg--lh);\r\n  --_mono-modal-close-size-preset: var(--mono-modal-close-size-xxl, calc(var(--mono-spacing) * 10));\r\n  --_mono-modal-close-glyph-preset: calc(var(--mono-spacing) * 5.5);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the role tints the ring and whatever the consumer\r\n   turns back on (the head bar, the close hover)\r\n   ========================================= */\r\n\r\n[mono-modal][mono-color=\"primary\"] { --_mono-modal-accent-preset: var(--_mono-modal-primary); }\r\n[mono-modal][mono-color=\"secondary\"] { --_mono-modal-accent-preset: var(--_mono-modal-secondary); }\r\n[mono-modal][mono-color=\"success\"] { --_mono-modal-accent-preset: var(--_mono-modal-success); }\r\n[mono-modal][mono-color=\"danger\"] { --_mono-modal-accent-preset: var(--_mono-modal-danger); }\r\n[mono-modal][mono-color=\"warning\"] { --_mono-modal-accent-preset: var(--_mono-modal-warning); }\r\n[mono-modal][mono-color=\"info\"] { --_mono-modal-accent-preset: var(--_mono-modal-info); }\r\n[mono-modal][mono-color=\"teal\"] { --_mono-modal-accent-preset: var(--_mono-modal-teal); }\r\n[mono-modal][mono-color=\"purple\"] { --_mono-modal-accent-preset: var(--_mono-modal-purple); }\r\n[mono-modal][mono-color=\"neutral\"] { --_mono-modal-accent-preset: var(--_mono-modal-neutral); }\r\n[mono-modal][mono-color=\"dark\"] { --_mono-modal-accent-preset: var(--_mono-modal-dark); }\r\n\r\n/* An explicit `color` shows on the panel itself, not only in the ✕ hover: a\r\n   thin line of the accent sits ON the ring and a faint halo of it under the\r\n   elevation — \"bordered green, glowing green just a little\". Both live in the\r\n   glow layer (first in the shadow list, so the translucent foreground/10 ring\r\n   does not muddy the line, and a flavour's own `--mono-modal-ring-color` is\r\n   left alone). Without `color` the layer is nothing. `--mono-modal-glow`\r\n   replaces the whole layer; `--mono-modal-accent-ring` recolours the line. */\r\n[mono-modal][mono-color] {\r\n  --_mono-modal-glow: var(--mono-modal-glow,\r\n    0 0 0 var(--_mono-modal-ring-width) var(--mono-modal-accent-ring, color-mix(in oklab, var(--_mono-modal-accent) 35%, var(--_mono-modal-border))),\r\n    0 0 24px -4px color-mix(in oklab, var(--_mono-modal-accent) 45%, transparent));\r\n}\r\n\r\n/* =========================================\r\n   Overlay — `::backdrop`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog::backdrop, .alert-dialog::backdrop, .command-dialog::backdrop\r\n   — bg-black/10 backdrop-blur-xs duration-100. A real `::backdrop` cannot be\r\n   reached from a shadow sheet and cannot stack with this component's own layer\r\n   manager, so it is an element — the fill is upstream's, through the mode token. */\r\n:where([mono-modal]) > [mono-overlay] {\r\n  /* Viewport units, not `inset: 0` — see the note on the root. */\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  background: var(--_mono-modal-overlay-bg);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n\r\n  /* The blur is applied only while open; it used to be declared unconditionally with\r\n     `opacity: 0` as the only thing hiding it. Hygiene rather than a measured win —\r\n     `backdrop-filter` is a paint/composite cost, and the layout+style metrics used to\r\n     validate the `content-visibility` change below cannot attribute anything to it\r\n     either way. Kept because a filter on a never-shown full-viewport element is work\r\n     the browser should never be asked to consider, and the change is free.\r\n\r\n     Removal is DELAYED by the fade duration (the same idiom this file already uses\r\n     for `visibility` below): drop it immediately and the backdrop snaps sharp while\r\n     the scrim is still fading out. `backdrop-filter` is animatable, so a plain\r\n     delayed transition does the job — no `allow-discrete` needed. */\r\n  backdrop-filter: none;\r\n  -webkit-backdrop-filter: none;\r\n  transition:\r\n    opacity var(--_mono-modal-overlay-duration) var(--mono-ease),\r\n    backdrop-filter 0s linear var(--_mono-modal-overlay-duration),\r\n    -webkit-backdrop-filter 0s linear var(--_mono-modal-overlay-duration);\r\n}\r\n\r\n[mono-modal][mono-open] > [mono-overlay] {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  backdrop-filter: var(--_mono-modal-overlay-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-modal-overlay-backdrop-filter);\r\n  transition:\r\n    opacity var(--_mono-modal-overlay-duration) var(--mono-ease),\r\n    backdrop-filter 0s linear 0s,\r\n    -webkit-backdrop-filter 0s linear 0s;\r\n}\r\n\r\n[mono-modal][mono-no-overlay] > [mono-overlay] {\r\n  display: none;\r\n}\r\n\r\n/* Stacked modals: when another modal or drawer WITH an overlay is open above\r\n   this one, hide this backdrop so dim layers don't compound — the topmost\r\n   overlay alone dims everything beneath it. An `overlay=\"false\"` dialog above\r\n   does not count, so this one keeps dimming the page. */\r\n[mono-modal][mono-open][mono-has-modal-above] > [mono-overlay] {\r\n  opacity: 0;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dialog > *`\r\n   ========================================= */\r\n\r\n/* EXTENSION — the centring box. Upstream centres the panel itself\r\n   (`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`), which this\r\n   component cannot: the drag offset is a `translate` too, and the two would\r\n   fight. A flex wrap centres without spending the transform. */\r\n:where([mono-modal]) > [mono-panel-wrap] {\r\n  /* Viewport units, not `inset: 0` — see the note on the root. This is the box\r\n     the panel centres in, so an inflated one offsets the panel off-screen. */\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 1rem;\r\n  pointer-events: none;\r\n  z-index: calc(var(--_mono-modal-z) + 1);\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog, .alert-dialog >> > * — fixed z-50\r\n   flex max-h-[calc(100%_-_2rem)] w-full flex-col transition-all outline-hidden */\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * — bg-popover text-popover-foreground\r\n   ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1\r\n   duration-100 sm:max-w-md */\r\n:where([mono-modal] > [mono-panel-wrap]) > [mono-panel] {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-modal-gap);\r\n  width: var(--_mono-modal-width);\r\n  max-width: calc(100% - 2rem);\r\n  max-height: calc(100vh - 2rem);\r\n  max-height: calc(100dvh - 2rem);\r\n  padding: var(--_mono-modal-pad);\r\n  border-radius: var(--_mono-modal-radius);\r\n  background: var(--_mono-modal-bg);\r\n  color: var(--_mono-modal-text);\r\n  box-shadow:\r\n    var(--_mono-modal-glow),\r\n    0 0 0 var(--_mono-modal-ring-width) var(--_mono-modal-ring-color),\r\n    var(--_mono-modal-shadow);\r\n  overflow: hidden;\r\n  outline: none;\r\n  pointer-events: auto;\r\n\r\n  /* Closed state: invisible (hides shadow halo) + scaled-down, which is\r\n     upstream's `@starting-style` pair (`opacity-0` + `scale-95`) written as a\r\n     class transition — a `<dialog>`'s discrete open/close is not available to a\r\n     component that manages its own layer. The visibility flip is delayed on\r\n     close so the scale-out animation plays first. */\r\n  opacity: 0;\r\n  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(0.95);\r\n  visibility: hidden;\r\n  transition:\r\n    opacity var(--_mono-modal-duration) var(--mono-ease),\r\n    transform var(--_mono-modal-duration) var(--mono-ease),\r\n    visibility 0s linear var(--_mono-modal-duration);\r\n}\r\n\r\n[mono-modal][mono-open] > [mono-panel-wrap] > [mono-panel] {\r\n  opacity: 1;\r\n  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(1);\r\n  visibility: visible;\r\n  transition:\r\n    opacity var(--_mono-modal-duration) var(--mono-ease),\r\n    transform var(--_mono-modal-duration) var(--mono-ease),\r\n    visibility 0s linear 0s;\r\n}\r\n\r\n/* Draggable: the head is the drag handle; suppress the transform transition while\r\n   dragging so the panel tracks the pointer 1:1 and snaps instantly on drop. */\r\n[mono-modal][mono-draggable] > [mono-panel-wrap] > [mono-panel] > [mono-header] {\r\n  cursor: move;\r\n  touch-action: none;\r\n  user-select: none;\r\n}\r\n\r\n[mono-modal][mono-draggable] > [mono-panel-wrap] > [mono-panel] > [mono-header] [mono-close] {\r\n  cursor: pointer;\r\n}\r\n\r\n[mono-modal][mono-dragging] > [mono-panel-wrap] > [mono-panel] {\r\n  transition: none;\r\n}\r\n\r\n/* =========================================\r\n   Head — `> header`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > header — flex flex-col */\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header — gap-2\r\n   DEVIATION: a ROW. Upstream's header is a column of title + description with the\r\n   ✕ absolutely positioned beside it; ours holds the ✕ because the head is the\r\n   drag handle. Upstream's column is `[mono-heading]` below, the ✕'s row-mate —\r\n   and all a `slot=\"header\"` replaces. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-header] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-modal-header-gap);\r\n  flex-shrink: 0;\r\n  padding: var(--mono-modal-header-pad, 0);\r\n  border-bottom: var(--_mono-modal-header-border-width) solid var(--_mono-modal-header-border);\r\n  background: var(--_mono-modal-header-bg);\r\n}\r\n\r\n/* No subtitle: a lone title line sits centred beside the taller ✕ instead of\r\n   riding its top edge. With a subtitle the head stays top-aligned. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-header][mono-no-subtitle] {\r\n  align-items: center;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header > h2, .dialog > * > [data-title]\r\n   — leading-none font-medium */\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > header — flex flex-col\r\n   (+ vega's gap-2): the title / subtitle column, taking the row beside the ✕. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) > [mono-heading] {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-modal-heading-gap, var(--_mono-modal-header-gap));\r\n}\r\n\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-title] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-modal-title-font);\r\n  font-weight: var(--_mono-modal-title-weight);\r\n  line-height: var(--mono-leading-none, 1);\r\n  color: var(--_mono-modal-title-color);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * > header > p, .dialog > * > [data-description]\r\n   — text-muted-foreground text-sm leading-normal */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-subtitle] {\r\n  min-width: 0;\r\n  font-size: var(--_mono-modal-subtitle-font);\r\n  line-height: var(--mono-modal-subtitle-line-height, var(--mono-leading-normal));\r\n  color: var(--_mono-modal-subtitle-color);\r\n}\r\n\r\n/* Empty regions. The light build omits them; the shadow build always renders\r\n   them (its native `<slot>`s must exist to be scanned) and marks them\r\n   [mono-empty]. The heading parts are matched as descendants because the shadow\r\n   build nests them inside the `header` slot's fallback. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > :is([mono-header], [mono-footer])[mono-empty],\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) > [mono-heading][mono-empty],\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header] > [mono-heading]) :is([mono-title], [mono-subtitle])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Close — `> button`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > :is(button, form[method='dialog'] > button)\r\n   — inline-flex items-center justify-center opacity-70 transition-opacity\r\n   hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none\r\n   DEVIATION: in flow inside the head rather than `absolute top-4 end-4` — see\r\n   the header note above. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-header]) [mono-close] {\r\n  flex-shrink: 0;\r\n  /* stays at the end even when the heading column is empty (hidden) */\r\n  margin-inline-start: auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-modal-close-size);\r\n  height: var(--_mono-modal-close-size);\r\n  padding: 0;\r\n  border: none;\r\n  border-radius: var(--_mono-modal-close-radius);\r\n  background: var(--_mono-modal-close-bg);\r\n  color: var(--_mono-modal-close-color);\r\n  opacity: var(--_mono-modal-close-opacity);\r\n  cursor: pointer;\r\n  appearance: none;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-modal] [mono-close]:hover {\r\n    opacity: var(--_mono-modal-close-hover-opacity);\r\n    background: var(--_mono-modal-close-hover-bg);\r\n  }\r\n}\r\n\r\n[mono-modal] [mono-close]:focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 var(--mono-ring-width)\r\n    color-mix(in oklab, var(--ring) var(--mono-ring-alpha), transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-'])\r\n   — size-4 */\r\n[mono-modal] [mono-close] > :is(svg, span) {\r\n  display: block;\r\n  width: var(--_mono-modal-close-glyph);\r\n  height: var(--_mono-modal-close-glyph);\r\n}\r\n\r\n/* =========================================\r\n   Body — `> section`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > section — flex-1\r\n   The panel's own `p-6` is the padding; `--mono-modal-body-pad` restores an\r\n   inner one for a body that scrolls under a restored head bar. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-body] {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: var(--mono-modal-body-pad, 0);\r\n  font-size: var(--_mono-modal-body-font);\r\n  line-height: var(--_mono-modal-body-line-height);\r\n  color: var(--_mono-modal-text);\r\n}\r\n\r\n/* =========================================\r\n   Foot — `> footer`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dialog.css .dialog >> > * > footer\r\n   — flex flex-col-reverse sm:flex-row sm:justify-end */\r\n/* basecoat@1.0.2 styles/vega.css .alert-dialog > * > footer, .dialog > * > footer — gap-2 */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel]) > [mono-footer] {\r\n  display: flex;\r\n  flex-direction: column-reverse;\r\n  gap: var(--_mono-modal-footer-gap);\r\n  flex-shrink: 0;\r\n  margin: var(--mono-modal-footer-margin, 0);\r\n  padding: var(--mono-modal-footer-pad, 0);\r\n  border-top: var(--_mono-modal-footer-border-width) solid var(--_mono-modal-footer-border);\r\n  border-end-start-radius: var(--mono-modal-footer-radius, 0);\r\n  border-end-end-radius: var(--mono-modal-footer-radius, 0);\r\n  background: var(--_mono-modal-footer-bg);\r\n}\r\n\r\n@media (width >= 40rem) {\r\n  [mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-footer] {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-end;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Full screen — both width and height passed as \"100%\"\r\n   ========================================= */\r\n\r\n[mono-modal][mono-fullscreen] > [mono-panel-wrap] {\r\n  padding: 0;\r\n}\r\n\r\n[mono-modal][mono-fullscreen] > [mono-panel-wrap] > [mono-panel] {\r\n  width: 100vw;\r\n  width: 100dvw;\r\n  height: 100vh;\r\n  height: 100dvh;\r\n  max-width: 100vw;\r\n  max-width: 100dvw;\r\n  max-height: 100vh;\r\n  max-height: 100dvh;\r\n  border-radius: 0;\r\n}\r\n\r\n/* A closed modal is hidden with `visibility: hidden`, which skips PAINT but not\r\n   LAYOUT — so the panel and everything slotted into it kept generating boxes and\r\n   being measured even for a modal the user never opened. That cost is paid at mount:\r\n   `mono-modal.ts` builds the <body> portal in `createRenderRoot()`, moves the\r\n   consumer's children into it, and forces a synchronous `performUpdate()` from\r\n   `connectedCallback`. `content-visibility: hidden` drops the closed subtree\r\n   entirely, so a heavy modal costs nothing until it is opened.\r\n\r\n   Measured (Chromium, ~400-node panels, 10 modal+drawer pairs, 20k DOM nodes):\r\n     layout objects: 12281 → 81 (−99.3%); with a single pair, 1237 → 18\r\n     mount layout+style: 94.6ms → 14.9ms, and flat in the number of modals\r\n   The trade, same as the accordion's: one open+close costs MORE (2.1ms → 8.0ms),\r\n   because an opening panel is laid out from scratch instead of incrementally. Worth\r\n   it — you mount once and toggle rarely — and `--mono-modal-duration: 0s` claws the\r\n   toggle back if a body is heavy enough to notice.\r\n\r\n   `allow-discrete` is what makes it safe to animate. Opening flips the property to\r\n   `visible` at 0%, so the scale/opacity animation has something to composite;\r\n   closing holds it `visible` until 100%, so the panel scales out instead of\r\n   vanishing on the first frame.\r\n\r\n   Gated behind @supports deliberately: `content-visibility … allow-discrete` inside\r\n   the `transition` SHORTHAND is a parse error to a browser without the feature, and\r\n   one bad entry drops the WHOLE declaration — which would take the modal's fade and\r\n   scale with it. Inside the guard the shorthand is known to parse, so the list is\r\n   restated in full. Browsers without support keep exactly the previous behaviour.\r\n\r\n   Must stay ABOVE the reduced-motion block below: that block wins on `!important`,\r\n   but @supports adds no specificity, so source order is what keeps it winning. */\r\n@supports (transition-behavior: allow-discrete) {\r\n  :where([mono-modal] > [mono-panel-wrap]) > [mono-panel] {\r\n    content-visibility: hidden;\r\n    contain-intrinsic-size: 0;\r\n    transition:\r\n      opacity var(--_mono-modal-duration) var(--mono-ease),\r\n      transform var(--_mono-modal-duration) var(--mono-ease),\r\n      visibility 0s linear var(--_mono-modal-duration),\r\n      content-visibility var(--_mono-modal-duration) allow-discrete;\r\n  }\r\n\r\n  [mono-modal][mono-open] > [mono-panel-wrap] > [mono-panel] {\r\n    content-visibility: visible;\r\n  }\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-modal] > [mono-overlay],\r\n  [mono-modal] > [mono-panel-wrap] > [mono-panel] {\r\n    transition: opacity 0.01s linear, visibility 0s linear !important;\r\n    transform: none !important;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Auto full-screen (`auto-fullscreen` prop)\r\n   =========================================\r\n\r\n   Fill the screen at a Tailwind breakpoint and below. The boundaries are\r\n   `<breakpoint> - 0.02px` so they match Tailwind's `max-*` variants exactly: at\r\n   exactly 640px `sm:` applies, so auto-fullscreen must NOT.\r\n\r\n   Two things to know before editing:\r\n\r\n   1. `!important` is required here, unlike `[mono-fullscreen]` above.\r\n      `_panelSizeStyle()` writes `width`/`height`/`min-*`/`max-*` as INLINE styles\r\n      whenever the consumer sets a sizing prop, and inline beats any selector —\r\n      without it `<mono-modal auto-fullscreen width=\"720\">` would stay 720px on a\r\n      phone. The `min-*` resets matter too: a `min-width` larger than `width` still\r\n      wins.\r\n   2. The five near-identical blocks are unavoidable — a media query cannot be\r\n      parameterised by an attribute or a custom property, so each breakpoint needs\r\n      its own. Keep them in sync.\r\n*/\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"sm\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"sm\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 767.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"md\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"md\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1023.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"lg\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"lg\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1279.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"xl\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"xl\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n@media (max-width: 1535.98px) {\r\n  [mono-modal][mono-auto-fullscreen=\"2xl\"] > [mono-panel-wrap] {\r\n    padding: 0;\r\n  }\r\n\r\n  [mono-modal][mono-auto-fullscreen=\"2xl\"] > [mono-panel-wrap] > [mono-panel] {\r\n    width: 100vw !important;\r\n    width: 100dvw !important;\r\n    height: 100vh !important;\r\n    height: 100dvh !important;\r\n    min-width: 0 !important;\r\n    min-height: 0 !important;\r\n    max-width: 100vw !important;\r\n    max-width: 100dvw !important;\r\n    max-height: 100vh !important;\r\n    max-height: 100dvh !important;\r\n    border-radius: 0;\r\n  }\r\n}\r\n\r\n/* ── Programmatic dialog (`controlMonoModal().dialog`) ─────────────────────────\r\n   The compact question box the controller builds by code — upstream's\r\n   `.alert-dialog`: the text centred, the actions centred under it, and a lighter\r\n   scrim, because what the question is about should stay readable behind it.\r\n   `mono-dialog` is set through `cssClassName` on the dialog's own modal, so an\r\n   ordinary <mono-modal> is untouched. */\r\n[mono-modal][mono-dialog] {\r\n  --_mono-modal-overlay-backdrop-filter: var(--mono-modal-overlay-backdrop-filter, none);\r\n  --_mono-modal-overlay-bg: var(--mono-modal-overlay-bg,\r\n    color-mix(in oklab, black 22%, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .alert-dialog >> > * > header — grid\r\n   place-items-center text-center sm:place-items-start sm:text-start\r\n   DEVIATION: centred at EVERY width. This box is one question and two buttons —\r\n   upstream's `sm:` left-align belongs to the icon+title+description layout its\r\n   alert dialog builds, which the controller does not produce. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-body] {\r\n  text-align: center;\r\n}\r\n\r\n/* basecoat@1.0.2 components/dialog.css .alert-dialog >> &:is([data-size='sm']) > * > footer, > [data-size='sm'] > footer\r\n   — grid grid-cols-2. The controller's dialog is that `sm` alert: its actions sit\r\n   together under the question rather than trailing to the end. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-footer] {\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n/* The light build re-appends slotted nodes into a `[data-mono-slot]` outlet.\r\n   Left inline, that outlet is ONE flex child, so the footer's gap and\r\n   justification apply to IT rather than to the buttons inside it — while the\r\n   shadow build's `<slot>` is `display: contents` per the UA sheet and the\r\n   hand-written markup has no wrapper at all. Dissolving the outlet is what\r\n   makes the three agree, and it is what a consumer writing\r\n   `<button slot=\"footer\">` twice expects. */\r\n:where([mono-modal] > [mono-panel-wrap] > [mono-panel] > [mono-footer]) > [data-mono-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* The captured footer lands in an inline `<span data-mono-slot=\"foot\">` outlet, so\r\n   the buttons would otherwise sit in a LINE box — baseline-aligned, a solid button\r\n   with an icon a few px lower than an outline one beside it, with line-height air\r\n   underneath. The outlet becomes the flex row instead, and the actions wrapper\r\n   dissolves into it. */\r\n[mono-modal][mono-dialog] > [mono-panel-wrap] > [mono-panel] > [mono-footer] > [data-mono-slot=\"foot\"] {\r\n  display: flex;\r\n  flex: 1 1 auto;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--_mono-modal-footer-gap);\r\n  line-height: 1;\r\n}\r\n\r\n[mono-modal][mono-dialog] .mono-modal-dialog-actions {\r\n  display: contents;\r\n}\r\n";
-
 //#endregion
 //#region src/components/modal/mono-modal.ts
 let MonoModal = class MonoModal extends MonoModalCore(LitElement) {
@@ -864,9 +860,6 @@ let MonoModal = class MonoModal extends MonoModalCore(LitElement) {
 		this._slotHeaderAlias = [];
 		this._slotFooterAlias = [];
 	}
-	static {
-		this.styles = [unsafeCSS(modal_css_raw_default)];
-	}
 	createRenderRoot() {
 		if (this._portal) return this._portal;
 		if (typeof document === "undefined") return this;

package/dist/ui/nav.js

@@ -1,11 +1,11 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
-import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../css-class-B6Tc_MAx.js";
 import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../color-CEYYtRX-.js";
 import { n as releaseLayoutVar, t as claimLayoutVar } from "../layout-var-BSBKY49k.js";
-import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 //#region src/components/nav/nav-utils.ts
@@ -224,10 +224,6 @@ const MonoNavCore = (superClass) => {
 	return MonoNavCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\nav\nav.css?raw.js
-var nav_css_raw_default = "/* @unocss-include */\r\n\r\n/* =========================================================================\r\n   mono-nav — the top app bar.\r\n\r\n   Basecoat ships NO nav component. basecoat-css@1.0.2 has dialog, drawer,\r\n   sidebar, tabs, dropdown-menu … and no header bar, so this is an EXTENSION:\r\n   the structure is mono's own and every VALUE is drawn from the Basecoat token\r\n   layer and from `.sidebar nav`, which is the other piece of app chrome and the\r\n   one this bar sits beside. Where a rule has an upstream counterpart it is\r\n   cited; everything else is ours.\r\n\r\n   Styled by ATTRIBUTE, like the rest of the port — and the attributes mirror\r\n   the element's props one for one, so hand-written markup reads like the Lit /\r\n   Vue tag:\r\n\r\n     <mono-nav density=\"compact\" color=\"primary\" variant=\"outlined\" extension>\r\n     <header mono-nav mono-density=\"compact\" mono-color=\"primary\"\r\n             mono-variant=\"outlined\" mono-has-extension role=\"banner\">\r\n       <div mono-inner>\r\n         <div mono-start>…</div>\r\n         <div mono-center>…</div>\r\n         <div mono-end>…</div>\r\n       </div>\r\n       <div mono-extension>…</div>\r\n     </header>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-density])` =\r\n   comfortable, `:not([mono-color])` = surface, `:not([mono-variant])` =\r\n   elevated). `sticky` defaults to TRUE, so it is the NEGATIVE that says\r\n   something: `mono-static` opts a bar out. The old classes\r\n   (`.mono-nav.comfortable.surface.elevated.sticky`) are still emitted as inert\r\n   hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map:\r\n     [mono-nav]            the <header> — the bar, and the var scope\r\n     [mono-density=…]      EXTENSION (compact / comfortable / default)\r\n     [mono-color=…]        EXTENSION (ten palette roles, `surface`, `custom`)\r\n     [mono-variant=…]      EXTENSION (elevated / flat / outlined)\r\n     [mono-inner]          the bar row\r\n     [mono-start] / [mono-center] / [mono-end]   the three regions\r\n     [mono-extension]      the optional second row\r\n\r\n   COLOUR. `surface` (the default) leaves the bar unpainted: it takes\r\n   `--sidebar` / `--sidebar-foreground` / `--sidebar-border`, exactly what\r\n   upstream gives the sidebar's own chrome. Every other role PAINTS the bar in\r\n   that role and inks it in the role's `-foreground` token, the way\r\n   `.btn[data-variant='primary']` does — which is what finally retires the\r\n   `--*-rgb` triples and the hand-rolled contrast maths the pre-port sheet\r\n   needed. A literal `color` (\"#7c3aed\") still arrives inline from the component\r\n   (`composables/color.ts`) as `mono-color=\"custom\"`.\r\n\r\n   NO GRADIENTS, NO BLUR. The pre-port `surface` bar was a 96%-opaque\r\n   `backdrop-filter: blur(12px)` pane and `elevated` was an accent-tinted glow.\r\n   Both are gone: the bar is opaque and `elevated` is `--mono-shadow-sm`.\r\n   `--mono-nav-backdrop-filter` brings the blur back for a page that wants it.\r\n\r\n   DARK MODE comes free — every colour here resolves through a Basecoat token\r\n   that already flips, and the alphas are mode-independent. No `.dark` rule can\r\n   live in component CSS anyway: a selector crosses neither the custom-element\r\n   host nor the shadow boundary.\r\n\r\n   FLAVORS set `--mono-nav-{bar-height,pad-x,gap,extension-height,radius,shadow,\r\n   font-size,…}` (+ the per-density forms). Every fallback here is the token\r\n   layer's own value.\r\n   ========================================================================= */\r\n\r\nmono-nav {\r\n  display: block;\r\n}\r\n\r\n/* =========================================\r\n   Root — the bar\r\n   ========================================= */\r\n\r\n[mono-nav] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ───────────── */\r\n  --_mono-nav-primary: var(--mono-nav-primary, var(--primary));\r\n  --_mono-nav-secondary: var(--mono-nav-secondary, var(--secondary-foreground));\r\n  --_mono-nav-success: var(--mono-nav-success, var(--success));\r\n  --_mono-nav-danger: var(--mono-nav-danger, var(--destructive));\r\n  --_mono-nav-warning: var(--mono-nav-warning, var(--warning));\r\n  --_mono-nav-info: var(--mono-nav-info, var(--info));\r\n  --_mono-nav-teal: var(--mono-nav-teal, var(--teal));\r\n  --_mono-nav-purple: var(--mono-nav-purple, var(--purple));\r\n  --_mono-nav-neutral: var(--mono-nav-neutral, var(--neutral));\r\n  --_mono-nav-dark: var(--mono-nav-dark, var(--dark));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-nav-accent: var(--mono-nav-accent, var(--_mono-nav-accent-preset, var(--_mono-nav-primary)));\r\n  /* Ink for anything painted IN the accent. Each role points this at its own\r\n     `-foreground` token, so a light role (warning, neutral) gets readable ink\r\n     without a luminance calculation; a literal colour gets one written inline\r\n     by the component. */\r\n  --_mono-nav-on-accent: var(--mono-nav-on-accent, var(--_mono-nav-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── the unpainted surface ───────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .sidebar nav — bg-sidebar text-sidebar-foreground\r\n     `--sidebar` IS `--card` in the token layer, so this is the card's surface\r\n     under the name the one piece of upstream chrome actually uses. */\r\n  --_mono-nav-surface: var(--mono-nav-surface, var(--sidebar));\r\n  /* the `outlined` variant's bottom rule — a nav idiom with no card counterpart,\r\n     so it takes the card's ring colour rather than inventing one */\r\n  --_mono-nav-border: var(--mono-nav-border, var(--_mono-nav-ring-color));\r\n\r\n  --_mono-nav-bg: var(--mono-nav-bg, var(--_mono-nav-bg-preset, var(--_mono-nav-surface)));\r\n  --_mono-nav-text: var(--mono-nav-text, var(--_mono-nav-text-preset, 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 bar ink at 70%, not a separate token. */\r\n  --_mono-nav-text-soft: var(--mono-nav-text-soft, var(--_mono-nav-text-soft-preset, color-mix(in oklab, var(--_mono-nav-text) 70%, transparent)));\r\n  /* basecoat@1.0.2 styles/vega.css .sidebar nav [role=separator] — border-sidebar-border mx-2 */\r\n  --_mono-nav-border-lite: var(--mono-nav-border-lite, var(--_mono-nav-border-lite-preset, var(--sidebar-border)));\r\n\r\n  /* ── comfortable metrics live on the unqualified root ON PURPOSE ───────── */\r\n  --_mono-nav-height: var(--mono-nav-bar-height, var(--_mono-nav-height-preset, var(--mono-nav-bar-height-comfortable, calc(var(--mono-spacing) * 14))));\r\n  --_mono-nav-extension-height: var(--mono-nav-extension-height, var(--_mono-nav-extension-height-preset, var(--mono-nav-extension-height-comfortable, calc(var(--mono-spacing) * 11))));\r\n  /* the card's own gutter — basecoat@1.0.2 styles/vega.css .card > header — gap-1 rounded-t-xl px-6 …\r\n     The compact and default steps SCALE from this one, so a flavor moves all\r\n     three gutters by setting `--mono-nav-pad-x-comfortable` alone. */\r\n  --_mono-nav-pad-unit: var(--mono-nav-pad-x-comfortable, calc(var(--mono-spacing) * 6));\r\n  --_mono-nav-pad-x: var(--mono-nav-pad-x, var(--_mono-nav-pad-x-preset, var(--_mono-nav-pad-unit)));\r\n  --_mono-nav-gap: var(--mono-nav-gap, var(--_mono-nav-gap-preset, var(--mono-nav-gap-comfortable, calc(var(--mono-spacing) * 3))));\r\n  --_mono-nav-font: var(--mono-nav-font, var(--_mono-nav-font-preset, var(--mono-nav-font-comfortable, var(--mono-text-sm))));\r\n  --_mono-nav-extension-font: var(--mono-nav-extension-font, var(--_mono-nav-extension-font-preset, var(--mono-nav-extension-font-comfortable, var(--mono-text-sm))));\r\n\r\n  /* ── chrome — THE NAV IS A CARD ─────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .card — ring-foreground/10 bg-card\r\n     text-card-foreground overflow-hidden rounded-xl text-sm shadow-xs ring-1 …\r\n\r\n     Basecoat has no nav, but it has a wide rectangular surface with an edge and\r\n     an elevation, and that is exactly what a top bar is. So the bar's chrome\r\n     tracks `.card` value for value — radius, ring, shadow, gutter and type —\r\n     and every flavor's nav delta is its CARD delta (sera square and roomy, maia\r\n     2xl, luma 4xl with shadow-md, mira lg, lyra square and tight, rhea 3xl).\r\n     Without this the eight styles all painted the same bar, which was the bug.\r\n\r\n     The ring is drawn INSIDE the border box, as card.css draws it: an outside\r\n     ring is the first pixel lost to any ancestor that clips, and a bar is\r\n     usually flush against one. A full-bleed bar that wants no edge at all sets\r\n     `--mono-nav-ring-width: 0`. */\r\n  --_mono-nav-radius: var(--mono-nav-radius, var(--mono-radius-xl));\r\n  --_mono-nav-ring-color: var(--mono-nav-ring-color, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-nav-ring-width: var(--mono-nav-ring-width, var(--mono-border-width));\r\n  --_mono-nav-ring: inset 0 0 0 var(--_mono-nav-ring-width) var(--_mono-nav-ring-color);\r\n  --_mono-nav-shadow: var(--mono-nav-shadow, var(--mono-shadow-xs));\r\n  --_mono-nav-border-width: var(--mono-nav-border-width, var(--mono-border-width));\r\n  --_mono-nav-backdrop-filter: var(--mono-nav-backdrop-filter, none);\r\n  --_mono-nav-z: var(--mono-nav-z, 30);\r\n\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  font-size: var(--_mono-nav-font);\r\n  color: var(--_mono-nav-text);\r\n  background: var(--_mono-nav-bg);\r\n  border-radius: var(--_mono-nav-radius);\r\n  border-bottom: var(--_mono-nav-border-width) solid transparent;\r\n  backdrop-filter: var(--_mono-nav-backdrop-filter);\r\n  -webkit-backdrop-filter: var(--_mono-nav-backdrop-filter);\r\n  z-index: var(--_mono-nav-z);\r\n\r\n  transition:\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n[mono-nav],\r\n:where([mono-nav]) *,\r\n:where([mono-nav]) *::before,\r\n:where([mono-nav]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Density — EXTENSION: the bar's vertical rhythm\r\n   ========================================= */\r\n\r\n[mono-nav][mono-density=\"compact\"] {\r\n  --_mono-nav-height-preset: var(--mono-nav-bar-height-compact, calc(var(--mono-spacing) * 12));\r\n  --_mono-nav-extension-height-preset: var(--mono-nav-extension-height-compact, calc(var(--mono-spacing) * 9));\r\n  --_mono-nav-pad-x-preset: var(--mono-nav-pad-x-compact, calc(var(--_mono-nav-pad-unit) * 0.6667));\r\n  --_mono-nav-gap-preset: var(--mono-nav-gap-compact, calc(var(--mono-spacing) * 2));\r\n  --_mono-nav-font-preset: var(--mono-nav-font-compact, var(--mono-text-xs));\r\n  --_mono-nav-extension-font-preset: var(--mono-nav-extension-font-compact, var(--mono-text-xs));\r\n}\r\n\r\n[mono-nav][mono-density=\"default\"] {\r\n  --_mono-nav-height-preset: var(--mono-nav-bar-height-default, calc(var(--mono-spacing) * 16));\r\n  --_mono-nav-extension-height-preset: var(--mono-nav-extension-height-default, calc(var(--mono-spacing) * 12));\r\n  --_mono-nav-pad-x-preset: var(--mono-nav-pad-x-default, calc(var(--_mono-nav-pad-unit) * 1.3333));\r\n  --_mono-nav-gap-preset: var(--mono-nav-gap-default, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-nav-font-preset: var(--mono-nav-font-default, var(--mono-text-base));\r\n  --_mono-nav-extension-font-preset: var(--mono-nav-extension-font-default, var(--mono-text-sm));\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: `surface` is the bar unpainted, every role paints it\r\n   ========================================= */\r\n\r\n[mono-nav][mono-color=\"primary\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-primary);\r\n  --_mono-nav-on-accent-preset: var(--primary-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"secondary\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-secondary);\r\n  --_mono-nav-on-accent-preset: var(--secondary);\r\n}\r\n\r\n[mono-nav][mono-color=\"success\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-success);\r\n  --_mono-nav-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"danger\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-danger);\r\n  --_mono-nav-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"warning\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-warning);\r\n  --_mono-nav-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"info\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-info);\r\n  --_mono-nav-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"teal\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-teal);\r\n  --_mono-nav-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"purple\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-purple);\r\n  --_mono-nav-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"neutral\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-neutral);\r\n  --_mono-nav-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n[mono-nav][mono-color=\"dark\"] {\r\n  --_mono-nav-accent-preset: var(--_mono-nav-dark);\r\n  --_mono-nav-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n/* A painted bar takes the role as its fill and the role's `-foreground` as its\r\n   ink — the `.btn[data-variant='primary']` pattern, one level up. Every\r\n   foreground on the bar is then mixed FROM that ink rather than from a literal\r\n   white, so `warning` and `neutral` stay readable. `custom` is the marker for a\r\n   literal `color`; its accent and ink arrive inline from the component. */\r\n[mono-nav]:is(\r\n    [mono-color=\"primary\"],\r\n    [mono-color=\"secondary\"],\r\n    [mono-color=\"success\"],\r\n    [mono-color=\"danger\"],\r\n    [mono-color=\"warning\"],\r\n    [mono-color=\"info\"],\r\n    [mono-color=\"teal\"],\r\n    [mono-color=\"purple\"],\r\n    [mono-color=\"neutral\"],\r\n    [mono-color=\"dark\"],\r\n    [mono-color=\"custom\"]\r\n  ) {\r\n  --_mono-nav-bg-preset: var(--_mono-nav-accent);\r\n  --_mono-nav-text-preset: var(--_mono-nav-on-accent);\r\n  --_mono-nav-text-soft-preset: color-mix(in oklab, var(--_mono-nav-on-accent) 70%, transparent);\r\n  --_mono-nav-border-lite-preset: color-mix(in oklab, var(--_mono-nav-on-accent) 20%, transparent);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `elevated` is the default, so the unqualified root carries it — and it is the\r\n   card exactly: the inset ring AND the elevation, in that order. */\r\n[mono-nav]:is(:not([mono-variant]), [mono-variant=\"elevated\"]) {\r\n  box-shadow: var(--_mono-nav-ring), var(--_mono-nav-shadow);\r\n}\r\n\r\n/* `flat` drops both. */\r\n[mono-nav][mono-variant=\"flat\"] {\r\n  box-shadow: none;\r\n  border-bottom-color: transparent;\r\n}\r\n\r\n/* `outlined` trades the elevation for a bottom rule — the nav idiom, and the\r\n   one piece of its chrome the card has no counterpart for. The ring stays, so\r\n   an outlined bar still reads as the same surface. */\r\n[mono-nav][mono-variant=\"outlined\"] {\r\n  box-shadow: var(--_mono-nav-ring);\r\n  border-bottom-color: var(--_mono-nav-border);\r\n}\r\n\r\n/* =========================================\r\n   Sticky\r\n   -----------------------------------------------------------------------------\r\n   `sticky` is ON by default, so the attribute that says something is the\r\n   negative. In the light build the host `<mono-nav>` is what sits in the parent\r\n   layout flow and the inner `<header>` only fills it, so the host is what has to\r\n   stick — a sticky inner header has no scroll distance inside a host that\r\n   shrink-wraps it (which is also why leaving the rule on both is harmless). In\r\n   hand-written markup the `<header>` IS the element in flow, and the same rule\r\n   does the work.\r\n\r\n   The host reflects the prop (`converter` empty-attr === true, missing ===\r\n   false), so `[sticky]` is the right selector there.\r\n   ========================================= */\r\n\r\nmono-nav[sticky],\r\n[mono-nav]:not([mono-static]) {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: var(--mono-nav-z, 30);\r\n}\r\n\r\n[mono-nav][mono-static] {\r\n  position: static;\r\n}\r\n\r\n/* =========================================\r\n   The bar row\r\n   ========================================= */\r\n\r\n:where([mono-nav]) > [mono-inner] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  padding: 0 var(--_mono-nav-pad-x);\r\n  height: var(--_mono-nav-height);\r\n  min-height: var(--_mono-nav-height);\r\n  width: 100%;\r\n}\r\n\r\n:where([mono-nav] > [mono-inner]) > [mono-start] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  flex-shrink: 0;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-nav] > [mono-inner]) > [mono-center] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n/* `margin-left: auto` keeps the end region at the trailing edge even when the\r\n   center is empty and collapsed. */\r\n:where([mono-nav] > [mono-inner]) > [mono-end] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--_mono-nav-gap) * 0.7);\r\n  flex-shrink: 0;\r\n  margin-left: auto;\r\n}\r\n\r\n/* An empty region is NOT hidden.\r\n\r\n   `:empty` cannot see across a shadow boundary: in the shadow build each region\r\n   holds a <slot> ELEMENT, so the region is never `:empty` whether or not anything\r\n   is assigned to it, and a <slot>'s own children are its fallback content rather\r\n   than the assigned nodes — there is no selector for \"nothing was slotted here\".\r\n   The light build WAS `:empty` in that case, so a bar with no center content laid\r\n   out with one flex gap in the light build and two in the shadow one: 12px apart\r\n   at max-content width, which is what a shrink-to-fit demo shows.\r\n\r\n   Leaving every region in place is what makes the two builds agree. It costs\r\n   nothing at a normal full-width bar — the center is `flex: 1` and eats the slack\r\n   either way, and the end region is pinned by its own `margin-left: auto`. */\r\n\r\n/* =========================================\r\n   Extension row\r\n   ========================================= */\r\n\r\n:where([mono-nav]) > [mono-extension] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-nav-gap);\r\n  padding: 0 var(--_mono-nav-pad-x);\r\n  min-height: var(--_mono-nav-extension-height);\r\n  border-top: var(--_mono-nav-border-width) solid var(--_mono-nav-border-lite);\r\n  font-size: var(--_mono-nav-extension-font);\r\n}\r\n\r\n/* The element always renders the row so its slot target is stable; the root\r\n   attribute is what turns it on. Hand-written markup that simply omits the row\r\n   needs neither. */\r\n[mono-nav]:not([mono-has-extension]) > [mono-extension] {\r\n  display: none;\r\n}\r\n\r\n/* A slotted control inherits the bar's face, not the UA's. */\r\n[mono-nav] :is(button, input, select, textarea) {\r\n  font-family: inherit;\r\n}\r\n\r\n/* =========================================\r\n   Responsive — a wide bar steps down a density on a narrow screen\r\n   ========================================= */\r\n\r\n@media (max-width: 639.98px) {\r\n  [mono-nav][mono-density=\"default\"] {\r\n    --_mono-nav-height-preset: calc(var(--mono-spacing) * 14);\r\n    --_mono-nav-pad-x-preset: calc(var(--mono-spacing) * 4);\r\n    --_mono-nav-gap-preset: calc(var(--mono-spacing) * 2.5);\r\n  }\r\n\r\n  [mono-nav]:not([mono-density]) {\r\n    --_mono-nav-height-preset: calc(var(--mono-spacing) * 12);\r\n    --_mono-nav-pad-x-preset: calc(var(--mono-spacing) * 3.5);\r\n    --_mono-nav-gap-preset: calc(var(--mono-spacing) * 2);\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Layout helper\r\n   -----------------------------------------------------------------------------\r\n   Consumers wrap their main content in this to pad around the nav (and the\r\n   sidebar). The vars are written on `:root` by mono-nav and mono-sidebar\r\n   themselves. Kept as a CLASS — it is a consumer-applied utility, not a part of\r\n   this component — with the attribute form accepted for markup that would\r\n   rather stay attributes all the way down.\r\n   ========================================= */\r\n\r\n.mono-layout-content,\r\n[mono-layout-content] {\r\n  padding-top: var(--mono-nav-height, 0);\r\n  padding-left: var(--mono-sidebar-left-width, 0);\r\n  padding-right: var(--mono-sidebar-right-width, 0);\r\n  min-height: 100vh;\r\n  min-height: 100dvh;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Reduced motion\r\n   ========================================= */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-nav] {\r\n    transition: none;\r\n  }\r\n}\r\n";
-
 //#endregion
 //#region src/components/nav/mono-nav.ts
 let MonoNav = class MonoNav extends MonoNavCore(LitElement) {
@@ -236,9 +232,6 @@ let MonoNav = class MonoNav extends MonoNavCore(LitElement) {
 		this._slotsCaptured = false;
 		this._slotNodes = /* @__PURE__ */ new Map();
 	}
-	static {
-		this.styles = [unsafeCSS(nav_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}