@mono-lit/helper 0.0.2 → 0.0.4

package/dist/ui/table.js

@@ -1,22 +1,23 @@
-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 resolveSearchEntries, D as isWildcardPattern, O as normalizeSearchExpr, c as resolveErrorMessages, h as mergeSearchFields, k as plainSearchColumns, l as setErrorMessages, n as describeError, r as errorStatus, s as normalizeError, t as DEFAULT_ERROR_MESSAGES, w as expandWildcard } from "../normalize-error-Gcgmgh5i.js";
-import { h as monoArraySource } from "../data-source-options-Jqj7LU3Z.js";
-import { a as seedFromRanges, i as minimize, n as buildDateTree, o as setAllChecked, r as checkState, s as setChecked, t as monoDataGrid } from "../mono-data-grid-YjR3n9Ar.js";
-import { c as monoApplyPhantomOptions, d as monoPendingActive, f as monoPendingGrace, p as monoPhantomOptions, u as monoHostChildren } from "../mono-ui-CPV7rrdo.js";
-import { n as detachEventHandlers, t as applyProps } from "../element-props-CLB6yvbm.js";
-import { t as customElement } from "../mono-element-B0kP_96P.js";
-import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DEXtNagw.js";
-import { t as dispatchMonoEvent } from "../mono-event-Bi1qP9uN.js";
-import { n as bucketHasContent, o as placeLightSlots, r as captureLightSlots, s as placeSlotNode } from "../light-slots-DW1WgfgT.js";
-import { t as buildSizeStyle } from "../css-size-DhHSVZJK.js";
-import { t as PopupPortalController } from "../popup-portal-BziRX1yG.js";
-import { t as isIconifyClass } from "../icon-dVhYJUIH.js";
-import { n as cssPart } from "../css-class-BRKRzHx-.js";
+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-BabiMrrA.js";
+import { a as buildGroups, c as isGroupNode, o as collectGroupPaths, s as flattenLeaves } from "../data-source-read-FxqzQkk2.js";
+import { A as resolveSearchEntries, D as isWildcardPattern, O as normalizeSearchExpr, c as resolveErrorMessages, h as mergeSearchFields, k as plainSearchColumns, l as setErrorMessages, n as describeError, r as errorStatus, s as normalizeError, t as DEFAULT_ERROR_MESSAGES, w as expandWildcard } from "../normalize-error-D93O4q8g.js";
+import { h as monoArraySource } from "../data-source-options-QjuI73g8.js";
+import { a as seedFromRanges, i as minimize, n as buildDateTree, o as setAllChecked, r as checkState, s as setChecked, t as monoDataGrid } from "../mono-data-grid-8jmeIXUU.js";
+import { c as monoApplyPhantomOptions, d as monoPendingActive, f as monoPendingGrace, p as monoPhantomOptions, u as monoHostChildren } from "../mono-ui-BwUc0L6B.js";
+import { n as detachEventHandlers, t as applyProps } from "../element-props-xvw0EB7H.js";
+import { t as customElement } from "../mono-element-C7vCschg.js";
+import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
+import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
+import { n as bucketHasContent, o as placeLightSlots, r as captureLightSlots, s as placeSlotNode } from "../light-slots-DdDdZ6zs.js";
+import { t as buildSizeStyle } from "../css-size-DWAPgQdT.js";
+import { t as PopupPortalController } from "../popup-portal-HWhkd7oy.js";
+import { t as isIconifyClass } from "../icon-ClxnYhBG.js";
+import { n as cssPart } from "../css-class-B6Tc_MAx.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+
 //#region src/components/table/table-controller-core.ts
 /**
 * `MonoTableControllerCore` — the render-mode-agnostic plumbing shared by every
@@ -34,7 +35,7 @@ import { styleMap } from "lit/directives/style-map.js";
 * server (a `.prop` binding can't cross Declarative Shadow DOM), so `_subscribe`
 * is a no-op there and the element renders its deterministic empty shell.
 */
-var MonoTableControllerCore = (superClass) => {
+const MonoTableControllerCore = (superClass) => {
 	class MonoTableControllerCoreClass extends superClass {
 		constructor(...args) {
 			super(...args);
@@ -142,6 +143,7 @@ var MonoTableControllerCore = (superClass) => {
 	__decorate([property({ attribute: false })], MonoTableControllerCoreClass.prototype, "dataGrid", void 0);
 	return MonoTableControllerCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-search-core.ts
 /**
@@ -163,7 +165,7 @@ var MonoTableControllerCore = (superClass) => {
 * The magnifier and clear glyphs are delegated to `renderIcon()` (light: UnoCSS
 * `.mono-icon i-mdi-*`; shadow: inline SVG) so the chrome is otherwise identical.
 */
-var MonoTableSearchCore = (superClass) => {
+const MonoTableSearchCore = (superClass) => {
 	class MonoTableSearchCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -1066,19 +1068,21 @@ var MonoTableSearchCore = (superClass) => {
 	__decorate([query(".mono-input-native")], MonoTableSearchCoreClass.prototype, "_inputEl", void 0);
 	return MonoTableSearchCoreClass;
 };
+
 //#endregion
-//#region src/components/table/table.css?raw
-var table_default = "/* LEGACY CLASS ALIASES — every `[mono-x]` below is wrapped as `:is([mono-x], .legacy)`\r\n   by `scripts/legacy-class-alias.mjs`, because the table's markup is written by the\r\n   CONSUMER and host apps still spell it with the pre-port classes\r\n   (`<table class=\"mono-table mono-table-sticky-head\">`, `<th class=\"mono-table-sticky-right\">`).\r\n   Both spellings paint identically at the same specificity. Author selectors with the\r\n   attribute only and re-run the script (`--check` is a perf spec). */\r\n/* ============================================================================\r\n   mono-table — a port of Basecoat's `.table`, extended\r\n\r\n   Upstream is eight rules: a container, the table, its four row groups, a cell\r\n   and a caption. Everything else here — search, paging, sort and filter heads,\r\n   grouping, row detail, selection, inline editing, sticky columns, the loading\r\n   / empty / error overlays — is mono's own, and borrows its shape from the\r\n   Basecoat component it most resembles (`.button`, `.input`, `.badge`,\r\n   `.popover`), cited where it does.\r\n\r\n   Styling is by ATTRIBUTE. A table is markup the CONSUMER writes — the library\r\n   cannot emit a `<tr>` — so there is no element to mirror; the attributes ARE\r\n   the API:\r\n\r\n     <div mono-table-scroll>\r\n       <table mono-table mono-color=\"success\">…</table>\r\n     </div>\r\n\r\n   The sibling chrome (`<mono-table-search>`, `<mono-table-paging>`, …) keeps\r\n   its full component name as its root attribute rather than a short part name:\r\n   those elements are SIBLINGS of the table, not descendants, so a short name\r\n   could not be scoped under `[mono-table]` and would collide with every other\r\n   component's parts.\r\n   ============================================================================ */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table — w-full caption-bottom text-sm */\r\n:is([mono-table],.mono-table),\r\n:is([mono-table-scroll],.mono-table-scroll),\r\n:is([mono-table-shell],.mono-table-shell),\r\n:is([mono-table-card],.mono-table-card),\r\n:is([mono-table-toolbar],.mono-table-toolbar),\r\n:is([mono-table-foot],.mono-table-foot),\r\n:is([mono-table-search],.mono-table-search),\r\n:is([mono-table-paging],.mono-table-pg),\r\n:is([mono-table-paging-group],.mono-table-pg-group),\r\n:is([mono-table-page-size],.mono-table-page-size),\r\n:is([mono-table-info],.mono-table-info),\r\n:is([mono-table-summary],.mono-table-summary),\r\n:is([mono-table-loading],.mono-table-loading),\r\n:is([mono-table-empty],.mono-table-empty),\r\n:is([mono-table-error],.mono-table-error),\r\n:is([mono-table-th],.mono-table-th),\r\n:is([mono-table-sort],.mono-table-sort),\r\n:is([mono-table-checkbox],.mono-table-checkbox),\r\n:is([mono-table-detail],.mono-table-detail),\r\n/* …and the PORTALED panels. They are moved to <body>, so they inherit nothing\r\n   from the table and must carry the whole chain themselves. Listing them here\r\n   rather than re-declaring the chain below them is deliberate: the hand-written\r\n   copy drifted to eleven of these forty-nine, and every rule inside a panel that\r\n   read one of the missing ones silently resolved to nothing. */\r\n:is([mono-th-menu],.mono-th-menu),\r\n:is([mono-th-filter],.mono-th-filter),\r\n:is([mono-search-panel],.mono-table-search-panel),\r\n:is([mono-search-more-panel],.mono-table-search-more-panel),\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  /* ── ink and surface ────────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .table th — text-foreground\r\n     basecoat@1.0.2 styles/vega.css .table caption — text-muted-foreground */\r\n  --_mono-table-surface: var(--mono-table-surface, var(--background));\r\n  --_mono-table-text: var(--mono-table-text, var(--foreground));\r\n  --_mono-table-muted: var(--mono-table-muted, var(--muted-foreground));\r\n  --_mono-table-faint: var(--mono-table-faint, color-mix(in oklab, var(--_mono-table-muted) 70%, transparent));\r\n  --_mono-table-ink-mid: var(--mono-table-ink-mid, color-mix(in oklab, var(--_mono-table-text) 82%, transparent));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .table tr — border-b */\r\n  --_mono-table-border: var(--mono-table-border, var(--border));\r\n  --_mono-table-border-lite: var(--mono-table-border-lite, var(--_mono-table-border));\r\n  /* The table's OUTER edge — a hairline so a fixed-height box reads as a frame\r\n     even when a failure has cleared the rows. `none` removes it. */\r\n  --_mono-table-outer-border-color: var(--mono-table-outer-border-color, var(--_mono-table-border));\r\n  --_mono-table-outer-border: var(--mono-table-outer-border, var(--mono-border-width) solid var(--_mono-table-outer-border-color));\r\n  --_mono-table-radius: var(--mono-table-radius, var(--_mono-table-radius-preset, var(--mono-radius-lg)));\r\n\r\n  /* ── the accent — EXTENSION ─────────────────────────────────────────────\r\n     Upstream's table has no accent at all: its head, its hover and its\r\n     selected row are all `--muted`. mono keeps a role colour for the pinned\r\n     rail on a selected row, the sort and filter indicators, the spinner and\r\n     the paging pill — so the role only TINTS upstream's neutral wash, at\r\n     `--mono-mode-tint`, and `color=\"secondary\"` leaves it exactly neutral. */\r\n  --_mono-table-accent: var(--mono-table-accent, var(--_mono-table-accent-preset, var(--primary)));\r\n  --_mono-table-on-accent: var(--mono-table-on-accent, var(--_mono-table-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── row states ─────────────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50 data-[state=selected]:bg-muted\r\n\r\n     Every one of these mixes into the SURFACE, never into `transparent`.\r\n     Upstream can afford `bg-muted/50` because nothing in its table overlaps\r\n     anything; mono pins columns and freezes the head and foot, and a pinned cell\r\n     paints over the rows sliding under it by restating `--_mono-table-row-bg`.\r\n     A translucent value there shows the scrolled content straight through. */\r\n  --_mono-table-selected-bg: var(--mono-table-selected-bg, var(--muted));\r\n  /* Zebra is mono's own — upstream stripes nothing. A tint of the neutral, not\r\n     of the accent, so a coloured table does not turn into a coloured page. */\r\n  --_mono-table-zebra: var(--mono-table-zebra, color-mix(in oklab, var(--muted) 42%, var(--_mono-table-surface)));\r\n  /* the soft wash the detail panel, the group row and the selected rail share */\r\n  --_mono-table-soft: var(--mono-table-soft, color-mix(in oklab, var(--muted) 62%, var(--_mono-table-surface)));\r\n  /* The head band. Upstream paints the head nothing (the page under a bottom\r\n     rule), so the resting head is transparent; a flavor can give it a surface\r\n     (ONE's `#f7f8fc` band). The FROZEN head must be opaque whatever this says —\r\n     rows slide under it — so it falls back to a tint of the accent instead. */\r\n  --_mono-table-head-bg: var(--mono-table-head-bg, transparent);\r\n  --_mono-table-head-frozen-bg: var(--mono-table-head-bg, color-mix(in oklab, var(--_mono-table-accent) 7%, var(--_mono-table-surface)));\r\n  /* a group header row (grouping) and its hover — a tint of the accent unless a\r\n     flavor names the wash */\r\n  --_mono-table-group-bg: var(--mono-table-group-bg, color-mix(in oklab, var(--_mono-table-accent) 9%, var(--_mono-table-surface)));\r\n  --_mono-table-group-hover-bg: var(--mono-table-group-hover-bg, color-mix(in oklab, var(--_mono-table-accent) 14%, var(--_mono-table-surface)));\r\n  /* ── hover — DELIBERATELY off ────────────────────────────────────────────\r\n     Upstream's `hover:bg-muted/50` lands within a hair of mono's zebra, so on a\r\n     striped table (and mono stripes by default) hovering an odd row simply\r\n     repaints it as an even one: the row appears to merge with the one below it\r\n     rather than to light up. A cue that is indistinguishable from the pattern\r\n     it sits in is worse than no cue, so the default is the row's own colour.\r\n     `--mono-table-hover-bg` turns it back on for anyone who wants it. */\r\n  --_mono-table-hover-bg: var(--mono-table-hover-bg, var(--_mono-table-row-bg, var(--_mono-table-surface)));\r\n\r\n  /* ── head and cell metrics ──────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .table th — h-10 px-2 text-start align-middle font-medium whitespace-nowrap\r\n     basecoat@1.0.2 styles/vega.css .table td — p-2 align-middle whitespace-nowrap */\r\n  --_mono-table-font: var(--mono-table-font, var(--_mono-table-font-preset, var(--mono-text-sm)));\r\n  --_mono-table-line-height: var(--mono-table-line-height, var(--_mono-table-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-table-th-height: var(--mono-table-th-height, var(--_mono-table-th-height-preset, calc(var(--mono-spacing) * 10)));\r\n  --_mono-table-th-pad-x: var(--mono-table-th-pad-x, var(--_mono-table-th-pad-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-table-th-font: var(--mono-table-th-font, var(--_mono-table-th-font-preset, var(--_mono-table-font)));\r\n  --_mono-table-th-weight: var(--mono-table-th-weight, var(--_mono-table-th-weight-preset, var(--mono-font-weight-medium)));\r\n  --_mono-table-th-color: var(--mono-table-th-color, var(--_mono-table-th-color-preset, var(--_mono-table-text)));\r\n  --_mono-table-th-transform: var(--mono-table-th-transform, var(--_mono-table-th-transform-preset, none));\r\n  --_mono-table-th-tracking: var(--mono-table-th-tracking, var(--_mono-table-th-tracking-preset, normal));\r\n  --_mono-table-cell-pad: var(--mono-table-cell-pad, var(--_mono-table-cell-pad-preset, calc(var(--mono-spacing) * 2)));\r\n\r\n  /* ── the sibling chrome ─────────────────────────────────────────────────\r\n     basecoat@1.0.2 components/table.css .table tfoot — bg-muted/50 border-t font-medium */\r\n  --_mono-table-foot-bg: var(--mono-table-foot-bg, color-mix(in oklab, var(--muted) 50%, var(--_mono-table-surface)));\r\n  --_mono-table-foot-gap: var(--mono-table-foot-gap, calc(var(--mono-spacing) * 3));\r\n\r\n  /* ── Loading overlay (mono-table-loading) ── */\r\n  --_mono-table-loading-bg: var(--mono-table-loading-bg, color-mix(in oklab, var(--_mono-table-surface) 64%, transparent));\r\n  --_mono-table-loading-blur: var(--mono-table-loading-blur, 2px);\r\n  --_mono-table-spinner-size: var(--mono-table-spinner-size, 1.5rem);\r\n  --_mono-table-spinner-width: var(--mono-table-spinner-width, 2.5px);\r\n  --_mono-table-spinner-color: var(--mono-table-spinner-color, var(--_mono-table-accent));\r\n  --_mono-table-spinner-speed: var(--mono-table-spinner-speed, 0.65s);\r\n  /* Above every tier this sheet uses (pinned header/footer tops out at 3) AND above the\r\n     lifts consumers have already shipped, so an app that raises its own header cannot\r\n     accidentally paint through the dim. Raise it here if a ladder ever needs to go past. */\r\n  --_mono-table-loading-z: var(--mono-table-loading-z, 10);\r\n  /* How far below the frozen header the spinner sits. */\r\n  --_mono-table-loading-gap: var(--mono-table-loading-gap, 1.25rem);\r\n\r\n  /* ── Error bar (mono-table-error) ── */\r\n  --_mono-table-error: var(--mono-table-error, var(--destructive));\r\n  /* opaque: the bar pins under a frozen header with rows sliding beneath it */\r\n  --_mono-table-error-bg: var(--mono-table-error-bg, color-mix(in oklab, var(--_mono-table-error) var(--mono-mode-tint), var(--_mono-table-surface)));\r\n  --_mono-table-error-border: var(--mono-table-error-border, color-mix(in oklab, var(--_mono-table-error) var(--mono-mode-state-border-alpha, 24%), transparent));\r\n\r\n  /* ── Empty state (mono-table-empty) ──\r\n     Room the message reserves on the scroll wrapper. An empty grid is a header\r\n     over nothing, so unlike the loading overlay there is no height left to\r\n     freeze — this is the height, and the element reads it off itself so a theme\r\n     or a single field can retune it. */\r\n  --_mono-table-empty-min-h: var(--mono-table-empty-min-h, 12rem);\r\n  /* How far below the frozen header the message sits. */\r\n  --_mono-table-empty-gap: var(--mono-table-empty-gap, 2rem);\r\n  /* One tier BELOW the loading overlay: when a reload starts on an empty grid\r\n     both are briefly up, and the spinner is the one that should be on top. */\r\n  --_mono-table-empty-z: var(--mono-table-empty-z, 9);\r\n\r\n  /* ── Row detail (mono-table-detail) ── */\r\n  --_mono-table-detail-size: var(--mono-table-detail-size, 1.5rem);\r\n  --_mono-table-detail-radius: var(--mono-table-detail-radius, var(--mono-radius-sm));\r\n  --_mono-table-detail-color: var(--mono-table-detail-color, var(--_mono-table-muted));\r\n  --_mono-table-detail-color-open: var(--mono-table-detail-color-open, var(--_mono-table-accent));\r\n  --_mono-table-detail-hover-bg: var(--mono-table-detail-hover-bg, var(--_mono-table-hover-bg));\r\n  --_mono-table-detail-panel-bg: var(--mono-table-detail-panel-bg, var(--_mono-table-soft));\r\n  --_mono-table-detail-panel-pad: var(--mono-table-detail-panel-pad, calc(var(--mono-spacing) * 3) calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── Pre-port READ-ONLY colour names — alive until 3.0 ──────────────────\r\n     The pre-port sheet DECLARED a palette on the table that host CSS reads\r\n     (esw-ui paints a sticky dropdown-panel head with\r\n     `color-mix(… var(--mono-table-primary) …, var(--mono-table-sky) …)`). The\r\n     port dropped them, so such a declaration went invalid → transparent and the\r\n     rows scrolled through the head. Restated here from the resolved palette, so\r\n     they follow the theme colour (ONE's navy/blue) and a per-table `mono-color`.\r\n     ONLY names the port does not read as knobs: declaring a knob name\r\n     (`--mono-table-border`, `-surface`, `-soft`, `-zebra`…) here would override\r\n     the value a flavor sets on :root. Not knobs — setting one changes nothing. */\r\n  --mono-table-primary: var(--_mono-table-accent);\r\n  --mono-table-deep: color-mix(in oklab, var(--_mono-table-accent) 82%, black);\r\n  --mono-table-sky: var(--info);\r\n  --mono-table-lite: color-mix(in oklab, var(--_mono-table-accent) 22%, var(--_mono-table-surface));\r\n}\r\n\r\n/* ── Colours — EXTENSION ───────────────────────────────────────────────────\r\n   `primary` is the default and emits no attribute, exactly as every other\r\n   ported component does. */\r\n:is([mono-table],.mono-table):is([mono-color=\"secondary\"],:where(.mono-table-secondary)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"secondary\"],:where(.mono-table-secondary)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"secondary\"],:where(.mono-table-secondary)) {\r\n  --_mono-table-accent-preset: var(--secondary-foreground);\r\n  --_mono-table-on-accent-preset: var(--secondary);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"success\"],:where(.mono-table-success)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"success\"],:where(.mono-table-success)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"success\"],:where(.mono-table-success)) {\r\n  --_mono-table-accent-preset: var(--success);\r\n  --_mono-table-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"danger\"],:where(.mono-table-danger)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"danger\"],:where(.mono-table-danger)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"danger\"],:where(.mono-table-danger)) {\r\n  --_mono-table-accent-preset: var(--destructive);\r\n  --_mono-table-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"warning\"],:where(.mono-table-warning)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"warning\"],:where(.mono-table-warning)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"warning\"],:where(.mono-table-warning)) {\r\n  --_mono-table-accent-preset: var(--warning);\r\n  --_mono-table-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"info\"],:where(.mono-table-info)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"info\"],:where(.mono-table-info)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"info\"],:where(.mono-table-info)) {\r\n  --_mono-table-accent-preset: var(--info);\r\n  --_mono-table-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"teal\"],:where(.mono-table-teal)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"teal\"],:where(.mono-table-teal)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"teal\"],:where(.mono-table-teal)) {\r\n  --_mono-table-accent-preset: var(--teal);\r\n  --_mono-table-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"purple\"],:where(.mono-table-purple)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"purple\"],:where(.mono-table-purple)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"purple\"],:where(.mono-table-purple)) {\r\n  --_mono-table-accent-preset: var(--purple);\r\n  --_mono-table-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"neutral\"],:where(.mono-table-neutral)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"neutral\"],:where(.mono-table-neutral)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"neutral\"],:where(.mono-table-neutral)) {\r\n  --_mono-table-accent-preset: var(--neutral);\r\n  --_mono-table-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"dark\"],:where(.mono-table-dark)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"dark\"],:where(.mono-table-dark)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"dark\"],:where(.mono-table-dark)) {\r\n  --_mono-table-accent-preset: var(--dark);\r\n  --_mono-table-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n\r\n/* ── Search ─────────────────────────────────────────────────────────────── */\r\n\r\n/* `mono-table-search` renders mono-input's markup (`.mono-input` →\r\n   `.mono-input-field` → `.mono-input-native`), so the entire size × color ×\r\n   variant matrix comes from `input.css` — there is deliberately no field styling\r\n   here. Block-level to match `mono-input { display: block }`. */\r\nmono-table-search,\r\nmono-shadow-table-search {\r\n  display: block;\r\n}\r\n\r\n/* The search keeps a sensible floor width so it can't collapse in a cramped\r\n   toolbar. It still grows to fill like a `mono-input` (`.mono-input` is\r\n   `width: 100%`), and an explicit `width`/`min-width` prop wins because\r\n   `buildSizeStyle` writes those inline. */\r\n.mono-input:is([mono-table-search],.mono-table-search) {\r\n  min-width: 180px;\r\n}\r\n\r\n/* The glyphs size themselves — `.mono-icon` is already `--mono-icon-md` (light)\r\n   and the shadow build's inline SVGs are em-based — so there is nothing to set\r\n   here. `.mono-input-prefix` has no intrinsic box, so do NOT give the icon a\r\n   percentage size: it would resolve against `auto` and collapse. */\r\n\r\n/* Kill the native focus outline in host projects; keep the box-shadow ring.\r\n   Covers mono-input's inner field and the page-size native <select>. */\r\n:is([mono-table-search],.mono-table-search) .mono-input-native:focus,\r\n:is([mono-table-search],.mono-table-search) .mono-input-native:focus-visible,\r\n:is([mono-sel],.mono-table-sel):focus,\r\n:is([mono-sel],.mono-table-sel):focus-visible {\r\n  outline: none !important;\r\n}\r\n\r\n/* A `type=\"search\"` input shows a native clear affordance; make it feel clickable\r\n   (mono-input's own `clearable` button is styled by input.css). */\r\n:is([mono-table-search],.mono-table-search) .mono-input-native[type='search']::-webkit-search-cancel-button {\r\n  cursor: pointer;\r\n}\r\n\r\n/* ── multi-context chips (inside the field, before the input) ─────────────── */\r\n:is([mono-search-chips],.mono-table-search-chips) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  flex-wrap: nowrap;\r\n  gap: 0.25rem;\r\n  padding-left: 0.4rem;\r\n  /* Fixed-width horizontal strip so a chip list never squeezes the input —\r\n     overflow scrolls instead of wrapping into a column. */\r\n  width: var(--mono-table-search-chips-width, 140px);\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  /* Drag-to-scroll (see the core's pointer handlers): the grab cursor advertises\r\n     it, and the scrollbar is hidden so the strip stays tidy. */\r\n  cursor: grab;\r\n  scrollbar-width: none;\r\n  -ms-overflow-style: none;\r\n}\r\n:is([mono-search-chips],.mono-table-search-chips):is([mono-grabbing],.is-grabbing) {\r\n  cursor: grabbing;\r\n}\r\n:is([mono-search-chips],.mono-table-search-chips)::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n:is([mono-search-chip],.mono-table-search-chip) {\r\n  /* Keep chips at their natural width inside the nowrap strip so they scroll\r\n     rather than compress. */\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  max-width: 100%;\r\n  padding: 0.3rem 0.6rem;\r\n  border-radius: 999px;\r\n  background: var(--_mono-table-soft);\r\n  color: var(--_mono-table-text);\r\n  font-size: 0.85rem;\r\n  line-height: 1.35;\r\n  white-space: nowrap;\r\n  justify-content: space-between;\r\n}\r\n/* The column a chip is bound to — the \"context\" half of `Nama: Andy`. */\r\n:is([mono-search-chip-ctx],.mono-table-search-chip-ctx) {\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n}\r\n:is([mono-search-chip-text],.mono-table-search-chip-text) {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n:is([mono-search-chip-x],.mono-table-search-chip-x) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: transparent;\r\n  color: var(--_mono-table-muted);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n}\r\n:is([mono-search-chip-x],.mono-table-search-chip-x):hover {\r\n  color: var(--_mono-table-accent);\r\n}\r\n:is([mono-search-chip-x],.mono-table-search-chip-x) .mono-icon {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n/* ── \"See All\" overflow trigger + panel ─────────────────────────────────── */\r\n/* The field wrapper anchors the absolutely-positioned overflow panel. */\r\n:is([mono-table-search],.mono-table-search) {\r\n  position: relative;\r\n}\r\n/* The trigger chip reuses `[mono-search-chip]`'s shape; these layer a\r\n   stronger surface so it reads as a button rather than a plain chip. */\r\n:is([mono-search-chip-more],.mono-table-search-chip-more) {\r\n  padding: 0.3rem 0.55rem 0.3rem 0.7rem;\r\n  border: 0;\r\n  background: var(--_mono-table-border);\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n}\r\n:is([mono-search-chip-more],.mono-table-search-chip-more):hover {\r\n  background: color-mix(in oklab, var(--_mono-table-accent) 30%, var(--_mono-table-surface));\r\n}\r\n:is([mono-search-chip-more],.mono-table-search-chip-more):is([mono-open],.open) {\r\n  background: var(--_mono-table-accent);\r\n  color: var(--_mono-table-on-accent);\r\n}\r\n/* Count badge — tints itself from the chip's `currentColor`. */\r\n:is([mono-search-chip-count],.mono-table-search-chip-count) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 1.2rem;\r\n  height: 1.2rem;\r\n  padding: 0 0.35rem;\r\n  border-radius: 999px;\r\n  background: color-mix(in srgb, currentColor 18%, transparent);\r\n  font-size: 0.72rem;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n}\r\n/* The panel sits below the field and lists the chips that didn't fit inline. */\r\n:is([mono-search-more-panel],.mono-table-search-more-panel) {\r\n  position: absolute;\r\n  top: calc(100% + 0.35rem);\r\n  left: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  padding: 0.55rem;\r\n  max-width: 22rem;\r\n  max-height: 14rem;\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n}\r\n\r\n/* ── slotted filter-builder (chevron toggle + panel + chip) ──────────────── */\r\n/* Sized to match `mono-input`'s clearable affordance (`.mono-input-clear`) so the\r\n   chevron sits level with the field's other suffix controls. */\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-right: 0.4rem;\r\n  width: var(--_mi-clear, 1.8rem);\r\n  height: var(--_mi-clear, 1.8rem);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 9999px;\r\n  background: transparent;\r\n  color: color-mix(in oklab, var(--_mono-table-text) 56%, transparent);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition: transform var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle) > .mono-icon {\r\n  width: var(--mono-icon-md, 1.25rem);\r\n  height: var(--mono-icon-md, 1.25rem);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):hover {\r\n  color: var(--_mono-table-accent);\r\n  background: color-mix(in srgb, var(--_mono-table-accent) 8%, transparent);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):active {\r\n  transform: scale(0.95);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):is([mono-active],.active) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n/* `open` rotates the chevron on its own (the :active scale is momentary). */\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):is([mono-open],.open) {\r\n  transform: rotate(180deg);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):is([mono-open],.open):active {\r\n  transform: rotate(180deg) scale(0.95);\r\n}\r\n/* The slotted `<mono-filter-builder>` panel — portaled to <body> and positioned\r\n   fixed by the popup controller (flip up / shift in at viewport edges), so it\r\n   floats over the rows instead of pushing them. Width tracks the builder's own\r\n   `width` (max-content, floored/clamped to the viewport) — so the builder sizes\r\n   its \"modal\". */\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  width: max-content;\r\n  min-width: min(90vw, 20rem);\r\n  max-width: 90vw;\r\n  max-height: min(70vh, var(--mono-popup-avail-h, 70vh));\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding: 0.65rem;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n}\r\n/* One chip representing the active built filter — a touch stronger than a search\r\n   chip so it stands apart as a different kind of context. */\r\n:is([mono-search-filter-chip],.mono-table-search-filter-chip) {\r\n  background: var(--_mono-table-border);\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n}\r\n\r\n/* ── suggestion panel ─────────────────────────────────────────────────────── */\r\n/* The panel is portaled to <body>, so it only sees the `--mono-table-*` block if\r\n   the portal host got a matching class. Every colour therefore falls back to the\r\n   global `--theme-*` tokens (and then a literal) — an unresolved var would make\r\n   `background` invalid and paint the whole panel transparent. */\r\n:is([mono-search-panel],.mono-table-search-panel) {\r\n  /* Resolved once here so the row rules below can't inherit an invalid value. */\r\n  --_mono-search-accent: var(--_mono-table-accent, var(--primary));\r\n  --_mono-search-surface: var(--_mono-table-surface, var(--popover));\r\n  --_mono-search-soft: color-mix(in oklab, var(--_mono-search-accent) 7%, var(--_mono-search-surface));\r\n  --_mono-search-lite: color-mix(in oklab, var(--_mono-search-accent) 22%, var(--_mono-search-surface));\r\n\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  min-width: 12rem;\r\n  max-height: 15rem;\r\n  overflow-y: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding: 0.25rem;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n  color: var(--_mono-table-text);\r\n  font-size: 0.82rem;\r\n}\r\n:is([mono-search-panel],.mono-table-search-panel):is([mono-open],.open) {\r\n  display: block;\r\n}\r\n:is([mono-search-option],.mono-table-search-option) {\r\n  display: block;\r\n  width: 100%;\r\n  padding: 0.4rem 0.5rem;\r\n  border: 0;\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n:is([mono-search-option],.mono-table-search-option):hover {\r\n  background: var(--_mono-search-soft);\r\n}\r\n/* The active row is marked by a leading bar only — no fill — so it stays\r\n   distinct from a hovered row's tint, and Enter always has a visible target.\r\n   The bar reads stronger once the keyboard has actually moved INTO the list. */\r\n:is([mono-search-option],.mono-table-search-option):is([mono-active],.active) {\r\n  box-shadow: inset 2px 0 0 var(--_mono-search-accent);\r\n}\r\n:is([mono-search-panel],.mono-table-search-panel):is([mono-zone-list],.zone-list) :is([mono-search-option],.mono-table-search-option):is([mono-active],.active) {\r\n  box-shadow: inset 3px 0 0 var(--_mono-search-accent);\r\n}\r\n\r\n/* ── Paging ─────────────────────────────────────────────────────────────── */\r\n\r\n:is([mono-table-paging],.mono-table-pg) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb) {\r\n  min-width: 30px;\r\n  height: 30px;\r\n  padding: 0 0.45rem;\r\n  border: var(--mono-border-width, 1px) solid var(--_mono-table-border);\r\n  border-radius: var(--mono-radius-sm, 0.5rem);\r\n  background: var(--_mono-table-surface);\r\n  color: var(--_mono-table-muted);\r\n  font-family: inherit;\r\n  font-size: 0.8rem;\r\n  font-weight: var(--mono-font-weight-semibold, 600);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition:\r\n    border-color var(--mono-duration-fast, 150ms) var(--mono-ease, ease),\r\n    background-color var(--mono-duration-fast, 150ms) var(--mono-ease, ease),\r\n    color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n\r\n/* The prev/next arrows are inline SVG, and `.mono-icon` defaults to 20px — which is\r\n   wider than the 0.8rem digit beside it, so those two buttons grew to 36px while the\r\n   numbered ones stayed 30 and the row read as mismatched (an ellipse among circles,\r\n   once a skin rounds them). `em` ties the glyph to the BUTTON's own font-size, so the\r\n   compact group pager scales with it instead of needing its own rule. */\r\n:is([mono-pgb],.mono-table-pgb) .mono-icon {\r\n  width: 1.15em;\r\n  height: 1.15em;\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb):hover:not(:disabled) {\r\n  border-color: var(--_mono-table-border);\r\n  background: var(--_mono-table-soft);\r\n  color: var(--_mono-table-accent);\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb):is([mono-on],.on) {\r\n  background: var(--_mono-table-accent);\r\n  color: var(--_mono-table-on-accent);\r\n  border-color: var(--_mono-table-accent);\r\n  box-shadow: 0 2px 8px color-mix(in oklab, var(--_mono-table-accent) 22%, transparent);\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb):disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n\r\n:is([mono-pg-el],.mono-table-pg-el) {\r\n  padding: 0 0.3rem;\r\n  color: var(--_mono-table-muted);\r\n  font-size: 0.8rem;\r\n}\r\n\r\n/* ── Page size + info ───────────────────────────────────────────────────── */\r\n\r\n:is([mono-table-page-size],.mono-table-page-size) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  font-size: 0.78rem;\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n:is([mono-sel],.mono-table-sel) {\r\n  padding: 0.4rem 0.6rem;\r\n  border: var(--mono-border-width, 1px) solid var(--_mono-table-border);\r\n  border-radius: var(--mono-radius-sm, 0.5rem);\r\n  font-family: inherit;\r\n  font-size: 0.8rem;\r\n  color: var(--_mono-table-muted);\r\n  background: var(--_mono-table-soft);\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\n:is([mono-sel],.mono-table-sel):focus {\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n\r\n:is([mono-sel],.mono-table-sel):disabled {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n}\r\n\r\n:is([mono-table-info],.mono-table-info) {\r\n  font-size: 0.78rem;\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n/* ── Native table wrapper ───────────────────────────────────────────────── */\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  -webkit-overflow-scrolling: touch;\r\n  overscroll-behavior-x: contain;\r\n}\r\n\r\n/* Opt-in vertical scroll region for infinity/virtual paging. Add `scroll-y` +\r\n   an inline `max-height`; the container becomes the scroll target that\r\n   `<mono-table-paging type=\"infinity-scroll|virtual-scroll\">` drives. */\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-scroll-y],.scroll-y) {\r\n  overflow-y: auto;\r\n  overscroll-behavior-y: contain;\r\n  position: relative;\r\n}\r\n\r\n/* Opt-in sticky header so column titles stay visible while the rows scroll.\r\n\r\n   A pinned cell in a `border-collapse: collapse` table keeps its TEXT and loses\r\n   everything else. Collapsed borders belong to the table, not the cell — they are\r\n   painted where the cell sits in flow — so the header's bottom rule, a pinned\r\n   column's edge and any `th { border-right }` a consumer adds all scrolled away\r\n   under the frozen titles. And the header gradient sits on `thead`, which\r\n   scrolls too, so the rows showed through the transparent cells.\r\n\r\n   A pinned COLUMN (`mono-table-sticky-left` / `-right`) is the same story\r\n   sideways: its edge was painted at the cell's flow position, off in the\r\n   scrolled-away part of the table, and the borders of the cells sliding UNDER\r\n   it leaked through as ticks between the rows.\r\n\r\n   So any table with a frozen cell — sticky head, sticky foot, a pinned column —\r\n   uses SEPARATE borders with zero spacing: the same geometry (each row still\r\n   carries its 1px rule, the header its 2px), but every cell paints its own\r\n   borders inside its own box and carries them along, and a cell sliding under\r\n   a pinned one takes its border with it. The pinned cells get an opaque\r\n   background of their own. Separate borders ignore a `<tr>` border, so the body\r\n   row rule moves onto the cells here. */\r\n:is([mono-table],.mono-table):is([mono-sticky-head],.mono-table-sticky-head),\r\n:is([mono-sticky-head],.mono-table-sticky-head) :is([mono-table],.mono-table),\r\n:is([mono-table],.mono-table):is([mono-sticky-foot],.mono-table-sticky-foot),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) :is([mono-table],.mono-table),\r\n:is([mono-table],.mono-table):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) {\r\n  border-collapse: separate;\r\n  border-spacing: 0;\r\n}\r\n:is([mono-sticky-head],.mono-table-sticky-head) tbody tr > td,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tbody tr > td,\r\n:is([mono-table],.mono-table):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) tbody tr > td {\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n}\r\n:is([mono-sticky-head],.mono-table-sticky-head) tbody tr:last-child > td,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tbody tr:last-child > td,\r\n:is([mono-table],.mono-table):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) tbody tr:last-child > td {\r\n  border-bottom: none;\r\n}\r\n/* (0,2,2) on purpose — a STATE rule. `[mono-sticky-head] thead th` alone is\r\n   (0,1,2): attribute + two type selectors — the SAME weight as the resting\r\n   `[mono-table] thead th` paint further down, which then won on source order\r\n   and left a frozen head see-through. The marker may sit on the table or on\r\n   its scroll wrapper, so both forms. */\r\n:is([mono-table],.mono-table):is([mono-sticky-head],.mono-table-sticky-head) thead th,\r\n:is([mono-sticky-head],.mono-table-sticky-head) :is([mono-table],.mono-table) thead th {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 2;\r\n  /* Opaque — the gradient is on `thead` and does not follow; same fill the\r\n     pinned-column header cells use, so the two kinds of frozen cell match. */\r\n  background: var(--_mono-table-head-frozen-bg);\r\n}\r\n\r\n/* Opt-in sticky footer — mirrors sticky-head so an aggregate row (usually\r\n   holding <mono-table-summary> cells) stays pinned to the bottom while the body\r\n   scrolls. Needs an opaque background or scrolled rows show through.\r\n\r\n   It draws NO separator of its own. `[mono-table] tfoot td/th` further down\r\n   already carries a `border-top`, and this rule used to add a hairline shadow on\r\n   that same edge — so a pinned footer read as two lines a pixel apart. The\r\n   border is the one that stays. */\r\n/* (0,2,2) on purpose — a STATE rule. The marker may sit on the table or on its\r\n   scroll wrapper, so both forms; and a host page's cell-padding rule at (0,2,1)\r\n   (these docs carry one, to undo VitePress's own) must not take the scrollbar\r\n   band away. */\r\n:is([mono-table],.mono-table):is([mono-sticky-foot],.mono-table-sticky-foot) tfoot th,\r\n:is([mono-table],.mono-table):is([mono-sticky-foot],.mono-table-sticky-foot) tfoot td,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) :is([mono-table],.mono-table) tfoot th,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) :is([mono-table],.mono-table) tfoot td {\r\n  position: sticky;\r\n  bottom: 0;\r\n  z-index: 2;\r\n  background: var(--_mono-table-foot-bg);\r\n  /* Reserve space at the bottom of the cell for a horizontal scrollbar that\r\n     shares this edge (mainly for OVERLAY scrollbars, which draw over content).\r\n     The totals text sits above this band and the cell's opaque background fills\r\n     it — so the scrollbar covers the empty band, not the numbers, with no\r\n     content peeking through (unlike padding on the container). Off by default so\r\n     classic-scrollbar layouts (footer already above the bar) aren't made chunky;\r\n     opt in with `--mono-table-foot-scrollbar` (e.g. `0.6rem`). */\r\n  padding-bottom: calc(0.65rem + var(--mono-table-foot-scrollbar, 0rem));\r\n}\r\n\r\n/* A NON-sticky footer at the end of a scroll region shares the bottom edge with\r\n   the horizontal scrollbar; this gap lifts it clear. Scoped with `:has(tfoot)` so\r\n   scroll regions without a footer (virtual / infinity paging) keep their exact\r\n   scroll math, and EXCLUDED for a sticky footer — that one already pins itself\r\n   above the scrollbar, so the padding would only open a strip below the frozen\r\n   totals where scrolled rows peek through. Tune with `--mono-table-foot-gap`. */\r\n:is([mono-table-scroll],.mono-table-scroll):has(tfoot):not(:has(:is([mono-sticky-foot],.mono-table-sticky-foot))) {\r\n  padding-bottom: var(--_mono-table-foot-gap, 0.4rem);\r\n}\r\n\r\n/* Footer cells are OPAQUE and separated by a top border, so:\r\n   • a pinned footer cell (sticky column) doesn't let horizontally-scrolled body\r\n     cells show through it (the totals stay legible over the scrolling data), and\r\n   • the totals read as a distinct row.\r\n   The sticky-column z-index already lifts a pinned footer cell above the body. */\r\n/* basecoat@1.0.2 styles/vega.css .table tfoot — bg-muted/50 border-t font-medium\r\n   A DIFFERENT wash from the rows, on purpose: a footer painted the row colour\r\n   read as one more row, and pinned, as a row sliding over the others. */\r\n:is([mono-table],.mono-table) tfoot td,\r\n:is([mono-table],.mono-table) tfoot th {\r\n  background: var(--_mono-table-foot-bg);\r\n  border-top: var(--mono-border-width) solid var(--_mono-table-border);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* Aggregate value rendered by <mono-table-summary>. Tabular figures so a column\r\n   of totals lines up; slightly heavier than body text. */\r\n:is([mono-table-summary],.mono-table-summary) {\r\n  font-weight: var(--mono-font-weight-semibold, 600);\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n\r\n/* Scroll-paging status strip (Load more / Loading… / — end —). */\r\n:is([mono-table-paging],.mono-table-pg):is([mono-pg-scroll],.mono-table-pg-scroll) {\r\n  justify-content: center;\r\n  padding: 0.5rem 0;\r\n  color: rgba(var(--theme-text-rgb, 26, 45, 66), 0.6);\r\n  font-size: 0.82rem;\r\n}\r\n\r\n:is([mono-table-shell],.mono-table-shell),\r\n:is([mono-table-card],.mono-table-card),\r\n:is([mono-table-toolbar],.mono-table-toolbar),\r\n:is([mono-table-foot],.mono-table-foot) {\r\n  min-width: 0;\r\n  max-width: 100%;\r\n}\r\n\r\n/* ── Loading overlay (mono-table-loading) ───────────────────────────────────\r\n   A drop-in spinner overlay dropped straight into the <table> (or into\r\n   [mono-table-scroll]). A bare custom element is not valid in a row section, so the\r\n   core wraps itself in a zero-height <tr><td colspan> on connect — see\r\n   `_ensureRowHost`; a hand-written <caption> or <td> host is honoured as-is.\r\n   The host is out of normal flow (position:absolute), so its row adds no layout and\r\n   the overlay covers the nearest positioned ancestor (the core sets\r\n   position:relative on the table / scroll wrapper for it). Hidden until the\r\n   core reflects [data-mono-loading] from the controller's `loading` state — or until the\r\n   consumer sets [data-loading] from a busy flag of its own.\r\n   `mono-shadow-table-loading` styles the light-DOM host from this global sheet;\r\n   the shadow build additionally rewrites these to `:host` for the spinner tree. */\r\n\r\nmono-table-loading,\r\nmono-shadow-table-loading {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: var(--_mono-table-loading-z, 10);\r\n  display: none;\r\n  /* Anchored at the TOP, not centred: `sticky` below only moves the spinner once its static\r\n     position would leave the view, so a static position in the middle of a tall table gives a\r\n     different result at every scroll offset. From the top, one `top` holds at all of them. */\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  background: var(--_mono-table-loading-bg);\r\n  backdrop-filter: blur(var(--_mono-table-loading-blur));\r\n  -webkit-backdrop-filter: blur(var(--_mono-table-loading-blur));\r\n  pointer-events: none;\r\n}\r\n\r\n/* Two independent sources, two attributes. `data-loading` is the CONSUMER's — set it from your\r\n   own busy flag and the element never touches it. `data-mono-loading` is the element's own,\r\n   reflected from the bound controller's `loading`. Either one shows the overlay; one attribute\r\n   shared between both would need the element to work out who wrote it, which is not knowable\r\n   (a MutationObserver reports asynchronously, after any \"I am writing\" flag has been reset). */\r\nmono-table-loading[data-loading],\r\nmono-table-loading[data-mono-loading],\r\nmono-shadow-table-loading[data-loading],\r\nmono-shadow-table-loading[data-mono-loading] {\r\n  display: flex;\r\n}\r\n\r\n/* ── Pending placeholder (the automatic skeleton, `pending`) ───────────────────\r\n   For the controller's FIRST load the element shows a phantom-ui block of placeholder\r\n   rows mirroring the header instead of the spinner — same overlay geometry, not dimmed\r\n   (there is nothing under it yet). The row/cell/bar classes are the structure phantom\r\n   measures; the bars carry a real background so it counts them as blocks. Colours and\r\n   radius come from the theme hooks shared with components/skeleton/skeleton.css. */\r\nmono-table-loading[data-mono-pending],\r\nmono-shadow-table-loading[data-mono-pending] {\r\n  display: block;\r\n  align-items: stretch;\r\n  background: transparent;\r\n  backdrop-filter: none;\r\n  -webkit-backdrop-filter: none;\r\n  pointer-events: none;\r\n}\r\n\r\n:is([mono-table-skeleton], .mono-table-skeleton) {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:is([mono-table-skeleton-row], .mono-table-skeleton-row) {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:is([mono-table-skeleton-cell], .mono-table-skeleton-cell) {\r\n  flex: none;\r\n  box-sizing: border-box;\r\n  padding-inline: 0.75rem;\r\n}\r\n\r\n:is([mono-table-skeleton-bar], .mono-table-skeleton-bar) {\r\n  display: block;\r\n  width: 100%;\r\n  height: calc(var(--_mono-table-th-height, 2.5rem) * 0.4);\r\n  border-radius: var(--mono-skeleton-radius, var(--mono-radius-sm, 0.25rem));\r\n  background: var(--mono-skeleton-bg, var(--mono-mode-surface-hover, var(--muted)));\r\n}\r\n\r\n/* The row `mono-table-loading` builds for itself when it is dropped straight into\r\n   a row section (see `_ensureRowHost`). It is a host, not a layout participant:\r\n   any height, padding or border here would open a permanent gap under the header\r\n   whether or not anything is loading. */\r\n/* `!important` for the same reason as `[mono-error-row] > td` below: this\r\n   cell is a host, not content, and a consumer's generic `td { padding }` would\r\n   otherwise open a permanent gap under the header — on a row whose entire job is\r\n   to occupy no space at all. */\r\n:is([mono-loading-row],.mono-table-loading-row),\r\n:is([mono-loading-row],.mono-table-loading-row) > td {\r\n  height: 0 !important;\r\n  padding: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\n:is([mono-loading-spinner],.mono-table-spinner) {\r\n  box-sizing: border-box;\r\n  width: var(--_mono-table-spinner-size);\r\n  height: var(--_mono-table-spinner-size);\r\n  border: var(--_mono-table-spinner-width) solid var(--_mono-table-spinner-color);\r\n  border-right-color: transparent;\r\n  border-radius: 50%;\r\n  animation: mono-table-spin var(--_mono-table-spinner-speed) linear infinite;\r\n\r\n  /* Stay in the VISIBLE area of a table that scrolls.\r\n\r\n     The overlay covers the whole table — that is what keeps every column and row dimmed\r\n     however far you have scrolled — but the centre of a wide or long table is far outside\r\n     the scrollport, and a spinner you have to scroll to find reads as no spinner at all.\r\n\r\n     So the spinner is pinned a constant distance below the header instead. Only `top` is\r\n     set: a second inset on the same axis gives sticky two edges to satisfy and it slides\r\n     between them as you scroll, which is what made the old `inset: 1rem` drift. The header\r\n     offset is measured and published by the element (0 unless the header is frozen). */\r\n  position: sticky;\r\n  top: calc(var(--mono-table-loading-head, 0px) + var(--_mono-table-loading-gap, 1.25rem));\r\n  /* `auto` = no horizontal stickiness, so a table with no scroll region keeps the flex\r\n     centring below and this costs it nothing. The offset is handed down by the overlay\r\n     (next rule) only where there IS a scrollport to centre on. */\r\n  left: var(--mono-table-loading-x, auto);\r\n}\r\n\r\n/* Centre the spinner on the SCROLLPORT rather than on the table, so it lands in the middle\r\n   of what you can actually see at any horizontal offset.\r\n\r\n   Both halves are scoped to `[mono-table-scroll]`. `cqw` with no query container resolves\r\n   against the small VIEWPORT, which would throw the spinner off a table that has no scroll\r\n   region — and there the default `justify-content: center` already centres it on the table,\r\n   which for a table that does not scroll is the same place. `:has()` keeps the containment\r\n   off scrollers this feature never touches — keyed on the ELEMENT, not on the row it generates,\r\n   so a `<caption>` or hand-written `<td>` host gets the same treatment.\r\n\r\n   The offset travels as a custom property on the OVERLAY rather than as a rule on the\r\n   spinner, so the shadow build gets it too: this sheet styles the light-DOM\r\n   `mono-shadow-table-loading` host, and the value inherits across the shadow boundary to\r\n   the spinner — where a `[mono-table-scroll] <spinner>` descendant selector never would. */\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-table-loading),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-shadow-table-loading),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-table-error),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-shadow-table-error) {\r\n  container-type: inline-size;\r\n}\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) mono-table-loading,\r\n:is([mono-table-scroll],.mono-table-scroll) mono-shadow-table-loading {\r\n  justify-content: flex-start;\r\n  --mono-table-loading-x: calc(50cqw - var(--_mono-table-spinner-size) / 2);\r\n}\r\n\r\n@keyframes mono-table-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* ── Header filter (mono-table-th `header-filter`) ───────────────────────────\r\n   Right-click a header → `[mono-th-menu]` (one \"Header Filter\" item) → the\r\n   cascading `[mono-th-filter]` panel of the column's distinct values. Both panels\r\n   are body-portaled by PopupPortalController (position:fixed, top/left applied),\r\n   so they escape the table/card's clipping/stacking. The panels re-declare the\r\n   `--mono-table-*` token chain so they theme correctly at the body root; the\r\n   portal also mirrors the table's classes (color themes flow through). */\r\n\r\n/* The root block above gives a panel the whole chain; these are the few values\r\n   a POPOVER resolves differently. Its surface is `--popover` and its ink\r\n   `--popover-foreground` — a panel floats over the page, not in the table — and\r\n   its hover is a real wash rather than the deliberately-off row hover. */\r\n:is([mono-th-menu],.mono-th-menu),\r\n:is([mono-th-filter],.mono-th-filter),\r\n:is([mono-search-panel],.mono-table-search-panel),\r\n:is([mono-search-more-panel],.mono-table-search-more-panel),\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  --_mono-table-surface: var(--mono-table-surface, var(--popover));\r\n  --_mono-table-text: var(--mono-table-text, var(--popover-foreground));\r\n  --_mono-table-ink-mid: var(--mono-table-ink-mid, color-mix(in oklab, var(--popover-foreground) 82%, transparent));\r\n  --_mono-table-hover-bg: var(--mono-table-hover-bg, color-mix(in oklab, var(--muted) 50%, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1\r\n   The chrome every portaled table panel shares — the header filter, the column\r\n   menu and its submenu, and the search suggestions. One set of knobs so a\r\n   flavour moves all four at once, exactly as it moves the select's and the\r\n   dropdown's popovers. */\r\n:is([mono-th-menu],.mono-th-menu),\r\n:is([mono-th-filter],.mono-th-filter),\r\n:is([mono-search-panel],.mono-table-search-panel),\r\n:is([mono-search-more-panel],.mono-table-search-more-panel),\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  --_mono-table-panel-bg: var(--mono-table-panel-bg, var(--popover));\r\n  --_mono-table-panel-color: var(--mono-table-panel-color, var(--popover-foreground));\r\n  --_mono-table-panel-radius: var(--mono-table-panel-radius, var(--mono-radius-md));\r\n  --_mono-table-panel-ring: var(--mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-table-panel-shadow: var(--mono-table-panel-shadow, var(--mono-shadow-md));\r\n}\r\n\r\n/* Header-filter funnel — a BUTTON that leads the header row (so it sits left of\r\n   the caption) and opens the filter. Always visible while `showIcon` is on: it is\r\n   the affordance, not just an active-filter badge.\r\n\r\n   Two signals mark a filtered column, and the GLYPH is the primary one:\r\n   `renderIcon('funnel')` renders `i-mdi-filter-outline` at rest and `i-mdi-filter`\r\n   once the column carries a filter. The colour below reinforces it — faint at\r\n   rest, accent once filtered — but is too easy to miss at 14px on its own. */\r\n:is([mono-th-filter-ind],.mono-th-filter-ind) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0 0.28rem 0 -0.15rem;\r\n  padding: 0.2rem 0.15rem;\r\n  border: 0;\r\n  background: none;\r\n  color: var(--_mono-table-faint);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  border-radius: var(--theme-radius-xs, 4px);\r\n  vertical-align: middle;\r\n  transition: color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n/* The funnel glyph itself. Light build: an empty <span> carrying `i-mdi-filter` /\r\n   `i-mdi-filter-outline`; shadow build: the inlined mdi SVG. Two things must be\r\n   restated here, and the descendant selector (specificity 0,2,0) is what makes\r\n   them stick in BOTH the layered prod bundle and the unlayered dev server:\r\n     · `display` — under presetWind4, preset-icons emits none, so a bare `i-*`\r\n       span is `inline` and collapses to 0x0 (invisible).\r\n     · `width`/`height` — preset-icons sizes to `1.2em`; the funnel is a fixed\r\n       0.875rem box (the 14px the inline SVG used to hard-code).\r\n   The SVG build inherits the same box, so both render identically. */\r\n:is([mono-th-filter-ind],.mono-th-filter-ind) :is([mono-th-filter-glyph],.mono-th-filter-glyph),\r\n:is([mono-th-menu-ic],.mono-th-menu-ic) :is([mono-th-filter-glyph],.mono-th-filter-glyph) {\r\n  display: block;\r\n  width: 0.875rem;\r\n  height: 0.875rem;\r\n  flex-shrink: 0;\r\n}\r\n:is([mono-th-filter-ind],.mono-th-filter-ind):hover,\r\n:is([mono-th-filter-ind],.mono-th-filter-ind):focus-visible {\r\n  color: var(--_mono-table-accent);\r\n  outline: none;\r\n}\r\n:is([mono-th-filter-ind],.mono-th-filter-ind):focus-visible {\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--_mono-table-accent) 30%, transparent);\r\n}\r\n/* Filtered → the funnel switches COLOUR, on top of the outlined→filled glyph swap\r\n   the builds' `renderIcon('funnel')` already made (it used to switch `display`). */\r\nmono-table-th[data-filtered] :is([mono-th-filter-ind],.mono-th-filter-ind),\r\nmono-shadow-table-th[data-filtered] :is([mono-th-filter-ind],.mono-th-filter-ind),\r\n:host([data-filtered]) :is([mono-th-filter-ind],.mono-th-filter-ind) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n\r\n\r\n/* ── Required-column marker (mono-table-th `required`) ───────────────────────\r\n   The header lays out as three independent boxes — funnel, caption, sort arrow —\r\n   so a marker placed among them drifts away from the text the moment the header\r\n   wraps (a narrow column puts the funnel on its own line above the caption). It\r\n   is rendered INSIDE this wrapper with the label instead, and an inline-flex\r\n   container with the default `nowrap` cannot break between its two items, so the\r\n   `*` and the caption stay together at any width. The wrapper is only emitted for\r\n   a marked column. */\r\n:is([mono-th-caption],.mono-th-caption) {\r\n  display: inline-flex;\r\n  /* Baseline, NOT `flex-start`: the group is as tall as the label's whole line\r\n     box, so top-aligning threw the `*` up to the top of that box — visibly adrift\r\n     above the word rather than attached to it. Sharing the baseline puts it where\r\n     a superscript belongs, and the asterisk glyph already sits high in its own em\r\n     box, so it lands around the caption's cap height with no raise of its own. */\r\n  align-items: baseline;\r\n  /* No gap: the marker supplies its own hair of margin. A gap here would space it\r\n     off the caption the way the funnel and the sort arrow are spaced — which is\r\n     what made a narrow column read as `AGE * ↑` with the `*` crowding the arrow. */\r\n  gap: 0;\r\n  /* The label may be squeezed in a narrow column; the marker must not be, so give\r\n     the group a shrinkable floor and pin the marker below. */\r\n  min-width: 0;\r\n}\r\n/* The same red `*` the form controls draw for their own `required`\r\n   (`.mono-input-required`), so one marker means one thing across the library.\r\n   It is deliberately NOT sized like the header's other marks: the funnel and the\r\n   sort caret are fixed ~0.875rem boxes that reserve a slot of their own, while\r\n   this is a hairline glyph that hangs off the end of the caption. `flex: 0 0 auto`\r\n   keeps it from being shrunk into the text or stretched into a box, and a\r\n   `line-height` under the label's own means it cannot grow the header row.\r\n   `<sup>` is a flex item here, so its native `vertical-align: super` does nothing\r\n   — the shared baseline above plus the glyph's own height is what raises it. */\r\n:is([mono-th-required],.mono-th-required) {\r\n  flex: 0 0 auto;\r\n  margin-left: 0.1em;\r\n  color: var(--_mono-table-error);\r\n  font-size: 0.75em;\r\n  line-height: 1;\r\n}\r\n\r\n/* Icon-less sort (`sort.showIcon: false`) — the caption itself is the button, so\r\n   strip the arrow-sized padding and let it inherit the header's typography. */\r\n:is([mono-sort-head],.mono-table-sort-head):is([mono-no-icon],.no-icon) :is([mono-sort-btn],.mono-table-sort-btn):is([mono-label-trigger],.label-trigger) {\r\n  margin: 0;\r\n  padding: 0;\r\n  line-height: inherit;\r\n  letter-spacing: inherit;\r\n  text-transform: inherit;\r\n}\r\n\r\n/* The small right-click menu. */\r\n:is([mono-th-menu],.mono-th-menu) {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  min-width: 158px;\r\n  padding: 0.25rem;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n  font-size: 0.82rem;\r\n}\r\n:is([mono-th-menu],.mono-th-menu):is([mono-open],.open) {\r\n  display: block;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item) {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  width: 100%;\r\n  padding: 0.42rem 0.5rem;\r\n  border: 0;\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  background: transparent;\r\n  color: var(--_mono-table-text);\r\n  cursor: pointer;\r\n  font: inherit;\r\n  text-align: left;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item):hover {\r\n  background: var(--_mono-table-soft);\r\n}\r\n/* \"Clear all sorting\" while nothing is sorted — inert, and no hover affordance. */\r\n:is([mono-th-menu-item],.mono-th-menu-item):disabled {\r\n  opacity: 0.45;\r\n  cursor: default;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item):disabled:hover {\r\n  background: transparent;\r\n}\r\n:is([mono-th-menu-label],.mono-th-menu-label) {\r\n  flex: 1;\r\n}\r\n:is([mono-th-menu-ic],.mono-th-menu-ic),\r\n:is([mono-th-menu-caret],.mono-th-menu-caret),\r\n:is([mono-th-menu-check],.mono-th-menu-check) {\r\n  display: inline-flex;\r\n  color: var(--_mono-table-muted);\r\n}\r\n/* Divider between the Sort and Header Filter sections when a column has both,\r\n   and above \"Clear all sorting\" in the Sort submenu. */\r\n:is([mono-th-menu-sep],.mono-th-menu-sep) {\r\n  height: 1px;\r\n  margin: 0.25rem 0.1rem;\r\n  background: var(--_mono-table-border);\r\n}\r\n/* The Sort submenu reuses `[mono-th-menu]`'s surface/border/shadow — only its\r\n   sizing differs, so there is no duplicated box styling here. Wide enough for\r\n   \"Clear all sorting\" to sit on one line. */\r\n:is([mono-th-submenu],.mono-th-submenu) {\r\n  min-width: 176px;\r\n}\r\n/* The active direction in the Sort submenu. */\r\n:is([mono-th-menu-item],.mono-th-menu-item):is([mono-active],.active) {\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item):is([mono-active],.active) :is([mono-th-menu-ic],.mono-th-menu-ic),\r\n:is([mono-th-menu-item],.mono-th-menu-item):is([mono-active],.active) :is([mono-th-menu-check],.mono-th-menu-check) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n\r\n/* The cascading distinct-values panel. */\r\n:is([mono-th-filter],.mono-th-filter) {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  width: 244px;\r\n  flex-direction: column;\r\n  background: var(--_mono-table-panel-bg);\r\n  color: var(--_mono-table-panel-color);\r\n  /* a RING, not a border — upstream draws the edge in the shadow so the corner\r\n     stays clean at every radius the flavours ask for */\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius);\r\n  box-shadow: var(--_mono-table-panel-ring), var(--_mono-table-panel-shadow);\r\n  font-size: var(--_mono-table-font);\r\n  /* `clip`, not `hidden`: a `hidden` box is still PROGRAMMATICALLY scrollable, so\r\n     anything that focuses an off-box descendant scrolls the panel away and it\r\n     reads blank. `clip` cannot scroll at all. The list keeps its own scrollport,\r\n     and the sticky \"(Select all)\" sticks against that, not against this. */\r\n  overflow: clip;\r\n}\r\n:is([mono-th-filter],.mono-th-filter):is([mono-open],.open) {\r\n  display: flex;\r\n}\r\n:is([mono-th-filter-head],.mono-th-filter-head) {\r\n  padding: 0.55rem 0.65rem;\r\n  font-weight: 600;\r\n  color: var(--_mono-table-text);\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n}\r\n:is([mono-th-filter-search],.mono-th-filter-search) {\r\n  padding: 0.5rem 0.55rem 0.35rem;\r\n}\r\n:is([mono-th-filter-input],.mono-th-filter-input) {\r\n  width: 100%;\r\n  padding: 0.38rem 0.55rem;\r\n  border: 1px solid var(--_mono-table-border);\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  font: inherit;\r\n  color: var(--_mono-table-text);\r\n  background: var(--_mono-table-panel-bg, var(--_mono-table-surface));\r\n}\r\n\r\n/* A host page's own placeholder colour reaches a portaled panel like anything\r\n   else — VitePress paints one in its brand purple — so state it. */\r\n:is([mono-th-filter-input],.mono-th-filter-input)::placeholder,\r\n:is([mono-search-panel],.mono-table-search-panel) input::placeholder {\r\n  color: var(--_mono-table-muted);\r\n  opacity: 1;\r\n}\r\n:is([mono-th-filter-input],.mono-th-filter-input):focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-table-accent);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-table-accent) 18%, transparent);\r\n}\r\n:is([mono-th-filter-list],.mono-th-filter-list) {\r\n  max-height: 224px;\r\n  overflow-y: auto;\r\n  /* Don't chain to the document at the ends of the list. This panel is\r\n     `position: fixed` and body-portaled, and PopupPortalController re-anchors it\r\n     to the funnel on every window scroll — so a chained scroll drags the panel\r\n     off-screen with its header and the list just reads as \"blank\". */\r\n  overscroll-behavior: contain;\r\n  padding: 0.15rem 0.35rem 0.25rem;\r\n}\r\n:is([mono-th-filter-msg],.mono-th-filter-msg) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 1rem 0.6rem;\r\n  color: var(--_mono-table-muted);\r\n  text-align: center;\r\n}\r\n:is([mono-th-filter-msg-text],.mono-th-filter-msg-text) {\r\n  font-size: 0.82rem;\r\n}\r\n:is([mono-th-retry],.mono-th-retry) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  padding: 0.3rem 0.7rem;\r\n  border: 1px solid var(--_mono-table-border);\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  background: transparent;\r\n  color: var(--_mono-table-accent);\r\n  font: inherit;\r\n  font-size: 0.78rem;\r\n  cursor: pointer;\r\n}\r\n:is([mono-th-retry],.mono-th-retry):hover {\r\n  background: var(--_mono-table-soft);\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-retry],.mono-th-retry) svg {\r\n  color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-filter-spin],.mono-th-filter-spin) {\r\n  display: inline-block;\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n  margin-right: 0.4rem;\r\n  border: 2px solid var(--_mono-table-accent);\r\n  border-right-color: transparent;\r\n  border-radius: 50%;\r\n  vertical-align: -0.15rem;\r\n  animation: mono-table-spin 0.65s linear infinite;\r\n}\r\n\r\n/* Native checkbox rows, styled to match mono-checkbox. */\r\n:is([mono-th-check],.mono-th-check) {\r\n  /* LOAD-BEARING (same line `.mono-checkbox` carries). The real <input> below is\r\n     `position: absolute`, so without a positioned row it resolves against the\r\n     PANEL — it then stays put while the list scrolls, lands outside the panel's\r\n     box, and clicking the label focuses it, making the browser scroll the\r\n     `overflow` panel to reach it. The whole panel scrolls away and reads blank. */\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.55rem;\r\n  padding: 0.34rem 0.4rem;\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  cursor: pointer;\r\n  color: var(--_mono-table-text);\r\n}\r\n:is([mono-th-check],.mono-th-check):hover {\r\n  background: var(--_mono-table-soft);\r\n}\r\n:is([mono-th-check],.mono-th-check) input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n}\r\n:is([mono-th-check-box],.mono-th-check-box) {\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  border: 2px solid color-mix(in oklab, var(--_mono-table-border) 72%, var(--_mono-table-muted));\r\n  border-radius: 0.3rem;\r\n  background: var(--_mono-table-surface);\r\n  transition:\r\n    background-color 0.15s ease,\r\n    border-color 0.15s ease;\r\n}\r\n:is([mono-th-check],.mono-th-check) input:checked ~ :is([mono-th-check-box],.mono-th-check-box) {\r\n  background: var(--_mono-table-accent);\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-check],.mono-th-check) input:checked ~ :is([mono-th-check-box],.mono-th-check-box)::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 4px;\r\n  top: 1px;\r\n  width: 4px;\r\n  height: 8px;\r\n  border: solid var(--_mono-table-on-accent);\r\n  border-width: 0 2px 2px 0;\r\n  transform: rotate(45deg);\r\n}\r\n:is([mono-th-check],.mono-th-check) input:focus-visible ~ :is([mono-th-check-box],.mono-th-check-box) {\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-table-accent) 20%, transparent);\r\n}\r\n/* Tri-state: a partly-ticked period (some of its months, not all) shows a dash. */\r\n:is([mono-th-check],.mono-th-check) input:indeterminate ~ :is([mono-th-check-box],.mono-th-check-box) {\r\n  background: var(--_mono-table-accent);\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-check],.mono-th-check) input:indeterminate ~ :is([mono-th-check-box],.mono-th-check-box)::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 2px;\r\n  right: 2px;\r\n  top: 5px;\r\n  height: 2px;\r\n  background: var(--_mono-table-surface);\r\n  border: 0;\r\n  transform: none;\r\n}\r\n\r\n/* ── Date filter: the value list as a year → … → second tree ────────────────\r\n   Same rows as the plain list (`[mono-th-check]`), each preceded by an expand\r\n   chevron and indented per level. Only periods that occur in the data exist,\r\n   so a leaf is a node with nothing below it (its chevron is hidden, not\r\n   removed, to keep the labels aligned). */\r\n:is([mono-th-tree],.mono-th-tree) {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n:is([mono-th-tree-row],.mono-th-tree-row) {\r\n  display: flex;\r\n  align-items: center;\r\n  padding-left: calc(var(--mono-th-tree-indent, 1rem) * var(--_level, 0));\r\n}\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='1'] { --_level: 1; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='2'] { --_level: 2; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='3'] { --_level: 3; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='4'] { --_level: 4; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='5'] { --_level: 5; }\r\n:is([mono-th-tree-row],.mono-th-tree-row) > :is([mono-th-check],.mono-th-check) {\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0.3rem;\r\n  background: transparent;\r\n  color: var(--_mono-table-faint);\r\n  cursor: pointer;\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle)[hidden] {\r\n  display: inline-flex;\r\n  visibility: hidden;\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle):hover {\r\n  background: var(--_mono-table-soft);\r\n  color: var(--_mono-table-text);\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle) > svg,\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle) > .mono-icon {\r\n  width: 0.85rem;\r\n  height: 0.85rem;\r\n  transition: transform 0.15s ease; /* the glyph points right; open turns it down */\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle):is([mono-open],.open) > svg,\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle):is([mono-open],.open) > .mono-icon {\r\n  transform: rotate(90deg);\r\n}\r\n:is([mono-th-check-label],.mono-th-check-label) {\r\n  flex: 1;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n:is([mono-th-check-count],.mono-th-check-count) {\r\n  color: var(--_mono-table-faint);\r\n  font-variant-numeric: tabular-nums;\r\n  font-size: 0.76rem;\r\n}\r\n/* `(Select all)` pins to the top of the scrolling value list so it stays reachable\r\n   in a long column. `[mono-th-filter-list]` is the scrollport (max-height +\r\n   overflow-y), so `top: 0` sticks against it. An opaque background is required —\r\n   without it the scrolling rows would show through. The negative top padding\r\n   compensates for the list's own padding so nothing peeks above the pinned row. */\r\n:is([mono-th-check-all],.mono-th-check-all) {\r\n  position: sticky;\r\n  top: -0.15rem;\r\n  z-index: 1;\r\n  background: var(--_mono-table-surface);\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n  border-radius: 0;\r\n  margin-bottom: 0.15rem;\r\n  font-weight: 600;\r\n}\r\n\r\n/* Footer actions. */\r\n/* MUST wrap: the panel is a fixed width, so a fourth button (\"Clear all\", only\r\n   present on the multi-column menu path) or a longer translation overflows the\r\n   row — and an overflowing button sits OUTSIDE the panel box, where its own\r\n   click reads as an outside-click and dismisses the panel instead of firing. */\r\n:is([mono-th-filter-foot],.mono-th-filter-foot) {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  padding: 0.5rem 0.55rem;\r\n  border-top: 1px solid var(--_mono-table-border-lite);\r\n}\r\n:is([mono-th-filter-foot-sp],.mono-th-filter-foot-sp) {\r\n  flex: 1 1 0;\r\n  min-width: 0;\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn) {\r\n  padding: 0.34rem 0.72rem;\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  border: 1px solid transparent;\r\n  font: inherit;\r\n  font-size: 0.8rem;\r\n  line-height: 1.2;\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-ghost],.ghost) {\r\n  background: transparent;\r\n  border-color: var(--_mono-table-border);\r\n  color: var(--_mono-table-text);\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-ghost],.ghost):hover {\r\n  background: var(--_mono-table-soft);\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-primary],.primary) {\r\n  background: var(--_mono-table-accent);\r\n  color: var(--_mono-table-on-accent);\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-primary],.primary):hover {\r\n  filter: brightness(0.96);\r\n}\r\n\r\n/* ── Native table base: W3Schools-style full-width table ────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table — w-full caption-bottom text-sm */\r\n:is([mono-table],.mono-table) {\r\n  /* A prose stylesheet that makes tables scroll — VitePress does exactly this\r\n     (`.vp-doc table { display: block; overflow-x: auto }`), and so do most\r\n     typography plugins — takes the table out of table layout entirely, and the\r\n     columns stop distributing the width. Upstream assumes a real table and\r\n     hands the scrolling to `.table-container`; state it so the assumption holds\r\n     on a host page that disagrees. */\r\n  display: table;\r\n  width: 100%;\r\n  caption-side: bottom;\r\n  font-size: var(--_mono-table-font);\r\n  line-height: var(--_mono-table-line-height);\r\n  color: var(--_mono-table-text);\r\n  /* `border-collapse: separate` — NOT upstream's default. A collapsed border\r\n     stays at the cell's flow position, so a sticky head, a sticky foot and a\r\n     pinned column all lose their edge the moment they leave it. */\r\n  border-collapse: separate;\r\n  border-spacing: 0;\r\n  border: var(--_mono-table-outer-border);\r\n  border-radius: var(--_mono-table-radius);\r\n  /* Resolved HERE, above any cell that re-points the token for its editors —\r\n     see the `font-size` note on `[mono-table] td`. */\r\n  --_mono-table-cell-font: var(--mono-table-cell-font, var(--theme-control-font-lg, 0.84rem));\r\n\r\n  /* Same trick, same reason: an editor cell sets `--theme-control-height-*: auto`\r\n     to flatten a FIELD, but checkbox / radio / switch derive their actual box size\r\n     from that token (`calc(token * 0.5)`), and `calc(auto * 0.5)` is invalid — the\r\n     box collapses to 0x0. Snapshot the real values here, above the override, so\r\n     those three can restore them further down. */\r\n  --_mono-table-ch-xs: var(--theme-control-height-xs);\r\n  --_mono-table-ch-sm: var(--theme-control-height-sm);\r\n  --_mono-table-ch-md: var(--theme-control-height-md);\r\n  --_mono-table-ch-lg: var(--theme-control-height-lg);\r\n  --_mono-table-ch-xl: var(--theme-control-height-xl);\r\n  --_mono-table-ch-xxl: var(--theme-control-height-xxl);\r\n  /* ...and the --mono-* vocabulary the ported controls read (checkbox today; radio\r\n     and switch join as they are ported — box = token × 4/9). */\r\n  --_mono-table-mch-xs: var(--mono-control-height-xs);\r\n  --_mono-table-mch-sm: var(--mono-control-height-sm);\r\n  --_mono-table-mch-md: var(--mono-control-height-md);\r\n  --_mono-table-mch-lg: var(--mono-control-height-lg);\r\n  --_mono-table-mch-xl: var(--mono-control-height-xl);\r\n  --_mono-table-mch-xxl: var(--mono-control-height-xxl);\r\n  /* ...and the border width: the editor cell zeroes `--mono-border-width` /\r\n     `--theme-border-width` to flatten a FIELD, but a ported checkbox (and radio /\r\n     switch as they port) draws its box's outline from the same token — an\r\n     unchecked box, which is outline only, went invisible in any table cell. */\r\n  --_mono-table-bw: var(--mono-border-width);\r\n  --_mono-table-tbw: var(--theme-border-width);\r\n}\r\n\r\n/* Optional: equal-width columns.\r\n   Use only when you want every column to have the same width. */\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) {\r\n  table-layout: fixed;\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) th,\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Optional: wide scroll mode.\r\n   Use only when you want the table wider than its container. */\r\n:is([mono-table],.mono-table):is([mono-wide],.mono-table-wide) {\r\n  min-width: max-content;\r\n}\r\n\r\n/* ── Table visual style ─────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table thead — [&_tr]:border-b\r\n   The head had a two-stop gradient; the port allows none, and upstream paints\r\n   the head nothing at all — it is the page under a bottom rule. */\r\n:is([mono-table],.mono-table) thead {\r\n  background: transparent;\r\n}\r\n/* On the CELL, not the section: a host page that paints `th` (VitePress does,\r\n   with its soft surface) would otherwise cover whatever the section carried.\r\n   At (0,1,2) this beats a host's (0,1,1), and the sticky head's (0,2,2) still\r\n   beats this. */\r\n:is([mono-table],.mono-table) thead th {\r\n  background: var(--_mono-table-head-bg, transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table td — p-2 align-middle whitespace-nowrap */\r\n:is([mono-table],.mono-table) td {\r\n  padding: var(--_mono-table-cell-pad);\r\n  text-align: start;\r\n  vertical-align: middle;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table th — text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap */\r\n:is([mono-table],.mono-table) th {\r\n  height: var(--_mono-table-th-height);\r\n  padding: 0 var(--_mono-table-th-pad-x);\r\n  text-align: start;\r\n  vertical-align: middle;\r\n  font-size: var(--_mono-table-th-font);\r\n  font-weight: var(--_mono-table-th-weight);\r\n  color: var(--_mono-table-th-color);\r\n  text-transform: var(--_mono-table-th-transform);\r\n  letter-spacing: var(--_mono-table-th-tracking);\r\n  white-space: nowrap;\r\n  user-select: none;\r\n  /* `thead [&_tr]:border-b` — carried on the cell, not the row, because a\r\n     `border-collapse: separate` table paints no row border at all. */\r\n  border-bottom: var(--mono-border-width) solid var(--_mono-table-border);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table caption — text-muted-foreground mt-4 text-sm */\r\n:is([mono-table],.mono-table) caption {\r\n  margin-top: calc(var(--mono-spacing) * 4);\r\n  color: var(--_mono-table-muted);\r\n  font-size: var(--_mono-table-font);\r\n}\r\n\r\n/* ── Sortable header control (<mono-table-sort> inside a <th>) ───────────── */\r\n/* Label + arrow row. The LABEL IS NOT INTERACTIVE — only the arrow button sorts,\r\n   so clicking the caption text (to select it, or on the way to a header filter)\r\n   never reorders the table. */\r\n:is([mono-sort-head],.mono-table-sort-head) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n}\r\n:is([mono-sort-btn],.mono-table-sort-btn) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  /* The arrow alone is a small target, so pad it out to a comfortable hit area\r\n     without letting the padding push the header row taller. */\r\n  margin: 0 -0.15rem;\r\n  padding: 0.2rem 0.15rem;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  border-radius: var(--theme-radius-xs, 4px);\r\n  transition: color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n:is([mono-sort-btn],.mono-table-sort-btn):hover,\r\n:is([mono-sort-btn],.mono-table-sort-btn):focus-visible {\r\n  color: var(--_mono-table-accent);\r\n  outline: none;\r\n}\r\n:is([mono-sort-btn],.mono-table-sort-btn):focus-visible {\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--_mono-table-accent) 30%, transparent);\r\n}\r\n/* Sort indicator rendered at the end of the header text. A single icon whose\r\n   GLYPH encodes the state: neutral `i-fluent-arrow-sort-16-filled` when unsorted,\r\n   `i-ri-arrow-up-long-fill` / `i-ri-arrow-down-long-fill` when sorted (see the\r\n   builds' `renderIcon`). Colour still signals active vs. idle. */\r\n:is([mono-sort-ind],.mono-table-sort-ind) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 0; /* no extra line-box height so it stays compact */\r\n  flex-shrink: 0;\r\n}\r\n/* Faint by default (a hint that the column is sortable). The descendant selector\r\n   (specificity 0,2,0) is deliberate: it must beat preset-icons' `1.2em`\r\n   width/height in BOTH the layered prod bundle and the unlayered dev server so\r\n   the box is fixed. A single square box; both the 16- and 24-viewBox glyphs scale\r\n   into it. */\r\n:is([mono-sort-ind],.mono-table-sort-ind) :is([mono-sort-caret],.mono-table-sort-caret) {\r\n  display: block;\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n  color: var(--_mono-table-faint);\r\n  transition: color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n/* Once sorted (asc or desc — anything but `none`), the directional arrow darkens\r\n   to the header text colour. */\r\n:is([mono-sort-btn],.mono-table-sort-btn):not([data-dir='none']) :is([mono-sort-caret],.mono-table-sort-caret) {\r\n  color: var(--_mono-table-text);\r\n}\r\n/* Hover/focus feedback now has to target the CARET: the button wraps only the\r\n   icon, so the inherited `color` on the button can't reach past the descendant\r\n   rules above. Same specificity as the sorted rule (0,3,0) — it must stay AFTER\r\n   it to win the tie and highlight an already-sorted column too. */\r\n:is([mono-sort-btn],.mono-table-sort-btn):hover :is([mono-sort-caret],.mono-table-sort-caret),\r\n:is([mono-sort-btn],.mono-table-sort-btn):focus-visible :is([mono-sort-caret],.mono-table-sort-caret) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n/* Multi-column sort precedence, rendered beside the arrow. Only present when TWO\r\n   OR MORE columns are sorted — a lone sorted column shows just the arrow, so the\r\n   ordinary case looks unchanged. */\r\n:is([mono-sort-seq],.mono-table-sort-seq) {\r\n  /* `<sup>` defaults to a relative baseline shift; keep it but make it compact so\r\n     it can't grow the header line box. */\r\n  font-size: 0.62em;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n  margin-left: 0.1em;\r\n  color: var(--_mono-table-accent);\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n\r\n:is([mono-table],.mono-table) td {\r\n  /* Read through an alias resolved on `[mono-table]`, NOT the token directly: an\r\n     editing cell re-points `--theme-control-font-*` to `1em` for its editors,\r\n     and since a custom property is visible to the element that sets it, a direct\r\n     `var(--theme-control-font-lg)` here would resolve to `1em` and blow the\r\n     cell's own text up to the inherited size. */\r\n  font-size: var(--_mono-table-cell-font);\r\n  color: var(--_mono-table-ink-mid);\r\n}\r\n\r\n/* ── Row background ──────────────────────────────────────────────────────────\r\n   ONE variable decides a row's colour and everything else reads it: the row\r\n   itself, and the sticky column's cells further down.\r\n   That matters because a `<td>` background always covers the `<tr>`'s, so a\r\n   pinned cell cannot inherit the row's paint — it has to restate it. Restating\r\n   it by hand meant five near-duplicate blocks that drifted (group rows were\r\n   never added to them, so a pinned cell on a group row kept the plain surface).\r\n   With `--_mono-table-row-bg`, a row state is declared once and the pinned cell\r\n   follows for free.\r\n\r\n   Every rule that decides a row colour sets the variable AND repeats\r\n   `background: var(--_mono-table-row-bg)`. The repeat is not redundant: a rule\r\n   that only sets the variable leaves the `background` DECLARATION down here on\r\n   the base rule, at its low specificity (0,1,2) — so any competing `tr`\r\n   background from the host page wins and the row paints as if mono had said\r\n   nothing. VitePress does exactly that (`.vp-doc tr:nth-child(2n)`, (0,2,1)),\r\n   which turned every even row transparent the first time this was written.\r\n   Repeating the declaration carries the paint at each rule's own specificity.\r\n\r\n   The row is OPAQUE by default. It used to have no background at all, so odd\r\n   rows were fully transparent while even rows were painted opaque near-white —\r\n   which reads as stripes only if the table happens to sit on white, and as\r\n   \"some rows transparent, some grey\" anywhere else. For a see-through table,\r\n   set `--mono-table-surface: transparent`. */\r\n/* basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors */\r\n:is([mono-table],.mono-table) tbody tr {\r\n  --_mono-table-row-bg: var(--_mono-table-surface);\r\n  background: var(--_mono-table-row-bg);\r\n  transition: background-color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n\r\n/* The rule is on the CELL: a `border-collapse: separate` table paints no border\r\n   for a `<tr>` at all. */\r\n:is([mono-table],.mono-table) tbody td {\r\n  border-bottom: var(--mono-border-width) solid var(--_mono-table-border-lite);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table tbody — [&_tr:last-child]:border-0 */\r\n:is([mono-table],.mono-table) tbody tr:last-child > td {\r\n  border-bottom: none;\r\n}\r\n\r\n/* Zebra, floor version: plain parity over every `<tr>` in the tbody. */\r\n:is([mono-table],.mono-table) tbody tr:nth-child(even) {\r\n  --_mono-table-row-bg: var(--_mono-table-zebra);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\n/* Zebra, corrected: `:nth-child(even of S)` counts only the siblings matching S,\r\n   which is the whole point — plain `:nth-child` counts rows the reader does not\r\n   see as rows. An open detail panel is a real `<tr>` (inserted by\r\n   mono-table-detail-core), virtual-scroll demos pad with spacer rows, and a\r\n   group header is a row too; each shifts the count, so stripes invert below an\r\n   expanded row and strobe while scrolling.\r\n\r\n   Behind @supports, and as a RESET + re-stripe pair, so an engine that cannot\r\n   parse `of S` keeps the floor rule above rather than losing striping entirely\r\n   (a dropped selector would be worse than the bug). @supports adds no\r\n   specificity, so these two are decided by source order — keep the reset first.\r\n\r\n   `[data-mono-stripe-skip]` is the escape hatch for a consumer's own non-data\r\n   rows; `[aria-hidden]` already covers spacer rows as the demos write them. */\r\n@supports selector(:nth-child(1 of :root)) {\r\n  :is([mono-table],.mono-table) tbody tr:nth-child(even) {\r\n    --_mono-table-row-bg: var(--_mono-table-surface);\r\n    background: var(--_mono-table-row-bg);\r\n  }\r\n\r\n  /* :where() ON PURPOSE. `:nth-child(of S)` takes S's specificity, and five\r\n     `:not()`s made this (0,7,2) — heavier than every row STATE below it (hover\r\n     (0,1,3), selected and editing (0,1,2), the dropdown-table's cursor), so on\r\n     an even row no state ever painted: a checked row kept its stripe. At (0,1,2)\r\n     it still beats the reset above it by order, and the states beat it the same\r\n     way. */\r\n  :is([mono-table],.mono-table) tbody tr:where(:nth-child(even of :not(:is([mono-detail-row],.mono-table-detail-row)):not(:is([mono-group-row],.mono-table-group-row)):not(:is([mono-filler],.mono-table-filler)):not([aria-hidden='true']):not([data-mono-stripe-skip]))) {\r\n    --_mono-table-row-bg: var(--_mono-table-zebra);\r\n    background: var(--_mono-table-row-bg);\r\n  }\r\n}\r\n\r\n:is([mono-table],.mono-table) tbody tr:hover {\r\n  --_mono-table-row-bg: var(--_mono-table-hover-bg);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\n/* ── Filling the scroll box ─────────────────────────────────────────────────\r\n   A table is only as tall as its rows, so a short result set leaves dead space\r\n   under the last row — and every line the rows carried stops there: a pinned\r\n   column's edge, a consumer's column rules, the row backgrounds. Against a\r\n   bordered scroll box that reads as a table cut off mid-way (DevExtreme's fixed\r\n   columns run their separators to the bottom of the grid).\r\n\r\n   `mono-table-fill` on the `<table>` stretches it to the box (`height: 100%`).\r\n   On its own that spreads the extra height over EVERY row, so pair it with one\r\n   `<tr class=\"mono-table-filler\">` at the END of the tbody: a row at `height:\r\n   100%` absorbs the whole remainder and the data rows keep their natural\r\n   height. Give it the same cells as a data row — empty, with the pinned classes\r\n   on the pinned ones — and each column's edge continues to the floor of the\r\n   box, the pinned ones included. Rendered by the consumer (the library cannot\r\n   emit a `<tr>`), e.g.\r\n\r\n     <tr class=\"mono-table-filler\"><td v-for=\"c in columns\" :class=\"stickyCls(c)\"></td></tr>\r\n\r\n   It is not a data row: no zebra stripe (it is outside the `of S` set above and\r\n   the floor rule is reset here), no hover tint, no row rule under it, no padding\r\n   — so an empty box costs no height when there is nothing to fill. Add it\r\n   unconditionally; with enough rows to overflow the box it collapses to zero. */\r\n:is([mono-table],.mono-table):is([mono-fill],.mono-table-fill) {\r\n  height: 100%;\r\n}\r\n:is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler),\r\n:is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler):hover {\r\n  height: 100%;\r\n  --_mono-table-row-bg: var(--_mono-table-surface);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n:is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler) > td {\r\n  padding: 0;\r\n  border-bottom: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table tr — data-[state=selected]:bg-muted\r\n   The pinned rail is mono's — upstream marks a selected row by its wash alone. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-selected],.mono-table-row-selected,.mono-dd-row-selected) {\r\n  --_mono-table-row-bg: var(--_mono-table-selected-bg);\r\n  background: var(--_mono-table-row-bg);\r\n  box-shadow: inset 3px 0 0 var(--_mono-table-accent);\r\n}\r\n\r\n/* ── Inline row editing (mono-table-th `:editable` + controller edit state) ───\r\n   Click (or double-click, per `editableTrigger`) a row → `mono-table-row-editing`. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-editing],.mono-table-row-editing),\r\n:is([mono-table],.mono-table) tbody tr:is([mono-editing],.mono-table-row-editing):hover {\r\n  --_mono-table-row-bg: color-mix(in oklab, var(--_mono-table-accent) 6%, var(--_mono-table-surface));\r\n  background: var(--_mono-table-row-bg);\r\n  box-shadow: inset 3px 0 0 var(--_mono-table-accent);\r\n}\r\n\r\n/* ── Seamless inline editors (automatic — no consumer setup) ──────────────────\r\n   A `<td>` that CONTAINS a mono form control is treated as an editing cell and\r\n   the control is flattened into it: no border, radius, shadow or background, and\r\n   no height of its own — so the editor's text lands exactly where the static\r\n   text was and the row doesn't grow when editing starts.\r\n\r\n   How it reaches every component INCLUDING the shadow builds: geometry\r\n   (radius / control height / border width) is publicly overridable only on\r\n   mono-input — select, tag-input, date and textarea read the `--theme-*` tokens\r\n   straight from their size rules. So re-point those tokens here. Custom\r\n   properties inherit through a shadow root; page-level rules against inner\r\n   classes (`.mono-select-trigger` …) would not.\r\n\r\n   NOTE: `--theme-radius-full` is deliberately left alone — the switch track and\r\n   thumb depend on it. Same for checkbox/switch sizing: they're glyph controls,\r\n   not text fields, so they only lose their resting shadow — their sizes AND their\r\n   border width are restored below (an unchecked checkbox is drawn by its border). */\r\n:is([mono-table],.mono-table) td:has(mono-input, mono-textarea, mono-select, mono-tag-input, mono-date,\r\n    mono-dropdown-table, mono-checkbox, mono-radio, mono-switch),\r\n:is([mono-table],.mono-table) td:has(mono-shadow-input, mono-shadow-textarea, mono-shadow-select,\r\n    mono-shadow-tag-input, mono-shadow-date, mono-shadow-dropdown-table,\r\n    mono-shadow-checkbox, mono-shadow-radio, mono-shadow-switch) {\r\n  /* geometry — the single lever that also reaches the shadow builds */\r\n  /* 0px, not 0: these tokens are also read inside calc() (a switch builds its\r\n     track from the border, a ring adds it to a shadow), and adding a UNITLESS\r\n     zero to a length makes the whole expression invalid — the switch track\r\n     collapsed to 0 height in an editor cell. */\r\n  --theme-border-width: 0px;\r\n  --theme-radius-xs: 0;\r\n  --theme-radius-sm: 0;\r\n  --theme-radius-md: 0;\r\n  --theme-radius-lg: 0;\r\n  --theme-radius-xl: 0;\r\n  /* `auto`, NOT 0 — this token feeds `min-height` on every field wrapper, so\r\n     zeroing it would let a field collapse below its own content. `auto` lets the\r\n     intrinsic line box size it, which is exactly the height of the static text it\r\n     replaces. `xs` belongs here too: without it an `xs` editor keeps a 24px strut\r\n     while the text it replaces is ~21px, and the row jumps on click. */\r\n  --theme-control-height-xs: auto;\r\n  --theme-control-height-sm: auto;\r\n  --theme-control-height-md: auto;\r\n  --theme-control-height-lg: auto;\r\n  --theme-control-height-xl: auto;\r\n  --theme-control-height-xxl: auto;\r\n  /* Ported (Basecoat) controls read the --mono-* vocabulary instead: the same\r\n     levers, restated. mono-input, mono-select, mono-date and mono-tag-input read these today; the rest join as they are\r\n     ported, and the --theme-* lines above go in 2.0. */\r\n  --mono-border-width: 0px;\r\n  --mono-control-height-xs: auto;\r\n  --mono-control-height-sm: auto;\r\n  --mono-control-height-md: auto;\r\n  --mono-control-height-lg: auto;\r\n  --mono-control-height-xl: auto;\r\n  --mono-control-height-xxl: auto;\r\n  /* tag-input / dropdown-table cap their chip height by the field height (chip-fit); with the\r\n     heights at `auto` here that calc is invalid, so pin the chips to their fixed sizes. */\r\n  --mono-tag-input-chip-height-xs: calc(var(--mono-spacing) * 4.5);\r\n  --mono-tag-input-chip-height-sm: calc(var(--mono-spacing) * 5);\r\n  --mono-tag-input-chip-height-md: calc(var(--mono-spacing) * 5.5);\r\n  --mono-tag-input-chip-height-lg: calc(var(--mono-spacing) * 6);\r\n  --mono-tag-input-chip-height-xl: calc(var(--mono-spacing) * 6.5);\r\n  --mono-tag-input-chip-height-xxl: calc(var(--mono-spacing) * 7);\r\n  --mono-input-radius: 0;\r\n  --mono-input-ring-width: 0px;\r\n  --mono-input-font-xs: 1em;\r\n  --mono-input-font-sm: 1em;\r\n  --mono-input-font-md: 1em;\r\n  --mono-input-font-lg: 1em;\r\n  --mono-input-font-xl: 1em;\r\n  --mono-input-font-xxl: 1em;\r\n  --mono-select-radius: 0;\r\n  --mono-select-ring-width: 0px;\r\n  --mono-select-font-xs: 1em;\r\n  --mono-select-font-sm: 1em;\r\n  --mono-select-font-md: 1em;\r\n  --mono-select-font-lg: 1em;\r\n  --mono-select-font-xl: 1em;\r\n  --mono-select-font-xxl: 1em;\r\n  --mono-date-radius: 0;\r\n  --mono-date-ring-width: 0px;\r\n  --mono-date-font-xs: 1em;\r\n  --mono-date-font-sm: 1em;\r\n  --mono-date-font-md: 1em;\r\n  --mono-date-font-lg: 1em;\r\n  --mono-date-font-xl: 1em;\r\n  --mono-date-font-xxl: 1em;\r\n  --mono-tag-input-radius: 0;\r\n  --mono-tag-input-ring-width: 0px;\r\n  --mono-tag-input-font-xs: 1em;\r\n  --mono-tag-input-font-sm: 1em;\r\n  --mono-tag-input-font-md: 1em;\r\n  --mono-tag-input-font-lg: 1em;\r\n  --mono-tag-input-font-xl: 1em;\r\n  --mono-tag-input-font-xxl: 1em;\r\n\r\n  /* surfaces + resting shadows. Both `-bg` and `-surface` are needed for input:\r\n     the default `outlined` variant's own rule paints `--_mono-input-surface`,\r\n     which would otherwise win over `--mono-input-bg`. */\r\n  --mono-input-bg: transparent;\r\n  --mono-input-surface: transparent;\r\n  --mono-input-rest-border: transparent;\r\n  --mono-input-shadow: none;\r\n  --mono-textarea-surface: transparent;\r\n  --mono-textarea-shadow: none;\r\n  --mono-textarea-min-height: 0;\r\n  --mono-select-surface: transparent;\r\n  --mono-select-shadow: none;\r\n  --mono-tag-input-surface: transparent;\r\n  --mono-tag-input-shadow: none;\r\n  --mono-date-surface: transparent;\r\n  --mono-dropdown-table-surface: transparent;\r\n  --mono-dropdown-table-shadow: none;\r\n  --mono-checkbox-shadow: none;\r\n  --mono-switch-shadow: none;\r\n\r\n  /* kill the control's own inset so its text starts at the cell's content edge,\r\n     exactly where the static text sits */\r\n  --mono-input-padding-x-sm: 0;\r\n\r\n  --mono-input-padding-x-xs: 0;\r\n  --mono-input-padding-x-md: 0;\r\n  --mono-input-padding-x-lg: 0;\r\n  --mono-input-padding-x-xl: 0;\r\n  --mono-input-padding-x-xxl: 0;\r\n  --mono-select-padding-x: 0;\r\n  --mono-tag-input-padding-x: 0;\r\n  --mono-date-padding-x: 0;\r\n  --mono-textarea-padding-x: 0;\r\n\r\n  /* …and the VERTICAL inset. Only `mono-input` had none to begin with; the\r\n     others each carried 0.35–0.55rem top+bottom, which is 11–18px of height the\r\n     static text doesn't have — the row grew the moment you clicked it. */\r\n  --mono-select-padding-y: 0;\r\n  --mono-tag-input-padding-y: 0;\r\n  --mono-date-padding-y: 0;\r\n  --mono-textarea-padding-y: 0;\r\n\r\n  /* The wrapper is a grid of [label?, field, message-wrapper]. The message\r\n     wrapper is emitted even when there IS no message, so the gap ALWAYS added\r\n     ~6.4px that the static text doesn't have. Inside a cell there is no label\r\n     or message, so the gap has nothing to space. */\r\n  --mono-input-gap: 0;\r\n  --mono-select-gap: 0;\r\n  --mono-textarea-gap: 0;\r\n  --mono-tag-input-gap: 0;\r\n  --mono-date-gap: 0;\r\n\r\n  /* Type must match the static text the editor replaces, or the glyphs resize\r\n     and the line box changes height on click. Same single-lever trick as the\r\n     geometry above: select/tag-input/date/textarea read these tokens directly,\r\n     mono-input through its own indirection — and custom properties cross into\r\n     the shadow builds, which a page-level element rule cannot.\r\n\r\n     `1em`, NOT `inherit`: a CSS-wide keyword in a custom-property declaration\r\n     applies to the PROPERTY (re-inheriting it) instead of being stored as the\r\n     value, so `--theme-control-font-md: inherit` is silently a no-op. `1em`\r\n     resolves a font-size against the parent's, which is what we actually want —\r\n     and it chains, so nested elements all land on the cell's size. */\r\n  --theme-control-font-sm: 1em;\r\n  --theme-control-font-md: 1em;\r\n  --theme-control-font-lg: 1em;\r\n  --theme-control-font-xl: 1em;\r\n  --theme-control-font-xxl: 1em;\r\n\r\n  /* One line box owned by the CELL, so the row height is fixed by the column and\r\n     not by whichever element happens to be visible. Same keyword caveat as\r\n     above — hand the editors the literal value, not `inherit`. */\r\n  line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-input-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-textarea-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  /* select / tag-input / date pin their own line-height so a host page's absolute\r\n     line box cannot inflate them past the control-height token. That pin is a\r\n     `var()` precisely so the cell can keep owning the line box here. */\r\n  --mono-select-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-tag-input-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-date-line-height: var(--mono-table-edit-line-height, 1.5);\r\n\r\n  /* Silence each control's OWN focus ring — the cell draws the underline below,\r\n     and showing both would put the box straight back. These are the components'\r\n     private ring knobs (same ones the `underlined` variant re-points); an alpha\r\n     of 0 makes the ring transparent whatever its geometry. */\r\n  --_mono-input-ring-alpha: 0;\r\n  --_mono-input-ring-alpha-state: 0;\r\n  --_mono-textarea-ring-alpha: 0;\r\n  --_mono-textarea-ring-alpha-state: 0;\r\n  --_mono-select-ring-alpha: 0;\r\n  --_mono-select-ring-alpha-state: 0;\r\n  --_mono-tag-input-ring-alpha: 0;\r\n  --_mono-tag-input-ring-alpha-state: 0;\r\n  --_mono-date-ring-alpha: 0;\r\n  --_mdt-ring-alpha: 0;\r\n  --_mdt-ring-alpha-state: 0;\r\n}\r\n\r\n/* ── …and the cell's ALIGNMENT ────────────────────────────────────────────────\r\n   The block above moves the editor's BOX into the cell. This moves its TEXT.\r\n\r\n   `text-align` is inherited, so a right-aligned money `<td>` already passes\r\n   `right` down to the control's wrapper — but not into the field itself, because\r\n   the UA stylesheet gives `input` / `textarea` their own `text-align: start`,\r\n   and an author declaration on an ancestor cannot beat a UA declaration on the\r\n   element. So a right-aligned column's figures jumped to the left edge the moment\r\n   the editor appeared: exactly the shift this section exists to prevent.\r\n\r\n   `inherit` rather than a fixed value, so the field simply tracks whatever the\r\n   cell is — right for money, centre for a code column, untouched for the usual\r\n   left. Nothing to configure.\r\n\r\n   Class selectors reach the LIGHT builds. The shadow builds render the same field\r\n   inside their own root, which page CSS cannot cross and which has no custom\r\n   property for alignment yet — a shadow editor in a right-aligned cell still sits\r\n   left. Noted rather than papered over. */\r\n:is([mono-table],.mono-table) td :is(.mono-input-native, .mono-select-native, .mono-tag-input-native,\r\n    .mono-date-native, .mono-textarea-field) {\r\n  text-align: inherit;\r\n}\r\n\r\n/* …but NOT for checkbox / radio / switch.\r\n   For a FIELD, `--theme-control-height-*` feeds `min-height`, so `auto` above is\r\n   right. For these three it is the control's actual geometry — the box, circle and\r\n   track are all `calc(token * 0.5)` (radio.css, switch.css; the ported checkbox\r\n   are `calc(token * 4 / 9)` off the --mono-* twin — the switch derives its track\r\n   from the same expression — restored the same way) — and\r\n   `calc(auto * 0.5)` is INVALID AT COMPUTED-VALUE TIME, so width/height fall back\r\n   to `auto` and the box, having no intrinsic size, renders 0x0. The control is\r\n   there, sized to nothing.\r\n\r\n   Restore the snapshot taken on `[mono-table]`. Done as a descendant rule rather\r\n   than by dropping these three from the `:has()` list above, for two reasons: they\r\n   still want the flattening (an editable boolean cell should look seamless), and a\r\n   cell holding BOTH a field and a checkbox still matches that list — a selector\r\n   split would leave that case broken.\r\n\r\n   Element AND class selectors: the light build renders the class on an inner node,\r\n   raw class markup is used directly by the css/ demos, and custom properties\r\n   inherit through the shadow boundary so setting them on the host covers the\r\n   shadow builds. */\r\n:is([mono-table],.mono-table) td :is(mono-checkbox, mono-radio, mono-switch),\r\n:is([mono-table],.mono-table) td :is(mono-shadow-checkbox, mono-shadow-radio, mono-shadow-switch),\r\n:is([mono-table],.mono-table) td :is(.mono-checkbox, .mono-radio, .mono-switch),\r\n:is([mono-table],.mono-table) td :is(:is([mono-checkbox],.mono-checkbox), :is([mono-radio],.mono-radio), :is([mono-switch],.mono-switch)) {\r\n  --theme-control-height-xs: var(--_mono-table-ch-xs);\r\n  --theme-control-height-sm: var(--_mono-table-ch-sm);\r\n  --theme-control-height-md: var(--_mono-table-ch-md);\r\n  --theme-control-height-lg: var(--_mono-table-ch-lg);\r\n  --theme-control-height-xl: var(--_mono-table-ch-xl);\r\n  --theme-control-height-xxl: var(--_mono-table-ch-xxl);\r\n  --mono-control-height-xs: var(--_mono-table-mch-xs);\r\n  --mono-control-height-sm: var(--_mono-table-mch-sm);\r\n  --mono-control-height-md: var(--_mono-table-mch-md);\r\n  --mono-control-height-lg: var(--_mono-table-mch-lg);\r\n  --mono-control-height-xl: var(--_mono-table-mch-xl);\r\n  --mono-control-height-xxl: var(--_mono-table-mch-xxl);\r\n  --mono-border-width: var(--_mono-table-bw);\r\n  --theme-border-width: var(--_mono-table-tbw);\r\n}\r\n\r\n/* Editors fill their column (promoted from the demos' local CSS). */\r\n:is([mono-table],.mono-table) td > :is(mono-input, mono-textarea, mono-select, mono-tag-input, mono-date,\r\n    mono-dropdown-table, mono-shadow-input, mono-shadow-textarea, mono-shadow-select,\r\n    mono-shadow-tag-input, mono-shadow-date, mono-shadow-dropdown-table) {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* Glyph controls are sized in literal px, so a switch/checkbox replacing a text\r\n   run changes the row height. Clamp them to the cell's line box instead — the\r\n   HOST element is always light DOM (even in the shadow build), so a page rule\r\n   reaches it, and at the default 1.5 line-height the box is ~20px, which the\r\n   `sm` switch track (20px) and checkbox (16px) already fit inside. */\r\n:is([mono-table],.mono-table) td :is(mono-switch, mono-checkbox, mono-radio,\r\n    mono-shadow-switch, mono-shadow-checkbox, mono-shadow-radio) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: calc(1em * var(--mono-table-edit-line-height, 1.5));\r\n  /* `middle`, not the default `baseline`: an inline-level box that sits ON the\r\n     baseline still needs the font's descender space BELOW it, so the line box —\r\n     and the row — grows by a couple of px even when the control is exactly one\r\n     line tall. Only visible in a row whose height isn't already set by something\r\n     taller, which is why it hides in grids that have action buttons. */\r\n  vertical-align: middle;\r\n}\r\n\r\n/* `mono-table-fixed` clips with ellipsis; an editing cell must not clip its\r\n   editor (or a select/date popup anchored in it). */\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(mono-input, mono-textarea, mono-select, mono-tag-input,\r\n    mono-date, mono-dropdown-table, mono-checkbox, mono-radio, mono-switch),\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(mono-shadow-input, mono-shadow-textarea,\r\n    mono-shadow-select, mono-shadow-tag-input, mono-shadow-date,\r\n    mono-shadow-dropdown-table, mono-shadow-checkbox, mono-shadow-radio,\r\n    mono-shadow-switch) {\r\n  overflow: visible;\r\n  white-space: normal;\r\n}\r\n\r\n/* An ACTION cell (row buttons) must not ellipsis-clip either. `mono-table-fixed`\r\n   gives every cell `overflow: hidden; white-space: nowrap`, which silently cuts\r\n   off a Save/Cancel pair the moment the column is a few px too narrow — the\r\n   button is still there and still clickable, just invisible. Keep `nowrap` so\r\n   the buttons stay on one line, but let them out of the box. */\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(> mono-button),\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(> mono-shadow-button) {\r\n  overflow: visible;\r\n}\r\n\r\n/* Focus cue on the CELL, not the control: the `<td>` is always light DOM and\r\n   `:focus-within` propagates out of a shadow root, so one rule covers every\r\n   component in both builds. Geometry matches the `underlined` form variant —\r\n   spread cancels blur, so the glow stays under the line instead of ringing the\r\n   cell. */\r\n:is([mono-table],.mono-table) td:has(mono-input, mono-textarea, mono-select, mono-tag-input, mono-date,\r\n    mono-dropdown-table, mono-checkbox, mono-radio, mono-switch):focus-within,\r\n:is([mono-table],.mono-table) td:has(mono-shadow-input, mono-shadow-textarea, mono-shadow-select,\r\n    mono-shadow-tag-input, mono-shadow-date, mono-shadow-dropdown-table,\r\n    mono-shadow-checkbox, mono-shadow-radio, mono-shadow-switch):focus-within {\r\n  box-shadow:\r\n    inset 0 -2px 0 var(--_mono-table-accent),\r\n    0 5px 6px -6px rgba(var(--theme-primary-rgb, 30, 58, 110), 0.5);\r\n}\r\n\r\n/* ── Grouping (group header rows) ────────────────────────────────────────────\r\n   A `<tr class=\"mono-table-group-row\">` is a clickable group header. Set\r\n   `--mono-table-group-level` (0-based depth) on the group cell to indent nested levels.\r\n   Pair with `<mono-data-grid>`'s `group` option + `toggleGroup`. */\r\n/* The `:nth-child(even)` twin is kept so the floor zebra rule (for engines\r\n   without `of S`) cannot tint a group header; where `of S` works, the group row\r\n   is already excluded from the data set and never receives the stripe. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-group-row],.mono-table-group-row),\r\n:is([mono-table],.mono-table) tbody tr:is([mono-group-row],.mono-table-group-row):nth-child(even) {\r\n  --_mono-table-row-bg: var(--_mono-table-group-bg);\r\n  background: var(--_mono-table-row-bg);\r\n  cursor: pointer;\r\n}\r\n\r\n:is([mono-table],.mono-table) tbody tr:is([mono-group-row],.mono-table-group-row):hover {\r\n  --_mono-table-row-bg: var(--_mono-table-group-hover-bg);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\n:is([mono-table],.mono-table) td:is([mono-group-cell],.mono-table-group-cell) {\r\n  padding-left: calc(0.9rem + var(--mono-table-group-level, 0) * 1.4rem);\r\n  color: var(--_mono-table-accent);\r\n  font-weight: var(--mono-font-weight-semibold, 600);\r\n}\r\n\r\n:is([mono-group-toggle],.mono-table-group-toggle) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.45rem;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  cursor: pointer;\r\n}\r\n\r\n:is([mono-group-toggle],.mono-table-group-toggle):focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--_mono-table-accent) 30%, transparent);\r\n  border-radius: var(--theme-radius-xs, 4px);\r\n}\r\n\r\n:is([mono-group-caret],.mono-table-group-caret) {\r\n  width: 0.62rem;\r\n  height: 0.62rem;\r\n  flex-shrink: 0;\r\n  color: var(--_mono-table-accent);\r\n  /* Expanded → points down. Collapsed (data-collapsed) → points right. */\r\n  transform: rotate(90deg);\r\n  transition: transform var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n\r\n:is([mono-group-toggle],.mono-table-group-toggle)[data-collapsed] :is([mono-group-caret],.mono-table-group-caret) {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n:is([mono-group-caret],.mono-table-group-caret) svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n:is([mono-group-key],.mono-table-group-key) {\r\n  color: var(--_mono-table-text);\r\n}\r\n\r\n:is([mono-group-count],.mono-table-group-count) {\r\n  margin-left: 0.45rem;\r\n  font-size: 0.72rem;\r\n  font-weight: var(--theme-font-weight-normal, 400);\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n/* Per-group row pager (`<mono-table-paging-group>`), shown in a footer row at the\r\n   end of a group's rows. Reuses the `[mono-table-paging]*` button styling. */\r\n:is([mono-table],.mono-table) td:is([mono-group-foot],.mono-table-group-foot) {\r\n  padding-top: 0.4rem;\r\n  padding-bottom: 0.5rem;\r\n  padding-left: calc(0.9rem + var(--mono-table-group-level, 0) * 1.4rem);\r\n  background: color-mix(in oklab, var(--_mono-table-accent) 3%, var(--_mono-table-surface));\r\n}\r\n\r\n:is([mono-table-paging-group],.mono-table-pg-group) {\r\n  --mono-table-pg-scale: 0.86;\r\n}\r\n\r\n:is([mono-table-paging-group],.mono-table-pg-group) :is([mono-pgb],.mono-table-pgb) {\r\n  min-width: 26px;\r\n  height: 26px;\r\n  font-size: 0.74rem;\r\n}\r\n\r\n:is([mono-table-paging-group],.mono-table-pg-group) :is([mono-pg-el],.mono-table-pg-el) {\r\n  font-size: 0.74rem;\r\n}\r\n\r\n/* ── Fixed / sticky columns ─────────────────────────────────────────────────\r\n   Pin a column to an edge while the table scrolls horizontally. Add\r\n   `mono-table-sticky-left` / `-right` to the column's header `<th>` AND its body\r\n   `<td>`s. For 2+ pinned columns on one side, set `--mono-table-sticky-left` /\r\n   `--mono-table-sticky-right` on the later column(s) to the combined width of the ones\r\n   before it (give those columns fixed widths so it lines up).\r\n\r\n   The edge is a real BORDER. It was a zero-blur box-shadow, on the reasoning that a collapsed\r\n   border belongs to the table rather than the cell and so might not repaint as a sticky cell\r\n   moves — but a shadow is painted OUTSIDE the border box, so it landed a pixel clear of the\r\n   column and stacked next to whatever rule was already there, which is what made a pinned edge\r\n   read as a smudge rather than a line.\r\n\r\n   That reasoning about collapsed borders was RIGHT, though: in `collapse` mode the border\r\n   stayed at the cell's flow position and scrolled away with the rest of the table. Which is\r\n   why a table holding a pinned column runs with SEPARATE borders (the `:has()` rule up by\r\n   the sticky-head block) — the cell owns its edge and takes it along. */\r\n:is([mono-table],.mono-table) th:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table],.mono-table) td:is([mono-sticky-left],.mono-table-sticky-left) {\r\n  position: sticky;\r\n  /* Default 0 (one pinned column). For a 2nd+ pinned column on this side, set\r\n     --mono-table-sticky-left to the combined width of the columns before it. */\r\n  left: var(--mono-table-sticky-left, 0);\r\n  z-index: 1;\r\n  border-right: 1px solid var(--_mono-table-border);\r\n}\r\n:is([mono-table],.mono-table) th:is([mono-sticky-right],.mono-table-sticky-right),\r\n:is([mono-table],.mono-table) td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  position: sticky;\r\n  right: var(--mono-table-sticky-right, 0);\r\n  z-index: 1;\r\n  border-left: 1px solid var(--_mono-table-border);\r\n}\r\n\r\n/* The pinned edge runs to the FLOOR of the scroll box, not just to the last row.\r\n\r\n   A table is only as tall as its rows, so a short result set left the edge\r\n   stopping mid-box, which reads as a table cut off (DevExtreme's fixed columns\r\n   run their separators to the bottom of the grid). Nothing can be appended to\r\n   a `<tbody>` from CSS, and a pseudo-element on the cell is clipped by the\r\n   cell's own `overflow: hidden` (`mono-table-fixed` sets it for the ellipsis).\r\n   What a cell cannot clip is its OWN border painting — so the last row's pinned\r\n   cells draw that edge as a `border-image` with a bottom OUTSET: the 1px edge\r\n   slice is stretched from the cell's top to a viewport-height below it. It is\r\n   ink overflow, so it adds no scroll height, the scroll box clips it at its\r\n   floor, and once the rows overflow the box there is nothing below the last\r\n   row for it to show in. Scoped to `[mono-table-scroll]` so a table in normal\r\n   flow never paints a tail below itself. The same colour the edge already\r\n   uses; `border-image` needs separate borders, which every pinned table has.\r\n\r\n   EVERY pinned body cell paints the tail, not only the last row's: the rows\r\n   are painted in order and each opaque row covers the tail of the one above,\r\n   so only the last one shows — and it does not matter what the last `<tr>` is.\r\n   Keyed on `:last-child` it went missing whenever the tbody ended in something\r\n   other than a data row (an error / loading row, an open detail panel, a\r\n   virtual-scroll spacer). */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) :is(tbody, tfoot) td:is([mono-sticky-left],.mono-table-sticky-left) {\r\n  border-image: linear-gradient(var(--_mono-table-border), var(--_mono-table-border)) 0 1 0 0 / 0 1px 0 0 / 0 0 100vh 0;\r\n}\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) :is(tbody, tfoot) td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  border-image: linear-gradient(var(--_mono-table-border), var(--_mono-table-border)) 0 0 0 1 / 0 0 0 1px / 0 0 100vh 0;\r\n}\r\n\r\n/* A border-image paints INSTEAD of the borders — every side, at the image's\r\n   widths — so with only the edge in the image the cell's bottom rule went\r\n   unpainted, and a bottom outset would put the image's bottom edge a viewport\r\n   below the cell anyway. The row rule on a pinned cell is therefore an inset\r\n   shadow on the bottom pixel (a cell's own shadow, painted by the cell, never\r\n   clipped by it), and the layout border it replaces is dropped so that pixel\r\n   is the same one the neighbouring cells' border sits on. A footer's pinned\r\n   cell does the same for its TOP rule (the footer separator). */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  border-bottom-width: 0;\r\n  box-shadow: inset 0 -1px 0 0 var(--_mono-table-border-lite);\r\n}\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tfoot td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tfoot td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  border-top-width: 0;\r\n  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--_mono-table-text) 12%, transparent);\r\n}\r\n/* No rule where the row is closed by something else: a footer's top border, or\r\n   the filler's floor. */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table):has(tfoot) tbody tr:last-child > td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table):has(tfoot) tbody tr:last-child > td:is([mono-sticky-right],.mono-table-sticky-right),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler) > td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler) > td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  box-shadow: none;\r\n}\r\n\r\n/* …and the last row keeps its rule. The base sheet drops the bottom rule on the\r\n   last row so it does not double up with a `tfoot`'s top border or a wrapper's\r\n   edge, but in a scroll box taller than its rows that leaves the last row open —\r\n   every row above is closed by a line and the last is not, right where the\r\n   pinned edges now carry on below it. Only where nothing follows the row; the\r\n   pinned cells carry theirs as the shadow above. */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table):not(:has(tfoot)):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) tbody tr:last-child:not(:is([mono-filler],.mono-table-filler)) > td:not(:is([mono-sticky-left],.mono-table-sticky-left)):not(:is([mono-sticky-right],.mono-table-sticky-right)) {\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n}\r\n\r\n/* Header cells need an opaque background (the gradient sits on `thead`, not the\r\n   cell) and the top layer so they stay above pinned body cells. */\r\n:is([mono-table],.mono-table) thead th:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table],.mono-table) thead th:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  z-index: 3;\r\n  background: var(--_mono-table-head-frozen-bg);\r\n}\r\n\r\n/* Body cells take the row background so scrolled content can't bleed through.\r\n   A pinned cell paints over the row, so it cannot simply inherit the colour —\r\n   but it CAN read the same variable the row set, which means zebra, hover,\r\n   selected, editing and group rows are all covered by this one rule. Adding a\r\n   new row state needs nothing here. */\r\n:is([mono-table],.mono-table) tbody td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table],.mono-table) tbody td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  background: var(--_mono-table-row-bg, var(--_mono-table-surface));\r\n}\r\n\r\n/* A pinned SUMMARY cell is sticky on both axes at once — bottom (sticky-foot) and\r\n   left/right (sticky column). Lift it above the scrolling body's pinned column\r\n   AND the rest of the footer row so the bottom corner stays put through both\r\n   scrolls; the opaque background from the sticky-foot rule already applies. */\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot td:is([mono-sticky-right],.mono-table-sticky-right),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot th:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot th:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  z-index: 3;\r\n}\r\n/* ── Footer ─────────────────────────────────────────────────────────────── */\r\n\r\n:is([mono-table-foot],.mono-table-foot) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  gap: 0.5rem;\r\n  padding: 0.72rem 1rem;\r\n  border-top: 1px solid var(--_mono-table-border-lite);\r\n  background: color-mix(in oklab, var(--_mono-table-text) 3%, var(--_mono-table-surface));\r\n}\r\n\r\n/* ── Error bar (mono-table-error) ────────────────────────────────────────────\r\n   The odd one out of the three controller-driven table elements: `loading` and\r\n   `empty` paint OVER the grid, this one is IN it. A failed request is not a\r\n   transient state to cover the rows with — it is a fact about the table that\r\n   should push the rows down and stay there until it is dismissed, which is what\r\n   DevExtreme's error row does too.\r\n\r\n   So there is no `position: absolute` here and no height reservation: the\r\n   generated `<tr>` (see `ensureRowHost`) is a real row, and the bar inside it is\r\n   ordinary flow content directly under the header. */\r\n\r\n/* `!important`, and not as a shortcut. A generated row's cell is a structural\r\n   HOST, not a content cell — it exists only because `<table>`'s content model\r\n   forbids a bare custom element — so a host page that styles `td` generically is\r\n   simply wrong about this one. And host pages do: these docs carry\r\n   `.vp-doc table[mono-table] td { padding: … }` to undo VitePress's own table\r\n   styling, which at (0,2,2) beat the (0,1,1) this rule used to have and put a\r\n   14px gutter around the error bar. Winning that on specificity is an arms race\r\n   against every consumer's reset; stating the invariant is not. */\r\n:is([mono-error-row],.mono-table-error-row) > td {\r\n  padding: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\n/* The ROW too, like the loading/empty rows above. With no error the element\r\n   renders nothing, but the row stays — the consumer wrote it, and it is theirs —\r\n   and a `<tr>` carries the base row rule's 1px border-bottom of its own, so an\r\n   idle host was a 1px band pushing every data row down. `height: 0` is a\r\n   minimum on a table row, so the bar still grows it when there is one. */\r\n:is([mono-error-row],.mono-table-error-row) {\r\n  height: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\nmono-table-error,\r\nmono-shadow-table-error {\r\n  display: block;\r\n}\r\n\r\n/* The row's cell follows a FROZEN header. `[mono-sticky-head]` may sit on\r\n   the table or on its scroll wrapper — a descendant selector covers both. The\r\n   cell is what sticks (the row stays in flow, so it keeps taking its honest\r\n   height); `top` is the `<thead>` height the element measures and publishes on\r\n   the `<table>` — a banded two-row header is not 1 row tall. Above the pinned\r\n   body cells (1) and the sticky head cells (2) it slides over; the pinned\r\n   header cells are also 3, but a bar under the header never overlaps them.\r\n   Without a frozen header there is no rule here: the bar scrolls away with the\r\n   rows it describes, like any row. */\r\n:is([mono-sticky-head],.mono-table-sticky-head) :is([mono-error-row],.mono-table-error-row) > td {\r\n  position: sticky;\r\n  top: var(--mono-table-error-head, 0px);\r\n  z-index: 3;\r\n}\r\n\r\n/* Exactly the SCROLLPORT wide, pinned to its left edge — never the table.\r\n\r\n   The cell spans every column, so on a table wider than its `[mono-table-scroll]`\r\n   a bar that filled it put the text at the far left and the ✕ / ↻ past the right\r\n   edge, invisible until you scrolled for them (a table with a pinned action\r\n   column is that wide by design). `100cqw` is the scroll wrapper's inline size\r\n   (it is a query container whenever it holds this element — the rule by the\r\n   loading spinner, which centres with the same unit), and `sticky; left: 0`\r\n   keeps the bar at the visible left as you scroll sideways. `max-width: 100%`\r\n   keeps it inside a table that happens to be NARROWER than the wrapper, and\r\n   `auto` outside any wrapper, where there is no scrollport to size to. The\r\n   value travels as a custom property so the shadow build's bar gets it too. */\r\n:is([mono-table-scroll],.mono-table-scroll) mono-table-error,\r\n:is([mono-table-scroll],.mono-table-scroll) mono-shadow-table-error {\r\n  --mono-table-error-w: 100cqw;\r\n}\r\n\r\n:is([mono-error-bar],.mono-table-error-bar) {\r\n  position: sticky;\r\n  left: 0;\r\n  box-sizing: border-box;\r\n  width: var(--mono-table-error-w, auto);\r\n  max-width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.5rem 0.6rem 0.5rem 0.75rem;\r\n  border-bottom: 1px solid var(--_mono-table-error-border);\r\n  background: var(--_mono-table-error-bg);\r\n  color: var(--_mono-table-error);\r\n  font-size: 0.8rem;\r\n  line-height: 1.35;\r\n  /* The bar lives in a <td>, and a cell is `whitespace-nowrap` upstream — so the\r\n     message inherited that and ran under the ↻ / ✕ instead of wrapping. */\r\n  white-space: normal;\r\n}\r\n\r\n:is([mono-error-text],.mono-table-error-text) {\r\n  /* Takes the whole bar so the close button is pinned to the right edge, and\r\n     wraps rather than truncating: a message worth showing is worth reading, and\r\n     a store's error text is routinely a sentence. */\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n/* What the server said beyond the status, after the preset headline — quieter,\r\n   so \"Something went wrong on the server\" reads first and \"Object reference not\r\n   set…\" is there for whoever wants it. */\r\n:is([mono-error-detail],.mono-table-error-detail) {\r\n  opacity: 0.8;\r\n}\r\n:is([mono-error-detail],.mono-table-error-detail)::before {\r\n  content: ' — ';\r\n}\r\n\r\n/* The ↻ and × at the right edge: one look, the class kept as a second\r\n   selector so a consumer rule on `[mono-error-close]` still matches. */\r\n:is([mono-error-actions],.mono-table-error-actions) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.15rem;\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn),\r\n:is([mono-error-close],.mono-table-error-close) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--theme-radius-sm, 0.375rem);\r\n  background: transparent;\r\n  color: inherit;\r\n  font-size: 1rem;\r\n  cursor: pointer;\r\n  opacity: 0.75;\r\n  transition: background-color var(--theme-duration-fast, 0.12s) var(--mono-ease, ease),\r\n    opacity var(--theme-duration-fast, 0.12s) var(--mono-ease, ease);\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn):hover,\r\n:is([mono-error-close],.mono-table-error-close):hover {\r\n  background: color-mix(in srgb, var(--_mono-table-error) 14%, transparent);\r\n  opacity: 1;\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn):disabled {\r\n  cursor: default;\r\n  opacity: 0.45;\r\n  background: transparent;\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn):focus-visible,\r\n:is([mono-error-close],.mono-table-error-close):focus-visible {\r\n  outline: 2px solid color-mix(in srgb, var(--_mono-table-error) 45%, transparent);\r\n  outline-offset: 1px;\r\n  opacity: 1;\r\n}\r\n\r\n/* ── Empty state ────────────────────────────────────────────────────────────\r\n   Two consumers, one look. `[mono-table-empty]` as a CLASS is the hand-rolled\r\n   form — a plain `<div>` after the table, which is what every demo wrote before\r\n   the element existed and what a consumer with an entirely custom condition\r\n   still writes. `<mono-table-empty>` as an ELEMENT is the same message placed\r\n   inside the table and driven by the controller. The typography rules below are\r\n   shared by both, so the two can never drift apart; only the placement differs,\r\n   and that is the block after this one. */\r\n\r\n:is([mono-table-empty],.mono-table-empty) {\r\n  text-align: center;\r\n  padding: 3rem 1rem;\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n:is([mono-empty-title],.mono-table-empty-title) {\r\n  font-size: 0.9rem;\r\n  font-weight: var(--mono-font-weight-bold, 700);\r\n  color: var(--_mono-table-text);\r\n}\r\n\r\n:is([mono-empty-sub],.mono-table-empty-sub) {\r\n  font-size: 0.78rem;\r\n  color: var(--_mono-table-faint);\r\n  margin-top: 0.25rem;\r\n}\r\n\r\n/* ── Empty overlay (mono-table-empty) ────────────────────────────────────────\r\n   `mono-table-loading`'s pair, and deliberately the same shape: dropped into the\r\n   `<caption>` (or into a row section, where the core wraps itself in a\r\n   zero-height `<tr><td colspan>` — see `table-overlay.ts`), out of normal flow,\r\n   covering the nearest positioned ancestor.\r\n\r\n   Hidden until the core reflects [data-mono-empty]. Note the DEFAULT here is\r\n   hidden even though an unbound element is always \"visible\": the core sets the\r\n   attribute immediately when no controller is bound, so a `v-if`-driven usage\r\n   still paints. Defaulting to shown instead would flash the message on every\r\n   controller-driven table for the one frame before the core's first sync. */\r\n\r\nmono-table-empty,\r\nmono-shadow-table-empty {\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: var(--_mono-table-empty-z, 9);\r\n  display: none;\r\n  /* The RESTING offset, in real layout. It cannot come from the message's own\r\n     `sticky` `top`, which only pushes an element away from a SCROLLPORT edge —\r\n     with no scrolling ancestor the nearest scrollport is the viewport, the box is\r\n     already far below its top, and sticky does nothing at all. The message then\r\n     sits at the overlay's top, which is the top of the table: printed across the\r\n     column names. A table with no `[mono-table-scroll]` is not a corner case\r\n     either — it is exactly what `<mono-dropdown-table>` renders. The sticky `top`\r\n     below still does its own job once there IS a scroll region. */\r\n  padding-top: calc(var(--mono-table-empty-head, 0px) + var(--_mono-table-empty-gap, 2rem));\r\n  /* Anchored at the TOP for the same reason the spinner is: `sticky` below only\r\n     moves the box once its static position would leave the view, so a static\r\n     position in the middle of a tall region gives a different result at every\r\n     scroll offset. */\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  /* The message is not a modal. Everything around it stays click-through so a\r\n     sticky header, a column resizer or a row underneath still answers the mouse;\r\n     the box itself takes its interactivity back (next rule) because it holds a\r\n     button. */\r\n  pointer-events: none;\r\n}\r\n\r\nmono-table-empty[data-mono-empty],\r\nmono-shadow-table-empty[data-mono-empty] {\r\n  display: flex;\r\n}\r\n\r\n/* The generated row, when the element was dropped straight into a row section.\r\n   A host, not a layout participant: any height, padding or border here would\r\n   open a permanent gap under the header whether or not the table is empty. */\r\n/* Same invariant as the loading row above — a host cell, never a content cell. */\r\n:is([mono-table],.mono-table) :is([mono-empty-row],.mono-table-empty-row),\r\n:is([mono-table],.mono-table) :is([mono-empty-row],.mono-table-empty-row) > td {\r\n  height: 0 !important;\r\n  padding: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\n/* The message itself. `sticky` keeps it in the visible part of a table that\r\n   scrolls; the overlay's `padding-top` above is what places it at rest, and the\r\n   two use the same offset so scrolling starts from where it already sits. */\r\n:is([mono-empty-box],.mono-table-empty-box) {\r\n  position: sticky;\r\n  top: calc(var(--mono-table-empty-head, 0px) + var(--_mono-table-empty-gap, 2rem));\r\n  left: var(--mono-table-empty-x, auto);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  max-width: 32rem;\r\n  padding: 0 1rem;\r\n  text-align: center;\r\n  color: var(--_mono-table-muted);\r\n  /* Back on, so the reload button is clickable and the text selectable. */\r\n  pointer-events: auto;\r\n}\r\n\r\n/* Centre on the SCROLLPORT rather than on the table, so the message lands in the\r\n   middle of what can actually be seen at any horizontal offset. Both halves are\r\n   scoped to `[mono-table-scroll]`: `cqw` with no query container resolves against\r\n   the viewport, which would be wrong everywhere else. */\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-table-empty),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-shadow-table-empty) {\r\n  container-type: inline-size;\r\n}\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) mono-table-empty,\r\n:is([mono-table-scroll],.mono-table-scroll) mono-shadow-table-empty {\r\n  justify-content: flex-start;\r\n}\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-empty-box],.mono-table-empty-box) {\r\n  /* Half the scrollport, less half the box — `translateX(-50%)` cannot be used\r\n     here because the box is `sticky` and a transform on a sticky box is applied\r\n     AFTER the stick, so it would drift back out of view as you scroll. */\r\n  --mono-table-empty-x: calc(50cqw - min(16rem, 50cqw));\r\n  width: min(32rem, 100cqw);\r\n  max-width: none;\r\n}\r\n\r\n/* The glyph. An iconify class paints as a mask on an empty span and needs a box;\r\n   an emoji is text and needs a font size. Both land on the same footprint so the\r\n   title sits at the same height either way.\r\n\r\n   Scoped under the box ON PURPOSE (two attributes/classes, (0,2,0)): the glyph also\r\n   carries its iconify class (`i-mdi-help-circle-outline` by default), and an app's\r\n   own UnoCSS / Tailwind emits that utility UNLAYERED with `width/height: 1em` at\r\n   (0,1,0) — a tie this rule lost on load order, shrinking the icon to the table's\r\n   font size (12px instead of 40). One utility class can no longer out-weigh it. */\r\n:is([mono-empty-box],.mono-table-empty-box) :is([mono-empty-icon],.mono-table-empty-icon) {\r\n  display: block;\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  color: var(--_mono-table-faint);\r\n}\r\n\r\n:is([mono-empty-box],.mono-table-empty-box) :is([mono-empty-icon],.mono-table-empty-icon):is([mono-text],.is-text) {\r\n  font-size: 2rem;\r\n  line-height: 2.5rem;\r\n}\r\n\r\n/* The body slot replaces the props' content, so it owns the whole box. */\r\n:is([mono-empty-body],.mono-table-empty-body)[data-empty] {\r\n  display: none;\r\n}\r\n\r\n:is([mono-empty-reload],.mono-table-empty-reload) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  margin-top: 0.5rem;\r\n  padding: 0.32rem 0.7rem;\r\n  border: 1px solid var(--_mono-table-border);\r\n  border-radius: var(--theme-radius-sm, 0.375rem);\r\n  background: var(--_mono-table-surface);\r\n  color: var(--_mono-table-accent);\r\n  font: inherit;\r\n  font-size: 0.78rem;\r\n  cursor: pointer;\r\n  transition:\r\n    background-color var(--theme-duration-fast, 0.12s) var(--mono-ease, ease),\r\n    border-color var(--theme-duration-fast, 0.12s) var(--mono-ease, ease);\r\n}\r\n\r\n:is([mono-empty-reload],.mono-table-empty-reload):hover {\r\n  border-color: var(--_mono-table-accent);\r\n  background: color-mix(in srgb, var(--_mono-table-accent) 8%, var(--_mono-table-surface));\r\n}\r\n\r\n:is([mono-empty-reload],.mono-table-empty-reload):focus-visible {\r\n  outline: 2px solid color-mix(in srgb, var(--_mono-table-accent) 45%, transparent);\r\n  outline-offset: 1px;\r\n}\r\n/* ── Row detail (mono-table-detail) ──────────────────────────────────────────\r\n   Two pieces that live in DIFFERENT places:\r\n\r\n   1. The TOGGLE — the `<mono-table-detail>` element itself, sitting in one of the\r\n      row's `<td>`s. It renders a single chevron button.\r\n   2. The PANEL — `tr[mono-detail-row]`, which the element inserts into the\r\n      consumer's `<tbody>` right below its own row while open. It is light DOM in\r\n      BOTH builds (a shadow root cannot project content into a row outside its\r\n      host), so these rules are what style it either way. */\r\n\r\nmono-table-detail,\r\nmono-shadow-table-detail {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n}\r\n\r\n:is([mono-detail-toggle],.mono-table-detail-toggle) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-table-detail-size);\r\n  height: var(--_mono-table-detail-size);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--_mono-table-detail-radius);\r\n  background: transparent;\r\n  color: var(--_mono-table-detail-color);\r\n  cursor: pointer;\r\n  transition:\r\n    background 0.15s ease,\r\n    color 0.15s ease;\r\n}\r\n\r\n:is([mono-detail-toggle],.mono-table-detail-toggle):hover:not(:disabled) {\r\n  background: var(--_mono-table-detail-hover-bg);\r\n  color: var(--_mono-table-detail-color-open);\r\n}\r\n\r\n:is([mono-detail-toggle],.mono-table-detail-toggle):disabled {\r\n  opacity: 0.45;\r\n  cursor: not-allowed;\r\n}\r\n\r\nmono-table-detail[open] :is([mono-detail-toggle],.mono-table-detail-toggle),\r\nmono-shadow-table-detail[open] :is([mono-detail-toggle],.mono-table-detail-toggle) {\r\n  color: var(--_mono-table-detail-color-open);\r\n}\r\n\r\n/* The shadow build inlines its chevrons as SVG (no page-level icon CSS inside a\r\n   shadow root); size them like the light build's `.mono-icon`. */\r\n:is([mono-detail-caret],.mono-table-detail-caret) {\r\n  width: 1.15em;\r\n  height: 1.15em;\r\n}\r\n\r\n/* The inserted panel row. The colour is set on the CELL, not via the row's\r\n   `--_mono-table-row-bg`, because this is panel decoration rather than a row\r\n   state — it must also beat the sticky-column cell rule, which reads that\r\n   variable. The panel is excluded from the zebra's data set, so it never\r\n   receives a stripe and never shifts the parity of the rows below it. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-detail-row],.mono-table-detail-row) > td,\r\ntr:is([mono-detail-row],.mono-table-detail-row) > td {\r\n  padding: var(--_mono-table-detail-panel-pad);\r\n  background: var(--_mono-table-detail-panel-bg);\r\n}\r\n\r\n/* A detail row is not a data row: keep the row hover/zebra treatment off it, so\r\n   hovering the panel doesn't look like hovering a record. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-detail-row],.mono-table-detail-row):hover > td {\r\n  background: var(--_mono-table-detail-panel-bg);\r\n}\r\n\r\n:is([mono-detail-panel],.mono-table-detail-panel) {\r\n  color: var(--_mono-table-ink-mid);\r\n  font-size: 0.86rem;\r\n}\r\n\r\n/* A nested table inside a panel sits flush with the panel padding. */\r\n:is([mono-detail-panel],.mono-table-detail-panel) > :is([mono-table],.mono-table),\r\n:is([mono-detail-panel],.mono-table-detail-panel) > :is([mono-table-scroll],.mono-table-scroll) {\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n/* ── Row selection (mono-table-checkbox) ─────────────────────────────────────\r\n   The element renders `mono-checkbox`'s own attribute markup, so the whole\r\n   size × color × state matrix comes from checkbox.css — the only rules here are\r\n   the ones about sitting in a table cell. */\r\n\r\nmono-table-checkbox,\r\nmono-shadow-table-checkbox {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n}\r\n\r\n/* A bare (label-less) box in a header/body cell centres on the column and needs\r\n   no extra gap, unlike a form checkbox that always has text beside it. */\r\n:is([mono-table],.mono-table) th > mono-table-checkbox,\r\n:is([mono-table],.mono-table) td > mono-table-checkbox,\r\n:is([mono-table],.mono-table) th > mono-shadow-table-checkbox,\r\n:is([mono-table],.mono-table) td > mono-shadow-table-checkbox {\r\n  vertical-align: middle;\r\n}\r\n\r\n:is([mono-table-checkbox],.mono-table-checkbox) .mono-checkbox-label:empty {\r\n  display: none;\r\n}\r\n\r\n/* While a `mode=\"all\"` drain is in flight the element emits\r\n   [mono-checkbox][mono-loading] > [mono-box] > [mono-loading-spinner] — checkbox.css owns\r\n   that look (accent-filled box, spinner, \"working\" cursor); nothing to restate. */\r\n";
+//#region \0raw:C:\Users\VCT-DEV\Desktop\libs\packages\helper\src\components\table\table.css?raw.js
+var table_css_raw_default = "/* LEGACY CLASS ALIASES — every `[mono-x]` below is wrapped as `:is([mono-x], .legacy)`\r\n   by `scripts/legacy-class-alias.mjs`, because the table's markup is written by the\r\n   CONSUMER and host apps still spell it with the pre-port classes\r\n   (`<table class=\"mono-table mono-table-sticky-head\">`, `<th class=\"mono-table-sticky-right\">`).\r\n   Both spellings paint identically at the same specificity. Author selectors with the\r\n   attribute only and re-run the script (`--check` is a perf spec). */\r\n/* ============================================================================\r\n   mono-table — a port of Basecoat's `.table`, extended\r\n\r\n   Upstream is eight rules: a container, the table, its four row groups, a cell\r\n   and a caption. Everything else here — search, paging, sort and filter heads,\r\n   grouping, row detail, selection, inline editing, sticky columns, the loading\r\n   / empty / error overlays — is mono's own, and borrows its shape from the\r\n   Basecoat component it most resembles (`.button`, `.input`, `.badge`,\r\n   `.popover`), cited where it does.\r\n\r\n   Styling is by ATTRIBUTE. A table is markup the CONSUMER writes — the library\r\n   cannot emit a `<tr>` — so there is no element to mirror; the attributes ARE\r\n   the API:\r\n\r\n     <div mono-table-scroll>\r\n       <table mono-table mono-color=\"success\">…</table>\r\n     </div>\r\n\r\n   The sibling chrome (`<mono-table-search>`, `<mono-table-paging>`, …) keeps\r\n   its full component name as its root attribute rather than a short part name:\r\n   those elements are SIBLINGS of the table, not descendants, so a short name\r\n   could not be scoped under `[mono-table]` and would collide with every other\r\n   component's parts.\r\n   ============================================================================ */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table — w-full caption-bottom text-sm */\r\n:is([mono-table],.mono-table),\r\n:is([mono-table-scroll],.mono-table-scroll),\r\n:is([mono-table-shell],.mono-table-shell),\r\n:is([mono-table-card],.mono-table-card),\r\n:is([mono-table-toolbar],.mono-table-toolbar),\r\n:is([mono-table-foot],.mono-table-foot),\r\n:is([mono-table-search],.mono-table-search),\r\n:is([mono-table-paging],.mono-table-pg),\r\n:is([mono-table-paging-group],.mono-table-pg-group),\r\n:is([mono-table-page-size],.mono-table-page-size),\r\n:is([mono-table-info],.mono-table-info),\r\n:is([mono-table-summary],.mono-table-summary),\r\n:is([mono-table-loading],.mono-table-loading),\r\n:is([mono-table-empty],.mono-table-empty),\r\n:is([mono-table-error],.mono-table-error),\r\n:is([mono-table-th],.mono-table-th),\r\n:is([mono-table-sort],.mono-table-sort),\r\n:is([mono-table-checkbox],.mono-table-checkbox),\r\n:is([mono-table-detail],.mono-table-detail),\r\n/* …and the PORTALED panels. They are moved to <body>, so they inherit nothing\r\n   from the table and must carry the whole chain themselves. Listing them here\r\n   rather than re-declaring the chain below them is deliberate: the hand-written\r\n   copy drifted to eleven of these forty-nine, and every rule inside a panel that\r\n   read one of the missing ones silently resolved to nothing. */\r\n:is([mono-th-menu],.mono-th-menu),\r\n:is([mono-th-filter],.mono-th-filter),\r\n:is([mono-search-panel],.mono-table-search-panel),\r\n:is([mono-search-more-panel],.mono-table-search-more-panel),\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  /* ── ink and surface ────────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .table th — text-foreground\r\n     basecoat@1.0.2 styles/vega.css .table caption — text-muted-foreground */\r\n  --_mono-table-surface: var(--mono-table-surface, var(--background));\r\n  --_mono-table-text: var(--mono-table-text, var(--foreground));\r\n  --_mono-table-muted: var(--mono-table-muted, var(--muted-foreground));\r\n  --_mono-table-faint: var(--mono-table-faint, color-mix(in oklab, var(--_mono-table-muted) 70%, transparent));\r\n  --_mono-table-ink-mid: var(--mono-table-ink-mid, color-mix(in oklab, var(--_mono-table-text) 82%, transparent));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .table tr — border-b */\r\n  --_mono-table-border: var(--mono-table-border, var(--border));\r\n  --_mono-table-border-lite: var(--mono-table-border-lite, var(--_mono-table-border));\r\n  /* The table's OUTER edge — a hairline so a fixed-height box reads as a frame\r\n     even when a failure has cleared the rows. `none` removes it. */\r\n  --_mono-table-outer-border-color: var(--mono-table-outer-border-color, var(--_mono-table-border));\r\n  --_mono-table-outer-border: var(--mono-table-outer-border, var(--mono-border-width) solid var(--_mono-table-outer-border-color));\r\n  --_mono-table-radius: var(--mono-table-radius, var(--_mono-table-radius-preset, var(--mono-radius-lg)));\r\n\r\n  /* ── the accent — EXTENSION ─────────────────────────────────────────────\r\n     Upstream's table has no accent at all: its head, its hover and its\r\n     selected row are all `--muted`. mono keeps a role colour for the pinned\r\n     rail on a selected row, the sort and filter indicators, the spinner and\r\n     the paging pill — so the role only TINTS upstream's neutral wash, at\r\n     `--mono-mode-tint`, and `color=\"secondary\"` leaves it exactly neutral. */\r\n  --_mono-table-accent: var(--mono-table-accent, var(--_mono-table-accent-preset, var(--primary)));\r\n  --_mono-table-on-accent: var(--mono-table-on-accent, var(--_mono-table-on-accent-preset, var(--primary-foreground)));\r\n\r\n  /* ── row states ─────────────────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50 data-[state=selected]:bg-muted\r\n\r\n     Every one of these mixes into the SURFACE, never into `transparent`.\r\n     Upstream can afford `bg-muted/50` because nothing in its table overlaps\r\n     anything; mono pins columns and freezes the head and foot, and a pinned cell\r\n     paints over the rows sliding under it by restating `--_mono-table-row-bg`.\r\n     A translucent value there shows the scrolled content straight through. */\r\n  --_mono-table-selected-bg: var(--mono-table-selected-bg, var(--muted));\r\n  /* Zebra is mono's own — upstream stripes nothing. A tint of the neutral, not\r\n     of the accent, so a coloured table does not turn into a coloured page. */\r\n  --_mono-table-zebra: var(--mono-table-zebra, color-mix(in oklab, var(--muted) 42%, var(--_mono-table-surface)));\r\n  /* the soft wash the detail panel, the group row and the selected rail share */\r\n  --_mono-table-soft: var(--mono-table-soft, color-mix(in oklab, var(--muted) 62%, var(--_mono-table-surface)));\r\n  /* The head band. Upstream paints the head nothing (the page under a bottom\r\n     rule), so the resting head is transparent; a flavor can give it a surface\r\n     (ONE's `#f7f8fc` band). The FROZEN head must be opaque whatever this says —\r\n     rows slide under it — so it falls back to a tint of the accent instead. */\r\n  --_mono-table-head-bg: var(--mono-table-head-bg, transparent);\r\n  --_mono-table-head-frozen-bg: var(--mono-table-head-bg, color-mix(in oklab, var(--_mono-table-accent) 7%, var(--_mono-table-surface)));\r\n  /* a group header row (grouping) and its hover — a tint of the accent unless a\r\n     flavor names the wash */\r\n  --_mono-table-group-bg: var(--mono-table-group-bg, color-mix(in oklab, var(--_mono-table-accent) 9%, var(--_mono-table-surface)));\r\n  --_mono-table-group-hover-bg: var(--mono-table-group-hover-bg, color-mix(in oklab, var(--_mono-table-accent) 14%, var(--_mono-table-surface)));\r\n  /* ── hover — DELIBERATELY off ────────────────────────────────────────────\r\n     Upstream's `hover:bg-muted/50` lands within a hair of mono's zebra, so on a\r\n     striped table (and mono stripes by default) hovering an odd row simply\r\n     repaints it as an even one: the row appears to merge with the one below it\r\n     rather than to light up. A cue that is indistinguishable from the pattern\r\n     it sits in is worse than no cue, so the default is the row's own colour.\r\n     `--mono-table-hover-bg` turns it back on for anyone who wants it. */\r\n  --_mono-table-hover-bg: var(--mono-table-hover-bg, var(--_mono-table-row-bg, var(--_mono-table-surface)));\r\n\r\n  /* ── head and cell metrics ──────────────────────────────────────────────\r\n     basecoat@1.0.2 styles/vega.css .table th — h-10 px-2 text-start align-middle font-medium whitespace-nowrap\r\n     basecoat@1.0.2 styles/vega.css .table td — p-2 align-middle whitespace-nowrap */\r\n  --_mono-table-font: var(--mono-table-font, var(--_mono-table-font-preset, var(--mono-text-sm)));\r\n  --_mono-table-line-height: var(--mono-table-line-height, var(--_mono-table-line-height-preset, var(--mono-text-sm--lh)));\r\n  --_mono-table-th-height: var(--mono-table-th-height, var(--_mono-table-th-height-preset, calc(var(--mono-spacing) * 10)));\r\n  --_mono-table-th-pad-x: var(--mono-table-th-pad-x, var(--_mono-table-th-pad-x-preset, calc(var(--mono-spacing) * 2)));\r\n  --_mono-table-th-font: var(--mono-table-th-font, var(--_mono-table-th-font-preset, var(--_mono-table-font)));\r\n  --_mono-table-th-weight: var(--mono-table-th-weight, var(--_mono-table-th-weight-preset, var(--mono-font-weight-medium)));\r\n  --_mono-table-th-color: var(--mono-table-th-color, var(--_mono-table-th-color-preset, var(--_mono-table-text)));\r\n  --_mono-table-th-transform: var(--mono-table-th-transform, var(--_mono-table-th-transform-preset, none));\r\n  --_mono-table-th-tracking: var(--mono-table-th-tracking, var(--_mono-table-th-tracking-preset, normal));\r\n  --_mono-table-cell-pad: var(--mono-table-cell-pad, var(--_mono-table-cell-pad-preset, calc(var(--mono-spacing) * 2)));\r\n\r\n  /* ── the sibling chrome ─────────────────────────────────────────────────\r\n     basecoat@1.0.2 components/table.css .table tfoot — bg-muted/50 border-t font-medium */\r\n  --_mono-table-foot-bg: var(--mono-table-foot-bg, color-mix(in oklab, var(--muted) 50%, var(--_mono-table-surface)));\r\n  --_mono-table-foot-gap: var(--mono-table-foot-gap, calc(var(--mono-spacing) * 3));\r\n\r\n  /* ── Loading overlay (mono-table-loading) ── */\r\n  --_mono-table-loading-bg: var(--mono-table-loading-bg, color-mix(in oklab, var(--_mono-table-surface) 64%, transparent));\r\n  --_mono-table-loading-blur: var(--mono-table-loading-blur, 2px);\r\n  --_mono-table-spinner-size: var(--mono-table-spinner-size, 1.5rem);\r\n  --_mono-table-spinner-width: var(--mono-table-spinner-width, 2.5px);\r\n  --_mono-table-spinner-color: var(--mono-table-spinner-color, var(--_mono-table-accent));\r\n  --_mono-table-spinner-speed: var(--mono-table-spinner-speed, 0.65s);\r\n  /* Above every tier this sheet uses (pinned header/footer tops out at 3) AND above the\r\n     lifts consumers have already shipped, so an app that raises its own header cannot\r\n     accidentally paint through the dim. Raise it here if a ladder ever needs to go past. */\r\n  --_mono-table-loading-z: var(--mono-table-loading-z, 10);\r\n  /* How far below the frozen header the spinner sits. */\r\n  --_mono-table-loading-gap: var(--mono-table-loading-gap, 1.25rem);\r\n\r\n  /* ── Error bar (mono-table-error) ── */\r\n  --_mono-table-error: var(--mono-table-error, var(--destructive));\r\n  /* opaque: the bar pins under a frozen header with rows sliding beneath it */\r\n  --_mono-table-error-bg: var(--mono-table-error-bg, color-mix(in oklab, var(--_mono-table-error) var(--mono-mode-tint), var(--_mono-table-surface)));\r\n  --_mono-table-error-border: var(--mono-table-error-border, color-mix(in oklab, var(--_mono-table-error) var(--mono-mode-state-border-alpha, 24%), transparent));\r\n\r\n  /* ── Empty state (mono-table-empty) ──\r\n     Room the message reserves on the scroll wrapper. An empty grid is a header\r\n     over nothing, so unlike the loading overlay there is no height left to\r\n     freeze — this is the height, and the element reads it off itself so a theme\r\n     or a single field can retune it. */\r\n  --_mono-table-empty-min-h: var(--mono-table-empty-min-h, 12rem);\r\n  /* How far below the frozen header the message sits. */\r\n  --_mono-table-empty-gap: var(--mono-table-empty-gap, 2rem);\r\n  /* One tier BELOW the loading overlay: when a reload starts on an empty grid\r\n     both are briefly up, and the spinner is the one that should be on top. */\r\n  --_mono-table-empty-z: var(--mono-table-empty-z, 9);\r\n\r\n  /* ── Row detail (mono-table-detail) ── */\r\n  --_mono-table-detail-size: var(--mono-table-detail-size, 1.5rem);\r\n  --_mono-table-detail-radius: var(--mono-table-detail-radius, var(--mono-radius-sm));\r\n  --_mono-table-detail-color: var(--mono-table-detail-color, var(--_mono-table-muted));\r\n  --_mono-table-detail-color-open: var(--mono-table-detail-color-open, var(--_mono-table-accent));\r\n  --_mono-table-detail-hover-bg: var(--mono-table-detail-hover-bg, var(--_mono-table-hover-bg));\r\n  --_mono-table-detail-panel-bg: var(--mono-table-detail-panel-bg, var(--_mono-table-soft));\r\n  --_mono-table-detail-panel-pad: var(--mono-table-detail-panel-pad, calc(var(--mono-spacing) * 3) calc(var(--mono-spacing) * 4));\r\n\r\n  /* ── Pre-port READ-ONLY colour names — alive until 3.0 ──────────────────\r\n     The pre-port sheet DECLARED a palette on the table that host CSS reads\r\n     (esw-ui paints a sticky dropdown-panel head with\r\n     `color-mix(… var(--mono-table-primary) …, var(--mono-table-sky) …)`). The\r\n     port dropped them, so such a declaration went invalid → transparent and the\r\n     rows scrolled through the head. Restated here from the resolved palette, so\r\n     they follow the theme colour (ONE's navy/blue) and a per-table `mono-color`.\r\n     ONLY names the port does not read as knobs: declaring a knob name\r\n     (`--mono-table-border`, `-surface`, `-soft`, `-zebra`…) here would override\r\n     the value a flavor sets on :root. Not knobs — setting one changes nothing. */\r\n  --mono-table-primary: var(--_mono-table-accent);\r\n  --mono-table-deep: color-mix(in oklab, var(--_mono-table-accent) 82%, black);\r\n  --mono-table-sky: var(--info);\r\n  --mono-table-lite: color-mix(in oklab, var(--_mono-table-accent) 22%, var(--_mono-table-surface));\r\n}\r\n\r\n/* ── Colours — EXTENSION ───────────────────────────────────────────────────\r\n   `primary` is the default and emits no attribute, exactly as every other\r\n   ported component does. */\r\n:is([mono-table],.mono-table):is([mono-color=\"secondary\"],:where(.mono-table-secondary)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"secondary\"],:where(.mono-table-secondary)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"secondary\"],:where(.mono-table-secondary)) {\r\n  --_mono-table-accent-preset: var(--secondary-foreground);\r\n  --_mono-table-on-accent-preset: var(--secondary);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"success\"],:where(.mono-table-success)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"success\"],:where(.mono-table-success)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"success\"],:where(.mono-table-success)) {\r\n  --_mono-table-accent-preset: var(--success);\r\n  --_mono-table-on-accent-preset: var(--success-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"danger\"],:where(.mono-table-danger)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"danger\"],:where(.mono-table-danger)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"danger\"],:where(.mono-table-danger)) {\r\n  --_mono-table-accent-preset: var(--destructive);\r\n  --_mono-table-on-accent-preset: var(--destructive-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"warning\"],:where(.mono-table-warning)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"warning\"],:where(.mono-table-warning)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"warning\"],:where(.mono-table-warning)) {\r\n  --_mono-table-accent-preset: var(--warning);\r\n  --_mono-table-on-accent-preset: var(--warning-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"info\"],:where(.mono-table-info)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"info\"],:where(.mono-table-info)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"info\"],:where(.mono-table-info)) {\r\n  --_mono-table-accent-preset: var(--info);\r\n  --_mono-table-on-accent-preset: var(--info-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"teal\"],:where(.mono-table-teal)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"teal\"],:where(.mono-table-teal)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"teal\"],:where(.mono-table-teal)) {\r\n  --_mono-table-accent-preset: var(--teal);\r\n  --_mono-table-on-accent-preset: var(--teal-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"purple\"],:where(.mono-table-purple)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"purple\"],:where(.mono-table-purple)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"purple\"],:where(.mono-table-purple)) {\r\n  --_mono-table-accent-preset: var(--purple);\r\n  --_mono-table-on-accent-preset: var(--purple-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"neutral\"],:where(.mono-table-neutral)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"neutral\"],:where(.mono-table-neutral)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"neutral\"],:where(.mono-table-neutral)) {\r\n  --_mono-table-accent-preset: var(--neutral);\r\n  --_mono-table-on-accent-preset: var(--neutral-foreground);\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-color=\"dark\"],:where(.mono-table-dark)),\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-color=\"dark\"],:where(.mono-table-dark)),\r\n:is([mono-table-shell],.mono-table-shell):is([mono-color=\"dark\"],:where(.mono-table-dark)) {\r\n  --_mono-table-accent-preset: var(--dark);\r\n  --_mono-table-on-accent-preset: var(--dark-foreground);\r\n}\r\n\r\n\r\n/* ── Search ─────────────────────────────────────────────────────────────── */\r\n\r\n/* `mono-table-search` renders mono-input's markup (`.mono-input` →\r\n   `.mono-input-field` → `.mono-input-native`), so the entire size × color ×\r\n   variant matrix comes from `input.css` — there is deliberately no field styling\r\n   here. Block-level to match `mono-input { display: block }`. */\r\nmono-table-search,\r\nmono-shadow-table-search {\r\n  display: block;\r\n}\r\n\r\n/* The search keeps a sensible floor width so it can't collapse in a cramped\r\n   toolbar. It still grows to fill like a `mono-input` (`.mono-input` is\r\n   `width: 100%`), and an explicit `width`/`min-width` prop wins because\r\n   `buildSizeStyle` writes those inline. */\r\n.mono-input:is([mono-table-search],.mono-table-search) {\r\n  min-width: 180px;\r\n}\r\n\r\n/* The glyphs size themselves — `.mono-icon` is already `--mono-icon-md` (light)\r\n   and the shadow build's inline SVGs are em-based — so there is nothing to set\r\n   here. `.mono-input-prefix` has no intrinsic box, so do NOT give the icon a\r\n   percentage size: it would resolve against `auto` and collapse. */\r\n\r\n/* Kill the native focus outline in host projects; keep the box-shadow ring.\r\n   Covers mono-input's inner field and the page-size native <select>. */\r\n:is([mono-table-search],.mono-table-search) .mono-input-native:focus,\r\n:is([mono-table-search],.mono-table-search) .mono-input-native:focus-visible,\r\n:is([mono-sel],.mono-table-sel):focus,\r\n:is([mono-sel],.mono-table-sel):focus-visible {\r\n  outline: none !important;\r\n}\r\n\r\n/* A `type=\"search\"` input shows a native clear affordance; make it feel clickable\r\n   (mono-input's own `clearable` button is styled by input.css). */\r\n:is([mono-table-search],.mono-table-search) .mono-input-native[type='search']::-webkit-search-cancel-button {\r\n  cursor: pointer;\r\n}\r\n\r\n/* ── multi-context chips (inside the field, before the input) ─────────────── */\r\n:is([mono-search-chips],.mono-table-search-chips) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  flex-wrap: nowrap;\r\n  gap: 0.25rem;\r\n  padding-left: 0.4rem;\r\n  /* Fixed-width horizontal strip so a chip list never squeezes the input —\r\n     overflow scrolls instead of wrapping into a column. */\r\n  width: var(--mono-table-search-chips-width, 140px);\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  /* Drag-to-scroll (see the core's pointer handlers): the grab cursor advertises\r\n     it, and the scrollbar is hidden so the strip stays tidy. */\r\n  cursor: grab;\r\n  scrollbar-width: none;\r\n  -ms-overflow-style: none;\r\n}\r\n:is([mono-search-chips],.mono-table-search-chips):is([mono-grabbing],.is-grabbing) {\r\n  cursor: grabbing;\r\n}\r\n:is([mono-search-chips],.mono-table-search-chips)::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n:is([mono-search-chip],.mono-table-search-chip) {\r\n  /* Keep chips at their natural width inside the nowrap strip so they scroll\r\n     rather than compress. */\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  max-width: 100%;\r\n  padding: 0.3rem 0.6rem;\r\n  border-radius: 999px;\r\n  background: var(--_mono-table-soft);\r\n  color: var(--_mono-table-text);\r\n  font-size: 0.85rem;\r\n  line-height: 1.35;\r\n  white-space: nowrap;\r\n  justify-content: space-between;\r\n}\r\n/* The column a chip is bound to — the \"context\" half of `Nama: Andy`. */\r\n:is([mono-search-chip-ctx],.mono-table-search-chip-ctx) {\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n}\r\n:is([mono-search-chip-text],.mono-table-search-chip-text) {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n:is([mono-search-chip-x],.mono-table-search-chip-x) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: transparent;\r\n  color: var(--_mono-table-muted);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n}\r\n:is([mono-search-chip-x],.mono-table-search-chip-x):hover {\r\n  color: var(--_mono-table-accent);\r\n}\r\n:is([mono-search-chip-x],.mono-table-search-chip-x) .mono-icon {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n/* ── \"See All\" overflow trigger + panel ─────────────────────────────────── */\r\n/* The field wrapper anchors the absolutely-positioned overflow panel. */\r\n:is([mono-table-search],.mono-table-search) {\r\n  position: relative;\r\n}\r\n/* The trigger chip reuses `[mono-search-chip]`'s shape; these layer a\r\n   stronger surface so it reads as a button rather than a plain chip. */\r\n:is([mono-search-chip-more],.mono-table-search-chip-more) {\r\n  padding: 0.3rem 0.55rem 0.3rem 0.7rem;\r\n  border: 0;\r\n  background: var(--_mono-table-border);\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n}\r\n:is([mono-search-chip-more],.mono-table-search-chip-more):hover {\r\n  background: color-mix(in oklab, var(--_mono-table-accent) 30%, var(--_mono-table-surface));\r\n}\r\n:is([mono-search-chip-more],.mono-table-search-chip-more):is([mono-open],.open) {\r\n  background: var(--_mono-table-accent);\r\n  color: var(--_mono-table-on-accent);\r\n}\r\n/* Count badge — tints itself from the chip's `currentColor`. */\r\n:is([mono-search-chip-count],.mono-table-search-chip-count) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 1.2rem;\r\n  height: 1.2rem;\r\n  padding: 0 0.35rem;\r\n  border-radius: 999px;\r\n  background: color-mix(in srgb, currentColor 18%, transparent);\r\n  font-size: 0.72rem;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n}\r\n/* The panel sits below the field and lists the chips that didn't fit inline. */\r\n:is([mono-search-more-panel],.mono-table-search-more-panel) {\r\n  position: absolute;\r\n  top: calc(100% + 0.35rem);\r\n  left: 0;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  padding: 0.55rem;\r\n  max-width: 22rem;\r\n  max-height: 14rem;\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n}\r\n\r\n/* ── slotted filter-builder (chevron toggle + panel + chip) ──────────────── */\r\n/* Sized to match `mono-input`'s clearable affordance (`.mono-input-clear`) so the\r\n   chevron sits level with the field's other suffix controls. */\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin-right: 0.4rem;\r\n  width: var(--_mi-clear, 1.8rem);\r\n  height: var(--_mi-clear, 1.8rem);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 9999px;\r\n  background: transparent;\r\n  color: color-mix(in oklab, var(--_mono-table-text) 56%, transparent);\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition: transform var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle) > .mono-icon {\r\n  width: var(--mono-icon-md, 1.25rem);\r\n  height: var(--mono-icon-md, 1.25rem);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):hover {\r\n  color: var(--_mono-table-accent);\r\n  background: color-mix(in srgb, var(--_mono-table-accent) 8%, transparent);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):active {\r\n  transform: scale(0.95);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):is([mono-active],.active) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n/* `open` rotates the chevron on its own (the :active scale is momentary). */\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):is([mono-open],.open) {\r\n  transform: rotate(180deg);\r\n}\r\n:is([mono-search-filter-toggle],.mono-table-search-filter-toggle):is([mono-open],.open):active {\r\n  transform: rotate(180deg) scale(0.95);\r\n}\r\n/* The slotted `<mono-filter-builder>` panel — portaled to <body> and positioned\r\n   fixed by the popup controller (flip up / shift in at viewport edges), so it\r\n   floats over the rows instead of pushing them. Width tracks the builder's own\r\n   `width` (max-content, floored/clamped to the viewport) — so the builder sizes\r\n   its \"modal\". */\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  width: max-content;\r\n  min-width: min(90vw, 20rem);\r\n  max-width: 90vw;\r\n  max-height: min(70vh, var(--mono-popup-avail-h, 70vh));\r\n  overflow: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding: 0.65rem;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n}\r\n/* One chip representing the active built filter — a touch stronger than a search\r\n   chip so it stands apart as a different kind of context. */\r\n:is([mono-search-filter-chip],.mono-table-search-filter-chip) {\r\n  background: var(--_mono-table-border);\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n}\r\n\r\n/* ── suggestion panel ─────────────────────────────────────────────────────── */\r\n/* The panel is portaled to <body>, so it only sees the `--mono-table-*` block if\r\n   the portal host got a matching class. Every colour therefore falls back to the\r\n   global `--theme-*` tokens (and then a literal) — an unresolved var would make\r\n   `background` invalid and paint the whole panel transparent. */\r\n:is([mono-search-panel],.mono-table-search-panel) {\r\n  /* Resolved once here so the row rules below can't inherit an invalid value. */\r\n  --_mono-search-accent: var(--_mono-table-accent, var(--primary));\r\n  --_mono-search-surface: var(--_mono-table-surface, var(--popover));\r\n  --_mono-search-soft: color-mix(in oklab, var(--_mono-search-accent) 7%, var(--_mono-search-surface));\r\n  --_mono-search-lite: color-mix(in oklab, var(--_mono-search-accent) 22%, var(--_mono-search-surface));\r\n\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  min-width: 12rem;\r\n  max-height: 15rem;\r\n  overflow-y: auto;\r\n  /* Portaled + anchored: a chained scroll would drag this panel off-screen\r\n     (see `[mono-th-filter-list]`). */\r\n  overscroll-behavior: contain;\r\n  padding: 0.25rem;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n  color: var(--_mono-table-text);\r\n  font-size: 0.82rem;\r\n}\r\n:is([mono-search-panel],.mono-table-search-panel):is([mono-open],.open) {\r\n  display: block;\r\n}\r\n:is([mono-search-option],.mono-table-search-option) {\r\n  display: block;\r\n  width: 100%;\r\n  padding: 0.4rem 0.5rem;\r\n  border: 0;\r\n  background: transparent;\r\n  color: inherit;\r\n  font: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n:is([mono-search-option],.mono-table-search-option):hover {\r\n  background: var(--_mono-search-soft);\r\n}\r\n/* The active row is marked by a leading bar only — no fill — so it stays\r\n   distinct from a hovered row's tint, and Enter always has a visible target.\r\n   The bar reads stronger once the keyboard has actually moved INTO the list. */\r\n:is([mono-search-option],.mono-table-search-option):is([mono-active],.active) {\r\n  box-shadow: inset 2px 0 0 var(--_mono-search-accent);\r\n}\r\n:is([mono-search-panel],.mono-table-search-panel):is([mono-zone-list],.zone-list) :is([mono-search-option],.mono-table-search-option):is([mono-active],.active) {\r\n  box-shadow: inset 3px 0 0 var(--_mono-search-accent);\r\n}\r\n\r\n/* ── Paging ─────────────────────────────────────────────────────────────── */\r\n\r\n:is([mono-table-paging],.mono-table-pg) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb) {\r\n  min-width: 30px;\r\n  height: 30px;\r\n  padding: 0 0.45rem;\r\n  border: var(--mono-border-width, 1px) solid var(--_mono-table-border);\r\n  border-radius: var(--mono-radius-sm, 0.5rem);\r\n  background: var(--_mono-table-surface);\r\n  color: var(--_mono-table-muted);\r\n  font-family: inherit;\r\n  font-size: 0.8rem;\r\n  font-weight: var(--mono-font-weight-semibold, 600);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition:\r\n    border-color var(--mono-duration-fast, 150ms) var(--mono-ease, ease),\r\n    background-color var(--mono-duration-fast, 150ms) var(--mono-ease, ease),\r\n    color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n\r\n/* The prev/next arrows are inline SVG, and `.mono-icon` defaults to 20px — which is\r\n   wider than the 0.8rem digit beside it, so those two buttons grew to 36px while the\r\n   numbered ones stayed 30 and the row read as mismatched (an ellipse among circles,\r\n   once a skin rounds them). `em` ties the glyph to the BUTTON's own font-size, so the\r\n   compact group pager scales with it instead of needing its own rule. */\r\n:is([mono-pgb],.mono-table-pgb) .mono-icon {\r\n  width: 1.15em;\r\n  height: 1.15em;\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb):hover:not(:disabled) {\r\n  border-color: var(--_mono-table-border);\r\n  background: var(--_mono-table-soft);\r\n  color: var(--_mono-table-accent);\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb):is([mono-on],.on) {\r\n  background: var(--_mono-table-accent);\r\n  color: var(--_mono-table-on-accent);\r\n  border-color: var(--_mono-table-accent);\r\n  box-shadow: 0 2px 8px color-mix(in oklab, var(--_mono-table-accent) 22%, transparent);\r\n}\r\n\r\n:is([mono-pgb],.mono-table-pgb):disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n\r\n:is([mono-pg-el],.mono-table-pg-el) {\r\n  padding: 0 0.3rem;\r\n  color: var(--_mono-table-muted);\r\n  font-size: 0.8rem;\r\n}\r\n\r\n/* ── Page size + info ───────────────────────────────────────────────────── */\r\n\r\n:is([mono-table-page-size],.mono-table-page-size) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  font-size: 0.78rem;\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n:is([mono-sel],.mono-table-sel) {\r\n  padding: 0.4rem 0.6rem;\r\n  border: var(--mono-border-width, 1px) solid var(--_mono-table-border);\r\n  border-radius: var(--mono-radius-sm, 0.5rem);\r\n  font-family: inherit;\r\n  font-size: 0.8rem;\r\n  color: var(--_mono-table-muted);\r\n  background: var(--_mono-table-soft);\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\n:is([mono-sel],.mono-table-sel):focus {\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n\r\n:is([mono-sel],.mono-table-sel):disabled {\r\n  opacity: 0.55;\r\n  cursor: not-allowed;\r\n}\r\n\r\n:is([mono-table-info],.mono-table-info) {\r\n  font-size: 0.78rem;\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n/* ── Native table wrapper ───────────────────────────────────────────────── */\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  -webkit-overflow-scrolling: touch;\r\n  overscroll-behavior-x: contain;\r\n}\r\n\r\n/* Opt-in vertical scroll region for infinity/virtual paging. Add `scroll-y` +\r\n   an inline `max-height`; the container becomes the scroll target that\r\n   `<mono-table-paging type=\"infinity-scroll|virtual-scroll\">` drives. */\r\n:is([mono-table-scroll],.mono-table-scroll):is([mono-scroll-y],.scroll-y) {\r\n  overflow-y: auto;\r\n  overscroll-behavior-y: contain;\r\n  position: relative;\r\n}\r\n\r\n/* Opt-in sticky header so column titles stay visible while the rows scroll.\r\n\r\n   A pinned cell in a `border-collapse: collapse` table keeps its TEXT and loses\r\n   everything else. Collapsed borders belong to the table, not the cell — they are\r\n   painted where the cell sits in flow — so the header's bottom rule, a pinned\r\n   column's edge and any `th { border-right }` a consumer adds all scrolled away\r\n   under the frozen titles. And the header gradient sits on `thead`, which\r\n   scrolls too, so the rows showed through the transparent cells.\r\n\r\n   A pinned COLUMN (`mono-table-sticky-left` / `-right`) is the same story\r\n   sideways: its edge was painted at the cell's flow position, off in the\r\n   scrolled-away part of the table, and the borders of the cells sliding UNDER\r\n   it leaked through as ticks between the rows.\r\n\r\n   So any table with a frozen cell — sticky head, sticky foot, a pinned column —\r\n   uses SEPARATE borders with zero spacing: the same geometry (each row still\r\n   carries its 1px rule, the header its 2px), but every cell paints its own\r\n   borders inside its own box and carries them along, and a cell sliding under\r\n   a pinned one takes its border with it. The pinned cells get an opaque\r\n   background of their own. Separate borders ignore a `<tr>` border, so the body\r\n   row rule moves onto the cells here. */\r\n:is([mono-table],.mono-table):is([mono-sticky-head],.mono-table-sticky-head),\r\n:is([mono-sticky-head],.mono-table-sticky-head) :is([mono-table],.mono-table),\r\n:is([mono-table],.mono-table):is([mono-sticky-foot],.mono-table-sticky-foot),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) :is([mono-table],.mono-table),\r\n:is([mono-table],.mono-table):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) {\r\n  border-collapse: separate;\r\n  border-spacing: 0;\r\n}\r\n:is([mono-sticky-head],.mono-table-sticky-head) tbody tr > td,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tbody tr > td,\r\n:is([mono-table],.mono-table):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) tbody tr > td {\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n}\r\n:is([mono-sticky-head],.mono-table-sticky-head) tbody tr:last-child > td,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tbody tr:last-child > td,\r\n:is([mono-table],.mono-table):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) tbody tr:last-child > td {\r\n  border-bottom: none;\r\n}\r\n/* (0,2,2) on purpose — a STATE rule. `[mono-sticky-head] thead th` alone is\r\n   (0,1,2): attribute + two type selectors — the SAME weight as the resting\r\n   `[mono-table] thead th` paint further down, which then won on source order\r\n   and left a frozen head see-through. The marker may sit on the table or on\r\n   its scroll wrapper, so both forms. */\r\n:is([mono-table],.mono-table):is([mono-sticky-head],.mono-table-sticky-head) thead th,\r\n:is([mono-sticky-head],.mono-table-sticky-head) :is([mono-table],.mono-table) thead th {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 2;\r\n  /* Opaque — the gradient is on `thead` and does not follow; same fill the\r\n     pinned-column header cells use, so the two kinds of frozen cell match. */\r\n  background: var(--_mono-table-head-frozen-bg);\r\n}\r\n\r\n/* Opt-in sticky footer — mirrors sticky-head so an aggregate row (usually\r\n   holding <mono-table-summary> cells) stays pinned to the bottom while the body\r\n   scrolls. Needs an opaque background or scrolled rows show through.\r\n\r\n   It draws NO separator of its own. `[mono-table] tfoot td/th` further down\r\n   already carries a `border-top`, and this rule used to add a hairline shadow on\r\n   that same edge — so a pinned footer read as two lines a pixel apart. The\r\n   border is the one that stays. */\r\n/* (0,2,2) on purpose — a STATE rule. The marker may sit on the table or on its\r\n   scroll wrapper, so both forms; and a host page's cell-padding rule at (0,2,1)\r\n   (these docs carry one, to undo VitePress's own) must not take the scrollbar\r\n   band away. */\r\n:is([mono-table],.mono-table):is([mono-sticky-foot],.mono-table-sticky-foot) tfoot th,\r\n:is([mono-table],.mono-table):is([mono-sticky-foot],.mono-table-sticky-foot) tfoot td,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) :is([mono-table],.mono-table) tfoot th,\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) :is([mono-table],.mono-table) tfoot td {\r\n  position: sticky;\r\n  bottom: 0;\r\n  z-index: 2;\r\n  background: var(--_mono-table-foot-bg);\r\n  /* Reserve space at the bottom of the cell for a horizontal scrollbar that\r\n     shares this edge (mainly for OVERLAY scrollbars, which draw over content).\r\n     The totals text sits above this band and the cell's opaque background fills\r\n     it — so the scrollbar covers the empty band, not the numbers, with no\r\n     content peeking through (unlike padding on the container). Off by default so\r\n     classic-scrollbar layouts (footer already above the bar) aren't made chunky;\r\n     opt in with `--mono-table-foot-scrollbar` (e.g. `0.6rem`). */\r\n  padding-bottom: calc(0.65rem + var(--mono-table-foot-scrollbar, 0rem));\r\n}\r\n\r\n/* A NON-sticky footer at the end of a scroll region shares the bottom edge with\r\n   the horizontal scrollbar; this gap lifts it clear. Scoped with `:has(tfoot)` so\r\n   scroll regions without a footer (virtual / infinity paging) keep their exact\r\n   scroll math, and EXCLUDED for a sticky footer — that one already pins itself\r\n   above the scrollbar, so the padding would only open a strip below the frozen\r\n   totals where scrolled rows peek through. Tune with `--mono-table-foot-gap`. */\r\n:is([mono-table-scroll],.mono-table-scroll):has(tfoot):not(:has(:is([mono-sticky-foot],.mono-table-sticky-foot))) {\r\n  padding-bottom: var(--_mono-table-foot-gap, 0.4rem);\r\n}\r\n\r\n/* Footer cells are OPAQUE and separated by a top border, so:\r\n   • a pinned footer cell (sticky column) doesn't let horizontally-scrolled body\r\n     cells show through it (the totals stay legible over the scrolling data), and\r\n   • the totals read as a distinct row.\r\n   The sticky-column z-index already lifts a pinned footer cell above the body. */\r\n/* basecoat@1.0.2 styles/vega.css .table tfoot — bg-muted/50 border-t font-medium\r\n   A DIFFERENT wash from the rows, on purpose: a footer painted the row colour\r\n   read as one more row, and pinned, as a row sliding over the others. */\r\n:is([mono-table],.mono-table) tfoot td,\r\n:is([mono-table],.mono-table) tfoot th {\r\n  background: var(--_mono-table-foot-bg);\r\n  border-top: var(--mono-border-width) solid var(--_mono-table-border);\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n/* Aggregate value rendered by <mono-table-summary>. Tabular figures so a column\r\n   of totals lines up; slightly heavier than body text. */\r\n:is([mono-table-summary],.mono-table-summary) {\r\n  font-weight: var(--mono-font-weight-semibold, 600);\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n\r\n/* Scroll-paging status strip (Load more / Loading… / — end —). */\r\n:is([mono-table-paging],.mono-table-pg):is([mono-pg-scroll],.mono-table-pg-scroll) {\r\n  justify-content: center;\r\n  padding: 0.5rem 0;\r\n  color: rgba(var(--theme-text-rgb, 26, 45, 66), 0.6);\r\n  font-size: 0.82rem;\r\n}\r\n\r\n:is([mono-table-shell],.mono-table-shell),\r\n:is([mono-table-card],.mono-table-card),\r\n:is([mono-table-toolbar],.mono-table-toolbar),\r\n:is([mono-table-foot],.mono-table-foot) {\r\n  min-width: 0;\r\n  max-width: 100%;\r\n}\r\n\r\n/* ── Loading overlay (mono-table-loading) ───────────────────────────────────\r\n   A drop-in spinner overlay dropped straight into the <table> (or into\r\n   [mono-table-scroll]). A bare custom element is not valid in a row section, so the\r\n   core wraps itself in a zero-height <tr><td colspan> on connect — see\r\n   `_ensureRowHost`; a hand-written <caption> or <td> host is honoured as-is.\r\n   The host is out of normal flow (position:absolute), so its row adds no layout and\r\n   the overlay covers the nearest positioned ancestor (the core sets\r\n   position:relative on the table / scroll wrapper for it). Hidden until the\r\n   core reflects [data-mono-loading] from the controller's `loading` state — or until the\r\n   consumer sets [data-loading] from a busy flag of its own.\r\n   `mono-shadow-table-loading` styles the light-DOM host from this global sheet;\r\n   the shadow build additionally rewrites these to `:host` for the spinner tree. */\r\n\r\nmono-table-loading,\r\nmono-shadow-table-loading {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: var(--_mono-table-loading-z, 10);\r\n  display: none;\r\n  /* Anchored at the TOP, not centred: `sticky` below only moves the spinner once its static\r\n     position would leave the view, so a static position in the middle of a tall table gives a\r\n     different result at every scroll offset. From the top, one `top` holds at all of them. */\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  background: var(--_mono-table-loading-bg);\r\n  backdrop-filter: blur(var(--_mono-table-loading-blur));\r\n  -webkit-backdrop-filter: blur(var(--_mono-table-loading-blur));\r\n  pointer-events: none;\r\n}\r\n\r\n/* Two independent sources, two attributes. `data-loading` is the CONSUMER's — set it from your\r\n   own busy flag and the element never touches it. `data-mono-loading` is the element's own,\r\n   reflected from the bound controller's `loading`. Either one shows the overlay; one attribute\r\n   shared between both would need the element to work out who wrote it, which is not knowable\r\n   (a MutationObserver reports asynchronously, after any \"I am writing\" flag has been reset). */\r\nmono-table-loading[data-loading],\r\nmono-table-loading[data-mono-loading],\r\nmono-shadow-table-loading[data-loading],\r\nmono-shadow-table-loading[data-mono-loading] {\r\n  display: flex;\r\n}\r\n\r\n/* ── Pending placeholder (the automatic skeleton, `pending`) ───────────────────\r\n   For the controller's FIRST load the element shows a phantom-ui block of placeholder\r\n   rows mirroring the header instead of the spinner — same overlay geometry, not dimmed\r\n   (there is nothing under it yet). The row/cell/bar classes are the structure phantom\r\n   measures; the bars carry a real background so it counts them as blocks. Colours and\r\n   radius come from the theme hooks shared with components/skeleton/skeleton.css. */\r\nmono-table-loading[data-mono-pending],\r\nmono-shadow-table-loading[data-mono-pending] {\r\n  display: block;\r\n  align-items: stretch;\r\n  background: transparent;\r\n  backdrop-filter: none;\r\n  -webkit-backdrop-filter: none;\r\n  pointer-events: none;\r\n}\r\n\r\n:is([mono-table-skeleton], .mono-table-skeleton) {\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:is([mono-table-skeleton-row], .mono-table-skeleton-row) {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n:is([mono-table-skeleton-cell], .mono-table-skeleton-cell) {\r\n  flex: none;\r\n  box-sizing: border-box;\r\n  padding-inline: 0.75rem;\r\n}\r\n\r\n:is([mono-table-skeleton-bar], .mono-table-skeleton-bar) {\r\n  display: block;\r\n  width: 100%;\r\n  height: calc(var(--_mono-table-th-height, 2.5rem) * 0.4);\r\n  border-radius: var(--mono-skeleton-radius, var(--mono-radius-sm, 0.25rem));\r\n  background: var(--mono-skeleton-bg, var(--mono-mode-surface-hover, var(--muted)));\r\n}\r\n\r\n/* The row `mono-table-loading` builds for itself when it is dropped straight into\r\n   a row section (see `_ensureRowHost`). It is a host, not a layout participant:\r\n   any height, padding or border here would open a permanent gap under the header\r\n   whether or not anything is loading. */\r\n/* `!important` for the same reason as `[mono-error-row] > td` below: this\r\n   cell is a host, not content, and a consumer's generic `td { padding }` would\r\n   otherwise open a permanent gap under the header — on a row whose entire job is\r\n   to occupy no space at all. */\r\n:is([mono-loading-row],.mono-table-loading-row),\r\n:is([mono-loading-row],.mono-table-loading-row) > td {\r\n  height: 0 !important;\r\n  padding: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\n:is([mono-loading-spinner],.mono-table-spinner) {\r\n  box-sizing: border-box;\r\n  width: var(--_mono-table-spinner-size);\r\n  height: var(--_mono-table-spinner-size);\r\n  border: var(--_mono-table-spinner-width) solid var(--_mono-table-spinner-color);\r\n  border-right-color: transparent;\r\n  border-radius: 50%;\r\n  animation: mono-table-spin var(--_mono-table-spinner-speed) linear infinite;\r\n\r\n  /* Stay in the VISIBLE area of a table that scrolls.\r\n\r\n     The overlay covers the whole table — that is what keeps every column and row dimmed\r\n     however far you have scrolled — but the centre of a wide or long table is far outside\r\n     the scrollport, and a spinner you have to scroll to find reads as no spinner at all.\r\n\r\n     So the spinner is pinned a constant distance below the header instead. Only `top` is\r\n     set: a second inset on the same axis gives sticky two edges to satisfy and it slides\r\n     between them as you scroll, which is what made the old `inset: 1rem` drift. The header\r\n     offset is measured and published by the element (0 unless the header is frozen). */\r\n  position: sticky;\r\n  top: calc(var(--mono-table-loading-head, 0px) + var(--_mono-table-loading-gap, 1.25rem));\r\n  /* `auto` = no horizontal stickiness, so a table with no scroll region keeps the flex\r\n     centring below and this costs it nothing. The offset is handed down by the overlay\r\n     (next rule) only where there IS a scrollport to centre on. */\r\n  left: var(--mono-table-loading-x, auto);\r\n}\r\n\r\n/* Centre the spinner on the SCROLLPORT rather than on the table, so it lands in the middle\r\n   of what you can actually see at any horizontal offset.\r\n\r\n   Both halves are scoped to `[mono-table-scroll]`. `cqw` with no query container resolves\r\n   against the small VIEWPORT, which would throw the spinner off a table that has no scroll\r\n   region — and there the default `justify-content: center` already centres it on the table,\r\n   which for a table that does not scroll is the same place. `:has()` keeps the containment\r\n   off scrollers this feature never touches — keyed on the ELEMENT, not on the row it generates,\r\n   so a `<caption>` or hand-written `<td>` host gets the same treatment.\r\n\r\n   The offset travels as a custom property on the OVERLAY rather than as a rule on the\r\n   spinner, so the shadow build gets it too: this sheet styles the light-DOM\r\n   `mono-shadow-table-loading` host, and the value inherits across the shadow boundary to\r\n   the spinner — where a `[mono-table-scroll] <spinner>` descendant selector never would. */\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-table-loading),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-shadow-table-loading),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-table-error),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-shadow-table-error) {\r\n  container-type: inline-size;\r\n}\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) mono-table-loading,\r\n:is([mono-table-scroll],.mono-table-scroll) mono-shadow-table-loading {\r\n  justify-content: flex-start;\r\n  --mono-table-loading-x: calc(50cqw - var(--_mono-table-spinner-size) / 2);\r\n}\r\n\r\n@keyframes mono-table-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* ── Header filter (mono-table-th `header-filter`) ───────────────────────────\r\n   Right-click a header → `[mono-th-menu]` (one \"Header Filter\" item) → the\r\n   cascading `[mono-th-filter]` panel of the column's distinct values. Both panels\r\n   are body-portaled by PopupPortalController (position:fixed, top/left applied),\r\n   so they escape the table/card's clipping/stacking. The panels re-declare the\r\n   `--mono-table-*` token chain so they theme correctly at the body root; the\r\n   portal also mirrors the table's classes (color themes flow through). */\r\n\r\n/* The root block above gives a panel the whole chain; these are the few values\r\n   a POPOVER resolves differently. Its surface is `--popover` and its ink\r\n   `--popover-foreground` — a panel floats over the page, not in the table — and\r\n   its hover is a real wash rather than the deliberately-off row hover. */\r\n:is([mono-th-menu],.mono-th-menu),\r\n:is([mono-th-filter],.mono-th-filter),\r\n:is([mono-search-panel],.mono-table-search-panel),\r\n:is([mono-search-more-panel],.mono-table-search-more-panel),\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  --_mono-table-surface: var(--mono-table-surface, var(--popover));\r\n  --_mono-table-text: var(--mono-table-text, var(--popover-foreground));\r\n  --_mono-table-ink-mid: var(--mono-table-ink-mid, color-mix(in oklab, var(--popover-foreground) 82%, transparent));\r\n  --_mono-table-hover-bg: var(--mono-table-hover-bg, color-mix(in oklab, var(--muted) 50%, transparent));\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1\r\n   The chrome every portaled table panel shares — the header filter, the column\r\n   menu and its submenu, and the search suggestions. One set of knobs so a\r\n   flavour moves all four at once, exactly as it moves the select's and the\r\n   dropdown's popovers. */\r\n:is([mono-th-menu],.mono-th-menu),\r\n:is([mono-th-filter],.mono-th-filter),\r\n:is([mono-search-panel],.mono-table-search-panel),\r\n:is([mono-search-more-panel],.mono-table-search-more-panel),\r\n:is([mono-search-filter],.mono-table-search-filter) {\r\n  --_mono-table-panel-bg: var(--mono-table-panel-bg, var(--popover));\r\n  --_mono-table-panel-color: var(--mono-table-panel-color, var(--popover-foreground));\r\n  --_mono-table-panel-radius: var(--mono-table-panel-radius, var(--mono-radius-md));\r\n  --_mono-table-panel-ring: var(--mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent));\r\n  --_mono-table-panel-shadow: var(--mono-table-panel-shadow, var(--mono-shadow-md));\r\n}\r\n\r\n/* Header-filter funnel — a BUTTON that leads the header row (so it sits left of\r\n   the caption) and opens the filter. Always visible while `showIcon` is on: it is\r\n   the affordance, not just an active-filter badge.\r\n\r\n   Two signals mark a filtered column, and the GLYPH is the primary one:\r\n   `renderIcon('funnel')` renders `i-mdi-filter-outline` at rest and `i-mdi-filter`\r\n   once the column carries a filter. The colour below reinforces it — faint at\r\n   rest, accent once filtered — but is too easy to miss at 14px on its own. */\r\n:is([mono-th-filter-ind],.mono-th-filter-ind) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0 0.28rem 0 -0.15rem;\r\n  padding: 0.2rem 0.15rem;\r\n  border: 0;\r\n  background: none;\r\n  color: var(--_mono-table-faint);\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  border-radius: var(--theme-radius-xs, 4px);\r\n  vertical-align: middle;\r\n  transition: color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n/* The funnel glyph itself. Light build: an empty <span> carrying `i-mdi-filter` /\r\n   `i-mdi-filter-outline`; shadow build: the inlined mdi SVG. Two things must be\r\n   restated here, and the descendant selector (specificity 0,2,0) is what makes\r\n   them stick in BOTH the layered prod bundle and the unlayered dev server:\r\n     · `display` — under presetWind4, preset-icons emits none, so a bare `i-*`\r\n       span is `inline` and collapses to 0x0 (invisible).\r\n     · `width`/`height` — preset-icons sizes to `1.2em`; the funnel is a fixed\r\n       0.875rem box (the 14px the inline SVG used to hard-code).\r\n   The SVG build inherits the same box, so both render identically. */\r\n:is([mono-th-filter-ind],.mono-th-filter-ind) :is([mono-th-filter-glyph],.mono-th-filter-glyph),\r\n:is([mono-th-menu-ic],.mono-th-menu-ic) :is([mono-th-filter-glyph],.mono-th-filter-glyph) {\r\n  display: block;\r\n  width: 0.875rem;\r\n  height: 0.875rem;\r\n  flex-shrink: 0;\r\n}\r\n:is([mono-th-filter-ind],.mono-th-filter-ind):hover,\r\n:is([mono-th-filter-ind],.mono-th-filter-ind):focus-visible {\r\n  color: var(--_mono-table-accent);\r\n  outline: none;\r\n}\r\n:is([mono-th-filter-ind],.mono-th-filter-ind):focus-visible {\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--_mono-table-accent) 30%, transparent);\r\n}\r\n/* Filtered → the funnel switches COLOUR, on top of the outlined→filled glyph swap\r\n   the builds' `renderIcon('funnel')` already made (it used to switch `display`). */\r\nmono-table-th[data-filtered] :is([mono-th-filter-ind],.mono-th-filter-ind),\r\nmono-shadow-table-th[data-filtered] :is([mono-th-filter-ind],.mono-th-filter-ind),\r\n:host([data-filtered]) :is([mono-th-filter-ind],.mono-th-filter-ind) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n\r\n\r\n/* ── Required-column marker (mono-table-th `required`) ───────────────────────\r\n   The header lays out as three independent boxes — funnel, caption, sort arrow —\r\n   so a marker placed among them drifts away from the text the moment the header\r\n   wraps (a narrow column puts the funnel on its own line above the caption). It\r\n   is rendered INSIDE this wrapper with the label instead, and an inline-flex\r\n   container with the default `nowrap` cannot break between its two items, so the\r\n   `*` and the caption stay together at any width. The wrapper is only emitted for\r\n   a marked column. */\r\n:is([mono-th-caption],.mono-th-caption) {\r\n  display: inline-flex;\r\n  /* Baseline, NOT `flex-start`: the group is as tall as the label's whole line\r\n     box, so top-aligning threw the `*` up to the top of that box — visibly adrift\r\n     above the word rather than attached to it. Sharing the baseline puts it where\r\n     a superscript belongs, and the asterisk glyph already sits high in its own em\r\n     box, so it lands around the caption's cap height with no raise of its own. */\r\n  align-items: baseline;\r\n  /* No gap: the marker supplies its own hair of margin. A gap here would space it\r\n     off the caption the way the funnel and the sort arrow are spaced — which is\r\n     what made a narrow column read as `AGE * ↑` with the `*` crowding the arrow. */\r\n  gap: 0;\r\n  /* The label may be squeezed in a narrow column; the marker must not be, so give\r\n     the group a shrinkable floor and pin the marker below. */\r\n  min-width: 0;\r\n}\r\n/* The same red `*` the form controls draw for their own `required`\r\n   (`.mono-input-required`), so one marker means one thing across the library.\r\n   It is deliberately NOT sized like the header's other marks: the funnel and the\r\n   sort caret are fixed ~0.875rem boxes that reserve a slot of their own, while\r\n   this is a hairline glyph that hangs off the end of the caption. `flex: 0 0 auto`\r\n   keeps it from being shrunk into the text or stretched into a box, and a\r\n   `line-height` under the label's own means it cannot grow the header row.\r\n   `<sup>` is a flex item here, so its native `vertical-align: super` does nothing\r\n   — the shared baseline above plus the glyph's own height is what raises it. */\r\n:is([mono-th-required],.mono-th-required) {\r\n  flex: 0 0 auto;\r\n  margin-left: 0.1em;\r\n  color: var(--_mono-table-error);\r\n  font-size: 0.75em;\r\n  line-height: 1;\r\n}\r\n\r\n/* Icon-less sort (`sort.showIcon: false`) — the caption itself is the button, so\r\n   strip the arrow-sized padding and let it inherit the header's typography. */\r\n:is([mono-sort-head],.mono-table-sort-head):is([mono-no-icon],.no-icon) :is([mono-sort-btn],.mono-table-sort-btn):is([mono-label-trigger],.label-trigger) {\r\n  margin: 0;\r\n  padding: 0;\r\n  line-height: inherit;\r\n  letter-spacing: inherit;\r\n  text-transform: inherit;\r\n}\r\n\r\n/* The small right-click menu. */\r\n:is([mono-th-menu],.mono-th-menu) {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  min-width: 158px;\r\n  padding: 0.25rem;\r\n  background: var(--_mono-table-panel-bg, var(--popover));\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius, var(--mono-radius-md));\r\n  box-shadow: var(--_mono-table-panel-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)), var(--_mono-table-panel-shadow, var(--mono-shadow-md));\r\n  font-size: 0.82rem;\r\n}\r\n:is([mono-th-menu],.mono-th-menu):is([mono-open],.open) {\r\n  display: block;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item) {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  width: 100%;\r\n  padding: 0.42rem 0.5rem;\r\n  border: 0;\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  background: transparent;\r\n  color: var(--_mono-table-text);\r\n  cursor: pointer;\r\n  font: inherit;\r\n  text-align: left;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item):hover {\r\n  background: var(--_mono-table-soft);\r\n}\r\n/* \"Clear all sorting\" while nothing is sorted — inert, and no hover affordance. */\r\n:is([mono-th-menu-item],.mono-th-menu-item):disabled {\r\n  opacity: 0.45;\r\n  cursor: default;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item):disabled:hover {\r\n  background: transparent;\r\n}\r\n:is([mono-th-menu-label],.mono-th-menu-label) {\r\n  flex: 1;\r\n}\r\n:is([mono-th-menu-ic],.mono-th-menu-ic),\r\n:is([mono-th-menu-caret],.mono-th-menu-caret),\r\n:is([mono-th-menu-check],.mono-th-menu-check) {\r\n  display: inline-flex;\r\n  color: var(--_mono-table-muted);\r\n}\r\n/* Divider between the Sort and Header Filter sections when a column has both,\r\n   and above \"Clear all sorting\" in the Sort submenu. */\r\n:is([mono-th-menu-sep],.mono-th-menu-sep) {\r\n  height: 1px;\r\n  margin: 0.25rem 0.1rem;\r\n  background: var(--_mono-table-border);\r\n}\r\n/* The Sort submenu reuses `[mono-th-menu]`'s surface/border/shadow — only its\r\n   sizing differs, so there is no duplicated box styling here. Wide enough for\r\n   \"Clear all sorting\" to sit on one line. */\r\n:is([mono-th-submenu],.mono-th-submenu) {\r\n  min-width: 176px;\r\n}\r\n/* The active direction in the Sort submenu. */\r\n:is([mono-th-menu-item],.mono-th-menu-item):is([mono-active],.active) {\r\n  color: var(--_mono-table-accent);\r\n  font-weight: 600;\r\n}\r\n:is([mono-th-menu-item],.mono-th-menu-item):is([mono-active],.active) :is([mono-th-menu-ic],.mono-th-menu-ic),\r\n:is([mono-th-menu-item],.mono-th-menu-item):is([mono-active],.active) :is([mono-th-menu-check],.mono-th-menu-check) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n\r\n/* The cascading distinct-values panel. */\r\n:is([mono-th-filter],.mono-th-filter) {\r\n  display: none;\r\n  position: fixed;\r\n  z-index: var(--mono-popup-z, 1000);\r\n  width: 244px;\r\n  flex-direction: column;\r\n  background: var(--_mono-table-panel-bg);\r\n  color: var(--_mono-table-panel-color);\r\n  /* a RING, not a border — upstream draws the edge in the shadow so the corner\r\n     stays clean at every radius the flavours ask for */\r\n  border: 0;\r\n  border-radius: var(--_mono-table-panel-radius);\r\n  box-shadow: var(--_mono-table-panel-ring), var(--_mono-table-panel-shadow);\r\n  font-size: var(--_mono-table-font);\r\n  /* `clip`, not `hidden`: a `hidden` box is still PROGRAMMATICALLY scrollable, so\r\n     anything that focuses an off-box descendant scrolls the panel away and it\r\n     reads blank. `clip` cannot scroll at all. The list keeps its own scrollport,\r\n     and the sticky \"(Select all)\" sticks against that, not against this. */\r\n  overflow: clip;\r\n}\r\n:is([mono-th-filter],.mono-th-filter):is([mono-open],.open) {\r\n  display: flex;\r\n}\r\n:is([mono-th-filter-head],.mono-th-filter-head) {\r\n  padding: 0.55rem 0.65rem;\r\n  font-weight: 600;\r\n  color: var(--_mono-table-text);\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n}\r\n:is([mono-th-filter-search],.mono-th-filter-search) {\r\n  padding: 0.5rem 0.55rem 0.35rem;\r\n}\r\n:is([mono-th-filter-input],.mono-th-filter-input) {\r\n  width: 100%;\r\n  padding: 0.38rem 0.55rem;\r\n  border: 1px solid var(--_mono-table-border);\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  font: inherit;\r\n  color: var(--_mono-table-text);\r\n  background: var(--_mono-table-panel-bg, var(--_mono-table-surface));\r\n}\r\n\r\n/* A host page's own placeholder colour reaches a portaled panel like anything\r\n   else — VitePress paints one in its brand purple — so state it. */\r\n:is([mono-th-filter-input],.mono-th-filter-input)::placeholder,\r\n:is([mono-search-panel],.mono-table-search-panel) input::placeholder {\r\n  color: var(--_mono-table-muted);\r\n  opacity: 1;\r\n}\r\n:is([mono-th-filter-input],.mono-th-filter-input):focus-visible {\r\n  outline: none;\r\n  border-color: var(--_mono-table-accent);\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-table-accent) 18%, transparent);\r\n}\r\n:is([mono-th-filter-list],.mono-th-filter-list) {\r\n  max-height: 224px;\r\n  overflow-y: auto;\r\n  /* Don't chain to the document at the ends of the list. This panel is\r\n     `position: fixed` and body-portaled, and PopupPortalController re-anchors it\r\n     to the funnel on every window scroll — so a chained scroll drags the panel\r\n     off-screen with its header and the list just reads as \"blank\". */\r\n  overscroll-behavior: contain;\r\n  padding: 0.15rem 0.35rem 0.25rem;\r\n}\r\n:is([mono-th-filter-msg],.mono-th-filter-msg) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 1rem 0.6rem;\r\n  color: var(--_mono-table-muted);\r\n  text-align: center;\r\n}\r\n:is([mono-th-filter-msg-text],.mono-th-filter-msg-text) {\r\n  font-size: 0.82rem;\r\n}\r\n:is([mono-th-retry],.mono-th-retry) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  padding: 0.3rem 0.7rem;\r\n  border: 1px solid var(--_mono-table-border);\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  background: transparent;\r\n  color: var(--_mono-table-accent);\r\n  font: inherit;\r\n  font-size: 0.78rem;\r\n  cursor: pointer;\r\n}\r\n:is([mono-th-retry],.mono-th-retry):hover {\r\n  background: var(--_mono-table-soft);\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-retry],.mono-th-retry) svg {\r\n  color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-filter-spin],.mono-th-filter-spin) {\r\n  display: inline-block;\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n  margin-right: 0.4rem;\r\n  border: 2px solid var(--_mono-table-accent);\r\n  border-right-color: transparent;\r\n  border-radius: 50%;\r\n  vertical-align: -0.15rem;\r\n  animation: mono-table-spin 0.65s linear infinite;\r\n}\r\n\r\n/* Native checkbox rows, styled to match mono-checkbox. */\r\n:is([mono-th-check],.mono-th-check) {\r\n  /* LOAD-BEARING (same line `.mono-checkbox` carries). The real <input> below is\r\n     `position: absolute`, so without a positioned row it resolves against the\r\n     PANEL — it then stays put while the list scrolls, lands outside the panel's\r\n     box, and clicking the label focuses it, making the browser scroll the\r\n     `overflow` panel to reach it. The whole panel scrolls away and reads blank. */\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.55rem;\r\n  padding: 0.34rem 0.4rem;\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  cursor: pointer;\r\n  color: var(--_mono-table-text);\r\n}\r\n:is([mono-th-check],.mono-th-check):hover {\r\n  background: var(--_mono-table-soft);\r\n}\r\n:is([mono-th-check],.mono-th-check) input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n}\r\n:is([mono-th-check-box],.mono-th-check-box) {\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  border: 2px solid color-mix(in oklab, var(--_mono-table-border) 72%, var(--_mono-table-muted));\r\n  border-radius: 0.3rem;\r\n  background: var(--_mono-table-surface);\r\n  transition:\r\n    background-color 0.15s ease,\r\n    border-color 0.15s ease;\r\n}\r\n:is([mono-th-check],.mono-th-check) input:checked ~ :is([mono-th-check-box],.mono-th-check-box) {\r\n  background: var(--_mono-table-accent);\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-check],.mono-th-check) input:checked ~ :is([mono-th-check-box],.mono-th-check-box)::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 4px;\r\n  top: 1px;\r\n  width: 4px;\r\n  height: 8px;\r\n  border: solid var(--_mono-table-on-accent);\r\n  border-width: 0 2px 2px 0;\r\n  transform: rotate(45deg);\r\n}\r\n:is([mono-th-check],.mono-th-check) input:focus-visible ~ :is([mono-th-check-box],.mono-th-check-box) {\r\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_mono-table-accent) 20%, transparent);\r\n}\r\n/* Tri-state: a partly-ticked period (some of its months, not all) shows a dash. */\r\n:is([mono-th-check],.mono-th-check) input:indeterminate ~ :is([mono-th-check-box],.mono-th-check-box) {\r\n  background: var(--_mono-table-accent);\r\n  border-color: var(--_mono-table-accent);\r\n}\r\n:is([mono-th-check],.mono-th-check) input:indeterminate ~ :is([mono-th-check-box],.mono-th-check-box)::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 2px;\r\n  right: 2px;\r\n  top: 5px;\r\n  height: 2px;\r\n  background: var(--_mono-table-surface);\r\n  border: 0;\r\n  transform: none;\r\n}\r\n\r\n/* ── Date filter: the value list as a year → … → second tree ────────────────\r\n   Same rows as the plain list (`[mono-th-check]`), each preceded by an expand\r\n   chevron and indented per level. Only periods that occur in the data exist,\r\n   so a leaf is a node with nothing below it (its chevron is hidden, not\r\n   removed, to keep the labels aligned). */\r\n:is([mono-th-tree],.mono-th-tree) {\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n:is([mono-th-tree-row],.mono-th-tree-row) {\r\n  display: flex;\r\n  align-items: center;\r\n  padding-left: calc(var(--mono-th-tree-indent, 1rem) * var(--_level, 0));\r\n}\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='1'] { --_level: 1; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='2'] { --_level: 2; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='3'] { --_level: 3; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='4'] { --_level: 4; }\r\n:is([mono-th-tree-row],.mono-th-tree-row)[data-level='5'] { --_level: 5; }\r\n:is([mono-th-tree-row],.mono-th-tree-row) > :is([mono-th-check],.mono-th-check) {\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 0.3rem;\r\n  background: transparent;\r\n  color: var(--_mono-table-faint);\r\n  cursor: pointer;\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle)[hidden] {\r\n  display: inline-flex;\r\n  visibility: hidden;\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle):hover {\r\n  background: var(--_mono-table-soft);\r\n  color: var(--_mono-table-text);\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle) > svg,\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle) > .mono-icon {\r\n  width: 0.85rem;\r\n  height: 0.85rem;\r\n  transition: transform 0.15s ease; /* the glyph points right; open turns it down */\r\n}\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle):is([mono-open],.open) > svg,\r\n:is([mono-th-tree-toggle],.mono-th-tree-toggle):is([mono-open],.open) > .mono-icon {\r\n  transform: rotate(90deg);\r\n}\r\n:is([mono-th-check-label],.mono-th-check-label) {\r\n  flex: 1;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n:is([mono-th-check-count],.mono-th-check-count) {\r\n  color: var(--_mono-table-faint);\r\n  font-variant-numeric: tabular-nums;\r\n  font-size: 0.76rem;\r\n}\r\n/* `(Select all)` pins to the top of the scrolling value list so it stays reachable\r\n   in a long column. `[mono-th-filter-list]` is the scrollport (max-height +\r\n   overflow-y), so `top: 0` sticks against it. An opaque background is required —\r\n   without it the scrolling rows would show through. The negative top padding\r\n   compensates for the list's own padding so nothing peeks above the pinned row. */\r\n:is([mono-th-check-all],.mono-th-check-all) {\r\n  position: sticky;\r\n  top: -0.15rem;\r\n  z-index: 1;\r\n  background: var(--_mono-table-surface);\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n  border-radius: 0;\r\n  margin-bottom: 0.15rem;\r\n  font-weight: 600;\r\n}\r\n\r\n/* Footer actions. */\r\n/* MUST wrap: the panel is a fixed width, so a fourth button (\"Clear all\", only\r\n   present on the multi-column menu path) or a longer translation overflows the\r\n   row — and an overflowing button sits OUTSIDE the panel box, where its own\r\n   click reads as an outside-click and dismisses the panel instead of firing. */\r\n:is([mono-th-filter-foot],.mono-th-filter-foot) {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  padding: 0.5rem 0.55rem;\r\n  border-top: 1px solid var(--_mono-table-border-lite);\r\n}\r\n:is([mono-th-filter-foot-sp],.mono-th-filter-foot-sp) {\r\n  flex: 1 1 0;\r\n  min-width: 0;\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn) {\r\n  padding: 0.34rem 0.72rem;\r\n  border-radius: var(--_mono-table-control-radius, var(--mono-radius-md));\r\n  border: 1px solid transparent;\r\n  font: inherit;\r\n  font-size: 0.8rem;\r\n  line-height: 1.2;\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-ghost],.ghost) {\r\n  background: transparent;\r\n  border-color: var(--_mono-table-border);\r\n  color: var(--_mono-table-text);\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-ghost],.ghost):hover {\r\n  background: var(--_mono-table-soft);\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-primary],.primary) {\r\n  background: var(--_mono-table-accent);\r\n  color: var(--_mono-table-on-accent);\r\n}\r\n:is([mono-th-filter-btn],.mono-th-filter-btn):is([mono-primary],.primary):hover {\r\n  filter: brightness(0.96);\r\n}\r\n\r\n/* ── Native table base: W3Schools-style full-width table ────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table — w-full caption-bottom text-sm */\r\n:is([mono-table],.mono-table) {\r\n  /* A prose stylesheet that makes tables scroll — VitePress does exactly this\r\n     (`.vp-doc table { display: block; overflow-x: auto }`), and so do most\r\n     typography plugins — takes the table out of table layout entirely, and the\r\n     columns stop distributing the width. Upstream assumes a real table and\r\n     hands the scrolling to `.table-container`; state it so the assumption holds\r\n     on a host page that disagrees. */\r\n  display: table;\r\n  width: 100%;\r\n  caption-side: bottom;\r\n  font-size: var(--_mono-table-font);\r\n  line-height: var(--_mono-table-line-height);\r\n  color: var(--_mono-table-text);\r\n  /* `border-collapse: separate` — NOT upstream's default. A collapsed border\r\n     stays at the cell's flow position, so a sticky head, a sticky foot and a\r\n     pinned column all lose their edge the moment they leave it. */\r\n  border-collapse: separate;\r\n  border-spacing: 0;\r\n  border: var(--_mono-table-outer-border);\r\n  border-radius: var(--_mono-table-radius);\r\n  /* Resolved HERE, above any cell that re-points the token for its editors —\r\n     see the `font-size` note on `[mono-table] td`. */\r\n  --_mono-table-cell-font: var(--mono-table-cell-font, var(--theme-control-font-lg, 0.84rem));\r\n\r\n  /* Same trick, same reason: an editor cell sets `--theme-control-height-*: auto`\r\n     to flatten a FIELD, but checkbox / radio / switch derive their actual box size\r\n     from that token (`calc(token * 0.5)`), and `calc(auto * 0.5)` is invalid — the\r\n     box collapses to 0x0. Snapshot the real values here, above the override, so\r\n     those three can restore them further down. */\r\n  --_mono-table-ch-xs: var(--theme-control-height-xs);\r\n  --_mono-table-ch-sm: var(--theme-control-height-sm);\r\n  --_mono-table-ch-md: var(--theme-control-height-md);\r\n  --_mono-table-ch-lg: var(--theme-control-height-lg);\r\n  --_mono-table-ch-xl: var(--theme-control-height-xl);\r\n  --_mono-table-ch-xxl: var(--theme-control-height-xxl);\r\n  /* ...and the --mono-* vocabulary the ported controls read (checkbox today; radio\r\n     and switch join as they are ported — box = token × 4/9). */\r\n  --_mono-table-mch-xs: var(--mono-control-height-xs);\r\n  --_mono-table-mch-sm: var(--mono-control-height-sm);\r\n  --_mono-table-mch-md: var(--mono-control-height-md);\r\n  --_mono-table-mch-lg: var(--mono-control-height-lg);\r\n  --_mono-table-mch-xl: var(--mono-control-height-xl);\r\n  --_mono-table-mch-xxl: var(--mono-control-height-xxl);\r\n  /* ...and the border width: the editor cell zeroes `--mono-border-width` /\r\n     `--theme-border-width` to flatten a FIELD, but a ported checkbox (and radio /\r\n     switch as they port) draws its box's outline from the same token — an\r\n     unchecked box, which is outline only, went invisible in any table cell. */\r\n  --_mono-table-bw: var(--mono-border-width);\r\n  --_mono-table-tbw: var(--theme-border-width);\r\n}\r\n\r\n/* Optional: equal-width columns.\r\n   Use only when you want every column to have the same width. */\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) {\r\n  table-layout: fixed;\r\n}\r\n\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) th,\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Optional: wide scroll mode.\r\n   Use only when you want the table wider than its container. */\r\n:is([mono-table],.mono-table):is([mono-wide],.mono-table-wide) {\r\n  min-width: max-content;\r\n}\r\n\r\n/* ── Table visual style ─────────────────────────────────────────────────── */\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table thead — [&_tr]:border-b\r\n   The head had a two-stop gradient; the port allows none, and upstream paints\r\n   the head nothing at all — it is the page under a bottom rule. */\r\n:is([mono-table],.mono-table) thead {\r\n  background: transparent;\r\n}\r\n/* On the CELL, not the section: a host page that paints `th` (VitePress does,\r\n   with its soft surface) would otherwise cover whatever the section carried.\r\n   At (0,1,2) this beats a host's (0,1,1), and the sticky head's (0,2,2) still\r\n   beats this. */\r\n:is([mono-table],.mono-table) thead th {\r\n  background: var(--_mono-table-head-bg, transparent);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table td — p-2 align-middle whitespace-nowrap */\r\n:is([mono-table],.mono-table) td {\r\n  padding: var(--_mono-table-cell-pad);\r\n  text-align: start;\r\n  vertical-align: middle;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table th — text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap */\r\n:is([mono-table],.mono-table) th {\r\n  height: var(--_mono-table-th-height);\r\n  padding: 0 var(--_mono-table-th-pad-x);\r\n  text-align: start;\r\n  vertical-align: middle;\r\n  font-size: var(--_mono-table-th-font);\r\n  font-weight: var(--_mono-table-th-weight);\r\n  color: var(--_mono-table-th-color);\r\n  text-transform: var(--_mono-table-th-transform);\r\n  letter-spacing: var(--_mono-table-th-tracking);\r\n  white-space: nowrap;\r\n  user-select: none;\r\n  /* `thead [&_tr]:border-b` — carried on the cell, not the row, because a\r\n     `border-collapse: separate` table paints no row border at all. */\r\n  border-bottom: var(--mono-border-width) solid var(--_mono-table-border);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table caption — text-muted-foreground mt-4 text-sm */\r\n:is([mono-table],.mono-table) caption {\r\n  margin-top: calc(var(--mono-spacing) * 4);\r\n  color: var(--_mono-table-muted);\r\n  font-size: var(--_mono-table-font);\r\n}\r\n\r\n/* ── Sortable header control (<mono-table-sort> inside a <th>) ───────────── */\r\n/* Label + arrow row. The LABEL IS NOT INTERACTIVE — only the arrow button sorts,\r\n   so clicking the caption text (to select it, or on the way to a header filter)\r\n   never reorders the table. */\r\n:is([mono-sort-head],.mono-table-sort-head) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n}\r\n:is([mono-sort-btn],.mono-table-sort-btn) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  /* The arrow alone is a small target, so pad it out to a comfortable hit area\r\n     without letting the padding push the header row taller. */\r\n  margin: 0 -0.15rem;\r\n  padding: 0.2rem 0.15rem;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  line-height: 0;\r\n  cursor: pointer;\r\n  border-radius: var(--theme-radius-xs, 4px);\r\n  transition: color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n:is([mono-sort-btn],.mono-table-sort-btn):hover,\r\n:is([mono-sort-btn],.mono-table-sort-btn):focus-visible {\r\n  color: var(--_mono-table-accent);\r\n  outline: none;\r\n}\r\n:is([mono-sort-btn],.mono-table-sort-btn):focus-visible {\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--_mono-table-accent) 30%, transparent);\r\n}\r\n/* Sort indicator rendered at the end of the header text. A single icon whose\r\n   GLYPH encodes the state: neutral `i-fluent-arrow-sort-16-filled` when unsorted,\r\n   `i-ri-arrow-up-long-fill` / `i-ri-arrow-down-long-fill` when sorted (see the\r\n   builds' `renderIcon`). Colour still signals active vs. idle. */\r\n:is([mono-sort-ind],.mono-table-sort-ind) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 0; /* no extra line-box height so it stays compact */\r\n  flex-shrink: 0;\r\n}\r\n/* Faint by default (a hint that the column is sortable). The descendant selector\r\n   (specificity 0,2,0) is deliberate: it must beat preset-icons' `1.2em`\r\n   width/height in BOTH the layered prod bundle and the unlayered dev server so\r\n   the box is fixed. A single square box; both the 16- and 24-viewBox glyphs scale\r\n   into it. */\r\n:is([mono-sort-ind],.mono-table-sort-ind) :is([mono-sort-caret],.mono-table-sort-caret) {\r\n  display: block;\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n  color: var(--_mono-table-faint);\r\n  transition: color var(--mono-duration-fast, 150ms) ease;\r\n}\r\n/* Once sorted (asc or desc — anything but `none`), the directional arrow darkens\r\n   to the header text colour. */\r\n:is([mono-sort-btn],.mono-table-sort-btn):not([data-dir='none']) :is([mono-sort-caret],.mono-table-sort-caret) {\r\n  color: var(--_mono-table-text);\r\n}\r\n/* Hover/focus feedback now has to target the CARET: the button wraps only the\r\n   icon, so the inherited `color` on the button can't reach past the descendant\r\n   rules above. Same specificity as the sorted rule (0,3,0) — it must stay AFTER\r\n   it to win the tie and highlight an already-sorted column too. */\r\n:is([mono-sort-btn],.mono-table-sort-btn):hover :is([mono-sort-caret],.mono-table-sort-caret),\r\n:is([mono-sort-btn],.mono-table-sort-btn):focus-visible :is([mono-sort-caret],.mono-table-sort-caret) {\r\n  color: var(--_mono-table-accent);\r\n}\r\n/* Multi-column sort precedence, rendered beside the arrow. Only present when TWO\r\n   OR MORE columns are sorted — a lone sorted column shows just the arrow, so the\r\n   ordinary case looks unchanged. */\r\n:is([mono-sort-seq],.mono-table-sort-seq) {\r\n  /* `<sup>` defaults to a relative baseline shift; keep it but make it compact so\r\n     it can't grow the header line box. */\r\n  font-size: 0.62em;\r\n  font-weight: 700;\r\n  line-height: 1;\r\n  margin-left: 0.1em;\r\n  color: var(--_mono-table-accent);\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n\r\n:is([mono-table],.mono-table) td {\r\n  /* Read through an alias resolved on `[mono-table]`, NOT the token directly: an\r\n     editing cell re-points `--theme-control-font-*` to `1em` for its editors,\r\n     and since a custom property is visible to the element that sets it, a direct\r\n     `var(--theme-control-font-lg)` here would resolve to `1em` and blow the\r\n     cell's own text up to the inherited size. */\r\n  font-size: var(--_mono-table-cell-font);\r\n  color: var(--_mono-table-ink-mid);\r\n}\r\n\r\n/* ── Row background ──────────────────────────────────────────────────────────\r\n   ONE variable decides a row's colour and everything else reads it: the row\r\n   itself, and the sticky column's cells further down.\r\n   That matters because a `<td>` background always covers the `<tr>`'s, so a\r\n   pinned cell cannot inherit the row's paint — it has to restate it. Restating\r\n   it by hand meant five near-duplicate blocks that drifted (group rows were\r\n   never added to them, so a pinned cell on a group row kept the plain surface).\r\n   With `--_mono-table-row-bg`, a row state is declared once and the pinned cell\r\n   follows for free.\r\n\r\n   Every rule that decides a row colour sets the variable AND repeats\r\n   `background: var(--_mono-table-row-bg)`. The repeat is not redundant: a rule\r\n   that only sets the variable leaves the `background` DECLARATION down here on\r\n   the base rule, at its low specificity (0,1,2) — so any competing `tr`\r\n   background from the host page wins and the row paints as if mono had said\r\n   nothing. VitePress does exactly that (`.vp-doc tr:nth-child(2n)`, (0,2,1)),\r\n   which turned every even row transparent the first time this was written.\r\n   Repeating the declaration carries the paint at each rule's own specificity.\r\n\r\n   The row is OPAQUE by default. It used to have no background at all, so odd\r\n   rows were fully transparent while even rows were painted opaque near-white —\r\n   which reads as stripes only if the table happens to sit on white, and as\r\n   \"some rows transparent, some grey\" anywhere else. For a see-through table,\r\n   set `--mono-table-surface: transparent`. */\r\n/* basecoat@1.0.2 styles/vega.css .table tr — hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors */\r\n:is([mono-table],.mono-table) tbody tr {\r\n  --_mono-table-row-bg: var(--_mono-table-surface);\r\n  background: var(--_mono-table-row-bg);\r\n  transition: background-color var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n\r\n/* The rule is on the CELL: a `border-collapse: separate` table paints no border\r\n   for a `<tr>` at all. */\r\n:is([mono-table],.mono-table) tbody td {\r\n  border-bottom: var(--mono-border-width) solid var(--_mono-table-border-lite);\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table tbody — [&_tr:last-child]:border-0 */\r\n:is([mono-table],.mono-table) tbody tr:last-child > td {\r\n  border-bottom: none;\r\n}\r\n\r\n/* Zebra, floor version: plain parity over every `<tr>` in the tbody. */\r\n:is([mono-table],.mono-table) tbody tr:nth-child(even) {\r\n  --_mono-table-row-bg: var(--_mono-table-zebra);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\n/* Zebra, corrected: `:nth-child(even of S)` counts only the siblings matching S,\r\n   which is the whole point — plain `:nth-child` counts rows the reader does not\r\n   see as rows. An open detail panel is a real `<tr>` (inserted by\r\n   mono-table-detail-core), virtual-scroll demos pad with spacer rows, and a\r\n   group header is a row too; each shifts the count, so stripes invert below an\r\n   expanded row and strobe while scrolling.\r\n\r\n   Behind @supports, and as a RESET + re-stripe pair, so an engine that cannot\r\n   parse `of S` keeps the floor rule above rather than losing striping entirely\r\n   (a dropped selector would be worse than the bug). @supports adds no\r\n   specificity, so these two are decided by source order — keep the reset first.\r\n\r\n   `[data-mono-stripe-skip]` is the escape hatch for a consumer's own non-data\r\n   rows; `[aria-hidden]` already covers spacer rows as the demos write them. */\r\n@supports selector(:nth-child(1 of :root)) {\r\n  :is([mono-table],.mono-table) tbody tr:nth-child(even) {\r\n    --_mono-table-row-bg: var(--_mono-table-surface);\r\n    background: var(--_mono-table-row-bg);\r\n  }\r\n\r\n  /* :where() ON PURPOSE. `:nth-child(of S)` takes S's specificity, and five\r\n     `:not()`s made this (0,7,2) — heavier than every row STATE below it (hover\r\n     (0,1,3), selected and editing (0,1,2), the dropdown-table's cursor), so on\r\n     an even row no state ever painted: a checked row kept its stripe. At (0,1,2)\r\n     it still beats the reset above it by order, and the states beat it the same\r\n     way. */\r\n  :is([mono-table],.mono-table) tbody tr:where(:nth-child(even of :not(:is([mono-detail-row],.mono-table-detail-row)):not(:is([mono-group-row],.mono-table-group-row)):not(:is([mono-filler],.mono-table-filler)):not([aria-hidden='true']):not([data-mono-stripe-skip]))) {\r\n    --_mono-table-row-bg: var(--_mono-table-zebra);\r\n    background: var(--_mono-table-row-bg);\r\n  }\r\n}\r\n\r\n:is([mono-table],.mono-table) tbody tr:hover {\r\n  --_mono-table-row-bg: var(--_mono-table-hover-bg);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\n/* ── Filling the scroll box ─────────────────────────────────────────────────\r\n   A table is only as tall as its rows, so a short result set leaves dead space\r\n   under the last row — and every line the rows carried stops there: a pinned\r\n   column's edge, a consumer's column rules, the row backgrounds. Against a\r\n   bordered scroll box that reads as a table cut off mid-way (DevExtreme's fixed\r\n   columns run their separators to the bottom of the grid).\r\n\r\n   `mono-table-fill` on the `<table>` stretches it to the box (`height: 100%`).\r\n   On its own that spreads the extra height over EVERY row, so pair it with one\r\n   `<tr class=\"mono-table-filler\">` at the END of the tbody: a row at `height:\r\n   100%` absorbs the whole remainder and the data rows keep their natural\r\n   height. Give it the same cells as a data row — empty, with the pinned classes\r\n   on the pinned ones — and each column's edge continues to the floor of the\r\n   box, the pinned ones included. Rendered by the consumer (the library cannot\r\n   emit a `<tr>`), e.g.\r\n\r\n     <tr class=\"mono-table-filler\"><td v-for=\"c in columns\" :class=\"stickyCls(c)\"></td></tr>\r\n\r\n   It is not a data row: no zebra stripe (it is outside the `of S` set above and\r\n   the floor rule is reset here), no hover tint, no row rule under it, no padding\r\n   — so an empty box costs no height when there is nothing to fill. Add it\r\n   unconditionally; with enough rows to overflow the box it collapses to zero. */\r\n:is([mono-table],.mono-table):is([mono-fill],.mono-table-fill) {\r\n  height: 100%;\r\n}\r\n:is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler),\r\n:is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler):hover {\r\n  height: 100%;\r\n  --_mono-table-row-bg: var(--_mono-table-surface);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n:is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler) > td {\r\n  padding: 0;\r\n  border-bottom: none;\r\n}\r\n\r\n/* basecoat@1.0.2 styles/vega.css .table tr — data-[state=selected]:bg-muted\r\n   The pinned rail is mono's — upstream marks a selected row by its wash alone. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-selected],.mono-table-row-selected,.mono-dd-row-selected) {\r\n  --_mono-table-row-bg: var(--_mono-table-selected-bg);\r\n  background: var(--_mono-table-row-bg);\r\n  box-shadow: inset 3px 0 0 var(--_mono-table-accent);\r\n}\r\n\r\n/* ── Inline row editing (mono-table-th `:editable` + controller edit state) ───\r\n   Click (or double-click, per `editableTrigger`) a row → `mono-table-row-editing`. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-editing],.mono-table-row-editing),\r\n:is([mono-table],.mono-table) tbody tr:is([mono-editing],.mono-table-row-editing):hover {\r\n  --_mono-table-row-bg: color-mix(in oklab, var(--_mono-table-accent) 6%, var(--_mono-table-surface));\r\n  background: var(--_mono-table-row-bg);\r\n  box-shadow: inset 3px 0 0 var(--_mono-table-accent);\r\n}\r\n\r\n/* ── Seamless inline editors (automatic — no consumer setup) ──────────────────\r\n   A `<td>` that CONTAINS a mono form control is treated as an editing cell and\r\n   the control is flattened into it: no border, radius, shadow or background, and\r\n   no height of its own — so the editor's text lands exactly where the static\r\n   text was and the row doesn't grow when editing starts.\r\n\r\n   How it reaches every component INCLUDING the shadow builds: geometry\r\n   (radius / control height / border width) is publicly overridable only on\r\n   mono-input — select, tag-input, date and textarea read the `--theme-*` tokens\r\n   straight from their size rules. So re-point those tokens here. Custom\r\n   properties inherit through a shadow root; page-level rules against inner\r\n   classes (`.mono-select-trigger` …) would not.\r\n\r\n   NOTE: `--theme-radius-full` is deliberately left alone — the switch track and\r\n   thumb depend on it. Same for checkbox/switch sizing: they're glyph controls,\r\n   not text fields, so they only lose their resting shadow — their sizes AND their\r\n   border width are restored below (an unchecked checkbox is drawn by its border). */\r\n:is([mono-table],.mono-table) td:has(mono-input, mono-textarea, mono-select, mono-tag-input, mono-date,\r\n    mono-dropdown-table, mono-checkbox, mono-radio, mono-switch),\r\n:is([mono-table],.mono-table) td:has(mono-shadow-input, mono-shadow-textarea, mono-shadow-select,\r\n    mono-shadow-tag-input, mono-shadow-date, mono-shadow-dropdown-table,\r\n    mono-shadow-checkbox, mono-shadow-radio, mono-shadow-switch) {\r\n  /* geometry — the single lever that also reaches the shadow builds */\r\n  /* 0px, not 0: these tokens are also read inside calc() (a switch builds its\r\n     track from the border, a ring adds it to a shadow), and adding a UNITLESS\r\n     zero to a length makes the whole expression invalid — the switch track\r\n     collapsed to 0 height in an editor cell. */\r\n  --theme-border-width: 0px;\r\n  --theme-radius-xs: 0;\r\n  --theme-radius-sm: 0;\r\n  --theme-radius-md: 0;\r\n  --theme-radius-lg: 0;\r\n  --theme-radius-xl: 0;\r\n  /* `auto`, NOT 0 — this token feeds `min-height` on every field wrapper, so\r\n     zeroing it would let a field collapse below its own content. `auto` lets the\r\n     intrinsic line box size it, which is exactly the height of the static text it\r\n     replaces. `xs` belongs here too: without it an `xs` editor keeps a 24px strut\r\n     while the text it replaces is ~21px, and the row jumps on click. */\r\n  --theme-control-height-xs: auto;\r\n  --theme-control-height-sm: auto;\r\n  --theme-control-height-md: auto;\r\n  --theme-control-height-lg: auto;\r\n  --theme-control-height-xl: auto;\r\n  --theme-control-height-xxl: auto;\r\n  /* Ported (Basecoat) controls read the --mono-* vocabulary instead: the same\r\n     levers, restated. mono-input, mono-select, mono-date and mono-tag-input read these today; the rest join as they are\r\n     ported, and the --theme-* lines above go in 2.0. */\r\n  --mono-border-width: 0px;\r\n  --mono-control-height-xs: auto;\r\n  --mono-control-height-sm: auto;\r\n  --mono-control-height-md: auto;\r\n  --mono-control-height-lg: auto;\r\n  --mono-control-height-xl: auto;\r\n  --mono-control-height-xxl: auto;\r\n  /* tag-input / dropdown-table cap their chip height by the field height (chip-fit); with the\r\n     heights at `auto` here that calc is invalid, so pin the chips to their fixed sizes. */\r\n  --mono-tag-input-chip-height-xs: calc(var(--mono-spacing) * 4.5);\r\n  --mono-tag-input-chip-height-sm: calc(var(--mono-spacing) * 5);\r\n  --mono-tag-input-chip-height-md: calc(var(--mono-spacing) * 5.5);\r\n  --mono-tag-input-chip-height-lg: calc(var(--mono-spacing) * 6);\r\n  --mono-tag-input-chip-height-xl: calc(var(--mono-spacing) * 6.5);\r\n  --mono-tag-input-chip-height-xxl: calc(var(--mono-spacing) * 7);\r\n  --mono-input-radius: 0;\r\n  --mono-input-ring-width: 0px;\r\n  --mono-input-font-xs: 1em;\r\n  --mono-input-font-sm: 1em;\r\n  --mono-input-font-md: 1em;\r\n  --mono-input-font-lg: 1em;\r\n  --mono-input-font-xl: 1em;\r\n  --mono-input-font-xxl: 1em;\r\n  --mono-select-radius: 0;\r\n  --mono-select-ring-width: 0px;\r\n  --mono-select-font-xs: 1em;\r\n  --mono-select-font-sm: 1em;\r\n  --mono-select-font-md: 1em;\r\n  --mono-select-font-lg: 1em;\r\n  --mono-select-font-xl: 1em;\r\n  --mono-select-font-xxl: 1em;\r\n  --mono-date-radius: 0;\r\n  --mono-date-ring-width: 0px;\r\n  --mono-date-font-xs: 1em;\r\n  --mono-date-font-sm: 1em;\r\n  --mono-date-font-md: 1em;\r\n  --mono-date-font-lg: 1em;\r\n  --mono-date-font-xl: 1em;\r\n  --mono-date-font-xxl: 1em;\r\n  --mono-tag-input-radius: 0;\r\n  --mono-tag-input-ring-width: 0px;\r\n  --mono-tag-input-font-xs: 1em;\r\n  --mono-tag-input-font-sm: 1em;\r\n  --mono-tag-input-font-md: 1em;\r\n  --mono-tag-input-font-lg: 1em;\r\n  --mono-tag-input-font-xl: 1em;\r\n  --mono-tag-input-font-xxl: 1em;\r\n\r\n  /* surfaces + resting shadows. Both `-bg` and `-surface` are needed for input:\r\n     the default `outlined` variant's own rule paints `--_mono-input-surface`,\r\n     which would otherwise win over `--mono-input-bg`. */\r\n  --mono-input-bg: transparent;\r\n  --mono-input-surface: transparent;\r\n  --mono-input-rest-border: transparent;\r\n  --mono-input-shadow: none;\r\n  --mono-textarea-surface: transparent;\r\n  --mono-textarea-shadow: none;\r\n  --mono-textarea-min-height: 0;\r\n  --mono-select-surface: transparent;\r\n  --mono-select-shadow: none;\r\n  --mono-tag-input-surface: transparent;\r\n  --mono-tag-input-shadow: none;\r\n  --mono-date-surface: transparent;\r\n  --mono-dropdown-table-surface: transparent;\r\n  --mono-dropdown-table-shadow: none;\r\n  --mono-checkbox-shadow: none;\r\n  --mono-switch-shadow: none;\r\n\r\n  /* kill the control's own inset so its text starts at the cell's content edge,\r\n     exactly where the static text sits */\r\n  --mono-input-padding-x-sm: 0;\r\n\r\n  --mono-input-padding-x-xs: 0;\r\n  --mono-input-padding-x-md: 0;\r\n  --mono-input-padding-x-lg: 0;\r\n  --mono-input-padding-x-xl: 0;\r\n  --mono-input-padding-x-xxl: 0;\r\n  --mono-select-padding-x: 0;\r\n  --mono-tag-input-padding-x: 0;\r\n  --mono-date-padding-x: 0;\r\n  --mono-textarea-padding-x: 0;\r\n\r\n  /* …and the VERTICAL inset. Only `mono-input` had none to begin with; the\r\n     others each carried 0.35–0.55rem top+bottom, which is 11–18px of height the\r\n     static text doesn't have — the row grew the moment you clicked it. */\r\n  --mono-select-padding-y: 0;\r\n  --mono-tag-input-padding-y: 0;\r\n  --mono-date-padding-y: 0;\r\n  --mono-textarea-padding-y: 0;\r\n\r\n  /* The wrapper is a grid of [label?, field, message-wrapper]. The message\r\n     wrapper is emitted even when there IS no message, so the gap ALWAYS added\r\n     ~6.4px that the static text doesn't have. Inside a cell there is no label\r\n     or message, so the gap has nothing to space. */\r\n  --mono-input-gap: 0;\r\n  --mono-select-gap: 0;\r\n  --mono-textarea-gap: 0;\r\n  --mono-tag-input-gap: 0;\r\n  --mono-date-gap: 0;\r\n\r\n  /* Type must match the static text the editor replaces, or the glyphs resize\r\n     and the line box changes height on click. Same single-lever trick as the\r\n     geometry above: select/tag-input/date/textarea read these tokens directly,\r\n     mono-input through its own indirection — and custom properties cross into\r\n     the shadow builds, which a page-level element rule cannot.\r\n\r\n     `1em`, NOT `inherit`: a CSS-wide keyword in a custom-property declaration\r\n     applies to the PROPERTY (re-inheriting it) instead of being stored as the\r\n     value, so `--theme-control-font-md: inherit` is silently a no-op. `1em`\r\n     resolves a font-size against the parent's, which is what we actually want —\r\n     and it chains, so nested elements all land on the cell's size. */\r\n  --theme-control-font-sm: 1em;\r\n  --theme-control-font-md: 1em;\r\n  --theme-control-font-lg: 1em;\r\n  --theme-control-font-xl: 1em;\r\n  --theme-control-font-xxl: 1em;\r\n\r\n  /* One line box owned by the CELL, so the row height is fixed by the column and\r\n     not by whichever element happens to be visible. Same keyword caveat as\r\n     above — hand the editors the literal value, not `inherit`. */\r\n  line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-input-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-textarea-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  /* select / tag-input / date pin their own line-height so a host page's absolute\r\n     line box cannot inflate them past the control-height token. That pin is a\r\n     `var()` precisely so the cell can keep owning the line box here. */\r\n  --mono-select-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-tag-input-line-height: var(--mono-table-edit-line-height, 1.5);\r\n  --mono-date-line-height: var(--mono-table-edit-line-height, 1.5);\r\n\r\n  /* Silence each control's OWN focus ring — the cell draws the underline below,\r\n     and showing both would put the box straight back. These are the components'\r\n     private ring knobs (same ones the `underlined` variant re-points); an alpha\r\n     of 0 makes the ring transparent whatever its geometry. */\r\n  --_mono-input-ring-alpha: 0;\r\n  --_mono-input-ring-alpha-state: 0;\r\n  --_mono-textarea-ring-alpha: 0;\r\n  --_mono-textarea-ring-alpha-state: 0;\r\n  --_mono-select-ring-alpha: 0;\r\n  --_mono-select-ring-alpha-state: 0;\r\n  --_mono-tag-input-ring-alpha: 0;\r\n  --_mono-tag-input-ring-alpha-state: 0;\r\n  --_mono-date-ring-alpha: 0;\r\n  --_mdt-ring-alpha: 0;\r\n  --_mdt-ring-alpha-state: 0;\r\n}\r\n\r\n/* ── …and the cell's ALIGNMENT ────────────────────────────────────────────────\r\n   The block above moves the editor's BOX into the cell. This moves its TEXT.\r\n\r\n   `text-align` is inherited, so a right-aligned money `<td>` already passes\r\n   `right` down to the control's wrapper — but not into the field itself, because\r\n   the UA stylesheet gives `input` / `textarea` their own `text-align: start`,\r\n   and an author declaration on an ancestor cannot beat a UA declaration on the\r\n   element. So a right-aligned column's figures jumped to the left edge the moment\r\n   the editor appeared: exactly the shift this section exists to prevent.\r\n\r\n   `inherit` rather than a fixed value, so the field simply tracks whatever the\r\n   cell is — right for money, centre for a code column, untouched for the usual\r\n   left. Nothing to configure.\r\n\r\n   Class selectors reach the LIGHT builds. The shadow builds render the same field\r\n   inside their own root, which page CSS cannot cross and which has no custom\r\n   property for alignment yet — a shadow editor in a right-aligned cell still sits\r\n   left. Noted rather than papered over. */\r\n:is([mono-table],.mono-table) td :is(.mono-input-native, .mono-select-native, .mono-tag-input-native,\r\n    .mono-date-native, .mono-textarea-field) {\r\n  text-align: inherit;\r\n}\r\n\r\n/* …but NOT for checkbox / radio / switch.\r\n   For a FIELD, `--theme-control-height-*` feeds `min-height`, so `auto` above is\r\n   right. For these three it is the control's actual geometry — the box, circle and\r\n   track are all `calc(token * 0.5)` (radio.css, switch.css; the ported checkbox\r\n   are `calc(token * 4 / 9)` off the --mono-* twin — the switch derives its track\r\n   from the same expression — restored the same way) — and\r\n   `calc(auto * 0.5)` is INVALID AT COMPUTED-VALUE TIME, so width/height fall back\r\n   to `auto` and the box, having no intrinsic size, renders 0x0. The control is\r\n   there, sized to nothing.\r\n\r\n   Restore the snapshot taken on `[mono-table]`. Done as a descendant rule rather\r\n   than by dropping these three from the `:has()` list above, for two reasons: they\r\n   still want the flattening (an editable boolean cell should look seamless), and a\r\n   cell holding BOTH a field and a checkbox still matches that list — a selector\r\n   split would leave that case broken.\r\n\r\n   Element AND class selectors: the light build renders the class on an inner node,\r\n   raw class markup is used directly by the css/ demos, and custom properties\r\n   inherit through the shadow boundary so setting them on the host covers the\r\n   shadow builds. */\r\n:is([mono-table],.mono-table) td :is(mono-checkbox, mono-radio, mono-switch),\r\n:is([mono-table],.mono-table) td :is(mono-shadow-checkbox, mono-shadow-radio, mono-shadow-switch),\r\n:is([mono-table],.mono-table) td :is(.mono-checkbox, .mono-radio, .mono-switch),\r\n:is([mono-table],.mono-table) td :is(:is([mono-checkbox],.mono-checkbox), :is([mono-radio],.mono-radio), :is([mono-switch],.mono-switch)) {\r\n  --theme-control-height-xs: var(--_mono-table-ch-xs);\r\n  --theme-control-height-sm: var(--_mono-table-ch-sm);\r\n  --theme-control-height-md: var(--_mono-table-ch-md);\r\n  --theme-control-height-lg: var(--_mono-table-ch-lg);\r\n  --theme-control-height-xl: var(--_mono-table-ch-xl);\r\n  --theme-control-height-xxl: var(--_mono-table-ch-xxl);\r\n  --mono-control-height-xs: var(--_mono-table-mch-xs);\r\n  --mono-control-height-sm: var(--_mono-table-mch-sm);\r\n  --mono-control-height-md: var(--_mono-table-mch-md);\r\n  --mono-control-height-lg: var(--_mono-table-mch-lg);\r\n  --mono-control-height-xl: var(--_mono-table-mch-xl);\r\n  --mono-control-height-xxl: var(--_mono-table-mch-xxl);\r\n  --mono-border-width: var(--_mono-table-bw);\r\n  --theme-border-width: var(--_mono-table-tbw);\r\n}\r\n\r\n/* Editors fill their column (promoted from the demos' local CSS). */\r\n:is([mono-table],.mono-table) td > :is(mono-input, mono-textarea, mono-select, mono-tag-input, mono-date,\r\n    mono-dropdown-table, mono-shadow-input, mono-shadow-textarea, mono-shadow-select,\r\n    mono-shadow-tag-input, mono-shadow-date, mono-shadow-dropdown-table) {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n/* Glyph controls are sized in literal px, so a switch/checkbox replacing a text\r\n   run changes the row height. Clamp them to the cell's line box instead — the\r\n   HOST element is always light DOM (even in the shadow build), so a page rule\r\n   reaches it, and at the default 1.5 line-height the box is ~20px, which the\r\n   `sm` switch track (20px) and checkbox (16px) already fit inside. */\r\n:is([mono-table],.mono-table) td :is(mono-switch, mono-checkbox, mono-radio,\r\n    mono-shadow-switch, mono-shadow-checkbox, mono-shadow-radio) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: calc(1em * var(--mono-table-edit-line-height, 1.5));\r\n  /* `middle`, not the default `baseline`: an inline-level box that sits ON the\r\n     baseline still needs the font's descender space BELOW it, so the line box —\r\n     and the row — grows by a couple of px even when the control is exactly one\r\n     line tall. Only visible in a row whose height isn't already set by something\r\n     taller, which is why it hides in grids that have action buttons. */\r\n  vertical-align: middle;\r\n}\r\n\r\n/* `mono-table-fixed` clips with ellipsis; an editing cell must not clip its\r\n   editor (or a select/date popup anchored in it). */\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(mono-input, mono-textarea, mono-select, mono-tag-input,\r\n    mono-date, mono-dropdown-table, mono-checkbox, mono-radio, mono-switch),\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(mono-shadow-input, mono-shadow-textarea,\r\n    mono-shadow-select, mono-shadow-tag-input, mono-shadow-date,\r\n    mono-shadow-dropdown-table, mono-shadow-checkbox, mono-shadow-radio,\r\n    mono-shadow-switch) {\r\n  overflow: visible;\r\n  white-space: normal;\r\n}\r\n\r\n/* An ACTION cell (row buttons) must not ellipsis-clip either. `mono-table-fixed`\r\n   gives every cell `overflow: hidden; white-space: nowrap`, which silently cuts\r\n   off a Save/Cancel pair the moment the column is a few px too narrow — the\r\n   button is still there and still clickable, just invisible. Keep `nowrap` so\r\n   the buttons stay on one line, but let them out of the box. */\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(> mono-button),\r\n:is([mono-table],.mono-table):is([mono-fixed],.mono-table-fixed) td:has(> mono-shadow-button) {\r\n  overflow: visible;\r\n}\r\n\r\n/* Focus cue on the CELL, not the control: the `<td>` is always light DOM and\r\n   `:focus-within` propagates out of a shadow root, so one rule covers every\r\n   component in both builds. Geometry matches the `underlined` form variant —\r\n   spread cancels blur, so the glow stays under the line instead of ringing the\r\n   cell. */\r\n:is([mono-table],.mono-table) td:has(mono-input, mono-textarea, mono-select, mono-tag-input, mono-date,\r\n    mono-dropdown-table, mono-checkbox, mono-radio, mono-switch):focus-within,\r\n:is([mono-table],.mono-table) td:has(mono-shadow-input, mono-shadow-textarea, mono-shadow-select,\r\n    mono-shadow-tag-input, mono-shadow-date, mono-shadow-dropdown-table,\r\n    mono-shadow-checkbox, mono-shadow-radio, mono-shadow-switch):focus-within {\r\n  box-shadow:\r\n    inset 0 -2px 0 var(--_mono-table-accent),\r\n    0 5px 6px -6px rgba(var(--theme-primary-rgb, 30, 58, 110), 0.5);\r\n}\r\n\r\n/* ── Grouping (group header rows) ────────────────────────────────────────────\r\n   A `<tr class=\"mono-table-group-row\">` is a clickable group header. Set\r\n   `--mono-table-group-level` (0-based depth) on the group cell to indent nested levels.\r\n   Pair with `<mono-data-grid>`'s `group` option + `toggleGroup`. */\r\n/* The `:nth-child(even)` twin is kept so the floor zebra rule (for engines\r\n   without `of S`) cannot tint a group header; where `of S` works, the group row\r\n   is already excluded from the data set and never receives the stripe. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-group-row],.mono-table-group-row),\r\n:is([mono-table],.mono-table) tbody tr:is([mono-group-row],.mono-table-group-row):nth-child(even) {\r\n  --_mono-table-row-bg: var(--_mono-table-group-bg);\r\n  background: var(--_mono-table-row-bg);\r\n  cursor: pointer;\r\n}\r\n\r\n:is([mono-table],.mono-table) tbody tr:is([mono-group-row],.mono-table-group-row):hover {\r\n  --_mono-table-row-bg: var(--_mono-table-group-hover-bg);\r\n  background: var(--_mono-table-row-bg);\r\n}\r\n\r\n:is([mono-table],.mono-table) td:is([mono-group-cell],.mono-table-group-cell) {\r\n  padding-left: calc(0.9rem + var(--mono-table-group-level, 0) * 1.4rem);\r\n  color: var(--_mono-table-accent);\r\n  font-weight: var(--mono-font-weight-semibold, 600);\r\n}\r\n\r\n:is([mono-group-toggle],.mono-table-group-toggle) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.45rem;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  cursor: pointer;\r\n}\r\n\r\n:is([mono-group-toggle],.mono-table-group-toggle):focus-visible {\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--_mono-table-accent) 30%, transparent);\r\n  border-radius: var(--theme-radius-xs, 4px);\r\n}\r\n\r\n:is([mono-group-caret],.mono-table-group-caret) {\r\n  width: 0.62rem;\r\n  height: 0.62rem;\r\n  flex-shrink: 0;\r\n  color: var(--_mono-table-accent);\r\n  /* Expanded → points down. Collapsed (data-collapsed) → points right. */\r\n  transform: rotate(90deg);\r\n  transition: transform var(--mono-duration-fast, 150ms) var(--mono-ease, ease);\r\n}\r\n\r\n:is([mono-group-toggle],.mono-table-group-toggle)[data-collapsed] :is([mono-group-caret],.mono-table-group-caret) {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n:is([mono-group-caret],.mono-table-group-caret) svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n:is([mono-group-key],.mono-table-group-key) {\r\n  color: var(--_mono-table-text);\r\n}\r\n\r\n:is([mono-group-count],.mono-table-group-count) {\r\n  margin-left: 0.45rem;\r\n  font-size: 0.72rem;\r\n  font-weight: var(--theme-font-weight-normal, 400);\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n/* Per-group row pager (`<mono-table-paging-group>`), shown in a footer row at the\r\n   end of a group's rows. Reuses the `[mono-table-paging]*` button styling. */\r\n:is([mono-table],.mono-table) td:is([mono-group-foot],.mono-table-group-foot) {\r\n  padding-top: 0.4rem;\r\n  padding-bottom: 0.5rem;\r\n  padding-left: calc(0.9rem + var(--mono-table-group-level, 0) * 1.4rem);\r\n  background: color-mix(in oklab, var(--_mono-table-accent) 3%, var(--_mono-table-surface));\r\n}\r\n\r\n:is([mono-table-paging-group],.mono-table-pg-group) {\r\n  --mono-table-pg-scale: 0.86;\r\n}\r\n\r\n:is([mono-table-paging-group],.mono-table-pg-group) :is([mono-pgb],.mono-table-pgb) {\r\n  min-width: 26px;\r\n  height: 26px;\r\n  font-size: 0.74rem;\r\n}\r\n\r\n:is([mono-table-paging-group],.mono-table-pg-group) :is([mono-pg-el],.mono-table-pg-el) {\r\n  font-size: 0.74rem;\r\n}\r\n\r\n/* ── Fixed / sticky columns ─────────────────────────────────────────────────\r\n   Pin a column to an edge while the table scrolls horizontally. Add\r\n   `mono-table-sticky-left` / `-right` to the column's header `<th>` AND its body\r\n   `<td>`s. For 2+ pinned columns on one side, set `--mono-table-sticky-left` /\r\n   `--mono-table-sticky-right` on the later column(s) to the combined width of the ones\r\n   before it (give those columns fixed widths so it lines up).\r\n\r\n   The edge is a real BORDER. It was a zero-blur box-shadow, on the reasoning that a collapsed\r\n   border belongs to the table rather than the cell and so might not repaint as a sticky cell\r\n   moves — but a shadow is painted OUTSIDE the border box, so it landed a pixel clear of the\r\n   column and stacked next to whatever rule was already there, which is what made a pinned edge\r\n   read as a smudge rather than a line.\r\n\r\n   That reasoning about collapsed borders was RIGHT, though: in `collapse` mode the border\r\n   stayed at the cell's flow position and scrolled away with the rest of the table. Which is\r\n   why a table holding a pinned column runs with SEPARATE borders (the `:has()` rule up by\r\n   the sticky-head block) — the cell owns its edge and takes it along. */\r\n:is([mono-table],.mono-table) th:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table],.mono-table) td:is([mono-sticky-left],.mono-table-sticky-left) {\r\n  position: sticky;\r\n  /* Default 0 (one pinned column). For a 2nd+ pinned column on this side, set\r\n     --mono-table-sticky-left to the combined width of the columns before it. */\r\n  left: var(--mono-table-sticky-left, 0);\r\n  z-index: 1;\r\n  border-right: 1px solid var(--_mono-table-border);\r\n}\r\n:is([mono-table],.mono-table) th:is([mono-sticky-right],.mono-table-sticky-right),\r\n:is([mono-table],.mono-table) td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  position: sticky;\r\n  right: var(--mono-table-sticky-right, 0);\r\n  z-index: 1;\r\n  border-left: 1px solid var(--_mono-table-border);\r\n}\r\n\r\n/* The pinned edge runs to the FLOOR of the scroll box, not just to the last row.\r\n\r\n   A table is only as tall as its rows, so a short result set left the edge\r\n   stopping mid-box, which reads as a table cut off (DevExtreme's fixed columns\r\n   run their separators to the bottom of the grid). Nothing can be appended to\r\n   a `<tbody>` from CSS, and a pseudo-element on the cell is clipped by the\r\n   cell's own `overflow: hidden` (`mono-table-fixed` sets it for the ellipsis).\r\n   What a cell cannot clip is its OWN border painting — so the last row's pinned\r\n   cells draw that edge as a `border-image` with a bottom OUTSET: the 1px edge\r\n   slice is stretched from the cell's top to a viewport-height below it. It is\r\n   ink overflow, so it adds no scroll height, the scroll box clips it at its\r\n   floor, and once the rows overflow the box there is nothing below the last\r\n   row for it to show in. Scoped to `[mono-table-scroll]` so a table in normal\r\n   flow never paints a tail below itself. The same colour the edge already\r\n   uses; `border-image` needs separate borders, which every pinned table has.\r\n\r\n   EVERY pinned body cell paints the tail, not only the last row's: the rows\r\n   are painted in order and each opaque row covers the tail of the one above,\r\n   so only the last one shows — and it does not matter what the last `<tr>` is.\r\n   Keyed on `:last-child` it went missing whenever the tbody ended in something\r\n   other than a data row (an error / loading row, an open detail panel, a\r\n   virtual-scroll spacer). */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) :is(tbody, tfoot) td:is([mono-sticky-left],.mono-table-sticky-left) {\r\n  border-image: linear-gradient(var(--_mono-table-border), var(--_mono-table-border)) 0 1 0 0 / 0 1px 0 0 / 0 0 100vh 0;\r\n}\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) :is(tbody, tfoot) td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  border-image: linear-gradient(var(--_mono-table-border), var(--_mono-table-border)) 0 0 0 1 / 0 0 0 1px / 0 0 100vh 0;\r\n}\r\n\r\n/* A border-image paints INSTEAD of the borders — every side, at the image's\r\n   widths — so with only the edge in the image the cell's bottom rule went\r\n   unpainted, and a bottom outset would put the image's bottom edge a viewport\r\n   below the cell anyway. The row rule on a pinned cell is therefore an inset\r\n   shadow on the bottom pixel (a cell's own shadow, painted by the cell, never\r\n   clipped by it), and the layout border it replaces is dropped so that pixel\r\n   is the same one the neighbouring cells' border sits on. A footer's pinned\r\n   cell does the same for its TOP rule (the footer separator). */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  border-bottom-width: 0;\r\n  box-shadow: inset 0 -1px 0 0 var(--_mono-table-border-lite);\r\n}\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tfoot td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tfoot td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  border-top-width: 0;\r\n  box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--_mono-table-text) 12%, transparent);\r\n}\r\n/* No rule where the row is closed by something else: a footer's top border, or\r\n   the filler's floor. */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table):has(tfoot) tbody tr:last-child > td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table):has(tfoot) tbody tr:last-child > td:is([mono-sticky-right],.mono-table-sticky-right),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler) > td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table) tbody tr:is([mono-filler],.mono-table-filler) > td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  box-shadow: none;\r\n}\r\n\r\n/* …and the last row keeps its rule. The base sheet drops the bottom rule on the\r\n   last row so it does not double up with a `tfoot`'s top border or a wrapper's\r\n   edge, but in a scroll box taller than its rows that leaves the last row open —\r\n   every row above is closed by a line and the last is not, right where the\r\n   pinned edges now carry on below it. Only where nothing follows the row; the\r\n   pinned cells carry theirs as the shadow above. */\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-table],.mono-table):not(:has(tfoot)):has(:is([mono-sticky-left],.mono-table-sticky-left), :is([mono-sticky-right],.mono-table-sticky-right)) tbody tr:last-child:not(:is([mono-filler],.mono-table-filler)) > td:not(:is([mono-sticky-left],.mono-table-sticky-left)):not(:is([mono-sticky-right],.mono-table-sticky-right)) {\r\n  border-bottom: 1px solid var(--_mono-table-border-lite);\r\n}\r\n\r\n/* Header cells need an opaque background (the gradient sits on `thead`, not the\r\n   cell) and the top layer so they stay above pinned body cells. */\r\n:is([mono-table],.mono-table) thead th:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table],.mono-table) thead th:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  z-index: 3;\r\n  background: var(--_mono-table-head-frozen-bg);\r\n}\r\n\r\n/* Body cells take the row background so scrolled content can't bleed through.\r\n   A pinned cell paints over the row, so it cannot simply inherit the colour —\r\n   but it CAN read the same variable the row set, which means zebra, hover,\r\n   selected, editing and group rows are all covered by this one rule. Adding a\r\n   new row state needs nothing here. */\r\n:is([mono-table],.mono-table) tbody td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-table],.mono-table) tbody td:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  background: var(--_mono-table-row-bg, var(--_mono-table-surface));\r\n}\r\n\r\n/* A pinned SUMMARY cell is sticky on both axes at once — bottom (sticky-foot) and\r\n   left/right (sticky column). Lift it above the scrolling body's pinned column\r\n   AND the rest of the footer row so the bottom corner stays put through both\r\n   scrolls; the opaque background from the sticky-foot rule already applies. */\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot td:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot td:is([mono-sticky-right],.mono-table-sticky-right),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot th:is([mono-sticky-left],.mono-table-sticky-left),\r\n:is([mono-sticky-foot],.mono-table-sticky-foot) tfoot th:is([mono-sticky-right],.mono-table-sticky-right) {\r\n  z-index: 3;\r\n}\r\n/* ── Footer ─────────────────────────────────────────────────────────────── */\r\n\r\n:is([mono-table-foot],.mono-table-foot) {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n  gap: 0.5rem;\r\n  padding: 0.72rem 1rem;\r\n  border-top: 1px solid var(--_mono-table-border-lite);\r\n  background: color-mix(in oklab, var(--_mono-table-text) 3%, var(--_mono-table-surface));\r\n}\r\n\r\n/* ── Error bar (mono-table-error) ────────────────────────────────────────────\r\n   The odd one out of the three controller-driven table elements: `loading` and\r\n   `empty` paint OVER the grid, this one is IN it. A failed request is not a\r\n   transient state to cover the rows with — it is a fact about the table that\r\n   should push the rows down and stay there until it is dismissed, which is what\r\n   DevExtreme's error row does too.\r\n\r\n   So there is no `position: absolute` here and no height reservation: the\r\n   generated `<tr>` (see `ensureRowHost`) is a real row, and the bar inside it is\r\n   ordinary flow content directly under the header. */\r\n\r\n/* `!important`, and not as a shortcut. A generated row's cell is a structural\r\n   HOST, not a content cell — it exists only because `<table>`'s content model\r\n   forbids a bare custom element — so a host page that styles `td` generically is\r\n   simply wrong about this one. And host pages do: these docs carry\r\n   `.vp-doc table[mono-table] td { padding: … }` to undo VitePress's own table\r\n   styling, which at (0,2,2) beat the (0,1,1) this rule used to have and put a\r\n   14px gutter around the error bar. Winning that on specificity is an arms race\r\n   against every consumer's reset; stating the invariant is not. */\r\n:is([mono-error-row],.mono-table-error-row) > td {\r\n  padding: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\n/* The ROW too, like the loading/empty rows above. With no error the element\r\n   renders nothing, but the row stays — the consumer wrote it, and it is theirs —\r\n   and a `<tr>` carries the base row rule's 1px border-bottom of its own, so an\r\n   idle host was a 1px band pushing every data row down. `height: 0` is a\r\n   minimum on a table row, so the bar still grows it when there is one. */\r\n:is([mono-error-row],.mono-table-error-row) {\r\n  height: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\nmono-table-error,\r\nmono-shadow-table-error {\r\n  display: block;\r\n}\r\n\r\n/* The row's cell follows a FROZEN header. `[mono-sticky-head]` may sit on\r\n   the table or on its scroll wrapper — a descendant selector covers both. The\r\n   cell is what sticks (the row stays in flow, so it keeps taking its honest\r\n   height); `top` is the `<thead>` height the element measures and publishes on\r\n   the `<table>` — a banded two-row header is not 1 row tall. Above the pinned\r\n   body cells (1) and the sticky head cells (2) it slides over; the pinned\r\n   header cells are also 3, but a bar under the header never overlaps them.\r\n   Without a frozen header there is no rule here: the bar scrolls away with the\r\n   rows it describes, like any row. */\r\n:is([mono-sticky-head],.mono-table-sticky-head) :is([mono-error-row],.mono-table-error-row) > td {\r\n  position: sticky;\r\n  top: var(--mono-table-error-head, 0px);\r\n  z-index: 3;\r\n}\r\n\r\n/* Exactly the SCROLLPORT wide, pinned to its left edge — never the table.\r\n\r\n   The cell spans every column, so on a table wider than its `[mono-table-scroll]`\r\n   a bar that filled it put the text at the far left and the ✕ / ↻ past the right\r\n   edge, invisible until you scrolled for them (a table with a pinned action\r\n   column is that wide by design). `100cqw` is the scroll wrapper's inline size\r\n   (it is a query container whenever it holds this element — the rule by the\r\n   loading spinner, which centres with the same unit), and `sticky; left: 0`\r\n   keeps the bar at the visible left as you scroll sideways. `max-width: 100%`\r\n   keeps it inside a table that happens to be NARROWER than the wrapper, and\r\n   `auto` outside any wrapper, where there is no scrollport to size to. The\r\n   value travels as a custom property so the shadow build's bar gets it too. */\r\n:is([mono-table-scroll],.mono-table-scroll) mono-table-error,\r\n:is([mono-table-scroll],.mono-table-scroll) mono-shadow-table-error {\r\n  --mono-table-error-w: 100cqw;\r\n}\r\n\r\n:is([mono-error-bar],.mono-table-error-bar) {\r\n  position: sticky;\r\n  left: 0;\r\n  box-sizing: border-box;\r\n  width: var(--mono-table-error-w, auto);\r\n  max-width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.5rem 0.6rem 0.5rem 0.75rem;\r\n  border-bottom: 1px solid var(--_mono-table-error-border);\r\n  background: var(--_mono-table-error-bg);\r\n  color: var(--_mono-table-error);\r\n  font-size: 0.8rem;\r\n  line-height: 1.35;\r\n  /* The bar lives in a <td>, and a cell is `whitespace-nowrap` upstream — so the\r\n     message inherited that and ran under the ↻ / ✕ instead of wrapping. */\r\n  white-space: normal;\r\n}\r\n\r\n:is([mono-error-text],.mono-table-error-text) {\r\n  /* Takes the whole bar so the close button is pinned to the right edge, and\r\n     wraps rather than truncating: a message worth showing is worth reading, and\r\n     a store's error text is routinely a sentence. */\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n/* What the server said beyond the status, after the preset headline — quieter,\r\n   so \"Something went wrong on the server\" reads first and \"Object reference not\r\n   set…\" is there for whoever wants it. */\r\n:is([mono-error-detail],.mono-table-error-detail) {\r\n  opacity: 0.8;\r\n}\r\n:is([mono-error-detail],.mono-table-error-detail)::before {\r\n  content: ' — ';\r\n}\r\n\r\n/* The ↻ and × at the right edge: one look, the class kept as a second\r\n   selector so a consumer rule on `[mono-error-close]` still matches. */\r\n:is([mono-error-actions],.mono-table-error-actions) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.15rem;\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn),\r\n:is([mono-error-close],.mono-table-error-close) {\r\n  flex: 0 0 auto;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--theme-radius-sm, 0.375rem);\r\n  background: transparent;\r\n  color: inherit;\r\n  font-size: 1rem;\r\n  cursor: pointer;\r\n  opacity: 0.75;\r\n  transition: background-color var(--theme-duration-fast, 0.12s) var(--mono-ease, ease),\r\n    opacity var(--theme-duration-fast, 0.12s) var(--mono-ease, ease);\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn):hover,\r\n:is([mono-error-close],.mono-table-error-close):hover {\r\n  background: color-mix(in srgb, var(--_mono-table-error) 14%, transparent);\r\n  opacity: 1;\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn):disabled {\r\n  cursor: default;\r\n  opacity: 0.45;\r\n  background: transparent;\r\n}\r\n\r\n:is([mono-error-btn],.mono-table-error-btn):focus-visible,\r\n:is([mono-error-close],.mono-table-error-close):focus-visible {\r\n  outline: 2px solid color-mix(in srgb, var(--_mono-table-error) 45%, transparent);\r\n  outline-offset: 1px;\r\n  opacity: 1;\r\n}\r\n\r\n/* ── Empty state ────────────────────────────────────────────────────────────\r\n   Two consumers, one look. `[mono-table-empty]` as a CLASS is the hand-rolled\r\n   form — a plain `<div>` after the table, which is what every demo wrote before\r\n   the element existed and what a consumer with an entirely custom condition\r\n   still writes. `<mono-table-empty>` as an ELEMENT is the same message placed\r\n   inside the table and driven by the controller. The typography rules below are\r\n   shared by both, so the two can never drift apart; only the placement differs,\r\n   and that is the block after this one. */\r\n\r\n:is([mono-table-empty],.mono-table-empty) {\r\n  text-align: center;\r\n  padding: 3rem 1rem;\r\n  color: var(--_mono-table-muted);\r\n}\r\n\r\n:is([mono-empty-title],.mono-table-empty-title) {\r\n  font-size: 0.9rem;\r\n  font-weight: var(--mono-font-weight-bold, 700);\r\n  color: var(--_mono-table-text);\r\n}\r\n\r\n:is([mono-empty-sub],.mono-table-empty-sub) {\r\n  font-size: 0.78rem;\r\n  color: var(--_mono-table-faint);\r\n  margin-top: 0.25rem;\r\n}\r\n\r\n/* ── Empty overlay (mono-table-empty) ────────────────────────────────────────\r\n   `mono-table-loading`'s pair, and deliberately the same shape: dropped into the\r\n   `<caption>` (or into a row section, where the core wraps itself in a\r\n   zero-height `<tr><td colspan>` — see `table-overlay.ts`), out of normal flow,\r\n   covering the nearest positioned ancestor.\r\n\r\n   Hidden until the core reflects [data-mono-empty]. Note the DEFAULT here is\r\n   hidden even though an unbound element is always \"visible\": the core sets the\r\n   attribute immediately when no controller is bound, so a `v-if`-driven usage\r\n   still paints. Defaulting to shown instead would flash the message on every\r\n   controller-driven table for the one frame before the core's first sync. */\r\n\r\nmono-table-empty,\r\nmono-shadow-table-empty {\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: var(--_mono-table-empty-z, 9);\r\n  display: none;\r\n  /* The RESTING offset, in real layout. It cannot come from the message's own\r\n     `sticky` `top`, which only pushes an element away from a SCROLLPORT edge —\r\n     with no scrolling ancestor the nearest scrollport is the viewport, the box is\r\n     already far below its top, and sticky does nothing at all. The message then\r\n     sits at the overlay's top, which is the top of the table: printed across the\r\n     column names. A table with no `[mono-table-scroll]` is not a corner case\r\n     either — it is exactly what `<mono-dropdown-table>` renders. The sticky `top`\r\n     below still does its own job once there IS a scroll region. */\r\n  padding-top: calc(var(--mono-table-empty-head, 0px) + var(--_mono-table-empty-gap, 2rem));\r\n  /* Anchored at the TOP for the same reason the spinner is: `sticky` below only\r\n     moves the box once its static position would leave the view, so a static\r\n     position in the middle of a tall region gives a different result at every\r\n     scroll offset. */\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n  /* The message is not a modal. Everything around it stays click-through so a\r\n     sticky header, a column resizer or a row underneath still answers the mouse;\r\n     the box itself takes its interactivity back (next rule) because it holds a\r\n     button. */\r\n  pointer-events: none;\r\n}\r\n\r\nmono-table-empty[data-mono-empty],\r\nmono-shadow-table-empty[data-mono-empty] {\r\n  display: flex;\r\n}\r\n\r\n/* The generated row, when the element was dropped straight into a row section.\r\n   A host, not a layout participant: any height, padding or border here would\r\n   open a permanent gap under the header whether or not the table is empty. */\r\n/* Same invariant as the loading row above — a host cell, never a content cell. */\r\n:is([mono-table],.mono-table) :is([mono-empty-row],.mono-table-empty-row),\r\n:is([mono-table],.mono-table) :is([mono-empty-row],.mono-table-empty-row) > td {\r\n  height: 0 !important;\r\n  padding: 0 !important;\r\n  border: 0 !important;\r\n}\r\n\r\n/* The message itself. `sticky` keeps it in the visible part of a table that\r\n   scrolls; the overlay's `padding-top` above is what places it at rest, and the\r\n   two use the same offset so scrolling starts from where it already sits. */\r\n:is([mono-empty-box],.mono-table-empty-box) {\r\n  position: sticky;\r\n  top: calc(var(--mono-table-empty-head, 0px) + var(--_mono-table-empty-gap, 2rem));\r\n  left: var(--mono-table-empty-x, auto);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  max-width: 32rem;\r\n  padding: 0 1rem;\r\n  text-align: center;\r\n  color: var(--_mono-table-muted);\r\n  /* Back on, so the reload button is clickable and the text selectable. */\r\n  pointer-events: auto;\r\n}\r\n\r\n/* Centre on the SCROLLPORT rather than on the table, so the message lands in the\r\n   middle of what can actually be seen at any horizontal offset. Both halves are\r\n   scoped to `[mono-table-scroll]`: `cqw` with no query container resolves against\r\n   the viewport, which would be wrong everywhere else. */\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-table-empty),\r\n:is([mono-table-scroll],.mono-table-scroll):has(mono-shadow-table-empty) {\r\n  container-type: inline-size;\r\n}\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) mono-table-empty,\r\n:is([mono-table-scroll],.mono-table-scroll) mono-shadow-table-empty {\r\n  justify-content: flex-start;\r\n}\r\n\r\n:is([mono-table-scroll],.mono-table-scroll) :is([mono-empty-box],.mono-table-empty-box) {\r\n  /* Half the scrollport, less half the box — `translateX(-50%)` cannot be used\r\n     here because the box is `sticky` and a transform on a sticky box is applied\r\n     AFTER the stick, so it would drift back out of view as you scroll. */\r\n  --mono-table-empty-x: calc(50cqw - min(16rem, 50cqw));\r\n  width: min(32rem, 100cqw);\r\n  max-width: none;\r\n}\r\n\r\n/* The glyph. An iconify class paints as a mask on an empty span and needs a box;\r\n   an emoji is text and needs a font size. Both land on the same footprint so the\r\n   title sits at the same height either way.\r\n\r\n   Scoped under the box ON PURPOSE (two attributes/classes, (0,2,0)): the glyph also\r\n   carries its iconify class (`i-mdi-help-circle-outline` by default), and an app's\r\n   own UnoCSS / Tailwind emits that utility UNLAYERED with `width/height: 1em` at\r\n   (0,1,0) — a tie this rule lost on load order, shrinking the icon to the table's\r\n   font size (12px instead of 40). One utility class can no longer out-weigh it. */\r\n:is([mono-empty-box],.mono-table-empty-box) :is([mono-empty-icon],.mono-table-empty-icon) {\r\n  display: block;\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  color: var(--_mono-table-faint);\r\n}\r\n\r\n:is([mono-empty-box],.mono-table-empty-box) :is([mono-empty-icon],.mono-table-empty-icon):is([mono-text],.is-text) {\r\n  font-size: 2rem;\r\n  line-height: 2.5rem;\r\n}\r\n\r\n/* The body slot replaces the props' content, so it owns the whole box. */\r\n:is([mono-empty-body],.mono-table-empty-body)[data-empty] {\r\n  display: none;\r\n}\r\n\r\n:is([mono-empty-reload],.mono-table-empty-reload) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  margin-top: 0.5rem;\r\n  padding: 0.32rem 0.7rem;\r\n  border: 1px solid var(--_mono-table-border);\r\n  border-radius: var(--theme-radius-sm, 0.375rem);\r\n  background: var(--_mono-table-surface);\r\n  color: var(--_mono-table-accent);\r\n  font: inherit;\r\n  font-size: 0.78rem;\r\n  cursor: pointer;\r\n  transition:\r\n    background-color var(--theme-duration-fast, 0.12s) var(--mono-ease, ease),\r\n    border-color var(--theme-duration-fast, 0.12s) var(--mono-ease, ease);\r\n}\r\n\r\n:is([mono-empty-reload],.mono-table-empty-reload):hover {\r\n  border-color: var(--_mono-table-accent);\r\n  background: color-mix(in srgb, var(--_mono-table-accent) 8%, var(--_mono-table-surface));\r\n}\r\n\r\n:is([mono-empty-reload],.mono-table-empty-reload):focus-visible {\r\n  outline: 2px solid color-mix(in srgb, var(--_mono-table-accent) 45%, transparent);\r\n  outline-offset: 1px;\r\n}\r\n/* ── Row detail (mono-table-detail) ──────────────────────────────────────────\r\n   Two pieces that live in DIFFERENT places:\r\n\r\n   1. The TOGGLE — the `<mono-table-detail>` element itself, sitting in one of the\r\n      row's `<td>`s. It renders a single chevron button.\r\n   2. The PANEL — `tr[mono-detail-row]`, which the element inserts into the\r\n      consumer's `<tbody>` right below its own row while open. It is light DOM in\r\n      BOTH builds (a shadow root cannot project content into a row outside its\r\n      host), so these rules are what style it either way. */\r\n\r\nmono-table-detail,\r\nmono-shadow-table-detail {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n}\r\n\r\n:is([mono-detail-toggle],.mono-table-detail-toggle) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: var(--_mono-table-detail-size);\r\n  height: var(--_mono-table-detail-size);\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: var(--_mono-table-detail-radius);\r\n  background: transparent;\r\n  color: var(--_mono-table-detail-color);\r\n  cursor: pointer;\r\n  transition:\r\n    background 0.15s ease,\r\n    color 0.15s ease;\r\n}\r\n\r\n:is([mono-detail-toggle],.mono-table-detail-toggle):hover:not(:disabled) {\r\n  background: var(--_mono-table-detail-hover-bg);\r\n  color: var(--_mono-table-detail-color-open);\r\n}\r\n\r\n:is([mono-detail-toggle],.mono-table-detail-toggle):disabled {\r\n  opacity: 0.45;\r\n  cursor: not-allowed;\r\n}\r\n\r\nmono-table-detail[open] :is([mono-detail-toggle],.mono-table-detail-toggle),\r\nmono-shadow-table-detail[open] :is([mono-detail-toggle],.mono-table-detail-toggle) {\r\n  color: var(--_mono-table-detail-color-open);\r\n}\r\n\r\n/* The shadow build inlines its chevrons as SVG (no page-level icon CSS inside a\r\n   shadow root); size them like the light build's `.mono-icon`. */\r\n:is([mono-detail-caret],.mono-table-detail-caret) {\r\n  width: 1.15em;\r\n  height: 1.15em;\r\n}\r\n\r\n/* The inserted panel row. The colour is set on the CELL, not via the row's\r\n   `--_mono-table-row-bg`, because this is panel decoration rather than a row\r\n   state — it must also beat the sticky-column cell rule, which reads that\r\n   variable. The panel is excluded from the zebra's data set, so it never\r\n   receives a stripe and never shifts the parity of the rows below it. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-detail-row],.mono-table-detail-row) > td,\r\ntr:is([mono-detail-row],.mono-table-detail-row) > td {\r\n  padding: var(--_mono-table-detail-panel-pad);\r\n  background: var(--_mono-table-detail-panel-bg);\r\n}\r\n\r\n/* A detail row is not a data row: keep the row hover/zebra treatment off it, so\r\n   hovering the panel doesn't look like hovering a record. */\r\n:is([mono-table],.mono-table) tbody tr:is([mono-detail-row],.mono-table-detail-row):hover > td {\r\n  background: var(--_mono-table-detail-panel-bg);\r\n}\r\n\r\n:is([mono-detail-panel],.mono-table-detail-panel) {\r\n  color: var(--_mono-table-ink-mid);\r\n  font-size: 0.86rem;\r\n}\r\n\r\n/* A nested table inside a panel sits flush with the panel padding. */\r\n:is([mono-detail-panel],.mono-table-detail-panel) > :is([mono-table],.mono-table),\r\n:is([mono-detail-panel],.mono-table-detail-panel) > :is([mono-table-scroll],.mono-table-scroll) {\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n/* ── Row selection (mono-table-checkbox) ─────────────────────────────────────\r\n   The element renders `mono-checkbox`'s own attribute markup, so the whole\r\n   size × color × state matrix comes from checkbox.css — the only rules here are\r\n   the ones about sitting in a table cell. */\r\n\r\nmono-table-checkbox,\r\nmono-shadow-table-checkbox {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n}\r\n\r\n/* A bare (label-less) box in a header/body cell centres on the column and needs\r\n   no extra gap, unlike a form checkbox that always has text beside it. */\r\n:is([mono-table],.mono-table) th > mono-table-checkbox,\r\n:is([mono-table],.mono-table) td > mono-table-checkbox,\r\n:is([mono-table],.mono-table) th > mono-shadow-table-checkbox,\r\n:is([mono-table],.mono-table) td > mono-shadow-table-checkbox {\r\n  vertical-align: middle;\r\n}\r\n\r\n:is([mono-table-checkbox],.mono-table-checkbox) .mono-checkbox-label:empty {\r\n  display: none;\r\n}\r\n\r\n/* While a `mode=\"all\"` drain is in flight the element emits\r\n   [mono-checkbox][mono-loading] > [mono-box] > [mono-loading-spinner] — checkbox.css owns\r\n   that look (accent-filled box, spinner, \"working\" cursor); nothing to restate. */\r\n";
+
 //#endregion
 //#region src/components/table/mono-table-search.ts
-var MonoTableSearch = class MonoTableSearch extends MonoTableSearchCore(LitElement) {
+let MonoTableSearch = class MonoTableSearch extends MonoTableSearchCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._slotsCaptured = false;
 		this._filterSlots = [];
 	}
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -1113,11 +1117,12 @@ var MonoTableSearch = class MonoTableSearch extends MonoTableSearchCore(LitEleme
 	}
 };
 MonoTableSearch = __decorate([customElement("mono-table-search")], MonoTableSearch);
+
 //#endregion
 //#region src/components/table/mono-table-paging-core.ts
 /** Defaults the shadow build tests against before swapping in its inline SVG. */
-var DEFAULT_PREV_ICON = "i-mdi-chevron-left";
-var DEFAULT_NEXT_ICON = "i-mdi-chevron-right";
+const DEFAULT_PREV_ICON = "i-mdi-chevron-left";
+const DEFAULT_NEXT_ICON = "i-mdi-chevron-right";
 /**
 * `MonoTablePagingCore` — render-mode-agnostic logic for `mono-table-paging`.
 *
@@ -1137,9 +1142,9 @@ var DEFAULT_NEXT_ICON = "i-mdi-chevron-right";
 * Flat tables only — the controller refuses scroll modes on a grouped grid.
 */
 /** Scroll containers known by structure — every spelling a consumer or the library writes. */
-var SCROLL_HOSTS = ".mono-table-scroll, [mono-table-scroll], [mono-dd-region=\"body\"], .mono-dropdown-table-region.body";
-var DD_PANEL = "[mono-dd-panel], .mono-dropdown-table-panel";
-var DD_BODY = "[mono-dd-region=\"body\"], .mono-dropdown-table-region.body";
+const SCROLL_HOSTS = ".mono-table-scroll, [mono-table-scroll], [mono-dd-region=\"body\"], .mono-dropdown-table-region.body";
+const DD_PANEL = "[mono-dd-panel], .mono-dropdown-table-panel";
+const DD_BODY = "[mono-dd-region=\"body\"], .mono-dropdown-table-region.body";
 /**
 * Ancestors in the FLATTENED tree: a slotted node continues at its `<slot>`, and a shadow root's
 * top continues at its host. `closest()` stops at both, which hid the shadow dropdown-table's
@@ -1155,7 +1160,7 @@ function flatAncestors(start) {
 	}
 	return out;
 }
-var MonoTablePagingCore = (superClass) => {
+const MonoTablePagingCore = (superClass) => {
 	class MonoTablePagingCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -1305,7 +1310,7 @@ var MonoTablePagingCore = (superClass) => {
 		_pages(current1, total) {
 			if (total <= 1) return total === 1 ? [1] : [];
 			const sib = Math.max(0, Math.floor(Number(this.siblings) || 0));
-			const set = new Set([1, total]);
+			const set = /* @__PURE__ */ new Set([1, total]);
 			for (let p = current1 - sib; p <= current1 + sib; p++) if (p >= 1 && p <= total) set.add(p);
 			const sorted = [...set].sort((a, b) => a - b);
 			const out = [];
@@ -1422,17 +1427,19 @@ var MonoTablePagingCore = (superClass) => {
 	__decorate([property({ attribute: "next-icon" })], MonoTablePagingCoreClass.prototype, "nextIcon", void 0);
 	return MonoTablePagingCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-paging.ts
-var MonoTablePaging = class MonoTablePaging extends MonoTablePagingCore(LitElement) {
+let MonoTablePaging = class MonoTablePaging extends MonoTablePagingCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTablePaging = __decorate([customElement("mono-table-paging")], MonoTablePaging);
+
 //#endregion
 //#region src/components/table/mono-table-paging-group-core.ts
 /**
@@ -1441,7 +1448,7 @@ MonoTablePaging = __decorate([customElement("mono-table-paging")], MonoTablePagi
 * controller base with group-paging registration on connect / disconnect /
 * group-path change. No slots, no icons — light and shadow share `render()`.
 */
-var MonoTablePagingGroupCore = (superClass) => {
+const MonoTablePagingGroupCore = (superClass) => {
 	class MonoTablePagingGroupCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -1485,7 +1492,7 @@ var MonoTablePagingGroupCore = (superClass) => {
 		_pages(current1, total) {
 			if (total <= 1) return total === 1 ? [1] : [];
 			const sib = Math.max(0, Math.floor(Number(this.siblings) || 0));
-			const set = new Set([1, total]);
+			const set = /* @__PURE__ */ new Set([1, total]);
 			for (let p = current1 - sib; p <= current1 + sib; p++) if (p >= 1 && p <= total) set.add(p);
 			const sorted = [...set].sort((a, b) => a - b);
 			const out = [];
@@ -1548,17 +1555,19 @@ var MonoTablePagingGroupCore = (superClass) => {
 	})], MonoTablePagingGroupCoreClass.prototype, "simple", void 0);
 	return MonoTablePagingGroupCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-paging-group.ts
-var MonoTablePagingGroup = class MonoTablePagingGroup extends MonoTablePagingGroupCore(LitElement) {
+let MonoTablePagingGroup = class MonoTablePagingGroup extends MonoTablePagingGroupCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTablePagingGroup = __decorate([customElement("mono-table-paging-group")], MonoTablePagingGroup);
+
 //#endregion
 //#region src/components/table/mono-table-page-size-core.ts
 /**
@@ -1566,7 +1575,7 @@ MonoTablePagingGroup = __decorate([customElement("mono-table-paging-group")], Mo
 * a native `<select>` of page-size options wired to the controller. No slots, no
 * icons — light and shadow share the full `render()`.
 */
-var MonoTablePageSizeCore = (superClass) => {
+const MonoTablePageSizeCore = (superClass) => {
 	class MonoTablePageSizeCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -1622,17 +1631,19 @@ var MonoTablePageSizeCore = (superClass) => {
 	__decorate([property({ type: String })], MonoTablePageSizeCoreClass.prototype, "label", void 0);
 	return MonoTablePageSizeCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-page-size.ts
-var MonoTablePageSize = class MonoTablePageSize extends MonoTablePageSizeCore(LitElement) {
+let MonoTablePageSize = class MonoTablePageSize extends MonoTablePageSizeCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTablePageSize = __decorate([customElement("mono-table-page-size")], MonoTablePageSize);
+
 //#endregion
 //#region src/components/table/mono-table-info-core.ts
 /**
@@ -1640,7 +1651,7 @@ MonoTablePageSize = __decorate([customElement("mono-table-page-size")], MonoTabl
 * read-only summary line (`Showing {from}–{to} of {total}`) driven by the
 * controller. No slots, no icons — light and shadow share the full `render()`.
 */
-var MonoTableInfoCore = (superClass) => {
+const MonoTableInfoCore = (superClass) => {
 	class MonoTableInfoCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -1655,23 +1666,26 @@ var MonoTableInfoCore = (superClass) => {
 			const total = grid?.totalCount ?? shown;
 			const from = shown === 0 ? 0 : pageIndex * pageSize + 1;
 			const to = shown === 0 ? 0 : from + shown - 1;
-			return html`<span class="mono-table-info" mono-table-info>${this.template.replace("{from}", String(from)).replace("{to}", String(to)).replace("{total}", String(total)).replace("{page}", String(pageIndex + 1)).replace("{pages}", String(grid?.pageCount ?? 1))}</span>`;
+			const text = this.template.replace("{from}", String(from)).replace("{to}", String(to)).replace("{total}", String(total)).replace("{page}", String(pageIndex + 1)).replace("{pages}", String(grid?.pageCount ?? 1));
+			return html`<span class="mono-table-info" mono-table-info>${text}</span>`;
 		}
 	}
 	__decorate([property({ type: String })], MonoTableInfoCoreClass.prototype, "template", void 0);
 	return MonoTableInfoCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-info.ts
-var MonoTableInfo = class MonoTableInfo extends MonoTableInfoCore(LitElement) {
+let MonoTableInfo = class MonoTableInfo extends MonoTableInfoCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTableInfo = __decorate([customElement("mono-table-info")], MonoTableInfo);
+
 //#endregion
 //#region src/components/table/table-sort-utils.ts
 /**
@@ -1714,6 +1728,7 @@ function sortTitle(current, seq = 0, total = 0) {
 	if (!current || total < 2 || seq < 1) return base;
 	return `${base} (${ordinal(seq)} of ${total})`;
 }
+
 //#endregion
 //#region src/components/table/table-menu-core.ts
 /**
@@ -1736,7 +1751,7 @@ function sortTitle(current, seq = 0, total = 0) {
 * It only *declares* `field` / `caption` — both cores already define them as
 * reactive properties, and re-declaring would shadow them.
 */
-var MonoTableMenuCore = (superClass) => {
+const MonoTableMenuCore = (superClass) => {
 	class MonoTableMenuCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -1999,6 +2014,7 @@ var MonoTableMenuCore = (superClass) => {
 	__decorate([state()], MonoTableMenuCoreClass.prototype, "_sortMenuOpen", void 0);
 	return MonoTableMenuCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-sort-core.ts
 /**
@@ -2014,7 +2030,7 @@ var MonoTableMenuCore = (superClass) => {
 * `updated()` reflects the sort state onto the parent `<th>`/`<td>` via
 * `closest()` — guarded by `isServer` (lit) so it never runs during SSR.
 */
-var MonoTableSortCore = (superClass) => {
+const MonoTableSortCore = (superClass) => {
 	class MonoTableSortCoreClass extends MonoTableMenuCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -2144,16 +2160,17 @@ var MonoTableSortCore = (superClass) => {
 	})], MonoTableSortCoreClass.prototype, "showIcon", void 0);
 	return MonoTableSortCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-sort.ts
-var MonoTableSort = class MonoTableSort extends MonoTableSortCore(LitElement) {
+let MonoTableSort = class MonoTableSort extends MonoTableSortCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._buckets = /* @__PURE__ */ new Map();
 		this._slotsCaptured = false;
 	}
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -2171,7 +2188,8 @@ var MonoTableSort = class MonoTableSort extends MonoTableSortCore(LitElement) {
 		return html``;
 	}
 	renderIcon(_name) {
-		return html`<span class="mono-table-sort-caret ${this._current === "asc" ? "i-ri-arrow-up-long-fill" : this._current === "desc" ? "i-ri-arrow-down-long-fill" : "i-fluent-arrow-sort-16-filled"}" mono-sort-caret></span>`;
+		const cls = this._current === "asc" ? "i-ri-arrow-up-long-fill" : this._current === "desc" ? "i-ri-arrow-down-long-fill" : "i-fluent-arrow-sort-16-filled";
+		return html`<span class="mono-table-sort-caret ${cls}" mono-sort-caret></span>`;
 	}
 	_captureSlots() {
 		if (this._slotsCaptured) return;
@@ -2186,6 +2204,7 @@ var MonoTableSort = class MonoTableSort extends MonoTableSortCore(LitElement) {
 	}
 };
 MonoTableSort = __decorate([customElement("mono-table-sort")], MonoTableSort);
+
 //#endregion
 //#region src/components/table/mono-table-th-core.ts
 /** Coerce a size prop to a CSS length: a number or bare numeric string → px; anything with a unit (`'10rem'`, `'40%'`) is used as-is. */
@@ -2212,7 +2231,7 @@ function toCssSize(value) {
 *
 * The standalone `mono-table-sort` element is unchanged and still supported.
 */
-var MonoTableThCore = (superClass) => {
+const MonoTableThCore = (superClass) => {
 	class MonoTableThCoreClass extends MonoTableMenuCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -2928,16 +2947,17 @@ var MonoTableThCore = (superClass) => {
 	__decorate([state()], MonoTableThCoreClass.prototype, "_fromIcon", void 0);
 	return MonoTableThCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-th.ts
-var MonoTableTh = class MonoTableTh extends MonoTableThCore(LitElement) {
+let MonoTableTh = class MonoTableTh extends MonoTableThCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._buckets = /* @__PURE__ */ new Map();
 		this._slotsCaptured = false;
 	}
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -2955,8 +2975,12 @@ var MonoTableTh = class MonoTableTh extends MonoTableThCore(LitElement) {
 		return html``;
 	}
 	renderIcon(name) {
-		if (name === "funnel") return html`<span class="mono-th-filter-glyph ${this._filtered ? "i-mdi-filter" : "i-mdi-filter-outline"}" mono-th-filter-glyph></span>`;
-		return html`<span class="mono-table-sort-caret ${this._current === "asc" ? "i-ri-arrow-up-long-fill" : this._current === "desc" ? "i-ri-arrow-down-long-fill" : "i-fluent-arrow-sort-16-filled"}" mono-sort-caret></span>`;
+		if (name === "funnel") {
+			const cls = this._filtered ? "i-mdi-filter" : "i-mdi-filter-outline";
+			return html`<span class="mono-th-filter-glyph ${cls}" mono-th-filter-glyph></span>`;
+		}
+		const cls = this._current === "asc" ? "i-ri-arrow-up-long-fill" : this._current === "desc" ? "i-ri-arrow-down-long-fill" : "i-fluent-arrow-sort-16-filled";
+		return html`<span class="mono-table-sort-caret ${cls}" mono-sort-caret></span>`;
 	}
 	_captureSlots() {
 		if (this._slotsCaptured) return;
@@ -2971,6 +2995,7 @@ var MonoTableTh = class MonoTableTh extends MonoTableThCore(LitElement) {
 	}
 };
 MonoTableTh = __decorate([customElement("mono-table-th")], MonoTableTh);
+
 //#endregion
 //#region src/components/table/table-overlay.ts
 /**
@@ -3140,7 +3165,7 @@ function syncRowSpan(el, host) {
 * be clipped out of existence by the wrapper's own `overflow`. Nothing about the
 * DOM would look wrong; the grid would simply be blank.
 */
-var HOLD_PREFIX = "--mono-table-hold-";
+const HOLD_PREFIX = "--mono-table-hold-";
 /** `max()` over every reservation currently parked on `el`, or `''` if none. */
 function holdExpression(el) {
 	const names = [];
@@ -3162,7 +3187,7 @@ function holdExpression(el) {
 * permanent reservation on the consumer's own scroll wrapper, i.e. a gap under
 * their header that nothing on the page explains.
 */
-var applied = /* @__PURE__ */ new WeakMap();
+const applied = /* @__PURE__ */ new WeakMap();
 /**
 * Give back everything an overlay reserved, from the hosts it remembers.
 *
@@ -3215,6 +3240,7 @@ function applyOverlayHost(el, on, opts) {
 	}
 	if (sizeHost && sizeHost !== host) el.style.minHeight = holdExpression(sizeHost);
 }
+
 //#endregion
 //#region src/components/table/mono-table-empty-core.ts
 /**
@@ -3225,13 +3251,13 @@ function applyOverlayHost(el, on, opts) {
 * fault. The subtitle names the two things a user can actually do about it —
 * anything more specific would be wrong on most tables.
 */
-var DEFAULT_ICON = "i-mdi-help-circle-outline";
-var DEFAULT_TITLE = "No Data found";
-var DEFAULT_SUBTITLE = "Try adjusting your search or filters.";
+const DEFAULT_ICON = "i-mdi-help-circle-outline";
+const DEFAULT_TITLE = "No Data found";
+const DEFAULT_SUBTITLE = "Try adjusting your search or filters.";
 /** Fallback when `--mono-table-empty-min-h` resolves to nothing. */
-var DEFAULT_MIN_HEIGHT = "12rem";
+const DEFAULT_MIN_HEIGHT = "12rem";
 /** Breathing room left under the message when its own height sets the reserve. */
-var TAIL_GAP = 16;
+const TAIL_GAP = 16;
 /**
 * `MonoTableEmptyCore` — render-mode-agnostic logic for `mono-table-empty`, the
 * message shown over a grid that came back with no rows.
@@ -3259,7 +3285,7 @@ var TAIL_GAP = 16;
 *
 * SSR-safe: all DOM work is guarded behind `isServer`.
 */
-var MonoTableEmptyCore = (superClass) => {
+const MonoTableEmptyCore = (superClass) => {
 	class MonoTableEmptyCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -3458,18 +3484,19 @@ var MonoTableEmptyCore = (superClass) => {
 	__decorate([state()], MonoTableEmptyCoreClass.prototype, "_hasBodySlot", void 0);
 	return MonoTableEmptyCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-empty.ts
 /** The one named region. Everything unnamed falls into the default bucket. */
-var EMPTY_NAMED_SLOTS = ["body"];
-var MonoTableEmpty = class MonoTableEmpty extends MonoTableEmptyCore(LitElement) {
+const EMPTY_NAMED_SLOTS = ["body"];
+let MonoTableEmpty = class MonoTableEmpty extends MonoTableEmptyCore(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this._buckets = /* @__PURE__ */ new Map();
 		this._slotsCaptured = false;
 	}
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
@@ -3491,6 +3518,7 @@ var MonoTableEmpty = class MonoTableEmpty extends MonoTableEmptyCore(LitElement)
 	}
 };
 MonoTableEmpty = __decorate([customElement("mono-table-empty")], MonoTableEmpty);
+
 //#endregion
 //#region src/components/table/mono-table-error-core.ts
 /**
@@ -3540,7 +3568,7 @@ MonoTableEmpty = __decorate([customElement("mono-table-empty")], MonoTableEmpty)
 *
 * SSR-safe: all DOM work is guarded behind `isServer`.
 */
-var MonoTableErrorCore = (superClass) => {
+const MonoTableErrorCore = (superClass) => {
 	class MonoTableErrorCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -3714,20 +3742,22 @@ var MonoTableErrorCore = (superClass) => {
 	__decorate([state()], MonoTableErrorCoreClass.prototype, "_dismissedMessage", void 0);
 	return MonoTableErrorCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-error.ts
-var MonoTableError = class MonoTableError extends MonoTableErrorCore(LitElement) {
+let MonoTableError = class MonoTableError extends MonoTableErrorCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTableError = __decorate([customElement("mono-table-error")], MonoTableError);
+
 //#endregion
 //#region src/components/table/mono-table-loading-core.ts
-var SKELETON_FALLBACK = {
+const SKELETON_FALLBACK = {
 	cols: [
 		25,
 		25,
@@ -3742,7 +3772,7 @@ var SKELETON_FALLBACK = {
 * `null` (automatic, follow the controller); `loading` / `loading="true"` → `true`;
 * `loading="false"` → `false`. Never reflected — the element's own state is `data-mono-loading`.
 */
-var loadingConverter = { fromAttribute(value) {
+const loadingConverter = { fromAttribute(value) {
 	if (value === null) return null;
 	return String(value).trim().toLowerCase() !== "false";
 } };
@@ -3778,7 +3808,7 @@ var loadingConverter = { fromAttribute(value) {
 *
 * SSR-safe: all DOM/timer work is guarded behind `isServer`.
 */
-var MonoTableLoadingCore = (superClass) => {
+const MonoTableLoadingCore = (superClass) => {
 	class MonoTableLoadingCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -3997,12 +4027,13 @@ var MonoTableLoadingCore = (superClass) => {
 		/** The pending placeholder: one measured row, repeated by phantom's `count`. */
 		_renderSkeleton() {
 			const { cols, rowH } = this._skeleton;
+			const rows = this._skeletonRows();
 			return html`
         <div
           class="mono-table-skeleton" mono-table-skeleton
           style="padding-top: var(--mono-table-loading-head, 0px)"
         >
-          <phantom-ui mono-skeleton loading count=${this._skeletonRows()} count-gap="0" loading-label="Loading rows">
+          <phantom-ui mono-skeleton loading count=${rows} count-gap="0" loading-label="Loading rows">
             <div class="mono-table-skeleton-row" mono-table-skeleton-row style=${`height:${rowH}px`}>
               ${cols.map((pct) => html`<span
                   class="mono-table-skeleton-cell" mono-table-skeleton-cell
@@ -4033,17 +4064,19 @@ var MonoTableLoadingCore = (superClass) => {
 	})], MonoTableLoadingCoreClass.prototype, "loading", void 0);
 	return MonoTableLoadingCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-loading.ts
-var MonoTableLoading = class MonoTableLoading extends MonoTableLoadingCore(LitElement) {
+let MonoTableLoading = class MonoTableLoading extends MonoTableLoadingCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTableLoading = __decorate([customElement("mono-table-loading")], MonoTableLoading);
+
 //#endregion
 //#region src/components/table/mono-table-summary-core.ts
 /**
@@ -4061,7 +4094,7 @@ MonoTableLoading = __decorate([customElement("mono-table-loading")], MonoTableLo
 *
 * SSR-safe: `dataGrid` is undefined on the server, so it renders an empty shell.
 */
-var MonoTableSummaryCore = (superClass) => {
+const MonoTableSummaryCore = (superClass) => {
 	class MonoTableSummaryCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(..._args) {
 			super(..._args);
@@ -4107,7 +4140,8 @@ var MonoTableSummaryCore = (superClass) => {
 			super.disconnectedCallback();
 		}
 		render() {
-			return html`<span class="mono-table-summary" mono-table-summary>${this.field && this.dataGrid ? this.dataGrid.summaryText(this.field, this.type) : ""}</span>`;
+			const text = this.field && this.dataGrid ? this.dataGrid.summaryText(this.field, this.type) : "";
+			return html`<span class="mono-table-summary" mono-table-summary>${text}</span>`;
 		}
 	}
 	__decorate([property({ type: String })], MonoTableSummaryCoreClass.prototype, "field", void 0);
@@ -4115,17 +4149,19 @@ var MonoTableSummaryCore = (superClass) => {
 	__decorate([property({ type: String })], MonoTableSummaryCoreClass.prototype, "name", void 0);
 	return MonoTableSummaryCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-summary.ts
-var MonoTableSummary = class MonoTableSummary extends MonoTableSummaryCore(LitElement) {
+let MonoTableSummary = class MonoTableSummary extends MonoTableSummaryCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTableSummary = __decorate([customElement("mono-table-summary")], MonoTableSummary);
+
 //#endregion
 //#region src/components/table/mono-table-detail-core.ts
 /** Total column span of a row, so the panel cell can stretch the full width. */
@@ -4183,7 +4219,7 @@ function colSpanOf(row) {
 * SSR-safe: every DOM touch is behind `isServer`, so the server renders just the
 * collapsed toggle.
 */
-var MonoTableDetailCore = (superClass) => {
+const MonoTableDetailCore = (superClass) => {
 	class MonoTableDetailCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -4340,7 +4376,8 @@ var MonoTableDetailCore = (superClass) => {
 		* shadow build swaps in inline SVG, which page-level utility CSS can't reach.
 		*/
 		_renderIcon() {
-			return html`<span class="mono-icon ${this.open ? this.iconExpanded : this.icon}" aria-hidden="true"></span>`;
+			const cls = this.open ? this.iconExpanded : this.icon;
+			return html`<span class="mono-icon ${cls}" aria-hidden="true"></span>`;
 		}
 		render() {
 			return html`
@@ -4375,17 +4412,19 @@ var MonoTableDetailCore = (superClass) => {
 	__decorate([property({ type: String })], MonoTableDetailCoreClass.prototype, "label", void 0);
 	return MonoTableDetailCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-detail.ts
-var MonoTableDetail = class MonoTableDetail extends MonoTableDetailCore(LitElement) {
+let MonoTableDetail = class MonoTableDetail extends MonoTableDetailCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTableDetail = __decorate([customElement("mono-table-detail")], MonoTableDetail);
+
 //#endregion
 //#region src/components/table/mono-table-checkbox-core.ts
 /**
@@ -4419,7 +4458,7 @@ MonoTableDetail = __decorate([customElement("mono-table-detail")], MonoTableDeta
 * SSR-safe: the controller is undefined on the server, so it renders an unchecked
 * shell and touches no DOM.
 */
-var MonoTableCheckboxCore = (superClass) => {
+const MonoTableCheckboxCore = (superClass) => {
 	class MonoTableCheckboxCoreClass extends MonoTableControllerCore(superClass) {
 		constructor(...args) {
 			super(...args);
@@ -4528,10 +4567,11 @@ var MonoTableCheckboxCore = (superClass) => {
 				input.checked = false;
 				return;
 			}
-			if (this.type === "all") if (!checked) check.clear();
-			else if (this.mode === "per-page") check.selectPage();
-			else check.selectAll();
-			else if (this.item != null) check.toggle(this.item, checked);
+			if (this.type === "all") {
+				if (!checked) check.clear();
+				else if (this.mode === "per-page") check.selectPage();
+				else check.selectAll();
+			} else if (this.item != null) check.toggle(this.item, checked);
 			const actual = check.pending ? checked : this._checked;
 			if (input.checked !== actual) input.checked = actual;
 			dispatchMonoEvent(this, "change", {
@@ -4639,16 +4679,18 @@ var MonoTableCheckboxCore = (superClass) => {
 	__decorate([property({ attribute: "css-class" })], MonoTableCheckboxCoreClass.prototype, "cssClassName", void 0);
 	return MonoTableCheckboxCoreClass;
 };
+
 //#endregion
 //#region src/components/table/mono-table-checkbox.ts
-var MonoTableCheckbox = class MonoTableCheckbox extends MonoTableCheckboxCore(LitElement) {
+let MonoTableCheckbox = class MonoTableCheckbox extends MonoTableCheckboxCore(LitElement) {
 	static {
-		this.styles = [unsafeCSS(table_default)];
+		this.styles = [unsafeCSS(table_css_raw_default)];
 	}
 	createRenderRoot() {
 		return this;
 	}
 };
 MonoTableCheckbox = __decorate([customElement("mono-table-checkbox")], MonoTableCheckbox);
+
 //#endregion
-export { DEFAULT_ERROR_MESSAGES, MonoTableCheckbox, MonoTableDetail, MonoTableEmpty, MonoTableError, MonoTableInfo, MonoTableLoading, MonoTablePageSize, MonoTablePaging, MonoTablePagingGroup, MonoTableSearch, MonoTableSort, MonoTableSummary, MonoTableTh, buildGroups, collectGroupPaths, monoDataGrid as controlMonoTable, monoDataGrid, describeError, errorStatus, expandWildcard, flattenLeaves, getFieldValue, isGroupNode, isPath, isWildcardPattern, mergePatch, monoArraySource, normalizeError, normalizeSearchExpr, parseFieldPath, plainSearchColumns, resolveErrorMessages, resolveSearchEntries, setErrorMessages, setFieldValue, toODataClause, toODataSelector };
+export { DEFAULT_ERROR_MESSAGES, MonoTableCheckbox, MonoTableDetail, MonoTableEmpty, MonoTableError, MonoTableInfo, MonoTableLoading, MonoTablePageSize, MonoTablePaging, MonoTablePagingGroup, MonoTableSearch, MonoTableSort, MonoTableSummary, MonoTableTh, buildGroups, collectGroupPaths, monoDataGrid as controlMonoTable, monoDataGrid, describeError, errorStatus, expandWildcard, flattenLeaves, getFieldValue, isGroupNode, isPath, isWildcardPattern, mergePatch, monoArraySource, normalizeError, normalizeSearchExpr, parseFieldPath, plainSearchColumns, resolveErrorMessages, resolveSearchEntries, setErrorMessages, setFieldValue, toODataClause, toODataSelector };