@mono-lit/helper 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSE.md +55 -55
  2. package/README.md +35 -35
  3. package/dist/data-source-controller-B_rgHCjw.js +241 -0
  4. package/dist/{data-source-controller-C50Qyfzh.js → data-source-controller-Dbb4fd8I.js} +69 -6
  5. package/dist/{data-source-options-BTpfrOZ_.js → data-source-options-CP-X62Pa.js} +2 -2
  6. package/dist/{data-source-options-CQSTZHPE.js → data-source-options-Jqj7LU3Z.js} +1 -1
  7. package/dist/{data-source-read-CUX-lgrQ.js → data-source-read-B4DGp6UQ.js} +1 -1
  8. package/dist/{export-BvlBx_GZ.js → export-BiGVyxt6.js} +2 -2
  9. package/dist/{field-icons-BoOG6KrL.js → field-icons-DELrSdqJ.js} +36 -1
  10. package/dist/index.js +7 -7
  11. package/dist/{index.node-DjvYOL-J.js → index.node-BIqEGehH.js} +5 -4
  12. package/dist/index.node.js +7 -7
  13. package/dist/{mono-button-CoVnBLav.js → mono-button-simcTQdW.js} +2 -2
  14. package/dist/{mono-button.shadow-FfP_hMH4.js → mono-button.shadow-B_rKOY9N.js} +2 -2
  15. package/dist/{mono-data-chart-ChU4Ii3p.js → mono-data-chart-CEv29_NS.js} +53 -12
  16. package/dist/{mono-data-dropdown-BAUl58kW.js → mono-data-dropdown-Wnoke6zO.js} +1 -1
  17. package/dist/{mono-data-grid-CLBK8clE.js → mono-data-grid-CjkEqxgE.js} +5 -232
  18. package/dist/{mono-data-grid-Db80FzdZ.js → mono-data-grid-YjR3n9Ar.js} +3 -230
  19. package/dist/{data-search-Bwo5bg8K.js → normalize-error-Gcgmgh5i.js} +299 -1
  20. package/dist/{reactive-BHsqVjRh.js → reactive-Di3mTMnV.js} +299 -1
  21. package/dist/src/components/card/card-core.d.ts +1 -0
  22. package/dist/src/components/chart/chart-types.d.ts +19 -0
  23. package/dist/src/components/select/select-types.d.ts +26 -0
  24. package/dist/src/components/tag-input/tag-input-types.d.ts +26 -0
  25. package/dist/src/composables/data-source-controller.d.ts +29 -0
  26. package/dist/src/composables/field-icons.d.ts +8 -0
  27. package/dist/src/utils/normalize-error.d.ts +30 -0
  28. package/dist/{tooltip-CysgRgBi.js → tooltip-DQqNpqk2.js} +62 -27
  29. package/dist/tooltip.js +1 -1
  30. package/dist/ui/alert.js +1 -1
  31. package/dist/ui/button-dropdown.js +1 -1
  32. package/dist/ui/button.js +1 -1
  33. package/dist/ui/card.js +15 -2
  34. package/dist/ui/chart.js +81 -4
  35. package/dist/ui/dropdown-table.js +2 -2
  36. package/dist/ui/index.css +181 -18
  37. package/dist/ui/modal.js +3 -2
  38. package/dist/ui/select.js +153 -19
  39. package/dist/ui/shadow/alert.js +1 -1
  40. package/dist/ui/shadow/button-dropdown.js +1 -1
  41. package/dist/ui/shadow/button.js +1 -1
  42. package/dist/ui/shadow/card.js +16 -2
  43. package/dist/ui/shadow/chart.js +133 -17
  44. package/dist/ui/shadow/dropdown-table.js +2 -2
  45. package/dist/ui/shadow/modal.js +3 -2
  46. package/dist/ui/shadow/select.js +153 -19
  47. package/dist/ui/shadow/table.js +4 -4
  48. package/dist/ui/shadow/tag-input.js +154 -26
  49. package/dist/ui/table.js +3 -3
  50. package/dist/ui/tag-input.js +153 -25
  51. package/package.json +1 -1
package/dist/{mono-button.shadow-FfP_hMH4.js → mono-button.shadow-B_rKOY9N.js} RENAMED
@@ -351,7 +351,7 @@ var MonoButtonCore = (superClass) => {
351
351
  ?mono-icon-only=${this._isIconOnlyLike}
352
352
  ?mono-glass=${Boolean(this.glass)}
353
353
  ?mono-loading=${this._effectiveLoading}
354
- ?mono-pending=${this._isPendingOnly}
354
+ ?mono-waiting=${this._isPendingOnly}
355
355
  ?mono-sized=${this._hasSize}
356
356
  >${inner}</div>`;
357
357
  }
@@ -595,7 +595,7 @@ var MonoButtonCore = (superClass) => {
595
595
  };
596
596
  //#endregion
597
597
  //#region src/components/button/button.css?raw
598
- var button_default = "/* =========================================================================\r\n mono-button — a port of Basecoat's `.btn` (basecoat-css@1.0.2, vega style).\r\n\r\n Styled by ATTRIBUTE, like Basecoat (`.btn[data-size='sm']`) — and the\r\n attributes mirror the element's props one for one, so hand-written markup\r\n reads like the Lit / Vue tag:\r\n\r\n <mono-button size=\"sm\" color=\"danger\" variant=\"outline\" rounded=\"full\">\r\n <div mono-button mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"outline\" mono-rounded=\"full\">\r\n <button>…</button>\r\n </div>\r\n\r\n An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n `:not([mono-color])` = primary, `:not([mono-variant])` = solid). The element\r\n renders these attributes on its wrapper (both builds); the old classes\r\n (`.mono-button.sm.outline-primary`) are still emitted as inert hooks for\r\n consumer CSS until 2.0 but no rule here reads them.\r\n\r\n Selector map (ours ≡ upstream):\r\n [mono-button] > :is(button, a) ≡ .btn\r\n [mono-size=\"xs|sm|md|lg\"] ≡ .btn[data-size='xs'|'sm'|default|'lg']\r\n [mono-size=\"xl|xxl\"] ≡ EXTENSION (h-11 / h-12 on the same grid)\r\n [mono-icon-only][mono-size=…] ≡ .btn[data-size='icon-<size>']\r\n [mono-variant=\"solid\"][mono-color=<hue>] ≡ .btn[data-variant='primary'] with the hue swapped\r\n [mono-variant=\"solid\"][mono-color=\"secondary\"]≡ .btn[data-variant='secondary']\r\n [mono-variant=\"solid\"][mono-color=\"light\"] ≡ .btn[data-variant='outline']\r\n [mono-variant=\"outline\"][mono-color=<hue>] ≡ EXTENSION (outline pattern, hue-inked)\r\n [mono-variant=\"tonal\"][mono-color=<hue>] ≡ .btn[data-variant='destructive'] with the hue swapped\r\n [mono-variant=\"text\"] ≡ .btn[data-variant='ghost'] (+ hue ink)\r\n [mono-link] ≡ .btn[data-variant='link']\r\n [mono-content] > [mono-icon]:first/last-child ≡ has-[[data-icon='inline-start'|'inline-end']]\r\n [mono-affix=\"prepend|append\"] ≡ .button-group siblings\r\n\r\n Inner parts are attributes too, so a hand-written button is attributes all\r\n the way down: [mono-native] on the <button>/<a>, [mono-content],\r\n [mono-icon] (+ [mono-spinning] / [mono-empty] / [mono-hidden]), [mono-text],\r\n [mono-badge=\"red|green|orange|cobalt\"], [mono-affix=\"prepend|append\"]\r\n (+ [mono-divider] / [mono-disabled] / [mono-empty]).\r\n\r\n Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\r\n `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\r\n `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\r\n `box-shadow: ring, shadow` below, and every `dark:` variant → a\r\n `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\r\n inherited custom property can).\r\n\r\n FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set the\r\n `--mono-button-<size>-*` style knobs read below — `-radius`, `-padding-inline`,\r\n `-icon-padding`, `-gap`, `-font-size`, `-line-height`, `-icon-size` — plus\r\n `--mono-button-font-weight` / `-text-transform` / `-letter-spacing` /\r\n `-icon-size` / `-outline-shadow` / `-outline-bg` / `-outline-hover-bg` /\r\n `-link-decoration`. Every fallback here is vega's value\r\n (`node scripts/basecoat-styles.mjs --varying \"^\\.btn\"` prints the matrix).\r\n\r\n The public `--mono-button-*` knobs and the three-tier resolver\r\n (`--mono-button-x` → `--_mono-button-x-preset` → base) are unchanged: a\r\n colour/variant class only ever writes a `*-preset` slot, so a consumer's\r\n own `--mono-button-bg` on the host still wins.\r\n ========================================================================= */\r\n\r\nmono-button {\r\n display: inline-block;\r\n}\r\n\r\n[mono-button] {\r\n /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n --_mono-button-primary: var(--mono-button-primary, var(--primary));\r\n --_mono-button-primary-foreground: var(--mono-button-primary-foreground, var(--primary-foreground));\r\n --_mono-button-secondary: var(--mono-button-secondary, var(--secondary));\r\n --_mono-button-secondary-foreground: var(--mono-button-secondary-foreground, var(--secondary-foreground));\r\n --_mono-button-success: var(--mono-button-success, var(--success));\r\n --_mono-button-success-foreground: var(--mono-button-success-foreground, var(--success-foreground));\r\n --_mono-button-danger: var(--mono-button-danger, var(--destructive));\r\n --_mono-button-danger-foreground: var(--mono-button-danger-foreground, var(--destructive-foreground));\r\n --_mono-button-warning: var(--mono-button-warning, var(--warning));\r\n --_mono-button-warning-foreground: var(--mono-button-warning-foreground, var(--warning-foreground));\r\n --_mono-button-info: var(--mono-button-info, var(--info));\r\n --_mono-button-info-foreground: var(--mono-button-info-foreground, var(--info-foreground));\r\n --_mono-button-teal: var(--mono-button-teal, var(--teal));\r\n --_mono-button-teal-foreground: var(--mono-button-teal-foreground, var(--teal-foreground));\r\n --_mono-button-purple: var(--mono-button-purple, var(--purple));\r\n --_mono-button-purple-foreground: var(--mono-button-purple-foreground, var(--purple-foreground));\r\n --_mono-button-dark: var(--mono-button-dark, var(--dark));\r\n --_mono-button-dark-foreground: var(--mono-button-dark-foreground, var(--dark-foreground));\r\n --_mono-button-neutral: var(--mono-button-neutral, var(--neutral));\r\n --_mono-button-neutral-foreground: var(--mono-button-neutral-foreground, var(--neutral-foreground));\r\n --_mono-button-text: var(--mono-button-text, var(--foreground));\r\n --_mono-button-background: var(--mono-button-background, var(--background));\r\n --_mono-button-muted: var(--mono-button-muted, var(--muted));\r\n --_mono-button-border: var(--mono-button-border, var(--mono-mode-outline-border));\r\n\r\n /* ── tonal tint ramp: `bg-x/10 hover:bg-x/20` (dark 20 / 30) ────────────\r\n One alpha pair for every hue instead of the old srgb-with-white mixes;\r\n the per-colour `--mono-button-<c>-soft(-hover)` knobs below still win. */\r\n --_mono-button-tint: var(--mono-button-tint, var(--mono-mode-tint));\r\n --_mono-button-tint-hover: var(--mono-button-tint-hover, var(--mono-mode-tint-hover));\r\n --_mono-button-primary-soft: var(--mono-button-primary-soft, color-mix(in oklab, var(--_mono-button-primary) var(--_mono-button-tint), transparent));\r\n --_mono-button-primary-soft-hover: var(--mono-button-primary-soft-hover, color-mix(in oklab, var(--_mono-button-primary) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-success-soft: var(--mono-button-success-soft, color-mix(in oklab, var(--_mono-button-success) var(--_mono-button-tint), transparent));\r\n --_mono-button-success-soft-hover: var(--mono-button-success-soft-hover, color-mix(in oklab, var(--_mono-button-success) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-danger-soft: var(--mono-button-danger-soft, color-mix(in oklab, var(--_mono-button-danger) var(--_mono-button-tint), transparent));\r\n --_mono-button-danger-soft-hover: var(--mono-button-danger-soft-hover, color-mix(in oklab, var(--_mono-button-danger) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-warning-soft: var(--mono-button-warning-soft, color-mix(in oklab, var(--_mono-button-warning) var(--_mono-button-tint), transparent));\r\n --_mono-button-warning-soft-hover: var(--mono-button-warning-soft-hover, color-mix(in oklab, var(--_mono-button-warning) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-info-soft: var(--mono-button-info-soft, color-mix(in oklab, var(--_mono-button-info) var(--_mono-button-tint), transparent));\r\n --_mono-button-info-soft-hover: var(--mono-button-info-soft-hover, color-mix(in oklab, var(--_mono-button-info) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-teal-soft: var(--mono-button-teal-soft, color-mix(in oklab, var(--_mono-button-teal) var(--_mono-button-tint), transparent));\r\n --_mono-button-teal-soft-hover: var(--mono-button-teal-soft-hover, color-mix(in oklab, var(--_mono-button-teal) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-purple-soft: var(--mono-button-purple-soft, color-mix(in oklab, var(--_mono-button-purple) var(--_mono-button-tint), transparent));\r\n --_mono-button-purple-soft-hover: var(--mono-button-purple-soft-hover, color-mix(in oklab, var(--_mono-button-purple) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-dark-soft: var(--mono-button-dark-soft, color-mix(in oklab, var(--_mono-button-dark) var(--_mono-button-tint), transparent));\r\n --_mono-button-dark-soft-hover: var(--mono-button-dark-soft-hover, color-mix(in oklab, var(--_mono-button-dark) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-neutral-soft: var(--mono-button-neutral-soft, color-mix(in oklab, var(--_mono-button-neutral) var(--_mono-button-tint), transparent));\r\n --_mono-button-neutral-soft-hover: var(--mono-button-neutral-soft-hover, color-mix(in oklab, var(--_mono-button-neutral) var(--_mono-button-tint-hover), transparent));\r\n\r\n /* ── corner: .btn is rounded-md; xs/sm clamp it (set by the size classes) ── */\r\n --_mono-button-radius: var(--mono-button-radius, var(--_mono-button-radius-preset, var(--mono-button-md-radius, var(--mono-radius-md))));\r\n\r\n /* ── focus ring colour: `--ring`, or the hue for tonal (destructive idiom) ── */\r\n --_mono-button-ring-color: var(--mono-button-ring-color, var(--_mono-button-ring-color-preset, var(--ring)));\r\n\r\n /* ── the painted result — three tiers, base = .btn[data-variant='primary'] ── */\r\n --_mono-button-bg: var(--mono-button-bg, var(--_mono-button-bg-preset, var(--_mono-button-primary)));\r\n --_mono-button-color: var(--mono-button-color, var(--_mono-button-color-preset, var(--_mono-button-primary-foreground)));\r\n --_mono-button-border-color: var(--mono-button-border-color, var(--_mono-button-border-color-preset, transparent));\r\n --_mono-button-shadow: var(--mono-button-shadow, var(--_mono-button-shadow-preset, 0 0 #0000));\r\n /* Hover falls back to the RESTING colour at 80% (`hover:bg-primary/80`), so a\r\n consumer who overrides only the resting colour keeps a matching hover. */\r\n --_mono-button-hover-bg: var(--mono-button-hover-bg, var(--_mono-button-hover-bg-preset, color-mix(in oklab, var(--_mono-button-bg) 80%, transparent)));\r\n --_mono-button-hover-color: var(--mono-button-hover-color, var(--_mono-button-hover-color-preset, var(--_mono-button-color)));\r\n --_mono-button-hover-border-color: var(--mono-button-hover-border-color, var(--_mono-button-hover-border-color-preset, var(--_mono-button-border-color)));\r\n --_mono-button-hover-shadow: var(--mono-button-hover-shadow, var(--_mono-button-hover-shadow-preset, var(--_mono-button-shadow)));\r\n\r\n /* ── box: how much room the control takes, and where its content sits ────\r\n Both are `auto` / `center` for a standalone button. They exist as KNOBS\r\n because a button placed inside another component's list — a\r\n `mono-button-dropdown` menu row — has to stretch and left-align, and that\r\n component cannot reach the control with a selector: in the shadow build the\r\n control lives behind a boundary. An inherited custom property crosses it. */\r\n --_mono-button-width: var(--mono-button-width, auto);\r\n --_mono-button-justify: var(--mono-button-justify, center);\r\n /* The press nudge, as a knob for the same reason: a list row must not twitch\r\n under the pointer, and the menu that holds it cannot reach the control. */\r\n --_mono-button-press-translate: var(--mono-button-press-translate, 0 1px);\r\n\r\n /* The focus / invalid ring slot — `0 0 #0000` until a state sets it. Kept as a\r\n slot so a variant can neutralise the resting shadow without ever writing\r\n `box-shadow: none` (which would out-specify the ring). */\r\n --_mono-button-ring: 0 0 #0000;\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n font-family: inherit;\r\n user-select: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n width: var(--_mono-button-width);\r\n /* ALWAYS transparent — reserves the control's 1px border on the wrapper so\r\n the wrapper matches the control's outer box. Not `--mono-button-border-color`:\r\n that is declared HERE for the affix zones, and painting it would ring the\r\n control twice. */\r\n border: var(--mono-border-width) solid transparent;\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n boundary; scoped here so the `<a>` form of an icon-only button measures the\r\n same in both builds. */\r\n[mono-button],\r\n[mono-button] * {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n The control\r\n ========================================= */\r\n\r\n/* basecoat@1.0.2 components/button.css .btn */\r\n/* basecoat@1.0.2 styles/vega.css .btn — mono: `--tw-ring-*` stack flattened to\r\n the ring + shadow slots; the label font/transform are public knobs so a\r\n flavor reaches the shadow build */\r\n[mono-button] > :is(button, a) {\r\n --_mono-button-font-weight: var(--mono-button-font-weight, var(--mono-font-weight-medium));\r\n --_mono-button-text-transform: var(--mono-button-text-transform, none);\r\n --_mono-button-letter-spacing: var(--mono-button-letter-spacing, normal);\r\n\r\n display: inline-flex;\r\n flex-shrink: 0;\r\n align-items: center;\r\n justify-content: var(--_mono-button-justify);\r\n width: var(--_mono-button-width);\r\n position: relative;\r\n white-space: nowrap;\r\n user-select: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n outline-style: none;\r\n border-radius: var(--_mono-button-radius);\r\n border: var(--mono-border-width) solid var(--_mono-button-border-color);\r\n background-clip: padding-box;\r\n background: var(--_mono-button-bg);\r\n color: var(--_mono-button-color);\r\n box-shadow: var(--_mono-button-ring), var(--_mono-button-shadow);\r\n font-family: inherit;\r\n font-size: var(--mono-text-sm);\r\n line-height: var(--mono-text-sm--lh);\r\n font-weight: var(--_mono-button-font-weight);\r\n text-transform: var(--_mono-button-text-transform);\r\n letter-spacing: var(--_mono-button-letter-spacing);\r\n transition-property: all;\r\n transition-timing-function: var(--mono-ease);\r\n transition-duration: var(--mono-duration);\r\n\r\n /* focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n &:focus-visible {\r\n border-color: var(--_mono-button-ring-color);\r\n --_mono-button-ring: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--_mono-button-ring-color) var(--mono-ring-alpha), transparent);\r\n }\r\n\r\n /* aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20\r\n (dark: border /50, ring /40 — carried by the mode tokens) */\r\n &[aria-invalid='true'] {\r\n border-color: var(--mono-mode-invalid-border);\r\n --_mono-button-ring: 0 0 0 var(--mono-ring-width) var(--mono-mode-invalid-ring);\r\n }\r\n\r\n /* active:not-aria-[haspopup]:translate-y-px */\r\n &:active:not([aria-haspopup]):not([mono-disabled]):not(:disabled) {\r\n translate: var(--_mono-button-press-translate);\r\n }\r\n\r\n /* disabled:pointer-events-none disabled:opacity-50 */\r\n &:disabled,\r\n &[mono-disabled] {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n & svg,\r\n & [mono-icon] {\r\n pointer-events: none;\r\n flex-shrink: 0;\r\n }\r\n}\r\n\r\n/* Every Basecoat hover sits behind `@media (hover: hover)`: no sticky hover on touch. */\r\n@media (hover: hover) {\r\n [mono-button] > :is(button, a):hover:not([mono-disabled]):not(:disabled) {\r\n background: var(--_mono-button-hover-bg);\r\n color: var(--_mono-button-hover-color);\r\n border-color: var(--_mono-button-hover-border-color);\r\n --_mono-button-shadow: var(--_mono-button-hover-shadow);\r\n }\r\n}\r\n\r\n/* =========================================\r\n Sizes — the control height IS the token (see tests/perf/field-heights)\r\n ========================================= */\r\n\r\n/* The unqualified control carries the `md` metrics ON PURPOSE: hand-written\r\n `<div mono-button>` markup that names no size renders exactly like `size=\"md\"`. */\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-size]), .btn[data-size='default'] — h-9 gap-1.5 px-2.5 */\r\n[mono-button]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-md-gap, calc(var(--mono-spacing) * 1.5));\r\n --_mono-button-icon-padding: var(--mono-button-md-icon-padding, calc(var(--mono-spacing) * 2));\r\n min-height: var(--mono-control-height-md);\r\n padding-inline: var(--mono-button-md-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n padding-block: 0;\r\n font-size: var(--mono-button-md-font-size, var(--mono-text-sm));\r\n line-height: var(--mono-button-md-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='xs'] — h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),8px)] */\r\n[mono-button][mono-size=\"xs\"] {\r\n --_mono-button-radius-preset: var(--mono-button-xs-radius, min(var(--mono-radius-md), 8px));\r\n}\r\n[mono-button][mono-size=\"xs\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-xs-gap, var(--mono-spacing));\r\n --_mono-button-icon-padding: var(--mono-button-xs-icon-padding, calc(var(--mono-spacing) * 1.5));\r\n min-height: var(--mono-control-height-xs);\r\n padding-inline: var(--mono-button-xs-padding-inline, calc(var(--mono-spacing) * 2));\r\n font-size: var(--mono-button-xs-font-size, var(--mono-text-xs));\r\n line-height: var(--mono-button-xs-line-height, var(--mono-text-xs--lh));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='sm'] — h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)] */\r\n[mono-button][mono-size=\"sm\"] {\r\n --_mono-button-radius-preset: var(--mono-button-sm-radius, min(var(--mono-radius-md), 10px));\r\n}\r\n[mono-button][mono-size=\"sm\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-sm-gap, var(--mono-spacing));\r\n --_mono-button-icon-padding: var(--mono-button-sm-icon-padding, calc(var(--mono-spacing) * 1.5));\r\n min-height: var(--mono-control-height-sm);\r\n padding-inline: var(--mono-button-sm-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n font-size: var(--mono-button-sm-font-size, var(--mono-button-md-font-size, var(--mono-text-sm)));\r\n line-height: var(--mono-button-sm-line-height, var(--mono-button-md-line-height, var(--mono-text-sm--lh)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='lg'] — h-10 gap-1.5 px-2.5 */\r\n[mono-button][mono-size=\"lg\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-lg-gap, calc(var(--mono-spacing) * 1.5));\r\n --_mono-button-icon-padding: var(--mono-button-lg-icon-padding, calc(var(--mono-spacing) * 2));\r\n min-height: var(--mono-control-height-lg);\r\n padding-inline: var(--mono-button-lg-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n font-size: var(--mono-button-lg-font-size, var(--mono-button-md-font-size, var(--mono-text-sm)));\r\n line-height: var(--mono-button-lg-line-height, var(--mono-button-md-line-height, var(--mono-text-sm--lh)));\r\n}\r\n\r\n/* EXTENSION — xl / xxl continue the grid: h-11 gap-2 px-3 text-base, h-12 gap-2 px-4 text-lg */\r\n[mono-button][mono-size=\"xl\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-xl-gap, calc(var(--mono-spacing) * 2));\r\n --_mono-button-icon-padding: var(--mono-button-xl-icon-padding, calc(var(--mono-spacing) * 2.5));\r\n min-height: var(--mono-control-height-xl);\r\n padding-inline: var(--mono-button-xl-padding-inline, calc(var(--mono-spacing) * 3));\r\n font-size: var(--mono-button-xl-font-size, var(--mono-text-base));\r\n line-height: var(--mono-button-xl-line-height, var(--mono-text-base--lh));\r\n}\r\n[mono-button][mono-size=\"xxl\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-xxl-gap, calc(var(--mono-spacing) * 2));\r\n --_mono-button-icon-padding: var(--mono-button-xxl-icon-padding, calc(var(--mono-spacing) * 3));\r\n min-height: var(--mono-control-height-xxl);\r\n padding-inline: var(--mono-button-xxl-padding-inline, calc(var(--mono-spacing) * 4));\r\n font-size: var(--mono-button-xxl-font-size, var(--mono-text-lg));\r\n line-height: var(--mono-button-xxl-line-height, var(--mono-text-lg--lh));\r\n}\r\n\r\n/* has-[[data-icon='inline-start']]:pl-2 / has-[[data-icon='inline-end']]:pr-2\r\n (xs/sm: 1.5). Our icon box is the first or last child of `[mono-content]`\r\n depending on `icon-position`; `:not([mono-empty])` is the light /\r\n shadow spelling of \"there is something in it\" — an icon OR the spinner that\r\n replaces it, so both builds tighten the same side while loading. */\r\n[mono-button] > :is(button, a):has(> [mono-content] > [mono-icon]:first-child:not([mono-empty])) {\r\n padding-left: var(--_mono-button-icon-padding);\r\n}\r\n[mono-button] > :is(button, a):has(> [mono-content] > [mono-icon]:last-child:not([mono-empty])) {\r\n padding-right: var(--_mono-button-icon-padding);\r\n}\r\n\r\n/* Icon-only: a square of the control height.\r\n basecoat@1.0.2 styles/vega.css .btn[data-size='icon'] — size-9 (md) */\r\n[mono-button][mono-icon-only] > :is(button, a) {\r\n width: var(--mono-control-height-md);\r\n height: var(--mono-control-height-md);\r\n padding: 0;\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon-xs'] — size-6 rounded-[min(var(--radius-md),8px)] */\r\n[mono-button][mono-icon-only][mono-size=\"xs\"] > :is(button, a) {\r\n width: var(--mono-control-height-xs);\r\n height: var(--mono-control-height-xs);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon-sm'] — size-8 rounded-[min(var(--radius-md),10px)] */\r\n[mono-button][mono-icon-only][mono-size=\"sm\"] > :is(button, a) {\r\n width: var(--mono-control-height-sm);\r\n height: var(--mono-control-height-sm);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon-lg'] — size-10 */\r\n[mono-button][mono-icon-only][mono-size=\"lg\"] > :is(button, a) {\r\n width: var(--mono-control-height-lg);\r\n height: var(--mono-control-height-lg);\r\n}\r\n/* EXTENSION — size-11 / size-12 */\r\n[mono-button][mono-icon-only][mono-size=\"xl\"] > :is(button, a) {\r\n width: var(--mono-control-height-xl);\r\n height: var(--mono-control-height-xl);\r\n}\r\n[mono-button][mono-icon-only][mono-size=\"xxl\"] > :is(button, a) {\r\n width: var(--mono-control-height-xxl);\r\n height: var(--mono-control-height-xxl);\r\n}\r\n\r\n/* =========================================\r\n Content\r\n ========================================= */\r\n\r\n[mono-button] [mono-content] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--_mono-button-gap, calc(var(--mono-spacing) * 1.5));\r\n min-width: 0;\r\n line-height: inherit;\r\n}\r\n\r\n[mono-button] [mono-text] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 0;\r\n position: relative;\r\n transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* The icon box. `[&_svg:not([class*='size-'])]:size-4` (xs: size-3) — our\r\n icons are UnoCSS `i-*` mask spans as often as SVGs, so the box itself is\r\n sized and whatever is inside fills it. Every rule is scoped under\r\n [mono-button] so a consumer's own [mono-icon] elsewhere is untouched. */\r\n[mono-button] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-md-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4)));\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 auto;\r\n width: var(--_mono-button-icon-size);\r\n height: var(--_mono-button-icon-size);\r\n line-height: 1;\r\n}\r\n\r\n[mono-button][mono-size=\"xs\"] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-xs-icon-size, calc(var(--mono-spacing) * 3));\r\n}\r\n[mono-button][mono-icon-only]:is(:not([mono-size]), [mono-size=\"md\"]) [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-icononly-md-icon-size, var(--mono-button-md-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4))));\r\n}\r\n[mono-button][mono-size=\"sm\"] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-sm-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4)));\r\n}\r\n[mono-button][mono-size=\"lg\"] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-lg-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4)));\r\n}\r\n\r\n/* EXTENSION — the two larger steps get a size-5 glyph */\r\n[mono-button]:is([mono-size=\"xl\"], [mono-size=\"xxl\"]) [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-xl-icon-size, calc(var(--mono-spacing) * 5));\r\n}\r\n\r\n[mono-button] [mono-icon] > svg,\r\n[mono-button] [mono-icon] > span,\r\n[mono-button] [mono-icon] > * {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n/* The SHADOW build's icon arrives through a `<slot>`; `[mono-icon] > svg`\r\n cannot reach assigned nodes. Inert in the light build. */\r\n[mono-button] [mono-icon] ::slotted(svg),\r\n[mono-button] [mono-icon] ::slotted(*) {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n[mono-button] [mono-icon][mono-hidden] {\r\n display: none !important;\r\n}\r\n\r\n/* =========================================\r\n Badge (mono extension; painted with the role tokens) — `mono-badge` takes the\r\n `badge-color` value: red (default) | green | orange | cobalt\r\n ========================================= */\r\n\r\n[mono-button] > :is(button, a) [mono-badge] {\r\n position: absolute;\r\n top: calc(var(--mono-spacing) * -1);\r\n right: calc(var(--mono-spacing) * -1);\r\n min-width: calc(var(--mono-spacing) * 5);\r\n height: calc(var(--mono-spacing) * 5);\r\n padding: 0 calc(var(--mono-spacing) * 1.5);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: var(--mono-radius-full);\r\n font-size: var(--mono-text-xs);\r\n line-height: 1;\r\n font-weight: var(--mono-font-weight-semibold);\r\n pointer-events: none;\r\n}\r\n\r\n[mono-button] [mono-badge]:is(:not([mono-badge=\"\"]), [mono-badge=\"red\"]):not([mono-badge=\"green\"]):not([mono-badge=\"orange\"]):not([mono-badge=\"cobalt\"]) {\r\n background-color: var(--_mono-button-danger);\r\n color: var(--_mono-button-danger-foreground);\r\n}\r\n\r\n[mono-button] [mono-badge=\"green\"] {\r\n background-color: var(--_mono-button-success);\r\n color: var(--_mono-button-success-foreground);\r\n}\r\n\r\n[mono-button] [mono-badge=\"orange\"] {\r\n background-color: var(--_mono-button-warning);\r\n color: var(--_mono-button-warning-foreground);\r\n}\r\n\r\n[mono-button] [mono-badge=\"cobalt\"] {\r\n background-color: var(--_mono-button-primary);\r\n color: var(--_mono-button-primary-foreground);\r\n}\r\n\r\n/* =========================================\r\n Colours\r\n -----------------------------------------\r\n `mono-color` × `mono-variant` (solid | outline | tonal | text). Two kinds of\r\n colour:\r\n\r\n hues primary success danger warning info teal purple dark\r\n ink = the colour, fill = the colour, on-fill = `--<c>-foreground`\r\n surfaces secondary (shadcn's muted surface — NOT a second brand hue)\r\n light (the page background)\r\n\r\n Each hue publishes its palette into `--_mono-button-c*`, and ONE rule per\r\n variant does the styling; the two layers set disjoint properties, so their\r\n order does not matter. No attribute = the default (primary / solid).\r\n ========================================= */\r\n\r\n[mono-button]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n --_mono-button-c: var(--_mono-button-primary);\r\n --_mono-button-c-foreground: var(--_mono-button-primary-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-primary-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-primary-soft-hover);\r\n}\r\n[mono-button][mono-color=\"success\"] {\r\n --_mono-button-c: var(--_mono-button-success);\r\n --_mono-button-c-foreground: var(--_mono-button-success-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-success-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-success-soft-hover);\r\n}\r\n[mono-button][mono-color=\"danger\"] {\r\n --_mono-button-c: var(--_mono-button-danger);\r\n --_mono-button-c-foreground: var(--_mono-button-danger-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-danger-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-danger-soft-hover);\r\n}\r\n[mono-button][mono-color=\"warning\"] {\r\n --_mono-button-c: var(--_mono-button-warning);\r\n --_mono-button-c-foreground: var(--_mono-button-warning-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-warning-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-warning-soft-hover);\r\n}\r\n[mono-button][mono-color=\"info\"] {\r\n --_mono-button-c: var(--_mono-button-info);\r\n --_mono-button-c-foreground: var(--_mono-button-info-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-info-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-info-soft-hover);\r\n}\r\n[mono-button][mono-color=\"teal\"] {\r\n --_mono-button-c: var(--_mono-button-teal);\r\n --_mono-button-c-foreground: var(--_mono-button-teal-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-teal-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-teal-soft-hover);\r\n}\r\n[mono-button][mono-color=\"purple\"] {\r\n --_mono-button-c: var(--_mono-button-purple);\r\n --_mono-button-c-foreground: var(--_mono-button-purple-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-purple-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-purple-soft-hover);\r\n}\r\n[mono-button][mono-color=\"dark\"] {\r\n --_mono-button-c: var(--_mono-button-dark);\r\n --_mono-button-c-foreground: var(--_mono-button-dark-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-dark-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-dark-soft-hover);\r\n}\r\n/* neutral — the mid grey with white ink (chip / card have it; the form demos'\r\n Discard buttons used it and silently painted primary). */\r\n[mono-button][mono-color=\"neutral\"] {\r\n --_mono-button-c: var(--_mono-button-neutral);\r\n --_mono-button-c-foreground: var(--_mono-button-neutral-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-neutral-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-neutral-soft-hover);\r\n}\r\n\r\n/* ── solid ────────────────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-variant]), .btn[data-variant='primary']\r\n — bg-primary text-primary-foreground hover:bg-primary/80, generalised per hue */\r\n[mono-button]:is(:not([mono-variant]), [mono-variant=\"solid\"]):is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: var(--_mono-button-c);\r\n --_mono-button-color-preset: var(--_mono-button-c-foreground);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, var(--_mono-button-c) 80%, transparent);\r\n --_mono-button-hover-color-preset: var(--_mono-button-c-foreground);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']\r\n — bg-secondary text-secondary-foreground hover:bg-[color-mix(in oklch,var(--secondary),var(--foreground) 5%)] */\r\n[mono-button]:is(:not([mono-variant]), [mono-variant=\"solid\"])[mono-color=\"secondary\"] {\r\n --_mono-button-bg-preset: var(--_mono-button-secondary);\r\n --_mono-button-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklch, var(--_mono-button-secondary), var(--_mono-button-text) 5%);\r\n --_mono-button-hover-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline']\r\n — border-border bg-background shadow-xs hover:bg-muted hover:text-foreground\r\n dark:border-input dark:bg-input/30 dark:hover:bg-input/50 (mode tokens) */\r\n[mono-button]:is(:not([mono-variant]), [mono-variant=\"solid\"])[mono-color=\"light\"] {\r\n --_mono-button-bg-preset: var(--mono-button-outline-bg, var(--mono-mode-outline-bg));\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--mono-button-outline-hover-bg, var(--mono-mode-surface-hover));\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n}\r\n\r\n/* ── outline ──────────────────────────────────────────────────────────── */\r\n\r\n/* EXTENSION — the outline pattern inked in the hue: border + label in the\r\n colour, hover lays the tonal tint under it (Basecoat never inverts to a\r\n solid fill on hover). */\r\n[mono-button][mono-variant=\"outline\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-c);\r\n --_mono-button-border-color-preset: var(--_mono-button-c);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--_mono-button-c-soft);\r\n --_mono-button-hover-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-ring-color-preset: var(--_mono-button-c);\r\n}\r\n\r\n/* EXTENSION — outline on the two surfaces: the vendor outline with a neutral border */\r\n[mono-button][mono-variant=\"outline\"][mono-color=\"secondary\"] {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--_mono-button-secondary);\r\n --_mono-button-hover-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n}\r\n[mono-button][mono-variant=\"outline\"][mono-color=\"light\"] {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--mono-mode-surface-hover);\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n}\r\n\r\n/* ── tonal ────────────────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='destructive']\r\n — bg-destructive/10 text-destructive hover:bg-destructive/20\r\n dark:bg-destructive/20 dark:hover:bg-destructive/30\r\n focus-visible:border-destructive/40 focus-visible:ring-destructive/20\r\n generalised per hue; the label keeps its colour so tonal never reads solid */\r\n[mono-button][mono-variant=\"tonal\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: var(--_mono-button-c-soft);\r\n --_mono-button-color-preset: var(--_mono-button-c);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--_mono-button-c-soft-hover);\r\n --_mono-button-hover-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n --_mono-button-ring-color-preset: var(--_mono-button-c);\r\n}\r\n[mono-button][mono-variant=\"tonal\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) > :is(button, a):focus-visible {\r\n border-color: color-mix(in oklab, var(--_mono-button-c) 40%, transparent);\r\n --_mono-button-ring: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--_mono-button-c) var(--_mono-button-tint-hover), transparent);\r\n}\r\n\r\n/* EXTENSION — tonal on the surfaces: the secondary / muted fill, hover at 80% */\r\n[mono-button][mono-variant=\"tonal\"][mono-color=\"secondary\"] {\r\n --_mono-button-bg-preset: var(--_mono-button-secondary);\r\n --_mono-button-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, var(--_mono-button-secondary) 80%, transparent);\r\n --_mono-button-hover-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n[mono-button][mono-variant=\"tonal\"][mono-color=\"light\"] {\r\n --_mono-button-bg-preset: var(--_mono-button-muted);\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, var(--_mono-button-muted) 80%, transparent);\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* ── text (ghost) ─────────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost']\r\n — hover:bg-muted hover:text-foreground dark:hover:bg-muted/50\r\n generalised: a hue keeps its ink and hovers onto its own tint. The two\r\n `--mono-button-plain-*` reads are public knobs a flavor sets (Material's\r\n wash-only hover); they must stay literal `var(--mono-button-…)` here. */\r\n[mono-button][mono-variant=\"text\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-c);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--mono-button-plain-hover-bg, var(--_mono-button-c-soft));\r\n --_mono-button-hover-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-border-color-preset: var(--mono-button-plain-hover-border-color, transparent);\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n/* ghost verbatim for the two surfaces */\r\n[mono-button][mono-variant=\"text\"]:is([mono-color=\"secondary\"], [mono-color=\"light\"]) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--mono-button-plain-hover-bg, var(--mono-mode-ghost-hover));\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: var(--mono-button-plain-hover-border-color, transparent);\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* A text button has no chrome to anchor the focus ring against, so it also\r\n takes its hover look on keyboard focus — the ring still draws on top. */\r\n[mono-button][mono-variant=\"text\"] > :is(button, a):focus-visible {\r\n background: var(--_mono-button-hover-bg);\r\n color: var(--_mono-button-hover-color);\r\n}\r\n\r\n/* Pressing a text button carries it one rung further, onto the hover tint. */\r\n[mono-button][mono-variant=\"text\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) > :is(button, a):active:not([mono-disabled]):not(:disabled) {\r\n background: var(--_mono-button-c-soft-hover);\r\n}\r\n\r\n/* =========================================\r\n Special types\r\n ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='link'] — text-primary underline-offset-4 hover:underline */\r\n[mono-button][mono-link] > :is(button, a) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-primary);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: transparent;\r\n --_mono-button-hover-color-preset: var(--_mono-button-primary);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n text-underline-offset: 4px;\r\n text-decoration-line: var(--mono-button-link-decoration, none);\r\n}\r\n@media (hover: hover) {\r\n [mono-button][mono-link] > :is(button, a):hover {\r\n text-decoration-line: underline;\r\n }\r\n}\r\n\r\n/* EXTENSION — dashed: the outline surface with a dashed edge, primary ink */\r\n[mono-button][mono-dashed] > :is(button, a) {\r\n --_mono-button-bg-preset: var(--mono-mode-outline-bg);\r\n --_mono-button-color-preset: var(--_mono-button-primary);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--_mono-button-primary-soft);\r\n --_mono-button-hover-color-preset: var(--_mono-button-primary);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-primary);\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n border-style: dashed;\r\n}\r\n\r\n/* EXTENSION — glass: a translucent white surface for painted backgrounds */\r\n[mono-button][mono-glass] > :is(button, a) {\r\n --_mono-button-bg-preset: color-mix(in oklab, white 18%, transparent);\r\n --_mono-button-color-preset: white;\r\n --_mono-button-border-color-preset: color-mix(in oklab, white 30%, transparent);\r\n --_mono-button-shadow-preset: var(--mono-shadow-md);\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, white 28%, transparent);\r\n --_mono-button-hover-color-preset: white;\r\n --_mono-button-hover-border-color-preset: color-mix(in oklab, white 50%, transparent);\r\n --_mono-button-hover-shadow-preset: var(--mono-shadow-lg);\r\n backdrop-filter: blur(10px);\r\n}\r\n\r\n/* =========================================\r\n Rounded — one prop for corners, on the Basecoat radius ladder\r\n -----------------------------------------\r\n Sets the PRESET rather than `border-radius`, so a consumer's own\r\n `--mono-button-radius` still wins without anything here needing\r\n `!important`. Steps map onto Basecoat's ladder: xs = radius-sm … xxl = 4xl.\r\n ========================================= */\r\n\r\n[mono-button][mono-rounded=\"none\"] { --_mono-button-radius-preset: 0; }\r\n[mono-button][mono-rounded=\"xs\"] { --_mono-button-radius-preset: var(--mono-radius-sm); }\r\n[mono-button][mono-rounded=\"sm\"] { --_mono-button-radius-preset: var(--mono-radius-md); }\r\n[mono-button][mono-rounded=\"md\"] { --_mono-button-radius-preset: var(--mono-radius-lg); }\r\n[mono-button][mono-rounded=\"lg\"] { --_mono-button-radius-preset: var(--mono-radius-xl); }\r\n[mono-button][mono-rounded=\"xl\"] { --_mono-button-radius-preset: var(--mono-radius-2xl); }\r\n[mono-button][mono-rounded=\"xxl\"] { --_mono-button-radius-preset: var(--mono-radius-4xl); }\r\n[mono-button][mono-rounded=\"full\"] { --_mono-button-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n Loading\r\n ========================================= */\r\n\r\n[mono-button][mono-loading] > :is(button, a) {\r\n position: relative;\r\n pointer-events: none;\r\n opacity: 0.85;\r\n}\r\n\r\n/* `pending` = self-driven loading that is still only WAITING (the debounce\r\n timer or the throttle queue). Clicks are let back through on purpose: a\r\n debounce has to SEE the repeat clicks to reset its timer. */\r\n[mono-button][mono-loading][mono-pending] > :is(button, a) {\r\n pointer-events: auto;\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n}\r\n\r\n/* ── The spinner — drawn INSIDE the icon box, so it replaces the icon, follows\r\n `icon-position`, and cannot change the button's height (the box was already\r\n reserved; tests/perf/field-heights asserts exactly that). ── */\r\n\r\n[mono-button] [mono-icon][mono-spinning] > *,\r\n[mono-button] [mono-icon][mono-spinning] ::slotted(*) {\r\n visibility: hidden;\r\n}\r\n\r\n/* A button with no icon still reserves the box while spinning; `mono-empty`\r\n collapses it the rest of the time (the shadow build marks an unassigned slot\r\n the same way — icon and affix zones alike). */\r\n[mono-button] [mono-icon][mono-empty],\r\n[mono-button] [mono-affix][mono-empty] {\r\n display: none;\r\n}\r\n\r\n[mono-button] [mono-icon][mono-spinning] {\r\n position: relative;\r\n}\r\n\r\n[mono-button] [mono-icon][mono-spinning]::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border: 2px solid currentColor;\r\n border-right-color: transparent;\r\n border-radius: 50%;\r\n animation: mono-button-spin 0.65s linear infinite;\r\n}\r\n\r\n[mono-button]:is([mono-size=\"xs\"], [mono-size=\"sm\"]) [mono-icon][mono-spinning]::after {\r\n border-width: 1.5px;\r\n}\r\n\r\n@keyframes mono-button-spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* =========================================\r\n Sizing — width/height set on the host; `sized` makes the wrapper + control\r\n fill it. Icon-only is included so a fixed square (a FAB) works.\r\n ========================================= */\r\n\r\n[mono-button][mono-sized] {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n[mono-button][mono-sized] > :is(button, a) {\r\n width: 100%;\r\n height: 100%;\r\n flex: 1;\r\n justify-content: center;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border-width: 0;\r\n}\r\n\r\n/* =========================================\r\n Media\r\n ========================================= */\r\n\r\n@media (prefers-contrast: high) {\r\n [mono-button] > :is(button, a) {\r\n border-width: 2px;\r\n }\r\n\r\n /* Outline, tonal and text are low-contrast by design — force a solid fill in\r\n the hue. `light` / `secondary` have no hue to fill with. */\r\n [mono-button]:is([mono-variant=\"outline\"], [mono-variant=\"tonal\"], [mono-variant=\"text\"]):is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) > :is(button, a) {\r\n background: var(--_mono-button-c);\r\n color: var(--_mono-button-c-foreground);\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n [mono-button] > :is(button, a) {\r\n transition: none;\r\n }\r\n\r\n [mono-button] > :is(button, a):active {\r\n translate: none;\r\n }\r\n\r\n [mono-button] [mono-icon][mono-spinning]::after {\r\n animation: none;\r\n }\r\n}\r\n\r\n/* =========================================================================\r\n Prepend / append affixes ≡ .button-group siblings\r\n -------------------------------------------------------------------------\r\n `slot=\"prepend\"` / `slot=\"append\"` render as `[mono-affix]` SIBLINGS of the native control,\r\n never inside it (a `<button>` may not contain interactive content). The zones\r\n paint themselves from the same `--_mono-button-*` variables the control\r\n uses — which is why the colour rules above declare them on the ROOT.\r\n ========================================================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .button-group > :is(span, label, output) — display:flex items-center */\r\n[mono-button] > [mono-affix] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 auto;\r\n align-self: stretch;\r\n box-sizing: border-box;\r\n background: var(--_mono-button-bg);\r\n color: var(--_mono-button-color);\r\n border: var(--mono-border-width) solid var(--_mono-button-border-color);\r\n padding: 0 var(--mono-button-md-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n gap: var(--mono-spacing);\r\n line-height: 1;\r\n cursor: pointer;\r\n}\r\n\r\n/* The light build re-appends slotted nodes into a `[data-mono-slot]` element;\r\n blockify it so an inline icon span actually renders its box. */\r\n[mono-button] > [mono-affix] > [data-mono-slot] {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* basecoat@1.0.2 components/button-group.css .button-group — the group shares\r\n ONE ring: `*:not(:first-child)` squares its start corners and drops its start\r\n border, `*:not(:last-child)` squares its end corners.\r\n `:not([mono-empty])` is load-bearing: the SHADOW build always renders the\r\n zone (its `<slot>` must stay in the tree) and marks it `mono-empty`; `:has()`\r\n matches on presence, which `display: none` does not undo. */\r\n[mono-button]:has(> [mono-affix=\"prepend\"]:not([mono-empty])) > :is(button, a) {\r\n border-start-start-radius: 0;\r\n border-end-start-radius: 0;\r\n border-inline-start-width: 0;\r\n}\r\n\r\n[mono-button]:has(> [mono-affix=\"append\"]:not([mono-empty])) > :is(button, a) {\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end-width: 0;\r\n}\r\n\r\n[mono-button] > [mono-affix=\"prepend\"] {\r\n border-start-start-radius: var(--_mono-button-radius);\r\n border-end-start-radius: var(--_mono-button-radius);\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end-width: 0;\r\n}\r\n\r\n[mono-button] > [mono-affix=\"append\"] {\r\n border-start-end-radius: var(--_mono-button-radius);\r\n border-end-end-radius: var(--_mono-button-radius);\r\n border-start-start-radius: 0;\r\n border-end-start-radius: 0;\r\n border-inline-start-width: 0;\r\n}\r\n\r\n/* ── The divider — `hr[role='separator']`: restores the one edge the rules\r\n above removed, single-width, the ring's own colour. */\r\n[mono-button] > [mono-affix=\"prepend\"][mono-divider] {\r\n border-inline-end-width: var(--mono-border-width);\r\n}\r\n\r\n[mono-button] > [mono-affix=\"append\"][mono-divider] {\r\n border-inline-start-width: var(--mono-border-width);\r\n}\r\n\r\n[mono-button] > [mono-affix][mono-disabled] {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Per-size padding, mirroring the control's own steps. */\r\n[mono-button][mono-size=\"xs\"] > [mono-affix] { padding: 0 var(--mono-button-xs-padding-inline, calc(var(--mono-spacing) * 2)); }\r\n[mono-button][mono-size=\"sm\"] > [mono-affix] { padding: 0 var(--mono-button-sm-padding-inline, calc(var(--mono-spacing) * 2.5)); }\r\n[mono-button][mono-size=\"lg\"] > [mono-affix] { padding: 0 var(--mono-button-lg-padding-inline, calc(var(--mono-spacing) * 2.5)); }\r\n[mono-button][mono-size=\"xl\"] > [mono-affix] { padding: 0 var(--mono-button-xl-padding-inline, calc(var(--mono-spacing) * 3)); }\r\n[mono-button][mono-size=\"xxl\"] > [mono-affix] { padding: 0 var(--mono-button-xxl-padding-inline, calc(var(--mono-spacing) * 4)); }\r\n";
598
+ var button_default = "/* =========================================================================\r\n mono-button — a port of Basecoat's `.btn` (basecoat-css@1.0.2, vega style).\r\n\r\n Styled by ATTRIBUTE, like Basecoat (`.btn[data-size='sm']`) — and the\r\n attributes mirror the element's props one for one, so hand-written markup\r\n reads like the Lit / Vue tag:\r\n\r\n <mono-button size=\"sm\" color=\"danger\" variant=\"outline\" rounded=\"full\">\r\n <div mono-button mono-size=\"sm\" mono-color=\"danger\" mono-variant=\"outline\" mono-rounded=\"full\">\r\n <button>…</button>\r\n </div>\r\n\r\n An absent attribute is the prop's default (`:not([mono-size])` = md,\r\n `:not([mono-color])` = primary, `:not([mono-variant])` = solid). The element\r\n renders these attributes on its wrapper (both builds); the old classes\r\n (`.mono-button.sm.outline-primary`) are still emitted as inert hooks for\r\n consumer CSS until 2.0 but no rule here reads them.\r\n\r\n Selector map (ours ≡ upstream):\r\n [mono-button] > :is(button, a) ≡ .btn\r\n [mono-size=\"xs|sm|md|lg\"] ≡ .btn[data-size='xs'|'sm'|default|'lg']\r\n [mono-size=\"xl|xxl\"] ≡ EXTENSION (h-11 / h-12 on the same grid)\r\n [mono-icon-only][mono-size=…] ≡ .btn[data-size='icon-<size>']\r\n [mono-variant=\"solid\"][mono-color=<hue>] ≡ .btn[data-variant='primary'] with the hue swapped\r\n [mono-variant=\"solid\"][mono-color=\"secondary\"]≡ .btn[data-variant='secondary']\r\n [mono-variant=\"solid\"][mono-color=\"light\"] ≡ .btn[data-variant='outline']\r\n [mono-variant=\"outline\"][mono-color=<hue>] ≡ EXTENSION (outline pattern, hue-inked)\r\n [mono-variant=\"tonal\"][mono-color=<hue>] ≡ .btn[data-variant='destructive'] with the hue swapped\r\n [mono-variant=\"text\"] ≡ .btn[data-variant='ghost'] (+ hue ink)\r\n [mono-link] ≡ .btn[data-variant='link']\r\n [mono-content] > [mono-icon]:first/last-child ≡ has-[[data-icon='inline-start'|'inline-end']]\r\n [mono-affix=\"prepend|append\"] ≡ .button-group siblings\r\n\r\n Inner parts are attributes too, so a hand-written button is attributes all\r\n the way down: [mono-native] on the <button>/<a>, [mono-content],\r\n [mono-icon] (+ [mono-spinning] / [mono-empty] / [mono-hidden]), [mono-text],\r\n [mono-badge=\"red|green|orange|cobalt\"], [mono-affix=\"prepend|append\"]\r\n (+ [mono-divider] / [mono-disabled] / [mono-empty]).\r\n\r\n Values are copied from the compiled vendor sheet (vendor/basecoat/basecoat-\r\n vega.cdn.css) through the token layer: `--spacing` → `--mono-spacing`,\r\n `--text-sm` → `--mono-text-sm`, `--radius-md` → `--mono-radius-md`,\r\n `--color-x` → `--x`, Tailwind's `--tw-ring-*` stack → the two-slot\r\n `box-shadow: ring, shadow` below, and every `dark:` variant → a\r\n `--mono-mode-*` token (a selector cannot cross a shadow boundary; an\r\n inherited custom property can).\r\n\r\n FLAVORS (Basecoat's other seven styles, src/data/theme/flavors/*.css) set the\r\n `--mono-button-<size>-*` style knobs read below — `-radius`, `-padding-inline`,\r\n `-icon-padding`, `-gap`, `-font-size`, `-line-height`, `-icon-size` — plus\r\n `--mono-button-font-weight` / `-text-transform` / `-letter-spacing` /\r\n `-icon-size` / `-outline-shadow` / `-outline-bg` / `-outline-hover-bg` /\r\n `-link-decoration`. Every fallback here is vega's value\r\n (`node scripts/basecoat-styles.mjs --varying \"^\\.btn\"` prints the matrix).\r\n\r\n The public `--mono-button-*` knobs and the three-tier resolver\r\n (`--mono-button-x` → `--_mono-button-x-preset` → base) are unchanged: a\r\n colour/variant class only ever writes a `*-preset` slot, so a consumer's\r\n own `--mono-button-bg` on the host still wins.\r\n ========================================================================= */\r\n\r\nmono-button {\r\n display: inline-block;\r\n}\r\n\r\n[mono-button] {\r\n /* ── palette: each slot is a public knob over a Basecoat token ─────────── */\r\n --_mono-button-primary: var(--mono-button-primary, var(--primary));\r\n --_mono-button-primary-foreground: var(--mono-button-primary-foreground, var(--primary-foreground));\r\n --_mono-button-secondary: var(--mono-button-secondary, var(--secondary));\r\n --_mono-button-secondary-foreground: var(--mono-button-secondary-foreground, var(--secondary-foreground));\r\n --_mono-button-success: var(--mono-button-success, var(--success));\r\n --_mono-button-success-foreground: var(--mono-button-success-foreground, var(--success-foreground));\r\n --_mono-button-danger: var(--mono-button-danger, var(--destructive));\r\n --_mono-button-danger-foreground: var(--mono-button-danger-foreground, var(--destructive-foreground));\r\n --_mono-button-warning: var(--mono-button-warning, var(--warning));\r\n --_mono-button-warning-foreground: var(--mono-button-warning-foreground, var(--warning-foreground));\r\n --_mono-button-info: var(--mono-button-info, var(--info));\r\n --_mono-button-info-foreground: var(--mono-button-info-foreground, var(--info-foreground));\r\n --_mono-button-teal: var(--mono-button-teal, var(--teal));\r\n --_mono-button-teal-foreground: var(--mono-button-teal-foreground, var(--teal-foreground));\r\n --_mono-button-purple: var(--mono-button-purple, var(--purple));\r\n --_mono-button-purple-foreground: var(--mono-button-purple-foreground, var(--purple-foreground));\r\n --_mono-button-dark: var(--mono-button-dark, var(--dark));\r\n --_mono-button-dark-foreground: var(--mono-button-dark-foreground, var(--dark-foreground));\r\n --_mono-button-neutral: var(--mono-button-neutral, var(--neutral));\r\n --_mono-button-neutral-foreground: var(--mono-button-neutral-foreground, var(--neutral-foreground));\r\n --_mono-button-text: var(--mono-button-text, var(--foreground));\r\n --_mono-button-background: var(--mono-button-background, var(--background));\r\n --_mono-button-muted: var(--mono-button-muted, var(--muted));\r\n --_mono-button-border: var(--mono-button-border, var(--mono-mode-outline-border));\r\n\r\n /* ── tonal tint ramp: `bg-x/10 hover:bg-x/20` (dark 20 / 30) ────────────\r\n One alpha pair for every hue instead of the old srgb-with-white mixes;\r\n the per-colour `--mono-button-<c>-soft(-hover)` knobs below still win. */\r\n --_mono-button-tint: var(--mono-button-tint, var(--mono-mode-tint));\r\n --_mono-button-tint-hover: var(--mono-button-tint-hover, var(--mono-mode-tint-hover));\r\n --_mono-button-primary-soft: var(--mono-button-primary-soft, color-mix(in oklab, var(--_mono-button-primary) var(--_mono-button-tint), transparent));\r\n --_mono-button-primary-soft-hover: var(--mono-button-primary-soft-hover, color-mix(in oklab, var(--_mono-button-primary) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-success-soft: var(--mono-button-success-soft, color-mix(in oklab, var(--_mono-button-success) var(--_mono-button-tint), transparent));\r\n --_mono-button-success-soft-hover: var(--mono-button-success-soft-hover, color-mix(in oklab, var(--_mono-button-success) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-danger-soft: var(--mono-button-danger-soft, color-mix(in oklab, var(--_mono-button-danger) var(--_mono-button-tint), transparent));\r\n --_mono-button-danger-soft-hover: var(--mono-button-danger-soft-hover, color-mix(in oklab, var(--_mono-button-danger) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-warning-soft: var(--mono-button-warning-soft, color-mix(in oklab, var(--_mono-button-warning) var(--_mono-button-tint), transparent));\r\n --_mono-button-warning-soft-hover: var(--mono-button-warning-soft-hover, color-mix(in oklab, var(--_mono-button-warning) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-info-soft: var(--mono-button-info-soft, color-mix(in oklab, var(--_mono-button-info) var(--_mono-button-tint), transparent));\r\n --_mono-button-info-soft-hover: var(--mono-button-info-soft-hover, color-mix(in oklab, var(--_mono-button-info) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-teal-soft: var(--mono-button-teal-soft, color-mix(in oklab, var(--_mono-button-teal) var(--_mono-button-tint), transparent));\r\n --_mono-button-teal-soft-hover: var(--mono-button-teal-soft-hover, color-mix(in oklab, var(--_mono-button-teal) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-purple-soft: var(--mono-button-purple-soft, color-mix(in oklab, var(--_mono-button-purple) var(--_mono-button-tint), transparent));\r\n --_mono-button-purple-soft-hover: var(--mono-button-purple-soft-hover, color-mix(in oklab, var(--_mono-button-purple) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-dark-soft: var(--mono-button-dark-soft, color-mix(in oklab, var(--_mono-button-dark) var(--_mono-button-tint), transparent));\r\n --_mono-button-dark-soft-hover: var(--mono-button-dark-soft-hover, color-mix(in oklab, var(--_mono-button-dark) var(--_mono-button-tint-hover), transparent));\r\n --_mono-button-neutral-soft: var(--mono-button-neutral-soft, color-mix(in oklab, var(--_mono-button-neutral) var(--_mono-button-tint), transparent));\r\n --_mono-button-neutral-soft-hover: var(--mono-button-neutral-soft-hover, color-mix(in oklab, var(--_mono-button-neutral) var(--_mono-button-tint-hover), transparent));\r\n\r\n /* ── corner: .btn is rounded-md; xs/sm clamp it (set by the size classes) ── */\r\n --_mono-button-radius: var(--mono-button-radius, var(--_mono-button-radius-preset, var(--mono-button-md-radius, var(--mono-radius-md))));\r\n\r\n /* ── focus ring colour: `--ring`, or the hue for tonal (destructive idiom) ── */\r\n --_mono-button-ring-color: var(--mono-button-ring-color, var(--_mono-button-ring-color-preset, var(--ring)));\r\n\r\n /* ── the painted result — three tiers, base = .btn[data-variant='primary'] ── */\r\n --_mono-button-bg: var(--mono-button-bg, var(--_mono-button-bg-preset, var(--_mono-button-primary)));\r\n --_mono-button-color: var(--mono-button-color, var(--_mono-button-color-preset, var(--_mono-button-primary-foreground)));\r\n --_mono-button-border-color: var(--mono-button-border-color, var(--_mono-button-border-color-preset, transparent));\r\n --_mono-button-shadow: var(--mono-button-shadow, var(--_mono-button-shadow-preset, 0 0 #0000));\r\n /* Hover falls back to the RESTING colour at 80% (`hover:bg-primary/80`), so a\r\n consumer who overrides only the resting colour keeps a matching hover. */\r\n --_mono-button-hover-bg: var(--mono-button-hover-bg, var(--_mono-button-hover-bg-preset, color-mix(in oklab, var(--_mono-button-bg) 80%, transparent)));\r\n --_mono-button-hover-color: var(--mono-button-hover-color, var(--_mono-button-hover-color-preset, var(--_mono-button-color)));\r\n --_mono-button-hover-border-color: var(--mono-button-hover-border-color, var(--_mono-button-hover-border-color-preset, var(--_mono-button-border-color)));\r\n --_mono-button-hover-shadow: var(--mono-button-hover-shadow, var(--_mono-button-hover-shadow-preset, var(--_mono-button-shadow)));\r\n\r\n /* ── box: how much room the control takes, and where its content sits ────\r\n Both are `auto` / `center` for a standalone button. They exist as KNOBS\r\n because a button placed inside another component's list — a\r\n `mono-button-dropdown` menu row — has to stretch and left-align, and that\r\n component cannot reach the control with a selector: in the shadow build the\r\n control lives behind a boundary. An inherited custom property crosses it. */\r\n --_mono-button-width: var(--mono-button-width, auto);\r\n --_mono-button-justify: var(--mono-button-justify, center);\r\n /* The press nudge, as a knob for the same reason: a list row must not twitch\r\n under the pointer, and the menu that holds it cannot reach the control. */\r\n --_mono-button-press-translate: var(--mono-button-press-translate, 0 1px);\r\n\r\n /* The focus / invalid ring slot — `0 0 #0000` until a state sets it. Kept as a\r\n slot so a variant can neutralise the resting shadow without ever writing\r\n `box-shadow: none` (which would out-specify the ring). */\r\n --_mono-button-ring: 0 0 #0000;\r\n\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n font-family: inherit;\r\n user-select: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n width: var(--_mono-button-width);\r\n /* ALWAYS transparent — reserves the control's 1px border on the wrapper so\r\n the wrapper matches the control's outer box. Not `--mono-button-border-color`:\r\n that is declared HERE for the affix zones, and painting it would ring the\r\n control twice. */\r\n border: var(--mono-border-width) solid transparent;\r\n}\r\n\r\n/* A page-level `* { box-sizing: border-box }` reset does NOT cross a shadow\r\n boundary; scoped here so the `<a>` form of an icon-only button measures the\r\n same in both builds. */\r\n[mono-button],\r\n[mono-button] * {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* =========================================\r\n The control\r\n ========================================= */\r\n\r\n/* basecoat@1.0.2 components/button.css .btn */\r\n/* basecoat@1.0.2 styles/vega.css .btn — mono: `--tw-ring-*` stack flattened to\r\n the ring + shadow slots; the label font/transform are public knobs so a\r\n flavor reaches the shadow build */\r\n[mono-button] > :is(button, a) {\r\n --_mono-button-font-weight: var(--mono-button-font-weight, var(--mono-font-weight-medium));\r\n --_mono-button-text-transform: var(--mono-button-text-transform, none);\r\n --_mono-button-letter-spacing: var(--mono-button-letter-spacing, normal);\r\n\r\n display: inline-flex;\r\n flex-shrink: 0;\r\n align-items: center;\r\n justify-content: var(--_mono-button-justify);\r\n width: var(--_mono-button-width);\r\n position: relative;\r\n white-space: nowrap;\r\n user-select: none;\r\n cursor: pointer;\r\n text-decoration: none;\r\n outline-style: none;\r\n border-radius: var(--_mono-button-radius);\r\n border: var(--mono-border-width) solid var(--_mono-button-border-color);\r\n background-clip: padding-box;\r\n background: var(--_mono-button-bg);\r\n color: var(--_mono-button-color);\r\n box-shadow: var(--_mono-button-ring), var(--_mono-button-shadow);\r\n font-family: inherit;\r\n font-size: var(--mono-text-sm);\r\n line-height: var(--mono-text-sm--lh);\r\n font-weight: var(--_mono-button-font-weight);\r\n text-transform: var(--_mono-button-text-transform);\r\n letter-spacing: var(--_mono-button-letter-spacing);\r\n transition-property: all;\r\n transition-timing-function: var(--mono-ease);\r\n transition-duration: var(--mono-duration);\r\n\r\n /* focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 */\r\n &:focus-visible {\r\n border-color: var(--_mono-button-ring-color);\r\n --_mono-button-ring: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--_mono-button-ring-color) var(--mono-ring-alpha), transparent);\r\n }\r\n\r\n /* aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20\r\n (dark: border /50, ring /40 — carried by the mode tokens) */\r\n &[aria-invalid='true'] {\r\n border-color: var(--mono-mode-invalid-border);\r\n --_mono-button-ring: 0 0 0 var(--mono-ring-width) var(--mono-mode-invalid-ring);\r\n }\r\n\r\n /* active:not-aria-[haspopup]:translate-y-px */\r\n &:active:not([aria-haspopup]):not([mono-disabled]):not(:disabled) {\r\n translate: var(--_mono-button-press-translate);\r\n }\r\n\r\n /* disabled:pointer-events-none disabled:opacity-50 */\r\n &:disabled,\r\n &[mono-disabled] {\r\n pointer-events: none;\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n & svg,\r\n & [mono-icon] {\r\n pointer-events: none;\r\n flex-shrink: 0;\r\n }\r\n}\r\n\r\n/* Every Basecoat hover sits behind `@media (hover: hover)`: no sticky hover on touch. */\r\n@media (hover: hover) {\r\n [mono-button] > :is(button, a):hover:not([mono-disabled]):not(:disabled) {\r\n background: var(--_mono-button-hover-bg);\r\n color: var(--_mono-button-hover-color);\r\n border-color: var(--_mono-button-hover-border-color);\r\n --_mono-button-shadow: var(--_mono-button-hover-shadow);\r\n }\r\n}\r\n\r\n/* =========================================\r\n Sizes — the control height IS the token (see tests/perf/field-heights)\r\n ========================================= */\r\n\r\n/* The unqualified control carries the `md` metrics ON PURPOSE: hand-written\r\n `<div mono-button>` markup that names no size renders exactly like `size=\"md\"`. */\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-size]), .btn[data-size='default'] — h-9 gap-1.5 px-2.5 */\r\n[mono-button]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-md-gap, calc(var(--mono-spacing) * 1.5));\r\n --_mono-button-icon-padding: var(--mono-button-md-icon-padding, calc(var(--mono-spacing) * 2));\r\n min-height: var(--mono-control-height-md);\r\n padding-inline: var(--mono-button-md-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n padding-block: 0;\r\n font-size: var(--mono-button-md-font-size, var(--mono-text-sm));\r\n line-height: var(--mono-button-md-line-height, var(--mono-text-sm--lh));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='xs'] — h-6 gap-1 px-2 text-xs rounded-[min(var(--radius-md),8px)] */\r\n[mono-button][mono-size=\"xs\"] {\r\n --_mono-button-radius-preset: var(--mono-button-xs-radius, min(var(--mono-radius-md), 8px));\r\n}\r\n[mono-button][mono-size=\"xs\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-xs-gap, var(--mono-spacing));\r\n --_mono-button-icon-padding: var(--mono-button-xs-icon-padding, calc(var(--mono-spacing) * 1.5));\r\n min-height: var(--mono-control-height-xs);\r\n padding-inline: var(--mono-button-xs-padding-inline, calc(var(--mono-spacing) * 2));\r\n font-size: var(--mono-button-xs-font-size, var(--mono-text-xs));\r\n line-height: var(--mono-button-xs-line-height, var(--mono-text-xs--lh));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='sm'] — h-8 gap-1 px-2.5 rounded-[min(var(--radius-md),10px)] */\r\n[mono-button][mono-size=\"sm\"] {\r\n --_mono-button-radius-preset: var(--mono-button-sm-radius, min(var(--mono-radius-md), 10px));\r\n}\r\n[mono-button][mono-size=\"sm\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-sm-gap, var(--mono-spacing));\r\n --_mono-button-icon-padding: var(--mono-button-sm-icon-padding, calc(var(--mono-spacing) * 1.5));\r\n min-height: var(--mono-control-height-sm);\r\n padding-inline: var(--mono-button-sm-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n font-size: var(--mono-button-sm-font-size, var(--mono-button-md-font-size, var(--mono-text-sm)));\r\n line-height: var(--mono-button-sm-line-height, var(--mono-button-md-line-height, var(--mono-text-sm--lh)));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='lg'] — h-10 gap-1.5 px-2.5 */\r\n[mono-button][mono-size=\"lg\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-lg-gap, calc(var(--mono-spacing) * 1.5));\r\n --_mono-button-icon-padding: var(--mono-button-lg-icon-padding, calc(var(--mono-spacing) * 2));\r\n min-height: var(--mono-control-height-lg);\r\n padding-inline: var(--mono-button-lg-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n font-size: var(--mono-button-lg-font-size, var(--mono-button-md-font-size, var(--mono-text-sm)));\r\n line-height: var(--mono-button-lg-line-height, var(--mono-button-md-line-height, var(--mono-text-sm--lh)));\r\n}\r\n\r\n/* EXTENSION — xl / xxl continue the grid: h-11 gap-2 px-3 text-base, h-12 gap-2 px-4 text-lg */\r\n[mono-button][mono-size=\"xl\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-xl-gap, calc(var(--mono-spacing) * 2));\r\n --_mono-button-icon-padding: var(--mono-button-xl-icon-padding, calc(var(--mono-spacing) * 2.5));\r\n min-height: var(--mono-control-height-xl);\r\n padding-inline: var(--mono-button-xl-padding-inline, calc(var(--mono-spacing) * 3));\r\n font-size: var(--mono-button-xl-font-size, var(--mono-text-base));\r\n line-height: var(--mono-button-xl-line-height, var(--mono-text-base--lh));\r\n}\r\n[mono-button][mono-size=\"xxl\"]:not([mono-icon-only]) > :is(button, a) {\r\n --_mono-button-gap: var(--mono-button-xxl-gap, calc(var(--mono-spacing) * 2));\r\n --_mono-button-icon-padding: var(--mono-button-xxl-icon-padding, calc(var(--mono-spacing) * 3));\r\n min-height: var(--mono-control-height-xxl);\r\n padding-inline: var(--mono-button-xxl-padding-inline, calc(var(--mono-spacing) * 4));\r\n font-size: var(--mono-button-xxl-font-size, var(--mono-text-lg));\r\n line-height: var(--mono-button-xxl-line-height, var(--mono-text-lg--lh));\r\n}\r\n\r\n/* has-[[data-icon='inline-start']]:pl-2 / has-[[data-icon='inline-end']]:pr-2\r\n (xs/sm: 1.5). Our icon box is the first or last child of `[mono-content]`\r\n depending on `icon-position`; `:not([mono-empty])` is the light /\r\n shadow spelling of \"there is something in it\" — an icon OR the spinner that\r\n replaces it, so both builds tighten the same side while loading. */\r\n[mono-button] > :is(button, a):has(> [mono-content] > [mono-icon]:first-child:not([mono-empty])) {\r\n padding-left: var(--_mono-button-icon-padding);\r\n}\r\n[mono-button] > :is(button, a):has(> [mono-content] > [mono-icon]:last-child:not([mono-empty])) {\r\n padding-right: var(--_mono-button-icon-padding);\r\n}\r\n\r\n/* Icon-only: a square of the control height.\r\n basecoat@1.0.2 styles/vega.css .btn[data-size='icon'] — size-9 (md) */\r\n[mono-button][mono-icon-only] > :is(button, a) {\r\n width: var(--mono-control-height-md);\r\n height: var(--mono-control-height-md);\r\n padding: 0;\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon-xs'] — size-6 rounded-[min(var(--radius-md),8px)] */\r\n[mono-button][mono-icon-only][mono-size=\"xs\"] > :is(button, a) {\r\n width: var(--mono-control-height-xs);\r\n height: var(--mono-control-height-xs);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon-sm'] — size-8 rounded-[min(var(--radius-md),10px)] */\r\n[mono-button][mono-icon-only][mono-size=\"sm\"] > :is(button, a) {\r\n width: var(--mono-control-height-sm);\r\n height: var(--mono-control-height-sm);\r\n}\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-size='icon-lg'] — size-10 */\r\n[mono-button][mono-icon-only][mono-size=\"lg\"] > :is(button, a) {\r\n width: var(--mono-control-height-lg);\r\n height: var(--mono-control-height-lg);\r\n}\r\n/* EXTENSION — size-11 / size-12 */\r\n[mono-button][mono-icon-only][mono-size=\"xl\"] > :is(button, a) {\r\n width: var(--mono-control-height-xl);\r\n height: var(--mono-control-height-xl);\r\n}\r\n[mono-button][mono-icon-only][mono-size=\"xxl\"] > :is(button, a) {\r\n width: var(--mono-control-height-xxl);\r\n height: var(--mono-control-height-xxl);\r\n}\r\n\r\n/* =========================================\r\n Content\r\n ========================================= */\r\n\r\n[mono-button] [mono-content] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--_mono-button-gap, calc(var(--mono-spacing) * 1.5));\r\n min-width: 0;\r\n line-height: inherit;\r\n}\r\n\r\n[mono-button] [mono-text] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 0;\r\n position: relative;\r\n transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n/* The icon box. `[&_svg:not([class*='size-'])]:size-4` (xs: size-3) — our\r\n icons are UnoCSS `i-*` mask spans as often as SVGs, so the box itself is\r\n sized and whatever is inside fills it. Every rule is scoped under\r\n [mono-button] so a consumer's own [mono-icon] elsewhere is untouched. */\r\n[mono-button] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-md-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4)));\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 auto;\r\n width: var(--_mono-button-icon-size);\r\n height: var(--_mono-button-icon-size);\r\n line-height: 1;\r\n}\r\n\r\n[mono-button][mono-size=\"xs\"] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-xs-icon-size, calc(var(--mono-spacing) * 3));\r\n}\r\n[mono-button][mono-icon-only]:is(:not([mono-size]), [mono-size=\"md\"]) [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-icononly-md-icon-size, var(--mono-button-md-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4))));\r\n}\r\n[mono-button][mono-size=\"sm\"] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-sm-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4)));\r\n}\r\n[mono-button][mono-size=\"lg\"] [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-lg-icon-size, var(--mono-button-icon-size, calc(var(--mono-spacing) * 4)));\r\n}\r\n\r\n/* EXTENSION — the two larger steps get a size-5 glyph */\r\n[mono-button]:is([mono-size=\"xl\"], [mono-size=\"xxl\"]) [mono-icon] {\r\n --_mono-button-icon-size: var(--mono-button-xl-icon-size, calc(var(--mono-spacing) * 5));\r\n}\r\n\r\n[mono-button] [mono-icon] > svg,\r\n[mono-button] [mono-icon] > span,\r\n[mono-button] [mono-icon] > * {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n/* The SHADOW build's icon arrives through a `<slot>`; `[mono-icon] > svg`\r\n cannot reach assigned nodes. Inert in the light build. */\r\n[mono-button] [mono-icon] ::slotted(svg),\r\n[mono-button] [mono-icon] ::slotted(*) {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n[mono-button] [mono-icon][mono-hidden] {\r\n display: none !important;\r\n}\r\n\r\n/* =========================================\r\n Badge (mono extension; painted with the role tokens) — `mono-badge` takes the\r\n `badge-color` value: red (default) | green | orange | cobalt\r\n ========================================= */\r\n\r\n[mono-button] > :is(button, a) [mono-badge] {\r\n position: absolute;\r\n top: calc(var(--mono-spacing) * -1);\r\n right: calc(var(--mono-spacing) * -1);\r\n min-width: calc(var(--mono-spacing) * 5);\r\n height: calc(var(--mono-spacing) * 5);\r\n padding: 0 calc(var(--mono-spacing) * 1.5);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: var(--mono-radius-full);\r\n font-size: var(--mono-text-xs);\r\n line-height: 1;\r\n font-weight: var(--mono-font-weight-semibold);\r\n pointer-events: none;\r\n}\r\n\r\n[mono-button] [mono-badge]:is(:not([mono-badge=\"\"]), [mono-badge=\"red\"]):not([mono-badge=\"green\"]):not([mono-badge=\"orange\"]):not([mono-badge=\"cobalt\"]) {\r\n background-color: var(--_mono-button-danger);\r\n color: var(--_mono-button-danger-foreground);\r\n}\r\n\r\n[mono-button] [mono-badge=\"green\"] {\r\n background-color: var(--_mono-button-success);\r\n color: var(--_mono-button-success-foreground);\r\n}\r\n\r\n[mono-button] [mono-badge=\"orange\"] {\r\n background-color: var(--_mono-button-warning);\r\n color: var(--_mono-button-warning-foreground);\r\n}\r\n\r\n[mono-button] [mono-badge=\"cobalt\"] {\r\n background-color: var(--_mono-button-primary);\r\n color: var(--_mono-button-primary-foreground);\r\n}\r\n\r\n/* =========================================\r\n Colours\r\n -----------------------------------------\r\n `mono-color` × `mono-variant` (solid | outline | tonal | text). Two kinds of\r\n colour:\r\n\r\n hues primary success danger warning info teal purple dark\r\n ink = the colour, fill = the colour, on-fill = `--<c>-foreground`\r\n surfaces secondary (shadcn's muted surface — NOT a second brand hue)\r\n light (the page background)\r\n\r\n Each hue publishes its palette into `--_mono-button-c*`, and ONE rule per\r\n variant does the styling; the two layers set disjoint properties, so their\r\n order does not matter. No attribute = the default (primary / solid).\r\n ========================================= */\r\n\r\n[mono-button]:is(:not([mono-color]), [mono-color=\"primary\"]) {\r\n --_mono-button-c: var(--_mono-button-primary);\r\n --_mono-button-c-foreground: var(--_mono-button-primary-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-primary-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-primary-soft-hover);\r\n}\r\n[mono-button][mono-color=\"success\"] {\r\n --_mono-button-c: var(--_mono-button-success);\r\n --_mono-button-c-foreground: var(--_mono-button-success-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-success-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-success-soft-hover);\r\n}\r\n[mono-button][mono-color=\"danger\"] {\r\n --_mono-button-c: var(--_mono-button-danger);\r\n --_mono-button-c-foreground: var(--_mono-button-danger-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-danger-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-danger-soft-hover);\r\n}\r\n[mono-button][mono-color=\"warning\"] {\r\n --_mono-button-c: var(--_mono-button-warning);\r\n --_mono-button-c-foreground: var(--_mono-button-warning-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-warning-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-warning-soft-hover);\r\n}\r\n[mono-button][mono-color=\"info\"] {\r\n --_mono-button-c: var(--_mono-button-info);\r\n --_mono-button-c-foreground: var(--_mono-button-info-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-info-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-info-soft-hover);\r\n}\r\n[mono-button][mono-color=\"teal\"] {\r\n --_mono-button-c: var(--_mono-button-teal);\r\n --_mono-button-c-foreground: var(--_mono-button-teal-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-teal-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-teal-soft-hover);\r\n}\r\n[mono-button][mono-color=\"purple\"] {\r\n --_mono-button-c: var(--_mono-button-purple);\r\n --_mono-button-c-foreground: var(--_mono-button-purple-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-purple-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-purple-soft-hover);\r\n}\r\n[mono-button][mono-color=\"dark\"] {\r\n --_mono-button-c: var(--_mono-button-dark);\r\n --_mono-button-c-foreground: var(--_mono-button-dark-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-dark-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-dark-soft-hover);\r\n}\r\n/* neutral — the mid grey with white ink (chip / card have it; the form demos'\r\n Discard buttons used it and silently painted primary). */\r\n[mono-button][mono-color=\"neutral\"] {\r\n --_mono-button-c: var(--_mono-button-neutral);\r\n --_mono-button-c-foreground: var(--_mono-button-neutral-foreground);\r\n --_mono-button-c-soft: var(--_mono-button-neutral-soft);\r\n --_mono-button-c-soft-hover: var(--_mono-button-neutral-soft-hover);\r\n}\r\n\r\n/* ── solid ────────────────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn:not([data-variant]), .btn[data-variant='primary']\r\n — bg-primary text-primary-foreground hover:bg-primary/80, generalised per hue */\r\n[mono-button]:is(:not([mono-variant]), [mono-variant=\"solid\"]):is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: var(--_mono-button-c);\r\n --_mono-button-color-preset: var(--_mono-button-c-foreground);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, var(--_mono-button-c) 80%, transparent);\r\n --_mono-button-hover-color-preset: var(--_mono-button-c-foreground);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='secondary']\r\n — bg-secondary text-secondary-foreground hover:bg-[color-mix(in oklch,var(--secondary),var(--foreground) 5%)] */\r\n[mono-button]:is(:not([mono-variant]), [mono-variant=\"solid\"])[mono-color=\"secondary\"] {\r\n --_mono-button-bg-preset: var(--_mono-button-secondary);\r\n --_mono-button-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklch, var(--_mono-button-secondary), var(--_mono-button-text) 5%);\r\n --_mono-button-hover-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='outline']\r\n — border-border bg-background shadow-xs hover:bg-muted hover:text-foreground\r\n dark:border-input dark:bg-input/30 dark:hover:bg-input/50 (mode tokens) */\r\n[mono-button]:is(:not([mono-variant]), [mono-variant=\"solid\"])[mono-color=\"light\"] {\r\n --_mono-button-bg-preset: var(--mono-button-outline-bg, var(--mono-mode-outline-bg));\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--mono-button-outline-hover-bg, var(--mono-mode-surface-hover));\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n}\r\n\r\n/* ── outline ──────────────────────────────────────────────────────────── */\r\n\r\n/* EXTENSION — the outline pattern inked in the hue: border + label in the\r\n colour, hover lays the tonal tint under it (Basecoat never inverts to a\r\n solid fill on hover). */\r\n[mono-button][mono-variant=\"outline\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-c);\r\n --_mono-button-border-color-preset: var(--_mono-button-c);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--_mono-button-c-soft);\r\n --_mono-button-hover-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-ring-color-preset: var(--_mono-button-c);\r\n}\r\n\r\n/* EXTENSION — outline on the two surfaces: the vendor outline with a neutral border */\r\n[mono-button][mono-variant=\"outline\"][mono-color=\"secondary\"] {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--_mono-button-secondary);\r\n --_mono-button-hover-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n}\r\n[mono-button][mono-variant=\"outline\"][mono-color=\"light\"] {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n --_mono-button-hover-bg-preset: var(--mono-mode-surface-hover);\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-hover-shadow-preset: var(--mono-button-outline-shadow, var(--mono-shadow-xs));\r\n}\r\n\r\n/* ── tonal ────────────────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='destructive']\r\n — bg-destructive/10 text-destructive hover:bg-destructive/20\r\n dark:bg-destructive/20 dark:hover:bg-destructive/30\r\n focus-visible:border-destructive/40 focus-visible:ring-destructive/20\r\n generalised per hue; the label keeps its colour so tonal never reads solid */\r\n[mono-button][mono-variant=\"tonal\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: var(--_mono-button-c-soft);\r\n --_mono-button-color-preset: var(--_mono-button-c);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--_mono-button-c-soft-hover);\r\n --_mono-button-hover-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n --_mono-button-ring-color-preset: var(--_mono-button-c);\r\n}\r\n[mono-button][mono-variant=\"tonal\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) > :is(button, a):focus-visible {\r\n border-color: color-mix(in oklab, var(--_mono-button-c) 40%, transparent);\r\n --_mono-button-ring: 0 0 0 var(--mono-ring-width) color-mix(in oklab, var(--_mono-button-c) var(--_mono-button-tint-hover), transparent);\r\n}\r\n\r\n/* EXTENSION — tonal on the surfaces: the secondary / muted fill, hover at 80% */\r\n[mono-button][mono-variant=\"tonal\"][mono-color=\"secondary\"] {\r\n --_mono-button-bg-preset: var(--_mono-button-secondary);\r\n --_mono-button-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, var(--_mono-button-secondary) 80%, transparent);\r\n --_mono-button-hover-color-preset: var(--_mono-button-secondary-foreground);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n[mono-button][mono-variant=\"tonal\"][mono-color=\"light\"] {\r\n --_mono-button-bg-preset: var(--_mono-button-muted);\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, var(--_mono-button-muted) 80%, transparent);\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* ── text (ghost) ─────────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='ghost']\r\n — hover:bg-muted hover:text-foreground dark:hover:bg-muted/50\r\n generalised: a hue keeps its ink and hovers onto its own tint. The two\r\n `--mono-button-plain-*` reads are public knobs a flavor sets (Material's\r\n wash-only hover); they must stay literal `var(--mono-button-…)` here. */\r\n[mono-button][mono-variant=\"text\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-c);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--mono-button-plain-hover-bg, var(--_mono-button-c-soft));\r\n --_mono-button-hover-color-preset: var(--_mono-button-c);\r\n --_mono-button-hover-border-color-preset: var(--mono-button-plain-hover-border-color, transparent);\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n/* ghost verbatim for the two surfaces */\r\n[mono-button][mono-variant=\"text\"]:is([mono-color=\"secondary\"], [mono-color=\"light\"]) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-text);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--mono-button-plain-hover-bg, var(--mono-mode-ghost-hover));\r\n --_mono-button-hover-color-preset: var(--_mono-button-text);\r\n --_mono-button-hover-border-color-preset: var(--mono-button-plain-hover-border-color, transparent);\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n}\r\n\r\n/* A text button has no chrome to anchor the focus ring against, so it also\r\n takes its hover look on keyboard focus — the ring still draws on top. */\r\n[mono-button][mono-variant=\"text\"] > :is(button, a):focus-visible {\r\n background: var(--_mono-button-hover-bg);\r\n color: var(--_mono-button-hover-color);\r\n}\r\n\r\n/* Pressing a text button carries it one rung further, onto the hover tint. */\r\n[mono-button][mono-variant=\"text\"]:is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) > :is(button, a):active:not([mono-disabled]):not(:disabled) {\r\n background: var(--_mono-button-c-soft-hover);\r\n}\r\n\r\n/* =========================================\r\n Special types\r\n ========================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .btn[data-variant='link'] — text-primary underline-offset-4 hover:underline */\r\n[mono-button][mono-link] > :is(button, a) {\r\n --_mono-button-bg-preset: transparent;\r\n --_mono-button-color-preset: var(--_mono-button-primary);\r\n --_mono-button-border-color-preset: transparent;\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: transparent;\r\n --_mono-button-hover-color-preset: var(--_mono-button-primary);\r\n --_mono-button-hover-border-color-preset: transparent;\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n text-underline-offset: 4px;\r\n text-decoration-line: var(--mono-button-link-decoration, none);\r\n}\r\n@media (hover: hover) {\r\n [mono-button][mono-link] > :is(button, a):hover {\r\n text-decoration-line: underline;\r\n }\r\n}\r\n\r\n/* EXTENSION — dashed: the outline surface with a dashed edge, primary ink */\r\n[mono-button][mono-dashed] > :is(button, a) {\r\n --_mono-button-bg-preset: var(--mono-mode-outline-bg);\r\n --_mono-button-color-preset: var(--_mono-button-primary);\r\n --_mono-button-border-color-preset: var(--_mono-button-border);\r\n --_mono-button-shadow-preset: 0 0 #0000;\r\n --_mono-button-hover-bg-preset: var(--_mono-button-primary-soft);\r\n --_mono-button-hover-color-preset: var(--_mono-button-primary);\r\n --_mono-button-hover-border-color-preset: var(--_mono-button-primary);\r\n --_mono-button-hover-shadow-preset: 0 0 #0000;\r\n border-style: dashed;\r\n}\r\n\r\n/* EXTENSION — glass: a translucent white surface for painted backgrounds */\r\n[mono-button][mono-glass] > :is(button, a) {\r\n --_mono-button-bg-preset: color-mix(in oklab, white 18%, transparent);\r\n --_mono-button-color-preset: white;\r\n --_mono-button-border-color-preset: color-mix(in oklab, white 30%, transparent);\r\n --_mono-button-shadow-preset: var(--mono-shadow-md);\r\n --_mono-button-hover-bg-preset: color-mix(in oklab, white 28%, transparent);\r\n --_mono-button-hover-color-preset: white;\r\n --_mono-button-hover-border-color-preset: color-mix(in oklab, white 50%, transparent);\r\n --_mono-button-hover-shadow-preset: var(--mono-shadow-lg);\r\n backdrop-filter: blur(10px);\r\n}\r\n\r\n/* =========================================\r\n Rounded — one prop for corners, on the Basecoat radius ladder\r\n -----------------------------------------\r\n Sets the PRESET rather than `border-radius`, so a consumer's own\r\n `--mono-button-radius` still wins without anything here needing\r\n `!important`. Steps map onto Basecoat's ladder: xs = radius-sm … xxl = 4xl.\r\n ========================================= */\r\n\r\n[mono-button][mono-rounded=\"none\"] { --_mono-button-radius-preset: 0; }\r\n[mono-button][mono-rounded=\"xs\"] { --_mono-button-radius-preset: var(--mono-radius-sm); }\r\n[mono-button][mono-rounded=\"sm\"] { --_mono-button-radius-preset: var(--mono-radius-md); }\r\n[mono-button][mono-rounded=\"md\"] { --_mono-button-radius-preset: var(--mono-radius-lg); }\r\n[mono-button][mono-rounded=\"lg\"] { --_mono-button-radius-preset: var(--mono-radius-xl); }\r\n[mono-button][mono-rounded=\"xl\"] { --_mono-button-radius-preset: var(--mono-radius-2xl); }\r\n[mono-button][mono-rounded=\"xxl\"] { --_mono-button-radius-preset: var(--mono-radius-4xl); }\r\n[mono-button][mono-rounded=\"full\"] { --_mono-button-radius-preset: var(--mono-radius-full); }\r\n\r\n/* =========================================\r\n Loading\r\n ========================================= */\r\n\r\n[mono-button][mono-loading] > :is(button, a) {\r\n position: relative;\r\n pointer-events: none;\r\n opacity: 0.85;\r\n}\r\n\r\n/* `waiting` = self-driven loading that is still only WAITING (the debounce\r\n timer or the throttle queue). It LOOKS like any other loading — only the\r\n clicks are let back through on purpose: a debounce has to SEE the repeat\r\n clicks to reset its timer (`_handleClick` swallows them). Not `mono-pending`:\r\n that attribute is the skeleton addon's global selector and would paint the\r\n whole button as a skeleton block. */\r\n[mono-button][mono-loading][mono-waiting] > :is(button, a) {\r\n pointer-events: auto;\r\n}\r\n\r\n/* ── The spinner — drawn INSIDE the icon box, so it replaces the icon, follows\r\n `icon-position`, and cannot change the button's height (the box was already\r\n reserved; tests/perf/field-heights asserts exactly that). ── */\r\n\r\n[mono-button] [mono-icon][mono-spinning] > *,\r\n[mono-button] [mono-icon][mono-spinning] ::slotted(*) {\r\n visibility: hidden;\r\n}\r\n\r\n/* A button with no icon still reserves the box while spinning; `mono-empty`\r\n collapses it the rest of the time (the shadow build marks an unassigned slot\r\n the same way — icon and affix zones alike). */\r\n[mono-button] [mono-icon][mono-empty],\r\n[mono-button] [mono-affix][mono-empty] {\r\n display: none;\r\n}\r\n\r\n[mono-button] [mono-icon][mono-spinning] {\r\n position: relative;\r\n}\r\n\r\n[mono-button] [mono-icon][mono-spinning]::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border: 2px solid currentColor;\r\n border-right-color: transparent;\r\n border-radius: 50%;\r\n animation: mono-button-spin 0.65s linear infinite;\r\n}\r\n\r\n[mono-button]:is([mono-size=\"xs\"], [mono-size=\"sm\"]) [mono-icon][mono-spinning]::after {\r\n border-width: 1.5px;\r\n}\r\n\r\n@keyframes mono-button-spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* =========================================\r\n Sizing — width/height set on the host; `sized` makes the wrapper + control\r\n fill it. Icon-only is included so a fixed square (a FAB) works.\r\n ========================================= */\r\n\r\n[mono-button][mono-sized] {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n[mono-button][mono-sized] > :is(button, a) {\r\n width: 100%;\r\n height: 100%;\r\n flex: 1;\r\n justify-content: center;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border-width: 0;\r\n}\r\n\r\n/* =========================================\r\n Media\r\n ========================================= */\r\n\r\n@media (prefers-contrast: high) {\r\n [mono-button] > :is(button, a) {\r\n border-width: 2px;\r\n }\r\n\r\n /* Outline, tonal and text are low-contrast by design — force a solid fill in\r\n the hue. `light` / `secondary` have no hue to fill with. */\r\n [mono-button]:is([mono-variant=\"outline\"], [mono-variant=\"tonal\"], [mono-variant=\"text\"]):is(:not([mono-color]), [mono-color=\"primary\"], [mono-color=\"success\"], [mono-color=\"danger\"], [mono-color=\"warning\"], [mono-color=\"info\"], [mono-color=\"teal\"], [mono-color=\"purple\"], [mono-color=\"dark\"], [mono-color=\"neutral\"]) > :is(button, a) {\r\n background: var(--_mono-button-c);\r\n color: var(--_mono-button-c-foreground);\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n [mono-button] > :is(button, a) {\r\n transition: none;\r\n }\r\n\r\n [mono-button] > :is(button, a):active {\r\n translate: none;\r\n }\r\n\r\n [mono-button] [mono-icon][mono-spinning]::after {\r\n animation: none;\r\n }\r\n}\r\n\r\n/* =========================================================================\r\n Prepend / append affixes ≡ .button-group siblings\r\n -------------------------------------------------------------------------\r\n `slot=\"prepend\"` / `slot=\"append\"` render as `[mono-affix]` SIBLINGS of the native control,\r\n never inside it (a `<button>` may not contain interactive content). The zones\r\n paint themselves from the same `--_mono-button-*` variables the control\r\n uses — which is why the colour rules above declare them on the ROOT.\r\n ========================================================================= */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .button-group > :is(span, label, output) — display:flex items-center */\r\n[mono-button] > [mono-affix] {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 0 0 auto;\r\n align-self: stretch;\r\n box-sizing: border-box;\r\n background: var(--_mono-button-bg);\r\n color: var(--_mono-button-color);\r\n border: var(--mono-border-width) solid var(--_mono-button-border-color);\r\n padding: 0 var(--mono-button-md-padding-inline, calc(var(--mono-spacing) * 2.5));\r\n gap: var(--mono-spacing);\r\n line-height: 1;\r\n cursor: pointer;\r\n}\r\n\r\n/* The light build re-appends slotted nodes into a `[data-mono-slot]` element;\r\n blockify it so an inline icon span actually renders its box. */\r\n[mono-button] > [mono-affix] > [data-mono-slot] {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* basecoat@1.0.2 components/button-group.css .button-group — the group shares\r\n ONE ring: `*:not(:first-child)` squares its start corners and drops its start\r\n border, `*:not(:last-child)` squares its end corners.\r\n `:not([mono-empty])` is load-bearing: the SHADOW build always renders the\r\n zone (its `<slot>` must stay in the tree) and marks it `mono-empty`; `:has()`\r\n matches on presence, which `display: none` does not undo. */\r\n[mono-button]:has(> [mono-affix=\"prepend\"]:not([mono-empty])) > :is(button, a) {\r\n border-start-start-radius: 0;\r\n border-end-start-radius: 0;\r\n border-inline-start-width: 0;\r\n}\r\n\r\n[mono-button]:has(> [mono-affix=\"append\"]:not([mono-empty])) > :is(button, a) {\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end-width: 0;\r\n}\r\n\r\n[mono-button] > [mono-affix=\"prepend\"] {\r\n border-start-start-radius: var(--_mono-button-radius);\r\n border-end-start-radius: var(--_mono-button-radius);\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end-width: 0;\r\n}\r\n\r\n[mono-button] > [mono-affix=\"append\"] {\r\n border-start-end-radius: var(--_mono-button-radius);\r\n border-end-end-radius: var(--_mono-button-radius);\r\n border-start-start-radius: 0;\r\n border-end-start-radius: 0;\r\n border-inline-start-width: 0;\r\n}\r\n\r\n/* ── The divider — `hr[role='separator']`: restores the one edge the rules\r\n above removed, single-width, the ring's own colour. */\r\n[mono-button] > [mono-affix=\"prepend\"][mono-divider] {\r\n border-inline-end-width: var(--mono-border-width);\r\n}\r\n\r\n[mono-button] > [mono-affix=\"append\"][mono-divider] {\r\n border-inline-start-width: var(--mono-border-width);\r\n}\r\n\r\n[mono-button] > [mono-affix][mono-disabled] {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Per-size padding, mirroring the control's own steps. */\r\n[mono-button][mono-size=\"xs\"] > [mono-affix] { padding: 0 var(--mono-button-xs-padding-inline, calc(var(--mono-spacing) * 2)); }\r\n[mono-button][mono-size=\"sm\"] > [mono-affix] { padding: 0 var(--mono-button-sm-padding-inline, calc(var(--mono-spacing) * 2.5)); }\r\n[mono-button][mono-size=\"lg\"] > [mono-affix] { padding: 0 var(--mono-button-lg-padding-inline, calc(var(--mono-spacing) * 2.5)); }\r\n[mono-button][mono-size=\"xl\"] > [mono-affix] { padding: 0 var(--mono-button-xl-padding-inline, calc(var(--mono-spacing) * 3)); }\r\n[mono-button][mono-size=\"xxl\"] > [mono-affix] { padding: 0 var(--mono-button-xxl-padding-inline, calc(var(--mono-spacing) * 4)); }\r\n";
599
599
  //#endregion
600
600
  //#region src/components/button/mono-button.shadow.ts
601
601
  var SHADOW_EXTRA_CSS = "";
package/dist/{mono-data-chart-ChU4Ii3p.js → mono-data-chart-CEv29_NS.js} RENAMED
@@ -1,7 +1,8 @@
1
1
  import { n as isPath, t as getFieldValue } from "./field-path-C92eGLg3.js";
2
2
  import { r as readAllRows } from "./data-source-read-DL88aH8t.js";
3
3
  import { n as andPredicates, r as compileFilterPredicate, t as andFilters } from "./filter-eval-DIfU2EAn.js";
4
- import { a as resolveDataSourceOptions, d as createApplyGate, f as isRolledUp, h as monoArraySource, i as normalizeSortList, n as extraLoadOptions, o as toList, p as loadApply, r as mergeDataSourceOptions, u as summaryFilterOf } from "./data-source-options-CQSTZHPE.js";
4
+ import { n as describeError, o as isCanceled } from "./normalize-error-Gcgmgh5i.js";
5
+ import { a as resolveDataSourceOptions, d as createApplyGate, f as isRolledUp, h as monoArraySource, i as normalizeSortList, n as extraLoadOptions, o as toList, p as loadApply, r as mergeDataSourceOptions, u as summaryFilterOf } from "./data-source-options-Jqj7LU3Z.js";
5
6
  import { t as arrayToODataString } from "./filter-odata-C1vSGZaY.js";
6
7
  import { t as createNotifier } from "./notifier-CE4yxMUQ.js";
7
8
  //#region src/components/chart/chart-odata.ts
@@ -383,7 +384,8 @@ function monoChart(source = null, opts = {}) {
383
384
  }
384
385
  const onChanged = () => {
385
386
  if (drainDepth > 0) return;
386
- sync();
387
+ if (opts.loadAll === false) succeed();
388
+ sync().catch(() => {});
387
389
  };
388
390
  /**
389
391
  * Publish the loading state, notifying only on a real change.
@@ -406,11 +408,26 @@ function monoChart(source = null, opts = {}) {
406
408
  syncLoading();
407
409
  notify();
408
410
  };
411
+ /** Record a load failure for the element to paint. Cancelled loads are not failures. */
412
+ function fail(err) {
413
+ if (isCanceled(err)) return;
414
+ ctrl.error = describeError(err);
415
+ notify();
416
+ }
417
+ /** A load answered: the chart has data and any earlier failure is over. */
418
+ function succeed() {
419
+ ctrl.hasLoaded = true;
420
+ ctrl.error = null;
421
+ }
422
+ const onLoadError = (err) => {
423
+ syncLoading();
424
+ fail(err ?? /* @__PURE__ */ new Error("Request failed"));
425
+ };
409
426
  function detach() {
410
427
  if (!bound) return;
411
428
  bound.off("changed", onChanged);
412
429
  bound.off("loadingChanged", onLoadingChanged);
413
- bound.off("loadError", onLoadingChanged);
430
+ bound.off("loadError", onLoadError);
414
431
  bound = null;
415
432
  }
416
433
  let dsOptionsSource = opts.dataSourceOptions;
@@ -508,8 +525,10 @@ function monoChart(source = null, opts = {}) {
508
525
  preAggregated = false;
509
526
  resolveBase();
510
527
  if (!bound) rows = [];
511
- else if (opts.loadAll === false) rows = [...bound.items?.() ?? []];
512
- else {
528
+ else if (opts.loadAll === false) {
529
+ rows = [...bound.items?.() ?? []];
530
+ if (rows.length) succeed();
531
+ } else {
513
532
  drainDepth++;
514
533
  syncLoading();
515
534
  try {
@@ -531,6 +550,10 @@ function monoChart(source = null, opts = {}) {
531
550
  });
532
551
  rows = isArray && typeof filter === "function" ? drained.filter(filter) : drained;
533
552
  }
553
+ succeed();
554
+ } catch (err) {
555
+ fail(err);
556
+ throw err;
534
557
  } finally {
535
558
  drainDepth--;
536
559
  syncLoading();
@@ -545,6 +568,7 @@ function monoChart(source = null, opts = {}) {
545
568
  detach();
546
569
  raw = next;
547
570
  rows = [];
571
+ succeed();
548
572
  ctrl.items = rows;
549
573
  ctrl.dataSource = null;
550
574
  project();
@@ -557,14 +581,16 @@ function monoChart(source = null, opts = {}) {
557
581
  detach();
558
582
  bound = src;
559
583
  ctrl.dataSource = src;
584
+ ctrl.hasLoaded = false;
585
+ ctrl.error = null;
560
586
  if (!src) {
561
- sync();
587
+ sync().catch(() => {});
562
588
  return;
563
589
  }
564
590
  src.on("changed", onChanged);
565
591
  src.on("loadingChanged", onLoadingChanged);
566
- src.on("loadError", onLoadingChanged);
567
- sync();
592
+ src.on("loadError", onLoadError);
593
+ sync().catch(() => {});
568
594
  }
569
595
  /**
570
596
  * Load through `monoOdataFetch`.
@@ -609,6 +635,10 @@ function monoChart(source = null, opts = {}) {
609
635
  if (res?.error) throw new Error(res.error.message ?? "odata request failed");
610
636
  rows = res?.data ?? [];
611
637
  preAggregated = request.aggregated;
638
+ succeed();
639
+ } catch (err) {
640
+ fail(err);
641
+ throw err;
612
642
  } finally {
613
643
  setLoading(false);
614
644
  }
@@ -627,7 +657,13 @@ function monoChart(source = null, opts = {}) {
627
657
  if (opts.loadAll === false && bound?.load) {
628
658
  resolveBase();
629
659
  applyBaseToSource(bound);
630
- await bound.load();
660
+ try {
661
+ await bound.load();
662
+ succeed();
663
+ } catch (err) {
664
+ fail(err);
665
+ throw err;
666
+ }
631
667
  }
632
668
  await sync();
633
669
  } finally {
@@ -680,6 +716,8 @@ function monoChart(source = null, opts = {}) {
680
716
  const ctrl = {
681
717
  items: rows,
682
718
  loading: false,
719
+ error: null,
720
+ hasLoaded: false,
683
721
  type: opts.type ?? "bar",
684
722
  dataSource: null,
685
723
  get instance() {
@@ -705,6 +743,11 @@ function monoChart(source = null, opts = {}) {
705
743
  bind,
706
744
  reload,
707
745
  refresh: reload,
746
+ async retry() {
747
+ ctrl.error = null;
748
+ notify();
749
+ await reload().catch(() => {});
750
+ },
708
751
  setDataSourceOptions,
709
752
  setOdataOptions,
710
753
  resolvedDataSourceOptions,
@@ -729,9 +772,7 @@ function monoChart(source = null, opts = {}) {
729
772
  };
730
773
  if (source) bind(source);
731
774
  else project();
732
- if (!source && opts.odata?.url) loadOdata().catch((err) => {
733
- console.error("[mono-chart] odata load failed:", err);
734
- });
775
+ if (!source && opts.odata?.url) loadOdata().catch(() => {});
735
776
  return ctrl;
736
777
  }
737
778
  //#endregion
package/dist/{mono-data-dropdown-BAUl58kW.js → mono-data-dropdown-Wnoke6zO.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { t as monoDataGrid } from "./mono-data-grid-Db80FzdZ.js";
1
+ import { t as monoDataGrid } from "./mono-data-grid-YjR3n9Ar.js";
2
2
  import { t as createNotifier } from "./notifier-CE4yxMUQ.js";
3
3
  //#region src/components/dropdown-table/mono-data-dropdown.ts
4
4
  function monoDataDropdown(source = null, opts = {}) {