@mono-lit/helper 0.0.5 → 0.0.7

package/dist/ui/otp.js

@@ -1,14 +1,13 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { d as buildSizeStyle, g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
-import { t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
+import { s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
 import { n as cssPart } from "../css-class-B6Tc_MAx.js";
-import { t as FieldTooltipController } from "../field-tooltip-FyMi9vNM.js";
-import { t as FieldValidationController } from "../field-validation-CHHQi1zl.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
+import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -757,10 +756,6 @@ const MonoOtpCore = (superClass) => {
 	return MonoOtpCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\otp\otp.css?raw.js
-var otp_css_raw_default = "/* =========================================================================\n   mono-otp — a one-time-code field: N single-character boxes that act as one\n   input. Same look as mono-input (Basecoat `.input-group`, vega) applied to\n   EACH box, and the same attribute contract:\n\n     <mono-otp length=\"6\" groups=\"3\" size=\"sm\" color=\"success\" label=\"Code\">\n     <div mono-otp mono-size=\"sm\" mono-color=\"success\">\n       <label mono-label>Code</label>\n       <div mono-field>\n         <div mono-otp-group><input mono-otp-cell>…</div>\n         <span mono-otp-separator>-</span>\n         <div mono-otp-group><input mono-otp-cell>…</div>\n       </div>\n       <div mono-message-wrap><div mono-message=\"helper\">…</div></div>\n     </div>\n\n   An absent attribute is the prop's default (md / primary / outlined /\n   default state). Parts:\n     [mono-field]            the ROW (no border — every box is its own field)\n     [mono-otp-group]        one run of boxes\n     [mono-otp-cell]         a box (a native <input>); [mono-filled] holds a char,\n                             [mono-active] has focus (the element sets both;\n                             hand-written markup gets :focus / :placeholder-shown)\n     [mono-otp-separator]    the text between groups\n     [mono-otp-affix]        prefix / suffix (=\"prefix\" | \"suffix\")\n     [mono-clear]            the clear button\n\n   Knobs — every one falls back to the matching mono-input knob, so a theme\n   flavor that restyles the input restyles the code field too:\n     --mono-otp-cell-size-<size> / --mono-otp-cell-width   box height / width\n     --mono-otp-font-<size>, --mono-otp-font-weight        character type\n     --mono-otp-gap, --mono-otp-group-gap                  spacing\n     --mono-otp-radius, --mono-otp-bg, --mono-otp-border-color, --mono-otp-shadow\n     --mono-otp-ring-color, --mono-otp-ring-width, --mono-otp-ring-alpha\n     --mono-otp-filled-bg, --mono-otp-separator-color, --mono-otp-placeholder\n     --mono-otp-<color> (primary … dark, valid, invalid)\n     --mono-otp-label-width / -label-side-gap              label-position left/right\n\n   Specificity contract as input.css: a part's resting rule is\n   `:where([mono-otp]) [mono-part]` (0,1,0) so `cssClass` utilities win;\n   state rules stay heavier.\n   ========================================================================= */\n\nmono-otp {\n  display: block;\n}\n\n[mono-otp] {\n  /* ── palette ── */\n  --_mono-otp-text: var(--mono-otp-color, var(--mono-input-color, var(--mono-input-text, var(--foreground))));\n  --_mono-otp-placeholder: var(--mono-otp-placeholder, var(--mono-input-placeholder, var(--muted-foreground)));\n  --_mono-otp-muted: var(--mono-otp-muted, var(--mono-input-muted, var(--muted-foreground)));\n  --_mono-otp-primary: var(--mono-otp-primary, var(--mono-input-primary, var(--ring)));\n  --_mono-otp-secondary: var(--mono-otp-secondary, var(--mono-input-secondary, var(--muted-foreground)));\n  --_mono-otp-success: var(--mono-otp-success, var(--mono-input-success, var(--success)));\n  --_mono-otp-danger: var(--mono-otp-danger, var(--mono-input-danger, var(--destructive)));\n  --_mono-otp-warning: var(--mono-otp-warning, var(--mono-input-warning, var(--warning)));\n  --_mono-otp-info: var(--mono-otp-info, var(--mono-input-info, var(--info)));\n  --_mono-otp-teal: var(--mono-otp-teal, var(--mono-input-teal, var(--teal)));\n  --_mono-otp-purple: var(--mono-otp-purple, var(--mono-input-purple, var(--purple)));\n  --_mono-otp-neutral: var(--mono-otp-neutral, var(--mono-input-neutral, var(--neutral)));\n  --_mono-otp-dark: var(--mono-otp-dark, var(--mono-input-dark, var(--dark)));\n  --_mono-otp-valid: var(--mono-otp-valid, var(--mono-input-valid, var(--success)));\n  --_mono-otp-invalid: var(--mono-otp-invalid, var(--mono-input-invalid, var(--destructive)));\n\n  /* ── the painted box — public knob → variant preset → input knob → token ── */\n  --_mono-otp-ring-color: var(--mono-otp-ring-color, var(--mono-otp-focus-color, var(--_mono-otp-ring-color-preset, var(--_mono-otp-primary))));\n  --_mono-otp-ring-width: var(--mono-otp-ring-width, var(--_mono-otp-ring-width-preset, var(--mono-input-ring-width, var(--mono-ring-width))));\n  --_mono-otp-ring-alpha: var(--mono-otp-ring-alpha, var(--mono-input-ring-alpha, var(--mono-ring-alpha)));\n  --_mono-otp-border-color: var(--mono-otp-border-color, var(--_mono-otp-border-color-preset, var(--mono-input-rest-border, var(--mono-input-border-color, var(--input)))));\n  --_mono-otp-bg: var(--mono-otp-bg, var(--_mono-otp-bg-preset, var(--mono-input-bg, var(--mono-input-surface, var(--mono-mode-surface)))));\n  --_mono-otp-shadow: var(--mono-otp-shadow, var(--_mono-otp-shadow-preset, 0 0 #0000));\n  --_mono-otp-radius: var(--mono-otp-radius, var(--_mono-otp-radius-preset, var(--mono-input-radius, var(--mono-radius-md))));\n\n  /* ── md metrics on the unqualified root (hand-written markup = md) ── */\n  --_mono-otp-size: var(--mono-otp-cell-size-md, var(--mono-input-height-md, var(--mono-control-height-md)));\n  --_mono-otp-font-size: var(--mono-otp-font-md, var(--mono-text-base));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 6);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 3.5);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--mono-otp-label-gap, var(--mono-input-gap, calc(var(--mono-spacing) * 3)));\n  width: 100%;\n  font-family: inherit;\n  color: var(--_mono-otp-text);\n}\n\n[mono-otp],\n:where([mono-otp]) *,\n:where([mono-otp]) *::before,\n:where([mono-otp]) *::after {\n  box-sizing: border-box;\n}\n\n/* shadow build: unassigned slot wrappers carry `mono-empty` */\n:where([mono-otp]) :is([mono-label], [mono-otp-affix], [mono-message])[mono-empty] {\n  display: none;\n}\n\n/* =========================================\n   Sizes — box height IS the control token\n   ========================================= */\n\n[mono-otp][mono-size=\"xs\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-xs, var(--mono-input-height-xs, var(--mono-control-height-xs)));\n  --_mono-otp-font-size: var(--mono-otp-font-xs, var(--mono-text-xs));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 4);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 3);\n}\n[mono-otp][mono-size=\"sm\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-sm, var(--mono-input-height-sm, var(--mono-control-height-sm)));\n  --_mono-otp-font-size: var(--mono-otp-font-sm, var(--mono-text-sm));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 5);\n}\n[mono-otp][mono-size=\"lg\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-lg, var(--mono-input-height-lg, var(--mono-control-height-lg)));\n  --_mono-otp-font-size: var(--mono-otp-font-lg, var(--mono-text-lg));\n}\n[mono-otp][mono-size=\"xl\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-xl, var(--mono-input-height-xl, var(--mono-control-height-xl)));\n  --_mono-otp-font-size: var(--mono-otp-font-xl, var(--mono-text-xl));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 7);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n[mono-otp][mono-size=\"xxl\"] {\n  --_mono-otp-size: var(--mono-otp-cell-size-xxl, var(--mono-input-height-xxl, var(--mono-control-height-xxl)));\n  --_mono-otp-font-size: var(--mono-otp-font-xxl, calc(var(--mono-text-xl) * 1.25));\n  --_mono-otp-clear: calc(var(--mono-spacing) * 8);\n  --_mono-otp-clear-glyph: calc(var(--mono-spacing) * 4);\n}\n\n/* =========================================\n   Variants — write `*-preset` slots only (same as input.css)\n   ========================================= */\n\n[mono-otp]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\n  --_mono-otp-bg-preset: var(--mono-input-outline-bg);\n  --_mono-otp-border-color-preset: var(--mono-input-outline-border-color);\n  --_mono-otp-side-border-color-preset: var(--mono-input-outline-side-border-color);\n  --_mono-otp-shadow-preset: var(--mono-input-outline-shadow, var(--mono-shadow-xs));\n  --_mono-otp-ring-width-preset: var(--mono-input-outline-ring-width);\n  --_mono-otp-radius-preset: var(--mono-input-outline-radius);\n}\n\n[mono-otp][mono-variant=\"filled\"] {\n  --_mono-otp-bg-preset: var(--mono-otp-filled-bg, var(--mono-input-filled-bg, color-mix(in oklab, var(--input) 50%, transparent)));\n  --_mono-otp-border-color-preset: transparent;\n  --_mono-otp-shadow-preset: 0 0 #0000;\n}\n\n[mono-otp][mono-variant=\"underlined\"] {\n  --_mono-otp-bg-preset: transparent;\n  --_mono-otp-side-border-color-preset: transparent;\n  --_mono-otp-shadow-preset: 0 0 #0000;\n  --_mono-otp-ring-width-preset: 0px;\n  --_mono-otp-radius-preset: 0;\n}\n\n/* =========================================\n   Colours — the focus colour\n   ========================================= */\n\n[mono-otp]:is(:not([mono-color]), [mono-color=\"primary\"]) { --_mono-otp-ring-color-preset: var(--_mono-otp-primary); }\n[mono-otp][mono-color=\"secondary\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-secondary); }\n[mono-otp][mono-color=\"success\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-success); }\n[mono-otp][mono-color=\"danger\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-danger); }\n[mono-otp][mono-color=\"warning\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-warning); }\n[mono-otp][mono-color=\"info\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-info); }\n[mono-otp][mono-color=\"teal\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-teal); }\n[mono-otp][mono-color=\"purple\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-purple); }\n[mono-otp][mono-color=\"neutral\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-neutral); }\n[mono-otp][mono-color=\"dark\"] { --_mono-otp-ring-color-preset: var(--_mono-otp-dark); }\n\n/* =========================================\n   Label (same rules as input's)\n   ========================================= */\n\n:where([mono-otp]) > [mono-label] {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  gap: var(--mono-otp-label-gap, var(--mono-input-label-gap, calc(var(--mono-spacing) * 2)));\n  font-size: var(--mono-otp-label-font-size, var(--mono-input-label-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-otp-label-line-height, var(--mono-input-label-line-height, 1));\n  font-weight: var(--mono-otp-label-font-weight, var(--mono-input-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium))));\n  text-transform: var(--mono-otp-label-text-transform, var(--mono-input-label-text-transform, none));\n  letter-spacing: var(--mono-otp-label-letter-spacing, var(--mono-input-label-letter-spacing, normal));\n  color: var(--_mono-otp-text);\n  user-select: none;\n}\n\n[mono-otp][mono-disabled] > [mono-label] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n[mono-otp][mono-validation-state=\"invalid\"] > [mono-label] {\n  color: var(--_mono-otp-invalid);\n}\n\n:where([mono-otp]) [mono-required-mark] {\n  color: var(--_mono-otp-danger);\n}\n\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip] {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mono-otp-label-tooltip-size, var(--mono-input-label-tooltip-size, 1.1em));\n  color: var(--mono-otp-label-tooltip-color, var(--mono-input-label-tooltip-color, currentColor));\n  opacity: var(--mono-otp-label-tooltip-opacity, var(--mono-input-label-tooltip-opacity, 0.6));\n  border-radius: 9999px;\n  cursor: help;\n  pointer-events: auto;\n  outline: none;\n  transition: opacity 150ms ease;\n}\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\n  opacity: 1;\n}\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip]:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n:where([mono-otp]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\n  width: 1em;\n  height: 1em;\n}\n\n/* =========================================\n   The row, groups and separators\n   ========================================= */\n\n:where([mono-otp]) > [mono-field] {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mono-otp-group-gap, calc(var(--mono-spacing) * 2));\n  min-width: 0;\n}\n\n:where([mono-otp]) [mono-otp-group] {\n  display: flex;\n  align-items: center;\n  gap: var(--mono-otp-gap, calc(var(--mono-spacing) * 2));\n}\n\n:where([mono-otp]) [mono-otp-separator] {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_mono-otp-font-size);\n  line-height: 1;\n  color: var(--mono-otp-separator-color, var(--_mono-otp-muted));\n  user-select: none;\n}\n\n/* =========================================\n   The box — input.css's [mono-field], per character\n   ========================================= */\n\n:where([mono-otp]) [mono-otp-cell] {\n  --_mono-otp-bc: var(--_mono-otp-border-color);\n  --_mono-otp-side-bc: var(--mono-otp-side-border-color, var(--_mono-otp-side-border-color-preset, var(--_mono-otp-bc)));\n  --_mono-otp-ring: 0 0 #0000;\n\n  display: block;\n  flex: none;\n  width: var(--mono-otp-cell-width, var(--_mono-otp-size));\n  height: var(--_mono-otp-size);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  appearance: none;\n  outline: none;\n  border: var(--mono-border-width) solid var(--_mono-otp-bc);\n  border-top-color: var(--_mono-otp-side-bc);\n  border-inline-color: var(--_mono-otp-side-bc);\n  border-radius: var(--_mono-otp-radius);\n  background: var(--_mono-otp-bg);\n  box-shadow: var(--_mono-otp-ring), var(--_mono-otp-shadow);\n  color: var(--_mono-otp-text);\n  caret-color: var(--_mono-otp-ring-color);\n  font-family: inherit;\n  font-size: var(--_mono-otp-font-size);\n  font-weight: var(--mono-otp-font-weight, var(--mono-font-weight-semibold));\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  text-align: center;\n  transition-property: color, box-shadow, border-color, background-color;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  &::placeholder {\n    color: var(--_mono-otp-placeholder);\n    font-weight: var(--mono-font-weight-normal);\n  }\n\n  /* The box is selected on focus so a keystroke replaces it; the ring already\n     marks the active box, so the selection highlight would only be noise. */\n  &::selection {\n    background: transparent;\n    color: inherit;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline: none !important;\n  }\n\n  /* focus:border-ring focus:ring-3 focus:ring-ring/50 — the box with the caret */\n  &:focus,\n  &[mono-active] {\n    --_mono-otp-bc: var(--_mono-otp-ring-color);\n    --_mono-otp-side-bc: var(--mono-otp-side-border-color, var(--_mono-otp-side-border-color-preset, var(--_mono-otp-ring-color)));\n    --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-ring-color) var(--_mono-otp-ring-alpha), transparent);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    cursor: default;\n  }\n}\n\n/* ── validation states (same tokens as input's box) ── */\n[mono-otp][mono-validation-state=\"invalid\"] [mono-otp-cell],\n:where([mono-otp]) [mono-otp-cell][aria-invalid=\"true\"] {\n  --_mono-otp-bc: var(--mono-mode-invalid-border);\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) var(--mono-mode-invalid-ring);\n}\n[mono-otp][mono-validation-state=\"valid\"] [mono-otp-cell] {\n  --_mono-otp-bc: color-mix(in oklab, var(--_mono-otp-valid) var(--mono-mode-state-border-alpha), transparent);\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-valid) var(--mono-mode-state-ring-alpha), transparent);\n}\n[mono-otp][mono-validation-state=\"warning\"] [mono-otp-cell] {\n  --_mono-otp-bc: color-mix(in oklab, var(--_mono-otp-warning) var(--mono-mode-state-border-alpha), transparent);\n  --_mono-otp-ring: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-warning) var(--mono-mode-state-ring-alpha), transparent);\n}\n\n/* ── readonly / disabled ── */\n[mono-otp][mono-readonly] [mono-otp-cell] {\n  background: var(--mono-otp-readonly-bg, var(--mono-input-readonly-bg, var(--muted)));\n}\n\n[mono-otp][mono-disabled] > [mono-field],\n:where([mono-otp]) > [mono-field]:has([mono-otp-cell]:disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n[mono-otp][mono-disabled] [mono-otp-cell] {\n  background: var(--mono-otp-disabled-bg, var(--mono-input-disabled-bg, var(--_mono-otp-bg)));\n}\n\n/* =========================================\n   Prefix / suffix / clear\n   ========================================= */\n\n:where([mono-otp]) [mono-otp-affix] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--mono-spacing) * 2);\n  font-size: var(--mono-text-sm);\n  font-weight: var(--mono-font-weight-medium);\n  color: var(--_mono-otp-muted);\n  user-select: none;\n}\n\n:where([mono-otp]) [mono-otp-affix] > [data-mono-slot] {\n  display: inline-flex;\n  align-items: center;\n  gap: inherit;\n}\n\n:where([mono-otp]) [mono-otp-affix] :is(svg, .mono-icon, [mono-icon]),\n:where([mono-otp]) [mono-otp-affix] ::slotted(svg),\n:where([mono-otp]) [mono-otp-affix] ::slotted(.mono-icon),\n:where([mono-otp]) [mono-otp-affix] ::slotted([mono-icon]) {\n  display: block;\n  width: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\n  height: var(--mono-input-affix-icon-size, calc(var(--mono-spacing) * 4));\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n:where([mono-otp]) [mono-clear] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--_mono-otp-clear);\n  height: var(--_mono-otp-clear);\n  padding: 0;\n  margin: 0;\n  border: 0;\n  border-radius: var(--mono-otp-clear-radius, var(--mono-input-clear-radius, calc(var(--radius) - 5px)));\n  background: transparent;\n  box-shadow: none;\n  color: var(--_mono-otp-muted);\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  outline-style: none;\n  transition-property: color, background-color, box-shadow;\n  transition-timing-function: var(--mono-ease);\n  transition-duration: var(--mono-duration);\n\n  &:focus-visible {\n    box-shadow: 0 0 0 var(--_mono-otp-ring-width) color-mix(in oklab, var(--_mono-otp-ring-color) var(--_mono-otp-ring-alpha), transparent);\n  }\n}\n\n@media (hover: hover) {\n  :where([mono-otp]) [mono-clear]:hover {\n    background: var(--mono-mode-ghost-hover);\n    color: var(--_mono-otp-text);\n  }\n}\n\n:where([mono-otp]) [mono-clear] > :is(svg, .mono-icon, [mono-icon]) {\n  display: block;\n  width: var(--_mono-otp-clear-glyph);\n  height: var(--_mono-otp-clear-glyph);\n  pointer-events: none;\n}\n\n/* =========================================\n   Message\n   ========================================= */\n\n:where([mono-otp]) > [mono-message-wrap] {\n  display: block;\n}\n:where([mono-otp]) > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\n  display: none;\n}\n\n:where([mono-otp]) [mono-message] {\n  font-size: var(--mono-otp-message-font-size, var(--mono-input-message-font-size, var(--mono-text-sm)));\n  line-height: var(--mono-otp-message-line-height, var(--mono-input-message-line-height, var(--mono-leading-normal)));\n  font-weight: var(--mono-font-weight-normal);\n  text-align: start;\n  color: var(--_mono-otp-muted);\n}\n:where([mono-otp]) [mono-message=\"invalid\"] { color: var(--_mono-otp-invalid); }\n:where([mono-otp]) [mono-message=\"valid\"] { color: var(--_mono-otp-valid); }\n:where([mono-otp]) [mono-message=\"warning\"] { color: var(--_mono-otp-warning); }\n\n/* hidden form value */\n:where([mono-otp]) [mono-otp-hidden] {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where([mono-otp]) :is([mono-otp-cell], [mono-clear]) {\n    transition: none;\n  }\n}\n\n/* =========================================\n   label-position — left / right (form/label-position.css).\n   `notched` renders as top: there is no single box to notch.\n   ========================================= */\n\n[mono-otp][mono-label-position] {\n  --_mono-lp-width: var(--mono-otp-label-width, var(--mono-input-label-width, auto));\n  --_mono-lp-gap: var(--mono-otp-label-side-gap, var(--mono-input-label-side-gap, calc(var(--mono-spacing) * 3)));\n  --_mono-lp-height: var(--_mono-otp-size);\n  --_mono-lp-box-min: var(--_mono-otp-size);\n  --_mono-lp-padding-x: 0px;\n  --_mono-lp-padding-y: 0px;\n  --_mono-lp-font: var(--mono-text-xs);\n  --_mono-lp-notch-bg: var(--background);\n  --_mono-lp-field-bg: var(--_mono-otp-bg);\n}\n";
-
 //#endregion
 //#region src/components/otp/mono-otp.ts
 let MonoOtp = class MonoOtp extends MonoOtpCore(LitElement) {
@@ -773,9 +768,6 @@ let MonoOtp = class MonoOtp extends MonoOtpCore(LitElement) {
 			helper: []
 		};
 	}
-	static {
-		this.styles = [unsafeCSS(otp_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/radio.js

@@ -1,10 +1,10 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -276,10 +276,6 @@ const MonoRadioCore = (superClass) => {
 	return MonoRadioCoreClass;
 };
 
-//#endregion
-//#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.ts
 let MonoRadio = class MonoRadio extends MonoRadioCore(LitElement) {
@@ -289,9 +285,6 @@ let MonoRadio = class MonoRadio extends MonoRadioCore(LitElement) {
 		this._slotLabel = [];
 		this._slotDescription = [];
 	}
-	static {
-		this.styles = [unsafeCSS(radio_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

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

@@ -1,11 +1,10 @@
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { d as buildSizeStyle, f as toCssSize, g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, r as booleanStringConverter, s as optionalNumberConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
-import { n as toCssSize, t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
+import { s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
@@ -1279,10 +1278,6 @@ const MonoRichTextEditorCore = (superClass) => {
 	return MonoRichTextEditorCoreClass;
 };
 
-//#endregion
-//#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.ts
 let MonoRichTextEditor = class MonoRichTextEditor extends MonoRichTextEditorCore(LitElement) {
@@ -1292,9 +1287,6 @@ let MonoRichTextEditor = class MonoRichTextEditor extends MonoRichTextEditorCore
 		this._slotLabel = [];
 		this._slotHelper = [];
 	}
-	static {
-		this.styles = [unsafeCSS(rich_text_editor_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/select.js

@@ -1,20 +1,19 @@
 import { t as getFieldValue } from "../field-path-BabiMrrA.js";
 import { a as errorTitle, f as MonoSourceSearch, i as errorText, n as describeError, x as searchRowPredicate, y as resolveSearchFields } from "../normalize-error-D93O4q8g.js";
 import { n as unwrapReactive } from "../reactive-Dtd-esHO.js";
-import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
-import { t as customElement } from "../mono-element-C7vCschg.js";
+import { d as buildSizeStyle, f as toCssSize, g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
+import { t as customElement } from "../mono-element-CKcT0rwv.js";
 import { a as defineHybridPropAliases, n as arrayHasChanged, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
 import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { s as placeSlotNode, t as LateSlotWatcher } from "../light-slots-DdDdZ6zs.js";
-import { n as toCssSize, t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
+import { s as placeSlotNode, t as LateSlotWatcher } from "../light-slots-B5Ck0t_E.js";
 import { a as rateLimitHasChanged } from "../rate-limit-e9Jlpl5l.js";
-import { t as PopupPortalController } from "../popup-portal-C8ttHDRX.js";
+import { t as PopupPortalController } from "../popup-portal-CINuVjNY.js";
 import { c as spinnerIcon, s as refreshIcon } from "../field-icons-t8rXRCKs.js";
 import { t as MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
-import { t as FieldTooltipController } from "../field-tooltip-FyMi9vNM.js";
-import { t as FieldValidationController } from "../field-validation-CHHQi1zl.js";
+import { t as FieldTooltipController } from "../field-tooltip-Csk4s2ve.js";
+import { t as FieldValidationController } from "../field-validation-CFmUmuDx.js";
 import { t as DataSourceController } from "../data-source-controller-Dx6IQ2CN.js";
-import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { LitElement, html, isServer, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -983,6 +982,10 @@ const MonoSelectCore = (superClass) => {
 			this._cursorPending = false;
 			this.requestUpdate();
 			if (this._searchTimer) clearTimeout(this._searchTimer);
+			if (!this._serverSearch()) {
+				this._searchTimer = void 0;
+				return;
+			}
 			const wait = Math.max(0, Number(this.searchDebounce) || 0);
 			this._searchTimer = setTimeout(() => void this._applySearch(this._query), wait);
 		}
@@ -1428,6 +1431,7 @@ const MonoSelectCore = (superClass) => {
 		* back fresh row objects under the same keys, and a consumer reading `e.item.Nama` must see them.
 		*/
 		_syncListEntries() {
+			if (!this.dataForm || !this.keyForm) return;
 			const next = this._listEntries();
 			const prev = this._publishedEntries;
 			let same = prev.length === next.length;
@@ -2092,10 +2096,6 @@ const MonoSelectCore = (superClass) => {
 	return MonoSelectCoreClass;
 };
 
-//#endregion
-//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\select\select.css?raw.js
-var select_css_raw_default = "/* =========================================================================\r\n   mono-select — a port of Basecoat's `.select` (the custom one, `.select:not(select)`)\r\n   and `.combobox` (basecoat-css@1.0.2, vega style), on the `.field` / `.label`\r\n   chrome mono-input already ported.\r\n\r\n   Styled by ATTRIBUTE, like Basecoat (`.select > button`, `[role='option'].active`)\r\n   — and the attributes mirror the element's props one for one, so hand-written\r\n   markup reads like the Lit / Vue tag:\r\n\r\n     <mono-select size=\"sm\" color=\"danger\" variant=\"filled\" label=\"Fruit\">\r\n     <div mono-select mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"filled\">\r\n       <label mono-label>Fruit</label>\r\n       <button mono-trigger><span mono-value mono-placeholder>Pick</span>\r\n         <span mono-actions><span mono-arrow>…</span></span></button>\r\n       <div mono-dropdown><div mono-dropdown-body><button mono-item>…</button></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 attributes on its wrapper (both builds) plus `mono-open` while\r\n   the panel is open; the old classes (`.mono-select.sm.open`) are still emitted\r\n   as inert hooks for consumer CSS until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-select]                                 ≡ .field (gap-3, as margins — see the root rule) + .select (position: relative)\r\n     [mono-select] > [mono-label]                  ≡ .field > label / .label\r\n     [mono-select] > [mono-trigger]                ≡ .select > button          (h-9 rounded-md border-input ps-2.5 pe-2 text-sm shadow-xs)\r\n     [mono-select][mono-searchable] > [mono-trigger] ≡ .combobox > input[role='combobox'] (same box; the input sits inside it)\r\n     [mono-trigger] > [mono-value]                 ≡ .select > button > span    (flex-1 truncate text-start)\r\n     [mono-trigger] > [mono-native]                ≡ EXTENSION — a plain <select> may stand in for the value + panel (appearance: none)\r\n     [mono-actions] > [mono-arrow] > [mono-icon]   ≡ .select > button > svg     (size-4 text-muted-foreground)\r\n     [mono-actions] > [mono-clear]                 ≡ .combobox [data-clear]     (size-6, painted as .btn[data-variant='ghost'])\r\n     [mono-dropdown]                               ≡ .select [data-popover]     (bg-popover ring-1 ring-foreground/10 rounded-md shadow-md)\r\n     [mono-dropdown-body]                          ≡ .combobox [role='listbox'] (max-h-72 overflow-y-auto p-1 scroll-py-1)\r\n     [mono-item]                                   ≡ .select [role='option']    (gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm)\r\n     [mono-item][mono-active] / :hover             ≡ [role='option'].active     (bg-muted text-foreground)\r\n     [mono-item][mono-selected]                    ≡ [role='option'][aria-selected='true'] (the --check-icon at the end)\r\n     [mono-group]                                  ≡ .select [role='heading']   (px-2 py-1.5 text-xs text-muted-foreground)\r\n     [mono-empty-row]                              ≡ .select [role='listbox']::before (py-6 text-center text-sm)\r\n     [mono-load-more]                              ≡ EXTENSION (an option-shaped ghost button)\r\n     [mono-message-wrap] > [mono-message]          ≡ .field > p / .field [role='alert']\r\n     [mono-validation-state=\"invalid\"]             ≡ .select > button[aria-invalid='true']\r\n     [mono-validation-state=\"valid|warning\"]       ≡ EXTENSION (the invalid pattern in --success / --warning)\r\n     [mono-size=\"xs|sm|lg|xl|xxl\"]                 ≡ EXTENSION (Basecoat has only data-size=sm; the ladder is --mono-control-height-*)\r\n     [mono-variant=\"filled\"]                       ≡ EXTENSION (luma's .select > button: border-transparent bg-input/50)\r\n     [mono-variant=\"underlined\"]                   ≡ EXTENSION (sera's: rounded-none border-b-input px-0, no ring)\r\n\r\n   Inner parts are attributes too: [mono-label] (+ [mono-required-mark]),\r\n   [mono-trigger], [mono-value] (+ [mono-placeholder]), [mono-search-field],\r\n   [mono-native], [mono-actions], [mono-clear], [mono-arrow], [mono-icon],\r\n   [mono-dropdown], [mono-dropdown-body], [mono-item] (+ [mono-active] /\r\n   [mono-selected] / [mono-disabled]), [mono-group] (+ [mono-sticky],\r\n   [mono-level=\"n\"]), [mono-empty-row], [mono-load-more] (+ [mono-loading]),\r\n   [mono-list-slot], [mono-message-wrap] > [mono-message=\"helper|valid|invalid|warning\"].\r\n   The shadow build marks an unassigned slot wrapper [mono-empty].\r\n\r\n   THE PANEL IS PORTALED. The light build moves [mono-dropdown] into a\r\n   `<div data-mono-popup-portal>` under <body> while open (composables/popup-\r\n   portal.ts), and the portal mirrors the wrapper's class AND its mono-*\r\n   attributes — so `[mono-select] > [mono-dropdown]` keeps matching there and\r\n   the `--_mono-select-*` resolvers declared on `[mono-select]` re-resolve on\r\n   the portal. Nothing here may rely on the panel being inside the trigger's\r\n   host, and every option rule is scoped under `[mono-select]`.\r\n\r\n   Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n   vega.cdn.css) through the token layer; `dark:` variants travel as\r\n   `--mono-mode-*` tokens (a selector cannot cross a shadow boundary; an\r\n   inherited custom property can). FLAVORS set the `--mono-select-*` knobs read\r\n   below — the same set as mono-input (`--mono-select-outline-*` for the outlined\r\n   variant alone) plus `--mono-select-dropdown-{radius,padding,shadow,ring}`,\r\n   `--mono-select-option-{radius,padding-x,padding-y,font-size,line-height,gap,font-weight}`,\r\n   `--mono-select-group-*`, `--mono-select-icon-size`. Every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"^(\\.select:not\\(select\\)|\\.combobox)\"`).\r\n   ========================================================================= */\r\n\r\nmono-select {\r\n  display: block;\r\n}\r\n\r\n[mono-select] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-select-text: var(--mono-select-color, var(--mono-select-text, var(--foreground)));\r\n  --_mono-select-placeholder: var(--mono-select-placeholder, var(--muted-foreground));\r\n  --_mono-select-muted: var(--mono-select-muted, var(--muted-foreground));\r\n  --_mono-select-primary: var(--mono-select-primary, var(--ring));\r\n  --_mono-select-secondary: var(--mono-select-secondary, var(--muted-foreground));\r\n  --_mono-select-success: var(--mono-select-success, var(--success));\r\n  --_mono-select-danger: var(--mono-select-danger, var(--destructive));\r\n  --_mono-select-warning: var(--mono-select-warning, var(--warning));\r\n  --_mono-select-info: var(--mono-select-info, var(--info));\r\n  --_mono-select-teal: var(--mono-select-teal, var(--teal));\r\n  --_mono-select-purple: var(--mono-select-purple, var(--purple));\r\n  --_mono-select-neutral: var(--mono-select-neutral, var(--neutral));\r\n  --_mono-select-dark: var(--mono-select-dark, var(--dark));\r\n  --_mono-select-valid: var(--mono-select-valid, var(--success));\r\n  --_mono-select-invalid: var(--mono-select-invalid, var(--destructive));\r\n\r\n  /* ── the painted result — three tiers, base = .select > button (vega) ─── */\r\n  --_mono-select-ring-color: var(--mono-select-ring-color, var(--mono-select-focus-color, var(--_mono-select-ring-color-preset, var(--_mono-select-primary))));\r\n  --_mono-select-ring-width: var(--mono-select-ring-width, var(--_mono-select-ring-width-preset, var(--mono-ring-width)));\r\n  --_mono-select-ring-alpha: var(--mono-select-ring-alpha, var(--mono-ring-alpha));\r\n  --_mono-select-border-color: var(--mono-select-rest-border, var(--mono-select-border-color, var(--mono-select-border, var(--_mono-select-border-color-preset, var(--input)))));\r\n  --_mono-select-bg: var(--mono-select-bg, var(--mono-select-surface, var(--_mono-select-bg-preset, var(--mono-mode-surface))));\r\n  --_mono-select-hover-bg: var(--mono-select-hover-bg, var(--_mono-select-hover-bg-preset, var(--_mono-select-bg)));\r\n  --_mono-select-shadow: var(--mono-select-shadow, var(--_mono-select-shadow-preset, 0 0 #0000));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE: hand-written\r\n        `<div mono-select>` that names no size renders exactly like size=\"md\".\r\n        basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n        rounded-md ps-2.5 pe-2 text-sm ── */\r\n  --_mono-select-height: var(--mono-select-height-md, var(--mono-control-height-md));\r\n  --_mono-select-radius: var(--mono-select-radius-md, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-md, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-select-font-size: var(--mono-select-font-md, var(--mono-text-sm));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-md, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 6);\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .field — flex w-full flex-col gap-3; mono: BLOCK\r\n     flow with the gap as margins, so a hand-written panel that no controller\r\n     positions lands at its static position — right under the trigger, above the\r\n     message — instead of a flex container's content-box top */\r\n  --_mono-select-gap-y: var(--mono-select-gap, calc(var(--mono-spacing) * 3));\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  font-family: inherit;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n   boundary; scoped here so both builds measure the same. */\r\n[mono-select],\r\n[mono-select] *,\r\n[mono-select] *::before,\r\n[mono-select] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[mono-select] :is([mono-label], [mono-message])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — the trigger's painted height IS the token (tests/perf/field-heights)\r\n   EXTENSION: Basecoat's select has only data-size=sm; the ladder is the shared\r\n   --mono-control-height-* scale and the text follows .btn's steps.\r\n   ========================================= */\r\n\r\n[mono-select][mono-size=\"xs\"] {\r\n  --_mono-select-height: var(--mono-select-height-xs, var(--mono-control-height-xs));\r\n  --_mono-select-radius: var(--mono-select-radius-xs, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xs, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 1.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, var(--mono-spacing));\r\n  --_mono-select-font-size: var(--mono-select-font-xs, var(--mono-text-xs));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xs, var(--mono-text-xs--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 4);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — data-[size=sm]:h-8 */\r\n[mono-select][mono-size=\"sm\"] {\r\n  --_mono-select-height: var(--mono-select-height-sm, var(--mono-control-height-sm));\r\n  --_mono-select-radius: var(--mono-select-radius-sm, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-sm, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-sm, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-sm, var(--mono-text-sm--lh)));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 5);\r\n}\r\n\r\n[mono-select][mono-size=\"lg\"] {\r\n  --_mono-select-height: var(--mono-select-height-lg, var(--mono-control-height-lg));\r\n  --_mono-select-radius: var(--mono-select-radius-lg, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-lg, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2))));\r\n  --_mono-select-font-size: var(--mono-select-font-lg, var(--mono-select-font-md, var(--mono-text-sm)));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-lg, var(--mono-text-sm--lh)));\r\n}\r\n\r\n[mono-select][mono-size=\"xl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xl, var(--mono-control-height-xl));\r\n  --_mono-select-radius: var(--mono-select-radius-xl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 2.5))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xl, var(--mono-text-base));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xl, var(--mono-text-base--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 7);\r\n}\r\n\r\n[mono-select][mono-size=\"xxl\"] {\r\n  --_mono-select-height: var(--mono-select-height-xxl, var(--mono-control-height-xxl));\r\n  --_mono-select-radius: var(--mono-select-radius-xxl, var(--_mono-select-radius-preset, var(--mono-select-radius, var(--mono-radius-md))));\r\n  --_mono-select-padding-start: var(--mono-select-padding-x-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 4))));\r\n  --_mono-select-padding-end: var(--mono-select-padding-end-xxl, var(--mono-select-padding-x, var(--_mono-select-padding-x-preset, calc(var(--mono-spacing) * 3))));\r\n  --_mono-select-gap: var(--mono-select-trigger-gap, calc(var(--mono-spacing) * 2));\r\n  --_mono-select-font-size: var(--mono-select-font-xxl, var(--mono-text-lg));\r\n  --_mono-select-line-height: var(--mono-select-line-height, var(--mono-select-line-height-xxl, var(--mono-text-lg--lh)));\r\n  --_mono-select-icon: var(--mono-select-icon-size, calc(var(--mono-spacing) * 5));\r\n  --_mono-select-action: calc(var(--mono-spacing) * 8);\r\n}\r\n\r\n/* =========================================\r\n   Variants — each writes only `*-preset` slots\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — rounded-md border\r\n   border-input bg-transparent shadow-xs (dark:bg-input/30 dark:hover:bg-input/50\r\n   via the mode tokens). `--mono-select-outline-*` restyle THIS variant alone. */\r\n[mono-select]:is(:not([mono-variant]), [mono-variant=\"outlined\"]) {\r\n  --_mono-select-bg-preset: var(--mono-select-outline-bg);\r\n  --_mono-select-hover-bg-preset: var(--mono-select-outline-hover-bg, var(--mono-mode-field-hover-bg));\r\n  --_mono-select-border-color-preset: var(--mono-select-outline-border-color);\r\n  --_mono-select-side-border-color-preset: var(--mono-select-outline-side-border-color);\r\n  --_mono-select-shadow-preset: var(--mono-select-outline-shadow, var(--mono-shadow-xs));\r\n  --_mono-select-ring-width-preset: var(--mono-select-outline-ring-width);\r\n  --_mono-select-radius-preset: var(--mono-select-outline-radius);\r\n  --_mono-select-padding-x-preset: var(--mono-select-outline-padding-x);\r\n}\r\n\r\n/* EXTENSION — filled ≡ basecoat@1.0.2 styles/luma.css .select:not(select) > button:\r\n   border-transparent bg-input/50, no shadow-xs, no hover */\r\n[mono-select][mono-variant=\"filled\"] {\r\n  --_mono-select-bg-preset: var(--mono-select-filled-bg, color-mix(in oklab, var(--input) 50%, transparent));\r\n  --_mono-select-hover-bg-preset: var(--_mono-select-bg);\r\n  --_mono-select-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — underlined ≡ basecoat@1.0.2 styles/sera.css .select:not(select) > button:\r\n   rounded-none border-transparent border-b-input bg-transparent px-0, no shadow,\r\n   no ring, focus-visible:border-b-ring */\r\n[mono-select][mono-variant=\"underlined\"] {\r\n  --_mono-select-bg-preset: transparent;\r\n  --_mono-select-hover-bg-preset: transparent;\r\n  --_mono-select-side-border-color-preset: transparent;\r\n  --_mono-select-shadow-preset: 0 0 #0000;\r\n  --_mono-select-ring-width-preset: 0px;\r\n  --_mono-select-radius-preset: 0;\r\n  --_mono-select-padding-x-preset: 0;\r\n}\r\n\r\n/* =========================================\r\n   Colours — the `color` prop is the FOCUS colour (ring + focused border)\r\n   ========================================= */\r\n\r\n[mono-select]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-primary);\r\n}\r\n[mono-select][mono-color=\"secondary\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-secondary);\r\n}\r\n[mono-select][mono-color=\"success\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-success);\r\n}\r\n[mono-select][mono-color=\"danger\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-danger);\r\n}\r\n[mono-select][mono-color=\"warning\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-warning);\r\n}\r\n[mono-select][mono-color=\"info\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-info);\r\n}\r\n[mono-select][mono-color=\"teal\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-teal);\r\n}\r\n[mono-select][mono-color=\"purple\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-purple);\r\n}\r\n[mono-select][mono-color=\"neutral\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-neutral);\r\n}\r\n[mono-select][mono-color=\"dark\"] {\r\n  --_mono-select-ring-color-preset: var(--_mono-select-dark);\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field > label, .label — flex items-center\r\n   gap-2 text-sm leading-none font-medium select-none w-fit */\r\n[mono-select] > [mono-label] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: fit-content;\r\n  margin: 0 0 var(--_mono-select-gap-y);\r\n  gap: var(--mono-select-label-gap, calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-label-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-label-line-height, 1);\r\n  font-weight: var(--mono-select-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  text-transform: var(--mono-select-label-text-transform, none);\r\n  letter-spacing: var(--mono-select-label-letter-spacing, normal);\r\n  color: var(--_mono-select-text);\r\n  user-select: none;\r\n}\r\n\r\n[mono-select][mono-disabled] > [mono-label] {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field — data-invalid:text-destructive */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-label] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-required-mark] {\r\n  color: var(--_mono-select-danger);\r\n}\r\n\r\n/* `tooltip` prop — the info icon at the end of the label row (the label's\r\n   flex gap spaces it). `pointer-events` is restored because a disabled field\r\n   switches its label's off, and a disabled field is exactly where the reason\r\n   is worth a hover. Knobs: --mono-select-label-tooltip-size / -color / -opacity. */\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip] {\r\n  display: inline-flex;\r\n  flex: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: var(--mono-select-label-tooltip-size, 1.1em);\r\n  color: var(--mono-select-label-tooltip-color, currentColor);\r\n  opacity: var(--mono-select-label-tooltip-opacity, 0.6);\r\n  border-radius: 9999px;\r\n  cursor: help;\r\n  pointer-events: auto;\r\n  outline: none;\r\n  transition: opacity 150ms ease;\r\n}\r\n\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip]:is(:hover, :focus-visible) {\r\n  opacity: 1;\r\n}\r\n\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 2px;\r\n}\r\n\r\n:where([mono-select]) > [mono-label] > [mono-label-tooltip] > [mono-icon] {\r\n  width: 1em;\r\n  height: 1em;\r\n}\r\n\r\n/* =========================================\r\n   The trigger — the bordered box (a <button>, or a <div> holding the combobox input)\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — h-9 gap-1.5\r\n   rounded-md border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs\r\n   focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\r\n   aria-invalid:… dark:hover:bg-input/50; mono: `--tw-ring-*` flattened to the\r\n   ring + shadow slots, the height is the control token (no block padding — the\r\n   token owns the height), the side edges read their own slot */\r\n[mono-select] > [mono-trigger] {\r\n  --_mono-select-bc: var(--_mono-select-border-color);\r\n  --_mono-select-side-bc: var(--mono-select-side-border-color, var(--_mono-select-side-border-color-preset, var(--_mono-select-bc)));\r\n  --_mono-select-ring: 0 0 #0000;\r\n\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: var(--_mono-select-gap);\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: var(--_mono-select-height);\r\n  margin: 0;\r\n  padding-block: var(--mono-select-padding-y, 0);\r\n  padding-inline: var(--_mono-select-padding-start) var(--_mono-select-padding-end);\r\n  outline-style: none;\r\n  border: var(--mono-border-width) solid var(--_mono-select-bc);\r\n  border-top-color: var(--_mono-select-side-bc);\r\n  border-inline-color: var(--_mono-select-side-bc);\r\n  border-radius: var(--_mono-select-radius);\r\n  background: var(--_mono-select-bg);\r\n  color: var(--_mono-select-text);\r\n  box-shadow: var(--_mono-select-ring), var(--_mono-select-shadow);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-select-font-size);\r\n  line-height: var(--_mono-select-line-height);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition-property: color, box-shadow, border-color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n\r\n  &:focus,\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    outline: none !important;\r\n  }\r\n\r\n  /* focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 —\r\n     the combobox form is a <div> whose <input> takes focus, hence :focus-within */\r\n  &:focus-visible,\r\n  &:focus-within {\r\n    --_mono-select-bc: var(--_mono-select-ring-color);\r\n    --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-ring-color) var(--_mono-select-ring-alpha), transparent);\r\n  }\r\n\r\n  & svg,\r\n  & [mono-icon] {\r\n    pointer-events: none;\r\n    flex-shrink: 0;\r\n  }\r\n}\r\n\r\n/* dark:hover:bg-input/50 (light: none) — carried by --mono-mode-field-hover-bg */\r\n@media (hover: hover) {\r\n  [mono-select]:not([mono-disabled]):not([mono-readonly]):not([mono-ds-loading]) > [mono-trigger]:hover {\r\n    background: var(--_mono-select-hover-bg);\r\n  }\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button — aria-invalid:border-destructive\r\n   aria-invalid:ring-3 aria-invalid:ring-destructive/20 (dark: /50, /40 via the mode tokens) */\r\n[mono-select][mono-validation-state=\"invalid\"] > [mono-trigger],\r\n[mono-select] > [mono-trigger][aria-invalid=\"true\"] {\r\n  --_mono-select-bc: var(--mono-mode-invalid-border);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* EXTENSION — valid / warning are the invalid pattern in the role's colour */\r\n[mono-select][mono-validation-state=\"valid\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-valid) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n[mono-select][mono-validation-state=\"warning\"] > [mono-trigger] {\r\n  --_mono-select-bc: color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-border-alpha), transparent);\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) color-mix(in oklab, var(--_mono-select-warning) var(--mono-mode-state-ring-alpha), transparent);\r\n}\r\n\r\n/* EXTENSION — the bound dataSource failed: the invalid outline ONLY. Label,\r\n   message and validation state stay as they are; it is not a validation error. */\r\n[mono-select][mono-ds-error] > [mono-trigger] {\r\n  --_mono-select-bc: var(--mono-select-ds-error-border, var(--mono-mode-invalid-border));\r\n  --_mono-select-ring: 0 0 0 var(--_mono-select-ring-width) var(--mono-select-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n[mono-select] [mono-value][mono-ds-error-text] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n/* EXTENSION — the first load (or a retry) is in flight: read-only, no hover */\r\n[mono-select][mono-ds-loading] > [mono-trigger] {\r\n  cursor: progress;\r\n}\r\n\r\n/* EXTENSION — readonly: focusable, on a muted surface, no gestures */\r\n[mono-select][mono-readonly] > [mono-trigger] {\r\n  background: var(--mono-select-readonly-bg, var(--muted));\r\n  cursor: default;\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button — disabled:\r\n   pointer-events-none cursor-not-allowed opacity-50 */\r\n[mono-select][mono-disabled] > [mono-trigger],\r\n[mono-select] > [mono-trigger]:disabled,\r\n/* a raw readonly select can only disable its native <select>; the root attribute wins */\r\n[mono-select]:not([mono-readonly]) > [mono-trigger]:has(> [mono-native]:disabled) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n  background: var(--mono-select-disabled-bg, var(--_mono-select-bg));\r\n}\r\n\r\n/* =========================================\r\n   Value / search field / native <select>\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) > button > span —\r\n   flex flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-start */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > span — gap-1.5 */\r\n[mono-select] [mono-value] {\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--_mono-select-gap);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: start;\r\n  color: var(--_mono-select-text);\r\n}\r\n\r\n[mono-select] [mono-value] > span {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n[mono-select] [mono-value][mono-placeholder] {\r\n  color: var(--_mono-select-placeholder);\r\n}\r\n\r\n/* basecoat@1.0.2 components/combobox.css .combobox > input[role='combobox'] — the\r\n   search input lives INSIDE our trigger box, so it is borderless like\r\n   .input-group > input and the box around it carries the chrome */\r\n[mono-select] [mono-search-field],\r\n[mono-select] [mono-native] {\r\n  flex: 1 1 auto;\r\n  width: 100%;\r\n  min-width: 0;\r\n  align-self: stretch;\r\n  appearance: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0;\r\n  outline: none;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  color: var(--_mono-select-text);\r\n  font: inherit;\r\n  line-height: var(--_mono-select-line-height);\r\n\r\n  &:focus,\r\n  &:focus-visible {\r\n    outline: none !important;\r\n  }\r\n\r\n  &::placeholder {\r\n    color: var(--_mono-select-placeholder);\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n}\r\n\r\n[mono-select] [mono-search-field] {\r\n  cursor: text;\r\n}\r\n\r\n[mono-select] [mono-native] {\r\n  cursor: inherit;\r\n}\r\n\r\n[mono-select] [mono-native] option {\r\n  color: var(--_mono-select-text);\r\n  background: var(--popover);\r\n}\r\n\r\n/* =========================================\r\n   Actions — the chevron and the clear button\r\n   ========================================= */\r\n\r\n[mono-select] [mono-actions] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--mono-spacing);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) > button > svg — size-4\r\n   text-muted-foreground; mono: the glyph sits in a square action box so the\r\n   chevron and the clear button occupy the same gutter */\r\n/* basecoat@1.0.2 components/combobox.css .combobox [data-clear] — size-6 border-0\r\n   bg-transparent p-0 text-current */\r\n[mono-select] [mono-arrow],\r\n[mono-select] [mono-clear],\r\n[mono-select] [mono-ds-retry],\r\n[mono-select] [mono-ds-spinner] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: var(--_mono-select-action);\r\n  height: var(--_mono-select-action);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-select-clear-radius, calc(var(--radius) - 5px));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition-property: color, background-color, transform;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry], [mono-ds-spinner]) > :is(svg, .mono-icon, [mono-icon]) {\r\n  display: block;\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* EXTENSION — the chevron turns while the panel is open */\r\n[mono-select][mono-open] [mono-arrow] > :is(svg, .mono-icon, [mono-icon]) {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost'] — hover:bg-muted\r\n   hover:text-foreground (dark:hover:bg-muted/50 via --mono-mode-ghost-hover) */\r\n@media (hover: hover) {\r\n  [mono-select] :is([mono-arrow], [mono-clear], [mono-ds-retry]):hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n/* EXTENSION — dataSource state glyphs: the busy arc spins, the ↻ wears the\r\n   error colour so it reads as the way out of the red field */\r\n[mono-select] [mono-ds-spinner] {\r\n  cursor: progress;\r\n}\r\n\r\n[mono-select] [mono-ds-spinner] > svg {\r\n  animation: mono-select-spin 0.7s linear infinite;\r\n}\r\n\r\n[mono-select] [mono-ds-retry] {\r\n  color: var(--mono-select-ds-error-text, var(--_mono-select-invalid));\r\n}\r\n\r\n@keyframes mono-select-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   The panel\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 min-w-full\r\n   overflow-x-hidden; mono: `display: none` while closed (the contents are only\r\n   rendered while open), `--mono-popup-z` from the shared popup stack and\r\n   `--mono-popup-avail-h` from the portal controller cap the whole panel */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [data-popover] — bg-popover\r\n   text-popover-foreground rounded-md shadow-md ring-1 ring-foreground/10; the\r\n   `p-1` moves to the scrolling body (the combobox layout), so the scrollbar\r\n   never paints over the padding */\r\n[mono-select] > [mono-dropdown] {\r\n  position: absolute;\r\n  /* `top: auto` = the static position: the panel follows the trigger in the DOM,\r\n     so in block flow it lands right under it (the popup controller overrides\r\n     this inline for the element; hand-written markup relies on it). */\r\n  top: auto;\r\n  /* the 6px offset as a transform: the controller writes `transform: none` inline\r\n     with its fixed position, so only the hand-written panel is pushed down */\r\n  transform: translateY(calc(var(--mono-spacing) * 1.5));\r\n  /* Both edges pinned, so the panel matches the field by default. An inline\r\n     `width` from `:dropdown.prop=\"{ width }\"` is then the over-constrained case,\r\n     which CSS resolves by ignoring `right` — the panel keeps this left edge and\r\n     takes the given width. */\r\n  left: 0;\r\n  right: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: none;\r\n  /* Basecoat's `min-w-[max(100%,9rem)]` is relative to the .select box; a portaled\r\n     panel is position: fixed, where 100% would be the viewport — the controller\r\n     writes the anchor's width inline instead, so only the floor stays. */\r\n  min-width: var(--mono-select-dropdown-min-width, 9rem);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  border-radius: var(--mono-select-dropdown-radius, var(--mono-radius-md));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n  color: var(--mono-select-dropdown-color, var(--popover-foreground));\r\n  box-shadow: var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--mono-select-dropdown-shadow, var(--mono-shadow-md));\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n[mono-select][mono-open] > [mono-dropdown] {\r\n  /* A flex column (not `block`) so the body can shrink past its own height when\r\n     the panel is clamped above. */\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox [role='listbox'] — max-h-[min(18rem,\r\n   var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1 */\r\n[mono-select] [mono-dropdown-body] {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  max-height: 18rem;\r\n  padding: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  overflow: auto;\r\n  overscroll-behavior: contain;\r\n  scroll-padding-block: var(--mono-select-dropdown-padding, var(--mono-spacing));\r\n  outline-style: none;\r\n}\r\n\r\n/* =========================================\r\n   Options\r\n   -----------------------------------------\r\n   Each rule also lists the stamped twin of a row rendered through `slot=\"list\"`\r\n   (`[data-mono-type='row']`, `[data-mono-active]`, `[data-mono-selected]`), so\r\n   the two can never drift: what you render in the slot IS an option. `:where()`\r\n   wraps only the CONTAINER, keeping the twin at attribute weight.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'] — relative\r\n   flex w-full cursor-default items-center overflow-hidden text-ellipsis whitespace-\r\n   nowrap outline-none select-none; disabled: pointer-events-none opacity-50 */\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='option'] — gap-2\r\n   rounded-sm py-1.5 ps-2 pe-8 text-sm, svg size-4 */\r\n[mono-select] [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] {\r\n  position: relative;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2)) var(--mono-select-option-padding-end, calc(var(--mono-spacing) * 8));\r\n  min-height: var(--mono-select-option-min-height, 0);\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  /* longhands, so the selected row's check (a background-image) survives the\r\n     active / hover background */\r\n  background-color: transparent;\r\n  background-image: none;\r\n  color: var(--_mono-select-text);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-select-option-font-weight, var(--mono-font-weight-normal));\r\n  text-align: start;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  outline-style: none;\r\n  user-select: none;\r\n  cursor: default;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n/* EXTENSION: a hair of air between rows. Upstream stacks its options flush, so an\r\n   active row directly under the selected one read as ONE tall highlight; a 2px\r\n   seam keeps the two rounded-sm washes apart. `--mono-select-option-spacing`. */\r\n[mono-select] [mono-item] + [mono-item],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'] + [data-mono-type='row'] {\r\n  margin-top: var(--mono-select-option-spacing, 2px);\r\n}\r\n\r\n[mono-select] [mono-item] svg:not([class*='size-']),\r\n[mono-select] [mono-item] .mono-icon {\r\n  width: var(--_mono-select-icon);\r\n  height: var(--_mono-select-icon);\r\n  flex-shrink: 0;\r\n  pointer-events: none;\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\r\n   — bg-muted text-foreground. The keyboard cursor and the pointer share one look. */\r\n[mono-select] [mono-item][mono-active]:not([mono-disabled]):not(:disabled),\r\n[mono-select] [mono-item]:focus-visible,\r\n[mono-select] :where([mono-list-slot]) [data-mono-active] {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover, .select:not(select) [role='option'].active\r\n   — the pointer highlight is NOT behind (hover: hover) upstream */\r\n[mono-select] [mono-item]:hover:not([mono-disabled]):not(:disabled),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row']:hover {\r\n  background-color: var(--mono-select-option-active-bg, var(--muted));\r\n  color: var(--mono-select-option-active-color, var(--_mono-select-text));\r\n}\r\n\r\n/* basecoat@1.0.2 components/select.css .select:not(select) [role='option'][aria-selected='true']\r\n   — the --check-icon at the end (bg-size .875rem, center right .5rem) */\r\n[mono-select] [mono-item][mono-selected],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected] {\r\n  background-image: var(--mono-select-check-icon, var(--check-icon));\r\n  background-size: var(--mono-select-check-size, 0.875rem);\r\n  background-position: center right calc(var(--mono-spacing) * 2);\r\n  background-repeat: no-repeat;\r\n  font-weight: var(--mono-select-option-selected-font-weight, var(--mono-select-option-font-weight, var(--mono-font-weight-normal)));\r\n}\r\n\r\n[mono-select] [mono-item][mono-selected]:dir(rtl),\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='row'][data-mono-selected]:dir(rtl) {\r\n  background-position: center left calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n[mono-select] [mono-item][mono-disabled],\r\n[mono-select] [mono-item]:disabled {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before\r\n   — py-6 text-center text-sm (the \"No results found\" row) */\r\n[mono-select] [mono-empty-row] {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-block: calc(var(--mono-spacing) * 6);\r\n  padding-inline: calc(var(--mono-spacing) * 3);\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  color: var(--_mono-select-muted);\r\n  text-align: center;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .select:not(select) [role='heading'] — px-2 py-1.5\r\n   text-xs text-muted-foreground; EXTENSION: one indent step per nesting level */\r\n[mono-select] [mono-group],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'] {\r\n  --_ms-group-level: 0;\r\n  padding-block: var(--mono-select-group-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2));\r\n  padding-inline-start: calc(var(--mono-select-group-padding-x, calc(var(--mono-spacing) * 2)) + var(--_ms-group-level) * calc(var(--mono-spacing) * 2));\r\n  font-size: var(--mono-select-group-font-size, var(--mono-text-xs));\r\n  line-height: var(--mono-select-group-line-height, var(--mono-text-xs--lh));\r\n  font-weight: var(--mono-select-group-font-weight, var(--mono-font-weight-normal));\r\n  text-transform: var(--mono-select-group-text-transform, none);\r\n  letter-spacing: var(--mono-select-group-letter-spacing, normal);\r\n  color: var(--_mono-select-muted);\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n[mono-select] [mono-group][mono-level='1'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='1'] { --_ms-group-level: 1; }\r\n[mono-select] [mono-group][mono-level='2'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='2'] { --_ms-group-level: 2; }\r\n[mono-select] [mono-group][mono-level='3'],\r\n[mono-select] :where([mono-list-slot]) [data-mono-type='group'][data-mono-level='3'] { --_ms-group-level: 3; }\r\n\r\n/* group-sticky: pin headers while their rows scroll; nested levels stack on the\r\n   panel's own surface so options scroll cleanly underneath. */\r\n[mono-select] [mono-group][mono-sticky] {\r\n  position: sticky;\r\n  top: calc(var(--_ms-group-level) * 1.5rem);\r\n  z-index: calc(5 - var(--_ms-group-level));\r\n  background: var(--mono-select-dropdown-bg, var(--popover));\r\n}\r\n\r\n/* EXTENSION — the load-more affordance: an option-shaped ghost button */\r\n[mono-select] [mono-load-more] {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: var(--mono-select-option-gap, calc(var(--mono-spacing) * 2));\r\n  margin: 0;\r\n  padding-block: var(--mono-select-option-padding-y, calc(var(--mono-spacing) * 1.5));\r\n  padding-inline: var(--mono-select-option-padding-x, calc(var(--mono-spacing) * 2));\r\n  border: 0;\r\n  border-radius: var(--mono-select-option-radius, var(--mono-radius-sm));\r\n  background: transparent;\r\n  color: var(--_mono-select-muted);\r\n  font-family: inherit;\r\n  font-size: var(--mono-select-option-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-option-line-height, var(--mono-text-sm--lh));\r\n  font-weight: var(--mono-font-weight-medium);\r\n  cursor: pointer;\r\n  transition-property: color, background-color;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration-fast);\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-select] [mono-load-more]:hover:not([mono-loading]) {\r\n    background-color: var(--mono-select-option-active-bg, var(--muted));\r\n    color: var(--_mono-select-text);\r\n  }\r\n}\r\n\r\n[mono-select] [mono-load-more][mono-loading] {\r\n  cursor: default;\r\n  opacity: 0.7;\r\n}\r\n\r\n/* Consumer-rendered option rows (slot=\"list\"). `display: contents` so mono's own\r\n   placement wrapper generates no box: the rows the consumer writes lay out as if\r\n   they were direct children of the panel. */\r\n[mono-select] [mono-list-slot] {\r\n  display: contents;\r\n}\r\n\r\n/* =========================================\r\n   Message — helper / validation text under the field\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .fieldset legend + p, .field > p, .field section > p\r\n   — text-sm text-muted-foreground leading-normal font-normal */\r\n[mono-select] > [mono-message-wrap] {\r\n  display: block;\r\n  margin-top: var(--_mono-select-gap-y);\r\n}\r\n\r\n[mono-select] > [mono-message-wrap]:not(:has([mono-message]:not([mono-empty]))) {\r\n  display: none;\r\n}\r\n\r\n[mono-select] [mono-message] {\r\n  font-size: var(--mono-select-message-font-size, var(--mono-text-sm));\r\n  line-height: var(--mono-select-message-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  text-align: start;\r\n  color: var(--_mono-select-muted);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .field [role=\"alert\"] — text-destructive text-sm */\r\n[mono-select] [mono-message=\"invalid\"] {\r\n  color: var(--_mono-select-invalid);\r\n}\r\n\r\n[mono-select] [mono-message=\"valid\"] {\r\n  color: var(--_mono-select-valid);\r\n}\r\n\r\n[mono-select] [mono-message=\"warning\"] {\r\n  color: var(--_mono-select-warning);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  [mono-select] > [mono-trigger],\r\n  [mono-select] [mono-arrow],\r\n  [mono-select] [mono-clear],\r\n  [mono-select] [mono-item] {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* =========================================\r\n   label-position — the slots form/label-position.css reads\r\n   (top / notched / left / right; public knobs: --mono-select-label-width,\r\n   -label-side-gap, -label-notch-font-size, -label-notch-bg)\r\n   ========================================= */\r\n\r\n[mono-select][mono-label-position] {\r\n  --_mono-lp-width: var(--mono-select-label-width, auto);\r\n  --_mono-lp-gap: var(--mono-select-label-side-gap, calc(var(--mono-spacing) * 3));\r\n  --_mono-lp-height: var(--_mono-select-height);\r\n  --_mono-lp-box-min: var(--_mono-select-height);\r\n  --_mono-lp-padding-x: var(--_mono-select-padding-start);\r\n  --_mono-lp-padding-y: var(--mono-select-padding-y, 0px);\r\n  --_mono-lp-font: var(--mono-select-label-notch-font-size, var(--mono-text-xs));\r\n  --_mono-lp-notch-bg: var(--mono-select-label-notch-bg, var(--background));\r\n  --_mono-lp-field-bg: var(--_mono-select-bg);\r\n}\r\n";
-
 //#endregion
 //#region src/components/select/mono-select.ts
 let MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
@@ -2108,9 +2108,6 @@ let MonoSelect = class MonoSelect extends MonoSelectCore(LitElement) {
 		this._slotSuffix = [];
 		this._slotList = null;
 	}
-	static {
-		this.styles = [unsafeCSS(select_css_raw_default)];
-	}
 	createRenderRoot() {
 		return this;
 	}

package/dist/ui/shadow/accordion.js

@@ -1,4 +1,4 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { n as mdiGlyph, t as isIconifyClass } from "../../icon-BM9N-jOt.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";

package/dist/ui/shadow/alert.js

@@ -1,4 +1,4 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { n as mdiGlyph, t as isIconifyClass } from "../../icon-BM9N-jOt.js";
 import { a as closeIcon } from "../../field-icons-t8rXRCKs.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";

package/dist/ui/shadow/breadcrumb.js

@@ -1,4 +1,4 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, o as arrayHasChanged, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { t as isIconifyClass } from "../../icon-BM9N-jOt.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";

package/dist/ui/shadow/button-dropdown.js

@@ -1,9 +1,9 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, u as numberStringConverter } from "../../hydration-flush-DHrl4_KK.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, u as numberStringConverter } from "../../hydration-flush-BaE9gN3C.js";
 import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
 import { t as applyProps } from "../../element-props-xvw0EB7H.js";
-import { t as PopupPortalController } from "../../popup-portal-C8ttHDRX.js";
+import { t as PopupPortalController } from "../../popup-portal-CINuVjNY.js";
 import { a as rateLimitHasChanged } from "../../rate-limit-e9Jlpl5l.js";
-import { n as button_css_raw_default } from "../../mono-button.shadow-D9NdMsmH.js";
+import { n as button_css_raw_default } from "../../mono-button.shadow-DqZMpcqY.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, state } from "lit/decorators.js";
@@ -168,6 +168,7 @@ const MonoButtonDropdownCore = (superClass) => {
 			this.closeOnEscape = true;
 			this.cssClass = {};
 			this._resolvedSide = "bottom";
+			this._documentBound = false;
 			this._onDocumentClick = (event) => {
 				if (!this.modelValue || !this.closeOnOutsideClick) return;
 				const path = event.composedPath();
@@ -255,15 +256,27 @@ const MonoButtonDropdownCore = (superClass) => {
 		connectedCallback() {
 			super.connectedCallback();
 			if (isServer) return;
-			document.addEventListener("click", this._onDocumentClick, true);
-			document.addEventListener("keydown", this._onDocumentKeydown);
+			this._syncDocument();
 		}
 		disconnectedCallback() {
-			if (!isServer) {
+			this._syncDocument(false);
+			super.disconnectedCallback();
+		}
+		/**
+		* Outside-click / Escape listeners, bound while OPEN only (select's rule). Both handlers
+		* bail when closed, and a grid that puts one of these in every row held two `document`
+		* listeners per row — one capture-phase — in the path of every click and keystroke.
+		*/
+		_syncDocument(want = this.modelValue && this.isConnected) {
+			if (isServer || want === this._documentBound) return;
+			this._documentBound = want;
+			if (want) {
+				document.addEventListener("click", this._onDocumentClick, true);
+				document.addEventListener("keydown", this._onDocumentKeydown);
+			} else {
 				document.removeEventListener("click", this._onDocumentClick, true);
 				document.removeEventListener("keydown", this._onDocumentKeydown);
 			}
-			super.disconnectedCallback();
 		}
 		/** Entries are behind the trigger once there are more of them than `min`. */
 		get collapsed() {
@@ -327,6 +340,7 @@ const MonoButtonDropdownCore = (superClass) => {
 		}
 		updated(changed) {
 			super.updated?.(changed);
+			this._syncDocument();
 			this._applyRootAttrs(this._rootEl);
 		}
 		willUpdate(changed) {