@mono-lit/helper 0.0.2 → 0.0.4

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

@@ -1,13 +1,14 @@
-import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, u as numberStringConverter } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as applyProps } from "../../element-props-CLB6yvbm.js";
-import { t as PopupPortalController } from "../../popup-portal-BziRX1yG.js";
-import { a as rateLimitHasChanged } from "../../rate-limit-BBa2PO79.js";
-import { n as button_default } from "../../mono-button.shadow-B_rKOY9N.js";
+import { a as __decorate, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, n as adoptIconStyles, r as toShadowCss, s as booleanStringConverter, u as numberStringConverter } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as applyProps } from "../../element-props-xvw0EB7H.js";
+import { t as PopupPortalController } from "../../popup-portal-HWhkd7oy.js";
+import { a as rateLimitHasChanged } from "../../rate-limit-e9Jlpl5l.js";
+import { n as button_css_raw_default } from "../../mono-button.shadow-D9NdMsmH.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+
 //#region src/components/button/button-dropdown-core.ts
 /**
 * Would these two entry lists RENDER identically?
@@ -66,7 +67,7 @@ function sameButtonItems(a, b) {
 *
 * Kept in step with button-dropdown.css by tests/button-dropdown-attributes.test.ts.
 */
-var BUTTON_DROPDOWN_STYLE_VARS = [
+const BUTTON_DROPDOWN_STYLE_VARS = [
 	"--mono-button-dropdown-bg",
 	"--mono-button-dropdown-border",
 	"--mono-button-dropdown-dark",
@@ -127,7 +128,7 @@ var BUTTON_DROPDOWN_STYLE_VARS = [
 	"--mono-button-dropdown-text",
 	"--mono-button-dropdown-warning"
 ];
-var MonoButtonDropdownCore = (superClass) => {
+const MonoButtonDropdownCore = (superClass) => {
 	class MonoButtonDropdownCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -635,14 +636,16 @@ var MonoButtonDropdownCore = (superClass) => {
 	__decorate([state()], MonoButtonDropdownCoreClass.prototype, "_resolvedSide", void 0);
 	return MonoButtonDropdownCoreClass;
 };
+
 //#endregion
-//#region src/components/button/button-dropdown.css?raw
-var button_dropdown_default = "/* =========================================================================\r\n   mono-button-dropdown — a port of Basecoat's `.dropdown-menu`\r\n   (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-button-dropdown size=\"sm\" placement=\"bottom-end\" model-value>\r\n     <div mono-button-dropdown mono-size=\"sm\" mono-side=\"bottom\" mono-align=\"end\" mono-open>\r\n       <div mono-row hidden></div>\r\n       <div mono-button mono-trigger mono-icon-only>…the ⋮ button…</div>\r\n       <div mono-panel role=\"menu\" aria-hidden=\"false\">\r\n         <ul mono-list>\r\n           <li mono-item role=\"none\" mono-item-color=\"success\">\r\n             <div mono-button>…a real button…</div>\r\n           </li>\r\n         </ul>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md, no\r\n   `mono-side` = bottom, no `mono-align` = start, no `mono-item-color` = the\r\n   panel's own ink). The element writes them on the inner root in BOTH builds;\r\n   the old classes (`.mono-button-dropdown-panel`, `.mono-bd-c-danger`) 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-button-dropdown]          ≡ .dropdown-menu (relative inline-flex)\r\n     [mono-row]                      ≡ EXTENSION (the INLINE row — upstream has\r\n                                       no \"stay flat while short\" mode)\r\n     [mono-trigger]                  ≡ .dropdown-menu > button (a real mono-button,\r\n                                       styled by button.css — nothing to add here)\r\n     [mono-panel]                    ≡ .dropdown-menu > [data-popover]\r\n                                       (bg-popover text-popover-foreground\r\n                                        ring-1 ring-foreground/10 gap-0 rounded-md\r\n                                        p-1 shadow-md overflow-x-hidden\r\n                                        overflow-y-auto duration-100)\r\n     [mono-list]                     ≡ [role='menu'] (outline-hidden)\r\n     [mono-item]                     ≡ [role='menuitem'] (gap-2 rounded-sm px-2\r\n                                       py-1.5 text-sm, hover bg-accent\r\n                                       text-accent-foreground)\r\n     [mono-item][mono-item-color=…]  ≡ .dropdown-menu [data-variant='destructive']\r\n                                       (text-destructive, hover bg-destructive/10,\r\n                                        dark /20) — generalised to all ten roles\r\n     [mono-side] / [mono-align]      ≡ [data-popover][data-side] / [data-align]\r\n     [mono-size=\"…\"]                 ≡ EXTENSION (upstream ships one menu size)\r\n\r\n   THE ROW IS A REAL BUTTON. Each entry renders as a `<mono-button>`, so the\r\n   menu cannot paint it with a selector — in the shadow build the control sits\r\n   behind a boundary. It is flattened with the button's own PUBLIC knobs, set on\r\n   the `<li mono-item>`: custom properties inherit, so one declaration reaches\r\n   both builds. `--mono-button-width` / `-justify` exist for exactly this.\r\n\r\n   COLOUR: an entry's `color` is NOT a button colour in here — a row of solid,\r\n   outlined and tonal buttons reads as noise rather than a list. It is the\r\n   Basecoat `[data-variant='destructive']` treatment generalised: the row's INK\r\n   (label and glyph alike, the glyph being a `currentColor` mask) becomes the\r\n   role, and hover lays that role down at `--mono-mode-tint` (10% light / 20%\r\n   dark). Never the role as a solid fill — a full-strength background under a\r\n   full-strength glyph is the one combination that makes the glyph vanish.\r\n\r\n   THE PANEL IS PORTALED in the light build: `composables/popup-portal` moves it\r\n   into a `<body>` portal and mirrors the root's class AND `mono-*` attributes\r\n   onto that portal, so `[mono-button-dropdown] > [mono-panel]` keeps matching.\r\n   Every panel rule is therefore written as a CHILD of the root, and every public\r\n   knob it reads is listed in `BUTTON_DROPDOWN_STYLE_VARS` (button-dropdown-core)\r\n   so an ancestor's override travels with it.\r\n\r\n   Specificity contract: a part's RESTING rule is exactly one attribute strong —\r\n   `:where([mono-button-dropdown]) > [mono-panel]` = (0,1,0) — so a utility class\r\n   handed in through `cssClass` wins by source order, while the prop and state\r\n   rules stay heavier.\r\n\r\n   FLAVORS set `--mono-button-dropdown-{radius,padding,min-width,offset,shadow,\r\n   ring-*,item-radius,item-font-weight}` (+ the per-size forms); every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dropdown-menu\"`).\r\n   ========================================================================= */\r\n\r\nmono-button-dropdown {\r\n  display: inline-flex;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu — relative inline-flex */\r\n[mono-button-dropdown] {\r\n  /* ── the ten entry roles, each a public knob over a Basecoat token ───────\r\n     `secondary`, `light` and `dark` are SURFACES upstream, and a surface makes\r\n     no ink: `--dark` is a near-black in light mode and STILL a dark grey in dark\r\n     mode (the role is a fill, paired with `--dark-foreground`), so inking a row\r\n     with it turns that row invisible on a dark popover. The three resolve to a\r\n     foreground instead, which flips with the mode. */\r\n  --_mono-bd-primary: var(--mono-button-dropdown-primary, var(--primary));\r\n  --_mono-bd-secondary: var(--mono-button-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-bd-success: var(--mono-button-dropdown-success, var(--success));\r\n  --_mono-bd-danger: var(--mono-button-dropdown-danger, var(--destructive));\r\n  --_mono-bd-warning: var(--mono-button-dropdown-warning, var(--warning));\r\n  --_mono-bd-info: var(--mono-button-dropdown-info, var(--info));\r\n  --_mono-bd-teal: var(--mono-button-dropdown-teal, var(--teal));\r\n  --_mono-bd-purple: var(--mono-button-dropdown-purple, var(--purple));\r\n  --_mono-bd-dark: var(--mono-button-dropdown-dark, var(--foreground));\r\n  --_mono-bd-light: var(--mono-button-dropdown-light, var(--foreground));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-bd-bg: var(--mono-button-dropdown-bg, var(--mono-button-dropdown-surface, var(--popover)));\r\n  --_mono-bd-text: var(--mono-button-dropdown-text, var(--popover-foreground));\r\n  --_mono-bd-ring-width: var(--mono-button-dropdown-ring-width, var(--mono-border-width));\r\n  --_mono-bd-ring-color: var(--mono-button-dropdown-ring-color, var(--mono-button-dropdown-border,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-bd-shadow: var(--mono-button-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — rounded-md p-1 gap-0 */\r\n  --_mono-bd-radius: var(--mono-button-dropdown-radius, var(--_mono-bd-radius-preset, var(--mono-button-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-bd-padding: var(--mono-button-dropdown-padding, var(--_mono-bd-padding-preset, var(--mono-button-dropdown-padding-md, var(--mono-spacing))));\r\n  --_mono-bd-list-gap: var(--mono-button-dropdown-list-gap, var(--_mono-bd-list-gap-preset, 0px));\r\n  /* DEVIATION: upstream is `min-width: anchor-size(width)` — the panel is at\r\n     least as wide as its trigger. Anchor positioning is not the mechanism here\r\n     (the panel is portaled and placed from measurements), so the floor is a\r\n     plain length; maia/luma/sera's `min-w-48` is the per-size knob. */\r\n  --_mono-bd-min-width: var(--mono-button-dropdown-min-width, var(--_mono-bd-min-width-preset, var(--mono-button-dropdown-min-width-md, 9rem)));\r\n  /* The static offset — the JS path uses the `offset` PROP; keep them in step. */\r\n  --_mono-bd-offset: var(--mono-button-dropdown-offset, var(--_mono-bd-offset-preset, var(--mono-button-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* ── the inline row (NOT the menu): the gap between loose buttons ───────── */\r\n  --_mono-bd-gap: var(--mono-button-dropdown-gap, calc(var(--mono-spacing) * 1.5));\r\n\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-button-dropdown] *,\r\n[mono-button-dropdown] *::before,\r\n[mono-button-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE menu; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-button-dropdown][mono-size=\"xs\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xs, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xs, 7rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"sm\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-sm, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-sm, 8rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"lg\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-lg, 11rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-lg, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xl, 13rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xl, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xxl, 15rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xxl, var(--mono-radius-lg));\r\n}\r\n\r\n/* =========================================\r\n   Inline row — EXTENSION: the entries before they collapse\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) > [mono-row] {\r\n  display: inline-flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-bd-gap);\r\n}\r\n\r\n/* `hidden` is a UA rule, and an author `display` beats it whatever the\r\n   specificity — so the hidden state has to be stated here. */\r\n[mono-button-dropdown] > [mono-row][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dropdown-menu > [data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 w-max\r\n   overflow-x-hidden overflow-y-auto outline-hidden\r\n   basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 gap-0 rounded-md p-1 shadow-md ring-1\r\n   — DEVIATIONS: the z-index is the shared popup stack's `--mono-popup-z` rather\r\n   than a flat z-50, and the height cap is the room the portal measured. */\r\n:where([mono-button-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  width: max-content;\r\n  min-width: var(--_mono-bd-min-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  outline: none;\r\n  padding: var(--_mono-bd-padding);\r\n  border-radius: var(--_mono-bd-radius);\r\n  background: var(--_mono-bd-bg);\r\n  color: var(--_mono-bd-text);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-bd-ring-width) var(--_mono-bd-ring-color),\r\n    var(--_mono-bd-shadow);\r\n}\r\n\r\n/* Same UA-`hidden` story as the row, and it has to out-specify the rule above\r\n   even once the panel has been portaled (where it is still a `>` child). */\r\n[mono-button-dropdown] > [mono-panel][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* Once the element takes over it measures and writes inline top/left, so the\r\n   static placement rules below must stand aside. */\r\n[mono-button-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   What hand-written markup positions with (and SSR, before hydration). The\r\n   element overrides all of it with inline top/left once it has measured.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom'] — mt-1 top-full */\r\n[mono-button-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-button-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-button-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-button-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-button-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-bd-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2.\r\n   DEVIATION from `mono-dropdown`: the default here is `end`, matching the\r\n   `placement=\"bottom-end\"` default — a row of actions hangs off the right. */\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"start\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"end\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* =========================================\r\n   List — `[role='menu']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu [role='menu'] — outline-hidden */\r\n:where([mono-button-dropdown]) [mono-list] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  outline: none;\r\n}\r\n\r\n/* =========================================\r\n   Item — `[role='menuitem']`\r\n   -----------------------------------------------------------------------------\r\n   The `<li>` paints nothing itself: it hands the entry button a flattened\r\n   palette through the button's PUBLIC knobs, which is the only route that\r\n   reaches the control in BOTH builds (the shadow one keeps it behind a\r\n   boundary). The entry's own `variant` and `color` presets are overridden by\r\n   construction — inside the menu every row is one flat strip.\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) [mono-item] {\r\n  /* ── the row's ink and its hover wash ──────────────────────────────────────\r\n     FOUR tiers, not three, because the middle one belongs to a PER-ENTRY prop:\r\n\r\n       --mono-button-dropdown-item-<x>       consumer, wins over everything\r\n       --_mono-bd-item-<x>-preset            the entry's `color` (mono-item-color)\r\n       --mono-button-dropdown-item-base-<x>  a FLAVOR's neutral row\r\n       the Basecoat value\r\n\r\n     A flavor must write the `-base-` tier: writing the consumer knob would\r\n     out-rank every role and freeze all ten colours at one ink. */\r\n  --_mono-bd-item-color: var(--mono-button-dropdown-item-color, var(--_mono-bd-item-color-preset, var(--mono-button-dropdown-item-base-color, var(--_mono-bd-text))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — focus-visible:bg-accent */\r\n  --_mono-bd-item-hover-bg: var(--mono-button-dropdown-item-hover-bg, var(--_mono-bd-item-hover-bg-preset, var(--mono-button-dropdown-item-base-hover-bg, var(--mono-button-dropdown-item-hover, var(--accent)))));\r\n  --_mono-bd-item-hover-color: var(--mono-button-dropdown-item-hover-color, var(--_mono-bd-item-hover-color-preset, var(--mono-button-dropdown-item-base-hover-color, var(--accent-foreground))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — rounded-sm */\r\n  --_mono-bd-item-radius: var(--mono-button-dropdown-item-radius, var(--_mono-bd-item-radius-preset, var(--mono-radius-sm)));\r\n\r\n  /* ── flatten the entry: the button's own public knobs, set on its ancestor ─ */\r\n  --mono-button-bg: transparent;\r\n  --mono-button-color: var(--_mono-bd-item-color);\r\n  --mono-button-border-color: transparent;\r\n  --mono-button-shadow: 0 0 #0000;\r\n  --mono-button-hover-bg: var(--_mono-bd-item-hover-bg);\r\n  --mono-button-hover-color: var(--_mono-bd-item-hover-color);\r\n  --mono-button-hover-border-color: transparent;\r\n  --mono-button-hover-shadow: 0 0 #0000;\r\n  --mono-button-radius: var(--_mono-bd-item-radius);\r\n  /* A menu row is a strip, not a chip: full width, label against the start edge. */\r\n  --mono-button-width: 100%;\r\n  --mono-button-justify: flex-start;\r\n  /* No press twitch in a list — right for a standalone button, wrong for a row. */\r\n  --mono-button-press-translate: 0 0;\r\n  --mono-button-font-weight: var(--mono-button-dropdown-item-font-weight, var(--mono-font-weight-medium));\r\n\r\n  display: block;\r\n  min-width: 0;\r\n}\r\n\r\n/* The entry element itself — `<mono-button>` / `<mono-shadow-button>`, both\r\n   `display: inline-block` hosts — has to fill the row for the whole strip to be\r\n   clickable rather than just the label's width. */\r\n:where([mono-button-dropdown]) [mono-item] > * {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dropdown-menu [data-variant='destructive'] —\r\n   `text-destructive`, and `:is(:focus-visible, .active)` lays the same colour\r\n   down at `bg-destructive/10` (dark `/20`, carried by `--mono-mode-tint`).\r\n   EXTENSION: generalised from destructive to all ten roles. The tint is the\r\n   whole point — a solid role fill under a role-coloured glyph erases it. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"primary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-primary);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-primary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"success\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-success);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-success) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-success);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"danger\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-danger);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-danger) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-danger);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"warning\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-warning);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-warning) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-warning);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"info\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-info);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-info) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-info);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"teal\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-teal);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-teal) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-teal);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"purple\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-purple);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-purple) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-purple);\r\n}\r\n\r\n/* The three surface roles: their ink is a foreground, and a 10% wash of a\r\n   near-background colour is invisible — so they hover on `--accent`, the\r\n   neutral row wash, exactly like an uncoloured entry. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"dark\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-dark);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-dark);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"secondary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-secondary);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-secondary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"light\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-light);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-light);\r\n}\r\n\r\n/**\r\n * Icon glyphs inside a shadow root.\r\n *\r\n * `adoptIconStyles` copies the page's `.i-mdi-…` rules through CSSOM `cssText`,\r\n * and that read-back DROPS the mask declarations — `mask-image: ;` comes back\r\n * empty whenever the value is a `var()`. What survives is `--un-icon`, the data\r\n * URI itself. So the copy leaves `background-color: currentColor` with no mask,\r\n * painting a solid square: the \"black cube\".\r\n *\r\n * Re-declaring the mask here fixes it, because this sheet is authored source\r\n * rather than a CSSOM copy — it consumes the custom property that DID survive.\r\n * Harmless in the light build, where it merely restates what the page already\r\n * says. The glyph's BOX is left to `[mono-button] [mono-icon]` (Basecoat's\r\n * `size-4`): sizing it here as well used to out-specify that and hand every\r\n * menu icon a 1.1em box the button never asked for.\r\n */\r\n[mono-button-dropdown] [class*='i-'].mono-icon {\r\n  -webkit-mask: var(--un-icon) no-repeat;\r\n  mask: var(--un-icon) no-repeat;\r\n  -webkit-mask-size: 100% 100%;\r\n  mask-size: 100% 100%;\r\n  background-color: currentColor;\r\n  display: inline-block;\r\n}\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\button\button-dropdown.css?raw.js
+var button_dropdown_css_raw_default = "/* =========================================================================\r\n   mono-button-dropdown — a port of Basecoat's `.dropdown-menu`\r\n   (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-button-dropdown size=\"sm\" placement=\"bottom-end\" model-value>\r\n     <div mono-button-dropdown mono-size=\"sm\" mono-side=\"bottom\" mono-align=\"end\" mono-open>\r\n       <div mono-row hidden></div>\r\n       <div mono-button mono-trigger mono-icon-only>…the ⋮ button…</div>\r\n       <div mono-panel role=\"menu\" aria-hidden=\"false\">\r\n         <ul mono-list>\r\n           <li mono-item role=\"none\" mono-item-color=\"success\">\r\n             <div mono-button>…a real button…</div>\r\n           </li>\r\n         </ul>\r\n       </div>\r\n     </div>\r\n\r\n   An absent attribute is the prop's default (`:not([mono-size])` = md, no\r\n   `mono-side` = bottom, no `mono-align` = start, no `mono-item-color` = the\r\n   panel's own ink). The element writes them on the inner root in BOTH builds;\r\n   the old classes (`.mono-button-dropdown-panel`, `.mono-bd-c-danger`) 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-button-dropdown]          ≡ .dropdown-menu (relative inline-flex)\r\n     [mono-row]                      ≡ EXTENSION (the INLINE row — upstream has\r\n                                       no \"stay flat while short\" mode)\r\n     [mono-trigger]                  ≡ .dropdown-menu > button (a real mono-button,\r\n                                       styled by button.css — nothing to add here)\r\n     [mono-panel]                    ≡ .dropdown-menu > [data-popover]\r\n                                       (bg-popover text-popover-foreground\r\n                                        ring-1 ring-foreground/10 gap-0 rounded-md\r\n                                        p-1 shadow-md overflow-x-hidden\r\n                                        overflow-y-auto duration-100)\r\n     [mono-list]                     ≡ [role='menu'] (outline-hidden)\r\n     [mono-item]                     ≡ [role='menuitem'] (gap-2 rounded-sm px-2\r\n                                       py-1.5 text-sm, hover bg-accent\r\n                                       text-accent-foreground)\r\n     [mono-item][mono-item-color=…]  ≡ .dropdown-menu [data-variant='destructive']\r\n                                       (text-destructive, hover bg-destructive/10,\r\n                                        dark /20) — generalised to all ten roles\r\n     [mono-side] / [mono-align]      ≡ [data-popover][data-side] / [data-align]\r\n     [mono-size=\"…\"]                 ≡ EXTENSION (upstream ships one menu size)\r\n\r\n   THE ROW IS A REAL BUTTON. Each entry renders as a `<mono-button>`, so the\r\n   menu cannot paint it with a selector — in the shadow build the control sits\r\n   behind a boundary. It is flattened with the button's own PUBLIC knobs, set on\r\n   the `<li mono-item>`: custom properties inherit, so one declaration reaches\r\n   both builds. `--mono-button-width` / `-justify` exist for exactly this.\r\n\r\n   COLOUR: an entry's `color` is NOT a button colour in here — a row of solid,\r\n   outlined and tonal buttons reads as noise rather than a list. It is the\r\n   Basecoat `[data-variant='destructive']` treatment generalised: the row's INK\r\n   (label and glyph alike, the glyph being a `currentColor` mask) becomes the\r\n   role, and hover lays that role down at `--mono-mode-tint` (10% light / 20%\r\n   dark). Never the role as a solid fill — a full-strength background under a\r\n   full-strength glyph is the one combination that makes the glyph vanish.\r\n\r\n   THE PANEL IS PORTALED in the light build: `composables/popup-portal` moves it\r\n   into a `<body>` portal and mirrors the root's class AND `mono-*` attributes\r\n   onto that portal, so `[mono-button-dropdown] > [mono-panel]` keeps matching.\r\n   Every panel rule is therefore written as a CHILD of the root, and every public\r\n   knob it reads is listed in `BUTTON_DROPDOWN_STYLE_VARS` (button-dropdown-core)\r\n   so an ancestor's override travels with it.\r\n\r\n   Specificity contract: a part's RESTING rule is exactly one attribute strong —\r\n   `:where([mono-button-dropdown]) > [mono-panel]` = (0,1,0) — so a utility class\r\n   handed in through `cssClass` wins by source order, while the prop and state\r\n   rules stay heavier.\r\n\r\n   FLAVORS set `--mono-button-dropdown-{radius,padding,min-width,offset,shadow,\r\n   ring-*,item-radius,item-font-weight}` (+ the per-size forms); every fallback\r\n   here is vega's value\r\n   (`node scripts/basecoat-styles.mjs --varying \"dropdown-menu\"`).\r\n   ========================================================================= */\r\n\r\nmono-button-dropdown {\r\n  display: inline-flex;\r\n}\r\n\r\n/* =========================================\r\n   Root — layout and the palette\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu — relative inline-flex */\r\n[mono-button-dropdown] {\r\n  /* ── the ten entry roles, each a public knob over a Basecoat token ───────\r\n     `secondary`, `light` and `dark` are SURFACES upstream, and a surface makes\r\n     no ink: `--dark` is a near-black in light mode and STILL a dark grey in dark\r\n     mode (the role is a fill, paired with `--dark-foreground`), so inking a row\r\n     with it turns that row invisible on a dark popover. The three resolve to a\r\n     foreground instead, which flips with the mode. */\r\n  --_mono-bd-primary: var(--mono-button-dropdown-primary, var(--primary));\r\n  --_mono-bd-secondary: var(--mono-button-dropdown-secondary, var(--secondary-foreground));\r\n  --_mono-bd-success: var(--mono-button-dropdown-success, var(--success));\r\n  --_mono-bd-danger: var(--mono-button-dropdown-danger, var(--destructive));\r\n  --_mono-bd-warning: var(--mono-button-dropdown-warning, var(--warning));\r\n  --_mono-bd-info: var(--mono-button-dropdown-info, var(--info));\r\n  --_mono-bd-teal: var(--mono-button-dropdown-teal, var(--teal));\r\n  --_mono-bd-purple: var(--mono-button-dropdown-purple, var(--purple));\r\n  --_mono-bd-dark: var(--mono-button-dropdown-dark, var(--foreground));\r\n  --_mono-bd-light: var(--mono-button-dropdown-light, var(--foreground));\r\n\r\n  /* ── panel paint — `bg-popover text-popover-foreground ring-foreground/10` ── */\r\n  --_mono-bd-bg: var(--mono-button-dropdown-bg, var(--mono-button-dropdown-surface, var(--popover)));\r\n  --_mono-bd-text: var(--mono-button-dropdown-text, var(--popover-foreground));\r\n  --_mono-bd-ring-width: var(--mono-button-dropdown-ring-width, var(--mono-border-width));\r\n  --_mono-bd-ring-color: var(--mono-button-dropdown-ring-color, var(--mono-button-dropdown-border,\r\n    color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-bd-shadow: var(--mono-button-dropdown-shadow, var(--mono-shadow-md));\r\n\r\n  /* ── md metrics live on the unqualified root ON PURPOSE ────────────────────\r\n     basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — rounded-md p-1 gap-0 */\r\n  --_mono-bd-radius: var(--mono-button-dropdown-radius, var(--_mono-bd-radius-preset, var(--mono-button-dropdown-radius-md, var(--mono-radius-md))));\r\n  --_mono-bd-padding: var(--mono-button-dropdown-padding, var(--_mono-bd-padding-preset, var(--mono-button-dropdown-padding-md, var(--mono-spacing))));\r\n  --_mono-bd-list-gap: var(--mono-button-dropdown-list-gap, var(--_mono-bd-list-gap-preset, 0px));\r\n  /* DEVIATION: upstream is `min-width: anchor-size(width)` — the panel is at\r\n     least as wide as its trigger. Anchor positioning is not the mechanism here\r\n     (the panel is portaled and placed from measurements), so the floor is a\r\n     plain length; maia/luma/sera's `min-w-48` is the per-size knob. */\r\n  --_mono-bd-min-width: var(--mono-button-dropdown-min-width, var(--_mono-bd-min-width-preset, var(--mono-button-dropdown-min-width-md, 9rem)));\r\n  /* The static offset — the JS path uses the `offset` PROP; keep them in step. */\r\n  --_mono-bd-offset: var(--mono-button-dropdown-offset, var(--_mono-bd-offset-preset, var(--mono-button-dropdown-offset-md, var(--mono-spacing))));\r\n\r\n  /* ── the inline row (NOT the menu): the gap between loose buttons ───────── */\r\n  --_mono-bd-gap: var(--mono-button-dropdown-gap, calc(var(--mono-spacing) * 1.5));\r\n\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n}\r\n\r\n[mono-button-dropdown] *,\r\n[mono-button-dropdown] *::before,\r\n[mono-button-dropdown] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n   Sizes — EXTENSION: Basecoat ships ONE menu; md is its `[data-popover]`\r\n   ========================================= */\r\n\r\n[mono-button-dropdown][mono-size=\"xs\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xs, var(--mono-radius-sm));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xs, calc(var(--mono-spacing) * 0.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xs, 7rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xs, calc(var(--mono-spacing) * 0.75));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"sm\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-sm, var(--mono-radius-md));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-sm, calc(var(--mono-spacing) * 0.75));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-sm, 8rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-sm, var(--mono-spacing));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"lg\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-lg, var(--mono-radius-lg));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-lg, 11rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-lg, calc(var(--mono-spacing) * 1.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-lg, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xl, 13rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xl, calc(var(--mono-spacing) * 2));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xl, var(--mono-radius-md));\r\n}\r\n\r\n[mono-button-dropdown][mono-size=\"xxl\"] {\r\n  --_mono-bd-radius-preset: var(--mono-button-dropdown-radius-xxl, var(--mono-radius-xl));\r\n  --_mono-bd-padding-preset: var(--mono-button-dropdown-padding-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-min-width-preset: var(--mono-button-dropdown-min-width-xxl, 15rem);\r\n  --_mono-bd-offset-preset: var(--mono-button-dropdown-offset-xxl, calc(var(--mono-spacing) * 2.5));\r\n  --_mono-bd-item-radius-preset: var(--mono-button-dropdown-item-radius-xxl, var(--mono-radius-lg));\r\n}\r\n\r\n/* =========================================\r\n   Inline row — EXTENSION: the entries before they collapse\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) > [mono-row] {\r\n  display: inline-flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: var(--_mono-bd-gap);\r\n}\r\n\r\n/* `hidden` is a UA rule, and an author `display` beats it whatever the\r\n   specificity — so the hidden state has to be stated here. */\r\n[mono-button-dropdown] > [mono-row][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* =========================================\r\n   Panel — `.dropdown-menu > [data-popover]`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] — absolute z-50 w-max\r\n   overflow-x-hidden overflow-y-auto outline-hidden\r\n   basecoat@1.0.2 styles/vega.css .dropdown-menu > [data-popover] — bg-popover\r\n   text-popover-foreground ring-foreground/10 gap-0 rounded-md p-1 shadow-md ring-1\r\n   — DEVIATIONS: the z-index is the shared popup stack's `--mono-popup-z` rather\r\n   than a flat z-50, and the height cap is the room the portal measured. */\r\n:where([mono-button-dropdown]) > [mono-panel] {\r\n  position: absolute;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  width: max-content;\r\n  min-width: var(--_mono-bd-min-width);\r\n  max-height: var(--mono-popup-avail-h, none);\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  outline: none;\r\n  padding: var(--_mono-bd-padding);\r\n  border-radius: var(--_mono-bd-radius);\r\n  background: var(--_mono-bd-bg);\r\n  color: var(--_mono-bd-text);\r\n  box-shadow:\r\n    0 0 0 var(--_mono-bd-ring-width) var(--_mono-bd-ring-color),\r\n    var(--_mono-bd-shadow);\r\n}\r\n\r\n/* Same UA-`hidden` story as the row, and it has to out-specify the rule above\r\n   even once the panel has been portaled (where it is still a `>` child). */\r\n[mono-button-dropdown] > [mono-panel][hidden] {\r\n  display: none;\r\n}\r\n\r\n/* Once the element takes over it measures and writes inline top/left, so the\r\n   static placement rules below must stand aside. */\r\n[mono-button-dropdown][mono-fixed] > [mono-panel] {\r\n  position: fixed;\r\n}\r\n\r\n/* =========================================\r\n   Static placement — `[data-side]` / `[data-align]`, verbatim\r\n   -----------------------------------------------------------------------------\r\n   What hand-written markup positions with (and SSR, before hydration). The\r\n   element overrides all of it with inline top/left once it has measured.\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &:not([data-side]), &[data-side='bottom'] — mt-1 top-full */\r\n[mono-button-dropdown]:not([mono-side]):not([mono-fixed]) > [mono-panel],\r\n[mono-button-dropdown][mono-side=\"bottom\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 100%;\r\n  margin-top: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='top'] — mb-1 bottom-full */\r\n[mono-button-dropdown][mono-side=\"top\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 100%;\r\n  margin-bottom: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='left'] — me-1 end-full */\r\n[mono-button-dropdown][mono-side=\"left\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 100%;\r\n  margin-inline-end: var(--_mono-bd-offset);\r\n}\r\n\r\n/* basecoat@1.0.2 components/popover.css [data-popover] >> &[data-side='right'] — ms-1 start-full */\r\n[mono-button-dropdown][mono-side=\"right\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 100%;\r\n  margin-inline-start: var(--_mono-bd-offset);\r\n}\r\n\r\n/* The top/bottom pair aligns on the inline axis: start-0 / end-0 / start-1/2 -translate-x-1/2.\r\n   DEVIATION from `mono-dropdown`: the default here is `end`, matching the\r\n   `placement=\"bottom-end\"` default — a row of actions hangs off the right. */\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"start\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"]):is(:not([mono-align]), [mono-align=\"end\"]):not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-end: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is(:not([mono-side]), [mono-side=\"top\"], [mono-side=\"bottom\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  inset-inline-start: 50%;\r\n  translate: -50% 0;\r\n}\r\n\r\n/* …and the left/right pair on the block axis: top-0 / bottom-0 / top-1/2 -translate-y-1/2 */\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"]):is(:not([mono-align]), [mono-align=\"start\"]):not([mono-fixed]) > [mono-panel] {\r\n  top: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"end\"]:not([mono-fixed]) > [mono-panel] {\r\n  bottom: 0;\r\n}\r\n\r\n[mono-button-dropdown]:is([mono-side=\"left\"], [mono-side=\"right\"])[mono-align=\"center\"]:not([mono-fixed]) > [mono-panel] {\r\n  top: 50%;\r\n  translate: 0 -50%;\r\n}\r\n\r\n/* =========================================\r\n   List — `[role='menu']`\r\n   ========================================= */\r\n\r\n/* basecoat@1.0.2 components/dropdown-menu.css .dropdown-menu [role='menu'] — outline-hidden */\r\n:where([mono-button-dropdown]) [mono-list] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--_mono-bd-list-gap);\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n  outline: none;\r\n}\r\n\r\n/* =========================================\r\n   Item — `[role='menuitem']`\r\n   -----------------------------------------------------------------------------\r\n   The `<li>` paints nothing itself: it hands the entry button a flattened\r\n   palette through the button's PUBLIC knobs, which is the only route that\r\n   reaches the control in BOTH builds (the shadow one keeps it behind a\r\n   boundary). The entry's own `variant` and `color` presets are overridden by\r\n   construction — inside the menu every row is one flat strip.\r\n   ========================================= */\r\n\r\n:where([mono-button-dropdown]) [mono-item] {\r\n  /* ── the row's ink and its hover wash ──────────────────────────────────────\r\n     FOUR tiers, not three, because the middle one belongs to a PER-ENTRY prop:\r\n\r\n       --mono-button-dropdown-item-<x>       consumer, wins over everything\r\n       --_mono-bd-item-<x>-preset            the entry's `color` (mono-item-color)\r\n       --mono-button-dropdown-item-base-<x>  a FLAVOR's neutral row\r\n       the Basecoat value\r\n\r\n     A flavor must write the `-base-` tier: writing the consumer knob would\r\n     out-rank every role and freeze all ten colours at one ink. */\r\n  --_mono-bd-item-color: var(--mono-button-dropdown-item-color, var(--_mono-bd-item-color-preset, var(--mono-button-dropdown-item-base-color, var(--_mono-bd-text))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — focus-visible:bg-accent */\r\n  --_mono-bd-item-hover-bg: var(--mono-button-dropdown-item-hover-bg, var(--_mono-bd-item-hover-bg-preset, var(--mono-button-dropdown-item-base-hover-bg, var(--mono-button-dropdown-item-hover, var(--accent)))));\r\n  --_mono-bd-item-hover-color: var(--mono-button-dropdown-item-hover-color, var(--_mono-bd-item-hover-color-preset, var(--mono-button-dropdown-item-base-hover-color, var(--accent-foreground))));\r\n  /* basecoat@1.0.2 styles/vega.css .dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) — rounded-sm */\r\n  --_mono-bd-item-radius: var(--mono-button-dropdown-item-radius, var(--_mono-bd-item-radius-preset, var(--mono-radius-sm)));\r\n\r\n  /* ── flatten the entry: the button's own public knobs, set on its ancestor ─ */\r\n  --mono-button-bg: transparent;\r\n  --mono-button-color: var(--_mono-bd-item-color);\r\n  --mono-button-border-color: transparent;\r\n  --mono-button-shadow: 0 0 #0000;\r\n  --mono-button-hover-bg: var(--_mono-bd-item-hover-bg);\r\n  --mono-button-hover-color: var(--_mono-bd-item-hover-color);\r\n  --mono-button-hover-border-color: transparent;\r\n  --mono-button-hover-shadow: 0 0 #0000;\r\n  --mono-button-radius: var(--_mono-bd-item-radius);\r\n  /* A menu row is a strip, not a chip: full width, label against the start edge. */\r\n  --mono-button-width: 100%;\r\n  --mono-button-justify: flex-start;\r\n  /* No press twitch in a list — right for a standalone button, wrong for a row. */\r\n  --mono-button-press-translate: 0 0;\r\n  --mono-button-font-weight: var(--mono-button-dropdown-item-font-weight, var(--mono-font-weight-medium));\r\n\r\n  display: block;\r\n  min-width: 0;\r\n}\r\n\r\n/* The entry element itself — `<mono-button>` / `<mono-shadow-button>`, both\r\n   `display: inline-block` hosts — has to fill the row for the whole strip to be\r\n   clickable rather than just the label's width. */\r\n:where([mono-button-dropdown]) [mono-item] > * {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .dropdown-menu [data-variant='destructive'] —\r\n   `text-destructive`, and `:is(:focus-visible, .active)` lays the same colour\r\n   down at `bg-destructive/10` (dark `/20`, carried by `--mono-mode-tint`).\r\n   EXTENSION: generalised from destructive to all ten roles. The tint is the\r\n   whole point — a solid role fill under a role-coloured glyph erases it. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"primary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-primary);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-primary) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-primary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"success\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-success);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-success) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-success);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"danger\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-danger);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-danger) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-danger);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"warning\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-warning);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-warning) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-warning);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"info\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-info);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-info) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-info);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"teal\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-teal);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-teal) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-teal);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"purple\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-purple);\r\n  --_mono-bd-item-hover-bg-preset: color-mix(in oklab, var(--_mono-bd-purple) var(--mono-mode-tint), transparent);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-purple);\r\n}\r\n\r\n/* The three surface roles: their ink is a foreground, and a 10% wash of a\r\n   near-background colour is invisible — so they hover on `--accent`, the\r\n   neutral row wash, exactly like an uncoloured entry. */\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"dark\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-dark);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-dark);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"secondary\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-secondary);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-secondary);\r\n}\r\n\r\n[mono-button-dropdown] [mono-item][mono-item-color=\"light\"] {\r\n  --_mono-bd-item-color-preset: var(--_mono-bd-light);\r\n  --_mono-bd-item-hover-color-preset: var(--_mono-bd-light);\r\n}\r\n\r\n/**\r\n * Icon glyphs inside a shadow root.\r\n *\r\n * `adoptIconStyles` copies the page's `.i-mdi-…` rules through CSSOM `cssText`,\r\n * and that read-back DROPS the mask declarations — `mask-image: ;` comes back\r\n * empty whenever the value is a `var()`. What survives is `--un-icon`, the data\r\n * URI itself. So the copy leaves `background-color: currentColor` with no mask,\r\n * painting a solid square: the \"black cube\".\r\n *\r\n * Re-declaring the mask here fixes it, because this sheet is authored source\r\n * rather than a CSSOM copy — it consumes the custom property that DID survive.\r\n * Harmless in the light build, where it merely restates what the page already\r\n * says. The glyph's BOX is left to `[mono-button] [mono-icon]` (Basecoat's\r\n * `size-4`): sizing it here as well used to out-specify that and hand every\r\n * menu icon a 1.1em box the button never asked for.\r\n */\r\n[mono-button-dropdown] [class*='i-'].mono-icon {\r\n  -webkit-mask: var(--un-icon) no-repeat;\r\n  mask: var(--un-icon) no-repeat;\r\n  -webkit-mask-size: 100% 100%;\r\n  mask-size: 100% 100%;\r\n  background-color: currentColor;\r\n  display: inline-block;\r\n}\r\n";
+
 //#endregion
 //#region src/components/button/mono-button-dropdown.shadow.ts
-var MonoButtonDropdownShadow = class MonoButtonDropdownShadow extends withShadowUtilityStyles(MonoButtonDropdownCore(LitElement)) {
+let MonoButtonDropdownShadow = class MonoButtonDropdownShadow extends withShadowUtilityStyles(MonoButtonDropdownCore(LitElement)) {
 	static {
-		this.styles = [unsafeCSS(toShadowCss(button_default, {})), unsafeCSS(toShadowCss(button_dropdown_default, { hostDisplay: "inline-flex" }))];
+		this.styles = [unsafeCSS(toShadowCss(button_css_raw_default, {})), unsafeCSS(toShadowCss(button_dropdown_css_raw_default, { hostDisplay: "inline-flex" }))];
 	}
 	_buttonTag() {
 		return "mono-shadow-button";
@@ -692,5 +695,6 @@ var MonoButtonDropdownShadow = class MonoButtonDropdownShadow extends withShadow
 	}
 };
 MonoButtonDropdownShadow = __decorate([customElement("mono-shadow-button-dropdown")], MonoButtonDropdownShadow);
+
 //#endregion
-export { MonoButtonDropdownCore, MonoButtonDropdownShadow };
+export { MonoButtonDropdownCore, MonoButtonDropdownShadow };

package/dist/ui/shadow/button.js

@@ -1,4 +1,5 @@
-import { r as MonoButtonCore, t as MonoButtonShadow } from "../../mono-button.shadow-B_rKOY9N.js";
+import { r as MonoButtonCore, t as MonoButtonShadow } from "../../mono-button.shadow-D9NdMsmH.js";
+
 //#region src/components/button/button-utils.ts
 /**
 * Generate badge CSS classes
@@ -59,5 +60,6 @@ function validateButtonProps(props) {
 	if (props.rounded && !validRounded.includes(props.rounded)) return false;
 	return true;
 }
+
 //#endregion
-export { MonoButtonCore, MonoButtonShadow, generateBadgeClasses, processIconContent, validateButtonProps };
+export { MonoButtonCore, MonoButtonShadow, generateBadgeClasses, processIconContent, validateButtonProps };

package/dist/ui/shadow/card.js

@@ -1,10 +1,11 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-RB5Tz5nl.js";
-import { t as dispatchMonoEvent } from "../../mono-event-Bi1qP9uN.js";
-import { t as buildSizeStyle } from "../../css-size-DhHSVZJK.js";
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-DHrl4_KK.js";
+import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
+import { t as buildSizeStyle } from "../../css-size-DWAPgQdT.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/card/card-core.ts
 /**
 * `MonoCardCore` — all render-mode-agnostic logic for `mono-card`: reactive
@@ -17,7 +18,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);
@@ -273,18 +274,20 @@ 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.shadow.ts
-var SHADOW_EXTRA_CSS = "";
-var MonoCardShadow = class MonoCardShadow extends withShadowUtilityStyles(MonoCardCore(LitElement)) {
+const SHADOW_EXTRA_CSS = "";
+let MonoCardShadow = class MonoCardShadow extends withShadowUtilityStyles(MonoCardCore(LitElement)) {
 	static {
 		this.disableWarning?.("change-in-update");
 	}
 	static {
-		this.styles = [unsafeCSS(toShadowCss(card_default, {
+		this.styles = [unsafeCSS(toShadowCss(card_css_raw_default, {
 			host: "mono-card",
 			append: SHADOW_EXTRA_CSS
 		}))];
@@ -499,6 +502,7 @@ var MonoCardShadow = class MonoCardShadow extends withShadowUtilityStyles(MonoCa
 	}
 };
 MonoCardShadow = __decorate([customElement("mono-shadow-card")], MonoCardShadow);
+
 //#endregion
 //#region src/components/card/card-utils.ts
 /**
@@ -534,5 +538,6 @@ function generateCardAttributes(clickable, hoverable, label) {
 		"aria-label": label || void 0
 	};
 }
+
 //#endregion
-export { MonoCardCore, MonoCardShadow, generateCardAttributes, validateCardProps };
+export { MonoCardCore, MonoCardShadow, generateCardAttributes, validateCardProps };