@mono-lit/helper 0.0.1 → 0.0.3

package/dist/ui/chart.js

@@ -1,12 +1,16 @@
-import { f as monoPendingGrace } from "../mono-ui-CPV7rrdo.js";
-import { n as detachEventHandlers, t as applyProps } from "../element-props-CLB6yvbm.js";
-import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "../mono-data-chart-ChU4Ii3p.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { n as toCssSize } from "../css-size-DhHSVZJK.js";
+import { a as errorTitle, i as errorText, n as describeError } from "../normalize-error-D93O4q8g.js";
+import { f as monoPendingGrace } from "../mono-ui-BwUc0L6B.js";
+import { n as detachEventHandlers, t as applyProps } from "../element-props-xvw0EB7H.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "../mono-data-chart-ChkelNT7.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { n as toCssSize } from "../css-size-DWAPgQdT.js";
+import { a as spinnerIcon, i as refreshIcon } from "../field-icons-FmyBWa0g.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/chart/chart-core.ts
 /**
 * The mono color names a chart accepts wherever a color is expected. They map to
@@ -15,7 +19,7 @@ import { styleMap } from "lit/directives/style-map.js";
 * are Basecoat's own chart palette (`--chart-1` … `--chart-5`), the roles are the
 * page's. `surface` is internal: the hairline between slices.
 */
-var MONO_COLOR_NAMES = new Set([
+const MONO_COLOR_NAMES = /* @__PURE__ */ new Set([
 	"chart-1",
 	"chart-2",
 	"chart-3",
@@ -31,7 +35,7 @@ var MONO_COLOR_NAMES = new Set([
 	"surface"
 ]);
 /** Used before the element is in the DOM (SSR) or if a token resolves empty — ONE, light. */
-var MONO_COLOR_FALLBACK = {
+const MONO_COLOR_FALLBACK = {
 	"chart-1": "oklch(0.859 0.069 267.7)",
 	"chart-2": "oklch(0.735 0.12 268.04)",
 	"chart-3": "oklch(0.61 0.12 267.95)",
@@ -63,7 +67,7 @@ function escapeHtml(s) {
 * trade here because the library is externalized, so the consumer's bundler
 * owns the cost and tree-shaking on our side would buy nothing.
 */
-var _chartPromise = null;
+let _chartPromise = null;
 function loadChartJs() {
 	_chartPromise ??= import("chart.js/auto").then((m) => m?.default ?? m).catch((err) => {
 		_chartPromise = null;
@@ -81,7 +85,7 @@ function loadChartJs() {
 * `super`. A `ResizeObserver` is added on top because, unlike flatpickr, a
 * canvas needs to be told when its box changes.
 */
-var MonoChartCore = (superClass) => {
+const MonoChartCore = (superClass) => {
 	class MonoChartCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -91,6 +95,11 @@ var MonoChartCore = (superClass) => {
 			this.stacked = false;
 			this.cssClass = {};
 			this.cssClassName = "";
+			this.loadingText = "Loading…";
+			this.retryLabel = "Retry";
+			this.loading = false;
+			this.loadingError = null;
+			this._appFailure = null;
 			this._error = "";
 			this._chart = null;
 			this._buildToken = 0;
@@ -105,6 +114,17 @@ var MonoChartCore = (superClass) => {
 				});
 			};
 			this._applyQueued = false;
+			this._onRetry = (event) => {
+				event.stopPropagation();
+				const error = this._dsError;
+				if (!error) return;
+				const fromApp = !!this._appFailure;
+				dispatchMonoEvent(this, "retry", {
+					error,
+					source: fromApp ? "app" : "dataSource"
+				});
+				if (!fromApp) this.dataChart?.retry();
+			};
 			this._externalTooltip = (context) => {
 				const el = this._tooltipEl;
 				if (!el) return;
@@ -144,7 +164,9 @@ var MonoChartCore = (superClass) => {
 				"dataChart",
 				"chartOptions",
 				"aspectRatio",
-				"cssClass"
+				"cssClass",
+				"loadingText",
+				"loadingError"
 			]);
 			defineHybridPropAlias(this, "controlChart", "dataChart");
 			for (const alias of ["css-class", "cssclass"]) Object.defineProperty(this, alias, {
@@ -264,6 +286,10 @@ var MonoChartCore = (superClass) => {
 			this._modeQuery?.addEventListener?.("change", this._onThemeChanged);
 		}
 		willUpdate(changed) {
+			if (changed.has("loadingError")) {
+				const v = this.loadingError;
+				this._appFailure = v == null || v === false || v === "" ? null : describeError(v === true ? void 0 : v);
+			}
 			super.willUpdate?.(changed);
 			if (changed.has("dataChart")) this._subscribe();
 		}
@@ -334,6 +360,42 @@ var MonoChartCore = (superClass) => {
 		get _loading() {
 			return !!this.dataChart?.loading;
 		}
+		/** The FIRST load (or a retry) is in flight — nothing to show yet, so a spinner. */
+		get _dsBusy() {
+			if (this.loading) return true;
+			const c = this.dataChart;
+			return !this.data && !!c && c.loading && !c.hasLoaded && !c.error;
+		}
+		/** The app's `loading-error`, else the controller's failed load (the peer-load `_error` is separate). */
+		get _dsError() {
+			if (this.loading) return null;
+			return this._appFailure ?? (this.data ? null : this.dataChart?.error ?? null);
+		}
+		/** Spinner over the first load; the failure + ↻ after one failed. */
+		_renderSourceState() {
+			const err = this._dsError;
+			if (err) return html`
+          <div class="mono-chart-state" mono-ds-state="error" role="alert">
+            <span class="mono-chart-state-text" title=${errorTitle(err)}>${errorText(err)}</span>
+            <button
+              type="button"
+              mono-ds-retry
+              aria-label=${this.retryLabel}
+              title=${this.retryLabel}
+              @click=${this._onRetry}
+            >
+              ${refreshIcon()}
+            </button>
+          </div>
+        `;
+			if (this._dsBusy) return html`
+          <div class="mono-chart-state" mono-ds-state="loading" role="status">
+            <span mono-ds-spinner>${spinnerIcon()}</span>
+            <span class="mono-chart-state-text">${this.loadingText}</span>
+          </div>
+        `;
+			return nothing;
+		}
 		get _empty() {
 			const d = this._data;
 			return !d.datasets?.length || d.datasets.every((s) => !s.data?.length);
@@ -677,13 +739,19 @@ var MonoChartCore = (superClass) => {
 		}
 		renderChart() {
 			return html`
-        <div class=${this._rootClasses}>
+        <div
+          class=${this._rootClasses}
+          ?mono-ds-loading=${this._dsBusy}
+          ?mono-ds-error=${!!this._dsError}
+          aria-busy=${this._dsBusy ? "true" : nothing}
+        >
           ${this._error ? html`<div class=${this._cls("mono-chart-message error", "message")} role="alert">
                 ${this._error}
               </div>` : nothing}
           <div class="mono-chart-canvas-wrap" style=${styleMap(this._wrapStyle())}>
             <canvas class=${this._cls("", "canvas")} role="img"></canvas>
             <div class="mono-chart-tooltip" role="tooltip" aria-hidden="true"></div>
+            ${this._renderSourceState()}
           </div>
         </div>
       `;
@@ -706,6 +774,16 @@ var MonoChartCore = (superClass) => {
 	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "colors", void 0);
 	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "cssClass", void 0);
 	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "cssClassName", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "loading-text"
+	})], MonoChartCoreClass.prototype, "loadingText", void 0);
+	__decorate([property({
+		type: String,
+		attribute: "retry-label"
+	})], MonoChartCoreClass.prototype, "retryLabel", void 0);
+	__decorate([property({ converter: booleanStringConverter })], MonoChartCoreClass.prototype, "loading", void 0);
+	__decorate([property({ attribute: "loading-error" })], MonoChartCoreClass.prototype, "loadingError", void 0);
 	__decorate([state()], MonoChartCoreClass.prototype, "_error", void 0);
 	__decorate([query("canvas")], MonoChartCoreClass.prototype, "_canvas", void 0);
 	__decorate([query(".mono-chart-tooltip")], MonoChartCoreClass.prototype, "_tooltipEl", void 0);
@@ -721,14 +799,16 @@ function deepMerge(base, over) {
 	}
 	return out;
 }
+
 //#endregion
-//#region src/components/chart/chart.css?raw
-var chart_default = "/* ============================================================================\r\n   mono-chart — a Chart.js canvas driven by `monoChart(...)` (or a raw chart.js\r\n   `data` object). The library is an OPTIONAL peer, loaded on demand; until it\r\n   resolves the element renders an empty, correctly-sized box so nothing jumps.\r\n\r\n   NOT attribute-styled, on purpose: the chart is a bitmap. This sheet declares\r\n   the palette and the inks as custom properties over the Basecoat tokens, and\r\n   the ELEMENT reads them back at mount (`_resolveColor`, `_themeColors`) and\r\n   hands Chart.js real values — a canvas cannot resolve `var()`. The two boxes\r\n   this sheet does paint (the message, the loading veil) keep their classes.\r\n\r\n   Tokens (ours → Basecoat):\r\n     --_mono-chart-1 … -5                  ≡ --chart-1 … --chart-5 (the default palette, in that order)\r\n     --_mono-chart-primary                 ≡ --primary\r\n     --_mono-chart-secondary               ≡ --muted-foreground (the \"secondary\" ink every field uses)\r\n     --_mono-chart-accent                  ≡ --chart-2 (Basecoat's --accent is a surface, not a series colour)\r\n     --_mono-chart-success/warning/danger/info ≡ --success / --warning / --destructive / --info\r\n     --_mono-chart-text                    ≡ --foreground (legend, title)\r\n     --_mono-chart-muted                   ≡ --muted-foreground (axis ticks, the empty message)\r\n     --_mono-chart-grid                    ≡ --border\r\n     --_mono-chart-surface                 ≡ --background (the hairline between slices)\r\n     --_mono-chart-tooltip-*               ≡ the select panel's popover: --mono-select-dropdown-{bg,color,radius,ring,shadow} → --popover … (the tooltip IS an element, painted here)\r\n     --_mono-chart-font                    ≡ text-xs, in the page font (inherited)\r\n     --_mono-chart-radius                  ≡ --mono-radius-md (tooltip corner, message box)\r\n     --_mono-chart-bar-radius              ≡ the field's corner chain (--mono-input-outline-radius → --mono-input-radius → --mono-radius-md)\r\n\r\n   Every `--mono-chart-<k>` is a public override; the flavours carry nothing —\r\n   the tokens they retune (border, foreground, popover, chart-n) reach the chart\r\n   through these chains. Dark mode is the same tokens flipped; the element\r\n   watches the mode class and repaints.\r\n   ============================================================================ */\r\n\r\nmono-chart,\r\nmono-chart-bar,\r\nmono-chart-line,\r\nmono-chart-pie,\r\nmono-chart-doughnut {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\nmono-chart *,\r\nmono-chart-bar *,\r\nmono-chart-line *,\r\nmono-chart-pie *,\r\nmono-chart-doughnut * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.mono-chart {\r\n  position: relative;\r\n  width: 100%;\r\n  color: var(--_mono-chart-text);\r\n  /* the canvas inherits nothing; the element READS these two off this box */\r\n  font-family: var(--_mono-chart-font-family);\r\n  font-size: var(--_mono-chart-font);\r\n\r\n  /* Public customization API → private resolvers. The ELEMENT also reads these\r\n     at mount time and hands the resolved colors to Chart.js: canvas painting\r\n     can't resolve `var()`, so the palette has to cross into JS as real values. */\r\n  --_mono-chart-1: var(--mono-chart-1, var(--chart-1));\r\n  --_mono-chart-2: var(--mono-chart-2, var(--chart-2));\r\n  --_mono-chart-3: var(--mono-chart-3, var(--chart-3));\r\n  --_mono-chart-4: var(--mono-chart-4, var(--chart-4));\r\n  --_mono-chart-5: var(--mono-chart-5, var(--chart-5));\r\n\r\n  --_mono-chart-primary: var(--mono-chart-primary, var(--primary));\r\n  --_mono-chart-secondary: var(--mono-chart-secondary, var(--muted-foreground));\r\n  --_mono-chart-accent: var(--mono-chart-accent, var(--chart-2));\r\n  --_mono-chart-success: var(--mono-chart-success, var(--success));\r\n  --_mono-chart-warning: var(--mono-chart-warning, var(--warning));\r\n  --_mono-chart-danger: var(--mono-chart-danger, var(--destructive));\r\n  --_mono-chart-info: var(--mono-chart-info, var(--info));\r\n\r\n  --_mono-chart-text: var(--mono-chart-text, var(--foreground));\r\n  --_mono-chart-muted: var(--mono-chart-muted, var(--muted-foreground));\r\n  --_mono-chart-grid: var(--mono-chart-grid, var(--border));\r\n  --_mono-chart-surface: var(--mono-chart-surface, var(--background));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1\r\n     (a tooltip is a popover: the same chrome, at text-xs). It is the FLAVOUR's\r\n     popover: the corner, ring and shadow read the select panel's public knobs,\r\n     which every flavour writes (luma 3xl + shadow-lg, lyra 0, maia 2xl …). */\r\n  --_mono-chart-tooltip-bg: var(--mono-chart-tooltip-bg, var(--mono-select-dropdown-bg, var(--popover)));\r\n  --_mono-chart-tooltip-color: var(--mono-chart-tooltip-color, var(--mono-select-dropdown-color, var(--popover-foreground)));\r\n  --_mono-chart-tooltip-border: var(--mono-chart-tooltip-border, var(--border));\r\n  --_mono-chart-tooltip-radius: var(--mono-chart-tooltip-radius, var(--mono-select-dropdown-radius, var(--mono-radius-md)));\r\n  --_mono-chart-tooltip-ring: var(--mono-chart-tooltip-ring, var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-chart-tooltip-shadow: var(--mono-chart-tooltip-shadow, var(--mono-select-dropdown-shadow, var(--mono-shadow-md)));\r\n\r\n  --_mono-chart-font: var(--mono-chart-font, var(--mono-text-xs));\r\n  /* INHERIT, not --font-sans: every other mono control inherits the page font\r\n     for its labels, and a chart sits among them */\r\n  --_mono-chart-font-family: var(--mono-chart-font-family, inherit);\r\n  --_mono-chart-radius: var(--mono-chart-radius, var(--mono-radius-md));\r\n  /* The bars' corner IS the flavour's field corner — lyra squares a field through\r\n     `--mono-input-radius`, sera through `--mono-input-outline-radius`, maia and\r\n     luma pill it through the same knob — so bars are square where the fields are\r\n     and round where they are, with nothing set. Chart.js clamps it to half a bar. */\r\n  --_mono-chart-bar-radius: var(--mono-chart-bar-radius, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n\r\n  /* Chart.js wants PIXELS and a custom property's computed value is still the\r\n     token string (`calc(…)`, `2rem`), so the two radii are painted onto real,\r\n     invisible border-radius properties here and read back computed. */\r\n  border-radius: var(--_mono-chart-radius);\r\n}\r\n\r\n/* The canvas box. Chart.js sets the canvas' intrinsic width/height itself; this\r\n   wrapper owns the LAYOUT size so `responsive: true` has something to measure. */\r\n.mono-chart-canvas-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  /* the bar corner, in px — see the root */\r\n  border-radius: var(--_mono-chart-bar-radius);\r\n}\r\n\r\n.mono-chart canvas {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n}\r\n\r\n/* The tooltip — an HTML popover placed over the canvas by the element\r\n   (Chart.js's `tooltip.external`), not the bitmap one: a canvas can take a\r\n   colour and a corner, not the flavour's ring and shadow. Positioned from the\r\n   caret; `data-side` says which way it opened. */\r\n.mono-chart-tooltip {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  z-index: 2;\r\n  display: none;\r\n  flex-direction: column;\r\n  gap: calc(var(--mono-spacing) * 0.5);\r\n  /* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1; px-3 py-1.5 text-xs */\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-chart-tooltip-radius);\r\n  background: var(--_mono-chart-tooltip-bg);\r\n  color: var(--_mono-chart-tooltip-color);\r\n  box-shadow: var(--_mono-chart-tooltip-ring), var(--_mono-chart-tooltip-shadow);\r\n  font-size: var(--_mono-chart-font);\r\n  line-height: var(--mono-text-xs--lh);\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n  transform: translate(-50%, calc(-100% - calc(var(--mono-spacing) * 2)));\r\n  opacity: 0;\r\n  transition: opacity var(--mono-duration-fast, 100ms) var(--mono-ease);\r\n}\r\n\r\n.mono-chart-tooltip[data-open] {\r\n  display: flex;\r\n  opacity: 1;\r\n}\r\n\r\n/* no room above the point: open below it */\r\n.mono-chart-tooltip[data-side='bottom'] {\r\n  transform: translate(-50%, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n.mono-chart-tooltip-title {\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n.mono-chart-tooltip-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n/* the series swatch — a rounded chip, like the legend's */\r\n.mono-chart-tooltip-swatch {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 2.5);\r\n  height: calc(var(--mono-spacing) * 2.5);\r\n  border-radius: var(--mono-radius-sm);\r\n}\r\n\r\n.mono-chart-tooltip-value {\r\n  margin-inline-start: auto;\r\n  font-variant-numeric: tabular-nums;\r\n  padding-inline-start: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mono-chart-tooltip {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* Shown while the optional peer loads, when there is no data, or on error —\r\n   basecoat's empty-state idiom: a dashed hairline, muted text. */\r\n.mono-chart-message {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 6rem;\r\n  padding: calc(var(--mono-spacing) * 4);\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n  color: var(--_mono-chart-muted);\r\n  text-align: center;\r\n  border: var(--mono-border-width) dashed var(--_mono-chart-grid);\r\n  border-radius: var(--_mono-chart-radius);\r\n}\r\n\r\n.mono-chart-message.error {\r\n  color: var(--_mono-chart-danger);\r\n  border-color: color-mix(in oklab, var(--_mono-chart-danger) 45%, var(--_mono-chart-grid));\r\n}\r\n\r\n/* Loading veil — the canvas stays mounted so Chart.js keeps its size. */\r\n.mono-chart.loading .mono-chart-canvas-wrap {\r\n  opacity: 0.55;\r\n  transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mono-chart.loading .mono-chart-canvas-wrap {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\chart\chart.css?raw.js
+var chart_css_raw_default = "/* ============================================================================\r\n   mono-chart — a Chart.js canvas driven by `monoChart(...)` (or a raw chart.js\r\n   `data` object). The library is an OPTIONAL peer, loaded on demand; until it\r\n   resolves the element renders an empty, correctly-sized box so nothing jumps.\r\n\r\n   NOT attribute-styled, on purpose: the chart is a bitmap. This sheet declares\r\n   the palette and the inks as custom properties over the Basecoat tokens, and\r\n   the ELEMENT reads them back at mount (`_resolveColor`, `_themeColors`) and\r\n   hands Chart.js real values — a canvas cannot resolve `var()`. The two boxes\r\n   this sheet does paint (the message, the loading veil) keep their classes.\r\n\r\n   Tokens (ours → Basecoat):\r\n     --_mono-chart-1 … -5                  ≡ --chart-1 … --chart-5 (the default palette, in that order)\r\n     --_mono-chart-primary                 ≡ --primary\r\n     --_mono-chart-secondary               ≡ --muted-foreground (the \"secondary\" ink every field uses)\r\n     --_mono-chart-accent                  ≡ --chart-2 (Basecoat's --accent is a surface, not a series colour)\r\n     --_mono-chart-success/warning/danger/info ≡ --success / --warning / --destructive / --info\r\n     --_mono-chart-text                    ≡ --foreground (legend, title)\r\n     --_mono-chart-muted                   ≡ --muted-foreground (axis ticks, the empty message)\r\n     --_mono-chart-grid                    ≡ --border\r\n     --_mono-chart-surface                 ≡ --background (the hairline between slices)\r\n     --_mono-chart-tooltip-*               ≡ the select panel's popover: --mono-select-dropdown-{bg,color,radius,ring,shadow} → --popover … (the tooltip IS an element, painted here)\r\n     --_mono-chart-font                    ≡ text-xs, in the page font (inherited)\r\n     --_mono-chart-radius                  ≡ --mono-radius-md (tooltip corner, message box)\r\n     --_mono-chart-bar-radius              ≡ the field's corner chain (--mono-input-outline-radius → --mono-input-radius → --mono-radius-md)\r\n\r\n   Every `--mono-chart-<k>` is a public override; the flavours carry nothing —\r\n   the tokens they retune (border, foreground, popover, chart-n) reach the chart\r\n   through these chains. Dark mode is the same tokens flipped; the element\r\n   watches the mode class and repaints.\r\n   ============================================================================ */\r\n\r\nmono-chart,\r\nmono-chart-bar,\r\nmono-chart-line,\r\nmono-chart-pie,\r\nmono-chart-doughnut {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\nmono-chart *,\r\nmono-chart-bar *,\r\nmono-chart-line *,\r\nmono-chart-pie *,\r\nmono-chart-doughnut * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.mono-chart {\r\n  position: relative;\r\n  width: 100%;\r\n  color: var(--_mono-chart-text);\r\n  /* the canvas inherits nothing; the element READS these two off this box */\r\n  font-family: var(--_mono-chart-font-family);\r\n  font-size: var(--_mono-chart-font);\r\n\r\n  /* Public customization API → private resolvers. The ELEMENT also reads these\r\n     at mount time and hands the resolved colors to Chart.js: canvas painting\r\n     can't resolve `var()`, so the palette has to cross into JS as real values. */\r\n  --_mono-chart-1: var(--mono-chart-1, var(--chart-1));\r\n  --_mono-chart-2: var(--mono-chart-2, var(--chart-2));\r\n  --_mono-chart-3: var(--mono-chart-3, var(--chart-3));\r\n  --_mono-chart-4: var(--mono-chart-4, var(--chart-4));\r\n  --_mono-chart-5: var(--mono-chart-5, var(--chart-5));\r\n\r\n  --_mono-chart-primary: var(--mono-chart-primary, var(--primary));\r\n  --_mono-chart-secondary: var(--mono-chart-secondary, var(--muted-foreground));\r\n  --_mono-chart-accent: var(--mono-chart-accent, var(--chart-2));\r\n  --_mono-chart-success: var(--mono-chart-success, var(--success));\r\n  --_mono-chart-warning: var(--mono-chart-warning, var(--warning));\r\n  --_mono-chart-danger: var(--mono-chart-danger, var(--destructive));\r\n  --_mono-chart-info: var(--mono-chart-info, var(--info));\r\n\r\n  --_mono-chart-text: var(--mono-chart-text, var(--foreground));\r\n  --_mono-chart-muted: var(--mono-chart-muted, var(--muted-foreground));\r\n  --_mono-chart-grid: var(--mono-chart-grid, var(--border));\r\n  --_mono-chart-surface: var(--mono-chart-surface, var(--background));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1\r\n     (a tooltip is a popover: the same chrome, at text-xs). It is the FLAVOUR's\r\n     popover: the corner, ring and shadow read the select panel's public knobs,\r\n     which every flavour writes (luma 3xl + shadow-lg, lyra 0, maia 2xl …). */\r\n  --_mono-chart-tooltip-bg: var(--mono-chart-tooltip-bg, var(--mono-select-dropdown-bg, var(--popover)));\r\n  --_mono-chart-tooltip-color: var(--mono-chart-tooltip-color, var(--mono-select-dropdown-color, var(--popover-foreground)));\r\n  --_mono-chart-tooltip-border: var(--mono-chart-tooltip-border, var(--border));\r\n  --_mono-chart-tooltip-radius: var(--mono-chart-tooltip-radius, var(--mono-select-dropdown-radius, var(--mono-radius-md)));\r\n  --_mono-chart-tooltip-ring: var(--mono-chart-tooltip-ring, var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-chart-tooltip-shadow: var(--mono-chart-tooltip-shadow, var(--mono-select-dropdown-shadow, var(--mono-shadow-md)));\r\n\r\n  --_mono-chart-font: var(--mono-chart-font, var(--mono-text-xs));\r\n  /* INHERIT, not --font-sans: every other mono control inherits the page font\r\n     for its labels, and a chart sits among them */\r\n  --_mono-chart-font-family: var(--mono-chart-font-family, inherit);\r\n  --_mono-chart-radius: var(--mono-chart-radius, var(--mono-radius-md));\r\n  /* The bars' corner IS the flavour's field corner — lyra squares a field through\r\n     `--mono-input-radius`, sera through `--mono-input-outline-radius`, maia and\r\n     luma pill it through the same knob — so bars are square where the fields are\r\n     and round where they are, with nothing set. Chart.js clamps it to half a bar. */\r\n  --_mono-chart-bar-radius: var(--mono-chart-bar-radius, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n\r\n  /* Chart.js wants PIXELS and a custom property's computed value is still the\r\n     token string (`calc(…)`, `2rem`), so the two radii are painted onto real,\r\n     invisible border-radius properties here and read back computed. */\r\n  border-radius: var(--_mono-chart-radius);\r\n}\r\n\r\n/* The canvas box. Chart.js sets the canvas' intrinsic width/height itself; this\r\n   wrapper owns the LAYOUT size so `responsive: true` has something to measure. */\r\n.mono-chart-canvas-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  /* the bar corner, in px — see the root */\r\n  border-radius: var(--_mono-chart-bar-radius);\r\n}\r\n\r\n.mono-chart canvas {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n}\r\n\r\n/* The tooltip — an HTML popover placed over the canvas by the element\r\n   (Chart.js's `tooltip.external`), not the bitmap one: a canvas can take a\r\n   colour and a corner, not the flavour's ring and shadow. Positioned from the\r\n   caret; `data-side` says which way it opened. */\r\n.mono-chart-tooltip {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  z-index: 2;\r\n  display: none;\r\n  flex-direction: column;\r\n  gap: calc(var(--mono-spacing) * 0.5);\r\n  /* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1; px-3 py-1.5 text-xs */\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-chart-tooltip-radius);\r\n  background: var(--_mono-chart-tooltip-bg);\r\n  color: var(--_mono-chart-tooltip-color);\r\n  box-shadow: var(--_mono-chart-tooltip-ring), var(--_mono-chart-tooltip-shadow);\r\n  font-size: var(--_mono-chart-font);\r\n  line-height: var(--mono-text-xs--lh);\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n  transform: translate(-50%, calc(-100% - calc(var(--mono-spacing) * 2)));\r\n  opacity: 0;\r\n  transition: opacity var(--mono-duration-fast, 100ms) var(--mono-ease);\r\n}\r\n\r\n.mono-chart-tooltip[data-open] {\r\n  display: flex;\r\n  opacity: 1;\r\n}\r\n\r\n/* no room above the point: open below it */\r\n.mono-chart-tooltip[data-side='bottom'] {\r\n  transform: translate(-50%, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n.mono-chart-tooltip-title {\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n.mono-chart-tooltip-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n/* the series swatch — a rounded chip, like the legend's */\r\n.mono-chart-tooltip-swatch {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 2.5);\r\n  height: calc(var(--mono-spacing) * 2.5);\r\n  border-radius: var(--mono-radius-sm);\r\n}\r\n\r\n.mono-chart-tooltip-value {\r\n  margin-inline-start: auto;\r\n  font-variant-numeric: tabular-nums;\r\n  padding-inline-start: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mono-chart-tooltip {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* Shown while the optional peer loads, when there is no data, or on error —\r\n   basecoat's empty-state idiom: a dashed hairline, muted text. */\r\n.mono-chart-message {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 6rem;\r\n  padding: calc(var(--mono-spacing) * 4);\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n  color: var(--_mono-chart-muted);\r\n  text-align: center;\r\n  border: var(--mono-border-width) dashed var(--_mono-chart-grid);\r\n  border-radius: var(--_mono-chart-radius);\r\n}\r\n\r\n.mono-chart-message.error {\r\n  color: var(--_mono-chart-danger);\r\n  border-color: color-mix(in oklab, var(--_mono-chart-danger) 45%, var(--_mono-chart-grid));\r\n}\r\n\r\n/* Loading veil — the canvas stays mounted so Chart.js keeps its size. The\r\n   source-state overlay is exempt: the spinner must not fade with the chart. */\r\n.mono-chart.loading .mono-chart-canvas-wrap > :not(.mono-chart-state) {\r\n  opacity: 0.55;\r\n  transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* EXTENSION — dataSource state: the first load shows a spinner over the\r\n   (still sized) canvas; a failed load shows the error and a ↻, and outlines the\r\n   plot in the invalid colour — the same signal a failed field gives. */\r\n.mono-chart-state {\r\n  position: absolute;\r\n  inset: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n  padding: calc(var(--mono-spacing) * 4);\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n  color: var(--_mono-chart-muted);\r\n  text-align: center;\r\n}\r\n\r\n.mono-chart[mono-ds-error] .mono-chart-state {\r\n  color: var(--mono-chart-ds-error-text, var(--_mono-chart-danger));\r\n}\r\n\r\n.mono-chart[mono-ds-error] .mono-chart-canvas-wrap {\r\n  outline: var(--mono-border-width, 1px) solid var(--mono-chart-ds-error-border, var(--mono-mode-invalid-border));\r\n  box-shadow: 0 0 0 3px var(--mono-chart-ds-error-ring, var(--mono-mode-invalid-ring));\r\n}\r\n\r\n.mono-chart[mono-ds-loading] .mono-chart-canvas-wrap {\r\n  cursor: progress;\r\n}\r\n\r\n.mono-chart-state-text {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.mono-chart-state [mono-ds-spinner],\r\n.mono-chart-state [mono-ds-retry] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: calc(var(--radius) - 5px);\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n}\r\n\r\n.mono-chart-state [mono-ds-retry] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  .mono-chart-state [mono-ds-retry]:hover {\r\n    background: var(--mono-mode-ghost-hover);\r\n  }\r\n}\r\n\r\n.mono-chart-state [mono-ds-retry]:focus-visible {\r\n  outline: 2px solid currentColor;\r\n  outline-offset: 1px;\r\n}\r\n\r\n.mono-chart-state :is([mono-ds-spinner], [mono-ds-retry]) > svg {\r\n  display: block;\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.mono-chart-state [mono-ds-spinner] > svg {\r\n  animation: mono-chart-spin 0.7s linear infinite;\r\n}\r\n\r\n@keyframes mono-chart-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mono-chart.loading .mono-chart-canvas-wrap > :not(.mono-chart-state) {\r\n    transition: none;\r\n  }\r\n\r\n  .mono-chart-state [mono-ds-spinner] > svg {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/chart/mono-chart.ts
-var MonoChart = class MonoChart extends MonoChartCore(LitElement) {
+let MonoChart = class MonoChart extends MonoChartCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(chart_default)];
+		this.styles = [unsafeCSS(chart_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -738,15 +818,16 @@ var MonoChart = class MonoChart extends MonoChartCore(LitElement) {
 	}
 };
 MonoChart = __decorate([customElement("mono-chart")], MonoChart);
+
 //#endregion
 //#region src/components/chart/mono-chart-presets.ts
-var MonoChartBar = class MonoChartBar extends MonoChartCore(LitElement) {
+let MonoChartBar = class MonoChartBar extends MonoChartCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._presetType = "bar";
 	}
 	static {
-		this.styles = [unsafeCSS(chart_default)];
+		this.styles = [unsafeCSS(chart_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -756,13 +837,13 @@ var MonoChartBar = class MonoChartBar extends MonoChartCore(LitElement) {
 	}
 };
 MonoChartBar = __decorate([customElement("mono-chart-bar")], MonoChartBar);
-var MonoChartLine = class MonoChartLine extends MonoChartCore(LitElement) {
+let MonoChartLine = class MonoChartLine extends MonoChartCore(LitElement) {
 	constructor(..._args2) {
 		super(..._args2);
 		this._presetType = "line";
 	}
 	static {
-		this.styles = [unsafeCSS(chart_default)];
+		this.styles = [unsafeCSS(chart_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -772,13 +853,13 @@ var MonoChartLine = class MonoChartLine extends MonoChartCore(LitElement) {
 	}
 };
 MonoChartLine = __decorate([customElement("mono-chart-line")], MonoChartLine);
-var MonoChartPie = class MonoChartPie extends MonoChartCore(LitElement) {
+let MonoChartPie = class MonoChartPie extends MonoChartCore(LitElement) {
 	constructor(..._args3) {
 		super(..._args3);
 		this._presetType = "pie";
 	}
 	static {
-		this.styles = [unsafeCSS(chart_default)];
+		this.styles = [unsafeCSS(chart_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -788,13 +869,13 @@ var MonoChartPie = class MonoChartPie extends MonoChartCore(LitElement) {
 	}
 };
 MonoChartPie = __decorate([customElement("mono-chart-pie")], MonoChartPie);
-var MonoChartDoughnut = class MonoChartDoughnut extends MonoChartCore(LitElement) {
+let MonoChartDoughnut = class MonoChartDoughnut extends MonoChartCore(LitElement) {
 	constructor(..._args4) {
 		super(..._args4);
 		this._presetType = "doughnut";
 	}
 	static {
-		this.styles = [unsafeCSS(chart_default)];
+		this.styles = [unsafeCSS(chart_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -804,5 +885,6 @@ var MonoChartDoughnut = class MonoChartDoughnut extends MonoChartCore(LitElement
 	}
 };
 MonoChartDoughnut = __decorate([customElement("mono-chart-doughnut")], MonoChartDoughnut);
+
 //#endregion
-export { MonoChart, MonoChartBar, MonoChartCore, MonoChartDoughnut, MonoChartLine, MonoChartPie, buildChartApply, buildChartOdataRequest, composeApply, monoChart as controlMonoChart, monoChart, loadChartJs };
+export { MonoChart, MonoChartBar, MonoChartCore, MonoChartDoughnut, MonoChartLine, MonoChartPie, buildChartApply, buildChartOdataRequest, composeApply, monoChart as controlMonoChart, monoChart, loadChartJs };

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 };