@kanunilabs/datagrid-react 1.5.0 → 1.6.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);
@@ -487,7 +493,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);
 }
 
@@ -1114,6 +1120,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;
 }
@@ -1529,6 +1545,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;
@@ -2539,10 +2563,10 @@
    ─────────────────────────────────────────────────────────────
    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 +2589,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 +2642,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 +2665,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 +2727,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 +2750,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 +2809,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 +2833,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 +2887,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 +3057,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 +3070,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 +3086,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 +3101,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 +3117,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 +3132,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 +3148,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 +3163,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 +3179,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 +3287,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 +3309,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.