@kanunilabs/datagrid-react 1.6.0 → 1.8.0

package/dist/styles.css

@@ -370,6 +370,41 @@
   white-space: nowrap;
 }
 
+/* ── Header text wrapping (wrapHeaderText / autoHeaderHeight) ──
+   A wrapping caption breaks onto more lines instead of ending in an ellipsis.
+   Without `autoHeaderHeight` the header keeps its fixed height and the cell
+   clips what does not fit — the same box every other header has. */
+.kanuni-datagrid-header-cell--wrap {
+  white-space: normal;
+}
+
+.kanuni-datagrid-header-cell--wrap .kanuni-datagrid-header-label {
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-overflow: clip;
+}
+
+/* `autoHeaderHeight`: the header row grows to its tallest cell. `min-height`
+   keeps a header with nothing to wrap exactly the height it was. The cells
+   drop `height: 100%`, which cannot resolve against an `auto` parent, and
+   stretch to the row instead — so a short caption beside a tall one still
+   fills the full height, with its border and hover reaching the bottom.
+   The rows below that are sticky under the header read the measured height
+   from `--dg-header-actual` (written by the renderer, only in this mode). */
+.kanuni-datagrid-root[data-auto-header-height] .kanuni-datagrid-header {
+  height: auto;
+  min-height: var(--dg-header-height);
+}
+
+.kanuni-datagrid-root[data-auto-header-height] .kanuni-datagrid-header-cell {
+  height: auto;
+  align-self: stretch;
+}
+
+.kanuni-datagrid-root[data-auto-header-height] .kanuni-datagrid-header-cell--wrap {
+  padding-block: 4px;
+}
+
 .kanuni-datagrid-sort-indicator {
   flex: none;
   font-size: 10px;
@@ -595,7 +630,11 @@
   border-color: var(--dg-primary);
 }
 
+/* Commands: an icon and a label side by side (toolbarIcons.ts). */
 .kanuni-datagrid-toolbar > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   padding: 3px 10px;
   border: 1px solid var(--dg-border-strong);
   border-radius: var(--dg-radius-control);
@@ -606,6 +645,10 @@
   cursor: pointer;
 }
 
+.kanuni-datagrid-icon {
+  flex: none;
+}
+
 .kanuni-datagrid-toolbar > button:hover:not(:disabled) {
   background: var(--dg-surface-hover);
 }
@@ -1003,9 +1046,8 @@
   color: var(--dg-text);
 }
 
-/* The panel is sized in whole rows by the component (span x rowHeight); this
-   rule only styles it. Overriding the height here would desync it from the
-   filler slots the virtualizer reserved. */
+/* The panel's height is the component's (the height index reserves it);
+   overriding it here would desync the rows below from their offsets. */
 .kanuni-datagrid-detail-row {
   background: var(--dg-surface);
   border-bottom: 1px solid var(--dg-border);
@@ -1015,7 +1057,9 @@
   position: sticky;
   inset-inline-start: 0;
   box-sizing: border-box;
-  width: 100%;
+  /* The VIEWPORT's width, like the edit form below: the row is as wide as
+     every column, and at 100% a panel under a wide grid ran off screen. */
+  width: var(--dg-viewport-width, 100%);
   height: 100%;
   padding: 8px 12px;
   overflow: auto;
@@ -1044,6 +1088,120 @@
   border-inline-start: 3px solid var(--dg-primary);
 }
 
+/* ── Card view (narrow grids, `cardView`) ─────────────────── */
+/* The heights here are the ones the virtualizer places the cards by
+   (datagrid-core presentation/cardView.ts: CARD_PADDING 21 = 10 + 10 + the
+   1px rule, CARD_TITLE_HEIGHT 22, CARD_LINE_HEIGHT 20). Change them together.
+   The card is sticky to the scroller's start and as wide as the VIEWPORT, the
+   in-grid edit form's pattern above: the row under it is as wide as every
+   column, which is exactly the sideways scroll the cards are there to end. */
+.kanuni-datagrid-cards .kanuni-datagrid-header,
+.kanuni-datagrid-cards .kanuni-datagrid-band-row,
+.kanuni-datagrid-cards .kanuni-datagrid-filter-row {
+  display: none;
+}
+
+.kanuni-datagrid-cards .kanuni-datagrid-scroller {
+  overflow-x: hidden;
+}
+
+.kanuni-datagrid-card {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  width: var(--dg-viewport-width, 100%);
+  height: 100%;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--dg-border);
+  overflow: hidden;
+  color: var(--dg-text);
+  font-size: 13px;
+}
+
+.kanuni-datagrid-card-title {
+  height: 22px;
+  line-height: 22px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kanuni-datagrid-card-fields {
+  margin: 0;
+}
+
+.kanuni-datagrid-card-field {
+  display: flex;
+  gap: 12px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.kanuni-datagrid-card-field dt,
+.kanuni-datagrid-card-field dd {
+  margin: 0;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kanuni-datagrid-card-field dt {
+  flex: 0 0 38%;
+  color: var(--dg-text-muted);
+}
+
+.kanuni-datagrid-card-field dd {
+  flex: 1 1 auto;
+}
+
+.kanuni-datagrid-cardbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--dg-border);
+  background: var(--dg-surface-header);
+  color: var(--dg-text);
+  font-size: 13px;
+}
+
+.kanuni-datagrid-cardbar-label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.kanuni-datagrid-cardbar-select,
+.kanuni-datagrid-cardbar-dir {
+  min-height: 32px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control, 4px);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+}
+
+.kanuni-datagrid-cardbar-select {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 6px;
+}
+
+.kanuni-datagrid-cardbar-dir {
+  width: 32px;
+  cursor: pointer;
+}
+
+.kanuni-datagrid-cardbar-select:focus-visible,
+.kanuni-datagrid-cardbar-dir:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: 1px;
+}
+
 /* ── Summary bar ──────────────────────────────────────────── */
 .kanuni-datagrid-summary-bar {
   display: flex;
@@ -1427,7 +1585,9 @@
      variable here so density keeps working. Sticking at the header height alone
      parked this row inside the header on any banded grid, and the two drew over
      each other as soon as the user scrolled. */
-  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height));
+  /* `--dg-header-actual` is the header's measured height under
+     `autoHeaderHeight`; unset otherwise, when the header is the token height. */
+  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-actual, var(--dg-header-height)));
   z-index: 3;
   display: flex;
   height: var(--dg-header-height);
@@ -1470,6 +1630,41 @@
   border-color: var(--dg-primary);
 }
 
+.kanuni-datagrid-filter-input:disabled {
+  opacity: 0.5;
+}
+
+/* A column with `filterOperators`: the operator menu before the box. Capped
+   so a long label cannot squeeze the box out of a narrow column. */
+.kanuni-datagrid-filter-operator {
+  flex: 0 1 auto;
+  max-width: 45%;
+  min-width: 0;
+  height: var(--dg-filter-input-height);
+  margin-inline-end: 2px;
+  padding: 0 2px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-control-font-size);
+}
+
+.kanuni-datagrid-filter-operator:focus {
+  outline: none;
+  border-color: var(--dg-primary);
+}
+
+/* A column's own filter UI (`renderFilter`) in the filter row. */
+.kanuni-datagrid-filter-custom {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+}
+
 /* ── Header filter popup (portaled — see GridPortal) ──────── */
 .kanuni-datagrid-portal {
   /* The portal host must not paint or capture anything itself. */
@@ -1509,6 +1704,17 @@
 }
 
 /* ── Search highlight (P2.4) ──────────────────────────────── */
+/* A highlighted cell's text and marks sit in ONE span: side by side in the
+   flex cell, each part was a flex item and lost the spaces at its edges. The
+   span carries the cell's single-line ellipsis itself, since a flex item does
+   not inherit it. */
+.kanuni-datagrid-cell-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: inherit;
+}
+
 /* A <mark>, so the match is in the accessibility tree as emphasis rather than
    as a colour only. The browser default is a hard yellow that fights every
    theme; these follow the accent instead. */
@@ -1571,6 +1777,13 @@
   font-size: var(--dg-font-size);
 }
 
+/* The app's own content (`renderFilter`): it decides its size, not the list. */
+.kanuni-datagrid-filter-popup--custom {
+  width: auto;
+  min-width: 200px;
+  max-height: none;
+}
+
 .kanuni-datagrid-filter-search {
   width: 100%;
   height: var(--dg-control-height);
@@ -1958,6 +2171,14 @@
   padding: 4px;
 }
 
+/* The chooser says what it is: an untitled box of checkboxes read as nothing
+   having opened (2026-10-14). */
+.kanuni-datagrid-chooser-title {
+  padding: 2px 4px 0;
+  font-weight: 600;
+  color: var(--dg-text);
+}
+
 .kanuni-datagrid-chooser-empty {
   padding: 8px 4px;
   color: var(--dg-text-muted);
@@ -1971,7 +2192,10 @@
 /* Sticky in the same stack as the header and the footer. `--dg-pinned-gap`
    counts the header-height rows between this block and its edge (header +
    filter row above, footer below), so the offset follows the THEME's header
-   height instead of a number measured in JS at the previous theme's size. */
+   height instead of a number measured in JS at the previous theme's size.
+   The one exception is the header itself under `autoHeaderHeight`: its
+   height is the tallest wrapped caption, which only layout knows, so it
+   counts as `--dg-header-actual` and the other rows of the stack as tokens. */
 .kanuni-datagrid-pinned-rows {
   position: sticky;
   /* Above the data rows, below the header — a pinned row must not cover the
@@ -1983,7 +2207,8 @@
 }
 
 .kanuni-datagrid-pinned-rows--top {
-  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1));
+  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * (var(--dg-pinned-gap, 1) - 1) +
+    var(--dg-header-actual, var(--dg-header-height)));
   border-bottom: var(--dg-header-border);
 }
 
@@ -1999,8 +2224,8 @@
 .kanuni-datagrid-sticky-groups {
   position: sticky;
   top: calc(
-    var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1) +
-      var(--dg-sticky-below, 0px)
+    var(--dg-band-offset, 0px) + var(--dg-header-height) * (var(--dg-pinned-gap, 1) - 1) +
+      var(--dg-header-actual, var(--dg-header-height)) + var(--dg-sticky-below, 0px)
   );
   z-index: 2;
   height: 0;
@@ -2044,7 +2269,8 @@
 /* Totals at the TOP (P2.8) — same row, other edge. The border swaps sides so
    the rule always separates the totals from the DATA, not from the header. */
 .kanuni-datagrid-footer-row--top {
-  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * var(--dg-pinned-gap, 1));
+  top: calc(var(--dg-band-offset, 0px) + var(--dg-header-height) * (var(--dg-pinned-gap, 1) - 1) +
+    var(--dg-header-actual, var(--dg-header-height)));
   bottom: auto;
   border-top: none;
   border-bottom: var(--dg-header-border);
@@ -2558,6 +2784,403 @@
   }
 }
 
+/* ══ Editing (moved from the Enterprise stylesheet, 2026-10-12) ═══════════
+   Single-cell editing is Community now, in both renderers, so the editor,
+   the date and lookup editors and the confirm/error dialog are styled here;
+   the Enterprise stylesheet keeps only what its own modes add. */
+
+/* ── In-cell editor ───────────────────────────────────────── */
+/* One line, not two boxes.
+   The editor used to draw a 2px rounded border INSIDE a cell that already had
+   a 2px focus outline — two concentric blue rectangles a couple of pixels
+   apart, which is the busiest possible way to say "you are typing here". A
+   single underline on the cell being edited says the same thing (the
+   DevExtreme convention), and the outline is dropped for that one cell below. */
+.kanuni-datagrid-root .kanuni-datagrid-editor {
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--dg-row-height) - 2px);
+  padding: 0 4px;
+  border: none;
+  border-bottom: 2px solid var(--dg-primary);
+  border-radius: 0;
+  background: transparent;
+  color: var(--dg-text);
+  font: inherit;
+  font-size: var(--dg-font-size);
+  margin: 0;
+}
+
+/* Edge to edge of the CELL, not of its padding box.
+   `width: 100%` resolves against the content box — the cell minus 2 ×
+   --dg-cell-padding-x — and a negative margin only shifts a box, it does not
+   widen it. The two together left the editor starting early and stopping short
+   of the right edge, read as the field sliding out of its column and most
+   visible on a pinned one, where the neighbouring cell does not move with it.
+
+   Applied to whatever is the cell's DIRECT CHILD, because that is the element
+   whose `100%` means "the cell". Naming the input alone was wrong the moment an
+   editor grew a wrapper — the date editor's box sat 8px inside its cell on the
+   left and 9px on the right, while every plain editor beside it went edge to
+   edge. Same reason the form's wrappers are excluded: they are not in a cell,
+   and pulling them out by a cell's padding would misalign the form instead. */
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-editor,
+.kanuni-datagrid-root .kanuni-datagrid-cell > .kanuni-datagrid-date-editor {
+  width: calc(100% + var(--dg-cell-padding-x) * 2);
+  margin: 0 calc(var(--dg-cell-padding-x) * -1);
+}
+
+/* In a WRAPPED cell the editor takes the LINE BOX, not the row height.
+   A wrapping cell is as tall as its own text: one line of it is
+   `padding-block x2 + --dg-wrap-line-height`, which is shorter than a standard
+   row. Giving the editor the row height there made the cell taller than the
+   text it replaced, so the row grew the moment an editor opened and every row
+   below it hopped down — most obvious on a theme with tall rows, but the
+   default did it too.
+
+   Matching the line box means the box the user types into occupies exactly the
+   space the text did, and the row does not move at all. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--wrap > .kanuni-datagrid-editor,
+.kanuni-datagrid-root .kanuni-datagrid-cell--wrap > .kanuni-datagrid-date-editor {
+  height: var(--dg-wrap-line-height);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-editor:focus {
+  outline: none;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-editor--invalid {
+  border-bottom-color: var(--dg-danger);
+}
+
+/* The cell holding an editor gives up its focus ring — the underline is the
+   marker now, and the ring is the other half of the double rectangle.
+   It also goes to the plain surface colour: the row underneath may be striped,
+   selected, focused or in-range, and a blue underline drawn over a blue-tinted
+   cell is the one thing it must not compete with. Listed after the row-state
+   rules and with two classes, so it outranks all of them. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--editing,
+.kanuni-datagrid-root .kanuni-datagrid-cell--editing.kanuni-datagrid-cell--focused,
+.kanuni-datagrid-root .kanuni-datagrid-cell--editing.kanuni-datagrid-cell--in-range,
+.kanuni-datagrid-root .kanuni-datagrid-cell--editing.kanuni-datagrid-cell--pinned {
+  outline: none;
+  background: var(--dg-surface);
+}
+
+.kanuni-datagrid-root input.kanuni-datagrid-editor[type='checkbox'] {
+  width: auto;
+  height: auto;
+  margin: 0;
+  border: none;
+  accent-color: var(--dg-primary);
+}
+
+/* Validation message floats out of the cell so it is not clipped by overflow.
+   That only works if the editing cell LETS it out and its row sits above the
+   next one: cells are `overflow: hidden` and every row paints over the one
+   before it, so until 2026-10-01 the message rendered into the DOM, positioned
+   correctly, and was never seen — the user got a red underline and no reason
+   (found shooting the order-editing demo; measured in Chrome, the message box
+   at the right place and fully covered). With these two rules it shows;
+   whether either alone would do was not measured. */
+.kanuni-datagrid-root .kanuni-datagrid-cell--editing {
+  overflow: visible;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row:has(.kanuni-datagrid-cell--editing) {
+  position: relative;
+  z-index: 4;
+  overflow: visible;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-editor-error {
+  position: absolute;
+  z-index: 6;
+  transform: translateY(calc(var(--dg-row-height) - 2px));
+  max-width: 240px;
+  padding: 2px 6px;
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-danger);
+  color: var(--dg-on-danger);
+  font-size: 11px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* ── Lookup combo box ─────────────────────────────────────── */
+/* Rendered in a portal on <body>, so it is NOT under .kanuni-datagrid-root and
+   cannot inherit the theme tokens through the cascade. It reads them from
+   :root, which is where the light/dark blocks define them. */
+/* ── Date editor ──────────────────────────────────────────── */
+/* The box and its calendar button share the cell: the input takes the space
+   that is left, so the button never overlaps the text however narrow the
+   column is. */
+.kanuni-datagrid-date-editor {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Inside a box that already owns the cell — compensating twice would push the
+   field back out by another padding on each side. */
+.kanuni-datagrid-date-editor > .kanuni-datagrid-editor {
+  width: auto;
+  margin: 0;
+}
+
+.kanuni-datagrid-date-editor > .kanuni-datagrid-editor {
+  flex: 1;
+  min-width: 0;
+}
+
+.kanuni-datagrid-date-button {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--dg-text-muted, #64748b);
+  cursor: pointer;
+}
+
+.kanuni-datagrid-date-button:hover:not(:disabled) {
+  background: var(--dg-surface-hover, #f1f5f9);
+  color: var(--dg-primary, #2563eb);
+}
+
+.kanuni-datagrid-date-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.kanuni-datagrid-date-popup {
+  position: fixed;
+  z-index: 1200;
+  padding: 8px;
+  border: 1px solid var(--dg-border-strong, #cbd5e1);
+  border-radius: var(--dg-radius);
+  background: var(--dg-surface, #fff);
+  box-shadow: var(--dg-shadow-popup-sm);
+  color: var(--dg-text, #0f172a);
+  font-size: var(--dg-font-size);
+}
+
+.kanuni-datagrid-date-popup-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-weight: 600;
+}
+
+.kanuni-datagrid-date-popup-head button {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: var(--dg-radius-control);
+  background: transparent;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.kanuni-datagrid-date-popup-head button:hover {
+  background: var(--dg-surface-hover, #f1f5f9);
+}
+
+/* Seven fixed columns: a calendar that reflows is not a calendar. */
+.kanuni-datagrid-date-popup-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 28px);
+  gap: 1px;
+}
+
+.kanuni-datagrid-date-weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  color: var(--dg-text-muted, #64748b);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.kanuni-datagrid-date-day {
+  height: 26px;
+  border: 0;
+  border-radius: var(--dg-radius-control);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.kanuni-datagrid-date-day:hover {
+  background: var(--dg-surface-hover, #f1f5f9);
+}
+
+/* Days spilling in from the neighbouring months stay clickable — paging to
+   pick the 1st of next month is a step nobody should have to take — but they
+   read as context rather than as part of this month. */
+.kanuni-datagrid-date-day--outside {
+  opacity: 0.4;
+}
+
+.kanuni-datagrid-date-day--selected {
+  background: var(--dg-primary);
+  color: var(--dg-on-primary);
+  font-weight: 600;
+}
+
+.kanuni-datagrid-lookup-popup {
+  position: fixed;
+  z-index: 1200;
+  overflow-y: auto;
+  border: 1px solid var(--dg-border-strong, #cbd5e1);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface, #fff);
+  box-shadow: var(--dg-shadow-popup-sm);
+  color: var(--dg-text, #0f172a);
+  font-size: var(--dg-font-size);
+}
+
+.kanuni-datagrid-lookup-item {
+  padding: 4px 8px;
+  line-height: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.kanuni-datagrid-lookup-item--active {
+  background: var(--dg-primary);
+  color: var(--dg-on-primary);
+}
+
+.kanuni-datagrid-lookup-empty {
+  padding: 4px 8px;
+  color: var(--dg-text-muted, #64748b);
+  font-style: italic;
+}
+
+/* ── Confirmation / error dialog ──────────────────────────── */
+.kanuni-datagrid-dialog-root {
+  position: fixed;
+  inset: 0;
+  z-index: 1400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.kanuni-datagrid-dialog-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--dg-overlay);
+}
+
+.kanuni-datagrid-dialog {
+  position: relative;
+  width: min(420px, 92vw);
+  padding: 18px 20px 14px;
+  border: 1px solid var(--dg-border-strong, #cbd5e1);
+  border-radius: calc(var(--dg-radius) + 2px);
+  background: var(--dg-surface, #fff);
+  color: var(--dg-text, #0f172a);
+  box-shadow: var(--dg-shadow-dialog);
+  font-size: var(--dg-font-size);
+}
+
+.kanuni-datagrid-dialog-title {
+  margin-bottom: 8px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.kanuni-datagrid-dialog-message {
+  margin-bottom: 18px;
+  line-height: 1.5;
+  color: var(--dg-text, #0f172a);
+}
+
+.kanuni-datagrid-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.kanuni-datagrid-dialog-actions button {
+  padding: 5px 14px;
+  border: 1px solid var(--dg-border-strong, #cbd5e1);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface, #fff);
+  color: inherit;
+  font: inherit;
+  font-size: var(--dg-font-size);
+  cursor: pointer;
+}
+
+/* SCOPED TO THE ACTIONS ROW ON PURPOSE, and this is a fix rather than a style.
+   `.kanuni-datagrid-dialog-actions button` above is (0,1,1) — a class and a
+   type — while a bare `.kanuni-datagrid-dialog-primary` is (0,1,0). Specificity
+   beats source order, so the generic rule won and the confirm button had never
+   actually been painted in the accent: it rendered as a plain white button, and
+   the only reason nobody read it as broken is that its label inherited the
+   dialog's text colour instead of the white it was assigned. The sibling
+   primaries elsewhere in this sheet (filter builder, form save) sidestep the
+   same collision with `!important`; matching the selector shape is the same
+   result without the escape hatch. */
+.kanuni-datagrid-dialog-actions button.kanuni-datagrid-dialog-primary {
+  border-color: var(--dg-primary);
+  background: var(--dg-primary);
+  color: var(--dg-on-primary);
+}
+
+/* Composed WITH `--primary`, so it has to restate the foreground: the primary
+   rule painted it `--dg-on-primary`, which is the right colour for the accent
+   and the wrong one for a red fill (near-black on red in the gold themes). */
+.kanuni-datagrid-dialog-actions button.kanuni-datagrid-dialog-primary--danger {
+  border-color: var(--dg-danger);
+  background: var(--dg-danger);
+  color: var(--dg-on-danger);
+}
+
+/* ── Forced colours (Windows high contrast) ─────────────────────
+   The browser replaces our colours with the user's system palette and drops
+   box-shadows and background images, so anything drawn only by a fill or a
+   shadow disappears — the focused cell, a selected row, the editor's
+   underline. Restated with system colours, which survive (accessibility
+   audit, 2026-10-12: there was no forced-colors rule anywhere). */
+@media (forced-colors: active) {
+  .kanuni-datagrid-root .kanuni-datagrid-cell--focused,
+  .kanuni-datagrid-root .kanuni-datagrid-group-row--focused {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  .kanuni-datagrid-root .kanuni-datagrid-row--selected,
+  .kanuni-datagrid-root .kanuni-datagrid-row--selected .kanuni-datagrid-cell {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+  .kanuni-datagrid-root .kanuni-datagrid-editor {
+    border: 1px solid CanvasText;
+  }
+  .kanuni-datagrid-root :focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
 /* ─────────────────────────────────────────────────────────────
    KANUNILABS DataGrid — packaged themes
    ─────────────────────────────────────────────────────────────