@kanunilabs/datagrid-react 1.5.0 → 1.7.0

package/dist/styles.css

@@ -47,6 +47,11 @@
   --dg-primary: #0369a1;             /* sky-700 */
   --dg-primary-soft: #e0f2fe;        /* sky-100 */
   --dg-focus-ring: #0369a1;          /* matches the accent */
+  /* Find without filtering (P-FIND-01): every match tinted, the current one
+     stronger and ringed. Translucent, so selection and zebra show through. */
+  --dg-find-match-bg: color-mix(in srgb, #facc15 24%, transparent);
+  --dg-find-active-bg: color-mix(in srgb, #f59e0b 45%, transparent);
+  --dg-find-active-ring: #b45309;
   /* Cell flash (P1.7). Translucent so the row's own background — striped,
      selected, dirty — stays visible under the pulse rather than being
      replaced by it. */
@@ -93,7 +98,7 @@
   --dg-scrollbar-track: transparent;
 
   /* ── Elevation ──
-     A flat theme sets these to `none`; Material raises them. */
+     A flat theme sets these to `none`; Elevated raises them. */
   --dg-shadow-popup: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
   --dg-shadow-popup-sm: 0 8px 24px rgba(15, 23, 42, 0.16);
   --dg-shadow-menu: 0 12px 28px rgba(15, 23, 42, 0.22);
@@ -114,14 +119,14 @@
   /* ── Line work ─────────────────────────────────────────────
      Whole SHORTHANDS rather than a colour and a width, so a theme can drop a
      line entirely (`none`) instead of only fading it. This is most of what
-     separates the presets: Balham rules every column and every row, Material
-     rules rows only, Quartz keeps the rows faint and skips the columns. */
+     separates the presets: Ledger rules every column and every row, Elevated
+     rules rows only, Minimal keeps the rows faint and skips the columns. */
   --dg-cell-border: 1px solid var(--dg-border);
   --dg-row-border: 1px solid var(--dg-border);
   --dg-header-cell-border: 1px solid var(--dg-border);
   --dg-header-border: 1px solid var(--dg-border-strong);
   /* A band's EDGE is not a column separator, so it gets its own token rather
-     than riding on `--dg-header-cell-border`. Quartz and Material set that one
+     than riding on `--dg-header-cell-border`. Minimal and Elevated set that one
      to `none` on purpose — they rule rows, not columns — and the bands went
      with it: "Where" and "Sales" sat over their columns with nothing marking
      where either one started or stopped. Same argument the band row's
@@ -130,7 +135,7 @@
 
      Mixed from the header TEXT rather than taken from a border token, because
      both border tokens are too faint for a 24px vertical segment: measured on
-     Quartz against the header background, `--dg-border` gives 1.17:1 and
+     Minimal against the header background, `--dg-border` gives 1.17:1 and
      `--dg-border-strong` 1.39:1 — lines that are technically drawn and
      practically invisible, i.e. a fix that changes nothing the user sees. The
      mix lands near 2:1 and follows the theme in both light and dark, since the
@@ -206,6 +211,7 @@
   --dg-primary: #38bdf8;
   --dg-primary-soft: #0c4a6e;
   --dg-focus-ring: #7dd3fc;
+  --dg-find-active-ring: #fbbf24;
   /* Lifted for a dark surface: crimson on near-black reads as brown. */
   --dg-note-marker: #f87171;
   --dg-shadow-pinned: 2px 0 4px -2px rgba(0, 0, 0, 0.55);
@@ -364,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;
@@ -487,7 +528,7 @@
      out at 17.55px, so every wrapped row landed on a fractional boundary and
      its 1px border rendered a pixel thick on some rows and two on others.
      A token now, because a theme moves the body font under it — 18px is right
-     for 13px text and cramped for Material's 14px. */
+     for 13px text and cramped for Elevated's 14px. */
   line-height: var(--dg-wrap-line-height);
 }
 
@@ -1038,6 +1079,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;
@@ -1114,6 +1269,16 @@
   outline-offset: -2px;
 }
 
+/* Find without filtering (P-FIND-01): every match tinted, the current one
+   stronger and outlined so it reads at a glance among the others. */
+.kanuni-datagrid-cell--find-match {
+  background: var(--dg-find-match-bg);
+}
+.kanuni-datagrid-cell--find-active {
+  background: var(--dg-find-active-bg);
+  box-shadow: inset 0 0 0 2px var(--dg-find-active-ring);
+}
+
 .kanuni-datagrid-scroller:focus {
   outline: none;
 }
@@ -1411,7 +1576,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);
@@ -1454,6 +1621,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. */
@@ -1529,6 +1731,14 @@
   overflow-wrap: anywhere;
 }
 
+/* An interactive tooltip (P-TOOL-01) takes the pointer: its text can be
+   selected and a link in it clicked. The grace period in the hook lets the
+   pointer cross the gap from the cell without closing it. */
+.kanuni-datagrid-tooltip--interactive {
+  pointer-events: auto;
+  user-select: text;
+}
+
 .kanuni-datagrid-filter-popup {
   position: fixed;
   z-index: 1000;
@@ -1547,6 +1757,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);
@@ -1947,7 +2164,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
@@ -1959,7 +2179,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);
 }
 
@@ -1975,8 +2196,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;
@@ -2020,7 +2241,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);
@@ -2534,15 +2756,412 @@
   }
 }
 
+/* ══ 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
    ─────────────────────────────────────────────────────────────
    Six presets, each in a light and a dark palette, each at three densities.
    Nothing here is copied from a third-party stylesheet: every rule is a
-   KanuniLabs class overriding a KanuniLabs --dg-* token. The names are the
-   industry's shared vocabulary for a grid's VISUAL DENSITY AND CHROME — the
-   same sense in which a typeface is called "grotesque" — and the palettes,
-   metrics and line work below are our own.
+   KanuniLabs class overriding a KanuniLabs --dg-* token, and the names say
+   what each theme does (minimal, ledger, elevated, framed). Until 2026-10-11
+   four of them carried names another grid vendor also uses for its themes;
+   they were renamed so nothing public reads as borrowed.
 
    ── How a theme is expressed ───────────────────────────────
    A theme is a token override and (almost) nothing else. That is the whole
@@ -2565,15 +3184,15 @@
    ───────────────────────────────────────────────────────────── */
 
 /* ═══════════════════════════════════════════════════════════
-   QUARTZ — modern, minimal chrome
+   MINIMAL — modern, minimal chrome
    ═══════════════════════════════════════════════════════════
    The least furniture that still reads as a table: no column separators at
    all, hairline row rules, and a header that is the same white as the body,
    separated only by one firm line. Generous radii. For product UIs where the
    grid sits among cards rather than inside a terminal. */
-.kanuni-datagrid-root.kanuni-datagrid-theme-quartz,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz {
+.kanuni-datagrid-root.kanuni-datagrid-theme-minimal,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-minimal,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-minimal {
   --dg-bg: #ffffff;
   --dg-surface: #ffffff;
   --dg-surface-header: #ffffff;
@@ -2618,9 +3237,9 @@
   --dg-chrome-padding-y: 8px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-quartz.kanuni-datagrid-dark,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz.kanuni-datagrid-dark,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz.kanuni-datagrid-dark {
+.kanuni-datagrid-root.kanuni-datagrid-theme-minimal.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-minimal.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-minimal.kanuni-datagrid-dark {
   --dg-bg: #0d1117;
   --dg-surface: #0d1117;
   --dg-surface-header: #0d1117;
@@ -2641,14 +3260,14 @@
 }
 
 /* ═══════════════════════════════════════════════════════════
-   BALHAM — dense, ruled, financial
+   LEDGER — dense, ruled, financial
    ═══════════════════════════════════════════════════════════
    Every column and every row is ruled, the type is small, the padding is
    tight and the corners are nearly square. Built for the case where the grid
    IS the application and the user is counting rows on screen. */
-.kanuni-datagrid-root.kanuni-datagrid-theme-balham,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-balham {
+.kanuni-datagrid-root.kanuni-datagrid-theme-ledger,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-ledger,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-ledger {
   --dg-bg: #ffffff;
   --dg-surface: #ffffff;
   --dg-surface-header: #f2f4f6;
@@ -2703,9 +3322,9 @@
   --dg-chrome-padding-y: 4px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-balham.kanuni-datagrid-dark,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham.kanuni-datagrid-dark,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-balham.kanuni-datagrid-dark {
+.kanuni-datagrid-root.kanuni-datagrid-theme-ledger.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-ledger.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-ledger.kanuni-datagrid-dark {
   --dg-bg: #1a2029;
   --dg-surface: #1a2029;
   --dg-surface-header: #232b36;
@@ -2726,14 +3345,14 @@
 }
 
 /* ═══════════════════════════════════════════════════════════
-   MATERIAL — tall, quiet lines, real elevation
+   ELEVATED — tall, quiet lines, real elevation
    ═══════════════════════════════════════════════════════════
    Rows only, no column rules; larger rhythm; a header set in medium weight
    with open tracking rather than bold; pill-shaped controls; and shadows that
    actually lift. The one preset whose type scale grows rather than shrinks. */
-.kanuni-datagrid-root.kanuni-datagrid-theme-material,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-material {
+.kanuni-datagrid-root.kanuni-datagrid-theme-elevated,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-elevated,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-elevated {
   --dg-bg: #ffffff;
   --dg-surface: #ffffff;
   --dg-surface-header: #ffffff;
@@ -2785,9 +3404,9 @@
   --dg-chrome-padding-y: 10px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-material.kanuni-datagrid-dark,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material.kanuni-datagrid-dark,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-material.kanuni-datagrid-dark {
+.kanuni-datagrid-root.kanuni-datagrid-theme-elevated.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-elevated.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-elevated.kanuni-datagrid-dark {
   --dg-bg: #141218;
   --dg-surface: #141218;
   --dg-surface-header: #141218;
@@ -2809,14 +3428,14 @@
 }
 
 /* ═══════════════════════════════════════════════════════════
-   ALPINE — airy, fully framed, high-chroma accent
+   FRAMED — airy, fully framed, high-chroma accent
    ═══════════════════════════════════════════════════════════
    The middle position: both sets of rules are drawn but kept light, the rhythm
    is roomy, and the header is anchored by a doubled rule and a heavy weight so
    it reads as a distinct band even though it shares the body's palette. */
-.kanuni-datagrid-root.kanuni-datagrid-theme-alpine,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine {
+.kanuni-datagrid-root.kanuni-datagrid-theme-framed,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-framed,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-framed {
   --dg-bg: #ffffff;
   --dg-surface: #ffffff;
   --dg-surface-header: #f8f9fa;
@@ -2863,9 +3482,9 @@
   --dg-chrome-padding-y: 7px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-alpine.kanuni-datagrid-dark,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine.kanuni-datagrid-dark,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine.kanuni-datagrid-dark {
+.kanuni-datagrid-root.kanuni-datagrid-theme-framed.kanuni-datagrid-dark,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-framed.kanuni-datagrid-dark,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-framed.kanuni-datagrid-dark {
   --dg-bg: #181d1f;
   --dg-surface: #181d1f;
   --dg-surface-header: #222628;
@@ -3033,7 +3652,7 @@
    together — row, header, cell padding, control height, toolbar and pager
    padding, filter field — so the proportions hold and the grid stays usable
    rather than merely smaller. Each theme scales from its OWN normal, because a
-   Material row starts at 40px and a Balham row at 25px; one shared compact
+   Elevated row starts at 40px and a Ledger row at 25px; one shared compact
    value would have flattened the presets into each other at that density.
 
    The ROW HEIGHT is deliberately absent here: it is a core value the
@@ -3046,10 +3665,10 @@
    base sheet's presets are root-only, which left popup controls at their
    normal size whatever the grid was set to. */
 
-/* ── Quartz ── */
-.kanuni-datagrid-root.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-compact,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-compact,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-compact {
+/* ── Minimal ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-minimal.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-minimal.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-minimal.kanuni-datagrid-density-compact {
   --dg-header-height: 30px;
   --dg-cell-padding-x: 8px;
   --dg-font-size: 12px;
@@ -3062,9 +3681,9 @@
   --dg-chrome-padding-y: 4px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-quartz.kanuni-datagrid-density-comfortable {
+.kanuni-datagrid-root.kanuni-datagrid-theme-minimal.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-minimal.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-minimal.kanuni-datagrid-density-comfortable {
   --dg-header-height: 48px;
   --dg-cell-padding-x: 16px;
   --dg-font-size: 14px;
@@ -3077,10 +3696,10 @@
   --dg-chrome-padding-y: 10px;
 }
 
-/* ── Balham ── */
-.kanuni-datagrid-root.kanuni-datagrid-theme-balham.kanuni-datagrid-density-compact,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham.kanuni-datagrid-density-compact,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-balham.kanuni-datagrid-density-compact {
+/* ── Ledger ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-ledger.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-ledger.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-ledger.kanuni-datagrid-density-compact {
   --dg-header-height: 22px;
   --dg-cell-padding-x: 4px;
   --dg-font-size: 11px;
@@ -3093,9 +3712,9 @@
   --dg-chrome-padding-y: 2px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-balham.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-balham.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-balham.kanuni-datagrid-density-comfortable {
+.kanuni-datagrid-root.kanuni-datagrid-theme-ledger.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-ledger.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-ledger.kanuni-datagrid-density-comfortable {
   --dg-header-height: 36px;
   --dg-cell-padding-x: 10px;
   --dg-font-size: 13px;
@@ -3108,10 +3727,10 @@
   --dg-chrome-padding-y: 6px;
 }
 
-/* ── Material ── */
-.kanuni-datagrid-root.kanuni-datagrid-theme-material.kanuni-datagrid-density-compact,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material.kanuni-datagrid-density-compact,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-material.kanuni-datagrid-density-compact {
+/* ── Elevated ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-elevated.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-elevated.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-elevated.kanuni-datagrid-density-compact {
   --dg-header-height: 36px;
   --dg-cell-padding-x: 12px;
   --dg-font-size: 13px;
@@ -3124,9 +3743,9 @@
   --dg-chrome-padding-y: 6px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-material.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-material.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-material.kanuni-datagrid-density-comfortable {
+.kanuni-datagrid-root.kanuni-datagrid-theme-elevated.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-elevated.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-elevated.kanuni-datagrid-density-comfortable {
   --dg-header-height: 56px;
   --dg-cell-padding-x: 20px;
   --dg-font-size: 15px;
@@ -3139,10 +3758,10 @@
   --dg-chrome-padding-y: 12px;
 }
 
-/* ── Alpine ── */
-.kanuni-datagrid-root.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-compact,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-compact,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-compact {
+/* ── Framed ── */
+.kanuni-datagrid-root.kanuni-datagrid-theme-framed.kanuni-datagrid-density-compact,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-framed.kanuni-datagrid-density-compact,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-framed.kanuni-datagrid-density-compact {
   --dg-header-height: 28px;
   --dg-cell-padding-x: 8px;
   --dg-font-size: 12px;
@@ -3155,9 +3774,9 @@
   --dg-chrome-padding-y: 4px;
 }
 
-.kanuni-datagrid-root.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-enterprise.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-comfortable,
-.kanuni-datagrid-detached.kanuni-datagrid-theme-alpine.kanuni-datagrid-density-comfortable {
+.kanuni-datagrid-root.kanuni-datagrid-theme-framed.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-enterprise.kanuni-datagrid-theme-framed.kanuni-datagrid-density-comfortable,
+.kanuni-datagrid-detached.kanuni-datagrid-theme-framed.kanuni-datagrid-density-comfortable {
   --dg-header-height: 46px;
   --dg-cell-padding-x: 16px;
   --dg-font-size: 14px;
@@ -3263,17 +3882,17 @@
    the edge element (there is exactly one per side, not one per cell) restores
    it without bringing the column rules back.
 
-   Every ruled preset — Balham, Alpine — needs nothing here: the seam is
+   Every ruled preset — Ledger, Framed — needs nothing here: the seam is
    already drawn by the cell borders they keep. */
-.kanuni-datagrid-theme-quartz .kanuni-datagrid-pin-edge-left,
-.kanuni-datagrid-theme-material .kanuni-datagrid-pin-edge-left,
+.kanuni-datagrid-theme-minimal .kanuni-datagrid-pin-edge-left,
+.kanuni-datagrid-theme-elevated .kanuni-datagrid-pin-edge-left,
 .kanuni-datagrid-theme-kanuni .kanuni-datagrid-pin-edge-left,
 .kanuni-datagrid-theme-kanuni-midnight .kanuni-datagrid-pin-edge-left {
   border-inline-end: 1px solid var(--dg-border-strong);
 }
 
-.kanuni-datagrid-theme-quartz .kanuni-datagrid-pin-edge-right,
-.kanuni-datagrid-theme-material .kanuni-datagrid-pin-edge-right,
+.kanuni-datagrid-theme-minimal .kanuni-datagrid-pin-edge-right,
+.kanuni-datagrid-theme-elevated .kanuni-datagrid-pin-edge-right,
 .kanuni-datagrid-theme-kanuni .kanuni-datagrid-pin-edge-right,
 .kanuni-datagrid-theme-kanuni-midnight .kanuni-datagrid-pin-edge-right {
   border-inline-start: 1px solid var(--dg-border-strong);
@@ -3285,8 +3904,8 @@
    A palette is a SECOND, independent axis: it changes the colours and nothing
    else. The theme keeps deciding the structure — where the rules are drawn, how
    tall a row is, how round a control is, how much the popups lift — so
-   `theme="balham" palette="nord"` is Balham's dense ruled grid in Nord's arctic
-   blues, and `theme="material" palette="nord"` is Material's tall airy one in
+   `theme="ledger" palette="nord"` is Ledger's dense ruled grid in Nord's arctic
+   blues, and `theme="elevated" palette="nord"` is Elevated's tall airy one in
    the same blues. Four themes and six palettes is twenty-four looks out of ten
    class names, not twenty-four stylesheets.