@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/checkbox.js

@@ -1,12 +1,13 @@
-import { l as monoHostChildNodes } from "../mono-ui-CPV7rrdo.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, i as defineHybridPropAlias, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { t as MonoFormControlCore } from "../form-control-core-eeRr0zLU.js";
+import { l as monoHostChildNodes } from "../mono-ui-BwUc0L6B.js";
+import { t as customElement } from "../mono-element-C7vCschg.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 MonoFormControlCore } from "../form-control-core-CRZPZ1ru.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+
 //#region src/components/checkbox/checkbox-core.ts
 /**
 * `MonoCheckboxCore` — all render-mode-agnostic logic for `mono-checkbox`:
@@ -20,7 +21,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 *
 * SSR-safe: no `document`/`window` access; `focus`/`blur` query `this.renderRoot`.
 */
-var MonoCheckboxCore = (superClass) => {
+const MonoCheckboxCore = (superClass) => {
 	class MonoCheckboxCoreClass extends MonoFormControlCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -292,12 +293,14 @@ var MonoCheckboxCore = (superClass) => {
 	__decorate([state()], MonoCheckboxCoreClass.prototype, "_hasDescriptionSlotState", void 0);
 	return MonoCheckboxCoreClass;
 };
+
 //#endregion
-//#region src/components/checkbox/checkbox.css?raw
-var checkbox_default = "/* =========================================================================\r\n   mono-checkbox — a port of Basecoat's `.input[type='checkbox']` and the\r\n   `.label` 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-checkbox size=\"sm\" color=\"danger\" label=\"Agree\" model-value>\r\n     <label mono-checkbox mono-size=\"sm\" mono-color=\"danger\">\r\n       <input mono-input type=\"checkbox\" checked />\r\n       <span mono-box aria-hidden=\"true\"></span>\r\n       <span mono-label><span mono-label-text>Agree</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 STATES `mono-checked` / `mono-indeterminate`\r\n   / `mono-loading`; hand-written markup may rely on the native input's `:checked`\r\n   / `:indeterminate` instead — every state rule reads both. The old classes\r\n   (`.mono-checkbox.sm.mono-checkbox-checked`) are still emitted as inert hooks\r\n   until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-checkbox]                               ≡ .label (flex gap-2 text-sm font-medium leading-snug select-none)\r\n     :where([mono-checkbox]) > [mono-box]                  ≡ .input[type='checkbox'] (size-4 rounded-[4px] border-input shadow-xs; the real input is visually hidden)\r\n     [mono-checked] / [mono-input]:checked         ≡ :checked (bg-primary border-primary text-primary-foreground + the --check-icon mask)\r\n     [mono-indeterminate] / :indeterminate         ≡ EXTENSION (the same fill, a dash instead of the check)\r\n     [mono-input]:focus-visible + [mono-box]       ≡ 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:opacity-50 cursor-not-allowed\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 box 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     [mono-loading]                                ≡ EXTENSION (a spinner on the accent-filled box)\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule is\r\n   exactly one attribute strong — `:where([mono-checkbox]) [mono-box]` = (0,1,0) —\r\n   so a utility class handed in through `cssClass` (`rounded-3`, `font-800`, …)\r\n   wins by source order, while state rules (checked / indeterminate / focus /\r\n   invalid / disabled, keyed on the root or the native input) stay heavier and\r\n   win over it, as they always did.\r\n\r\n   Inner parts: [mono-input], [mono-box] (+ [mono-custom-icon] / [mono-custom-\r\n   indeterminate-icon] when a custom glyph replaces the default), [mono-icon] /\r\n   [mono-indeterminate-icon] (the custom glyph wrappers), [mono-spinner],\r\n   [mono-label] > [mono-label-text] / [mono-description]. The shadow build marks\r\n   an unassigned slot wrapper [mono-empty].\r\n\r\n   The box sits on the label's CAP BAND (see `--_mono-checkbox-line-offset`):\r\n   mono's own alignment rule, kept — Basecoat centres a lone checkbox on its\r\n   line 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-checkbox-{radius,shadow,ring-width,ring-alpha,bg,border-color}`\r\n   (the per-style `.input[type='checkbox']` deltas); every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"input\\[type='checkbox'\\]\"`).\r\n   ========================================================================= */\r\n\r\nmono-checkbox {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-checkbox] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-checkbox-text: var(--mono-checkbox-text, var(--foreground));\r\n  --_mono-checkbox-description: var(--mono-checkbox-description, var(--muted-foreground));\r\n  --_mono-checkbox-primary: var(--mono-checkbox-primary, var(--primary));\r\n  --_mono-checkbox-primary-foreground: var(--mono-checkbox-primary-foreground, var(--primary-foreground));\r\n  --_mono-checkbox-accent: var(--mono-checkbox-accent, var(--_mono-checkbox-accent-preset, var(--_mono-checkbox-primary)));\r\n  --_mono-checkbox-icon: var(--mono-checkbox-icon, var(--_mono-checkbox-icon-preset, var(--_mono-checkbox-primary-foreground)));\r\n  --_mono-checkbox-border-color: var(--mono-checkbox-border, var(--mono-checkbox-border-color, var(--input)));\r\n  --_mono-checkbox-bg: var(--mono-checkbox-bg, var(--mono-mode-surface));\r\n  --_mono-checkbox-shadow: var(--mono-checkbox-shadow, var(--mono-shadow-xs));\r\n  --_mono-checkbox-radius: var(--mono-checkbox-radius, 4px);\r\n  --_mono-checkbox-border-width: var(--mono-checkbox-border-width, var(--mono-border-width));\r\n  --_mono-checkbox-ring-color: var(--mono-checkbox-ring-color, var(--ring));\r\n  --_mono-checkbox-ring-width: var(--mono-checkbox-ring-width, var(--mono-ring-width));\r\n  --_mono-checkbox-ring-alpha: var(--mono-checkbox-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='checkbox'] — size-4 (= 4/9 of the\r\n     h-9 control); .field > label, .label — gap-2 text-sm leading-snug */\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-md, calc(var(--mono-control-height-md) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-md, var(--mono-text-sm));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-md, 0.8125rem);\r\n  --_mono-checkbox-glyph: var(--mono-checkbox-glyph, 87.5%);\r\n\r\n  /* ── whole pixels ────────────────────────────────────────────────────────\r\n     The box 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-checkbox-control-px: round(nearest, var(--_mono-checkbox-control), 1px);\r\n\r\n  /* ── alignment with the label ────────────────────────────────────────────\r\n     The box is centred on the label's CAP BAND — the ink the eye reads, not the\r\n     line box. `-optical-shift` is the measured correction (the line box carries\r\n     descender space the capitals never fill); `-optical-nudge` absorbs the\r\n     whole-pixel rounding of a font's ascent per size. See the pairing spec. */\r\n  --_mono-checkbox-label-line-height: var(--mono-checkbox-label-line-height, var(--mono-leading-snug));\r\n  --_mono-checkbox-optical-shift: 0.045;\r\n  --_mono-checkbox-optical-nudge: 0px;\r\n  --_mono-checkbox-line-offset: calc(\r\n    (var(--_mono-checkbox-label-font) * var(--_mono-checkbox-label-line-height) - var(--_mono-checkbox-control-px)) / 2 +\r\n      var(--_mono-checkbox-label-font) * var(--_mono-checkbox-optical-shift) + var(--_mono-checkbox-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-checkbox-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-checkbox-text);\r\n}\r\n\r\n[mono-checkbox],\r\n:where([mono-checkbox]) *,\r\n:where([mono-checkbox]) *::before,\r\n:where([mono-checkbox]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([mono-checkbox]) :is([mono-label], [mono-label-text], [mono-description])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* the box seats on the first line of a label that is actually there; a bare\r\n   box (what mono-table-checkbox emits) stays flush at the top */\r\n[mono-checkbox]:has([mono-label-text]:not([mono-empty])) > [mono-box] {\r\n  margin-top: var(--_mono-checkbox-line-offset, 0px);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: the box is 4/9 of the control step (vega md: 36 × 4/9 = 16px),\r\n   label, description and gap step with it (md = Basecoat's text-sm / gap-2)\r\n   ========================================= */\r\n\r\n[mono-checkbox][mono-size=\"xs\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-xs, calc(var(--mono-control-height-xs) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-xs, calc(var(--mono-spacing) * 1.25)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-xs, var(--mono-text-xs));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-xs, 0.6875rem);\r\n}\r\n\r\n[mono-checkbox][mono-size=\"sm\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-sm, calc(var(--mono-control-height-sm) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-sm, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-sm, 0.8125rem);\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-sm, var(--mono-text-xs));\r\n}\r\n\r\n[mono-checkbox][mono-size=\"lg\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-lg, calc(var(--mono-control-height-lg) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-lg, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-lg, var(--mono-text-base));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-lg, var(--mono-text-sm));\r\n  /* 16px text rounds its ascent such that the box lands ~0.35px low */\r\n  --_mono-checkbox-optical-nudge: -0.35px;\r\n}\r\n\r\n[mono-checkbox][mono-size=\"xl\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-xl, calc(var(--mono-control-height-xl) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-xl, calc(var(--mono-spacing) * 3)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-xl, var(--mono-text-lg));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-xl, var(--mono-text-base));\r\n}\r\n\r\n[mono-checkbox][mono-size=\"xxl\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-xxl, calc(var(--mono-control-height-xxl) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-xxl, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-xxl, var(--mono-text-xl));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-xxl, var(--mono-text-lg));\r\n  /* 20px text rounds the other way, leaving the box ~1.1px high */\r\n  --_mono-checkbox-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-checkbox]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-checkbox-accent-preset: var(--_mono-checkbox-primary);\r\n  --_mono-checkbox-icon-preset: var(--_mono-checkbox-primary-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"secondary\"] {\r\n  --_mono-checkbox-accent-preset: var(--secondary-foreground);\r\n  --_mono-checkbox-icon-preset: var(--secondary);\r\n}\r\n[mono-checkbox][mono-color=\"success\"] {\r\n  --_mono-checkbox-accent-preset: var(--success);\r\n  --_mono-checkbox-icon-preset: var(--success-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"danger\"] {\r\n  --_mono-checkbox-accent-preset: var(--destructive);\r\n  --_mono-checkbox-icon-preset: var(--destructive-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"warning\"] {\r\n  --_mono-checkbox-accent-preset: var(--warning);\r\n  --_mono-checkbox-icon-preset: var(--warning-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"info\"] {\r\n  --_mono-checkbox-accent-preset: var(--info);\r\n  --_mono-checkbox-icon-preset: var(--info-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"teal\"] {\r\n  --_mono-checkbox-accent-preset: var(--teal);\r\n  --_mono-checkbox-icon-preset: var(--teal-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"purple\"] {\r\n  --_mono-checkbox-accent-preset: var(--purple);\r\n  --_mono-checkbox-icon-preset: var(--purple-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"neutral\"] {\r\n  --_mono-checkbox-accent-preset: var(--neutral);\r\n  --_mono-checkbox-icon-preset: var(--neutral-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"dark\"] {\r\n  --_mono-checkbox-accent-preset: var(--dark);\r\n  --_mono-checkbox-icon-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 styles/vega.css .field > label, .label — in-data-[disabled=true]:opacity-50\r\n   A BUSY box is exempt: while a select-all drains the server every box on the grid\r\n   is disabled, but the one spinning was acted on — it reads as \"working\", never\r\n   \"unavailable\" */\r\n[mono-checkbox][mono-disabled]:not([mono-loading]),\r\n[mono-checkbox]:not([mono-loading]):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[mono-checkbox][mono-loading] {\r\n  cursor: progress;\r\n}\r\n\r\n/* the native input is the accessible control; the box is its painted twin */\r\n:where([mono-checkbox]) [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 box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/checkbox.css .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])\r\n   — relative shrink-0 appearance-none outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])\r\n   — flex size-4 items-center justify-center rounded-[4px] border border-input\r\n   shadow-xs transition-shadow (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-checkbox]) > [mono-box] {\r\n  --_mono-checkbox-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-checkbox-control-px);\r\n  height: var(--_mono-checkbox-control-px);\r\n  border: var(--_mono-checkbox-border-width) solid var(--_mono-checkbox-border-color);\r\n  border-radius: var(--_mono-checkbox-radius);\r\n  background-color: var(--_mono-checkbox-bg);\r\n  box-shadow: var(--_mono-checkbox-ring), var(--_mono-checkbox-shadow);\r\n  color: var(--_mono-checkbox-icon);\r\n  overflow: hidden;\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-checkbox]) > [mono-input]:focus-visible + [mono-box] {\r\n  border-color: var(--_mono-checkbox-ring-color);\r\n  --_mono-checkbox-ring: 0 0 0 var(--_mono-checkbox-ring-width) color-mix(in oklab, var(--_mono-checkbox-ring-color) var(--_mono-checkbox-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); aria-invalid:checked:border-primary */\r\n[mono-checkbox][mono-invalid] > [mono-box],\r\n:where([mono-checkbox]) > [mono-input][aria-invalid=\"true\"] + [mono-box] {\r\n  border-color: var(--mono-mode-invalid-border);\r\n  --_mono-checkbox-ring: 0 0 0 var(--_mono-checkbox-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* checked:bg-primary checked:border-primary checked:text-primary-foreground —\r\n   generalised per hue; indeterminate takes the same fill */\r\n[mono-checkbox]:is([mono-checked], [mono-indeterminate]) > [mono-box],\r\n:where([mono-checkbox]) > [mono-input]:is(:checked, :indeterminate) + [mono-box] {\r\n  border-color: var(--_mono-checkbox-accent);\r\n  background-color: var(--_mono-checkbox-accent);\r\n  color: var(--_mono-checkbox-icon);\r\n}\r\n\r\n/* =========================================\r\n   Glyphs — every glyph is out of flow (`inset: 0; margin: auto`) so the box keeps\r\n   a stable synthesised baseline whichever one is showing\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/checkbox.css .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])\r\n   — checked:after: block bg-current, mask-image var(--check-icon), mask-size 0.875rem\r\n   (= 87.5% of the 16px box; mono sizes it as that share so it tracks every step) */\r\n:where([mono-checkbox]) > [mono-box]::before {\r\n  content: \"\";\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: var(--_mono-checkbox-glyph);\r\n  height: var(--_mono-checkbox-glyph);\r\n  background-color: currentColor;\r\n  pointer-events: none;\r\n  mask-image: var(--mono-checkbox-check-icon, var(--check-icon));\r\n  mask-repeat: no-repeat;\r\n  mask-position: center;\r\n  mask-size: contain;\r\n  -webkit-mask-image: var(--mono-checkbox-check-icon, var(--check-icon));\r\n  -webkit-mask-repeat: no-repeat;\r\n  -webkit-mask-position: center;\r\n  -webkit-mask-size: contain;\r\n}\r\n\r\n/* EXTENSION — the indeterminate dash: 60% wide, 14% tall (2px at md), pill-shaped */\r\n:where([mono-checkbox]) > [mono-box]::after {\r\n  content: \"\";\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: 60%;\r\n  height: max(1.5px, 14%);\r\n  border-radius: 999px;\r\n  background-color: currentColor;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-checkbox][mono-checked]:not([mono-indeterminate]) > [mono-box]:not([mono-custom-icon])::before,\r\n:where([mono-checkbox]) > [mono-input]:checked:not(:indeterminate) + [mono-box]:not([mono-custom-icon])::before {\r\n  display: block;\r\n}\r\n\r\n[mono-checkbox][mono-indeterminate] > [mono-box]:not([mono-custom-indeterminate-icon])::after,\r\n:where([mono-checkbox]) > [mono-input]:indeterminate + [mono-box]:not([mono-custom-indeterminate-icon])::after {\r\n  display: block;\r\n}\r\n\r\n/* a custom glyph replaces the default one (the box is marked, or holds the wrapper) */\r\n:where([mono-checkbox]) > [mono-box]:has([mono-icon])::before,\r\n:where([mono-checkbox]) > [mono-box]:has([mono-indeterminate-icon])::after {\r\n  display: none !important;\r\n}\r\n\r\n/* custom icon wrappers — fill the box's inner area, out of flow like the pseudo-glyphs */\r\n:where([mono-checkbox]) [mono-icon],\r\n:where([mono-checkbox]) [mono-indeterminate-icon] {\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: 100%;\r\n  height: 100%;\r\n  color: var(--_mono-checkbox-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-checkbox]) [mono-icon] > *,\r\n:where([mono-checkbox]) [mono-indeterminate-icon] > * {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-checkbox][mono-checked]:not([mono-indeterminate]) [mono-icon],\r\n:where([mono-checkbox]) > [mono-input]:checked:not(:indeterminate) + [mono-box] [mono-icon],\r\n[mono-checkbox][mono-indeterminate] [mono-indeterminate-icon],\r\n:where([mono-checkbox]) > [mono-input]:indeterminate + [mono-box] [mono-indeterminate-icon] {\r\n  display: inline-block;\r\n}\r\n\r\n/* the shadow build projects the custom glyph through a bare <slot> */\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"icon\"],\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"indeterminate-icon\"] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"icon\"]::slotted(*),\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"indeterminate-icon\"]::slotted(*) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  color: var(--_mono-checkbox-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n:where([mono-checkbox]) > [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-checkbox]) [mono-label-text] {\r\n  display: block;\r\n  font-size: var(--_mono-checkbox-label-font);\r\n  line-height: var(--_mono-checkbox-label-line-height);\r\n  font-weight: var(--mono-checkbox-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--_mono-checkbox-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-checkbox]) [mono-description] {\r\n  display: block;\r\n  margin-top: calc(var(--mono-spacing) * 0.5);\r\n  font-size: var(--_mono-checkbox-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-checkbox-description);\r\n}\r\n\r\n/* =========================================\r\n   Loading — EXTENSION: a spinner in the box (the select-all drain of\r\n   mono-table-checkbox and mono-tag-input). THE ONLY copy of this look: the two\r\n   hosts emit [mono-checkbox][mono-loading] > [mono-box] > [mono-spinner] and\r\n   restate nothing.\r\n   ========================================= */\r\n\r\n/* the busy box fills with the accent whatever its checked state, so the spinner\r\n   always has the accent behind it and the icon colour in front — never white on\r\n   white; no transition, the state may last 200ms */\r\n[mono-checkbox][mono-loading] > [mono-box] {\r\n  border-color: var(--_mono-checkbox-accent);\r\n  background-color: var(--_mono-checkbox-accent);\r\n  color: var(--_mono-checkbox-icon);\r\n  transition: none;\r\n}\r\n\r\n:where([mono-checkbox]) [mono-spinner] {\r\n  display: block;\r\n  width: 82%;\r\n  height: 82%;\r\n  animation: mono-checkbox-spin 0.7s linear infinite;\r\n}\r\n\r\n@keyframes mono-checkbox-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-checkbox]) > [mono-box] {\r\n    transition: none;\r\n  }\r\n\r\n  :where([mono-checkbox]) [mono-spinner] {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\checkbox\checkbox.css?raw.js
+var checkbox_css_raw_default = "/* =========================================================================\r\n   mono-checkbox — a port of Basecoat's `.input[type='checkbox']` and the\r\n   `.label` 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-checkbox size=\"sm\" color=\"danger\" label=\"Agree\" model-value>\r\n     <label mono-checkbox mono-size=\"sm\" mono-color=\"danger\">\r\n       <input mono-input type=\"checkbox\" checked />\r\n       <span mono-box aria-hidden=\"true\"></span>\r\n       <span mono-label><span mono-label-text>Agree</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 STATES `mono-checked` / `mono-indeterminate`\r\n   / `mono-loading`; hand-written markup may rely on the native input's `:checked`\r\n   / `:indeterminate` instead — every state rule reads both. The old classes\r\n   (`.mono-checkbox.sm.mono-checkbox-checked`) are still emitted as inert hooks\r\n   until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-checkbox]                               ≡ .label (flex gap-2 text-sm font-medium leading-snug select-none)\r\n     :where([mono-checkbox]) > [mono-box]                  ≡ .input[type='checkbox'] (size-4 rounded-[4px] border-input shadow-xs; the real input is visually hidden)\r\n     [mono-checked] / [mono-input]:checked         ≡ :checked (bg-primary border-primary text-primary-foreground + the --check-icon mask)\r\n     [mono-indeterminate] / :indeterminate         ≡ EXTENSION (the same fill, a dash instead of the check)\r\n     [mono-input]:focus-visible + [mono-box]       ≡ 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:opacity-50 cursor-not-allowed\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 box 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     [mono-loading]                                ≡ EXTENSION (a spinner on the accent-filled box)\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule is\r\n   exactly one attribute strong — `:where([mono-checkbox]) [mono-box]` = (0,1,0) —\r\n   so a utility class handed in through `cssClass` (`rounded-3`, `font-800`, …)\r\n   wins by source order, while state rules (checked / indeterminate / focus /\r\n   invalid / disabled, keyed on the root or the native input) stay heavier and\r\n   win over it, as they always did.\r\n\r\n   Inner parts: [mono-input], [mono-box] (+ [mono-custom-icon] / [mono-custom-\r\n   indeterminate-icon] when a custom glyph replaces the default), [mono-icon] /\r\n   [mono-indeterminate-icon] (the custom glyph wrappers), [mono-spinner],\r\n   [mono-label] > [mono-label-text] / [mono-description]. The shadow build marks\r\n   an unassigned slot wrapper [mono-empty].\r\n\r\n   The box sits on the label's CAP BAND (see `--_mono-checkbox-line-offset`):\r\n   mono's own alignment rule, kept — Basecoat centres a lone checkbox on its\r\n   line 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-checkbox-{radius,shadow,ring-width,ring-alpha,bg,border-color}`\r\n   (the per-style `.input[type='checkbox']` deltas); every fallback here is vega's\r\n   value (`node scripts/basecoat-styles.mjs --varying \"input\\[type='checkbox'\\]\"`).\r\n   ========================================================================= */\r\n\r\nmono-checkbox {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-checkbox] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-checkbox-text: var(--mono-checkbox-text, var(--foreground));\r\n  --_mono-checkbox-description: var(--mono-checkbox-description, var(--muted-foreground));\r\n  --_mono-checkbox-primary: var(--mono-checkbox-primary, var(--primary));\r\n  --_mono-checkbox-primary-foreground: var(--mono-checkbox-primary-foreground, var(--primary-foreground));\r\n  --_mono-checkbox-accent: var(--mono-checkbox-accent, var(--_mono-checkbox-accent-preset, var(--_mono-checkbox-primary)));\r\n  --_mono-checkbox-icon: var(--mono-checkbox-icon, var(--_mono-checkbox-icon-preset, var(--_mono-checkbox-primary-foreground)));\r\n  --_mono-checkbox-border-color: var(--mono-checkbox-border, var(--mono-checkbox-border-color, var(--input)));\r\n  --_mono-checkbox-bg: var(--mono-checkbox-bg, var(--mono-mode-surface));\r\n  --_mono-checkbox-shadow: var(--mono-checkbox-shadow, var(--mono-shadow-xs));\r\n  --_mono-checkbox-radius: var(--mono-checkbox-radius, 4px);\r\n  --_mono-checkbox-border-width: var(--mono-checkbox-border-width, var(--mono-border-width));\r\n  --_mono-checkbox-ring-color: var(--mono-checkbox-ring-color, var(--ring));\r\n  --_mono-checkbox-ring-width: var(--mono-checkbox-ring-width, var(--mono-ring-width));\r\n  --_mono-checkbox-ring-alpha: var(--mono-checkbox-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='checkbox'] — size-4 (= 4/9 of the\r\n     h-9 control); .field > label, .label — gap-2 text-sm leading-snug */\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-md, calc(var(--mono-control-height-md) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-md, var(--mono-text-sm));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-md, 0.8125rem);\r\n  --_mono-checkbox-glyph: var(--mono-checkbox-glyph, 87.5%);\r\n\r\n  /* ── whole pixels ────────────────────────────────────────────────────────\r\n     The box 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-checkbox-control-px: round(nearest, var(--_mono-checkbox-control), 1px);\r\n\r\n  /* ── alignment with the label ────────────────────────────────────────────\r\n     The box is centred on the label's CAP BAND — the ink the eye reads, not the\r\n     line box. `-optical-shift` is the measured correction (the line box carries\r\n     descender space the capitals never fill); `-optical-nudge` absorbs the\r\n     whole-pixel rounding of a font's ascent per size. See the pairing spec. */\r\n  --_mono-checkbox-label-line-height: var(--mono-checkbox-label-line-height, var(--mono-leading-snug));\r\n  --_mono-checkbox-optical-shift: 0.045;\r\n  --_mono-checkbox-optical-nudge: 0px;\r\n  --_mono-checkbox-line-offset: calc(\r\n    (var(--_mono-checkbox-label-font) * var(--_mono-checkbox-label-line-height) - var(--_mono-checkbox-control-px)) / 2 +\r\n      var(--_mono-checkbox-label-font) * var(--_mono-checkbox-optical-shift) + var(--_mono-checkbox-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-checkbox-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-checkbox-text);\r\n}\r\n\r\n[mono-checkbox],\r\n:where([mono-checkbox]) *,\r\n:where([mono-checkbox]) *::before,\r\n:where([mono-checkbox]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:where([mono-checkbox]) :is([mono-label], [mono-label-text], [mono-description])[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* the box seats on the first line of a label that is actually there; a bare\r\n   box (what mono-table-checkbox emits) stays flush at the top */\r\n[mono-checkbox]:has([mono-label-text]:not([mono-empty])) > [mono-box] {\r\n  margin-top: var(--_mono-checkbox-line-offset, 0px);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: the box is 4/9 of the control step (vega md: 36 × 4/9 = 16px),\r\n   label, description and gap step with it (md = Basecoat's text-sm / gap-2)\r\n   ========================================= */\r\n\r\n[mono-checkbox][mono-size=\"xs\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-xs, calc(var(--mono-control-height-xs) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-xs, calc(var(--mono-spacing) * 1.25)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-xs, var(--mono-text-xs));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-xs, 0.6875rem);\r\n}\r\n\r\n[mono-checkbox][mono-size=\"sm\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-sm, calc(var(--mono-control-height-sm) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-sm, calc(var(--mono-spacing) * 1.5)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-sm, 0.8125rem);\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-sm, var(--mono-text-xs));\r\n}\r\n\r\n[mono-checkbox][mono-size=\"lg\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-lg, calc(var(--mono-control-height-lg) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-lg, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-lg, var(--mono-text-base));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-lg, var(--mono-text-sm));\r\n  /* 16px text rounds its ascent such that the box lands ~0.35px low */\r\n  --_mono-checkbox-optical-nudge: -0.35px;\r\n}\r\n\r\n[mono-checkbox][mono-size=\"xl\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-xl, calc(var(--mono-control-height-xl) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-xl, calc(var(--mono-spacing) * 3)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-xl, var(--mono-text-lg));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-xl, var(--mono-text-base));\r\n}\r\n\r\n[mono-checkbox][mono-size=\"xxl\"] {\r\n  --_mono-checkbox-control: var(--mono-checkbox-size-xxl, calc(var(--mono-control-height-xxl) * 4 / 9));\r\n  --_mono-checkbox-gap: var(--mono-checkbox-gap, var(--mono-checkbox-gap-xxl, calc(var(--mono-spacing) * 3.5)));\r\n  --_mono-checkbox-label-font: var(--mono-checkbox-label-font-xxl, var(--mono-text-xl));\r\n  --_mono-checkbox-description-font: var(--mono-checkbox-description-font-xxl, var(--mono-text-lg));\r\n  /* 20px text rounds the other way, leaving the box ~1.1px high */\r\n  --_mono-checkbox-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-checkbox]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n  --_mono-checkbox-accent-preset: var(--_mono-checkbox-primary);\r\n  --_mono-checkbox-icon-preset: var(--_mono-checkbox-primary-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"secondary\"] {\r\n  --_mono-checkbox-accent-preset: var(--secondary-foreground);\r\n  --_mono-checkbox-icon-preset: var(--secondary);\r\n}\r\n[mono-checkbox][mono-color=\"success\"] {\r\n  --_mono-checkbox-accent-preset: var(--success);\r\n  --_mono-checkbox-icon-preset: var(--success-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"danger\"] {\r\n  --_mono-checkbox-accent-preset: var(--destructive);\r\n  --_mono-checkbox-icon-preset: var(--destructive-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"warning\"] {\r\n  --_mono-checkbox-accent-preset: var(--warning);\r\n  --_mono-checkbox-icon-preset: var(--warning-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"info\"] {\r\n  --_mono-checkbox-accent-preset: var(--info);\r\n  --_mono-checkbox-icon-preset: var(--info-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"teal\"] {\r\n  --_mono-checkbox-accent-preset: var(--teal);\r\n  --_mono-checkbox-icon-preset: var(--teal-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"purple\"] {\r\n  --_mono-checkbox-accent-preset: var(--purple);\r\n  --_mono-checkbox-icon-preset: var(--purple-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"neutral\"] {\r\n  --_mono-checkbox-accent-preset: var(--neutral);\r\n  --_mono-checkbox-icon-preset: var(--neutral-foreground);\r\n}\r\n[mono-checkbox][mono-color=\"dark\"] {\r\n  --_mono-checkbox-accent-preset: var(--dark);\r\n  --_mono-checkbox-icon-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 styles/vega.css .field > label, .label — in-data-[disabled=true]:opacity-50\r\n   A BUSY box is exempt: while a select-all drains the server every box on the grid\r\n   is disabled, but the one spinning was acted on — it reads as \"working\", never\r\n   \"unavailable\" */\r\n[mono-checkbox][mono-disabled]:not([mono-loading]),\r\n[mono-checkbox]:not([mono-loading]):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[mono-checkbox][mono-loading] {\r\n  cursor: progress;\r\n}\r\n\r\n/* the native input is the accessible control; the box is its painted twin */\r\n:where([mono-checkbox]) [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 box\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/checkbox.css .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])\r\n   — relative shrink-0 appearance-none outline-none */\r\n/* basecoat@1.0.2 styles/vega.css .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])\r\n   — flex size-4 items-center justify-center rounded-[4px] border border-input\r\n   shadow-xs transition-shadow (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-checkbox]) > [mono-box] {\r\n  --_mono-checkbox-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-checkbox-control-px);\r\n  height: var(--_mono-checkbox-control-px);\r\n  border: var(--_mono-checkbox-border-width) solid var(--_mono-checkbox-border-color);\r\n  border-radius: var(--_mono-checkbox-radius);\r\n  background-color: var(--_mono-checkbox-bg);\r\n  box-shadow: var(--_mono-checkbox-ring), var(--_mono-checkbox-shadow);\r\n  color: var(--_mono-checkbox-icon);\r\n  overflow: hidden;\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-checkbox]) > [mono-input]:focus-visible + [mono-box] {\r\n  border-color: var(--_mono-checkbox-ring-color);\r\n  --_mono-checkbox-ring: 0 0 0 var(--_mono-checkbox-ring-width) color-mix(in oklab, var(--_mono-checkbox-ring-color) var(--_mono-checkbox-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); aria-invalid:checked:border-primary */\r\n[mono-checkbox][mono-invalid] > [mono-box],\r\n:where([mono-checkbox]) > [mono-input][aria-invalid=\"true\"] + [mono-box] {\r\n  border-color: var(--mono-mode-invalid-border);\r\n  --_mono-checkbox-ring: 0 0 0 var(--_mono-checkbox-ring-width) var(--mono-mode-invalid-ring);\r\n}\r\n\r\n/* checked:bg-primary checked:border-primary checked:text-primary-foreground —\r\n   generalised per hue; indeterminate takes the same fill */\r\n[mono-checkbox]:is([mono-checked], [mono-indeterminate]) > [mono-box],\r\n:where([mono-checkbox]) > [mono-input]:is(:checked, :indeterminate) + [mono-box] {\r\n  border-color: var(--_mono-checkbox-accent);\r\n  background-color: var(--_mono-checkbox-accent);\r\n  color: var(--_mono-checkbox-icon);\r\n}\r\n\r\n/* =========================================\r\n   Glyphs — every glyph is out of flow (`inset: 0; margin: auto`) so the box keeps\r\n   a stable synthesised baseline whichever one is showing\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/checkbox.css .field > input[type='checkbox']:not([role='switch']), .input[type='checkbox']:not([role='switch'])\r\n   — checked:after: block bg-current, mask-image var(--check-icon), mask-size 0.875rem\r\n   (= 87.5% of the 16px box; mono sizes it as that share so it tracks every step) */\r\n:where([mono-checkbox]) > [mono-box]::before {\r\n  content: \"\";\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: var(--_mono-checkbox-glyph);\r\n  height: var(--_mono-checkbox-glyph);\r\n  background-color: currentColor;\r\n  pointer-events: none;\r\n  mask-image: var(--mono-checkbox-check-icon, var(--check-icon));\r\n  mask-repeat: no-repeat;\r\n  mask-position: center;\r\n  mask-size: contain;\r\n  -webkit-mask-image: var(--mono-checkbox-check-icon, var(--check-icon));\r\n  -webkit-mask-repeat: no-repeat;\r\n  -webkit-mask-position: center;\r\n  -webkit-mask-size: contain;\r\n}\r\n\r\n/* EXTENSION — the indeterminate dash: 60% wide, 14% tall (2px at md), pill-shaped */\r\n:where([mono-checkbox]) > [mono-box]::after {\r\n  content: \"\";\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: 60%;\r\n  height: max(1.5px, 14%);\r\n  border-radius: 999px;\r\n  background-color: currentColor;\r\n  pointer-events: none;\r\n}\r\n\r\n[mono-checkbox][mono-checked]:not([mono-indeterminate]) > [mono-box]:not([mono-custom-icon])::before,\r\n:where([mono-checkbox]) > [mono-input]:checked:not(:indeterminate) + [mono-box]:not([mono-custom-icon])::before {\r\n  display: block;\r\n}\r\n\r\n[mono-checkbox][mono-indeterminate] > [mono-box]:not([mono-custom-indeterminate-icon])::after,\r\n:where([mono-checkbox]) > [mono-input]:indeterminate + [mono-box]:not([mono-custom-indeterminate-icon])::after {\r\n  display: block;\r\n}\r\n\r\n/* a custom glyph replaces the default one (the box is marked, or holds the wrapper) */\r\n:where([mono-checkbox]) > [mono-box]:has([mono-icon])::before,\r\n:where([mono-checkbox]) > [mono-box]:has([mono-indeterminate-icon])::after {\r\n  display: none !important;\r\n}\r\n\r\n/* custom icon wrappers — fill the box's inner area, out of flow like the pseudo-glyphs */\r\n:where([mono-checkbox]) [mono-icon],\r\n:where([mono-checkbox]) [mono-indeterminate-icon] {\r\n  display: none;\r\n  position: absolute;\r\n  inset: 0;\r\n  margin: auto;\r\n  width: 100%;\r\n  height: 100%;\r\n  color: var(--_mono-checkbox-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-checkbox]) [mono-icon] > *,\r\n:where([mono-checkbox]) [mono-indeterminate-icon] > * {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n[mono-checkbox][mono-checked]:not([mono-indeterminate]) [mono-icon],\r\n:where([mono-checkbox]) > [mono-input]:checked:not(:indeterminate) + [mono-box] [mono-icon],\r\n[mono-checkbox][mono-indeterminate] [mono-indeterminate-icon],\r\n:where([mono-checkbox]) > [mono-input]:indeterminate + [mono-box] [mono-indeterminate-icon] {\r\n  display: inline-block;\r\n}\r\n\r\n/* the shadow build projects the custom glyph through a bare <slot> */\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"icon\"],\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"indeterminate-icon\"] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"icon\"]::slotted(*),\r\n:where([mono-checkbox]) > [mono-box] > slot[name=\"indeterminate-icon\"]::slotted(*) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  color: var(--_mono-checkbox-icon);\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Label\r\n   ========================================= */\r\n\r\n:where([mono-checkbox]) > [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-checkbox]) [mono-label-text] {\r\n  display: block;\r\n  font-size: var(--_mono-checkbox-label-font);\r\n  line-height: var(--_mono-checkbox-label-line-height);\r\n  font-weight: var(--mono-checkbox-label-font-weight, var(--mono-label-font-weight, var(--mono-font-weight-medium)));\r\n  color: var(--_mono-checkbox-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-checkbox]) [mono-description] {\r\n  display: block;\r\n  margin-top: calc(var(--mono-spacing) * 0.5);\r\n  font-size: var(--_mono-checkbox-description-font);\r\n  line-height: var(--mono-leading-normal);\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-checkbox-description);\r\n}\r\n\r\n/* =========================================\r\n   Loading — EXTENSION: a spinner in the box (the select-all drain of\r\n   mono-table-checkbox and mono-tag-input). THE ONLY copy of this look: the two\r\n   hosts emit [mono-checkbox][mono-loading] > [mono-box] > [mono-spinner] and\r\n   restate nothing.\r\n   ========================================= */\r\n\r\n/* the busy box fills with the accent whatever its checked state, so the spinner\r\n   always has the accent behind it and the icon colour in front — never white on\r\n   white; no transition, the state may last 200ms */\r\n[mono-checkbox][mono-loading] > [mono-box] {\r\n  border-color: var(--_mono-checkbox-accent);\r\n  background-color: var(--_mono-checkbox-accent);\r\n  color: var(--_mono-checkbox-icon);\r\n  transition: none;\r\n}\r\n\r\n:where([mono-checkbox]) [mono-spinner] {\r\n  display: block;\r\n  width: 82%;\r\n  height: 82%;\r\n  animation: mono-checkbox-spin 0.7s linear infinite;\r\n}\r\n\r\n@keyframes mono-checkbox-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-checkbox]) > [mono-box] {\r\n    transition: none;\r\n  }\r\n\r\n  :where([mono-checkbox]) [mono-spinner] {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/checkbox/mono-checkbox.ts
-var MonoCheckbox = class MonoCheckbox extends MonoCheckboxCore(LitElement) {
+let MonoCheckbox = class MonoCheckbox extends MonoCheckboxCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
@@ -307,7 +310,7 @@ var MonoCheckbox = class MonoCheckbox extends MonoCheckboxCore(LitElement) {
 		this._slotDescription = [];
 	}
 	static {
-		this.styles = [unsafeCSS(checkbox_default)];
+		this.styles = [unsafeCSS(checkbox_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -368,6 +371,7 @@ var MonoCheckbox = class MonoCheckbox extends MonoCheckboxCore(LitElement) {
 };
 __decorate([state()], MonoCheckbox.prototype, "_slotsCaptured", void 0);
 MonoCheckbox = __decorate([customElement("mono-checkbox")], MonoCheckbox);
+
 //#endregion
 //#region src/components/checkbox/checkbox-utils.ts
 /**
@@ -409,5 +413,6 @@ function generateCheckboxAttributes(disabled, checked, indeterminate, label) {
 		"aria-label": label || void 0
 	};
 }
+
 //#endregion
-export { MonoCheckbox, generateCheckboxAttributes, validateCheckboxProps };
+export { MonoCheckbox, generateCheckboxAttributes, validateCheckboxProps };

package/dist/ui/chip.js

@@ -1,11 +1,12 @@
-import { n as defineMonoElement, t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { n as bucketHasContent, r as captureLightSlots, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
+import { n as defineMonoElement, t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { n as bucketHasContent, r as captureLightSlots, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
+
 //#region src/components/chip/chip-core.ts
 /**
 * `MonoChipCore` — all render-mode-agnostic logic for `mono-chip`: reactive
@@ -19,7 +20,7 @@ import { when } from "lit/directives/when.js";
 * SSR-safe: no `document`/`window` access; `_chipElement` (`@query`) is lazy and
 * `focus/blur/click` only run client-side.
 */
-var MonoChipCore = (superClass) => {
+const MonoChipCore = (superClass) => {
 	class MonoChipCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -266,19 +267,21 @@ var MonoChipCore = (superClass) => {
 	__decorate([query("div > span, div > a")], MonoChipCoreClass.prototype, "_chipElement", void 0);
 	return MonoChipCoreClass;
 };
+
 //#endregion
-//#region src/components/chip/chip.css?raw
-var chip_default = "/* =========================================================================\r\n   mono-chip — a port of Basecoat's `.badge` (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-chip size=\"lg\" color=\"success\" variant=\"solid\" label=\"Active\" dot>\r\n     <span mono-chip mono-size=\"lg\" mono-color=\"success\" mono-variant=\"solid\" mono-has-dot>\r\n       <span mono-main>\r\n         <span mono-content>\r\n           <span mono-dot></span>\r\n           <span mono-label>Active</span>\r\n           <button mono-close><span mono-glyph class=\"i-mdi-close\"></span></button>\r\n         </span>\r\n       </span>\r\n     </span>\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])` = soft, no\r\n   `mono-rounded` = the pill). The element renders these on its root (both\r\n   builds) plus the states `mono-has-dot` (the dot PART is `mono-dot`, so the state\r\n   spells itself out) / `mono-removable` / `mono-clickable` /\r\n   `mono-disabled` / `mono-selected` and `mono-icon-position=\"right\"`. The old\r\n   classes (`.mono-chip.md.soft-primary`, `.chip-label`, `.chip-close`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them — except\r\n   `rounded-<step>`, which is GONE: that is Tailwind/UnoCSS's own utility\r\n   namespace, so on a page shipping those it was never inert (it rounded the\r\n   chip's outer box). Use `mono-rounded` / the `rounded` prop.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-chip]                   ≡ the layout box only — NOT painted (see below)\r\n     [mono-main]                   ≡ .badge (inline-flex w-fit shrink-0 items-center\r\n                                     justify-center overflow-hidden whitespace-nowrap,\r\n                                     h-5 gap-1 rounded-4xl border border-transparent\r\n                                     px-2 py-0.5 text-xs font-medium transition-all,\r\n                                     focus-visible:border-ring ring-[3px] ring-ring/50)\r\n     [mono-variant=\"solid\"]        ≡ .badge[data-variant='primary'] (bg-c text-c-foreground,\r\n                                     [a]:hover:bg-c/80) — generalised to every hue\r\n     [mono-variant=\"soft\"]         ≡ .badge[data-variant='destructive'] (bg-c/10 text-c,\r\n                                     [a]:hover:bg-c/20, dark bg-c/20) — generalised; the DEFAULT\r\n     [mono-variant=\"outline\"]      ≡ .badge[data-variant='outline'] (border-border text-foreground,\r\n                                     [a]:hover:bg-muted) + the hue on the edge and the ink\r\n     [mono-color=\"secondary\"]      ≡ .badge[data-variant='secondary'] (the muted surface pair)\r\n     [mono-size=\"md\"]              ≡ .badge's own h-5 px-2 text-xs; the other five are EXTENSION\r\n                                     (Basecoat ships one badge size)\r\n     [mono-rounded=\"…\"]            ≡ EXTENSION (the shared corner ladder; unset = rounded-4xl)\r\n     [mono-close]                  ≡ .combobox-chip-remove (opacity-50 hover:opacity-100, svg size-3.5)\r\n     [mono-has-dot] / [mono-dot] / [mono-selected] / [mono-clickable] ≡ EXTENSION\r\n     [mono-disabled]               ≡ .btn disabled:opacity-50\r\n     [mono-status-dot]             ≡ EXTENSION (the standalone status-dot helper)\r\n\r\n   WHY THE ROOT PAINTS NOTHING. `[mono-chip]` is also what a FIELD's internal\r\n   chip carries: `<mono-tag-input>` renders Basecoat combobox chips as\r\n   `[mono-chip] > [mono-chip-main] > …` and paints them in tag-input.css. Those\r\n   rules are `[mono-tag-input] [mono-chip]` = (0,2,0) and win over this sheet,\r\n   but only where they overlap — so this sheet keeps the root to layout plus\r\n   custom properties (which a field's rules simply don't read) and paints the\r\n   badge on `[mono-main]`, a part name a field chip does not have. The two never\r\n   collide, and a real `<mono-chip>` slotted INTO a field keeps its own look.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING\r\n   rule is exactly one attribute strong — `:where([mono-chip]) [mono-label]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-main] > [mono-content] > [mono-dot] / [data-mono-slot=icon]\r\n   / [mono-label] / [mono-close] > [mono-glyph].\r\n\r\n   FLAVORS set `--mono-chip-{radius,border-width,font-weight,letter-spacing,\r\n   text-transform}` and the VARIANT-scoped paint knobs\r\n   `--mono-chip-{soft,solid,outline}-{bg,color,border-color}` (the shared\r\n   `--mono-chip-bg` / `-color` is the CONSUMER's blanket override and repaints\r\n   all three looks at once)` and the per-size `-height-<size>` /\r\n   `-padding-x-<size>` / `-gap-<size>` / `-font-size-<size>` /\r\n   `-glyph-size-<size>` (the size-agnostic twin of each of those is the\r\n   CONSUMER's override — a flavor writing it would flatten the whole ladder);\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.badge\"`).\r\n   ========================================================================= */\r\n\r\nmono-chip {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-chip] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ──────────── */\r\n  --_mono-chip-primary: var(--mono-chip-primary, var(--primary));\r\n  --_mono-chip-primary-foreground: var(--mono-chip-primary-foreground, var(--primary-foreground));\r\n  --_mono-chip-secondary: var(--mono-chip-secondary, var(--secondary));\r\n  --_mono-chip-secondary-foreground: var(--mono-chip-secondary-foreground, var(--secondary-foreground));\r\n  --_mono-chip-success: var(--mono-chip-success, var(--success));\r\n  --_mono-chip-success-foreground: var(--mono-chip-success-foreground, var(--success-foreground));\r\n  --_mono-chip-danger: var(--mono-chip-danger, var(--destructive));\r\n  --_mono-chip-danger-foreground: var(--mono-chip-danger-foreground, var(--destructive-foreground));\r\n  --_mono-chip-warning: var(--mono-chip-warning, var(--warning));\r\n  --_mono-chip-warning-foreground: var(--mono-chip-warning-foreground, var(--warning-foreground));\r\n  --_mono-chip-info: var(--mono-chip-info, var(--info));\r\n  --_mono-chip-info-foreground: var(--mono-chip-info-foreground, var(--info-foreground));\r\n  --_mono-chip-teal: var(--mono-chip-teal, var(--teal));\r\n  --_mono-chip-teal-foreground: var(--mono-chip-teal-foreground, var(--teal-foreground));\r\n  --_mono-chip-purple: var(--mono-chip-purple, var(--purple));\r\n  --_mono-chip-purple-foreground: var(--mono-chip-purple-foreground, var(--purple-foreground));\r\n  --_mono-chip-neutral: var(--mono-chip-neutral, var(--neutral));\r\n  --_mono-chip-neutral-foreground: var(--mono-chip-neutral-foreground, var(--neutral-foreground));\r\n  --_mono-chip-dark: var(--mono-chip-dark, var(--dark));\r\n  --_mono-chip-dark-foreground: var(--mono-chip-dark-foreground, var(--dark-foreground));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border\r\n     border-transparent px-2 py-0.5 text-xs font-medium, [&>svg]:size-3 */\r\n  --_mono-chip-height: var(--mono-chip-height, var(--_mono-chip-height-preset, var(--mono-chip-height-md, calc(var(--mono-spacing) * 5))));\r\n  --_mono-chip-padding-x: var(--mono-chip-padding-x, var(--_mono-chip-padding-x-preset, var(--mono-chip-padding-x-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-chip-gap: var(--mono-chip-gap, var(--_mono-chip-gap-preset, var(--mono-chip-gap-md, var(--mono-spacing))));\r\n  --_mono-chip-font-size: var(--mono-chip-font-size, var(--_mono-chip-font-size-preset, var(--mono-chip-font-size-md, var(--mono-text-xs))));\r\n  --_mono-chip-glyph-size: var(--mono-chip-glyph-size, var(--_mono-chip-glyph-size-preset, var(--mono-chip-glyph-size-md, calc(var(--mono-spacing) * 3))));\r\n  /* `rounded-4xl` is the pill; a `rounded` step writes the preset tier, and an\r\n     explicit --mono-chip-radius still wins over the prop */\r\n  --_mono-chip-radius: var(--mono-chip-radius, var(--_mono-chip-radius-preset, var(--mono-radius-4xl)));\r\n  --_mono-chip-border-width: var(--mono-chip-border-width, var(--mono-border-width));\r\n  --_mono-chip-font-weight: var(--mono-chip-font-weight, var(--mono-font-weight-medium));\r\n\r\n  --_mono-chip-ring-color: var(--mono-chip-ring-color, var(--ring));\r\n  --_mono-chip-ring-width: var(--mono-chip-ring-width, var(--mono-ring-width));\r\n  --_mono-chip-ring-alpha: var(--mono-chip-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  max-width: 100%;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* =========================================\r\n   The badge box — `.badge`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — inline-flex w-fit shrink-0\r\n   items-center justify-center overflow-hidden whitespace-nowrap\r\n   [&>svg]:pointer-events-none */\r\n:where([mono-chip]) [mono-main] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  box-sizing: border-box;\r\n  height: var(--_mono-chip-height);\r\n  gap: var(--_mono-chip-gap);\r\n  padding-inline: var(--_mono-chip-padding-x);\r\n  border: var(--_mono-chip-border-width) solid transparent;\r\n  border-radius: var(--_mono-chip-radius);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-chip-font-size);\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  letter-spacing: var(--mono-chip-letter-spacing, normal);\r\n  text-transform: var(--mono-chip-text-transform, none);\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  /* `transition-all`, narrowed to what a chip actually animates */\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    opacity var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-ring, 0 0 #0000);\r\n}\r\n\r\n/* A LINK chip is a control, not prose. Host stylesheets routinely paint a bare\r\n   `a` — VitePress's own `.vp-doc a` sets a weight and an underline at (0,1,1) —\r\n   and that out-specifies the (0,1,0) part rule above, so the anchor form\r\n   restates what such a rule hijacks, one attribute heavier. Measured: the docs'\r\n   light link chip came out at weight 500 while the shadow one, beyond that\r\n   sheet's reach, kept the component's own 600. The colour needs no restatement:\r\n   every variant rule is already (0,2,0).\r\n\r\n   DEVIATION from the specificity contract, for this form only — a `cssClass.main`\r\n   utility that sets font-weight or text-decoration on a LINK chip now needs\r\n   `!important` (or the `--mono-chip-font-weight` knob). */\r\n[mono-chip] a[mono-main] {\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  text-decoration: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-chip]) [mono-main]:focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-chip-ring-color);\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-ring-color) var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE badge; md is its `.badge`\r\n   ========================================= */\r\n\r\n/* The ladder steps the same way the control heights do: 4px of box and one type\r\n   step per size, with md pinned to vega's h-5 / px-2 / text-xs. */\r\n[mono-chip][mono-size=\"xs\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xs, calc(var(--mono-spacing) * 4));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xs, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xs, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xs, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"sm\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-sm, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-sm, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-sm, calc(var(--mono-spacing) * 0.875));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-sm, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-sm, calc(var(--mono-spacing) * 2.75));\r\n}\r\n\r\n[mono-chip][mono-size=\"lg\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-lg, calc(var(--mono-spacing) * 6));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-lg, calc(var(--mono-spacing) * 1.25));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-lg, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-lg, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"xl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xl, calc(var(--mono-spacing) * 7));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xl, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xl, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xl, calc(var(--mono-spacing) * 4));\r\n}\r\n\r\n[mono-chip][mono-size=\"xxl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xxl, calc(var(--mono-spacing) * 8));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xxl, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xxl, var(--mono-text-base));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xxl, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Rounded — EXTENSION: the shared corner ladder. Unset is vega's rounded-4xl.\r\n   ========================================= */\r\n\r\n[mono-chip][mono-rounded=\"none\"] { --_mono-chip-radius-preset: 0; }\r\n[mono-chip][mono-rounded=\"xs\"] { --_mono-chip-radius-preset: calc(var(--mono-radius-sm) / 2); }\r\n[mono-chip][mono-rounded=\"sm\"] { --_mono-chip-radius-preset: var(--mono-radius-sm); }\r\n[mono-chip][mono-rounded=\"md\"] { --_mono-chip-radius-preset: var(--mono-radius-md); }\r\n[mono-chip][mono-rounded=\"lg\"] { --_mono-chip-radius-preset: var(--mono-radius-lg); }\r\n[mono-chip][mono-rounded=\"xl\"] { --_mono-chip-radius-preset: var(--mono-radius-xl); }\r\n[mono-chip][mono-rounded=\"xxl\"] { --_mono-chip-radius-preset: var(--mono-radius-2xl); }\r\n[mono-chip][mono-rounded=\"full\"] { --_mono-chip-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n   Colours — each publishes the pair the variants read\r\n   ========================================= */\r\n\r\n[mono-chip][mono-color=\"primary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='secondary'] —\r\n   bg-secondary text-secondary-foreground: a SURFACE pair, not a hue, so its\r\n   `soft` and `solid` land on the same muted plate (shadcn's meaning). */\r\n[mono-chip][mono-color=\"secondary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-secondary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-secondary-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"success\"] {\r\n  --_mono-chip-c: var(--_mono-chip-success);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-success-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"danger\"] {\r\n  --_mono-chip-c: var(--_mono-chip-danger);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-danger-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"warning\"] {\r\n  --_mono-chip-c: var(--_mono-chip-warning);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-warning-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"info\"] {\r\n  --_mono-chip-c: var(--_mono-chip-info);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-info-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"teal\"] {\r\n  --_mono-chip-c: var(--_mono-chip-teal);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-teal-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"purple\"] {\r\n  --_mono-chip-c: var(--_mono-chip-purple);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-purple-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"neutral\"] {\r\n  --_mono-chip-c: var(--_mono-chip-neutral);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-neutral-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"dark\"] {\r\n  --_mono-chip-c: var(--_mono-chip-dark);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `soft` is the DEFAULT and is Basecoat's tonal badge.\r\n   basecoat@1.0.2 styles/vega.css .badge[data-variant='destructive'] —\r\n   bg-destructive/10 text-destructive dark:bg-destructive/20 (the alpha pair\r\n   travels as --mono-mode-tint, which is what makes it dark-mode correct). */\r\n[mono-chip]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint), transparent)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-soft-border-color, transparent));\r\n}\r\n\r\n/* `secondary` is a surface, not a hue: tinting it would wash it out, so the\r\n   soft chip wears the plate itself (`.badge[data-variant='secondary']`). */\r\n[mono-chip][mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, var(--_mono-chip-secondary)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-secondary-foreground)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — bg-primary text-primary-foreground */\r\n[mono-chip][mono-variant=\"solid\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-solid-bg, var(--_mono-chip-c)));\r\n  color: var(--mono-chip-color, var(--mono-chip-solid-color, var(--_mono-chip-c-foreground)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-solid-border-color, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='outline'] — border-border\r\n   text-foreground — EXTENSION: the edge and the ink take the role's colour so\r\n   `outline` reads as the same family as the other two. */\r\n[mono-chip][mono-variant=\"outline\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-outline-bg, transparent));\r\n  color: var(--mono-chip-color, var(--mono-chip-outline-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-outline-border-color, var(--_mono-chip-c)));\r\n}\r\n\r\n[mono-chip][mono-color=\"secondary\"][mono-variant=\"outline\"] > [mono-main] {\r\n  color: var(--mono-chip-color, var(--foreground));\r\n  border-color: var(--mono-chip-border-color, var(--border));\r\n}\r\n\r\n/* =========================================\r\n   Interactive — a clickable / linked chip\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — [a]:hover:bg-primary/80: only a LINK badge reacts upstream; ours also\r\n   reacts when `clickable` made it a button (same gesture, no href). */\r\n[mono-chip][mono-clickable] > [mono-main] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"solid\"] > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) 80%, transparent);\r\n  }\r\n\r\n  /* .badge[data-variant='destructive'] — [a]:hover:bg-destructive/20 */\r\n  [mono-chip][mono-clickable]:not([mono-disabled]):is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint-hover), transparent);\r\n  }\r\n\r\n  /* `secondary` is a plate, not a tint: darken it the way the secondary button\r\n     does (basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']). */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklch, var(--_mono-chip-secondary), var(--foreground) 5%);\r\n  }\r\n\r\n  /* .badge[data-variant='outline'] — [a]:hover:bg-muted */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"outline\"] > [mono-main]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — `selected` rings the chip in its own colour, the one state\r\n   Basecoat's badge has no equivalent for (it is not a toggle upstream). */\r\n[mono-chip][mono-selected] > [mono-main] {\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-c) var(--_mono-chip-ring-alpha), transparent);\r\n  border-color: var(--_mono-chip-c);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none\r\n   disabled:opacity-50 */\r\n[mono-chip][mono-disabled] > [mono-main] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Inner content\r\n   ========================================= */\r\n\r\n:where([mono-chip]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-chip]) [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1;\r\n}\r\n\r\n/* EXTENSION — the leading status dot. It is the role's colour at full strength,\r\n   which reads on both the tinted `soft` plate and the solid one (`currentColor`\r\n   there). */\r\n:where([mono-chip]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  height: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* The shadow build renders the icon wrapper on every chip and marks the empty\r\n   one; this hides it so both builds measure the same content box. */\r\n[mono-chip] [data-mono-slot=\"icon\"][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* `[&>svg]:size-3!` — our icon is a slotted element or a mask span, sized by\r\n   the same token as the close glyph */\r\n:where([mono-chip]) [data-mono-slot=\"icon\"],\r\n:where([mono-chip]) [mono-main] > svg {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-chip]) [data-mono-slot=\"icon\"] > * {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, [&>svg]:size-3.5 — the same affordance a field chip uses */\r\n:where([mono-chip]) [mono-close] {\r\n  appearance: none;\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-full);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  opacity: 0.5;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-close-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-chip]) [mono-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n:where([mono-chip]) [mono-close]:focus-visible {\r\n  outline: none;\r\n  opacity: 1;\r\n  --_mono-chip-close-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, currentColor var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-chip]) [mono-close] :is([mono-glyph], svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-chip]) [mono-close] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Status dot — EXTENSION: `<mono-status-dot>`, a label with a state dot\r\n   ========================================= */\r\n\r\nmono-status-dot {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-status-dot] {\r\n  --_mono-status-dot-c: var(--mono-status-dot-color, var(--success));\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--mono-status-dot-gap, calc(var(--mono-spacing) * 1.5));\r\n  font-family: inherit;\r\n  font-size: var(--mono-status-dot-font-size, var(--mono-text-xs));\r\n  font-weight: var(--mono-status-dot-font-weight, var(--mono-font-weight-medium));\r\n  line-height: 1;\r\n  color: var(--_mono-status-dot-c);\r\n}\r\n\r\n[mono-status-dot][mono-status=\"offline\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--neutral)); }\r\n[mono-status-dot][mono-status=\"busy\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--destructive)); }\r\n[mono-status-dot][mono-status=\"away\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--warning)); }\r\n/* `custom` takes the colour from the `color` prop, which the element writes\r\n   inline as --mono-status-dot-color */\r\n[mono-status-dot][mono-status=\"custom\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--primary)); }\r\n\r\n:where([mono-status-dot]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  height: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n[mono-status-dot][mono-pulse] [mono-dot] {\r\n  animation: mono-status-pulse 1.8s var(--mono-ease) infinite;\r\n}\r\n\r\n@keyframes mono-status-pulse {\r\n  0%,\r\n  100% {\r\n    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);\r\n  }\r\n\r\n  50% {\r\n    box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-chip]) :is([mono-main], [mono-close]) {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-status-dot][mono-pulse] [mono-dot] {\r\n    animation: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\chip\chip.css?raw.js
+var chip_css_raw_default = "/* =========================================================================\r\n   mono-chip — a port of Basecoat's `.badge` (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-chip size=\"lg\" color=\"success\" variant=\"solid\" label=\"Active\" dot>\r\n     <span mono-chip mono-size=\"lg\" mono-color=\"success\" mono-variant=\"solid\" mono-has-dot>\r\n       <span mono-main>\r\n         <span mono-content>\r\n           <span mono-dot></span>\r\n           <span mono-label>Active</span>\r\n           <button mono-close><span mono-glyph class=\"i-mdi-close\"></span></button>\r\n         </span>\r\n       </span>\r\n     </span>\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])` = soft, no\r\n   `mono-rounded` = the pill). The element renders these on its root (both\r\n   builds) plus the states `mono-has-dot` (the dot PART is `mono-dot`, so the state\r\n   spells itself out) / `mono-removable` / `mono-clickable` /\r\n   `mono-disabled` / `mono-selected` and `mono-icon-position=\"right\"`. The old\r\n   classes (`.mono-chip.md.soft-primary`, `.chip-label`, `.chip-close`) are\r\n   still emitted as inert hooks until 2.0 but no rule here reads them — except\r\n   `rounded-<step>`, which is GONE: that is Tailwind/UnoCSS's own utility\r\n   namespace, so on a page shipping those it was never inert (it rounded the\r\n   chip's outer box). Use `mono-rounded` / the `rounded` prop.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-chip]                   ≡ the layout box only — NOT painted (see below)\r\n     [mono-main]                   ≡ .badge (inline-flex w-fit shrink-0 items-center\r\n                                     justify-center overflow-hidden whitespace-nowrap,\r\n                                     h-5 gap-1 rounded-4xl border border-transparent\r\n                                     px-2 py-0.5 text-xs font-medium transition-all,\r\n                                     focus-visible:border-ring ring-[3px] ring-ring/50)\r\n     [mono-variant=\"solid\"]        ≡ .badge[data-variant='primary'] (bg-c text-c-foreground,\r\n                                     [a]:hover:bg-c/80) — generalised to every hue\r\n     [mono-variant=\"soft\"]         ≡ .badge[data-variant='destructive'] (bg-c/10 text-c,\r\n                                     [a]:hover:bg-c/20, dark bg-c/20) — generalised; the DEFAULT\r\n     [mono-variant=\"outline\"]      ≡ .badge[data-variant='outline'] (border-border text-foreground,\r\n                                     [a]:hover:bg-muted) + the hue on the edge and the ink\r\n     [mono-color=\"secondary\"]      ≡ .badge[data-variant='secondary'] (the muted surface pair)\r\n     [mono-size=\"md\"]              ≡ .badge's own h-5 px-2 text-xs; the other five are EXTENSION\r\n                                     (Basecoat ships one badge size)\r\n     [mono-rounded=\"…\"]            ≡ EXTENSION (the shared corner ladder; unset = rounded-4xl)\r\n     [mono-close]                  ≡ .combobox-chip-remove (opacity-50 hover:opacity-100, svg size-3.5)\r\n     [mono-has-dot] / [mono-dot] / [mono-selected] / [mono-clickable] ≡ EXTENSION\r\n     [mono-disabled]               ≡ .btn disabled:opacity-50\r\n     [mono-status-dot]             ≡ EXTENSION (the standalone status-dot helper)\r\n\r\n   WHY THE ROOT PAINTS NOTHING. `[mono-chip]` is also what a FIELD's internal\r\n   chip carries: `<mono-tag-input>` renders Basecoat combobox chips as\r\n   `[mono-chip] > [mono-chip-main] > …` and paints them in tag-input.css. Those\r\n   rules are `[mono-tag-input] [mono-chip]` = (0,2,0) and win over this sheet,\r\n   but only where they overlap — so this sheet keeps the root to layout plus\r\n   custom properties (which a field's rules simply don't read) and paints the\r\n   badge on `[mono-main]`, a part name a field chip does not have. The two never\r\n   collide, and a real `<mono-chip>` slotted INTO a field keeps its own look.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING\r\n   rule is exactly one attribute strong — `:where([mono-chip]) [mono-label]` =\r\n   (0,1,0) — so a utility class handed in through `cssClass` wins by source\r\n   order, while the prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-main] > [mono-content] > [mono-dot] / [data-mono-slot=icon]\r\n   / [mono-label] / [mono-close] > [mono-glyph].\r\n\r\n   FLAVORS set `--mono-chip-{radius,border-width,font-weight,letter-spacing,\r\n   text-transform}` and the VARIANT-scoped paint knobs\r\n   `--mono-chip-{soft,solid,outline}-{bg,color,border-color}` (the shared\r\n   `--mono-chip-bg` / `-color` is the CONSUMER's blanket override and repaints\r\n   all three looks at once)` and the per-size `-height-<size>` /\r\n   `-padding-x-<size>` / `-gap-<size>` / `-font-size-<size>` /\r\n   `-glyph-size-<size>` (the size-agnostic twin of each of those is the\r\n   CONSUMER's override — a flavor writing it would flatten the whole ladder);\r\n   every fallback here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"^\\.badge\"`).\r\n   ========================================================================= */\r\n\r\nmono-chip {\r\n  display: inline-block;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette. NOTHING here paints (see the header).\r\n   ========================================= */\r\n\r\n[mono-chip] {\r\n  /* ── the ten roles, each a public knob over a Basecoat token ──────────── */\r\n  --_mono-chip-primary: var(--mono-chip-primary, var(--primary));\r\n  --_mono-chip-primary-foreground: var(--mono-chip-primary-foreground, var(--primary-foreground));\r\n  --_mono-chip-secondary: var(--mono-chip-secondary, var(--secondary));\r\n  --_mono-chip-secondary-foreground: var(--mono-chip-secondary-foreground, var(--secondary-foreground));\r\n  --_mono-chip-success: var(--mono-chip-success, var(--success));\r\n  --_mono-chip-success-foreground: var(--mono-chip-success-foreground, var(--success-foreground));\r\n  --_mono-chip-danger: var(--mono-chip-danger, var(--destructive));\r\n  --_mono-chip-danger-foreground: var(--mono-chip-danger-foreground, var(--destructive-foreground));\r\n  --_mono-chip-warning: var(--mono-chip-warning, var(--warning));\r\n  --_mono-chip-warning-foreground: var(--mono-chip-warning-foreground, var(--warning-foreground));\r\n  --_mono-chip-info: var(--mono-chip-info, var(--info));\r\n  --_mono-chip-info-foreground: var(--mono-chip-info-foreground, var(--info-foreground));\r\n  --_mono-chip-teal: var(--mono-chip-teal, var(--teal));\r\n  --_mono-chip-teal-foreground: var(--mono-chip-teal-foreground, var(--teal-foreground));\r\n  --_mono-chip-purple: var(--mono-chip-purple, var(--purple));\r\n  --_mono-chip-purple-foreground: var(--mono-chip-purple-foreground, var(--purple-foreground));\r\n  --_mono-chip-neutral: var(--mono-chip-neutral, var(--neutral));\r\n  --_mono-chip-neutral-foreground: var(--mono-chip-neutral-foreground, var(--neutral-foreground));\r\n  --_mono-chip-dark: var(--mono-chip-dark, var(--dark));\r\n  --_mono-chip-dark-foreground: var(--mono-chip-dark-foreground, var(--dark-foreground));\r\n\r\n  /* the colour in play — `primary` unless a [mono-color] rule re-points it */\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .badge — h-5 gap-1 rounded-4xl border\r\n     border-transparent px-2 py-0.5 text-xs font-medium, [&>svg]:size-3 */\r\n  --_mono-chip-height: var(--mono-chip-height, var(--_mono-chip-height-preset, var(--mono-chip-height-md, calc(var(--mono-spacing) * 5))));\r\n  --_mono-chip-padding-x: var(--mono-chip-padding-x, var(--_mono-chip-padding-x-preset, var(--mono-chip-padding-x-md, calc(var(--mono-spacing) * 2))));\r\n  --_mono-chip-gap: var(--mono-chip-gap, var(--_mono-chip-gap-preset, var(--mono-chip-gap-md, var(--mono-spacing))));\r\n  --_mono-chip-font-size: var(--mono-chip-font-size, var(--_mono-chip-font-size-preset, var(--mono-chip-font-size-md, var(--mono-text-xs))));\r\n  --_mono-chip-glyph-size: var(--mono-chip-glyph-size, var(--_mono-chip-glyph-size-preset, var(--mono-chip-glyph-size-md, calc(var(--mono-spacing) * 3))));\r\n  /* `rounded-4xl` is the pill; a `rounded` step writes the preset tier, and an\r\n     explicit --mono-chip-radius still wins over the prop */\r\n  --_mono-chip-radius: var(--mono-chip-radius, var(--_mono-chip-radius-preset, var(--mono-radius-4xl)));\r\n  --_mono-chip-border-width: var(--mono-chip-border-width, var(--mono-border-width));\r\n  --_mono-chip-font-weight: var(--mono-chip-font-weight, var(--mono-font-weight-medium));\r\n\r\n  --_mono-chip-ring-color: var(--mono-chip-ring-color, var(--ring));\r\n  --_mono-chip-ring-width: var(--mono-chip-ring-width, var(--mono-ring-width));\r\n  --_mono-chip-ring-alpha: var(--mono-chip-ring-alpha, var(--mono-ring-alpha));\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  max-width: 100%;\r\n  vertical-align: middle;\r\n  line-height: 1;\r\n}\r\n\r\n/* =========================================\r\n   The badge box — `.badge`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — inline-flex w-fit shrink-0\r\n   items-center justify-center overflow-hidden whitespace-nowrap\r\n   [&>svg]:pointer-events-none */\r\n:where([mono-chip]) [mono-main] {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  max-width: 100%;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  box-sizing: border-box;\r\n  height: var(--_mono-chip-height);\r\n  gap: var(--_mono-chip-gap);\r\n  padding-inline: var(--_mono-chip-padding-x);\r\n  border: var(--_mono-chip-border-width) solid transparent;\r\n  border-radius: var(--_mono-chip-radius);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-chip-font-size);\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  letter-spacing: var(--mono-chip-letter-spacing, normal);\r\n  text-transform: var(--mono-chip-text-transform, none);\r\n  line-height: 1;\r\n  text-decoration: none;\r\n  user-select: none;\r\n  vertical-align: middle;\r\n  /* `transition-all`, narrowed to what a chip actually animates */\r\n  transition:\r\n    color var(--mono-duration) var(--mono-ease),\r\n    background-color var(--mono-duration) var(--mono-ease),\r\n    border-color var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease),\r\n    opacity var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-ring, 0 0 #0000);\r\n}\r\n\r\n/* A LINK chip is a control, not prose. Host stylesheets routinely paint a bare\r\n   `a` — VitePress's own `.vp-doc a` sets a weight and an underline at (0,1,1) —\r\n   and that out-specifies the (0,1,0) part rule above, so the anchor form\r\n   restates what such a rule hijacks, one attribute heavier. Measured: the docs'\r\n   light link chip came out at weight 500 while the shadow one, beyond that\r\n   sheet's reach, kept the component's own 600. The colour needs no restatement:\r\n   every variant rule is already (0,2,0).\r\n\r\n   DEVIATION from the specificity contract, for this form only — a `cssClass.main`\r\n   utility that sets font-weight or text-decoration on a LINK chip now needs\r\n   `!important` (or the `--mono-chip-font-weight` knob). */\r\n[mono-chip] a[mono-main] {\r\n  font-weight: var(--_mono-chip-font-weight);\r\n  text-decoration: none;\r\n}\r\n\r\n/* basecoat@1.0.2 components/badge.css .badge — focus-visible:border-ring\r\n   focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n:where([mono-chip]) [mono-main]:focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-chip-ring-color);\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-ring-color) var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE badge; md is its `.badge`\r\n   ========================================= */\r\n\r\n/* The ladder steps the same way the control heights do: 4px of box and one type\r\n   step per size, with md pinned to vega's h-5 / px-2 / text-xs. */\r\n[mono-chip][mono-size=\"xs\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xs, calc(var(--mono-spacing) * 4));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xs, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xs, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xs, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xs, calc(var(--mono-spacing) * 2.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"sm\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-sm, calc(var(--mono-spacing) * 4.5));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-sm, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-sm, calc(var(--mono-spacing) * 0.875));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-sm, var(--mono-text-xs));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-sm, calc(var(--mono-spacing) * 2.75));\r\n}\r\n\r\n[mono-chip][mono-size=\"lg\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-lg, calc(var(--mono-spacing) * 6));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-lg, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-lg, calc(var(--mono-spacing) * 1.25));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-lg, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-lg, calc(var(--mono-spacing) * 3.5));\r\n}\r\n\r\n[mono-chip][mono-size=\"xl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xl, calc(var(--mono-spacing) * 7));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xl, calc(var(--mono-spacing) * 3));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xl, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xl, var(--mono-text-sm));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xl, calc(var(--mono-spacing) * 4));\r\n}\r\n\r\n[mono-chip][mono-size=\"xxl\"] {\r\n  --_mono-chip-height-preset: var(--mono-chip-height-xxl, calc(var(--mono-spacing) * 8));\r\n  --_mono-chip-padding-x-preset: var(--mono-chip-padding-x-xxl, calc(var(--mono-spacing) * 3.5));\r\n  --_mono-chip-gap-preset: var(--mono-chip-gap-xxl, calc(var(--mono-spacing) * 1.75));\r\n  --_mono-chip-font-size-preset: var(--mono-chip-font-size-xxl, var(--mono-text-base));\r\n  --_mono-chip-glyph-size-preset: var(--mono-chip-glyph-size-xxl, calc(var(--mono-spacing) * 4.5));\r\n}\r\n\r\n/* =========================================\r\n   Rounded — EXTENSION: the shared corner ladder. Unset is vega's rounded-4xl.\r\n   ========================================= */\r\n\r\n[mono-chip][mono-rounded=\"none\"] { --_mono-chip-radius-preset: 0; }\r\n[mono-chip][mono-rounded=\"xs\"] { --_mono-chip-radius-preset: calc(var(--mono-radius-sm) / 2); }\r\n[mono-chip][mono-rounded=\"sm\"] { --_mono-chip-radius-preset: var(--mono-radius-sm); }\r\n[mono-chip][mono-rounded=\"md\"] { --_mono-chip-radius-preset: var(--mono-radius-md); }\r\n[mono-chip][mono-rounded=\"lg\"] { --_mono-chip-radius-preset: var(--mono-radius-lg); }\r\n[mono-chip][mono-rounded=\"xl\"] { --_mono-chip-radius-preset: var(--mono-radius-xl); }\r\n[mono-chip][mono-rounded=\"xxl\"] { --_mono-chip-radius-preset: var(--mono-radius-2xl); }\r\n[mono-chip][mono-rounded=\"full\"] { --_mono-chip-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n   Colours — each publishes the pair the variants read\r\n   ========================================= */\r\n\r\n[mono-chip][mono-color=\"primary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-primary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-primary-foreground);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='secondary'] —\r\n   bg-secondary text-secondary-foreground: a SURFACE pair, not a hue, so its\r\n   `soft` and `solid` land on the same muted plate (shadcn's meaning). */\r\n[mono-chip][mono-color=\"secondary\"] {\r\n  --_mono-chip-c: var(--_mono-chip-secondary);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-secondary-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"success\"] {\r\n  --_mono-chip-c: var(--_mono-chip-success);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-success-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"danger\"] {\r\n  --_mono-chip-c: var(--_mono-chip-danger);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-danger-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"warning\"] {\r\n  --_mono-chip-c: var(--_mono-chip-warning);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-warning-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"info\"] {\r\n  --_mono-chip-c: var(--_mono-chip-info);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-info-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"teal\"] {\r\n  --_mono-chip-c: var(--_mono-chip-teal);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-teal-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"purple\"] {\r\n  --_mono-chip-c: var(--_mono-chip-purple);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-purple-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"neutral\"] {\r\n  --_mono-chip-c: var(--_mono-chip-neutral);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-neutral-foreground);\r\n}\r\n\r\n[mono-chip][mono-color=\"dark\"] {\r\n  --_mono-chip-c: var(--_mono-chip-dark);\r\n  --_mono-chip-c-foreground: var(--_mono-chip-dark-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `soft` is the DEFAULT and is Basecoat's tonal badge.\r\n   basecoat@1.0.2 styles/vega.css .badge[data-variant='destructive'] —\r\n   bg-destructive/10 text-destructive dark:bg-destructive/20 (the alpha pair\r\n   travels as --mono-mode-tint, which is what makes it dark-mode correct). */\r\n[mono-chip]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint), transparent)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-soft-border-color, transparent));\r\n}\r\n\r\n/* `secondary` is a surface, not a hue: tinting it would wash it out, so the\r\n   soft chip wears the plate itself (`.badge[data-variant='secondary']`). */\r\n[mono-chip][mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-soft-bg, var(--_mono-chip-secondary)));\r\n  color: var(--mono-chip-color, var(--mono-chip-soft-color, var(--_mono-chip-secondary-foreground)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — bg-primary text-primary-foreground */\r\n[mono-chip][mono-variant=\"solid\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-solid-bg, var(--_mono-chip-c)));\r\n  color: var(--mono-chip-color, var(--mono-chip-solid-color, var(--_mono-chip-c-foreground)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-solid-border-color, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge[data-variant='outline'] — border-border\r\n   text-foreground — EXTENSION: the edge and the ink take the role's colour so\r\n   `outline` reads as the same family as the other two. */\r\n[mono-chip][mono-variant=\"outline\"] > [mono-main] {\r\n  background-color: var(--mono-chip-bg, var(--mono-chip-outline-bg, transparent));\r\n  color: var(--mono-chip-color, var(--mono-chip-outline-color, var(--_mono-chip-c)));\r\n  border-color: var(--mono-chip-border-color, var(--mono-chip-outline-border-color, var(--_mono-chip-c)));\r\n}\r\n\r\n[mono-chip][mono-color=\"secondary\"][mono-variant=\"outline\"] > [mono-main] {\r\n  color: var(--mono-chip-color, var(--foreground));\r\n  border-color: var(--mono-chip-border-color, var(--border));\r\n}\r\n\r\n/* =========================================\r\n   Interactive — a clickable / linked chip\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .badge:not([data-variant]), .badge[data-variant='primary']\r\n   — [a]:hover:bg-primary/80: only a LINK badge reacts upstream; ours also\r\n   reacts when `clickable` made it a button (same gesture, no href). */\r\n[mono-chip][mono-clickable] > [mono-main] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"solid\"] > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) 80%, transparent);\r\n  }\r\n\r\n  /* .badge[data-variant='destructive'] — [a]:hover:bg-destructive/20 */\r\n  [mono-chip][mono-clickable]:not([mono-disabled]):is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklab, var(--_mono-chip-c) var(--mono-mode-tint-hover), transparent);\r\n  }\r\n\r\n  /* `secondary` is a plate, not a tint: darken it the way the secondary button\r\n     does (basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']). */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-color=\"secondary\"]:is(:not([mono-variant]), [mono-variant=\"soft\"]) > [mono-main]:hover {\r\n    background-color: color-mix(in oklch, var(--_mono-chip-secondary), var(--foreground) 5%);\r\n  }\r\n\r\n  /* .badge[data-variant='outline'] — [a]:hover:bg-muted */\r\n  [mono-chip][mono-clickable]:not([mono-disabled])[mono-variant=\"outline\"] > [mono-main]:hover {\r\n    background-color: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — `selected` rings the chip in its own colour, the one state\r\n   Basecoat's badge has no equivalent for (it is not a toggle upstream). */\r\n[mono-chip][mono-selected] > [mono-main] {\r\n  --_mono-chip-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, var(--_mono-chip-c) var(--_mono-chip-ring-alpha), transparent);\r\n  border-color: var(--_mono-chip-c);\r\n}\r\n\r\n/* basecoat@1.0.2 components/button.css .btn — disabled:pointer-events-none\r\n   disabled:opacity-50 */\r\n[mono-chip][mono-disabled] > [mono-main] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* =========================================\r\n   Inner content\r\n   ========================================= */\r\n\r\n:where([mono-chip]) [mono-content] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: inherit;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  height: 100%;\r\n  line-height: 1;\r\n}\r\n\r\n:where([mono-chip]) [mono-label] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 0;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  line-height: 1;\r\n}\r\n\r\n/* EXTENSION — the leading status dot. It is the role's colour at full strength,\r\n   which reads on both the tinted `soft` plate and the solid one (`currentColor`\r\n   there). */\r\n:where([mono-chip]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  height: var(--mono-chip-dot-size, calc(var(--mono-spacing) * 1.5));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n/* The shadow build renders the icon wrapper on every chip and marks the empty\r\n   one; this hides it so both builds measure the same content box. */\r\n[mono-chip] [data-mono-slot=\"icon\"][mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* `[&>svg]:size-3!` — our icon is a slotted element or a mask span, sized by\r\n   the same token as the close glyph */\r\n:where([mono-chip]) [data-mono-slot=\"icon\"],\r\n:where([mono-chip]) [mono-main] > svg {\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n:where([mono-chip]) [data-mono-slot=\"icon\"] > * {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .combobox-chip-remove — -ms-1 opacity-50\r\n   hover:opacity-100, [&>svg]:size-3.5 — the same affordance a field chip uses */\r\n:where([mono-chip]) [mono-close] {\r\n  appearance: none;\r\n  display: inline-flex;\r\n  flex: 0 0 auto;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-chip-glyph-size);\r\n  height: var(--_mono-chip-glyph-size);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--mono-radius-full);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  opacity: 0.5;\r\n  transition:\r\n    opacity var(--mono-duration) var(--mono-ease),\r\n    box-shadow var(--mono-duration) var(--mono-ease);\r\n  box-shadow: var(--_mono-chip-close-ring, 0 0 #0000);\r\n}\r\n\r\n@media (hover: hover) {\r\n  :where([mono-chip]) [mono-close]:hover {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n:where([mono-chip]) [mono-close]:focus-visible {\r\n  outline: none;\r\n  opacity: 1;\r\n  --_mono-chip-close-ring: 0 0 0 var(--_mono-chip-ring-width)\r\n    color-mix(in oklab, currentColor var(--_mono-chip-ring-alpha), transparent);\r\n}\r\n\r\n:where([mono-chip]) [mono-close] :is([mono-glyph], svg) {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n:where([mono-chip]) [mono-close] [mono-glyph] > svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* =========================================\r\n   Status dot — EXTENSION: `<mono-status-dot>`, a label with a state dot\r\n   ========================================= */\r\n\r\nmono-status-dot {\r\n  display: inline-block;\r\n}\r\n\r\n[mono-status-dot] {\r\n  --_mono-status-dot-c: var(--mono-status-dot-color, var(--success));\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--mono-status-dot-gap, calc(var(--mono-spacing) * 1.5));\r\n  font-family: inherit;\r\n  font-size: var(--mono-status-dot-font-size, var(--mono-text-xs));\r\n  font-weight: var(--mono-status-dot-font-weight, var(--mono-font-weight-medium));\r\n  line-height: 1;\r\n  color: var(--_mono-status-dot-c);\r\n}\r\n\r\n[mono-status-dot][mono-status=\"offline\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--neutral)); }\r\n[mono-status-dot][mono-status=\"busy\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--destructive)); }\r\n[mono-status-dot][mono-status=\"away\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--warning)); }\r\n/* `custom` takes the colour from the `color` prop, which the element writes\r\n   inline as --mono-status-dot-color */\r\n[mono-status-dot][mono-status=\"custom\"] { --_mono-status-dot-c: var(--mono-status-dot-color, var(--primary)); }\r\n\r\n:where([mono-status-dot]) [mono-dot] {\r\n  flex: 0 0 auto;\r\n  width: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  height: var(--mono-status-dot-size, calc(var(--mono-spacing) * 2));\r\n  border-radius: var(--mono-radius-full);\r\n  background: currentColor;\r\n}\r\n\r\n[mono-status-dot][mono-pulse] [mono-dot] {\r\n  animation: mono-status-pulse 1.8s var(--mono-ease) infinite;\r\n}\r\n\r\n@keyframes mono-status-pulse {\r\n  0%,\r\n  100% {\r\n    box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent);\r\n  }\r\n\r\n  50% {\r\n    box-shadow: 0 0 0 5px color-mix(in oklab, currentColor 0%, transparent);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  :where([mono-chip]) :is([mono-main], [mono-close]) {\r\n    transition: none;\r\n  }\r\n\r\n  [mono-status-dot][mono-pulse] [mono-dot] {\r\n    animation: none;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/chip/mono-chip.ts
-var MonoChip = class MonoChip extends MonoChipCore(LitElement) {
+let MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._buckets = /* @__PURE__ */ new Map();
 		this._slotsCaptured = false;
 	}
 	static {
-		this.styles = [unsafeCSS(chip_default)];
+		this.styles = [unsafeCSS(chip_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -310,8 +313,9 @@ var MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 	}
 	_renderContent() {
 		const hasIcon = this._hasIcon;
+		const contentClass = this._cls(hasIcon ? this.iconPosition === "right" ? "chip-content icon-right" : "chip-content icon-left" : "chip-content", "content");
 		return html`
-      <span class=${this._cls(hasIcon ? this.iconPosition === "right" ? "chip-content icon-right" : "chip-content icon-left" : "chip-content", "content")} mono-content>
+      <span class=${contentClass} mono-content>
         ${this._renderDot()}
 
         ${when(hasIcon && this.iconPosition === "left", () => html`<span data-mono-slot="icon"></span>`, () => nothing)}
@@ -425,6 +429,7 @@ var MonoChip = class MonoChip extends MonoChipCore(LitElement) {
 	}
 };
 MonoChip = __decorate([customElement("mono-chip")], MonoChip);
+
 //#endregion
 //#region src/components/chip/mono-status-dot.ts
 /**
@@ -442,7 +447,7 @@ MonoChip = __decorate([customElement("mono-chip")], MonoChip);
 */
 var MonoStatusDot = class extends LitElement {
 	static {
-		this.styles = [unsafeCSS(chip_default)];
+		this.styles = [unsafeCSS(chip_css_raw_default)];
 	}
 	constructor() {
 		super();
@@ -494,6 +499,7 @@ __decorate([property({ type: String })], MonoStatusDot.prototype, "label", void
 __decorate([property({ type: String })], MonoStatusDot.prototype, "color", void 0);
 __decorate([query("span")], MonoStatusDot.prototype, "_statusElement", void 0);
 defineMonoElement("mono-status-dot", MonoStatusDot);
+
 //#endregion
 //#region src/components/chip/chip-utils.ts
 function generateChipRootClasses(props) {
@@ -554,5 +560,6 @@ function validateChipProps(props) {
 	if (props.rounded && !validRounded.includes(props.rounded)) return false;
 	return true;
 }
+
 //#endregion
-export { MonoChip, MonoStatusDot, generateChipRootClasses, isInteractive, validateChipProps };
+export { MonoChip, MonoStatusDot, generateChipRootClasses, isInteractive, validateChipProps };