@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/card.js

@@ -1,12 +1,13 @@
-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 { a as parkDetachedNodes, n as bucketHasContent, o as placeLightSlots, r as captureLightSlots } from "../light-slots-DW1WgfgT.js";
-import { t as buildSizeStyle } from "../css-size-DhHSVZJK.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 { a as parkDetachedNodes, n as bucketHasContent, o as placeLightSlots, r as captureLightSlots } from "../light-slots-DdDdZ6zs.js";
+import { t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/card/card-core.ts
 /**
 * `MonoCardCore` — all render-mode-agnostic logic for `mono-card`: reactive
@@ -19,7 +20,7 @@ import { styleMap } from "lit/directives/style-map.js";
 * SSR-safe: no `document`/`window` access. `_cardElement` (`@query`) is lazy and
 * `focus/blur/click` + the `HTMLAnchorElement` check only run client-side.
 */
-var MonoCardCore = (superClass) => {
+const MonoCardCore = (superClass) => {
 	class MonoCardCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -275,13 +276,15 @@ var MonoCardCore = (superClass) => {
 	__decorate([query(".mono-card")], MonoCardCoreClass.prototype, "_cardElement", void 0);
 	return MonoCardCoreClass;
 };
+
 //#endregion
-//#region src/components/card/card.css?raw
-var card_default = "/* =========================================================================\r\n   mono-card — a port of Basecoat's `.card` (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-card size=\"sm\" variant=\"outlined\" color=\"primary\" title=\"Title\">\r\n     <div mono-card mono-size=\"sm\" mono-variant=\"outlined\" mono-color=\"primary\">\r\n       <div mono-header>\r\n         <div mono-header-content><h3 mono-title>Title</h3></div>\r\n       </div>\r\n       <div mono-body><p>…</p></div>\r\n       <div mono-footer>…</div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-variant])` = elevated, `:not([mono-color])` = neutral). The element\r\n   renders these attributes on its root (both builds) plus the STATES\r\n   `mono-bordered` / `mono-hoverable` / `mono-clickable` / `mono-selected` /\r\n   `mono-disabled` / `mono-loading`, and the negatives `mono-no-header-divider` /\r\n   `mono-no-footer-divider` (both dividers default ON, so the attribute marks the\r\n   exception). The old classes (`.mono-card.md.elevated.primary`) are still\r\n   emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-card]                                   ≡ .card (flex-col gap-6 py-6 rounded-xl bg-card text-card-foreground text-sm shadow-xs ring-1 ring-foreground/10 overflow-hidden)\r\n                                                     — the ring is drawn as an INSET box-shadow, see --_mono-card-edge-*\r\n     [mono-card] > [mono-header]                   ≡ .card > header (grid auto-rows-min gap-1 px-6)\r\n     [mono-title]                                  ≡ .card > header > :is(h2, h3, [data-title], .card-title) (text-base font-medium leading-normal)\r\n     [mono-subtitle]                               ≡ .card > header > :is(p, [data-description], .card-description) (text-sm text-muted-foreground)\r\n     [mono-body]                                   ≡ .card > section (px-6)\r\n     [mono-footer] / [mono-actions]                ≡ .card > footer (flex items-center px-6)\r\n     [mono-size=\"sm\"]                              ≡ .card[data-size='sm'] (gap-4 py-4, px-4 on every region)\r\n     [mono-size=\"xs|lg|xl|xxl\"]                    ≡ EXTENSION (the same ladder continued)\r\n     [mono-variant=\"outlined\"]                     ≡ .card verbatim (the ring + shadow-xs)\r\n     [mono-variant=\"elevated|flat|tonal|glass\"]    ≡ EXTENSION (shadow-md / none / an accent tint / a blurred pane)\r\n     [mono-color=\"…\"]                              ≡ EXTENSION (the ring and the title in the role's colour)\r\n     [mono-media]                                  ≡ .card [&>img:first-child]:rounded-t-xl — a full-bleed media band\r\n     [mono-icon], [mono-loading], [mono-selected]  ≡ EXTENSION\r\n\r\n   `gradient` is GONE (variant and colour alike): the port drops every colour\r\n   gradient. `--mono-card-gradient-*` are no-ops until 2.0.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-card]) [mono-body]` = (0,1,0)\r\n   — so a utility class handed in through `cssClass` wins by source order, while\r\n   prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-media], [mono-header] > [mono-icon] / [mono-header-content]\r\n   > [mono-title] / [mono-subtitle], [mono-body], [mono-actions], [mono-footer],\r\n   [mono-loading] > [mono-spinner]. The shadow build renders every region and\r\n   marks the empty ones [mono-empty]; this sheet hides them.\r\n\r\n   FLAVORS set `--mono-card-{radius,shadow,ring-color,ring-width,padding-<size>,\r\n   gap-<size>,title-font-<size>,…}` (the per-style `.card` deltas); every fallback\r\n   here is vega's value (`node scripts/basecoat-styles.mjs --varying \"^\\.card\"`).\r\n   ========================================================================= */\r\n\r\nmono-card {\r\n  display: block;\r\n}\r\n\r\n[mono-card] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-card-bg: var(--mono-card-bg, var(--card));\r\n  --_mono-card-text: var(--mono-card-text, var(--card-foreground));\r\n  --_mono-card-subtext: var(--mono-card-subtext, var(--muted-foreground));\r\n  --_mono-card-accent: var(--mono-card-accent, var(--_mono-card-accent-preset, var(--neutral)));\r\n  /* ring-1 ring-foreground/10 — Basecoat rings the card, it does not border it;\r\n     `bordered` adds a real border on top (EXTENSION) */\r\n  --_mono-card-ring-color: var(--mono-card-ring-color, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-card-ring-width: var(--mono-card-ring-width, var(--mono-border-width));\r\n  --_mono-card-shadow: var(--mono-card-shadow, var(--mono-shadow-xs));\r\n  --_mono-card-shadow-elevated: var(--mono-card-shadow-elevated, var(--mono-shadow-md));\r\n  --_mono-card-shadow-hover: var(--mono-card-shadow-hover, var(--mono-shadow-lg));\r\n  /* the ONE knob a prop also drives: `rounded` writes --_mono-card-radius-preset\r\n     on the element, so a FLAVOR must write that same preset tier (an inherited\r\n     preset loses to the element's own) while --mono-card-radius stays the\r\n     consumer's override and wins over both */\r\n  --_mono-card-radius: var(--mono-card-radius, var(--_mono-card-radius-preset, var(--mono-radius-xl)));\r\n  --_mono-card-border-width: var(--mono-card-border-width, var(--mono-border-width));\r\n  --_mono-card-border-color: var(--mono-card-border-color, var(--border));\r\n  --_mono-card-divider-color: var(--mono-card-divider-color, var(--border));\r\n  --_mono-card-focus-ring-color: var(--mono-card-focus-ring-color, var(--ring));\r\n  --_mono-card-focus-ring-width: var(--mono-card-focus-ring-width, var(--mono-ring-width));\r\n  --_mono-card-focus-ring-alpha: var(--mono-card-focus-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 .card — gap-6 py-6 text-sm; .card > header —\r\n     gap-1 px-6; .card > section / > footer — px-6 */\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-md, calc(var(--mono-spacing) * 6)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-md, calc(var(--mono-spacing) * 6)));\r\n  --_mono-card-header-gap: var(--mono-card-header-gap, var(--mono-card-header-gap-md, calc(var(--mono-spacing) * 1)));\r\n  --_mono-card-actions-gap: var(--mono-card-actions-gap, var(--mono-card-actions-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-md, var(--mono-text-sm)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-md, var(--mono-text-base)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-md, var(--mono-text-sm)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-md, calc(var(--mono-spacing) * 9)));\r\n  --_mono-card-icon-glyph: var(--mono-card-icon-glyph, 55%);\r\n\r\n  /* The edge and the elevation are independent, so a variant can drop one\r\n     without touching the other.\r\n\r\n     DEVIATION from upstream: Basecoat draws the edge with `ring-1`, a box-shadow\r\n     OUTSIDE the border box. That pixel is lost wherever the card is flush against\r\n     anything that clips — a container with `overflow: hidden` (every demo stage),\r\n     a horizontal scroller, or the viewport itself — which hid the left edge of a\r\n     full-width card at most widths. The same hairline drawn INSIDE the box is\r\n     unclippable: an INSET box-shadow, layered under the elevation. (It used to\r\n     be an outline with a negative offset; an outline is rasterised as a stroke\r\n     of its own, and on fractional display scales it landed one device pixel\r\n     inside the background's edge, so the card read as a DOUBLE border. An inset\r\n     shadow is part of the background's own box and cannot separate from it.)\r\n     It paints under the descendants, so a full-bleed child must stop one\r\n     edge-width short of the box, or cover it knowingly. */\r\n  --_mono-card-edge-width: var(--_mono-card-ring-width);\r\n  --_mono-card-edge-color: var(--_mono-card-ring-color);\r\n  --_mono-card-elevation: var(--_mono-card-shadow);\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-card-gap);\r\n  position: relative;\r\n  min-width: 0;\r\n  padding-block: var(--_mono-card-padding);\r\n  overflow: hidden;\r\n  border-radius: var(--_mono-card-radius);\r\n  background-color: var(--_mono-card-bg);\r\n  color: var(--_mono-card-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-card-font);\r\n  box-shadow:\r\n    inset 0 0 0 var(--_mono-card-edge-width) var(--_mono-card-edge-color),\r\n    var(--_mono-card-elevation);\r\n  text-decoration: none;\r\n  transition-property: background-color, border-color, box-shadow, transform, opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-card],\r\n:where([mono-card]) *,\r\n:where([mono-card]) *::before,\r\n:where([mono-card]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders EVERY region up front (so DSD can project into them\r\n   server-side) and marks the ones with nothing in them; the light build renders\r\n   only what exists. Hiding them here is what keeps the two builds identical —\r\n   and why the media rules below test `:not([mono-empty])`.\r\n\r\n   NOT wrapped in `:where()`, unlike the other parts: a region rule such as\r\n   `[mono-header] > [mono-icon]` is two attributes strong, so a zero-weight hide\r\n   would tie and lose on source order — the icon box kept its 36px in the shadow\r\n   build while the light one rendered nothing at all. */\r\n[mono-card] :is(\r\n  [mono-media],\r\n  [mono-header],\r\n  [mono-icon],\r\n  [mono-title],\r\n  [mono-subtitle],\r\n  [mono-body],\r\n  [mono-actions],\r\n  [mono-footer]\r\n)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — `sm` is upstream's data-size='sm'; the rest continue the ladder\r\n   ========================================= */\r\n\r\n[mono-card][mono-size=\"xs\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-xs, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-xs, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-xs, var(--mono-text-xs)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-xs, 0.8125rem));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-xs, var(--mono-text-xs)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-xs, calc(var(--mono-spacing) * 6)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card[data-size='sm'] — gap-4 py-4 (px-4 on every region) */\r\n[mono-card][mono-size=\"sm\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-sm, calc(var(--mono-spacing) * 4)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-sm, calc(var(--mono-spacing) * 4)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-sm, var(--mono-text-sm)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-sm, var(--mono-text-sm)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-sm, var(--mono-text-sm)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-sm, calc(var(--mono-spacing) * 7.5)));\r\n}\r\n\r\n[mono-card][mono-size=\"lg\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-lg, calc(var(--mono-spacing) * 7)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-lg, calc(var(--mono-spacing) * 7)));\r\n  /* lg keeps md's body and subtitle type by DEFAULT, but still reads its own\r\n     knobs — every step of the ladder has to be settable, or a flavor's value is\r\n     silently inert (the theme lint catches that). */\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-lg, var(--mono-text-sm)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-lg, var(--mono-text-sm)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-lg, var(--mono-text-lg)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-lg, calc(var(--mono-spacing) * 10)));\r\n}\r\n\r\n[mono-card][mono-size=\"xl\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-xl, calc(var(--mono-spacing) * 8)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-xl, calc(var(--mono-spacing) * 8)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-xl, var(--mono-text-base)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-xl, var(--mono-text-xl)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-xl, var(--mono-text-base)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-xl, calc(var(--mono-spacing) * 11)));\r\n}\r\n\r\n[mono-card][mono-size=\"xxl\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-xxl, calc(var(--mono-spacing) * 9)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-xxl, calc(var(--mono-spacing) * 9)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-xxl, var(--mono-text-base)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-xxl, calc(var(--mono-text-xl) * 1.125)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-xxl, var(--mono-text-lg)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-xxl, calc(var(--mono-spacing) * 12)));\r\n}\r\n\r\n/* =========================================\r\n   Corners — the library-wide radius scale\r\n   ========================================= */\r\n\r\n[mono-card][mono-rounded=\"none\"] {\r\n  --_mono-card-radius-preset: 0;\r\n}\r\n[mono-card][mono-rounded=\"xs\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-sm);\r\n}\r\n[mono-card][mono-rounded=\"sm\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-sm);\r\n}\r\n[mono-card][mono-rounded=\"md\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-md);\r\n}\r\n[mono-card][mono-rounded=\"lg\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-lg);\r\n}\r\n[mono-card][mono-rounded=\"xl\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-xl);\r\n}\r\n[mono-card][mono-rounded=\"xxl\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-2xl);\r\n}\r\n[mono-card][mono-rounded=\"full\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-full);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the ring and the title take the role's colour\r\n   ========================================= */\r\n\r\n[mono-card][mono-color=\"primary\"] {\r\n  --_mono-card-accent-preset: var(--primary);\r\n}\r\n[mono-card][mono-color=\"secondary\"] {\r\n  --_mono-card-accent-preset: var(--secondary-foreground);\r\n}\r\n[mono-card][mono-color=\"success\"] {\r\n  --_mono-card-accent-preset: var(--success);\r\n}\r\n[mono-card][mono-color=\"danger\"] {\r\n  --_mono-card-accent-preset: var(--destructive);\r\n}\r\n[mono-card][mono-color=\"warning\"] {\r\n  --_mono-card-accent-preset: var(--warning);\r\n}\r\n[mono-card][mono-color=\"info\"] {\r\n  --_mono-card-accent-preset: var(--info);\r\n}\r\n[mono-card][mono-color=\"teal\"] {\r\n  --_mono-card-accent-preset: var(--teal);\r\n}\r\n[mono-card][mono-color=\"purple\"] {\r\n  --_mono-card-accent-preset: var(--purple);\r\n}\r\n[mono-card][mono-color=\"dark\"] {\r\n  --_mono-card-accent-preset: var(--dark);\r\n}\r\n[mono-card][mono-color=\"neutral\"] {\r\n  --_mono-card-accent-preset: var(--neutral);\r\n}\r\n[mono-card][mono-color=\"light\"] {\r\n  --_mono-card-accent-preset: var(--muted-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `outlined` IS upstream's `.card`: the ring and shadow-xs already on the root */\r\n[mono-card][mono-variant=\"outlined\"] {\r\n  --_mono-card-ring-color: var(--mono-card-ring-color, color-mix(in oklab, var(--_mono-card-accent) 34%, transparent));\r\n}\r\n\r\n/* EXTENSION — a lifted card; the ring stays, the elevation grows */\r\n[mono-card]:is(:not([mono-variant]), [mono-variant=\"elevated\"]) {\r\n  --_mono-card-elevation: var(--_mono-card-shadow-elevated);\r\n}\r\n\r\n/* EXTENSION — no elevation at all */\r\n[mono-card][mono-variant=\"flat\"] {\r\n  --_mono-card-elevation: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — an accent wash (flat tint, never a gradient) */\r\n[mono-card][mono-variant=\"tonal\"] {\r\n  --_mono-card-elevation: 0 0 #0000;\r\n  --_mono-card-ring-color: var(--mono-card-ring-color, color-mix(in oklab, var(--_mono-card-accent) 22%, transparent));\r\n  background-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-tint), var(--_mono-card-bg));\r\n}\r\n\r\n/* EXTENSION — a blurred pane over whatever is behind it */\r\n[mono-card][mono-variant=\"glass\"] {\r\n  --_mono-card-elevation: var(--mono-shadow-lg);\r\n  --_mono-card-ring-color: var(--mono-card-glass-border, color-mix(in oklab, var(--foreground) 12%, transparent));\r\n  background-color: var(--mono-card-glass-bg, color-mix(in oklab, var(--card) 45%, transparent));\r\n  backdrop-filter: blur(var(--mono-card-glass-blur, 12px));\r\n}\r\n\r\n/* =========================================\r\n   States\r\n   ========================================= */\r\n\r\n/* EXTENSION — a real border on top of the ring */\r\n[mono-card][mono-bordered] {\r\n  border: var(--_mono-card-border-width) solid var(--_mono-card-border-color);\r\n}\r\n\r\n[mono-card][mono-clickable] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-card]:is([mono-hoverable], [mono-clickable]):not([mono-disabled]):hover {\r\n    --_mono-card-elevation: var(--_mono-card-shadow-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the chosen card, in the accent (Basecoat's own `has-[:checked]`\r\n   treatment for a selectable label: primary/5 with a primary/30 edge) */\r\n[mono-card][mono-selected] {\r\n  --_mono-card-edge-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-checked-border), transparent);\r\n  --_mono-card-edge-width: calc(var(--mono-border-width) * 2);\r\n  background-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-checked-bg), var(--_mono-card-bg));\r\n}\r\n\r\n[mono-card][mono-disabled] {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* the focus ring is that same inside edge, recoloured and thickened — an\r\n   outside ring would be clipped exactly where the resting one was */\r\n[mono-card]:focus-visible {\r\n  --_mono-card-edge-width: var(--_mono-card-focus-ring-width);\r\n  --_mono-card-edge-color: color-mix(in oklab, var(--_mono-card-focus-ring-color) var(--_mono-card-focus-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Regions — every one of them is inset by the card's padding, which is how\r\n   upstream does it (`px-6` per region, `py-6` on the card) so a media band can\r\n   run full-bleed between them\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/card.css .card >> > header\r\n   — grid auto-rows-min items-start (grid-cols-[1fr_auto] when an action is present) */\r\n/* basecoat@1.0.2 styles/vega.css .card > header — gap-1 px-6 */\r\n:where([mono-card]) > [mono-header] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-card-actions-gap);\r\n  padding-inline: var(--_mono-card-padding);\r\n}\r\n\r\n/* No subtitle: the title is a single line beside a taller icon chip, so\r\n   top-aligning pinned it to the chip's top edge. Centre the row instead.\r\n   With a subtitle the row stays top-aligned (icon level with the title). */\r\n:where([mono-card]) > [mono-header][mono-no-subtitle] {\r\n  align-items: center;\r\n}\r\n\r\n:where([mono-card]) > [mono-header] > [mono-header-content] {\r\n  display: grid;\r\n  align-content: start;\r\n  gap: var(--_mono-card-header-gap);\r\n  min-width: 0;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card > header > :is(h2, h3, [data-title], .card-title)\r\n   — text-base leading-normal font-medium (upstream also sets `leading-none` in\r\n   components/card.css; vega's `leading-normal` wins) */\r\n:where([mono-card]) [mono-title] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-title-font);\r\n  line-height: var(--mono-card-title-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-card-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-card-title-tracking, normal);\r\n  text-transform: var(--mono-card-title-transform, none);\r\n  color: var(--mono-card-title-color, var(--_mono-card-text));\r\n}\r\n\r\n/* the colour prop tints the title, nothing else — `color` is an accent, not a fill */\r\n[mono-card][mono-color]:not([mono-color=\"neutral\"]) [mono-title] {\r\n  color: var(--mono-card-title-color, var(--_mono-card-accent));\r\n}\r\n\r\n/* A heading handed in as <h2>/<h3>/<p> brings its own margins and type, and a\r\n   host page styles those tags too (`.vp-doc h3` is a class selector, so it beats\r\n   any sane rule here). The card OWNS the header type — Basecoat's own\r\n   `.card > header > :is(h2, h3, …)` does the same — so both twins are important:\r\n   the light one to beat the page, the slotted one because an inner-tree rule\r\n   cannot otherwise reach outer-tree content at all. */\r\n:where([mono-card]) :is([mono-title], [mono-subtitle]) > * {\r\n  margin: 0 !important;\r\n  font: inherit !important;\r\n  letter-spacing: inherit !important;\r\n  color: inherit !important;\r\n}\r\n\r\n:where([mono-card]) :is([mono-title], [mono-subtitle]) slot::slotted(*) {\r\n  margin: 0 !important;\r\n  font: inherit !important;\r\n  letter-spacing: inherit !important;\r\n  color: inherit !important;\r\n}\r\n\r\n[mono-card] :is(h1, h2, h3, h4, h5, h6, p, small)[mono-title] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-title-font);\r\n  line-height: var(--mono-card-title-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-card-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-card-title-tracking, normal);\r\n}\r\n\r\n[mono-card] :is(h1, h2, h3, h4, h5, h6, p, small)[mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-subtitle-font);\r\n  line-height: var(--mono-card-subtitle-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card > header > :is(p, [data-description], .card-description)\r\n   — text-muted-foreground text-sm */\r\n:where([mono-card]) [mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-subtitle-font);\r\n  line-height: var(--mono-card-subtitle-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-card-subtext);\r\n}\r\n\r\n/* EXTENSION — the header's leading glyph box */\r\n:where([mono-card]) > [mono-header] > [mono-icon] {\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-card-icon-size);\r\n  height: var(--_mono-card-icon-size);\r\n  border-radius: var(--mono-card-icon-radius, var(--mono-radius-md));\r\n  line-height: 1;\r\n  background-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-card-accent);\r\n  overflow: hidden;\r\n}\r\n\r\n/* `:not(slot)`: in the shadow build the region's only child IS a <slot>, a real\r\n   element that this rule would size — and then `::slotted()` would size the\r\n   glyph again, to 55% of that 55%. The glyph came out half the size of its light\r\n   twin. */\r\n:where([mono-card]) > [mono-header] > [mono-icon] > *:not(slot) {\r\n  display: block;\r\n  width: var(--_mono-card-icon-glyph);\r\n  height: var(--_mono-card-icon-glyph);\r\n}\r\n\r\n:where([mono-card]) > [mono-header] > [mono-icon] slot::slotted(*) {\r\n  display: block !important;\r\n  width: var(--_mono-card-icon-glyph) !important;\r\n  height: var(--_mono-card-icon-glyph) !important;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card > section — px-6 */\r\n:where([mono-card]) > [mono-body] {\r\n  padding-inline: var(--_mono-card-padding);\r\n  min-width: 0;\r\n}\r\n\r\n[mono-card] > :is(p, ul, ol, dl, blockquote)[mono-body] {\r\n  margin-block: 0;\r\n}\r\n\r\n:where([mono-card]) > [mono-body]:empty {\r\n  display: none;\r\n}\r\n\r\n/* The body's own children keep their block margins out of the card's rhythm —\r\n   the card's `gap` is what spaces the regions, and content that wants paragraph\r\n   spacing brings its own.\r\n\r\n   ALL children, not just the first and last: in the shadow build `::slotted()`\r\n   sees the HOST's child order, so `:first-child` there means \"first child of the\r\n   card element\" — a body paragraph that follows a `slot=\"title\"` heading is not\r\n   first, and kept the page's margins while its light twin did not.\r\n\r\n   `!important` on the slotted twins is not a style choice: a `::slotted()` rule\r\n   is an INNER-tree declaration, and a normal declaration from the outer tree (a\r\n   page's `p { margin: … }`) beats it at any specificity. Marking it important\r\n   inverts that order. The light twins need no such thing — they are ordinary\r\n   descendant rules in the same tree as the page. */\r\n:where([mono-card]) > [mono-body] > * {\r\n  margin-block: 0 !important;\r\n}\r\n\r\n:where([mono-card]) > [mono-body] slot::slotted(*) {\r\n  margin-block: 0 !important;\r\n}\r\n\r\n/* basecoat@1.0.2 components/card.css .card >> > footer — flex items-center */\r\n/* basecoat@1.0.2 styles/vega.css .card > footer — rounded-b-xl px-6 [.border-t]:pt-6 */\r\n:where([mono-card]) > :is([mono-actions], [mono-footer]) {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: var(--_mono-card-actions-gap);\r\n  padding-inline: var(--_mono-card-padding);\r\n}\r\n\r\n:where([mono-card]) > [mono-actions] {\r\n  justify-content: flex-end;\r\n}\r\n\r\n/* the dividers: upstream's `[.border-b]:pb-6` idiom — a divided region pays the\r\n   padding back on the divided edge. Both are ON by default, so the ATTRIBUTE\r\n   marks the exception. */\r\n[mono-card]:not([mono-no-header-divider]) > [mono-header]:not([mono-empty]) {\r\n  padding-bottom: var(--_mono-card-padding);\r\n  border-bottom: var(--mono-border-width) solid var(--_mono-card-divider-color);\r\n}\r\n\r\n[mono-card]:not([mono-no-footer-divider]) > :is([mono-actions], [mono-footer]):not([mono-empty]) {\r\n  padding-top: var(--_mono-card-padding);\r\n  border-top: var(--mono-border-width) solid var(--_mono-card-divider-color);\r\n}\r\n\r\n/* =========================================\r\n   Media — a full-bleed band; upstream gives the first/last child image the\r\n   card's own corners and drops the padding on that edge\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card\r\n   — has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl */\r\n:where([mono-card]) > [mono-media] {\r\n  display: block;\r\n  overflow: hidden;\r\n  line-height: 0;\r\n}\r\n\r\n:where([mono-card]) > [mono-media] :is(img, picture, video, canvas, svg) {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  height: auto;\r\n  object-fit: cover;\r\n}\r\n\r\n:where([mono-card]) > [mono-media] slot::slotted(:is(img, picture, video, canvas, svg)) {\r\n  display: block !important;\r\n  width: 100% !important;\r\n  max-width: 100% !important;\r\n  height: auto !important;\r\n  object-fit: cover !important;\r\n}\r\n\r\n[mono-card]:has(> [mono-media]:not([mono-empty]):first-child) {\r\n  padding-top: 0;\r\n}\r\n\r\n[mono-card]:has(> [mono-media]:not([mono-empty]):last-child) {\r\n  padding-bottom: 0;\r\n}\r\n\r\n/* =========================================\r\n   Loading — EXTENSION: a blurred veil with a spinner\r\n   ========================================= */\r\n\r\n:where([mono-card]) > [mono-loading] {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: var(--mono-card-loading-bg, color-mix(in oklab, var(--card) 58%, transparent));\r\n  backdrop-filter: blur(var(--mono-card-loading-blur, 2px));\r\n}\r\n\r\n:where([mono-card]) [mono-spinner] {\r\n  display: block;\r\n  width: var(--mono-card-spinner-size, calc(var(--mono-spacing) * 5.5));\r\n  height: var(--mono-card-spinner-size, calc(var(--mono-spacing) * 5.5));\r\n  border: var(--mono-card-spinner-width, 2px) solid color-mix(in oklab, var(--_mono-card-accent) 25%, transparent);\r\n  border-top-color: var(--_mono-card-accent);\r\n  border-radius: var(--mono-radius-full);\r\n  animation: mono-card-spin var(--mono-card-spinner-speed, 0.65s) linear infinite;\r\n}\r\n\r\n@keyframes mono-card-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-card] {\r\n    transition: none;\r\n  }\r\n\r\n  :where([mono-card]) [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\card\card.css?raw.js
+var card_css_raw_default = "/* =========================================================================\r\n   mono-card — a port of Basecoat's `.card` (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-card size=\"sm\" variant=\"outlined\" color=\"primary\" title=\"Title\">\r\n     <div mono-card mono-size=\"sm\" mono-variant=\"outlined\" mono-color=\"primary\">\r\n       <div mono-header>\r\n         <div mono-header-content><h3 mono-title>Title</h3></div>\r\n       </div>\r\n       <div mono-body><p>…</p></div>\r\n       <div mono-footer>…</div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n   `:not([mono-variant])` = elevated, `:not([mono-color])` = neutral). The element\r\n   renders these attributes on its root (both builds) plus the STATES\r\n   `mono-bordered` / `mono-hoverable` / `mono-clickable` / `mono-selected` /\r\n   `mono-disabled` / `mono-loading`, and the negatives `mono-no-header-divider` /\r\n   `mono-no-footer-divider` (both dividers default ON, so the attribute marks the\r\n   exception). The old classes (`.mono-card.md.elevated.primary`) are still\r\n   emitted as inert hooks until 2.0 but no rule here reads them.\r\n\r\n   Selector map (ours ≡ upstream):\r\n     [mono-card]                                   ≡ .card (flex-col gap-6 py-6 rounded-xl bg-card text-card-foreground text-sm shadow-xs ring-1 ring-foreground/10 overflow-hidden)\r\n                                                     — the ring is drawn as an INSET box-shadow, see --_mono-card-edge-*\r\n     [mono-card] > [mono-header]                   ≡ .card > header (grid auto-rows-min gap-1 px-6)\r\n     [mono-title]                                  ≡ .card > header > :is(h2, h3, [data-title], .card-title) (text-base font-medium leading-normal)\r\n     [mono-subtitle]                               ≡ .card > header > :is(p, [data-description], .card-description) (text-sm text-muted-foreground)\r\n     [mono-body]                                   ≡ .card > section (px-6)\r\n     [mono-footer] / [mono-actions]                ≡ .card > footer (flex items-center px-6)\r\n     [mono-size=\"sm\"]                              ≡ .card[data-size='sm'] (gap-4 py-4, px-4 on every region)\r\n     [mono-size=\"xs|lg|xl|xxl\"]                    ≡ EXTENSION (the same ladder continued)\r\n     [mono-variant=\"outlined\"]                     ≡ .card verbatim (the ring + shadow-xs)\r\n     [mono-variant=\"elevated|flat|tonal|glass\"]    ≡ EXTENSION (shadow-md / none / an accent tint / a blurred pane)\r\n     [mono-color=\"…\"]                              ≡ EXTENSION (the ring and the title in the role's colour)\r\n     [mono-media]                                  ≡ .card [&>img:first-child]:rounded-t-xl — a full-bleed media band\r\n     [mono-icon], [mono-loading], [mono-selected]  ≡ EXTENSION\r\n\r\n   `gradient` is GONE (variant and colour alike): the port drops every colour\r\n   gradient. `--mono-card-gradient-*` are no-ops until 2.0.\r\n\r\n   Specificity contract (same as the pre-port class sheet): a part's RESTING rule\r\n   is exactly one attribute strong — `:where([mono-card]) [mono-body]` = (0,1,0)\r\n   — so a utility class handed in through `cssClass` wins by source order, while\r\n   prop and state rules stay heavier and win over it.\r\n\r\n   Inner parts: [mono-media], [mono-header] > [mono-icon] / [mono-header-content]\r\n   > [mono-title] / [mono-subtitle], [mono-body], [mono-actions], [mono-footer],\r\n   [mono-loading] > [mono-spinner]. The shadow build renders every region and\r\n   marks the empty ones [mono-empty]; this sheet hides them.\r\n\r\n   FLAVORS set `--mono-card-{radius,shadow,ring-color,ring-width,padding-<size>,\r\n   gap-<size>,title-font-<size>,…}` (the per-style `.card` deltas); every fallback\r\n   here is vega's value (`node scripts/basecoat-styles.mjs --varying \"^\\.card\"`).\r\n   ========================================================================= */\r\n\r\nmono-card {\r\n  display: block;\r\n}\r\n\r\n[mono-card] {\r\n  /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n  --_mono-card-bg: var(--mono-card-bg, var(--card));\r\n  --_mono-card-text: var(--mono-card-text, var(--card-foreground));\r\n  --_mono-card-subtext: var(--mono-card-subtext, var(--muted-foreground));\r\n  --_mono-card-accent: var(--mono-card-accent, var(--_mono-card-accent-preset, var(--neutral)));\r\n  /* ring-1 ring-foreground/10 — Basecoat rings the card, it does not border it;\r\n     `bordered` adds a real border on top (EXTENSION) */\r\n  --_mono-card-ring-color: var(--mono-card-ring-color, color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-card-ring-width: var(--mono-card-ring-width, var(--mono-border-width));\r\n  --_mono-card-shadow: var(--mono-card-shadow, var(--mono-shadow-xs));\r\n  --_mono-card-shadow-elevated: var(--mono-card-shadow-elevated, var(--mono-shadow-md));\r\n  --_mono-card-shadow-hover: var(--mono-card-shadow-hover, var(--mono-shadow-lg));\r\n  /* the ONE knob a prop also drives: `rounded` writes --_mono-card-radius-preset\r\n     on the element, so a FLAVOR must write that same preset tier (an inherited\r\n     preset loses to the element's own) while --mono-card-radius stays the\r\n     consumer's override and wins over both */\r\n  --_mono-card-radius: var(--mono-card-radius, var(--_mono-card-radius-preset, var(--mono-radius-xl)));\r\n  --_mono-card-border-width: var(--mono-card-border-width, var(--mono-border-width));\r\n  --_mono-card-border-color: var(--mono-card-border-color, var(--border));\r\n  --_mono-card-divider-color: var(--mono-card-divider-color, var(--border));\r\n  --_mono-card-focus-ring-color: var(--mono-card-focus-ring-color, var(--ring));\r\n  --_mono-card-focus-ring-width: var(--mono-card-focus-ring-width, var(--mono-ring-width));\r\n  --_mono-card-focus-ring-alpha: var(--mono-card-focus-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 .card — gap-6 py-6 text-sm; .card > header —\r\n     gap-1 px-6; .card > section / > footer — px-6 */\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-md, calc(var(--mono-spacing) * 6)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-md, calc(var(--mono-spacing) * 6)));\r\n  --_mono-card-header-gap: var(--mono-card-header-gap, var(--mono-card-header-gap-md, calc(var(--mono-spacing) * 1)));\r\n  --_mono-card-actions-gap: var(--mono-card-actions-gap, var(--mono-card-actions-gap-md, calc(var(--mono-spacing) * 2)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-md, var(--mono-text-sm)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-md, var(--mono-text-base)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-md, var(--mono-text-sm)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-md, calc(var(--mono-spacing) * 9)));\r\n  --_mono-card-icon-glyph: var(--mono-card-icon-glyph, 55%);\r\n\r\n  /* The edge and the elevation are independent, so a variant can drop one\r\n     without touching the other.\r\n\r\n     DEVIATION from upstream: Basecoat draws the edge with `ring-1`, a box-shadow\r\n     OUTSIDE the border box. That pixel is lost wherever the card is flush against\r\n     anything that clips — a container with `overflow: hidden` (every demo stage),\r\n     a horizontal scroller, or the viewport itself — which hid the left edge of a\r\n     full-width card at most widths. The same hairline drawn INSIDE the box is\r\n     unclippable: an INSET box-shadow, layered under the elevation. (It used to\r\n     be an outline with a negative offset; an outline is rasterised as a stroke\r\n     of its own, and on fractional display scales it landed one device pixel\r\n     inside the background's edge, so the card read as a DOUBLE border. An inset\r\n     shadow is part of the background's own box and cannot separate from it.)\r\n     It paints under the descendants, so a full-bleed child must stop one\r\n     edge-width short of the box, or cover it knowingly. */\r\n  --_mono-card-edge-width: var(--_mono-card-ring-width);\r\n  --_mono-card-edge-color: var(--_mono-card-ring-color);\r\n  --_mono-card-elevation: var(--_mono-card-shadow);\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-card-gap);\r\n  position: relative;\r\n  min-width: 0;\r\n  padding-block: var(--_mono-card-padding);\r\n  overflow: hidden;\r\n  border-radius: var(--_mono-card-radius);\r\n  background-color: var(--_mono-card-bg);\r\n  color: var(--_mono-card-text);\r\n  font-family: inherit;\r\n  font-size: var(--_mono-card-font);\r\n  box-shadow:\r\n    inset 0 0 0 var(--_mono-card-edge-width) var(--_mono-card-edge-color),\r\n    var(--_mono-card-elevation);\r\n  text-decoration: none;\r\n  transition-property: background-color, border-color, box-shadow, transform, opacity;\r\n  transition-timing-function: var(--mono-ease);\r\n  transition-duration: var(--mono-duration);\r\n}\r\n\r\n[mono-card],\r\n:where([mono-card]) *,\r\n:where([mono-card]) *::before,\r\n:where([mono-card]) *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* The shadow build renders EVERY region up front (so DSD can project into them\r\n   server-side) and marks the ones with nothing in them; the light build renders\r\n   only what exists. Hiding them here is what keeps the two builds identical —\r\n   and why the media rules below test `:not([mono-empty])`.\r\n\r\n   NOT wrapped in `:where()`, unlike the other parts: a region rule such as\r\n   `[mono-header] > [mono-icon]` is two attributes strong, so a zero-weight hide\r\n   would tie and lose on source order — the icon box kept its 36px in the shadow\r\n   build while the light one rendered nothing at all. */\r\n[mono-card] :is(\r\n  [mono-media],\r\n  [mono-header],\r\n  [mono-icon],\r\n  [mono-title],\r\n  [mono-subtitle],\r\n  [mono-body],\r\n  [mono-actions],\r\n  [mono-footer]\r\n)[mono-empty] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — `sm` is upstream's data-size='sm'; the rest continue the ladder\r\n   ========================================= */\r\n\r\n[mono-card][mono-size=\"xs\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-xs, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-xs, calc(var(--mono-spacing) * 2.5)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-xs, var(--mono-text-xs)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-xs, 0.8125rem));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-xs, var(--mono-text-xs)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-xs, calc(var(--mono-spacing) * 6)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card[data-size='sm'] — gap-4 py-4 (px-4 on every region) */\r\n[mono-card][mono-size=\"sm\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-sm, calc(var(--mono-spacing) * 4)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-sm, calc(var(--mono-spacing) * 4)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-sm, var(--mono-text-sm)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-sm, var(--mono-text-sm)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-sm, var(--mono-text-sm)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-sm, calc(var(--mono-spacing) * 7.5)));\r\n}\r\n\r\n[mono-card][mono-size=\"lg\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-lg, calc(var(--mono-spacing) * 7)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-lg, calc(var(--mono-spacing) * 7)));\r\n  /* lg keeps md's body and subtitle type by DEFAULT, but still reads its own\r\n     knobs — every step of the ladder has to be settable, or a flavor's value is\r\n     silently inert (the theme lint catches that). */\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-lg, var(--mono-text-sm)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-lg, var(--mono-text-sm)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-lg, var(--mono-text-lg)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-lg, calc(var(--mono-spacing) * 10)));\r\n}\r\n\r\n[mono-card][mono-size=\"xl\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-xl, calc(var(--mono-spacing) * 8)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-xl, calc(var(--mono-spacing) * 8)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-xl, var(--mono-text-base)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-xl, var(--mono-text-xl)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-xl, var(--mono-text-base)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-xl, calc(var(--mono-spacing) * 11)));\r\n}\r\n\r\n[mono-card][mono-size=\"xxl\"] {\r\n  --_mono-card-padding: var(--mono-card-padding, var(--mono-card-padding-xxl, calc(var(--mono-spacing) * 9)));\r\n  --_mono-card-gap: var(--mono-card-gap, var(--mono-card-gap-xxl, calc(var(--mono-spacing) * 9)));\r\n  --_mono-card-font: var(--mono-card-font, var(--mono-card-font-xxl, var(--mono-text-base)));\r\n  --_mono-card-title-font: var(--mono-card-title-font, var(--mono-card-title-font-xxl, calc(var(--mono-text-xl) * 1.125)));\r\n  --_mono-card-subtitle-font: var(--mono-card-subtitle-font, var(--mono-card-subtitle-font-xxl, var(--mono-text-lg)));\r\n  --_mono-card-icon-size: var(--mono-card-icon-size, var(--mono-card-icon-size-xxl, calc(var(--mono-spacing) * 12)));\r\n}\r\n\r\n/* =========================================\r\n   Corners — the library-wide radius scale\r\n   ========================================= */\r\n\r\n[mono-card][mono-rounded=\"none\"] {\r\n  --_mono-card-radius-preset: 0;\r\n}\r\n[mono-card][mono-rounded=\"xs\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-sm);\r\n}\r\n[mono-card][mono-rounded=\"sm\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-sm);\r\n}\r\n[mono-card][mono-rounded=\"md\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-md);\r\n}\r\n[mono-card][mono-rounded=\"lg\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-lg);\r\n}\r\n[mono-card][mono-rounded=\"xl\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-xl);\r\n}\r\n[mono-card][mono-rounded=\"xxl\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-2xl);\r\n}\r\n[mono-card][mono-rounded=\"full\"] {\r\n  --_mono-card-radius-preset: var(--mono-radius-full);\r\n}\r\n\r\n/* =========================================\r\n   Colours — EXTENSION: the ring and the title take the role's colour\r\n   ========================================= */\r\n\r\n[mono-card][mono-color=\"primary\"] {\r\n  --_mono-card-accent-preset: var(--primary);\r\n}\r\n[mono-card][mono-color=\"secondary\"] {\r\n  --_mono-card-accent-preset: var(--secondary-foreground);\r\n}\r\n[mono-card][mono-color=\"success\"] {\r\n  --_mono-card-accent-preset: var(--success);\r\n}\r\n[mono-card][mono-color=\"danger\"] {\r\n  --_mono-card-accent-preset: var(--destructive);\r\n}\r\n[mono-card][mono-color=\"warning\"] {\r\n  --_mono-card-accent-preset: var(--warning);\r\n}\r\n[mono-card][mono-color=\"info\"] {\r\n  --_mono-card-accent-preset: var(--info);\r\n}\r\n[mono-card][mono-color=\"teal\"] {\r\n  --_mono-card-accent-preset: var(--teal);\r\n}\r\n[mono-card][mono-color=\"purple\"] {\r\n  --_mono-card-accent-preset: var(--purple);\r\n}\r\n[mono-card][mono-color=\"dark\"] {\r\n  --_mono-card-accent-preset: var(--dark);\r\n}\r\n[mono-card][mono-color=\"neutral\"] {\r\n  --_mono-card-accent-preset: var(--neutral);\r\n}\r\n[mono-card][mono-color=\"light\"] {\r\n  --_mono-card-accent-preset: var(--muted-foreground);\r\n}\r\n\r\n/* =========================================\r\n   Variants\r\n   ========================================= */\r\n\r\n/* `outlined` IS upstream's `.card`: the ring and shadow-xs already on the root */\r\n[mono-card][mono-variant=\"outlined\"] {\r\n  --_mono-card-ring-color: var(--mono-card-ring-color, color-mix(in oklab, var(--_mono-card-accent) 34%, transparent));\r\n}\r\n\r\n/* EXTENSION — a lifted card; the ring stays, the elevation grows */\r\n[mono-card]:is(:not([mono-variant]), [mono-variant=\"elevated\"]) {\r\n  --_mono-card-elevation: var(--_mono-card-shadow-elevated);\r\n}\r\n\r\n/* EXTENSION — no elevation at all */\r\n[mono-card][mono-variant=\"flat\"] {\r\n  --_mono-card-elevation: 0 0 #0000;\r\n}\r\n\r\n/* EXTENSION — an accent wash (flat tint, never a gradient) */\r\n[mono-card][mono-variant=\"tonal\"] {\r\n  --_mono-card-elevation: 0 0 #0000;\r\n  --_mono-card-ring-color: var(--mono-card-ring-color, color-mix(in oklab, var(--_mono-card-accent) 22%, transparent));\r\n  background-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-tint), var(--_mono-card-bg));\r\n}\r\n\r\n/* EXTENSION — a blurred pane over whatever is behind it */\r\n[mono-card][mono-variant=\"glass\"] {\r\n  --_mono-card-elevation: var(--mono-shadow-lg);\r\n  --_mono-card-ring-color: var(--mono-card-glass-border, color-mix(in oklab, var(--foreground) 12%, transparent));\r\n  background-color: var(--mono-card-glass-bg, color-mix(in oklab, var(--card) 45%, transparent));\r\n  backdrop-filter: blur(var(--mono-card-glass-blur, 12px));\r\n}\r\n\r\n/* =========================================\r\n   States\r\n   ========================================= */\r\n\r\n/* EXTENSION — a real border on top of the ring */\r\n[mono-card][mono-bordered] {\r\n  border: var(--_mono-card-border-width) solid var(--_mono-card-border-color);\r\n}\r\n\r\n[mono-card][mono-clickable] {\r\n  cursor: pointer;\r\n}\r\n\r\n@media (hover: hover) {\r\n  [mono-card]:is([mono-hoverable], [mono-clickable]):not([mono-disabled]):hover {\r\n    --_mono-card-elevation: var(--_mono-card-shadow-hover);\r\n  }\r\n}\r\n\r\n/* EXTENSION — the chosen card, in the accent (Basecoat's own `has-[:checked]`\r\n   treatment for a selectable label: primary/5 with a primary/30 edge) */\r\n[mono-card][mono-selected] {\r\n  --_mono-card-edge-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-checked-border), transparent);\r\n  --_mono-card-edge-width: calc(var(--mono-border-width) * 2);\r\n  background-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-checked-bg), var(--_mono-card-bg));\r\n}\r\n\r\n[mono-card][mono-disabled] {\r\n  cursor: not-allowed;\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n/* the focus ring is that same inside edge, recoloured and thickened — an\r\n   outside ring would be clipped exactly where the resting one was */\r\n[mono-card]:focus-visible {\r\n  --_mono-card-edge-width: var(--_mono-card-focus-ring-width);\r\n  --_mono-card-edge-color: color-mix(in oklab, var(--_mono-card-focus-ring-color) var(--_mono-card-focus-ring-alpha), transparent);\r\n}\r\n\r\n/* =========================================\r\n   Regions — every one of them is inset by the card's padding, which is how\r\n   upstream does it (`px-6` per region, `py-6` on the card) so a media band can\r\n   run full-bleed between them\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/card.css .card >> > header\r\n   — grid auto-rows-min items-start (grid-cols-[1fr_auto] when an action is present) */\r\n/* basecoat@1.0.2 styles/vega.css .card > header — gap-1 px-6 */\r\n:where([mono-card]) > [mono-header] {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: var(--_mono-card-actions-gap);\r\n  padding-inline: var(--_mono-card-padding);\r\n}\r\n\r\n/* No subtitle: the title is a single line beside a taller icon chip, so\r\n   top-aligning pinned it to the chip's top edge. Centre the row instead.\r\n   With a subtitle the row stays top-aligned (icon level with the title). */\r\n:where([mono-card]) > [mono-header][mono-no-subtitle] {\r\n  align-items: center;\r\n}\r\n\r\n:where([mono-card]) > [mono-header] > [mono-header-content] {\r\n  display: grid;\r\n  align-content: start;\r\n  gap: var(--_mono-card-header-gap);\r\n  min-width: 0;\r\n  flex: 1 1 auto;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card > header > :is(h2, h3, [data-title], .card-title)\r\n   — text-base leading-normal font-medium (upstream also sets `leading-none` in\r\n   components/card.css; vega's `leading-normal` wins) */\r\n:where([mono-card]) [mono-title] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-title-font);\r\n  line-height: var(--mono-card-title-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-card-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-card-title-tracking, normal);\r\n  text-transform: var(--mono-card-title-transform, none);\r\n  color: var(--mono-card-title-color, var(--_mono-card-text));\r\n}\r\n\r\n/* the colour prop tints the title, nothing else — `color` is an accent, not a fill */\r\n[mono-card][mono-color]:not([mono-color=\"neutral\"]) [mono-title] {\r\n  color: var(--mono-card-title-color, var(--_mono-card-accent));\r\n}\r\n\r\n/* A heading handed in as <h2>/<h3>/<p> brings its own margins and type, and a\r\n   host page styles those tags too (`.vp-doc h3` is a class selector, so it beats\r\n   any sane rule here). The card OWNS the header type — Basecoat's own\r\n   `.card > header > :is(h2, h3, …)` does the same — so both twins are important:\r\n   the light one to beat the page, the slotted one because an inner-tree rule\r\n   cannot otherwise reach outer-tree content at all. */\r\n:where([mono-card]) :is([mono-title], [mono-subtitle]) > * {\r\n  margin: 0 !important;\r\n  font: inherit !important;\r\n  letter-spacing: inherit !important;\r\n  color: inherit !important;\r\n}\r\n\r\n:where([mono-card]) :is([mono-title], [mono-subtitle]) slot::slotted(*) {\r\n  margin: 0 !important;\r\n  font: inherit !important;\r\n  letter-spacing: inherit !important;\r\n  color: inherit !important;\r\n}\r\n\r\n[mono-card] :is(h1, h2, h3, h4, h5, h6, p, small)[mono-title] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-title-font);\r\n  line-height: var(--mono-card-title-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-card-title-font-weight, var(--mono-font-weight-medium));\r\n  letter-spacing: var(--mono-card-title-tracking, normal);\r\n}\r\n\r\n[mono-card] :is(h1, h2, h3, h4, h5, h6, p, small)[mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-subtitle-font);\r\n  line-height: var(--mono-card-subtitle-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card > header > :is(p, [data-description], .card-description)\r\n   — text-muted-foreground text-sm */\r\n:where([mono-card]) [mono-subtitle] {\r\n  margin: 0;\r\n  font-size: var(--_mono-card-subtitle-font);\r\n  line-height: var(--mono-card-subtitle-line-height, var(--mono-leading-normal));\r\n  font-weight: var(--mono-font-weight-normal);\r\n  color: var(--_mono-card-subtext);\r\n}\r\n\r\n/* EXTENSION — the header's leading glyph box */\r\n:where([mono-card]) > [mono-header] > [mono-icon] {\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-card-icon-size);\r\n  height: var(--_mono-card-icon-size);\r\n  border-radius: var(--mono-card-icon-radius, var(--mono-radius-md));\r\n  line-height: 1;\r\n  background-color: color-mix(in oklab, var(--_mono-card-accent) var(--mono-mode-tint), transparent);\r\n  color: var(--_mono-card-accent);\r\n  overflow: hidden;\r\n}\r\n\r\n/* `:not(slot)`: in the shadow build the region's only child IS a <slot>, a real\r\n   element that this rule would size — and then `::slotted()` would size the\r\n   glyph again, to 55% of that 55%. The glyph came out half the size of its light\r\n   twin. */\r\n:where([mono-card]) > [mono-header] > [mono-icon] > *:not(slot) {\r\n  display: block;\r\n  width: var(--_mono-card-icon-glyph);\r\n  height: var(--_mono-card-icon-glyph);\r\n}\r\n\r\n:where([mono-card]) > [mono-header] > [mono-icon] slot::slotted(*) {\r\n  display: block !important;\r\n  width: var(--_mono-card-icon-glyph) !important;\r\n  height: var(--_mono-card-icon-glyph) !important;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card > section — px-6 */\r\n:where([mono-card]) > [mono-body] {\r\n  padding-inline: var(--_mono-card-padding);\r\n  min-width: 0;\r\n}\r\n\r\n[mono-card] > :is(p, ul, ol, dl, blockquote)[mono-body] {\r\n  margin-block: 0;\r\n}\r\n\r\n:where([mono-card]) > [mono-body]:empty {\r\n  display: none;\r\n}\r\n\r\n/* The body's own children keep their block margins out of the card's rhythm —\r\n   the card's `gap` is what spaces the regions, and content that wants paragraph\r\n   spacing brings its own.\r\n\r\n   ALL children, not just the first and last: in the shadow build `::slotted()`\r\n   sees the HOST's child order, so `:first-child` there means \"first child of the\r\n   card element\" — a body paragraph that follows a `slot=\"title\"` heading is not\r\n   first, and kept the page's margins while its light twin did not.\r\n\r\n   `!important` on the slotted twins is not a style choice: a `::slotted()` rule\r\n   is an INNER-tree declaration, and a normal declaration from the outer tree (a\r\n   page's `p { margin: … }`) beats it at any specificity. Marking it important\r\n   inverts that order. The light twins need no such thing — they are ordinary\r\n   descendant rules in the same tree as the page. */\r\n:where([mono-card]) > [mono-body] > * {\r\n  margin-block: 0 !important;\r\n}\r\n\r\n:where([mono-card]) > [mono-body] slot::slotted(*) {\r\n  margin-block: 0 !important;\r\n}\r\n\r\n/* basecoat@1.0.2 components/card.css .card >> > footer — flex items-center */\r\n/* basecoat@1.0.2 styles/vega.css .card > footer — rounded-b-xl px-6 [.border-t]:pt-6 */\r\n:where([mono-card]) > :is([mono-actions], [mono-footer]) {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: var(--_mono-card-actions-gap);\r\n  padding-inline: var(--_mono-card-padding);\r\n}\r\n\r\n:where([mono-card]) > [mono-actions] {\r\n  justify-content: flex-end;\r\n}\r\n\r\n/* the dividers: upstream's `[.border-b]:pb-6` idiom — a divided region pays the\r\n   padding back on the divided edge. Both are ON by default, so the ATTRIBUTE\r\n   marks the exception. */\r\n[mono-card]:not([mono-no-header-divider]) > [mono-header]:not([mono-empty]) {\r\n  padding-bottom: var(--_mono-card-padding);\r\n  border-bottom: var(--mono-border-width) solid var(--_mono-card-divider-color);\r\n}\r\n\r\n[mono-card]:not([mono-no-footer-divider]) > :is([mono-actions], [mono-footer]):not([mono-empty]) {\r\n  padding-top: var(--_mono-card-padding);\r\n  border-top: var(--mono-border-width) solid var(--_mono-card-divider-color);\r\n}\r\n\r\n/* =========================================\r\n   Media — a full-bleed band; upstream gives the first/last child image the\r\n   card's own corners and drops the padding on that edge\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .card\r\n   — has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-xl [&>img:last-child]:rounded-b-xl */\r\n:where([mono-card]) > [mono-media] {\r\n  display: block;\r\n  overflow: hidden;\r\n  line-height: 0;\r\n}\r\n\r\n:where([mono-card]) > [mono-media] :is(img, picture, video, canvas, svg) {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  height: auto;\r\n  object-fit: cover;\r\n}\r\n\r\n:where([mono-card]) > [mono-media] slot::slotted(:is(img, picture, video, canvas, svg)) {\r\n  display: block !important;\r\n  width: 100% !important;\r\n  max-width: 100% !important;\r\n  height: auto !important;\r\n  object-fit: cover !important;\r\n}\r\n\r\n[mono-card]:has(> [mono-media]:not([mono-empty]):first-child) {\r\n  padding-top: 0;\r\n}\r\n\r\n[mono-card]:has(> [mono-media]:not([mono-empty]):last-child) {\r\n  padding-bottom: 0;\r\n}\r\n\r\n/* =========================================\r\n   Loading — EXTENSION: a blurred veil with a spinner\r\n   ========================================= */\r\n\r\n:where([mono-card]) > [mono-loading] {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: var(--mono-card-loading-bg, color-mix(in oklab, var(--card) 58%, transparent));\r\n  backdrop-filter: blur(var(--mono-card-loading-blur, 2px));\r\n}\r\n\r\n:where([mono-card]) [mono-spinner] {\r\n  display: block;\r\n  width: var(--mono-card-spinner-size, calc(var(--mono-spacing) * 5.5));\r\n  height: var(--mono-card-spinner-size, calc(var(--mono-spacing) * 5.5));\r\n  border: var(--mono-card-spinner-width, 2px) solid color-mix(in oklab, var(--_mono-card-accent) 25%, transparent);\r\n  border-top-color: var(--_mono-card-accent);\r\n  border-radius: var(--mono-radius-full);\r\n  animation: mono-card-spin var(--mono-card-spinner-speed, 0.65s) linear infinite;\r\n}\r\n\r\n@keyframes mono-card-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-card] {\r\n    transition: none;\r\n  }\r\n\r\n  :where([mono-card]) [mono-spinner] {\r\n    animation-duration: 2.4s;\r\n  }\r\n}\r\n";
+
 //#endregion
 //#region src/components/card/mono-card.ts
 /** Named regions the card lays out. The unnamed body is the fallback bucket. */
-var CARD_NAMED_SLOTS = [
+const CARD_NAMED_SLOTS = [
 	"media",
 	"icon",
 	"title",
@@ -290,14 +293,14 @@ var CARD_NAMED_SLOTS = [
 	"actions",
 	"footer"
 ];
-var MonoCard = class MonoCard extends MonoCardCore(LitElement) {
+let MonoCard = class MonoCard extends MonoCardCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
 		this._buckets = /* @__PURE__ */ new Map();
 	}
 	static {
-		this.styles = [unsafeCSS(card_default)];
+		this.styles = [unsafeCSS(card_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -485,6 +488,7 @@ var MonoCard = class MonoCard extends MonoCardCore(LitElement) {
 	}
 };
 MonoCard = __decorate([customElement("mono-card")], MonoCard);
+
 //#endregion
 //#region src/components/card/card-utils.ts
 /**
@@ -520,5 +524,6 @@ function generateCardAttributes(clickable, hoverable, label) {
 		"aria-label": label || void 0
 	};
 }
+
 //#endregion
-export { MonoCard, generateCardAttributes, validateCardProps };
+export { MonoCard, generateCardAttributes, validateCardProps };

package/dist/ui/chart.js

@@ -1,15 +1,16 @@
-import { a as errorTitle, i as errorText, n as describeError } from "../normalize-error-Gcgmgh5i.js";
-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-CEv29_NS.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 { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { n as toCssSize } from "../css-size-DhHSVZJK.js";
-import { a as spinnerIcon, i as refreshIcon } from "../field-icons-DELrSdqJ.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
@@ -18,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",
@@ -34,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)",
@@ -66,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;
@@ -84,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);
@@ -798,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. 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.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;
@@ -815,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;
@@ -833,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;
@@ -849,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;
@@ -865,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;
@@ -881,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 };