@mono-lit/helper 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,16 +1,16 @@
 import { a as parseFieldPath, c as toODataClause, l as toODataSelector, n as isPath, r as mergePatch, s as setFieldValue, t as getFieldValue } from "./field-path-C92eGLg3.js";
 import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-DL88aH8t.js";
-import { a as isFoldableSearch, c as plainSearchFields, d as searchRemoteFilter, f as searchRowPredicate, i as SEARCH_FIELDS_KEYS, l as readSearchField, n as DEFAULT_SEARCH_OPERATION, o as mergeSearchFields, r as MonoSourceSearch, s as parseSearchValue, u as resolveSearchFields } from "./data-search-Bwo5bg8K.js";
-import { h as monoArraySource } from "./data-source-options-CQSTZHPE.js";
-import { c as DEFAULT_ERROR_MESSAGES, d as normalizeError, f as resolveErrorMessages, l as describeError, p as setErrorMessages, t as monoDataGrid, u as errorStatus } from "./mono-data-grid-Db80FzdZ.js";
+import { _ as plainSearchFields, b as searchRemoteFilter, c as resolveErrorMessages, d as DEFAULT_SEARCH_OPERATION, f as MonoSourceSearch, g as parseSearchValue, h as mergeSearchFields, l as setErrorMessages, m as isFoldableSearch, n as describeError, p as SEARCH_FIELDS_KEYS, r as errorStatus, s as normalizeError, t as DEFAULT_ERROR_MESSAGES, v as readSearchField, x as searchRowPredicate, y as resolveSearchFields } from "./normalize-error-Gcgmgh5i.js";
+import { h as monoArraySource } from "./data-source-options-Jqj7LU3Z.js";
 import { t as resolveMaybeReactive } from "./reactive-D3EERqgO.js";
+import { t as monoDataGrid } from "./mono-data-grid-YjR3n9Ar.js";
 import { d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "./filter-odata-C1vSGZaY.js";
 import { t as monoFilterBuilder } from "./filter-builder-Bke3qOgJ.js";
 import { a as resetMonoUI, g as resetMonoSkeleton, i as getMonoUIStatus, n as createMonoUI, o as getMonoSkeletonStatus, r as getMonoUI, s as isMonoSsrApp } from "./mono-ui-CPV7rrdo.js";
 import { t as monoForm } from "./mono-form-controller-5PfsU4qa.js";
 import { t as monoModal } from "./mono-modal-controller-BMO3n3rP.js";
-import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-ChU4Ii3p.js";
-import { t as monoDataDropdown } from "./mono-data-dropdown-BAUl58kW.js";
-import { a as resetMonoTooltip, n as createMonoTooltip, o as controlMonoTooltip, r as destroyAllMonoTooltips, s as monoTooltip, u as getMonoTooltipGlobal } from "./tooltip-CysgRgBi.js";
-import { _ as DEFAULT_FLAVOR, a as flavors, b as themePresets, c as getCurrentFlavor, d as getThemeData, f as isValidFlavor, g as themes, h as resetTheme, i as createThemeClass, l as getCurrentTheme, m as resetFlavor, n as applyTheme, o as getAllFlavors, p as isValidTheme, r as createFlavorClass, s as getAllThemes, t as applyFlavor, u as getFlavorData, v as DEFAULT_THEME, y as flavorPresets } from "./index.node-DjvYOL-J.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-CEv29_NS.js";
+import { t as monoDataDropdown } from "./mono-data-dropdown-Wnoke6zO.js";
+import { a as resetMonoTooltip, n as createMonoTooltip, o as controlMonoTooltip, r as destroyAllMonoTooltips, s as monoTooltip, u as getMonoTooltipGlobal } from "./tooltip-DQqNpqk2.js";
+import { _ as DEFAULT_FLAVOR, a as flavors, b as themePresets, c as getCurrentFlavor, d as getThemeData, f as isValidFlavor, g as themes, h as resetTheme, i as createThemeClass, l as getCurrentTheme, m as resetFlavor, n as applyTheme, o as getAllFlavors, p as isValidTheme, r as createFlavorClass, s as getAllThemes, t as applyFlavor, u as getFlavorData, v as DEFAULT_THEME, y as flavorPresets } from "./index.node-BIqEGehH.js";
 export { DEFAULT_ERROR_MESSAGES, DEFAULT_FLAVOR, DEFAULT_SEARCH_OPERATION, DEFAULT_THEME, OPERATOR_ARITY as MONO_FILTER_OPERATOR_ARITY, DEFAULT_TEXTS as MONO_FILTER_TEXTS, MonoSourceSearch, SEARCH_FIELDS_KEYS, applyFlavor, applyTheme, arrayToODataString, arrayToTree, buildChartApply, buildChartOdataRequest, buildGroups, collectGroupPaths, composeApply, monoChart as controlMonoChart, monoChart, monoDataDropdown as controlMonoDataDropdown, monoDataDropdown, monoFilterBuilder as controlMonoFilterBuilder, monoFilterBuilder, monoForm as controlMonoForm, monoForm, monoModal as controlMonoModal, monoModal, monoDataGrid as controlMonoTable, monoDataGrid, controlMonoTooltip, createFlavorClass, createMonoTooltip, createMonoUI, createThemeClass, describeError, destroyAllMonoTooltips, errorStatus, flattenLeaves, flavorPresets, flavors, getAllFlavors, getAllThemes, getCurrentFlavor, getCurrentTheme, getFieldValue, getFlavorData, getMonoSkeletonStatus, getMonoTooltipGlobal, getMonoUI, getMonoUIStatus, getThemeData, isFoldableSearch, isGroupNode, isMonoSsrApp, isPath, isValidFlavor, isValidTheme, mergePatch, mergeSearchFields, monoArraySource, operatorsFor as monoFilterOperatorsFor, monoTooltip, normalizeError, odataStringToArray, parseFieldPath, parseSearchValue, plainSearchFields, readSearchField, resetFlavor, resetMonoSkeleton, resetMonoTooltip, resetMonoUI, resetTheme, resolveErrorMessages, resolveMaybeReactive, resolveSearchFields, searchRemoteFilter, searchRowPredicate, setErrorMessages, setFieldValue, themePresets, themes, toODataClause, toODataSelector, treeToArray };

package/dist/{index.node-DjvYOL-J.js → index.node-BIqEGehH.js}

@@ -1,8 +1,9 @@
-import "./mono-data-grid-Db80FzdZ.js";
+import "./normalize-error-Gcgmgh5i.js";
+import "./mono-data-grid-YjR3n9Ar.js";
 import "./mono-ui-CPV7rrdo.js";
-import "./mono-data-chart-ChU4Ii3p.js";
-import "./mono-data-dropdown-BAUl58kW.js";
-import "./tooltip-CysgRgBi.js";
+import "./mono-data-chart-CEv29_NS.js";
+import "./mono-data-dropdown-Wnoke6zO.js";
+import "./tooltip-DQqNpqk2.js";
 //#endregion
 //#region src/data/theme/presets.ts
 var raw = {

package/dist/index.node.js

@@ -1,16 +1,16 @@
 import { a as parseFieldPath, c as toODataClause, l as toODataSelector, n as isPath, r as mergePatch, s as setFieldValue, t as getFieldValue } from "./field-path-C92eGLg3.js";
 import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "./data-source-read-DL88aH8t.js";
-import { a as isFoldableSearch, c as plainSearchFields, d as searchRemoteFilter, f as searchRowPredicate, i as SEARCH_FIELDS_KEYS, l as readSearchField, n as DEFAULT_SEARCH_OPERATION, o as mergeSearchFields, r as MonoSourceSearch, s as parseSearchValue, u as resolveSearchFields } from "./data-search-Bwo5bg8K.js";
-import { h as monoArraySource } from "./data-source-options-CQSTZHPE.js";
-import { c as DEFAULT_ERROR_MESSAGES, d as normalizeError, f as resolveErrorMessages, l as describeError, p as setErrorMessages, t as monoDataGrid, u as errorStatus } from "./mono-data-grid-Db80FzdZ.js";
+import { _ as plainSearchFields, b as searchRemoteFilter, c as resolveErrorMessages, d as DEFAULT_SEARCH_OPERATION, f as MonoSourceSearch, g as parseSearchValue, h as mergeSearchFields, l as setErrorMessages, m as isFoldableSearch, n as describeError, p as SEARCH_FIELDS_KEYS, r as errorStatus, s as normalizeError, t as DEFAULT_ERROR_MESSAGES, v as readSearchField, x as searchRowPredicate, y as resolveSearchFields } from "./normalize-error-Gcgmgh5i.js";
+import { h as monoArraySource } from "./data-source-options-Jqj7LU3Z.js";
 import { t as resolveMaybeReactive } from "./reactive-D3EERqgO.js";
+import { t as monoDataGrid } from "./mono-data-grid-YjR3n9Ar.js";
 import { d as OPERATOR_ARITY, l as treeToArray, m as operatorsFor, n as arrayToTree, s as odataStringToArray, t as arrayToODataString, u as DEFAULT_TEXTS } from "./filter-odata-C1vSGZaY.js";
 import { t as monoFilterBuilder } from "./filter-builder-Bke3qOgJ.js";
 import { a as resetMonoUI, g as resetMonoSkeleton, i as getMonoUIStatus, n as createMonoUI, o as getMonoSkeletonStatus, r as getMonoUI, s as isMonoSsrApp } from "./mono-ui-CPV7rrdo.js";
 import { t as monoForm } from "./mono-form-controller-5PfsU4qa.js";
 import { t as monoModal } from "./mono-modal-controller-BMO3n3rP.js";
-import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-ChU4Ii3p.js";
-import { t as monoDataDropdown } from "./mono-data-dropdown-BAUl58kW.js";
-import { a as resetMonoTooltip, n as createMonoTooltip, o as controlMonoTooltip, r as destroyAllMonoTooltips, s as monoTooltip, u as getMonoTooltipGlobal } from "./tooltip-CysgRgBi.js";
-import { _ as DEFAULT_FLAVOR, a as flavors, b as themePresets, c as getCurrentFlavor, d as getThemeData, f as isValidFlavor, g as themes, h as resetTheme, i as createThemeClass, l as getCurrentTheme, m as resetFlavor, n as applyTheme, o as getAllFlavors, p as isValidTheme, r as createFlavorClass, s as getAllThemes, t as applyFlavor, u as getFlavorData, v as DEFAULT_THEME, y as flavorPresets } from "./index.node-DjvYOL-J.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "./mono-data-chart-CEv29_NS.js";
+import { t as monoDataDropdown } from "./mono-data-dropdown-Wnoke6zO.js";
+import { a as resetMonoTooltip, n as createMonoTooltip, o as controlMonoTooltip, r as destroyAllMonoTooltips, s as monoTooltip, u as getMonoTooltipGlobal } from "./tooltip-DQqNpqk2.js";
+import { _ as DEFAULT_FLAVOR, a as flavors, b as themePresets, c as getCurrentFlavor, d as getThemeData, f as isValidFlavor, g as themes, h as resetTheme, i as createThemeClass, l as getCurrentTheme, m as resetFlavor, n as applyTheme, o as getAllFlavors, p as isValidTheme, r as createFlavorClass, s as getAllThemes, t as applyFlavor, u as getFlavorData, v as DEFAULT_THEME, y as flavorPresets } from "./index.node-BIqEGehH.js";
 export { DEFAULT_ERROR_MESSAGES, DEFAULT_FLAVOR, DEFAULT_SEARCH_OPERATION, DEFAULT_THEME, OPERATOR_ARITY as MONO_FILTER_OPERATOR_ARITY, DEFAULT_TEXTS as MONO_FILTER_TEXTS, MonoSourceSearch, SEARCH_FIELDS_KEYS, applyFlavor, applyTheme, arrayToODataString, arrayToTree, buildChartApply, buildChartOdataRequest, buildGroups, collectGroupPaths, composeApply, monoChart as controlMonoChart, monoChart, monoDataDropdown as controlMonoDataDropdown, monoDataDropdown, monoFilterBuilder as controlMonoFilterBuilder, monoFilterBuilder, monoForm as controlMonoForm, monoForm, monoModal as controlMonoModal, monoModal, monoDataGrid as controlMonoTable, monoDataGrid, controlMonoTooltip, createFlavorClass, createMonoTooltip, createMonoUI, createThemeClass, describeError, destroyAllMonoTooltips, errorStatus, flattenLeaves, flavorPresets, flavors, getAllFlavors, getAllThemes, getCurrentFlavor, getCurrentTheme, getFieldValue, getFlavorData, getMonoSkeletonStatus, getMonoTooltipGlobal, getMonoUI, getMonoUIStatus, getThemeData, isFoldableSearch, isGroupNode, isMonoSsrApp, isPath, isValidFlavor, isValidTheme, mergePatch, mergeSearchFields, monoArraySource, operatorsFor as monoFilterOperatorsFor, monoTooltip, normalizeError, odataStringToArray, parseFieldPath, parseSearchValue, plainSearchFields, readSearchField, resetFlavor, resetMonoSkeleton, resetMonoTooltip, resetMonoUI, resetTheme, resolveErrorMessages, resolveMaybeReactive, resolveSearchFields, searchRemoteFilter, searchRowPredicate, setErrorMessages, setFieldValue, themePresets, themes, toODataClause, toODataSelector, treeToArray };

package/dist/{mono-button-CoVnBLav.js → mono-button-simcTQdW.js}

@@ -353,7 +353,7 @@ var MonoButtonCore = (superClass) => {
         ?mono-icon-only=${this._isIconOnlyLike}
         ?mono-glass=${Boolean(this.glass)}
         ?mono-loading=${this._effectiveLoading}
-        ?mono-pending=${this._isPendingOnly}
+        ?mono-waiting=${this._isPendingOnly}
         ?mono-sized=${this._hasSize}
       >${inner}</div>`;
 		}
@@ -597,7 +597,7 @@ var MonoButtonCore = (superClass) => {
 };
 //#endregion
 //#region src/components/button/button.css?raw
-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";
+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";
 //#endregion
 //#region src/components/button/mono-button.ts
 var MonoButton = class MonoButton extends MonoButtonCore(LitElement) {