@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/shadow/chart.js

@@ -1,17 +1,18 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter, v as monoPendingGrace } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { n as toCssSize } from "../../css-size-DhHSVZJK.js";
-import { n as detachEventHandlers, t as applyProps } from "../../element-props-CLB6yvbm.js";
-import { t as createNotifier } from "../../notifier-CE4yxMUQ.js";
-import { n as isPath, t as getFieldValue } from "../../field-path-C92eGLg3.js";
-import { A as compileFilterPredicate, O as andFilters, a as describeError, c as errorTitle, k as andPredicates, l as isCanceled, s as errorText } from "../../reactive-Di3mTMnV.js";
-import { r as readAllRows } from "../../data-source-read-B4DGp6UQ.js";
-import { a as resolveDataSourceOptions, d as createApplyGate, f as isRolledUp, h as monoArraySource, i as normalizeSortList, n as extraLoadOptions, o as toList, p as loadApply, r as mergeDataSourceOptions, u as summaryFilterOf } from "../../data-source-options-CP-X62Pa.js";
-import { t as arrayToODataString } from "../../filter-odata-C1vSGZaY.js";
-import { a as spinnerIcon, i as refreshIcon } from "../../field-icons-DELrSdqJ.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter, v as monoPendingGrace } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { n as toCssSize } from "../../css-size-DWAPgQdT.js";
+import { n as detachEventHandlers, t as applyProps } from "../../element-props-xvw0EB7H.js";
+import { t as createNotifier } from "../../notifier-BIrqUzRh.js";
+import { n as isPath, t as getFieldValue } from "../../field-path-BabiMrrA.js";
+import { A as compileFilterPredicate, O as andFilters, a as describeError, c as errorTitle, k as andPredicates, l as isCanceled, s as errorText } from "../../reactive-DFCdZbH9.js";
+import { r as readAllRows } from "../../data-source-read-Cuqw3LcP.js";
+import { a as resolveDataSourceOptions, d as createApplyGate, f as isRolledUp, h as monoArraySource, i as normalizeSortList, n as extraLoadOptions, o as toList, p as loadApply, r as mergeDataSourceOptions, u as summaryFilterOf } from "../../data-source-options-Bk-UoaZV.js";
+import { t as arrayToODataString } from "../../filter-odata-Bi27XUpQ.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
@@ -20,7 +21,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",
@@ -36,7 +37,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)",
@@ -68,7 +69,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;
@@ -86,7 +87,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);
@@ -800,13 +801,15 @@ 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. 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";
+//#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.shadow.ts
-var SHADOW_CHART_CSS$1 = toShadowCss(chart_default, { host: "mono-chart" });
-var MonoChartShadow = class MonoChartShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+const SHADOW_CHART_CSS$1 = toShadowCss(chart_css_raw_default, { host: "mono-chart" });
+let MonoChartShadow = class MonoChartShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
@@ -823,10 +826,11 @@ var MonoChartShadow = class MonoChartShadow extends withShadowUtilityStyles(Mono
 	}
 };
 MonoChartShadow = __decorate([customElement("mono-shadow-chart")], MonoChartShadow);
+
 //#endregion
 //#region src/components/chart/mono-chart-presets.shadow.ts
-var SHADOW_CHART_CSS = toShadowCss(chart_default, { host: "mono-chart" });
-var MonoChartBarShadow = class MonoChartBarShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+const SHADOW_CHART_CSS = toShadowCss(chart_css_raw_default, { host: "mono-chart" });
+let MonoChartBarShadow = class MonoChartBarShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this._presetType = "bar";
@@ -847,7 +851,7 @@ var MonoChartBarShadow = class MonoChartBarShadow extends withShadowUtilityStyle
 	}
 };
 MonoChartBarShadow = __decorate([customElement("mono-shadow-chart-bar")], MonoChartBarShadow);
-var MonoChartLineShadow = class MonoChartLineShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+let MonoChartLineShadow = class MonoChartLineShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
 	constructor(..._args2) {
 		super(..._args2);
 		this._presetType = "line";
@@ -868,7 +872,7 @@ var MonoChartLineShadow = class MonoChartLineShadow extends withShadowUtilitySty
 	}
 };
 MonoChartLineShadow = __decorate([customElement("mono-shadow-chart-line")], MonoChartLineShadow);
-var MonoChartPieShadow = class MonoChartPieShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+let MonoChartPieShadow = class MonoChartPieShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
 	constructor(..._args3) {
 		super(..._args3);
 		this._presetType = "pie";
@@ -889,7 +893,7 @@ var MonoChartPieShadow = class MonoChartPieShadow extends withShadowUtilityStyle
 	}
 };
 MonoChartPieShadow = __decorate([customElement("mono-shadow-chart-pie")], MonoChartPieShadow);
-var MonoChartDoughnutShadow = class MonoChartDoughnutShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+let MonoChartDoughnutShadow = class MonoChartDoughnutShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
 	constructor(..._args4) {
 		super(..._args4);
 		this._presetType = "doughnut";
@@ -910,13 +914,14 @@ var MonoChartDoughnutShadow = class MonoChartDoughnutShadow extends withShadowUt
 	}
 };
 MonoChartDoughnutShadow = __decorate([customElement("mono-shadow-chart-doughnut")], MonoChartDoughnutShadow);
+
 //#endregion
 //#region src/components/chart/chart-odata.ts
 /**
 * `MonoChartAgg` → the OData aggregate keyword. Every value the chart supports has
 * an exact equivalent, so the server path never has to fall back to draining.
 */
-var ODATA_AGG = {
+const ODATA_AGG = {
 	sum: "sum",
 	avg: "average",
 	min: "min",
@@ -924,7 +929,7 @@ var ODATA_AGG = {
 	count: "$count"
 };
 /** A dotted path (`Job.Budget`) addresses a nav property as `Job/Budget` in OData. */
-var toODataPath = (field) => field.replaceAll(".", "/");
+const toODataPath = (field) => field.replaceAll(".", "/");
 /**
 * Build `groupby((<groupBy>),aggregate(<field> with <agg> as <field>, …))`.
 *
@@ -993,6 +998,7 @@ function buildChartOdataRequest(input) {
 		aggregated: params.$apply !== void 0
 	};
 }
+
 //#endregion
 //#region src/components/chart/mono-data-chart.ts
 /**
@@ -1003,7 +1009,7 @@ function buildChartOdataRequest(input) {
 * time, so a colour preset, a flavour or dark mode recolours charts too. Past
 * five series the roles follow, so a sixth dataset is still its own colour.
 */
-var DEFAULT_COLORS = [
+const DEFAULT_COLORS = [
 	"chart-1",
 	"chart-2",
 	"chart-3",
@@ -1018,7 +1024,7 @@ var DEFAULT_COLORS = [
 * (reading `data()` in Node), or before an element mounts. ONE's light tokens,
 * so the shape is right even without a DOM.
 */
-var NAME_FALLBACK = {
+const NAME_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)",
@@ -1681,5 +1687,6 @@ function monoChart(source = null, opts = {}) {
 	if (!source && opts.odata?.url) loadOdata().catch(() => {});
 	return ctrl;
 }
+
 //#endregion
-export { MonoChartBarShadow, MonoChartCore, MonoChartDoughnutShadow, MonoChartLineShadow, MonoChartPieShadow, MonoChartShadow, buildChartApply, composeApply, monoChart as controlMonoChart, monoChart, loadChartJs };
+export { MonoChartBarShadow, MonoChartCore, MonoChartDoughnutShadow, MonoChartLineShadow, MonoChartPieShadow, MonoChartShadow, buildChartApply, composeApply, monoChart as controlMonoChart, monoChart, loadChartJs };

package/dist/ui/shadow/checkbox.js

@@ -1,10 +1,11 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as MonoFormControlCore } from "../../form-control-core-B8d7k6vk.js";
-import { t as checkbox_default } from "../../checkbox-Cqpie9Ap.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as MonoFormControlCore } from "../../form-control-core-CIdMLXMo.js";
+import { t as checkbox_css_raw_default } from "../../checkbox.css_raw-AYtSbUtY.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+
 //#region src/components/checkbox/checkbox-core.ts
 /**
 * `MonoCheckboxCore` — all render-mode-agnostic logic for `mono-checkbox`:
@@ -18,7 +19,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);
@@ -290,15 +291,16 @@ var MonoCheckboxCore = (superClass) => {
 	__decorate([state()], MonoCheckboxCoreClass.prototype, "_hasDescriptionSlotState", void 0);
 	return MonoCheckboxCoreClass;
 };
+
 //#endregion
 //#region src/components/checkbox/mono-checkbox.shadow.ts
-var SHADOW_EXTRA_CSS = "";
-var MonoCheckboxShadow = class MonoCheckboxShadow extends withShadowUtilityStyles(MonoCheckboxCore(LitElement)) {
+const SHADOW_EXTRA_CSS = "";
+let MonoCheckboxShadow = class MonoCheckboxShadow extends withShadowUtilityStyles(MonoCheckboxCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(checkbox_default, {
+		this.styles = [unsafeCSS(toShadowCss(checkbox_css_raw_default, {
 			host: "mono-checkbox",
 			hostDisplay: "inline-block",
 			append: SHADOW_EXTRA_CSS
@@ -412,6 +414,7 @@ var MonoCheckboxShadow = class MonoCheckboxShadow extends withShadowUtilityStyle
 	}
 };
 MonoCheckboxShadow = __decorate([customElement("mono-shadow-checkbox")], MonoCheckboxShadow);
+
 //#endregion
 //#region src/components/checkbox/checkbox-utils.ts
 /**
@@ -453,5 +456,6 @@ function generateCheckboxAttributes(disabled, checked, indeterminate, label) {
 		"aria-label": label || void 0
 	};
 }
+
 //#endregion
-export { MonoCheckboxCore, MonoCheckboxShadow, generateCheckboxAttributes, validateCheckboxProps };
+export { MonoCheckboxCore, MonoCheckboxShadow, generateCheckboxAttributes, validateCheckboxProps };

package/dist/ui/shadow/chip.js

@@ -1,10 +1,11 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, p as defineMonoElement, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as chip_default } from "../../chip-DBUUa2eB.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, p as defineMonoElement, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as chip_css_raw_default } from "../../chip.css_raw-ChfRSHLO.js";
 import { LitElement, html, isServer, 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
@@ -18,7 +19,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);
@@ -265,19 +266,20 @@ var MonoChipCore = (superClass) => {
 	__decorate([query("div > span, div > a")], MonoChipCoreClass.prototype, "_chipElement", void 0);
 	return MonoChipCoreClass;
 };
+
 //#endregion
 //#region src/components/chip/mono-chip.shadow.ts
-var SHADOW_EXTRA_CSS = `
+const SHADOW_EXTRA_CSS = `
 [data-mono-slot='icon'][data-empty] {
   display: none;
 }
 `;
-var MonoChipShadow = class MonoChipShadow extends withShadowUtilityStyles(MonoChipCore(LitElement)) {
+let MonoChipShadow = class MonoChipShadow extends withShadowUtilityStyles(MonoChipCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(chip_default, {
+		this.styles = [unsafeCSS(toShadowCss(chip_css_raw_default, {
 			host: "mono-chip",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -347,8 +349,9 @@ var MonoChipShadow = class MonoChipShadow extends withShadowUtilityStyles(MonoCh
       `, () => nothing);
 	}
 	_renderContent() {
+		const contentClass = this._cls(this.iconPosition === "right" ? "chip-content icon-right" : "chip-content icon-left", "content");
 		return html`
-      <span class=${this._cls(this.iconPosition === "right" ? "chip-content icon-right" : "chip-content icon-left", "content")} mono-content>
+      <span class=${contentClass} mono-content>
         ${this._renderDot()}
         ${this.iconPosition === "left" ? this._iconSpan() : nothing}
         ${this._renderLabel()}
@@ -426,6 +429,7 @@ var MonoChipShadow = class MonoChipShadow extends withShadowUtilityStyles(MonoCh
 	}
 };
 MonoChipShadow = __decorate([customElement("mono-shadow-chip")], MonoChipShadow);
+
 //#endregion
 //#region src/components/chip/mono-status-dot.ts
 /**
@@ -443,7 +447,7 @@ MonoChipShadow = __decorate([customElement("mono-shadow-chip")], MonoChipShadow)
 */
 var MonoStatusDot = class extends LitElement {
 	static {
-		this.styles = [unsafeCSS(chip_default)];
+		this.styles = [unsafeCSS(chip_css_raw_default)];
 	}
 	constructor() {
 		super();
@@ -495,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) {
@@ -555,5 +560,6 @@ function validateChipProps(props) {
 	if (props.rounded && !validRounded.includes(props.rounded)) return false;
 	return true;
 }
+
 //#endregion
-export { MonoChipCore, MonoChipShadow, MonoStatusDot, generateChipRootClasses, isInteractive, validateChipProps };
+export { MonoChipCore, MonoChipShadow, MonoStatusDot, generateChipRootClasses, isInteractive, validateChipProps };