@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/shadow/radio.js

@@ -1,9 +1,10 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+
 //#region src/components/radio/radio-core.ts
 /**
 * `MonoRadioCore` — all render-mode-agnostic logic for `mono-radio`: reactive
@@ -17,7 +18,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 *
 * SSR-safe: no `document`/`window` access; `focus`/`blur` query `this.renderRoot`.
 */
-var MonoRadioCore = (superClass) => {
+const MonoRadioCore = (superClass) => {
 	class MonoRadioCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -271,18 +272,20 @@ var MonoRadioCore = (superClass) => {
 	__decorate([state()], MonoRadioCoreClass.prototype, "_hasDescriptionSlotState", void 0);
 	return MonoRadioCoreClass;
 };
+
 //#endregion
-//#region src/components/radio/radio.css?raw
-var radio_default = "/* =========================================================================\r\n   mono-radio — a port of Basecoat's `.input[type='radio']` and the `.label`\r\n   beside it (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-radio size=\"sm\" color=\"danger\" label=\"Email\" value=\"email\" model-value=\"email\">\r\n     <label mono-radio mono-size=\"sm\" mono-color=\"danger\">\r\n       <input mono-input type=\"radio\" name=\"contact\" value=\"email\" checked />\r\n       <span mono-circle aria-hidden=\"true\"></span>\r\n       <span mono-label><span mono-label-text>Email</span></span>\r\n     </label>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary). The element renders these attributes on its\r\n   root <label> (both builds) plus the STATE `mono-checked`; hand-written markup\r\n   may rely on the native input's `:checked` instead — every state rule reads\r\n   both. The old classes (`.mono-radio.sm.mono-radio-checked`) are still emitted\r\n   as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-radio]                                  ≡ .label (flex gap-2 text-sm font-medium leading-snug select-none)\r\n     [mono-radio] > [mono-circle]                  ≡ .input[type='radio'] (size-4 rounded-full border-input; the real input is visually hidden)\r\n     [mono-checked] / [mono-input]:checked         ≡ :checked (bg-primary border-primary) + :checked:before (size-2 bg-primary-foreground)\r\n     [mono-circle] > [mono-dot] / ::before         ≡ :checked:before — the element renders the dot, raw markup may omit it\r\n     [mono-input]:focus-visible + [mono-circle]    ≡ focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n     [mono-invalid] / [mono-input][aria-invalid]   ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-disabled] / [mono-input]:disabled       ≡ disabled:cursor-not-allowed disabled:opacity-50\r\n     [mono-label-text]                             ≡ .label text\r\n     [mono-description]                            ≡ .field > p (text-sm text-muted-foreground)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION — the circle is 4/9 of the --mono-control-height-* step\r\n                                                     (16px at vega md), label / description / gap step with it\r\n     [mono-color=\"…\"]                              ≡ EXTENSION (the checked fill in the role's colour)\r\n\r\n   Every metric here is checkbox.css's: the two controls sit side by side in a\r\n   form, so circle ≡ box, gap ≡ gap, label ≡ label at every step, and the\r\n   pairing spec asserts it.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-radio]) [mono-circle]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while state rules (checked / focus / invalid / disabled, keyed on the\r\n   root or the native input) stay heavier and win over it, as they always did.\r\n\r\n   Inner parts: [mono-input], [mono-circle] > [mono-dot], [mono-label] >\r\n   [mono-label-text] / [mono-description]. The shadow build marks an unassigned\r\n   slot wrapper [mono-empty].\r\n\r\n   The circle sits on the label's CAP BAND (see `--_mono-radio-line-offset`):\r\n   mono's own alignment rule, kept — Basecoat centres a lone radio on its line\r\n   box with `items-center`, which is the same thing for a one-line label and\r\n   drifts for a described one.\r\n\r\n   FLAVORS set `--mono-radio-{radius,shadow,ring-width,ring-alpha,bg,border-color,\r\n   checked-bg,dot-color,size-md}` (the per-style `.input[type='radio']` deltas); every\r\n   fallback here is vega's value (`node scripts/basecoat-styles.mjs --varying\r\n   \"input\\[type='radio'\\]\"`).\r\n   ========================================================================= */\r\n\r\nmono-radio {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-radio] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-radio-text: var(--mono-radio-text, var(--foreground));\r\n  --_mono-radio-description: var(--mono-radio-description, var(--muted-foreground));\r\n  --_mono-radio-primary: var(--mono-radio-primary, var(--primary));\r\n  --_mono-radio-primary-foreground: var(--mono-radio-primary-foreground, var(--primary-foreground));\r\n  --_mono-radio-accent: var(--mono-radio-accent, var(--_mono-radio-accent-preset, var(--_mono-radio-primary)));\r\n  --_mono-radio-dot-color: var(--mono-radio-dot-color, var(--_mono-radio-dot-preset, var(--_mono-radio-primary-foreground)));\r\n  --_mono-radio-border-color: var(--mono-radio-border, var(--mono-radio-border-color, var(--input)));\r\n  --_mono-radio-bg: var(--mono-radio-bg, var(--mono-mode-surface));\r\n  /* the radio is the one control Basecoat leaves shadowless (the checkbox has\r\n     shadow-xs) — the slot stays so a flavor or a consumer can put one back */\r\n  --_mono-radio-shadow: var(--mono-radio-shadow, 0 0 #0000);\r\n  --_mono-radio-radius: var(--mono-radio-radius, var(--mono-radius-full));\r\n  --_mono-radio-border-width: var(--mono-radio-border-width, var(--mono-border-width));\r\n  --_mono-radio-ring-color: var(--mono-radio-ring-color, var(--ring));\r\n  --_mono-radio-ring-width: var(--mono-radio-ring-width, var(--mono-ring-width));\r\n  --_mono-radio-ring-alpha: var(--mono-radio-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .input[type='radio'] — size-4 (= 4/9 of the\r\n     h-9 control); .field > label, .label — gap-2 text-sm leading-snug */\r\n  --_mono-radio-control: var(--mono-radio-size-md, calc(var(--mono-control-height-md) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-md, var(--mono-text-sm));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-md, 0.8125rem);\r\n  /* :checked:before — size-2 on a size-4 circle */\r\n  --_mono-radio-dot: var(--mono-radio-dot, 50%);\r\n\r\n  /* ── whole pixels ────────────────────────────────────────────────────────\r\n     The circle is a ratio of the control step, so it lands on a fraction (18.39px,\r\n     17.77px…). A fractional round shape is antialiased on every edge — the\r\n     switch thumb, which parks flush against the track's cap, picked up a dark\r\n     rim that changed with the flavor and the screen's pixel ratio. Snap the\r\n     derived size to 1px; `round()` has the same browser floor as `color-mix()`\r\n     and `:has()`, which this sheet already requires. Snapping happens HERE, at\r\n     one place per value, so the per-size blocks stay plain arithmetic. */\r\n  --_mono-radio-control-px: round(nearest, var(--_mono-radio-control), 1px);\r\n\r\n  /* ── alignment with the label ────────────────────────────────────────────\r\n     The circle is centred on the label's CAP BAND — the ink the eye reads, not\r\n     the line box. Every number is checkbox.css's; the two controls sit side by\r\n     side in a form and any divergence shows. */\r\n  --_mono-radio-label-line-height: var(--mono-radio-label-line-height, var(--mono-leading-snug));\r\n  --_mono-radio-optical-shift: 0.045;\r\n  --_mono-radio-optical-nudge: 0px;\r\n  --_mono-radio-line-offset: calc(\r\n    (var(--_mono-radio-label-font) * var(--_mono-radio-label-line-height) - var(--_mono-radio-control-px)) / 2 +\r\n      var(--_mono-radio-label-font) * var(--_mono-radio-optical-shift) + var(--_mono-radio-optical-nudge)\r\n  );\r\n\r\n  /* The element build nests this root inside its host, so it is never itself a\r\n     grid or flex item and shrink-wraps its content. Hand-written markup usually\r\n     IS the item (a radio in a `display: grid` list), and an item blockifies —\r\n     `inline-flex` becomes `flex` and the row stretches to the widest sibling,\r\n     wrapping its label at a different point than the element's. `fit-content`\r\n     keeps both shapes shrink-wrapped; a consumer who wants a full-width row\r\n     still sets a width. */\r\n  width: fit-content;\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-radio-gap);\r\n  position: relative;\r\n  vertical-align: top;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-radio-text);\r\n}\r\n\r\n[mono-radio],\r\n:where([mono-radio]) *,\r\n:where([mono-radio]) *::before,\r\n:where([mono-radio]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([mono-radio]) :is([mono-label], [mono-label-text], [mono-description])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* the circle seats on the first line of a label that is actually there; a bare\r\n   circle stays flush at the top */\r\n[mono-radio]:has([mono-label-text]:not([mono-empty])) > [mono-circle] {\r\n  margin-top: var(--_mono-radio-line-offset, 0px);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: the circle is 4/9 of the control step (vega md: 36 × 4/9 =\r\n   16px), label, description and gap step with it (md = Basecoat's text-sm / gap-2)\r\n   ========================================= */\r\n\r\n[mono-radio][mono-size=\"xs\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-xs, calc(var(--mono-control-height-xs) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-xs, calc(var(--mono-spacing) * 1.25)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-xs, var(--mono-text-xs));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-xs, 0.6875rem);\r\n}\r\n\r\n[mono-radio][mono-size=\"sm\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-sm, calc(var(--mono-control-height-sm) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-sm, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-sm, 0.8125rem);\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-sm, var(--mono-text-xs));\r\n}\r\n\r\n[mono-radio][mono-size=\"lg\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-lg, calc(var(--mono-control-height-lg) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-lg, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-lg, var(--mono-text-base));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-lg, var(--mono-text-sm));\r\n  /* 16px text rounds its ascent such that the circle lands ~0.35px low */\r\n  --_mono-radio-optical-nudge: -0.35px;\r\n}\r\n\r\n[mono-radio][mono-size=\"xl\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-xl, calc(var(--mono-control-height-xl) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-xl, calc(var(--mono-spacing) * 3)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-xl, var(--mono-text-lg));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-xl, var(--mono-text-base));\r\n}\r\n\r\n[mono-radio][mono-size=\"xxl\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-xxl, calc(var(--mono-control-height-xxl) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-xxl, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-xxl, var(--mono-text-xl));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-xxl, var(--mono-text-lg));\r\n  /* 20px text rounds the other way, leaving the circle ~1.1px high */\r\n  --_mono-radio-optical-nudge: 1.1px;\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the checked fill in the role's colour\r\n   ========================================= */\r\n\r\n[mono-radio]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-radio-accent-preset: var(--_mono-radio-primary);\r\n  --_mono-radio-dot-preset: var(--_mono-radio-primary-foreground);\r\n}\r\n[mono-radio][mono-color=\"secondary\"] {\r\n  --_mono-radio-accent-preset: var(--secondary-foreground);\r\n  --_mono-radio-dot-preset: var(--secondary);\r\n}\r\n[mono-radio][mono-color=\"success\"] {\r\n  --_mono-radio-accent-preset: var(--success);\r\n  --_mono-radio-dot-preset: var(--success-foreground);\r\n}\r\n[mono-radio][mono-color=\"danger\"] {\r\n  --_mono-radio-accent-preset: var(--destructive);\r\n  --_mono-radio-dot-preset: var(--destructive-foreground);\r\n}\r\n[mono-radio][mono-color=\"warning\"] {\r\n  --_mono-radio-accent-preset: var(--warning);\r\n  --_mono-radio-dot-preset: var(--warning-foreground);\r\n}\r\n[mono-radio][mono-color=\"info\"] {\r\n  --_mono-radio-accent-preset: var(--info);\r\n  --_mono-radio-dot-preset: var(--info-foreground);\r\n}\r\n[mono-radio][mono-color=\"teal\"] {\r\n  --_mono-radio-accent-preset: var(--teal);\r\n  --_mono-radio-dot-preset: var(--teal-foreground);\r\n}\r\n[mono-radio][mono-color=\"purple\"] {\r\n  --_mono-radio-accent-preset: var(--purple);\r\n  --_mono-radio-dot-preset: var(--purple-foreground);\r\n}\r\n[mono-radio][mono-color=\"neutral\"] {\r\n  --_mono-radio-accent-preset: var(--neutral);\r\n  --_mono-radio-dot-preset: var(--neutral-foreground);\r\n}\r\n[mono-radio][mono-color=\"dark\"] {\r\n  --_mono-radio-accent-preset: var(--dark);\r\n  --_mono-radio-dot-preset: var(--dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   States on the root\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/radio.css .field > input[type='radio'], .input[type='radio']\r\n   — disabled:cursor-not-allowed disabled:opacity-50 */\r\n[mono-radio][mono-disabled],\r\n[mono-radio]:has(> [mono-input]:disabled) {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* the native input is the accessible control; the circle is its painted twin */\r\n:where([mono-radio]) [mono-input] {\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  /* the UA gives an <input> its own font; inside a shadow root nothing resets it,\r\n     so the hidden control ended up with a different computed font in the two\r\n     builds. It paints nothing either way — this just keeps them identical. */\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\n/* =========================================\r\n   The circle\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/radio.css .field > input[type='radio'], .input[type='radio']\r\n   — relative shrink-0 appearance-none border outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='radio'], .input[type='radio']\r\n   — flex size-4 rounded-full border-input (dark:bg-input/30 via --mono-mode-surface);\r\n   checked:bg-primary checked:border-primary checked:text-primary-foreground;\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots */\r\n:where([mono-radio]) > [mono-circle] {\r\n  --_mono-radio-ring: 0 0 #0000;\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-radio-control-px);\r\n  height: var(--_mono-radio-control-px);\r\n  border: var(--_mono-radio-border-width) solid var(--_mono-radio-border-color);\r\n  border-radius: var(--_mono-radio-radius);\r\n  background-color: var(--_mono-radio-bg);\r\n  box-shadow: var(--_mono-radio-ring), var(--_mono-radio-shadow);\r\n  /* the circle's own ink is the ACCENT — a flavor that leaves the checked circle\r\n     hollow (sera) then sets `--mono-radio-dot-color: currentColor` to paint the\r\n     dot in the role colour, using public knobs alone */\r\n  color: var(--_mono-radio-accent);\r\n  transition-property: box-shadow, background-color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 */\r\n:where([mono-radio]) > [mono-input]:focus-visible + [mono-circle] {\r\n  border-color: var(--_mono-radio-ring-color);\r\n  --_mono-radio-ring: 0 0 0 var(--_mono-radio-ring-width) color-mix(in oklab, var(--_mono-radio-ring-color) var(--_mono-radio-ring-alpha), transparent);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50, /40 via the mode tokens) */\r\n[mono-radio][mono-invalid] > [mono-circle],\r\n:where([mono-radio]) > [mono-input][aria-invalid=\"true\"] + [mono-circle] {\r\n  border-color: var(--mono-mode-invalid-border);\r\n  --_mono-radio-ring: 0 0 0 var(--_mono-radio-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* checked:bg-primary checked:border-primary — generalised per hue.\r\n   `--mono-radio-checked-bg` is the flavor slot: sera keeps the circle hollow. */\r\n[mono-radio][mono-checked] > [mono-circle],\r\n:where([mono-radio]) > [mono-input]:checked + [mono-circle] {\r\n  border-color: var(--_mono-radio-accent);\r\n  background-color: var(--mono-radio-checked-bg, var(--_mono-radio-accent));\r\n}\r\n\r\n/* aria-invalid:checked:border-primary — a chosen option is not the error */\r\n[mono-radio][mono-invalid][mono-checked] > [mono-circle],\r\n:where([mono-radio]) > [mono-input][aria-invalid=\"true\"]:checked + [mono-circle] {\r\n  border-color: var(--_mono-radio-accent);\r\n}\r\n\r\n/* =========================================\r\n   The dot — `:checked:before` upstream. The element renders [mono-dot] (it is a\r\n   `cssClass` slot); hand-written markup may leave the circle empty and take the\r\n   pseudo-element instead. Both are out of flow (`inset: 0; margin: auto`) so the\r\n   circle keeps a stable synthesised baseline.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/radio.css .field > input[type='radio'], .input[type='radio'] >> &:checked:before\r\n   — absolute top-1/2 left-1/2 content-[''] -translate-x/y-1/2 rounded-full */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='radio'], .input[type='radio']):checked:before\r\n   — size-2 bg-primary-foreground (mono: that share of the box, so it tracks every step) */\r\n:where([mono-radio]) > [mono-circle] > [mono-dot],\r\n:where([mono-radio]) > [mono-circle]:not(:has([mono-dot]))::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: var(--_mono-radio-dot);\r\n  height: var(--_mono-radio-dot);\r\n  border-radius: var(--mono-radio-dot-radius, var(--mono-radius-full));\r\n  background-color: var(--_mono-radio-dot-color);\r\n  transform: scale(0);\r\n  opacity: 0;\r\n  transition-property: transform, opacity, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-radio][mono-checked] > [mono-circle] > [mono-dot],\r\n[mono-radio][mono-checked] > [mono-circle]:not(:has([mono-dot]))::before,\r\n:where([mono-radio]) > [mono-input]:checked + [mono-circle] > [mono-dot],\r\n:where([mono-radio]) > [mono-input]:checked + [mono-circle]:not(:has([mono-dot]))::before {\r\n  transform: scale(1);\r\n  opacity: 1;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-radio]) > [mono-circle],\r\n  :where([mono-radio]) > [mono-circle] > [mono-dot],\r\n  :where([mono-radio]) > [mono-circle]::before {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n:where([mono-radio]) > [mono-label] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — text-sm leading-snug font-medium;\r\n   `block` so the first line box is exactly font × line-height */\r\n:where([mono-radio]) [mono-label-text] {\r\n  display: block;\r\n  font-size: var(--_mono-radio-label-font);\r\n  line-height: var(--_mono-radio-label-line-height);\r\n  font-weight: var(--mono-radio-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--_mono-radio-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal; EXTENSION: one step\r\n   under the label per size */\r\n:where([mono-radio]) [mono-description] {\r\n  display: block;\r\n  margin-top: calc(var(--mono-spacing) * 0.5);\r\n  font-size: var(--_mono-radio-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-radio-description);\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\radio\radio.css?raw.js
+var radio_css_raw_default = "/* =========================================================================\r\n   mono-radio — a port of Basecoat's `.input[type='radio']` and the `.label`\r\n   beside it (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-radio size=\"sm\" color=\"danger\" label=\"Email\" value=\"email\" model-value=\"email\">\r\n     <label mono-radio mono-size=\"sm\" mono-color=\"danger\">\r\n       <input mono-input type=\"radio\" name=\"contact\" value=\"email\" checked />\r\n       <span mono-circle aria-hidden=\"true\"></span>\r\n       <span mono-label><span mono-label-text>Email</span></span>\r\n     </label>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary). The element renders these attributes on its\r\n   root <label> (both builds) plus the STATE `mono-checked`; hand-written markup\r\n   may rely on the native input's `:checked` instead — every state rule reads\r\n   both. The old classes (`.mono-radio.sm.mono-radio-checked`) are still emitted\r\n   as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-radio]                                  ≡ .label (flex gap-2 text-sm font-medium leading-snug select-none)\r\n     [mono-radio] > [mono-circle]                  ≡ .input[type='radio'] (size-4 rounded-full border-input; the real input is visually hidden)\r\n     [mono-checked] / [mono-input]:checked         ≡ :checked (bg-primary border-primary) + :checked:before (size-2 bg-primary-foreground)\r\n     [mono-circle] > [mono-dot] / ::before         ≡ :checked:before — the element renders the dot, raw markup may omit it\r\n     [mono-input]:focus-visible + [mono-circle]    ≡ focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n     [mono-invalid] / [mono-input][aria-invalid]   ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-disabled] / [mono-input]:disabled       ≡ disabled:cursor-not-allowed disabled:opacity-50\r\n     [mono-label-text]                             ≡ .label text\r\n     [mono-description]                            ≡ .field > p (text-sm text-muted-foreground)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION — the circle is 4/9 of the --mono-control-height-* step\r\n                                                     (16px at vega md), label / description / gap step with it\r\n     [mono-color=\"…\"]                              ≡ EXTENSION (the checked fill in the role's colour)\r\n\r\n   Every metric here is checkbox.css's: the two controls sit side by side in a\r\n   form, so circle ≡ box, gap ≡ gap, label ≡ label at every step, and the\r\n   pairing spec asserts it.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-radio]) [mono-circle]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while state rules (checked / focus / invalid / disabled, keyed on the\r\n   root or the native input) stay heavier and win over it, as they always did.\r\n\r\n   Inner parts: [mono-input], [mono-circle] > [mono-dot], [mono-label] >\r\n   [mono-label-text] / [mono-description]. The shadow build marks an unassigned\r\n   slot wrapper [mono-empty].\r\n\r\n   The circle sits on the label's CAP BAND (see `--_mono-radio-line-offset`):\r\n   mono's own alignment rule, kept — Basecoat centres a lone radio on its line\r\n   box with `items-center`, which is the same thing for a one-line label and\r\n   drifts for a described one.\r\n\r\n   FLAVORS set `--mono-radio-{radius,shadow,ring-width,ring-alpha,bg,border-color,\r\n   checked-bg,dot-color,size-md}` (the per-style `.input[type='radio']` deltas); every\r\n   fallback here is vega's value (`node scripts/basecoat-styles.mjs --varying\r\n   \"input\\[type='radio'\\]\"`).\r\n   ========================================================================= */\r\n\r\nmono-radio {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-radio] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-radio-text: var(--mono-radio-text, var(--foreground));\r\n  --_mono-radio-description: var(--mono-radio-description, var(--muted-foreground));\r\n  --_mono-radio-primary: var(--mono-radio-primary, var(--primary));\r\n  --_mono-radio-primary-foreground: var(--mono-radio-primary-foreground, var(--primary-foreground));\r\n  --_mono-radio-accent: var(--mono-radio-accent, var(--_mono-radio-accent-preset, var(--_mono-radio-primary)));\r\n  --_mono-radio-dot-color: var(--mono-radio-dot-color, var(--_mono-radio-dot-preset, var(--_mono-radio-primary-foreground)));\r\n  --_mono-radio-border-color: var(--mono-radio-border, var(--mono-radio-border-color, var(--input)));\r\n  --_mono-radio-bg: var(--mono-radio-bg, var(--mono-mode-surface));\r\n  /* the radio is the one control Basecoat leaves shadowless (the checkbox has\r\n     shadow-xs) — the slot stays so a flavor or a consumer can put one back */\r\n  --_mono-radio-shadow: var(--mono-radio-shadow, 0 0 #0000);\r\n  --_mono-radio-radius: var(--mono-radio-radius, var(--mono-radius-full));\r\n  --_mono-radio-border-width: var(--mono-radio-border-width, var(--mono-border-width));\r\n  --_mono-radio-ring-color: var(--mono-radio-ring-color, var(--ring));\r\n  --_mono-radio-ring-width: var(--mono-radio-ring-width, var(--mono-ring-width));\r\n  --_mono-radio-ring-alpha: var(--mono-radio-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .input[type='radio'] — size-4 (= 4/9 of the\r\n     h-9 control); .field > label, .label — gap-2 text-sm leading-snug */\r\n  --_mono-radio-control: var(--mono-radio-size-md, calc(var(--mono-control-height-md) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-md, var(--mono-text-sm));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-md, 0.8125rem);\r\n  /* :checked:before — size-2 on a size-4 circle */\r\n  --_mono-radio-dot: var(--mono-radio-dot, 50%);\r\n\r\n  /* ── whole pixels ────────────────────────────────────────────────────────\r\n     The circle is a ratio of the control step, so it lands on a fraction (18.39px,\r\n     17.77px…). A fractional round shape is antialiased on every edge — the\r\n     switch thumb, which parks flush against the track's cap, picked up a dark\r\n     rim that changed with the flavor and the screen's pixel ratio. Snap the\r\n     derived size to 1px; `round()` has the same browser floor as `color-mix()`\r\n     and `:has()`, which this sheet already requires. Snapping happens HERE, at\r\n     one place per value, so the per-size blocks stay plain arithmetic. */\r\n  --_mono-radio-control-px: round(nearest, var(--_mono-radio-control), 1px);\r\n\r\n  /* ── alignment with the label ────────────────────────────────────────────\r\n     The circle is centred on the label's CAP BAND — the ink the eye reads, not\r\n     the line box. Every number is checkbox.css's; the two controls sit side by\r\n     side in a form and any divergence shows. */\r\n  --_mono-radio-label-line-height: var(--mono-radio-label-line-height, var(--mono-leading-snug));\r\n  --_mono-radio-optical-shift: 0.045;\r\n  --_mono-radio-optical-nudge: 0px;\r\n  --_mono-radio-line-offset: calc(\r\n    (var(--_mono-radio-label-font) * var(--_mono-radio-label-line-height) - var(--_mono-radio-control-px)) / 2 +\r\n      var(--_mono-radio-label-font) * var(--_mono-radio-optical-shift) + var(--_mono-radio-optical-nudge)\r\n  );\r\n\r\n  /* The element build nests this root inside its host, so it is never itself a\r\n     grid or flex item and shrink-wraps its content. Hand-written markup usually\r\n     IS the item (a radio in a `display: grid` list), and an item blockifies —\r\n     `inline-flex` becomes `flex` and the row stretches to the widest sibling,\r\n     wrapping its label at a different point than the element's. `fit-content`\r\n     keeps both shapes shrink-wrapped; a consumer who wants a full-width row\r\n     still sets a width. */\r\n  width: fit-content;\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-radio-gap);\r\n  position: relative;\r\n  vertical-align: top;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  font-family: inherit;\r\n  color: var(--_mono-radio-text);\r\n}\r\n\r\n[mono-radio],\r\n:where([mono-radio]) *,\r\n:where([mono-radio]) *::before,\r\n:where([mono-radio]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([mono-radio]) :is([mono-label], [mono-label-text], [mono-description])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* the circle seats on the first line of a label that is actually there; a bare\r\n   circle stays flush at the top */\r\n[mono-radio]:has([mono-label-text]:not([mono-empty])) > [mono-circle] {\r\n  margin-top: var(--_mono-radio-line-offset, 0px);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: the circle is 4/9 of the control step (vega md: 36 × 4/9 =\r\n   16px), label, description and gap step with it (md = Basecoat's text-sm / gap-2)\r\n   ========================================= */\r\n\r\n[mono-radio][mono-size=\"xs\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-xs, calc(var(--mono-control-height-xs) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-xs, calc(var(--mono-spacing) * 1.25)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-xs, var(--mono-text-xs));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-xs, 0.6875rem);\r\n}\r\n\r\n[mono-radio][mono-size=\"sm\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-sm, calc(var(--mono-control-height-sm) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-sm, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-sm, 0.8125rem);\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-sm, var(--mono-text-xs));\r\n}\r\n\r\n[mono-radio][mono-size=\"lg\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-lg, calc(var(--mono-control-height-lg) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-lg, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-lg, var(--mono-text-base));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-lg, var(--mono-text-sm));\r\n  /* 16px text rounds its ascent such that the circle lands ~0.35px low */\r\n  --_mono-radio-optical-nudge: -0.35px;\r\n}\r\n\r\n[mono-radio][mono-size=\"xl\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-xl, calc(var(--mono-control-height-xl) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-xl, calc(var(--mono-spacing) * 3)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-xl, var(--mono-text-lg));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-xl, var(--mono-text-base));\r\n}\r\n\r\n[mono-radio][mono-size=\"xxl\"] {\r\n  --_mono-radio-control: var(--mono-radio-size-xxl, calc(var(--mono-control-height-xxl) * 4 / 9));\r\n  --_mono-radio-gap: var(--mono-radio-gap, var(--mono-radio-gap-xxl, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-radio-label-font: var(--mono-radio-label-font-xxl, var(--mono-text-xl));\r\n  --_mono-radio-description-font: var(--mono-radio-description-font-xxl, var(--mono-text-lg));\r\n  /* 20px text rounds the other way, leaving the circle ~1.1px high */\r\n  --_mono-radio-optical-nudge: 1.1px;\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the checked fill in the role's colour\r\n   ========================================= */\r\n\r\n[mono-radio]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-radio-accent-preset: var(--_mono-radio-primary);\r\n  --_mono-radio-dot-preset: var(--_mono-radio-primary-foreground);\r\n}\r\n[mono-radio][mono-color=\"secondary\"] {\r\n  --_mono-radio-accent-preset: var(--secondary-foreground);\r\n  --_mono-radio-dot-preset: var(--secondary);\r\n}\r\n[mono-radio][mono-color=\"success\"] {\r\n  --_mono-radio-accent-preset: var(--success);\r\n  --_mono-radio-dot-preset: var(--success-foreground);\r\n}\r\n[mono-radio][mono-color=\"danger\"] {\r\n  --_mono-radio-accent-preset: var(--destructive);\r\n  --_mono-radio-dot-preset: var(--destructive-foreground);\r\n}\r\n[mono-radio][mono-color=\"warning\"] {\r\n  --_mono-radio-accent-preset: var(--warning);\r\n  --_mono-radio-dot-preset: var(--warning-foreground);\r\n}\r\n[mono-radio][mono-color=\"info\"] {\r\n  --_mono-radio-accent-preset: var(--info);\r\n  --_mono-radio-dot-preset: var(--info-foreground);\r\n}\r\n[mono-radio][mono-color=\"teal\"] {\r\n  --_mono-radio-accent-preset: var(--teal);\r\n  --_mono-radio-dot-preset: var(--teal-foreground);\r\n}\r\n[mono-radio][mono-color=\"purple\"] {\r\n  --_mono-radio-accent-preset: var(--purple);\r\n  --_mono-radio-dot-preset: var(--purple-foreground);\r\n}\r\n[mono-radio][mono-color=\"neutral\"] {\r\n  --_mono-radio-accent-preset: var(--neutral);\r\n  --_mono-radio-dot-preset: var(--neutral-foreground);\r\n}\r\n[mono-radio][mono-color=\"dark\"] {\r\n  --_mono-radio-accent-preset: var(--dark);\r\n  --_mono-radio-dot-preset: var(--dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   States on the root\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/radio.css .field > input[type='radio'], .input[type='radio']\r\n   — disabled:cursor-not-allowed disabled:opacity-50 */\r\n[mono-radio][mono-disabled],\r\n[mono-radio]:has(> [mono-input]:disabled) {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* the native input is the accessible control; the circle is its painted twin */\r\n:where([mono-radio]) [mono-input] {\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  /* the UA gives an <input> its own font; inside a shadow root nothing resets it,\r\n     so the hidden control ended up with a different computed font in the two\r\n     builds. It paints nothing either way — this just keeps them identical. */\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\n/* =========================================\r\n   The circle\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/radio.css .field > input[type='radio'], .input[type='radio']\r\n   — relative shrink-0 appearance-none border outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='radio'], .input[type='radio']\r\n   — flex size-4 rounded-full border-input (dark:bg-input/30 via --mono-mode-surface);\r\n   checked:bg-primary checked:border-primary checked:text-primary-foreground;\r\n   mono: `--tw-ring-*` flattened to the ring + shadow slots */\r\n:where([mono-radio]) > [mono-circle] {\r\n  --_mono-radio-ring: 0 0 #0000;\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-radio-control-px);\r\n  height: var(--_mono-radio-control-px);\r\n  border: var(--_mono-radio-border-width) solid var(--_mono-radio-border-color);\r\n  border-radius: var(--_mono-radio-radius);\r\n  background-color: var(--_mono-radio-bg);\r\n  box-shadow: var(--_mono-radio-ring), var(--_mono-radio-shadow);\r\n  /* the circle's own ink is the ACCENT — a flavor that leaves the checked circle\r\n     hollow (sera) then sets `--mono-radio-dot-color: currentColor` to paint the\r\n     dot in the role colour, using public knobs alone */\r\n  color: var(--_mono-radio-accent);\r\n  transition-property: box-shadow, background-color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 */\r\n:where([mono-radio]) > [mono-input]:focus-visible + [mono-circle] {\r\n  border-color: var(--_mono-radio-ring-color);\r\n  --_mono-radio-ring: 0 0 0 var(--_mono-radio-ring-width) color-mix(in oklab, var(--_mono-radio-ring-color) var(--_mono-radio-ring-alpha), transparent);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50, /40 via the mode tokens) */\r\n[mono-radio][mono-invalid] > [mono-circle],\r\n:where([mono-radio]) > [mono-input][aria-invalid=\"true\"] + [mono-circle] {\r\n  border-color: var(--mono-mode-invalid-border);\r\n  --_mono-radio-ring: 0 0 0 var(--_mono-radio-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* checked:bg-primary checked:border-primary — generalised per hue.\r\n   `--mono-radio-checked-bg` is the flavor slot: sera keeps the circle hollow. */\r\n[mono-radio][mono-checked] > [mono-circle],\r\n:where([mono-radio]) > [mono-input]:checked + [mono-circle] {\r\n  border-color: var(--_mono-radio-accent);\r\n  background-color: var(--mono-radio-checked-bg, var(--_mono-radio-accent));\r\n}\r\n\r\n/* aria-invalid:checked:border-primary — a chosen option is not the error */\r\n[mono-radio][mono-invalid][mono-checked] > [mono-circle],\r\n:where([mono-radio]) > [mono-input][aria-invalid=\"true\"]:checked + [mono-circle] {\r\n  border-color: var(--_mono-radio-accent);\r\n}\r\n\r\n/* =========================================\r\n   The dot — `:checked:before` upstream. The element renders [mono-dot] (it is a\r\n   `cssClass` slot); hand-written markup may leave the circle empty and take the\r\n   pseudo-element instead. Both are out of flow (`inset: 0; margin: auto`) so the\r\n   circle keeps a stable synthesised baseline.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/radio.css .field > input[type='radio'], .input[type='radio'] >> &:checked:before\r\n   — absolute top-1/2 left-1/2 content-[''] -translate-x/y-1/2 rounded-full */\r\n/* basecoat@1.0.2 styles/vega.css :is(.field > input[type='radio'], .input[type='radio']):checked:before\r\n   — size-2 bg-primary-foreground (mono: that share of the box, so it tracks every step) */\r\n:where([mono-radio]) > [mono-circle] > [mono-dot],\r\n:where([mono-radio]) > [mono-circle]:not(:has([mono-dot]))::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: var(--_mono-radio-dot);\r\n  height: var(--_mono-radio-dot);\r\n  border-radius: var(--mono-radio-dot-radius, var(--mono-radius-full));\r\n  background-color: var(--_mono-radio-dot-color);\r\n  transform: scale(0);\r\n  opacity: 0;\r\n  transition-property: transform, opacity, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-radio][mono-checked] > [mono-circle] > [mono-dot],\r\n[mono-radio][mono-checked] > [mono-circle]:not(:has([mono-dot]))::before,\r\n:where([mono-radio]) > [mono-input]:checked + [mono-circle] > [mono-dot],\r\n:where([mono-radio]) > [mono-input]:checked + [mono-circle]:not(:has([mono-dot]))::before {\r\n  transform: scale(1);\r\n  opacity: 1;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-radio]) > [mono-circle],\r\n  :where([mono-radio]) > [mono-circle] > [mono-dot],\r\n  :where([mono-radio]) > [mono-circle]::before {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n:where([mono-radio]) > [mono-label] {\r\n  min-width: 0;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — text-sm leading-snug font-medium;\r\n   `block` so the first line box is exactly font × line-height */\r\n:where([mono-radio]) [mono-label-text] {\r\n  display: block;\r\n  font-size: var(--_mono-radio-label-font);\r\n  line-height: var(--_mono-radio-label-line-height);\r\n  font-weight: var(--mono-radio-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--_mono-radio-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal; EXTENSION: one step\r\n   under the label per size */\r\n:where([mono-radio]) [mono-description] {\r\n  display: block;\r\n  margin-top: calc(var(--mono-spacing) * 0.5);\r\n  font-size: var(--_mono-radio-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-radio-description);\r\n}\r\n";
+
 //#endregion
 //#region src/components/radio/mono-radio.shadow.ts
-var SHADOW_EXTRA_CSS = "";
-var MonoRadioShadow = class MonoRadioShadow extends withShadowUtilityStyles(MonoRadioCore(LitElement)) {
+const SHADOW_EXTRA_CSS = "";
+let MonoRadioShadow = class MonoRadioShadow extends withShadowUtilityStyles(MonoRadioCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(radio_default, {
+		this.styles = [unsafeCSS(toShadowCss(radio_css_raw_default, {
 			host: "mono-radio",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -363,6 +366,7 @@ var MonoRadioShadow = class MonoRadioShadow extends withShadowUtilityStyles(Mono
 	}
 };
 MonoRadioShadow = __decorate([customElement("mono-shadow-radio")], MonoRadioShadow);
+
 //#endregion
 //#region src/components/radio/radio-utils.ts
 /**
@@ -404,5 +408,6 @@ function generateRadioAttributes(disabled, checked, label) {
 		"aria-label": label || void 0
 	};
 }
+
 //#endregion
-export { MonoRadioCore, MonoRadioShadow, generateRadioAttributes, validateRadioProps };
+export { MonoRadioCore, MonoRadioShadow, generateRadioAttributes, validateRadioProps };

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

@@ -1,17 +1,18 @@
-import { a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as toCssSize, t as buildSizeStyle } from "../../css-size-DhHSVZJK.js";
-import { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
+import { a as __decorate, d as optionalNumberConverter, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as toCssSize, t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/rich-text-editor/rich-text-editor-loader.ts
-var INSTALL_HINT = "[mono-rich-text-editor] needs the optional peer dependency \"suneditor\". Install it in your app: pnpm add suneditor@^3.3.3";
+const INSTALL_HINT = "[mono-rich-text-editor] needs the optional peer dependency \"suneditor\". Install it in your app: pnpm add suneditor@^3.3.3";
 function withHint(err) {
 	const message = err instanceof Error ? err.message : String(err);
 	return /* @__PURE__ */ new Error(`${INSTALL_HINT}${message ? ` (original error: ${message})` : ""}`);
 }
-var _corePromise = null;
+let _corePromise = null;
 /** The `suneditor` default export (`{ create, init }`), cached; a failure resets so a later attempt retries. */
 function loadSunEditor() {
 	_corePromise ??= import("suneditor").then((m) => m?.default ?? m).catch((err) => {
@@ -20,7 +21,7 @@ function loadSunEditor() {
 	});
 	return _corePromise;
 }
-var _cssPromise = null;
+let _cssPromise = null;
 /**
 * SunEditor's UI stylesheet (`suneditor/css/editor`), injected ONCE per page by
 * the consumer's bundler as a side-effect import. Failure is not fatal — the
@@ -32,7 +33,7 @@ function loadSunEditorCss() {
 	});
 	return _cssPromise;
 }
-var _pluginsPromise = null;
+let _pluginsPromise = null;
 /** Every built-in plugin, keyed by name (`suneditor/plugins`' default export). */
 function loadSunEditorPlugins() {
 	_pluginsPromise ??= import("suneditor/plugins").then((m) => m?.default ?? m).catch((err) => {
@@ -46,7 +47,7 @@ function loadSunEditorPlugins() {
 * consumer's bundler can split them. Unknown codes fall back to English (the
 * editor's own default) with a warning rather than failing the build.
 */
-var LANGS = {
+const LANGS = {
 	ckb: () => import("suneditor/langs/ckb"),
 	cs: () => import("suneditor/langs/cs"),
 	da: () => import("suneditor/langs/da"),
@@ -74,8 +75,8 @@ var LANGS = {
 	zh_cn: () => import("suneditor/langs/zh_cn")
 };
 /** Codes `lang` accepts. */
-var SUNEDITOR_LANG_CODES = Object.keys(LANGS);
-var _langPromises = /* @__PURE__ */ new Map();
+const SUNEDITOR_LANG_CODES = Object.keys(LANGS);
+const _langPromises = /* @__PURE__ */ new Map();
 /**
 * A language pack by code (`ko`, `pt-BR` → `pt_br`, `zh-CN` → `zh_cn`, …), or
 * `undefined` for English / an unknown code (SunEditor then uses its default).
@@ -98,6 +99,7 @@ function loadSunEditorLang(code) {
 	}
 	return p;
 }
+
 //#endregion
 //#region src/components/rich-text-editor/rich-text-editor-toolbar.ts
 /**
@@ -105,7 +107,7 @@ function loadSunEditorLang(code) {
 * Anything else in a `buttonList` is the `key` of a plugin that has to be in
 * `plugins`, so a preset is filtered against the plugins actually loaded.
 */
-var SUNEDITOR_CORE_BUTTONS = new Set([
+const SUNEDITOR_CORE_BUTTONS = /* @__PURE__ */ new Set([
 	"bold",
 	"underline",
 	"italic",
@@ -145,7 +147,7 @@ var SUNEDITOR_CORE_BUTTONS = new Set([
 * `:plugins.prop="[...]"` with the class or `plugins="font, link, template"`
 * is — and supply their options through `options`.
 */
-var AUTO_EXCLUDED_PLUGINS = new Set([
+const AUTO_EXCLUDED_PLUGINS = /* @__PURE__ */ new Set([
 	"exportPDF",
 	"fileUpload",
 	"layout",
@@ -158,12 +160,12 @@ var AUTO_EXCLUDED_PLUGINS = new Set([
 	"fileBrowser"
 ]);
 /** Markers a `buttonList` may carry besides button names. */
-var SPECIAL = /^(\||\/|-left|-right|-center|#fix)$/;
+const SPECIAL = /^(\||\/|-left|-right|-center|#fix)$/;
 /**
 * SunEditor's own default (`DEFAULTS.BUTTON_LIST`) — no plugin buttons at all.
 * Mirrored here rather than imported so the presets stay pure.
 */
-var TOOLBAR_DEFAULT = [
+const TOOLBAR_DEFAULT = [
 	["undo", "redo"],
 	"|",
 	[
@@ -189,7 +191,7 @@ var TOOLBAR_DEFAULT = [
 	["preview", "print"]
 ];
 /** The essentials: a comment box, a note field. */
-var TOOLBAR_BASIC = [
+const TOOLBAR_BASIC = [
 	["undo", "redo"],
 	"|",
 	[
@@ -208,7 +210,7 @@ var TOOLBAR_BASIC = [
 	["removeFormat"]
 ];
 /** The default: what a document / description / email body needs. */
-var TOOLBAR_STANDARD = [
+const TOOLBAR_STANDARD = [
 	["undo", "redo"],
 	"|",
 	[
@@ -256,7 +258,7 @@ var TOOLBAR_STANDARD = [
 * `templates` list), `math` and `exportPDF` (need external libraries) — pass
 * those through `toolbar` + `options` when the app provides what they need.
 */
-var TOOLBAR_FULL = [
+const TOOLBAR_FULL = [
 	["undo", "redo"],
 	"|",
 	[
@@ -325,7 +327,7 @@ var TOOLBAR_FULL = [
 		"print"
 	]
 ];
-var TOOLBAR_PRESETS = {
+const TOOLBAR_PRESETS = {
 	basic: TOOLBAR_BASIC,
 	standard: TOOLBAR_STANDARD,
 	full: TOOLBAR_FULL,
@@ -448,6 +450,7 @@ function pluginsNeedCatalog(plugins) {
 	if (Array.isArray(plugins)) return plugins.some((p) => typeof p === "string");
 	return false;
 }
+
 //#endregion
 //#region src/components/rich-text-editor/rich-text-editor-core.ts
 /**
@@ -485,7 +488,7 @@ function pluginsNeedCatalog(plugins) {
 * jumps, no echo. `monoForm` binds through {@link MonoFormControlCore} exactly
 * as `mono-textarea` does.
 */
-var MonoRichTextEditorCore = (superClass) => {
+const MonoRichTextEditorCore = (superClass) => {
 	class MonoRichTextEditorCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -1272,24 +1275,26 @@ var MonoRichTextEditorCore = (superClass) => {
 	__decorate([state()], MonoRichTextEditorCoreClass.prototype, "_loading", void 0);
 	return MonoRichTextEditorCoreClass;
 };
+
 //#endregion
-//#region src/components/rich-text-editor/rich-text-editor.css?raw
-var rich_text_editor_default = "/* =========================================================================\r\n   mono-rich-text-editor — a mono form field whose input is a SunEditor v3\r\n   instance. An EXTENSION: Basecoat has no editor, so the CHROME is the ported\r\n   textarea's `.field` (basecoat-css@1.0.2, vega style) — label, frame, message\r\n   — and the EDITOR is SunEditor's own DOM, styled by ITS stylesheet\r\n   (`suneditor/css/editor`, loaded by the element at runtime) and themed from\r\n   here by remapping its `--se-*` tokens onto the Basecoat tokens.\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-rich-text-editor size=\"sm\" color=\"danger\" label=\"Body\" helper-text=\"…\">\r\n     <div mono-rich-text-editor mono-size=\"sm\" mono-color=\"danger\">\r\n       <label mono-rte-label>Body</label>\r\n       <div mono-rte-field><div mono-rte-mount>…SunEditor…</div></div>\r\n       <div mono-rte-footer><div mono-rte-message-wrap><div mono-rte-message=\"helper\">…</div></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these on its root (both builds) plus the STATES `mono-disabled` /\r\n   `mono-readonly` / `mono-required` / `mono-loading` / `mono-unavailable` /\r\n   `mono-has-value` and `mono-validation-state=\"valid|invalid|warning\"`. The\r\n   old classes (`.mono-rich-text-editor.md.primary.outlined`) are still emitted\r\n   as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   THE PARTS ARE FAMILY-UNIQUE (`mono-rte-*`): the frame holds SunEditor's whole\r\n   DOM, and a consumer's content may carry anything.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-rich-text-editor]                       ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-rich-text-editor] > [mono-rte-label]    ≡ .field > label / .label\r\n     [mono-rte-field]                              ≡ .textarea's box (rounded-md border-input bg-transparent shadow-xs,\r\n                                                     focus-within: border-ring ring-3 ring-ring/50) — the editor sits inside\r\n     [mono-rte-mount] .sun-editor .se-toolbar      ≡ EXTENSION (a muted band under the frame's top edge)\r\n     [mono-rte-footer] > [mono-rte-message-wrap] > [mono-rte-message=\"…\"] ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the textarea's font ladder; icons step with it)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma / mira / rhea's textarea)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: the bottom edge only, no ring)\r\n     [mono-rte-unavailable]                        ≡ EXTENSION (the peer-missing notice)\r\n     .se-tooltip-text (SunEditor's)                ≡ [data-tooltip]::before (bg-foreground text-background rounded-md px-3 py-1.5 text-xs)\r\n\r\n   FLAVORS: the frame IS the textarea's box, so every metric resolves\r\n   `--mono-rich-text-editor-<k>` → `--mono-textarea-<k>` → the base through the\r\n   SAME chains textarea.css uses — a flavour that retunes the textarea retunes\r\n   this frame, and no flavour file carries an editor entry. SunEditor's own\r\n   popovers (dropdowns, the modal layer it parks on <body>) take the select\r\n   panel's popover chain (`--mono-select-dropdown-*`), like every other popover.\r\n\r\n   The editor DOM is LIGHT DOM in both builds (see `rich-text-editor-core.ts`),\r\n   so the `--se-*` remap is declared on the frame and inherited by the mount —\r\n   through a `<slot>` in the shadow build, which custom properties cross — and\r\n   DELIVERED on `.sun-editor` from the PAGE sheet (the shadow sheet cannot reach\r\n   a slotted descendant). Nothing below reaches into SunEditor's selectors except\r\n   to flatten the frame it paints around itself, which the mono frame replaces.\r\n   ========================================================================= */\r\n\r\nmono-rich-text-editor {\r\n  display: block;\r\n}\r\n\r\n/* The token block — on the element root AND on SunEditor's carrier (the layer it\r\n   parks on <body> for its dropdown lists, dialogs and alerts), which is outside\r\n   every frame and can inherit nothing from it. The element's own props (`color`,\r\n   `size`) cannot reach the carrier either: it takes the defaults. */\r\n[mono-rich-text-editor],\r\n.sun-editor.sun-editor-carrier-wrapper {\r\n  /* ── palette: each slot is a public knob over the textarea's, over a Basecoat token ── */\r\n  --_mono-rte-text: var(--mono-rich-text-editor-text, var(--mono-textarea-text, var(--foreground)));\r\n  --_mono-rte-placeholder: var(--mono-rich-text-editor-placeholder, var(--mono-textarea-placeholder, var(--muted-foreground)));\r\n  --_mono-rte-muted: var(--mono-rich-text-editor-muted, var(--mono-textarea-muted, var(--muted-foreground)));\r\n  --_mono-rte-primary: var(--mono-rich-text-editor-primary, var(--mono-textarea-primary, var(--ring)));\r\n  --_mono-rte-secondary: var(--mono-rich-text-editor-secondary, var(--mono-textarea-secondary, var(--muted-foreground)));\r\n  --_mono-rte-success: var(--mono-rich-text-editor-success, var(--mono-textarea-success, var(--success)));\r\n  --_mono-rte-danger: var(--mono-rich-text-editor-danger, var(--mono-textarea-danger, var(--destructive)));\r\n  --_mono-rte-warning: var(--mono-rich-text-editor-warning, var(--mono-textarea-warning, var(--warning)));\r\n  --_mono-rte-info: var(--mono-rich-text-editor-info, var(--mono-textarea-info, var(--info)));\r\n  --_mono-rte-teal: var(--mono-rich-text-editor-teal, var(--mono-textarea-teal, var(--teal)));\r\n  --_mono-rte-purple: var(--mono-rich-text-editor-purple, var(--mono-textarea-purple, var(--purple)));\r\n  --_mono-rte-neutral: var(--mono-rich-text-editor-neutral, var(--mono-textarea-neutral, var(--neutral)));\r\n  --_mono-rte-dark: var(--mono-rich-text-editor-dark, var(--mono-textarea-dark, var(--dark)));\r\n  --_mono-rte-valid: var(--mono-rich-text-editor-valid, var(--mono-textarea-valid, var(--success)));\r\n  --_mono-rte-invalid: var(--mono-rich-text-editor-invalid, var(--mono-textarea-invalid, var(--destructive)));\r\n\r\n  /* ── the painted result — three tiers, base = vega's .textarea ─────────── */\r\n  --_mono-rte-ring-color: var(--mono-rich-text-editor-ring-color, var(--mono-rich-text-editor-focus-color, var(--_mono-rte-ring-color-preset, var(--_mono-rte-primary))));\r\n  --_mono-rte-ring-width: var(--mono-rich-text-editor-ring-width, var(--mono-textarea-ring-width, var(--_mono-rte-ring-width-preset, var(--mono-ring-width))));\r\n  --_mono-rte-ring-alpha: var(--mono-rich-text-editor-ring-alpha, var(--mono-textarea-ring-alpha, var(--mono-ring-alpha)));\r\n  --_mono-rte-border-color: var(--mono-rich-text-editor-rest-border, var(--mono-rich-text-editor-border-color, var(--mono-rich-text-editor-border, var(--mono-textarea-rest-border, var(--mono-textarea-border-color, var(--_mono-rte-border-color-preset, var(--input)))))));\r\n  --_mono-rte-side-border-color: var(--_mono-rte-side-border-color-preset, var(--_mono-rte-border-color));\r\n  --_mono-rte-bg: var(--mono-rich-text-editor-bg, var(--mono-rich-text-editor-surface, var(--mono-textarea-bg, var(--mono-textarea-surface, var(--_mono-rte-bg-preset, var(--mono-mode-surface))))));\r\n  --_mono-rte-shadow: var(--mono-rich-text-editor-shadow, var(--mono-textarea-shadow, var(--_mono-rte-shadow-preset, var(--mono-shadow-xs))));\r\n  --_mono-rte-border-width: var(--mono-rich-text-editor-border-width, var(--mono-textarea-border-width, var(--mono-border-width)));\r\n  --_mono-rte-radius: var(--mono-rich-text-editor-radius, var(--mono-textarea-radius, var(--_mono-rte-radius-preset, var(--mono-radius-md))));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-rich-text-editor>` that names no size renders like size=\"md\" ── */\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-md, var(--mono-textarea-font-md, var(--mono-text-sm))));\r\n  --_mono-rte-icon-size: var(--mono-rich-text-editor-icon-size, var(--_mono-rte-icon-size-preset, 18px));\r\n  --_mono-rte-font-family: var(--mono-rich-text-editor-font-family, inherit);\r\n  --_mono-rte-min-height: var(--mono-rich-text-editor-min-height, 10rem);\r\n  /* EXTENSION — the toolbar band: a muted wash under the frame's top edge */\r\n  --_mono-rte-toolbar-bg: var(--mono-rich-text-editor-toolbar-bg, color-mix(in oklab, var(--muted) 60%, var(--_mono-rte-bg)));\r\n\r\n  /* ── SunEditor's popovers (dropdowns, dialogs) are the select panel's popover ── */\r\n  --_mono-rte-popover-bg: var(--mono-rich-text-editor-popover-bg, var(--mono-select-dropdown-bg, var(--popover)));\r\n  --_mono-rte-popover-color: var(--mono-rich-text-editor-popover-color, var(--mono-select-dropdown-color, var(--popover-foreground)));\r\n  --_mono-rte-popover-radius: var(--mono-rich-text-editor-popover-radius, var(--mono-select-dropdown-radius, var(--mono-radius-md)));\r\n  --_mono-rte-popover-shadow: var(--mono-rich-text-editor-popover-shadow, var(--mono-select-dropdown-shadow, var(--mono-shadow-md)));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — bg-foreground text-background rounded-md px-3 py-1.5 text-xs\r\n     SunEditor's toolbar tooltips; the corner is the style's shared tooltip token */\r\n  --_mono-rte-tooltip-bg: var(--mono-rich-text-editor-tooltip-bg, var(--mono-tooltip-bg, var(--foreground)));\r\n  --_mono-rte-tooltip-color: var(--mono-rich-text-editor-tooltip-color, var(--mono-tooltip-color, var(--background)));\r\n  --_mono-rte-tooltip-radius: var(--mono-rich-text-editor-tooltip-radius, var(--mono-tooltip-radius, var(--mono-radius-md)));\r\n\r\n  /* ── SunEditor's tokens, remapped onto the theme ─────────────────────────\r\n     Declared on the FRAME'S ancestor so the light-DOM mount inherits them in\r\n     both builds. `.sun-editor` re-declares every one of these on itself with\r\n     its defaults, so each is delivered again on `.sun-editor` below — this\r\n     block is what a consumer sees and overrides; that one is the delivery. */\r\n  --_se-main-color: var(--_mono-rte-text);\r\n  --_se-main-color-lighter: var(--_mono-rte-muted);\r\n  --_se-main-background: var(--_mono-rte-bg);\r\n  --_se-main-border: var(--border);\r\n  --_se-main-divider: var(--border);\r\n  --_se-main-outline: var(--_mono-rte-ring-color);\r\n  /* the accent: links and the focus outline */\r\n  --_se-active: var(--_mono-rte-ring-color);\r\n  --_se-active-dark: color-mix(in oklab, var(--_mono-rte-ring-color) 85%, var(--foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-accent hover:text-accent-foreground\r\n     a pressed toolbar button and a checked list item are the toggle-on state:\r\n     the accent WASH with the foreground ink, never a primary tint */\r\n  --_se-active-ink: var(--mono-rich-text-editor-active-color, var(--accent-foreground, var(--_mono-rte-text)));\r\n  --_se-active-light: var(--mono-rich-text-editor-active-bg, var(--accent, var(--muted)));\r\n  --_se-active-light2: var(--mono-mode-surface-hover);\r\n  --_se-hover: var(--_mono-rte-text);\r\n  --_se-hover-light: var(--mono-mode-ghost-hover);\r\n  --_se-hover-light2: var(--mono-mode-surface-hover);\r\n  --_se-error: var(--_mono-rte-danger);\r\n  --_se-success: var(--_mono-rte-success);\r\n  --_se-placeholder: var(--_mono-rte-placeholder);\r\n  --_se-radius: var(--mono-radius-sm);\r\n  --_se-radius-lg: var(--_mono-rte-popover-radius);\r\n  --_se-shadow-layer: var(--_mono-rte-popover-shadow);\r\n  --_se-font-family: var(--_mono-rte-font-family);\r\n  --_se-font-size: var(--_mono-rte-font-size);\r\n  --_se-icon-size: var(--_mono-rte-icon-size);\r\n  --_se-min-height: var(--_mono-rte-min-height);\r\n\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n[mono-rich-text-editor] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-rich-text-editor-gap, var(--mono-textarea-gap, calc(var(--mono-spacing) * 3)));\r\n  width: 100%;\r\n  min-width: 0;\r\n  color: var(--_mono-rte-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-rich-text-editor],\r\n:where([mono-rich-text-editor]) > *,\r\n:where([mono-rich-text-editor]) > * > *::before,\r\n:where([mono-rich-text-editor]) > * > *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* the shadow build renders every region and marks the empty ones; the light\r\n   build renders only what exists */\r\n[mono-rich-text-editor] :is([mono-rte-label], [mono-rte-message], [mono-rte-footer])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n[mono-rich-text-editor] > [mono-rte-message-outlet]:not(:has([mono-rte-footer]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: the textarea's font ladder; the icons step with it\r\n   ========================================= */\r\n\r\n[mono-rich-text-editor][mono-size=\"xs\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-xs, var(--mono-textarea-font-xs, var(--mono-text-xs))));\r\n  --_mono-rte-icon-size-preset: 14px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"sm\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-sm, var(--mono-textarea-font-sm, var(--mono-textarea-font-md, var(--mono-text-sm)))));\r\n  --_mono-rte-icon-size-preset: 16px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"lg\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-lg, var(--mono-textarea-font-lg, var(--mono-textarea-font-md, var(--mono-text-sm)))));\r\n  --_mono-rte-icon-size-preset: 20px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"xl\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-xl, var(--mono-textarea-font-xl, var(--mono-text-base))));\r\n  --_mono-rte-icon-size-preset: 22px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"xxl\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-xxl, var(--mono-textarea-font-xxl, var(--mono-text-base))));\r\n  --_mono-rte-icon-size-preset: 24px;\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the `color` prop is the FOCUS colour, which is also the\r\n   editor's active state and links\r\n   ========================================= */\r\n\r\n[mono-rich-text-editor][mono-color=\"secondary\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-secondary);\r\n}\r\n[mono-rich-text-editor][mono-color=\"success\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-success);\r\n}\r\n[mono-rich-text-editor][mono-color=\"danger\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-danger);\r\n}\r\n[mono-rich-text-editor][mono-color=\"warning\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-warning);\r\n}\r\n[mono-rich-text-editor][mono-color=\"info\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-info);\r\n}\r\n[mono-rich-text-editor][mono-color=\"teal\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-teal);\r\n}\r\n[mono-rich-text-editor][mono-color=\"purple\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-purple);\r\n}\r\n[mono-rich-text-editor][mono-color=\"neutral\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-neutral);\r\n}\r\n[mono-rich-text-editor][mono-color=\"dark\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label\r\n   — text-sm leading-snug font-medium */\r\n:where([mono-rich-text-editor]) > [mono-rte-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-rich-text-editor-label-font-size, var(--mono-textarea-label-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-rich-text-editor-label-line-height, var(--mono-textarea-label-line-height, var(--mono-leading-snug)));\r\n  font-weight: var(--mono-rich-text-editor-label-font-weight, var(--mono-textarea-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\r\n  color: var(--mono-rich-text-editor-label-color, var(--mono-textarea-label-color, var(--_mono-rte-text)));\r\n}\r\n\r\n[mono-rich-text-editor][mono-validation-state=\"invalid\"] > [mono-rte-label] {\r\n  color: var(--mono-rich-text-editor-label-color, var(--mono-textarea-label-color, var(--_mono-rte-invalid)));\r\n}\r\n\r\n:where([mono-rich-text-editor]) [mono-rte-required-mark] {\r\n  color: var(--mono-rich-text-editor-required-color, var(--mono-textarea-required-color, var(--destructive)));\r\n}\r\n\r\n[mono-rich-text-editor][mono-disabled] > [mono-rte-label] {\r\n  opacity: 0.5;\r\n}\r\n\r\n/* =========================================\r\n   The frame — the textarea's box, holding the editor\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea\r\n   — rounded-md border border-input bg-transparent shadow-xs\r\n   transition-[color,box-shadow] (dark:bg-input/30 via --mono-mode-surface);\r\n   mono: no padding — the editor's toolbar and page fill the box edge to edge */\r\n:where([mono-rich-text-editor]) [mono-rte-field] {\r\n  --_mono-rte-ring: 0 0 #0000;\r\n  position: relative;\r\n  width: 100%;\r\n  min-width: 0;\r\n  border: var(--_mono-rte-border-width) solid var(--_mono-rte-side-border-color);\r\n  border-bottom-color: var(--_mono-rte-border-color);\r\n  border-radius: var(--_mono-rte-radius);\r\n  background-color: var(--_mono-rte-bg);\r\n  color: var(--_mono-rte-text);\r\n  box-shadow: var(--_mono-rte-ring), var(--_mono-rte-shadow);\r\n  /* the editor paints its own corners; clip so the toolbar's top corners follow\r\n     the frame's radius */\r\n  overflow: hidden;\r\n  transition-property: color, background-color, border-color, box-shadow, opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* Before the editor loads (and on the server) the frame is a quiet box the\r\n   size of the editing area, so the form does not jump when it lands. */\r\n[mono-rich-text-editor][mono-loading] [mono-rte-field] {\r\n  min-height: calc(var(--_mono-rte-min-height) + 2.75rem);\r\n}\r\n[mono-rich-text-editor][mono-unavailable] [mono-rte-field] {\r\n  display: none;\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n   the focus is on SunEditor's contenteditable inside the frame */\r\n:where([mono-rich-text-editor]) [mono-rte-field]:focus-within {\r\n  border-color: var(--_mono-rte-side-border-color);\r\n  border-bottom-color: var(--_mono-rte-ring-color);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) color-mix(in oklab, var(--_mono-rte-ring-color) var(--_mono-rte-ring-alpha), transparent);\r\n}\r\n[mono-rich-text-editor]:is(:not([mono-variant]), [mono-variant=\"outlined\"], [mono-variant=\"filled\"]) [mono-rte-field]:focus-within {\r\n  border-color: var(--_mono-rte-ring-color);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50 and /40, carried by the mode tokens) */\r\n[mono-rich-text-editor][mono-validation-state=\"invalid\"] [mono-rte-field] {\r\n  --_mono-rte-border-color: var(--mono-mode-invalid-border);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in the success / warning roles */\r\n[mono-rich-text-editor][mono-validation-state=\"valid\"] [mono-rte-field] {\r\n  --_mono-rte-border-color: color-mix(in oklab, var(--_mono-rte-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) color-mix(in oklab, var(--_mono-rte-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-rich-text-editor][mono-validation-state=\"warning\"] [mono-rte-field] {\r\n  --_mono-rte-border-color: color-mix(in oklab, var(--_mono-rte-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) color-mix(in oklab, var(--_mono-rte-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* disabled:cursor-not-allowed disabled:opacity-50 */\r\n[mono-rich-text-editor][mono-disabled] [mono-rte-field] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background-color: var(--mono-rich-text-editor-disabled-bg, var(--mono-textarea-disabled-bg, var(--_mono-rte-bg)));\r\n}\r\n\r\n/* EXTENSION — readonly is legible, not dimmed: a muted surface */\r\n[mono-rich-text-editor][mono-readonly]:not([mono-disabled]) [mono-rte-field] {\r\n  --_se-main-background: var(--mono-rich-text-editor-readonly-bg, var(--mono-textarea-readonly-bg, var(--muted)));\r\n  background-color: var(--mono-rich-text-editor-readonly-bg, var(--mono-textarea-readonly-bg, var(--muted)));\r\n}\r\n\r\n/* =========================================\r\n   Variants — EXTENSION: the two other looks Basecoat's styles ship, through\r\n   the textarea's own knobs so a flavour that restyles the textarea restyles this\r\n   ========================================= */\r\n\r\n[mono-rich-text-editor]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-rte-bg-preset: var(--mono-rich-text-editor-outline-bg, var(--mono-textarea-outline-bg));\r\n  --_mono-rte-border-color-preset: var(--mono-rich-text-editor-outline-border-color, var(--mono-textarea-outline-border-color));\r\n  --_mono-rte-side-border-color-preset: var(--mono-rich-text-editor-outline-side-border-color, var(--mono-textarea-outline-side-border-color));\r\n  --_mono-rte-shadow-preset: var(--mono-rich-text-editor-outline-shadow, var(--mono-textarea-outline-shadow, var(--mono-shadow-xs)));\r\n  --_mono-rte-radius-preset: var(--mono-rich-text-editor-outline-radius, var(--mono-textarea-outline-radius));\r\n  --_mono-rte-ring-width-preset: var(--mono-rich-text-editor-outline-ring-width, var(--mono-textarea-outline-ring-width));\r\n}\r\n\r\n/* `filled` ≡ luma / mira / rhea's textarea: a tinted surface, no border, no shadow */\r\n[mono-rich-text-editor][mono-variant=\"filled\"] {\r\n  --_mono-rte-bg-preset: var(--mono-rich-text-editor-filled-bg, var(--mono-textarea-filled-bg, color-mix(in oklab, var(--input) 50%, transparent)));\r\n  --_mono-rte-border-color-preset: transparent;\r\n  --_mono-rte-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* `underlined` ≡ sera's: square, the bottom edge only, and no ring */\r\n[mono-rich-text-editor][mono-variant=\"underlined\"] {\r\n  --_mono-rte-radius-preset: 0;\r\n  --_mono-rte-bg-preset: transparent;\r\n  --_mono-rte-side-border-color-preset: transparent;\r\n  --_mono-rte-shadow-preset: 0 0 #0000;\r\n  --_mono-rte-ring-width-preset: 0px;\r\n}\r\n[mono-rich-text-editor][mono-variant=\"underlined\"] [mono-rte-field] {\r\n  --_se-main-background: transparent;\r\n  --_mono-rte-toolbar-bg: transparent;\r\n}\r\n\r\n/* =========================================\r\n   Footer — the message row\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-rich-text-editor]) [mono-rte-footer] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n:where([mono-rich-text-editor]) [mono-rte-message-wrap] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-rich-text-editor]) [mono-rte-message] {\r\n  font-size: var(--mono-rich-text-editor-message-font-size, var(--mono-textarea-message-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-rich-text-editor-message-line-height, var(--mono-textarea-message-line-height, var(--mono-leading-normal)));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-rte-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:where([mono-rich-text-editor]) [mono-rte-message=\"invalid\"] {\r\n  color: var(--_mono-rte-invalid);\r\n}\r\n:where([mono-rich-text-editor]) [mono-rte-message=\"valid\"] {\r\n  color: var(--_mono-rte-valid);\r\n}\r\n:where([mono-rich-text-editor]) [mono-rte-message=\"warning\"] {\r\n  color: var(--_mono-rte-warning);\r\n}\r\n\r\n/* EXTENSION — the peer-missing notice: reads like a validation message, never like a crash */\r\n:where([mono-rich-text-editor]) [mono-rte-unavailable] {\r\n  padding: calc(var(--mono-spacing) * 2.5) calc(var(--mono-spacing) * 3);\r\n  border: var(--mono-border-width) dashed var(--_mono-rte-danger);\r\n  border-radius: var(--_mono-rte-radius);\r\n  background: color-mix(in oklab, var(--_mono-rte-danger) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-rte-danger);\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-leading-normal);\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n/* =========================================\r\n   SunEditor inside the frame — from the PAGE sheet (the mount is light DOM)\r\n   ========================================= */\r\n\r\n[mono-rte-mount] {\r\n  display: block;\r\n  width: 100%;\r\n  min-width: 0;\r\n}\r\n\r\n/* Deliver the remap. `.sun-editor` sets every `--se-*` on itself from\r\n   SunEditor's sheet, so the same selector (plus ours for specificity) has to\r\n   set them again — the values, though, come from the frame's `--_se-*` above,\r\n   which the mount inherits. Only the tokens a theme is made of; the rest keep\r\n   SunEditor's defaults. */\r\n[mono-rte-mount] .sun-editor,\r\n[mono-rte-mount] .sun-editor-editable,\r\n.sun-editor.sun-editor-carrier-wrapper {\r\n  --se-main-font-family: var(--_se-font-family);\r\n  --se-content-font-family: var(--_se-font-family);\r\n  --se-main-font-size: var(--_se-font-size);\r\n  --se-btn-font-size: var(--_se-font-size);\r\n  --se-edit-font-size: calc(var(--_se-font-size) * 1.1);\r\n  --se-icon-size: var(--_se-icon-size);\r\n  --se-min-height: var(--_se-min-height);\r\n  --se-border-radius: var(--_se-radius);\r\n  --se-border-radius-lg: var(--_se-radius-lg);\r\n\r\n  --se-main-color: var(--_se-main-color);\r\n  --se-main-color-lighter: var(--_se-main-color-lighter);\r\n  --se-main-font-color: var(--_se-main-color);\r\n  --se-main-background-color: var(--_se-main-background);\r\n  --se-main-border-color: var(--_se-main-border);\r\n  --se-main-divider-color: var(--_se-main-divider);\r\n  --se-main-outline-color: var(--_se-main-outline);\r\n  --se-main-shadow-color: var(--_se-main-divider);\r\n  --se-statusbar-font-color: var(--_se-main-color-lighter);\r\n  --se-dropdown-font-color: var(--_se-main-color);\r\n\r\n  --se-edit-font-color: var(--_se-main-color);\r\n  --se-edit-background-color: var(--_se-main-background);\r\n  --se-edit-anchor: var(--_se-active);\r\n  --se-caret-color: var(--_se-main-color);\r\n  --se-placeholder-color: var(--_se-placeholder);\r\n\r\n  --se-hover-color: var(--_se-hover);\r\n  --se-hover-dark-color: var(--_se-main-border);\r\n  --se-hover-light-color: var(--_se-hover-light);\r\n  --se-hover-light2-color: var(--_se-hover-light2);\r\n  --se-hover-light3-color: var(--_se-hover-light2);\r\n\r\n  /* the accent for outlines and links; the toggle-on state for buttons and\r\n     checked list items (ink = --se-active-dark3/4, wash = --se-active-light*) */\r\n  --se-active-color: var(--_se-active);\r\n  --se-active-hover-color: var(--_se-active-ink);\r\n  --se-active-dark-color: var(--_se-main-border);\r\n  --se-active-dark2-color: var(--_se-active-dark);\r\n  --se-active-dark3-color: var(--_se-active-ink);\r\n  --se-active-dark4-color: var(--_se-main-border);\r\n  --se-active-dark5-color: var(--_se-active-dark);\r\n  --se-active-light-color: var(--_se-active-light);\r\n  --se-active-light2-color: var(--_se-active-light);\r\n  --se-active-light3-color: var(--_se-active-light2);\r\n  --se-active-light4-color: var(--_se-active-light);\r\n  --se-active-light5-color: var(--_se-active-light2);\r\n  --se-active-light6-color: var(--_se-active-light2);\r\n\r\n  --se-error-color: var(--_se-error);\r\n  --se-success-color: var(--_se-success);\r\n\r\n  --se-select-menu-hover-bg: var(--_se-hover-light);\r\n  --se-select-menu-active-bg: var(--_se-active-light);\r\n  --se-modal-background-color: var(--_mono-rte-popover-bg);\r\n  --se-modal-color: var(--_mono-rte-popover-color);\r\n  --se-modal-border-color: var(--_se-main-border);\r\n  --se-modal-anchor-color: var(--_se-active);\r\n  --se-shadow-layer: var(--_se-shadow-layer);\r\n\r\n  /* ── the sub-surfaces SunEditor paints from its own light palette ────────\r\n     code view, the table picker, the floating controllers, the modal chrome,\r\n     the overlay, the editing area's own colours — every one a page token now */\r\n  --se-codeview-font-family: var(--font-mono, ui-monospace, monospace);\r\n  --se-markdown-font-family: var(--font-mono, ui-monospace, monospace);\r\n  --se-code-view-color: var(--_mono-rte-text);\r\n  --se-code-view-background-color: var(--_se-main-background);\r\n  --se-code-view-line-color: var(--_mono-rte-muted);\r\n  --se-code-view-line-background-color: var(--muted);\r\n  --se-markdown-view-color: var(--_mono-rte-text);\r\n  --se-markdown-view-background-color: var(--_se-main-background);\r\n  --se-markdown-view-line-color: var(--_mono-rte-muted);\r\n  --se-markdown-view-line-background-color: var(--muted);\r\n\r\n  --se-table-picker-color: var(--_mono-rte-popover-bg);\r\n  --se-table-picker-border-color: var(--_se-main-border);\r\n  --se-table-picker-highlight-color: color-mix(in oklab, var(--_se-active) var(--mono-mode-tint), var(--_mono-rte-popover-bg));\r\n  --se-table-picker-highlight-border-color: var(--_se-active);\r\n\r\n  --se-controller-background-color: var(--_mono-rte-popover-bg);\r\n  --se-controller-color: var(--_mono-rte-popover-color);\r\n  --se-controller-border-color: var(--_se-main-border);\r\n  --se-shadow-controller: var(--_se-shadow-layer);\r\n  --se-shadow-controller-color: transparent;\r\n  --se-shadow-layer-color: transparent;\r\n  --se-overlay-background-color: var(--mono-mode-backdrop, #000);\r\n\r\n  --se-modal-preview-color: var(--_mono-rte-muted);\r\n  --se-modal-file-input-background-color: var(--muted);\r\n  --se-modal-input-disabled-color: var(--_mono-rte-muted);\r\n  --se-modal-input-disabled-background-color: var(--muted);\r\n  --se-input-btn-border-color: var(--_se-main-border);\r\n  --se-input-btn-disabled-color: var(--_mono-rte-muted);\r\n  --se-main-out-color: var(--_se-main-border);\r\n  --se-hover-dark2-color: var(--_se-main-border);\r\n  --se-hover-dark3-color: var(--_se-main-border);\r\n  --se-loading-color: var(--_se-active);\r\n\r\n  --se-drag-caret-color: var(--_se-active);\r\n  --se-edit-active: var(--_se-active);\r\n  --se-edit-hover: var(--_se-active-light);\r\n  --se-edit-outline: var(--_se-main-border);\r\n  --se-edit-font-pre: var(--_mono-rte-text);\r\n  --se-edit-font-quote: var(--_mono-rte-muted);\r\n  --se-edit-background-pre: var(--muted);\r\n  --se-edit-border-light: var(--_se-main-border);\r\n  --se-edit-border-dark: var(--_se-main-border);\r\n  --se-edit-border-dark-n1: var(--_se-main-border);\r\n  --se-edit-border-dark-n2: var(--_se-main-border);\r\n  --se-edit-border-table: var(--_se-main-border);\r\n  --se-edit-hr-color: var(--_se-main-border);\r\n  --se-edit-hr-on-back: var(--_se-active-light);\r\n  --se-edit-anchor-on-back: color-mix(in oklab, var(--_se-active) var(--mono-mode-tint), transparent);\r\n  --se-edit-anchor-on-font: var(--_se-active);\r\n\r\n  --se-success-dark-color: var(--_se-success);\r\n  --se-success-dark2-color: var(--_se-success);\r\n  --se-success-dark3-color: var(--_se-success);\r\n  --se-success-light-color: color-mix(in oklab, var(--_se-success) var(--mono-mode-tint), transparent);\r\n  --se-success-light2-color: color-mix(in oklab, var(--_se-success) var(--mono-mode-tint), transparent);\r\n  --se-success-light3-color: color-mix(in oklab, var(--_se-success) var(--mono-mode-tint-hover), transparent);\r\n  --se-success-light4-color: var(--_se-success);\r\n  --se-success-light5-color: var(--_se-success);\r\n  --se-error-dark-color: var(--_se-error);\r\n  --se-error-dark2-color: var(--_se-error);\r\n  --se-error-dark3-color: var(--_se-error);\r\n  --se-error-light-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint-hover), transparent);\r\n  --se-error-light2-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n  --se-error-light3-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n  --se-error-light4-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n  --se-error-light5-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n}\r\n\r\n/* In the carrier \"main background\" is the LAYER surface — the dropdown lists,\r\n   dialogs and alerts — so it is the popover surface there, not the editing\r\n   surface (which is transparent in light mode: an invisible list). */\r\n.sun-editor.sun-editor-carrier-wrapper {\r\n  --se-main-background-color: var(--_mono-rte-popover-bg);\r\n  --se-main-font-color: var(--_mono-rte-popover-color);\r\n  --se-dropdown-font-color: var(--_mono-rte-popover-color);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible — bg-muted text-foreground\r\n   a checked list item (the current font, size, format …) is a selected option:\r\n   SunEditor only re-inks it, and its ink was the primary tint */\r\n[mono-rte-mount] .sun-editor .se-list-inner li.se-checked > button,\r\n.sun-editor.sun-editor-carrier-wrapper .se-list-inner li.se-checked > button {\r\n  background-color: var(--_se-active-light);\r\n  color: var(--_se-active-ink);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea — placeholder:text-muted-foreground\r\n   Every placeholder the editor shows — the Size / Font inputs in the toolbar,\r\n   the empty editing area, a dialog's fields — is the field placeholder: the\r\n   muted ink, OPAQUE. Left alone, a host page's preflight (Tailwind / UnoCSS)\r\n   makes a placeholder 50% translucent currentColor, which over a tinted page\r\n   reads as a colour of its own; and SunEditor inks its empty-area placeholder\r\n   with its OUTLINE token, the accent. */\r\n[mono-rte-mount] .sun-editor input::placeholder,\r\n[mono-rte-mount] .sun-editor textarea::placeholder,\r\n.sun-editor.sun-editor-carrier-wrapper input::placeholder,\r\n.sun-editor.sun-editor-carrier-wrapper textarea::placeholder {\r\n  color: var(--_mono-rte-placeholder);\r\n  opacity: 1;\r\n}\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-placeholder,\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-placeholder-line:before {\r\n  color: var(--_mono-rte-placeholder);\r\n}\r\n\r\n/* The frame replaces SunEditor's own — no double border, no second radius. */\r\n[mono-rte-mount] .sun-editor {\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: transparent;\r\n  width: 100% !important;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs\r\n   SunEditor's toolbar tooltips, painted as Basecoat's tooltip: it drew them in\r\n   `--se-main-font-color` on `--se-main-background-color`, which in dark mode\r\n   is a translucent wash under near-white text. (0,5,0) over SunEditor's (0,4,0). */\r\n[mono-rte-mount] .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text,\r\n.sun-editor.sun-editor-carrier-wrapper .se-tooltip .se-tooltip-inner .se-tooltip-text {\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-rte-tooltip-radius);\r\n  background-color: var(--_mono-rte-tooltip-bg);\r\n  color: var(--_mono-rte-tooltip-color);\r\n  /* the page font, handed over by the element: a tooltip inside the font list\r\n     would otherwise inherit the item's own face */\r\n  font-family: var(--_mono-rte-page-font, inherit);\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — the dropdown items (font family,\r\n   font size, the colour palettes …) carried native `title` tooltips, which no theme can\r\n   paint; the element rewrites them into `data-tooltip`, drawn here the way Basecoat\r\n   draws its own: a pseudo-element with the attribute as content, above the item\r\n   (the anchor is `position: relative`, as in Basecoat's compiled `[data-tooltip]`) */\r\n[mono-rte-mount] .sun-editor [data-tooltip],\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip] {\r\n  position: relative;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs */\r\n[mono-rte-mount] .sun-editor [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip]::after {\r\n  content: attr(data-tooltip);\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: calc(100% + calc(var(--mono-spacing) * 1.5));\r\n  z-index: 60;\r\n  width: max-content;\r\n  max-width: 20rem;\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-rte-tooltip-radius);\r\n  background-color: var(--_mono-rte-tooltip-bg);\r\n  color: var(--_mono-rte-tooltip-color);\r\n  font-family: var(--_mono-rte-page-font, inherit);\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  font-style: normal;\r\n  text-indent: 0;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transform: translateX(-50%) scale(0.95);\r\n  transform-origin: bottom center;\r\n  transition-property: opacity, transform, visibility;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast, 100ms);\r\n}\r\n\r\n[mono-rte-mount] .sun-editor [data-tooltip]:hover::after,\r\n[mono-rte-mount] .sun-editor [data-tooltip]:focus-visible::after,\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip]:hover::after,\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip]:focus-visible::after {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transform: translateX(-50%) scale(1);\r\n}\r\n\r\n/* a dropdown layer clips its own overflow, so a tooltip above the FIRST row of a\r\n   palette would be cut off at the layer edge: that row opens its tooltips below */\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet:first-child [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet:first-child [data-tooltip]::after {\r\n  bottom: auto;\r\n  top: calc(100% + calc(var(--mono-spacing) * 1.5));\r\n  transform-origin: top center;\r\n}\r\n\r\n/* SunEditor shrinks a hovered / active swatch with `transform: scale(.8)`. A\r\n   transform makes the button a stacking context, so its tooltip — a child —\r\n   can never rise above the swatches painted after it (the next row covers a\r\n   first-row tooltip) and shrinks with it. The same \"pressed\" read as an inset\r\n   ring of the layer surface instead; the hovered swatch lifts above its row. */\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet button:hover,\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet button.active,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet button:hover,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet button.active {\r\n  transform: none;\r\n  box-shadow: inset 0 0 0 3px var(--_mono-rte-popover-bg, var(--popover));\r\n}\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet button:hover,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet button:hover {\r\n  z-index: 1;\r\n}\r\n\r\n/* …and the same clip sideways: a centred tooltip on the first / last column of\r\n   a palette row runs past the layer's edge, so those hang from the item's own\r\n   outer edge instead */\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:first-child [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:first-child [data-tooltip]::after {\r\n  left: 0;\r\n  transform: scale(0.95);\r\n  transform-origin: left center;\r\n}\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:last-child [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:last-child [data-tooltip]::after {\r\n  left: auto;\r\n  right: 0;\r\n  transform: scale(0.95);\r\n  transform-origin: right center;\r\n}\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:hover::after,\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:focus-visible::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:hover::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:focus-visible::after {\r\n  transform: scale(1);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip][data-arrow]::after — bg-foreground */\r\n[mono-rte-mount] .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text:after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-tooltip .se-tooltip-inner .se-tooltip-text:after {\r\n  border-color: transparent transparent var(--_mono-rte-tooltip-bg) transparent;\r\n}\r\n[mono-rte-mount] .sun-editor .se-toolbar.se-toolbar-bottom .se-tooltip .se-tooltip-inner .se-tooltip-text:after {\r\n  border-color: var(--_mono-rte-tooltip-bg) transparent transparent transparent;\r\n}\r\n\r\n/* EXTENSION — the toolbar band, on a hairline */\r\n[mono-rte-mount] .sun-editor .se-toolbar {\r\n  background: var(--_mono-rte-toolbar-bg);\r\n  box-shadow: inset 0 calc(var(--mono-border-width) * -1) 0 0 var(--border);\r\n}\r\n\r\n/* The carrier — modals, alerts and the dropdown lists SunEditor parks on <body>\r\n   — is in the token block and the delivery rule above: it paints exactly like\r\n   the frame it belongs to, at the element's default `color` and `size`. */\r\n\r\n/* =========================================\r\n   SunEditor's dialogs — the modal SunEditor parks in its carrier: its chrome\r\n   is the page's dialog, its fields the ported input, its buttons the ported\r\n   button, its tabs the ported tabs. Selectors mirror SunEditor's own chains\r\n   (prefixed by the scope) so they out-weigh them by exactly the scope.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * — bg-popover text-popover-foreground */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-content {\r\n  border: var(--mono-border-width) solid var(--_se-main-border);\r\n  border-radius: var(--_mono-rte-popover-radius);\r\n  box-shadow: var(--_mono-rte-popover-shadow);\r\n  color: var(--_mono-rte-popover-color);\r\n}\r\n\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-header .se-modal-title {\r\n  font-size: var(--mono-text-base);\r\n  font-weight: var(--mono-font-weight-semibold);\r\n  color: var(--_mono-rte-popover-color);\r\n}\r\n\r\n/* the close button: a ghost button, muted at rest */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-header .se-close-btn {\r\n  color: var(--_mono-rte-muted);\r\n  text-shadow: none;\r\n  border-radius: var(--mono-radius-sm);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] — the modal's Image / Link tabs:\r\n   a text tab with the accent under the active one, not a boxed strip */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs {\r\n  /* SunEditor floats the tab buttons inside a 25px-high strip; as a flex row the\r\n     strip is as tall as the tabs and stays in flow above the form */\r\n  display: flex;\r\n  align-items: stretch;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  height: auto;\r\n  margin-bottom: calc(var(--mono-spacing) * 3);\r\n  border-bottom: var(--mono-border-width) solid var(--_se-main-border);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs button {\r\n  background-color: transparent;\r\n  border: 0;\r\n  border-bottom: 2px solid transparent;\r\n  margin-bottom: calc(var(--mono-border-width) * -1);\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  color: var(--_mono-rte-muted);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  transition-property: color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs button:hover {\r\n  background-color: transparent;\r\n  color: var(--_mono-rte-text);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs button.active {\r\n  background-color: transparent;\r\n  border-bottom-color: var(--_se-active);\r\n  color: var(--_mono-rte-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   the modal's text fields and selects are the ported input: its surface, edge,\r\n   corner and ring, through the input's own public knobs */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-input-form,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-input-select,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form select,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-controller input[type='text'],\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-controller select {\r\n  background-color: var(--mono-input-bg, var(--mono-input-surface, var(--mono-input-outline-bg, var(--mono-mode-surface))));\r\n  border: var(--mono-border-width) solid var(--mono-input-rest-border, var(--mono-input-border-color, var(--mono-input-outline-border-color, var(--input))));\r\n  border-radius: var(--mono-input-radius-sm, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n  color: var(--_mono-rte-text);\r\n  box-shadow: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\r\n  font-size: var(--mono-text-sm);\r\n  outline: none;\r\n  transition-property: border-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-input-form:focus,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form select:focus {\r\n  border-color: var(--_se-active);\r\n  box-shadow: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--_se-active) var(--mono-ring-alpha), transparent);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner input:disabled {\r\n  opacity: 0.5;\r\n}\r\n\r\n/* the file drop area: a dashed muted panel */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs {\r\n  border-radius: var(--mono-input-radius-sm, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn — Submit is the primary button */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-content .se-btn-primary {\r\n  background-color: var(--mono-button-bg, var(--primary));\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--mono-button-sm-radius, var(--mono-button-radius, var(--mono-radius-md)));\r\n  color: var(--mono-button-color, var(--primary-foreground));\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  box-shadow: var(--mono-shadow-xs);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary:hover,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary:focus {\r\n  background-color: color-mix(in oklab, var(--mono-button-bg, var(--primary)) 90%, transparent);\r\n  border-color: transparent;\r\n  color: var(--mono-button-color, var(--primary-foreground));\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary:disabled {\r\n  opacity: 0.5;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline'] — the modal's secondary buttons */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-btn-revert,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-modal-form-files .se-modal-files-edge-button,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {\r\n  border: var(--mono-border-width) solid var(--input);\r\n  border-radius: var(--mono-button-sm-radius, var(--mono-button-radius, var(--mono-radius-md)));\r\n  background-color: var(--background);\r\n  color: var(--_mono-rte-text);\r\n  opacity: 1;\r\n}\r\n\r\n/* the native checkboxes and radios take the accent */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) input[type='checkbox'],\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) input[type='radio'] {\r\n  accent-color: var(--_se-active);\r\n}\r\n\r\n/* the floating controllers (link / image / table) are popovers */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-controller {\r\n  border-radius: var(--_mono-rte-popover-radius);\r\n}\r\n\r\n/* Full screen — SunEditor fixes its root over the page (inline style, no class of\r\n   its own; the element marks the mount when SunEditor reports the toggle, and the\r\n   inline style is the fallback). The frame stays behind, so the editor takes the\r\n   PAGE surface itself: opaque, in the mode's colours, the toolbar band on top. */\r\n[mono-rte-mount][mono-fullscreen] .sun-editor,\r\n[mono-rte-mount] .sun-editor[style*=\"position: fixed\"] {\r\n  --_se-main-background: var(--mono-rich-text-editor-fullscreen-bg, var(--background));\r\n  --_mono-rte-toolbar-bg: var(--mono-rich-text-editor-toolbar-bg, color-mix(in oklab, var(--muted) 60%, var(--mono-rich-text-editor-fullscreen-bg, var(--background))));\r\n  background: var(--mono-rich-text-editor-fullscreen-bg, var(--background));\r\n  color: var(--_mono-rte-text);\r\n}\r\n\r\n/* code view: the page's mono face on the editing surface, the line column muted */\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-code-viewer,\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {\r\n  font-family: var(--font-mono, ui-monospace, monospace);\r\n  font-size: var(--mono-text-sm);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-rich-text-editor]) [mono-rte-field] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\rich-text-editor\rich-text-editor.css?raw.js
+var rich_text_editor_css_raw_default = "/* =========================================================================\r\n   mono-rich-text-editor — a mono form field whose input is a SunEditor v3\r\n   instance. An EXTENSION: Basecoat has no editor, so the CHROME is the ported\r\n   textarea's `.field` (basecoat-css@1.0.2, vega style) — label, frame, message\r\n   — and the EDITOR is SunEditor's own DOM, styled by ITS stylesheet\r\n   (`suneditor/css/editor`, loaded by the element at runtime) and themed from\r\n   here by remapping its `--se-*` tokens onto the Basecoat tokens.\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-rich-text-editor size=\"sm\" color=\"danger\" label=\"Body\" helper-text=\"…\">\r\n     <div mono-rich-text-editor mono-size=\"sm\" mono-color=\"danger\">\r\n       <label mono-rte-label>Body</label>\r\n       <div mono-rte-field><div mono-rte-mount>…SunEditor…</div></div>\r\n       <div mono-rte-footer><div mono-rte-message-wrap><div mono-rte-message=\"helper\">…</div></div></div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-color])` = primary, `:not([mono-variant])` = outlined). The element\r\n   renders these on its root (both builds) plus the STATES `mono-disabled` /\r\n   `mono-readonly` / `mono-required` / `mono-loading` / `mono-unavailable` /\r\n   `mono-has-value` and `mono-validation-state=\"valid|invalid|warning\"`. The\r\n   old classes (`.mono-rich-text-editor.md.primary.outlined`) are still emitted\r\n   as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   THE PARTS ARE FAMILY-UNIQUE (`mono-rte-*`): the frame holds SunEditor's whole\r\n   DOM, and a consumer's content may carry anything.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-rich-text-editor]                       ≡ .field (flex w-full flex-col gap-3)\r\n     [mono-rich-text-editor] > [mono-rte-label]    ≡ .field > label / .label\r\n     [mono-rte-field]                              ≡ .textarea's box (rounded-md border-input bg-transparent shadow-xs,\r\n                                                     focus-within: border-ring ring-3 ring-ring/50) — the editor sits inside\r\n     [mono-rte-mount] .sun-editor .se-toolbar      ≡ EXTENSION (a muted band under the frame's top edge)\r\n     [mono-rte-footer] > [mono-rte-message-wrap] > [mono-rte-message=\"…\"] ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ aria-invalid:border-destructive aria-invalid:ring-destructive/20\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the same treatment in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (the textarea's font ladder; icons step with it)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma / mira / rhea's textarea)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: the bottom edge only, no ring)\r\n     [mono-rte-unavailable]                        ≡ EXTENSION (the peer-missing notice)\r\n     .se-tooltip-text (SunEditor's)                ≡ [data-tooltip]::before (bg-foreground text-background rounded-md px-3 py-1.5 text-xs)\r\n\r\n   FLAVORS: the frame IS the textarea's box, so every metric resolves\r\n   `--mono-rich-text-editor-<k>` → `--mono-textarea-<k>` → the base through the\r\n   SAME chains textarea.css uses — a flavour that retunes the textarea retunes\r\n   this frame, and no flavour file carries an editor entry. SunEditor's own\r\n   popovers (dropdowns, the modal layer it parks on <body>) take the select\r\n   panel's popover chain (`--mono-select-dropdown-*`), like every other popover.\r\n\r\n   The editor DOM is LIGHT DOM in both builds (see `rich-text-editor-core.ts`),\r\n   so the `--se-*` remap is declared on the frame and inherited by the mount —\r\n   through a `<slot>` in the shadow build, which custom properties cross — and\r\n   DELIVERED on `.sun-editor` from the PAGE sheet (the shadow sheet cannot reach\r\n   a slotted descendant). Nothing below reaches into SunEditor's selectors except\r\n   to flatten the frame it paints around itself, which the mono frame replaces.\r\n   ========================================================================= */\r\n\r\nmono-rich-text-editor {\r\n  display: block;\r\n}\r\n\r\n/* The token block — on the element root AND on SunEditor's carrier (the layer it\r\n   parks on <body> for its dropdown lists, dialogs and alerts), which is outside\r\n   every frame and can inherit nothing from it. The element's own props (`color`,\r\n   `size`) cannot reach the carrier either: it takes the defaults. */\r\n[mono-rich-text-editor],\r\n.sun-editor.sun-editor-carrier-wrapper {\r\n  /* ── palette: each slot is a public knob over the textarea's, over a Basecoat token ── */\r\n  --_mono-rte-text: var(--mono-rich-text-editor-text, var(--mono-textarea-text, var(--foreground)));\r\n  --_mono-rte-placeholder: var(--mono-rich-text-editor-placeholder, var(--mono-textarea-placeholder, var(--muted-foreground)));\r\n  --_mono-rte-muted: var(--mono-rich-text-editor-muted, var(--mono-textarea-muted, var(--muted-foreground)));\r\n  --_mono-rte-primary: var(--mono-rich-text-editor-primary, var(--mono-textarea-primary, var(--ring)));\r\n  --_mono-rte-secondary: var(--mono-rich-text-editor-secondary, var(--mono-textarea-secondary, var(--muted-foreground)));\r\n  --_mono-rte-success: var(--mono-rich-text-editor-success, var(--mono-textarea-success, var(--success)));\r\n  --_mono-rte-danger: var(--mono-rich-text-editor-danger, var(--mono-textarea-danger, var(--destructive)));\r\n  --_mono-rte-warning: var(--mono-rich-text-editor-warning, var(--mono-textarea-warning, var(--warning)));\r\n  --_mono-rte-info: var(--mono-rich-text-editor-info, var(--mono-textarea-info, var(--info)));\r\n  --_mono-rte-teal: var(--mono-rich-text-editor-teal, var(--mono-textarea-teal, var(--teal)));\r\n  --_mono-rte-purple: var(--mono-rich-text-editor-purple, var(--mono-textarea-purple, var(--purple)));\r\n  --_mono-rte-neutral: var(--mono-rich-text-editor-neutral, var(--mono-textarea-neutral, var(--neutral)));\r\n  --_mono-rte-dark: var(--mono-rich-text-editor-dark, var(--mono-textarea-dark, var(--dark)));\r\n  --_mono-rte-valid: var(--mono-rich-text-editor-valid, var(--mono-textarea-valid, var(--success)));\r\n  --_mono-rte-invalid: var(--mono-rich-text-editor-invalid, var(--mono-textarea-invalid, var(--destructive)));\r\n\r\n  /* ── the painted result — three tiers, base = vega's .textarea ─────────── */\r\n  --_mono-rte-ring-color: var(--mono-rich-text-editor-ring-color, var(--mono-rich-text-editor-focus-color, var(--_mono-rte-ring-color-preset, var(--_mono-rte-primary))));\r\n  --_mono-rte-ring-width: var(--mono-rich-text-editor-ring-width, var(--mono-textarea-ring-width, var(--_mono-rte-ring-width-preset, var(--mono-ring-width))));\r\n  --_mono-rte-ring-alpha: var(--mono-rich-text-editor-ring-alpha, var(--mono-textarea-ring-alpha, var(--mono-ring-alpha)));\r\n  --_mono-rte-border-color: var(--mono-rich-text-editor-rest-border, var(--mono-rich-text-editor-border-color, var(--mono-rich-text-editor-border, var(--mono-textarea-rest-border, var(--mono-textarea-border-color, var(--_mono-rte-border-color-preset, var(--input)))))));\r\n  --_mono-rte-side-border-color: var(--_mono-rte-side-border-color-preset, var(--_mono-rte-border-color));\r\n  --_mono-rte-bg: var(--mono-rich-text-editor-bg, var(--mono-rich-text-editor-surface, var(--mono-textarea-bg, var(--mono-textarea-surface, var(--_mono-rte-bg-preset, var(--mono-mode-surface))))));\r\n  --_mono-rte-shadow: var(--mono-rich-text-editor-shadow, var(--mono-textarea-shadow, var(--_mono-rte-shadow-preset, var(--mono-shadow-xs))));\r\n  --_mono-rte-border-width: var(--mono-rich-text-editor-border-width, var(--mono-textarea-border-width, var(--mono-border-width)));\r\n  --_mono-rte-radius: var(--mono-rich-text-editor-radius, var(--mono-textarea-radius, var(--_mono-rte-radius-preset, var(--mono-radius-md))));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-rich-text-editor>` that names no size renders like size=\"md\" ── */\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-md, var(--mono-textarea-font-md, var(--mono-text-sm))));\r\n  --_mono-rte-icon-size: var(--mono-rich-text-editor-icon-size, var(--_mono-rte-icon-size-preset, 18px));\r\n  --_mono-rte-font-family: var(--mono-rich-text-editor-font-family, inherit);\r\n  --_mono-rte-min-height: var(--mono-rich-text-editor-min-height, 10rem);\r\n  /* EXTENSION — the toolbar band: a muted wash under the frame's top edge */\r\n  --_mono-rte-toolbar-bg: var(--mono-rich-text-editor-toolbar-bg, color-mix(in oklab, var(--muted) 60%, var(--_mono-rte-bg)));\r\n\r\n  /* ── SunEditor's popovers (dropdowns, dialogs) are the select panel's popover ── */\r\n  --_mono-rte-popover-bg: var(--mono-rich-text-editor-popover-bg, var(--mono-select-dropdown-bg, var(--popover)));\r\n  --_mono-rte-popover-color: var(--mono-rich-text-editor-popover-color, var(--mono-select-dropdown-color, var(--popover-foreground)));\r\n  --_mono-rte-popover-radius: var(--mono-rich-text-editor-popover-radius, var(--mono-select-dropdown-radius, var(--mono-radius-md)));\r\n  --_mono-rte-popover-shadow: var(--mono-rich-text-editor-popover-shadow, var(--mono-select-dropdown-shadow, var(--mono-shadow-md)));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — bg-foreground text-background rounded-md px-3 py-1.5 text-xs\r\n     SunEditor's toolbar tooltips; the corner is the style's shared tooltip token */\r\n  --_mono-rte-tooltip-bg: var(--mono-rich-text-editor-tooltip-bg, var(--mono-tooltip-bg, var(--foreground)));\r\n  --_mono-rte-tooltip-color: var(--mono-rich-text-editor-tooltip-color, var(--mono-tooltip-color, var(--background)));\r\n  --_mono-rte-tooltip-radius: var(--mono-rich-text-editor-tooltip-radius, var(--mono-tooltip-radius, var(--mono-radius-md)));\r\n\r\n  /* ── SunEditor's tokens, remapped onto the theme ─────────────────────────\r\n     Declared on the FRAME'S ancestor so the light-DOM mount inherits them in\r\n     both builds. `.sun-editor` re-declares every one of these on itself with\r\n     its defaults, so each is delivered again on `.sun-editor` below — this\r\n     block is what a consumer sees and overrides; that one is the delivery. */\r\n  --_se-main-color: var(--_mono-rte-text);\r\n  --_se-main-color-lighter: var(--_mono-rte-muted);\r\n  --_se-main-background: var(--_mono-rte-bg);\r\n  --_se-main-border: var(--border);\r\n  --_se-main-divider: var(--border);\r\n  --_se-main-outline: var(--_mono-rte-ring-color);\r\n  /* the accent: links and the focus outline */\r\n  --_se-active: var(--_mono-rte-ring-color);\r\n  --_se-active-dark: color-mix(in oklab, var(--_mono-rte-ring-color) 85%, var(--foreground));\r\n  /* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-accent hover:text-accent-foreground\r\n     a pressed toolbar button and a checked list item are the toggle-on state:\r\n     the accent WASH with the foreground ink, never a primary tint */\r\n  --_se-active-ink: var(--mono-rich-text-editor-active-color, var(--accent-foreground, var(--_mono-rte-text)));\r\n  --_se-active-light: var(--mono-rich-text-editor-active-bg, var(--accent, var(--muted)));\r\n  --_se-active-light2: var(--mono-mode-surface-hover);\r\n  --_se-hover: var(--_mono-rte-text);\r\n  --_se-hover-light: var(--mono-mode-ghost-hover);\r\n  --_se-hover-light2: var(--mono-mode-surface-hover);\r\n  --_se-error: var(--_mono-rte-danger);\r\n  --_se-success: var(--_mono-rte-success);\r\n  --_se-placeholder: var(--_mono-rte-placeholder);\r\n  --_se-radius: var(--mono-radius-sm);\r\n  --_se-radius-lg: var(--_mono-rte-popover-radius);\r\n  --_se-shadow-layer: var(--_mono-rte-popover-shadow);\r\n  --_se-font-family: var(--_mono-rte-font-family);\r\n  --_se-font-size: var(--_mono-rte-font-size);\r\n  --_se-icon-size: var(--_mono-rte-icon-size);\r\n  --_se-min-height: var(--_mono-rte-min-height);\r\n\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3 */\r\n[mono-rich-text-editor] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--mono-rich-text-editor-gap, var(--mono-textarea-gap, calc(var(--mono-spacing) * 3)));\r\n  width: 100%;\r\n  min-width: 0;\r\n  color: var(--_mono-rte-text);\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-rich-text-editor],\r\n:where([mono-rich-text-editor]) > *,\r\n:where([mono-rich-text-editor]) > * > *::before,\r\n:where([mono-rich-text-editor]) > * > *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* the shadow build renders every region and marks the empty ones; the light\r\n   build renders only what exists */\r\n[mono-rich-text-editor] :is([mono-rte-label], [mono-rte-message], [mono-rte-footer])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n[mono-rich-text-editor] > [mono-rte-message-outlet]:not(:has([mono-rte-footer]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: the textarea's font ladder; the icons step with it\r\n   ========================================= */\r\n\r\n[mono-rich-text-editor][mono-size=\"xs\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-xs, var(--mono-textarea-font-xs, var(--mono-text-xs))));\r\n  --_mono-rte-icon-size-preset: 14px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"sm\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-sm, var(--mono-textarea-font-sm, var(--mono-textarea-font-md, var(--mono-text-sm)))));\r\n  --_mono-rte-icon-size-preset: 16px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"lg\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-lg, var(--mono-textarea-font-lg, var(--mono-textarea-font-md, var(--mono-text-sm)))));\r\n  --_mono-rte-icon-size-preset: 20px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"xl\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-xl, var(--mono-textarea-font-xl, var(--mono-text-base))));\r\n  --_mono-rte-icon-size-preset: 22px;\r\n}\r\n[mono-rich-text-editor][mono-size=\"xxl\"] {\r\n  --_mono-rte-font-size: var(--mono-rich-text-editor-font-size, var(--mono-rich-text-editor-font-xxl, var(--mono-textarea-font-xxl, var(--mono-text-base))));\r\n  --_mono-rte-icon-size-preset: 24px;\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the `color` prop is the FOCUS colour, which is also the\r\n   editor's active state and links\r\n   ========================================= */\r\n\r\n[mono-rich-text-editor][mono-color=\"secondary\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-secondary);\r\n}\r\n[mono-rich-text-editor][mono-color=\"success\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-success);\r\n}\r\n[mono-rich-text-editor][mono-color=\"danger\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-danger);\r\n}\r\n[mono-rich-text-editor][mono-color=\"warning\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-warning);\r\n}\r\n[mono-rich-text-editor][mono-color=\"info\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-info);\r\n}\r\n[mono-rich-text-editor][mono-color=\"teal\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-teal);\r\n}\r\n[mono-rich-text-editor][mono-color=\"purple\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-purple);\r\n}\r\n[mono-rich-text-editor][mono-color=\"neutral\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-neutral);\r\n}\r\n[mono-rich-text-editor][mono-color=\"dark\"] {\r\n  --_mono-rte-ring-color-preset: var(--_mono-rte-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label\r\n   — text-sm leading-snug font-medium */\r\n:where([mono-rich-text-editor]) > [mono-rte-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  font-size: var(--mono-rich-text-editor-label-font-size, var(--mono-textarea-label-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-rich-text-editor-label-line-height, var(--mono-textarea-label-line-height, var(--mono-leading-snug)));\r\n  font-weight: var(--mono-rich-text-editor-label-font-weight, var(--mono-textarea-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\r\n  color: var(--mono-rich-text-editor-label-color, var(--mono-textarea-label-color, var(--_mono-rte-text)));\r\n}\r\n\r\n[mono-rich-text-editor][mono-validation-state=\"invalid\"] > [mono-rte-label] {\r\n  color: var(--mono-rich-text-editor-label-color, var(--mono-textarea-label-color, var(--_mono-rte-invalid)));\r\n}\r\n\r\n:where([mono-rich-text-editor]) [mono-rte-required-mark] {\r\n  color: var(--mono-rich-text-editor-required-color, var(--mono-textarea-required-color, var(--destructive)));\r\n}\r\n\r\n[mono-rich-text-editor][mono-disabled] > [mono-rte-label] {\r\n  opacity: 0.5;\r\n}\r\n\r\n/* =========================================\r\n   The frame — the textarea's box, holding the editor\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea\r\n   — rounded-md border border-input bg-transparent shadow-xs\r\n   transition-[color,box-shadow] (dark:bg-input/30 via --mono-mode-surface);\r\n   mono: no padding — the editor's toolbar and page fill the box edge to edge */\r\n:where([mono-rich-text-editor]) [mono-rte-field] {\r\n  --_mono-rte-ring: 0 0 #0000;\r\n  position: relative;\r\n  width: 100%;\r\n  min-width: 0;\r\n  border: var(--_mono-rte-border-width) solid var(--_mono-rte-side-border-color);\r\n  border-bottom-color: var(--_mono-rte-border-color);\r\n  border-radius: var(--_mono-rte-radius);\r\n  background-color: var(--_mono-rte-bg);\r\n  color: var(--_mono-rte-text);\r\n  box-shadow: var(--_mono-rte-ring), var(--_mono-rte-shadow);\r\n  /* the editor paints its own corners; clip so the toolbar's top corners follow\r\n     the frame's radius */\r\n  overflow: hidden;\r\n  transition-property: color, background-color, border-color, box-shadow, opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n/* Before the editor loads (and on the server) the frame is a quiet box the\r\n   size of the editing area, so the form does not jump when it lands. */\r\n[mono-rich-text-editor][mono-loading] [mono-rte-field] {\r\n  min-height: calc(var(--_mono-rte-min-height) + 2.75rem);\r\n}\r\n[mono-rich-text-editor][mono-unavailable] [mono-rte-field] {\r\n  display: none;\r\n}\r\n\r\n/* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n   the focus is on SunEditor's contenteditable inside the frame */\r\n:where([mono-rich-text-editor]) [mono-rte-field]:focus-within {\r\n  border-color: var(--_mono-rte-side-border-color);\r\n  border-bottom-color: var(--_mono-rte-ring-color);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) color-mix(in oklab, var(--_mono-rte-ring-color) var(--_mono-rte-ring-alpha), transparent);\r\n}\r\n[mono-rich-text-editor]:is(:not([mono-variant]), [mono-variant=\"outlined\"], [mono-variant=\"filled\"]) [mono-rte-field]:focus-within {\r\n  border-color: var(--_mono-rte-ring-color);\r\n}\r\n\r\n/* aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20\r\n   (dark: /50 and /40, carried by the mode tokens) */\r\n[mono-rich-text-editor][mono-validation-state=\"invalid\"] [mono-rte-field] {\r\n  --_mono-rte-border-color: var(--mono-mode-invalid-border);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — the same treatment in the success / warning roles */\r\n[mono-rich-text-editor][mono-validation-state=\"valid\"] [mono-rte-field] {\r\n  --_mono-rte-border-color: color-mix(in oklab, var(--_mono-rte-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) color-mix(in oklab, var(--_mono-rte-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-rich-text-editor][mono-validation-state=\"warning\"] [mono-rte-field] {\r\n  --_mono-rte-border-color: color-mix(in oklab, var(--_mono-rte-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-rte-ring: 0 0 0 var(--_mono-rte-ring-width) color-mix(in oklab, var(--_mono-rte-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* disabled:cursor-not-allowed disabled:opacity-50 */\r\n[mono-rich-text-editor][mono-disabled] [mono-rte-field] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  background-color: var(--mono-rich-text-editor-disabled-bg, var(--mono-textarea-disabled-bg, var(--_mono-rte-bg)));\r\n}\r\n\r\n/* EXTENSION — readonly is legible, not dimmed: a muted surface */\r\n[mono-rich-text-editor][mono-readonly]:not([mono-disabled]) [mono-rte-field] {\r\n  --_se-main-background: var(--mono-rich-text-editor-readonly-bg, var(--mono-textarea-readonly-bg, var(--muted)));\r\n  background-color: var(--mono-rich-text-editor-readonly-bg, var(--mono-textarea-readonly-bg, var(--muted)));\r\n}\r\n\r\n/* =========================================\r\n   Variants — EXTENSION: the two other looks Basecoat's styles ship, through\r\n   the textarea's own knobs so a flavour that restyles the textarea restyles this\r\n   ========================================= */\r\n\r\n[mono-rich-text-editor]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-rte-bg-preset: var(--mono-rich-text-editor-outline-bg, var(--mono-textarea-outline-bg));\r\n  --_mono-rte-border-color-preset: var(--mono-rich-text-editor-outline-border-color, var(--mono-textarea-outline-border-color));\r\n  --_mono-rte-side-border-color-preset: var(--mono-rich-text-editor-outline-side-border-color, var(--mono-textarea-outline-side-border-color));\r\n  --_mono-rte-shadow-preset: var(--mono-rich-text-editor-outline-shadow, var(--mono-textarea-outline-shadow, var(--mono-shadow-xs)));\r\n  --_mono-rte-radius-preset: var(--mono-rich-text-editor-outline-radius, var(--mono-textarea-outline-radius));\r\n  --_mono-rte-ring-width-preset: var(--mono-rich-text-editor-outline-ring-width, var(--mono-textarea-outline-ring-width));\r\n}\r\n\r\n/* `filled` ≡ luma / mira / rhea's textarea: a tinted surface, no border, no shadow */\r\n[mono-rich-text-editor][mono-variant=\"filled\"] {\r\n  --_mono-rte-bg-preset: var(--mono-rich-text-editor-filled-bg, var(--mono-textarea-filled-bg, color-mix(in oklab, var(--input) 50%, transparent)));\r\n  --_mono-rte-border-color-preset: transparent;\r\n  --_mono-rte-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* `underlined` ≡ sera's: square, the bottom edge only, and no ring */\r\n[mono-rich-text-editor][mono-variant=\"underlined\"] {\r\n  --_mono-rte-radius-preset: 0;\r\n  --_mono-rte-bg-preset: transparent;\r\n  --_mono-rte-side-border-color-preset: transparent;\r\n  --_mono-rte-shadow-preset: 0 0 #0000;\r\n  --_mono-rte-ring-width-preset: 0px;\r\n}\r\n[mono-rich-text-editor][mono-variant=\"underlined\"] [mono-rte-field] {\r\n  --_se-main-background: transparent;\r\n  --_mono-rte-toolbar-bg: transparent;\r\n}\r\n\r\n/* =========================================\r\n   Footer — the message row\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n:where([mono-rich-text-editor]) [mono-rte-footer] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n:where([mono-rich-text-editor]) [mono-rte-message-wrap] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n}\r\n\r\n:where([mono-rich-text-editor]) [mono-rte-message] {\r\n  font-size: var(--mono-rich-text-editor-message-font-size, var(--mono-textarea-message-font-size, var(--mono-text-sm)));\r\n  line-height: var(--mono-rich-text-editor-message-line-height, var(--mono-textarea-message-line-height, var(--mono-leading-normal)));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-rte-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n:where([mono-rich-text-editor]) [mono-rte-message=\"invalid\"] {\r\n  color: var(--_mono-rte-invalid);\r\n}\r\n:where([mono-rich-text-editor]) [mono-rte-message=\"valid\"] {\r\n  color: var(--_mono-rte-valid);\r\n}\r\n:where([mono-rich-text-editor]) [mono-rte-message=\"warning\"] {\r\n  color: var(--_mono-rte-warning);\r\n}\r\n\r\n/* EXTENSION — the peer-missing notice: reads like a validation message, never like a crash */\r\n:where([mono-rich-text-editor]) [mono-rte-unavailable] {\r\n  padding: calc(var(--mono-spacing) * 2.5) calc(var(--mono-spacing) * 3);\r\n  border: var(--mono-border-width) dashed var(--_mono-rte-danger);\r\n  border-radius: var(--_mono-rte-radius);\r\n  background: color-mix(in oklab, var(--_mono-rte-danger) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-rte-danger);\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-leading-normal);\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n/* =========================================\r\n   SunEditor inside the frame — from the PAGE sheet (the mount is light DOM)\r\n   ========================================= */\r\n\r\n[mono-rte-mount] {\r\n  display: block;\r\n  width: 100%;\r\n  min-width: 0;\r\n}\r\n\r\n/* Deliver the remap. `.sun-editor` sets every `--se-*` on itself from\r\n   SunEditor's sheet, so the same selector (plus ours for specificity) has to\r\n   set them again — the values, though, come from the frame's `--_se-*` above,\r\n   which the mount inherits. Only the tokens a theme is made of; the rest keep\r\n   SunEditor's defaults. */\r\n[mono-rte-mount] .sun-editor,\r\n[mono-rte-mount] .sun-editor-editable,\r\n.sun-editor.sun-editor-carrier-wrapper {\r\n  --se-main-font-family: var(--_se-font-family);\r\n  --se-content-font-family: var(--_se-font-family);\r\n  --se-main-font-size: var(--_se-font-size);\r\n  --se-btn-font-size: var(--_se-font-size);\r\n  --se-edit-font-size: calc(var(--_se-font-size) * 1.1);\r\n  --se-icon-size: var(--_se-icon-size);\r\n  --se-min-height: var(--_se-min-height);\r\n  --se-border-radius: var(--_se-radius);\r\n  --se-border-radius-lg: var(--_se-radius-lg);\r\n\r\n  --se-main-color: var(--_se-main-color);\r\n  --se-main-color-lighter: var(--_se-main-color-lighter);\r\n  --se-main-font-color: var(--_se-main-color);\r\n  --se-main-background-color: var(--_se-main-background);\r\n  --se-main-border-color: var(--_se-main-border);\r\n  --se-main-divider-color: var(--_se-main-divider);\r\n  --se-main-outline-color: var(--_se-main-outline);\r\n  --se-main-shadow-color: var(--_se-main-divider);\r\n  --se-statusbar-font-color: var(--_se-main-color-lighter);\r\n  --se-dropdown-font-color: var(--_se-main-color);\r\n\r\n  --se-edit-font-color: var(--_se-main-color);\r\n  --se-edit-background-color: var(--_se-main-background);\r\n  --se-edit-anchor: var(--_se-active);\r\n  --se-caret-color: var(--_se-main-color);\r\n  --se-placeholder-color: var(--_se-placeholder);\r\n\r\n  --se-hover-color: var(--_se-hover);\r\n  --se-hover-dark-color: var(--_se-main-border);\r\n  --se-hover-light-color: var(--_se-hover-light);\r\n  --se-hover-light2-color: var(--_se-hover-light2);\r\n  --se-hover-light3-color: var(--_se-hover-light2);\r\n\r\n  /* the accent for outlines and links; the toggle-on state for buttons and\r\n     checked list items (ink = --se-active-dark3/4, wash = --se-active-light*) */\r\n  --se-active-color: var(--_se-active);\r\n  --se-active-hover-color: var(--_se-active-ink);\r\n  --se-active-dark-color: var(--_se-main-border);\r\n  --se-active-dark2-color: var(--_se-active-dark);\r\n  --se-active-dark3-color: var(--_se-active-ink);\r\n  --se-active-dark4-color: var(--_se-main-border);\r\n  --se-active-dark5-color: var(--_se-active-dark);\r\n  --se-active-light-color: var(--_se-active-light);\r\n  --se-active-light2-color: var(--_se-active-light);\r\n  --se-active-light3-color: var(--_se-active-light2);\r\n  --se-active-light4-color: var(--_se-active-light);\r\n  --se-active-light5-color: var(--_se-active-light2);\r\n  --se-active-light6-color: var(--_se-active-light2);\r\n\r\n  --se-error-color: var(--_se-error);\r\n  --se-success-color: var(--_se-success);\r\n\r\n  --se-select-menu-hover-bg: var(--_se-hover-light);\r\n  --se-select-menu-active-bg: var(--_se-active-light);\r\n  --se-modal-background-color: var(--_mono-rte-popover-bg);\r\n  --se-modal-color: var(--_mono-rte-popover-color);\r\n  --se-modal-border-color: var(--_se-main-border);\r\n  --se-modal-anchor-color: var(--_se-active);\r\n  --se-shadow-layer: var(--_se-shadow-layer);\r\n\r\n  /* ── the sub-surfaces SunEditor paints from its own light palette ────────\r\n     code view, the table picker, the floating controllers, the modal chrome,\r\n     the overlay, the editing area's own colours — every one a page token now */\r\n  --se-codeview-font-family: var(--font-mono, ui-monospace, monospace);\r\n  --se-markdown-font-family: var(--font-mono, ui-monospace, monospace);\r\n  --se-code-view-color: var(--_mono-rte-text);\r\n  --se-code-view-background-color: var(--_se-main-background);\r\n  --se-code-view-line-color: var(--_mono-rte-muted);\r\n  --se-code-view-line-background-color: var(--muted);\r\n  --se-markdown-view-color: var(--_mono-rte-text);\r\n  --se-markdown-view-background-color: var(--_se-main-background);\r\n  --se-markdown-view-line-color: var(--_mono-rte-muted);\r\n  --se-markdown-view-line-background-color: var(--muted);\r\n\r\n  --se-table-picker-color: var(--_mono-rte-popover-bg);\r\n  --se-table-picker-border-color: var(--_se-main-border);\r\n  --se-table-picker-highlight-color: color-mix(in oklab, var(--_se-active) var(--mono-mode-tint), var(--_mono-rte-popover-bg));\r\n  --se-table-picker-highlight-border-color: var(--_se-active);\r\n\r\n  --se-controller-background-color: var(--_mono-rte-popover-bg);\r\n  --se-controller-color: var(--_mono-rte-popover-color);\r\n  --se-controller-border-color: var(--_se-main-border);\r\n  --se-shadow-controller: var(--_se-shadow-layer);\r\n  --se-shadow-controller-color: transparent;\r\n  --se-shadow-layer-color: transparent;\r\n  --se-overlay-background-color: var(--mono-mode-backdrop, #000);\r\n\r\n  --se-modal-preview-color: var(--_mono-rte-muted);\r\n  --se-modal-file-input-background-color: var(--muted);\r\n  --se-modal-input-disabled-color: var(--_mono-rte-muted);\r\n  --se-modal-input-disabled-background-color: var(--muted);\r\n  --se-input-btn-border-color: var(--_se-main-border);\r\n  --se-input-btn-disabled-color: var(--_mono-rte-muted);\r\n  --se-main-out-color: var(--_se-main-border);\r\n  --se-hover-dark2-color: var(--_se-main-border);\r\n  --se-hover-dark3-color: var(--_se-main-border);\r\n  --se-loading-color: var(--_se-active);\r\n\r\n  --se-drag-caret-color: var(--_se-active);\r\n  --se-edit-active: var(--_se-active);\r\n  --se-edit-hover: var(--_se-active-light);\r\n  --se-edit-outline: var(--_se-main-border);\r\n  --se-edit-font-pre: var(--_mono-rte-text);\r\n  --se-edit-font-quote: var(--_mono-rte-muted);\r\n  --se-edit-background-pre: var(--muted);\r\n  --se-edit-border-light: var(--_se-main-border);\r\n  --se-edit-border-dark: var(--_se-main-border);\r\n  --se-edit-border-dark-n1: var(--_se-main-border);\r\n  --se-edit-border-dark-n2: var(--_se-main-border);\r\n  --se-edit-border-table: var(--_se-main-border);\r\n  --se-edit-hr-color: var(--_se-main-border);\r\n  --se-edit-hr-on-back: var(--_se-active-light);\r\n  --se-edit-anchor-on-back: color-mix(in oklab, var(--_se-active) var(--mono-mode-tint), transparent);\r\n  --se-edit-anchor-on-font: var(--_se-active);\r\n\r\n  --se-success-dark-color: var(--_se-success);\r\n  --se-success-dark2-color: var(--_se-success);\r\n  --se-success-dark3-color: var(--_se-success);\r\n  --se-success-light-color: color-mix(in oklab, var(--_se-success) var(--mono-mode-tint), transparent);\r\n  --se-success-light2-color: color-mix(in oklab, var(--_se-success) var(--mono-mode-tint), transparent);\r\n  --se-success-light3-color: color-mix(in oklab, var(--_se-success) var(--mono-mode-tint-hover), transparent);\r\n  --se-success-light4-color: var(--_se-success);\r\n  --se-success-light5-color: var(--_se-success);\r\n  --se-error-dark-color: var(--_se-error);\r\n  --se-error-dark2-color: var(--_se-error);\r\n  --se-error-dark3-color: var(--_se-error);\r\n  --se-error-light-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint-hover), transparent);\r\n  --se-error-light2-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n  --se-error-light3-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n  --se-error-light4-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n  --se-error-light5-color: color-mix(in oklab, var(--_se-error) var(--mono-mode-tint), transparent);\r\n}\r\n\r\n/* In the carrier \"main background\" is the LAYER surface — the dropdown lists,\r\n   dialogs and alerts — so it is the popover surface there, not the editing\r\n   surface (which is transparent in light mode: an invisible list). */\r\n.sun-editor.sun-editor-carrier-wrapper {\r\n  --se-main-background-color: var(--_mono-rte-popover-bg);\r\n  --se-main-font-color: var(--_mono-rte-popover-color);\r\n  --se-dropdown-font-color: var(--_mono-rte-popover-color);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'].active, .select:not(select) [role='option']:focus-visible — bg-muted text-foreground\r\n   a checked list item (the current font, size, format …) is a selected option:\r\n   SunEditor only re-inks it, and its ink was the primary tint */\r\n[mono-rte-mount] .sun-editor .se-list-inner li.se-checked > button,\r\n.sun-editor.sun-editor-carrier-wrapper .se-list-inner li.se-checked > button {\r\n  background-color: var(--_se-active-light);\r\n  color: var(--_se-active-ink);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > textarea, .textarea — placeholder:text-muted-foreground\r\n   Every placeholder the editor shows — the Size / Font inputs in the toolbar,\r\n   the empty editing area, a dialog's fields — is the field placeholder: the\r\n   muted ink, OPAQUE. Left alone, a host page's preflight (Tailwind / UnoCSS)\r\n   makes a placeholder 50% translucent currentColor, which over a tinted page\r\n   reads as a colour of its own; and SunEditor inks its empty-area placeholder\r\n   with its OUTLINE token, the accent. */\r\n[mono-rte-mount] .sun-editor input::placeholder,\r\n[mono-rte-mount] .sun-editor textarea::placeholder,\r\n.sun-editor.sun-editor-carrier-wrapper input::placeholder,\r\n.sun-editor.sun-editor-carrier-wrapper textarea::placeholder {\r\n  color: var(--_mono-rte-placeholder);\r\n  opacity: 1;\r\n}\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-placeholder,\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-placeholder-line:before {\r\n  color: var(--_mono-rte-placeholder);\r\n}\r\n\r\n/* The frame replaces SunEditor's own — no double border, no second radius. */\r\n[mono-rte-mount] .sun-editor {\r\n  border: 0;\r\n  border-radius: 0;\r\n  background: transparent;\r\n  width: 100% !important;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs\r\n   SunEditor's toolbar tooltips, painted as Basecoat's tooltip: it drew them in\r\n   `--se-main-font-color` on `--se-main-background-color`, which in dark mode\r\n   is a translucent wash under near-white text. (0,5,0) over SunEditor's (0,4,0). */\r\n[mono-rte-mount] .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text,\r\n.sun-editor.sun-editor-carrier-wrapper .se-tooltip .se-tooltip-inner .se-tooltip-text {\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-rte-tooltip-radius);\r\n  background-color: var(--_mono-rte-tooltip-bg);\r\n  color: var(--_mono-rte-tooltip-color);\r\n  /* the page font, handed over by the element: a tooltip inside the font list\r\n     would otherwise inherit the item's own face */\r\n  font-family: var(--_mono-rte-page-font, inherit);\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — the dropdown items (font family,\r\n   font size, the colour palettes …) carried native `title` tooltips, which no theme can\r\n   paint; the element rewrites them into `data-tooltip`, drawn here the way Basecoat\r\n   draws its own: a pseudo-element with the attribute as content, above the item\r\n   (the anchor is `position: relative`, as in Basecoat's compiled `[data-tooltip]`) */\r\n[mono-rte-mount] .sun-editor [data-tooltip],\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip] {\r\n  position: relative;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip]::before — bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs */\r\n[mono-rte-mount] .sun-editor [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip]::after {\r\n  content: attr(data-tooltip);\r\n  position: absolute;\r\n  left: 50%;\r\n  bottom: calc(100% + calc(var(--mono-spacing) * 1.5));\r\n  z-index: 60;\r\n  width: max-content;\r\n  max-width: 20rem;\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-rte-tooltip-radius);\r\n  background-color: var(--_mono-rte-tooltip-bg);\r\n  color: var(--_mono-rte-tooltip-color);\r\n  font-family: var(--_mono-rte-page-font, inherit);\r\n  font-size: var(--mono-text-xs);\r\n  line-height: var(--mono-text-xs--lh);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  font-style: normal;\r\n  text-indent: 0;\r\n  text-transform: none;\r\n  letter-spacing: normal;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transform: translateX(-50%) scale(0.95);\r\n  transform-origin: bottom center;\r\n  transition-property: opacity, transform, visibility;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast, 100ms);\r\n}\r\n\r\n[mono-rte-mount] .sun-editor [data-tooltip]:hover::after,\r\n[mono-rte-mount] .sun-editor [data-tooltip]:focus-visible::after,\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip]:hover::after,\r\n.sun-editor.sun-editor-carrier-wrapper [data-tooltip]:focus-visible::after {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  transform: translateX(-50%) scale(1);\r\n}\r\n\r\n/* a dropdown layer clips its own overflow, so a tooltip above the FIRST row of a\r\n   palette would be cut off at the layer edge: that row opens its tooltips below */\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet:first-child [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet:first-child [data-tooltip]::after {\r\n  bottom: auto;\r\n  top: calc(100% + calc(var(--mono-spacing) * 1.5));\r\n  transform-origin: top center;\r\n}\r\n\r\n/* SunEditor shrinks a hovered / active swatch with `transform: scale(.8)`. A\r\n   transform makes the button a stacking context, so its tooltip — a child —\r\n   can never rise above the swatches painted after it (the next row covers a\r\n   first-row tooltip) and shrinks with it. The same \"pressed\" read as an inset\r\n   ring of the layer surface instead; the hovered swatch lifts above its row. */\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet button:hover,\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet button.active,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet button:hover,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet button.active {\r\n  transform: none;\r\n  box-shadow: inset 0 0 0 3px var(--_mono-rte-popover-bg, var(--popover));\r\n}\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet button:hover,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet button:hover {\r\n  z-index: 1;\r\n}\r\n\r\n/* …and the same clip sideways: a centred tooltip on the first / last column of\r\n   a palette row runs past the layer's edge, so those hang from the item's own\r\n   outer edge instead */\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:first-child [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:first-child [data-tooltip]::after {\r\n  left: 0;\r\n  transform: scale(0.95);\r\n  transform-origin: left center;\r\n}\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:last-child [data-tooltip]::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:last-child [data-tooltip]::after {\r\n  left: auto;\r\n  right: 0;\r\n  transform: scale(0.95);\r\n  transform-origin: right center;\r\n}\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:hover::after,\r\n[mono-rte-mount] .sun-editor .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:focus-visible::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:hover::after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-dropdown .se-color-pallet li:is(:first-child, :last-child) [data-tooltip]:focus-visible::after {\r\n  transform: scale(1);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-tooltip][data-arrow]::after — bg-foreground */\r\n[mono-rte-mount] .sun-editor .se-tooltip .se-tooltip-inner .se-tooltip-text:after,\r\n.sun-editor.sun-editor-carrier-wrapper .se-tooltip .se-tooltip-inner .se-tooltip-text:after {\r\n  border-color: transparent transparent var(--_mono-rte-tooltip-bg) transparent;\r\n}\r\n[mono-rte-mount] .sun-editor .se-toolbar.se-toolbar-bottom .se-tooltip .se-tooltip-inner .se-tooltip-text:after {\r\n  border-color: var(--_mono-rte-tooltip-bg) transparent transparent transparent;\r\n}\r\n\r\n/* EXTENSION — the toolbar band, on a hairline */\r\n[mono-rte-mount] .sun-editor .se-toolbar {\r\n  background: var(--_mono-rte-toolbar-bg);\r\n  box-shadow: inset 0 calc(var(--mono-border-width) * -1) 0 0 var(--border);\r\n}\r\n\r\n/* The carrier — modals, alerts and the dropdown lists SunEditor parks on <body>\r\n   — is in the token block and the delivery rule above: it paints exactly like\r\n   the frame it belongs to, at the element's default `color` and `size`. */\r\n\r\n/* =========================================\r\n   SunEditor's dialogs — the modal SunEditor parks in its carrier: its chrome\r\n   is the page's dialog, its fields the ported input, its buttons the ported\r\n   button, its tabs the ported tabs. Selectors mirror SunEditor's own chains\r\n   (prefixed by the scope) so they out-weigh them by exactly the scope.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dialog > * — bg-popover text-popover-foreground */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-content {\r\n  border: var(--mono-border-width) solid var(--_se-main-border);\r\n  border-radius: var(--_mono-rte-popover-radius);\r\n  box-shadow: var(--_mono-rte-popover-shadow);\r\n  color: var(--_mono-rte-popover-color);\r\n}\r\n\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-header .se-modal-title {\r\n  font-size: var(--mono-text-base);\r\n  font-weight: var(--mono-font-weight-semibold);\r\n  color: var(--_mono-rte-popover-color);\r\n}\r\n\r\n/* the close button: a ghost button, muted at rest */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-header .se-close-btn {\r\n  color: var(--_mono-rte-muted);\r\n  text-shadow: none;\r\n  border-radius: var(--mono-radius-sm);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .tabs > [role='tablist'] — the modal's Image / Link tabs:\r\n   a text tab with the accent under the active one, not a boxed strip */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs {\r\n  /* SunEditor floats the tab buttons inside a 25px-high strip; as a flex row the\r\n     strip is as tall as the tabs and stays in flow above the form */\r\n  display: flex;\r\n  align-items: stretch;\r\n  gap: calc(var(--mono-spacing) * 1);\r\n  height: auto;\r\n  margin-bottom: calc(var(--mono-spacing) * 3);\r\n  border-bottom: var(--mono-border-width) solid var(--_se-main-border);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs button {\r\n  background-color: transparent;\r\n  border: 0;\r\n  border-bottom: 2px solid transparent;\r\n  margin-bottom: calc(var(--mono-border-width) * -1);\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  color: var(--_mono-rte-muted);\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  transition-property: color, border-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs button:hover {\r\n  background-color: transparent;\r\n  color: var(--_mono-rte-text);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-tabs button.active {\r\n  background-color: transparent;\r\n  border-bottom-color: var(--_se-active);\r\n  color: var(--_mono-rte-text);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .input-group — rounded-md border border-input\r\n   the modal's text fields and selects are the ported input: its surface, edge,\r\n   corner and ring, through the input's own public knobs */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-input-form,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-input-select,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form select,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-controller input[type='text'],\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-controller select {\r\n  background-color: var(--mono-input-bg, var(--mono-input-surface, var(--mono-input-outline-bg, var(--mono-mode-surface))));\r\n  border: var(--mono-border-width) solid var(--mono-input-rest-border, var(--mono-input-border-color, var(--mono-input-outline-border-color, var(--input))));\r\n  border-radius: var(--mono-input-radius-sm, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n  color: var(--_mono-rte-text);\r\n  box-shadow: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\r\n  font-size: var(--mono-text-sm);\r\n  outline: none;\r\n  transition-property: border-color, box-shadow;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-input-form:focus,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form select:focus {\r\n  border-color: var(--_se-active);\r\n  box-shadow: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--_se-active) var(--mono-ring-alpha), transparent);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner input:disabled {\r\n  opacity: 0.5;\r\n}\r\n\r\n/* the file drop area: a dashed muted panel */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-flex-input-wrapper > .se-input-form-abs {\r\n  border-radius: var(--mono-input-radius-sm, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn — Submit is the primary button */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-content .se-btn-primary {\r\n  background-color: var(--mono-button-bg, var(--primary));\r\n  border: var(--mono-border-width) solid transparent;\r\n  border-radius: var(--mono-button-sm-radius, var(--mono-button-radius, var(--mono-radius-md)));\r\n  color: var(--mono-button-color, var(--primary-foreground));\r\n  font-size: var(--mono-text-sm);\r\n  font-weight: var(--mono-font-weight-medium);\r\n  box-shadow: var(--mono-shadow-xs);\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary:hover,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary:focus {\r\n  background-color: color-mix(in oklab, var(--mono-button-bg, var(--primary)) 90%, transparent);\r\n  border-color: transparent;\r\n  color: var(--mono-button-color, var(--primary-foreground));\r\n}\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-btn-primary:disabled {\r\n  opacity: 0.5;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline'] — the modal's secondary buttons */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-btn-revert,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-modal-form-files .se-modal-files-edge-button,\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-modal-area .se-modal-inner .se-modal-form .se-modal-flex-form .se-btn {\r\n  border: var(--mono-border-width) solid var(--input);\r\n  border-radius: var(--mono-button-sm-radius, var(--mono-button-radius, var(--mono-radius-md)));\r\n  background-color: var(--background);\r\n  color: var(--_mono-rte-text);\r\n  opacity: 1;\r\n}\r\n\r\n/* the native checkboxes and radios take the accent */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) input[type='checkbox'],\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) input[type='radio'] {\r\n  accent-color: var(--_se-active);\r\n}\r\n\r\n/* the floating controllers (link / image / table) are popovers */\r\n:is([mono-rte-mount] .sun-editor, .sun-editor.sun-editor-carrier-wrapper) .se-controller {\r\n  border-radius: var(--_mono-rte-popover-radius);\r\n}\r\n\r\n/* Full screen — SunEditor fixes its root over the page (inline style, no class of\r\n   its own; the element marks the mount when SunEditor reports the toggle, and the\r\n   inline style is the fallback). The frame stays behind, so the editor takes the\r\n   PAGE surface itself: opaque, in the mode's colours, the toolbar band on top. */\r\n[mono-rte-mount][mono-fullscreen] .sun-editor,\r\n[mono-rte-mount] .sun-editor[style*=\"position: fixed\"] {\r\n  --_se-main-background: var(--mono-rich-text-editor-fullscreen-bg, var(--background));\r\n  --_mono-rte-toolbar-bg: var(--mono-rich-text-editor-toolbar-bg, color-mix(in oklab, var(--muted) 60%, var(--mono-rich-text-editor-fullscreen-bg, var(--background))));\r\n  background: var(--mono-rich-text-editor-fullscreen-bg, var(--background));\r\n  color: var(--_mono-rte-text);\r\n}\r\n\r\n/* code view: the page's mono face on the editing surface, the line column muted */\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-code-viewer,\r\n[mono-rte-mount] .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {\r\n  font-family: var(--font-mono, ui-monospace, monospace);\r\n  font-size: var(--mono-text-sm);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-rich-text-editor]) [mono-rte-field] {\r\n    transition: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/rich-text-editor/mono-rich-text-editor.shadow.ts
-var SHADOW_EXTRA_CSS = `
+const SHADOW_EXTRA_CSS = `
 [mono-rte-label][mono-empty],
 [mono-rte-message][mono-empty],
 [mono-rte-footer][mono-empty] {
   display: none;
 }
 `;
-var MonoRichTextEditorShadow = class MonoRichTextEditorShadow extends withShadowUtilityStyles(MonoRichTextEditorCore(LitElement)) {
+let MonoRichTextEditorShadow = class MonoRichTextEditorShadow extends withShadowUtilityStyles(MonoRichTextEditorCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(rich_text_editor_default, {
+		this.styles = [unsafeCSS(toShadowCss(rich_text_editor_css_raw_default, {
 			host: "mono-rich-text-editor",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -1340,5 +1345,6 @@ var MonoRichTextEditorShadow = class MonoRichTextEditorShadow extends withShadow
 	}
 };
 MonoRichTextEditorShadow = __decorate([customElement("mono-shadow-rich-text-editor")], MonoRichTextEditorShadow);
+
 //#endregion
-export { AUTO_EXCLUDED_PLUGINS, MonoRichTextEditorCore, MonoRichTextEditorShadow, SUNEDITOR_CORE_BUTTONS, SUNEDITOR_LANG_CODES, TOOLBAR_BASIC, TOOLBAR_DEFAULT, TOOLBAR_FULL, TOOLBAR_PRESETS, TOOLBAR_STANDARD, loadSunEditor, loadSunEditorCss, loadSunEditorLang, loadSunEditorPlugins, pruneToolbar, resolvePlugins, resolveToolbar };
+export { AUTO_EXCLUDED_PLUGINS, MonoRichTextEditorCore, MonoRichTextEditorShadow, SUNEDITOR_CORE_BUTTONS, SUNEDITOR_LANG_CODES, TOOLBAR_BASIC, TOOLBAR_DEFAULT, TOOLBAR_FULL, TOOLBAR_PRESETS, TOOLBAR_STANDARD, loadSunEditor, loadSunEditorCss, loadSunEditorLang, loadSunEditorPlugins, pruneToolbar, resolvePlugins, resolveToolbar };