@kanunilabs/datagrid 1.9.1 → 1.9.2

package/dist/styles.css

@@ -84,6 +84,9 @@
   --dg-danger: #dc2626;              /* red-600 — borders, solid fills */
   --dg-danger-text: #b91c1c;         /* red-700 — text on a light surface */
   --dg-on-danger: #ffffff;           /* text ON a solid --dg-danger fill */
+  --dg-success: #15803d;             /* green-700 — fills ("saved" marks) */
+  --dg-success-text: #166534;        /* success as text on a light surface */
+  --dg-on-success: #ffffff;          /* text ON a solid --dg-success fill */
   --dg-warning: #b45309;             /* amber-700 */
   --dg-selected-bg: var(--dg-primary-soft);
   /* Search highlight (P2.4). Amber rather than the accent: the accent already
@@ -171,10 +174,20 @@
   color: var(--dg-text);
 }
 
+/* Typeface. Inherited from the page unless --dg-font-family names one — set
+   it once (on :root, or in a palette class) and the grid, the Enterprise
+   chrome around it and every popup portalled to <body> use it. Without the
+   variable, a font set only on the grid's container never reached the menus
+   and dialogs, which inherit from <body> (2026-10-16, customer request). */
+.kanuni-datagrid-enterprise,
+.kanuni-datagrid-detached {
+  font-family: var(--dg-font-family, inherit);
+}
+
 /* The grid's own box. */
 .kanuni-datagrid-root {
   box-sizing: border-box;
-  font-family: inherit;
+  font-family: var(--dg-font-family, inherit);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
@@ -229,6 +242,9 @@
   /* The dark danger is a LIGHT red, so what sits on it has to be dark. White
      on #f87171 measures 2.4:1 — the delete button's own label. */
   --dg-on-danger: #450a0a;
+  --dg-success: #4ade80;
+  --dg-success-text: #86efac;
+  --dg-on-success: #0d2817;
   --dg-warning: #fbbf24;
   --dg-overlay: rgba(2, 6, 23, 0.7);
   --dg-scrollbar-thumb: #475569;
@@ -3454,6 +3470,218 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   pointer-events: none;
 }
 
+/* ─────────────────────────────────────────────────────────────
+   Row save status (`rowStatus`, Community, 2026-10-16).
+   ─────────────────────────────────────────────────────────────
+   A customer whose grid saves every edit at once asked to see each row's
+   save: unsaved, in flight, saved, refused. Both renderers put
+   `data-row-status` and `kanuni-datagrid-row--status-<status>` on the ROW
+   element — one element per row, pinned cells included — so the marker is
+   drawn once per row and cannot repeat per pinned block.
+
+   The marker is the row's own `::before`: a sticky flex item at the inline
+   start that gives its width back with a negative margin. Sticky, because
+   the row is as wide as all its columns and scrolls sideways — a plain left
+   border or inset shadow on the row would scroll out of view with the first
+   column, and under a pinned-left column it would be painted over. It sits
+   above pinned cells (z-index) and moves no cell content. `inset-inline-start`
+   puts it on the right edge under `dir="rtl"`. The focused row keeps its own
+   inset bar; at the leading edge the status marker covers it, which is the
+   more urgent of the two. */
+.kanuni-datagrid-root,
+.kanuni-datagrid-enterprise,
+.kanuni-datagrid-detached {
+  --dg-row-status-width: 3px;
+  --dg-row-status-changed: var(--dg-warning);
+  --dg-row-status-saving: var(--dg-primary);
+  /* The success fill: every palette and scheme sets it, dark ones included. */
+  --dg-row-status-saved: var(--dg-success);
+  --dg-row-status-error: var(--dg-danger);
+  /* How strongly `tint: true` washes the row. */
+  --dg-row-status-tint: 8%;
+}
+
+.kanuni-datagrid-row--status-changed {
+  --dg-row-status-color: var(--dg-row-status-changed);
+}
+
+.kanuni-datagrid-row--status-saving {
+  --dg-row-status-color: var(--dg-row-status-saving);
+}
+
+.kanuni-datagrid-row--status-saved {
+  --dg-row-status-color: var(--dg-row-status-saved);
+}
+
+.kanuni-datagrid-row--status-error {
+  --dg-row-status-color: var(--dg-row-status-error);
+}
+
+.kanuni-datagrid-row[data-row-status]::before {
+  content: '';
+  position: sticky;
+  inset-inline-start: 0;
+  /* Above pinned cells (2), below the row being edited (4): at 6 the next
+     row's marker cut through the editor's error bubble, which hangs one row
+     down (pre-release review, 2026-10-16). */
+  z-index: 3;
+  flex: none;
+  align-self: stretch;
+  width: var(--dg-row-status-width);
+  margin-inline-end: calc(-1 * var(--dg-row-status-width));
+  background: var(--dg-row-status-color);
+  pointer-events: none;
+}
+
+/* The tint is a translucent IMAGE over whatever colour the row already has —
+   stripe, hover, selection or focus — so those still read through it. Pinned
+   cells inherit the row's background but the hover rule resets theirs, so
+   they are named here too (three classes + an attribute: above the hover and
+   selection rules, which are two classes). */
+.kanuni-datagrid-row.kanuni-datagrid-row--status-tint[data-row-status],
+.kanuni-datagrid-row.kanuni-datagrid-row--status-tint[data-row-status] .kanuni-datagrid-cell--pinned {
+  background-image: linear-gradient(
+    color-mix(in srgb, var(--dg-row-status-color) var(--dg-row-status-tint), transparent),
+    color-mix(in srgb, var(--dg-row-status-color) var(--dg-row-status-tint), transparent)
+  );
+}
+
+/* High contrast drops background colours; the marker is the whole signal,
+   so it keeps its own. */
+@media (forced-colors: active) {
+  .kanuni-datagrid-row[data-row-status]::before {
+    forced-color-adjust: none;
+  }
+}
+
+/* ── Message rows (`rowStatus.messages`, 2026-10-16) ─────────
+   A refused save's reason in a row under it, with Retry and Delete row. The
+   in-grid edit form's shape: sticky to the scroller's inline start and as wide
+   as the VIEWPORT, so it stays in view while the columns scroll. The ground
+   stays the surface — the text is the danger TEXT colour, measured at 4.5:1
+   on it — and the row's own marker colour runs down its leading edge. */
+.kanuni-datagrid-message-row {
+  background: var(--dg-surface);
+  border-bottom: 1px solid var(--dg-border);
+}
+
+.kanuni-datagrid-message-cell {
+  position: sticky;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  width: var(--dg-viewport-width, 100%);
+  height: 100%;
+  border-inline-start: var(--dg-row-status-width) solid var(--dg-row-status-error);
+  user-select: text;
+}
+
+.kanuni-datagrid-row-message {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+  padding: 0 var(--dg-cell-padding-x);
+  color: var(--dg-danger-text);
+  font-size: var(--dg-chrome-font-size);
+}
+
+.kanuni-datagrid-row-message-icon {
+  flex: none;
+}
+
+.kanuni-datagrid-row-message-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row-message-button {
+  flex: none;
+  height: min(var(--dg-control-height), calc(100% - 6px));
+  padding: 0 8px;
+  border: 1px solid var(--dg-border-strong);
+  border-radius: var(--dg-radius-control);
+  background: var(--dg-surface);
+  color: var(--dg-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row-message-button:hover {
+  background: var(--dg-surface-hover);
+}
+
+.kanuni-datagrid-root .kanuni-datagrid-row-message-button:focus-visible {
+  outline: 2px solid var(--dg-focus-ring);
+  outline-offset: 1px;
+}
+
+/* ── Status column (`rowStatus.icons`, 2026-10-16) ───────────
+   A glyph per status so it does not rest on colour alone: a dot while
+   changed, a turning ring while saving, a tick when saved, a triangle when
+   refused. Drawn as a MASK filled with the status colour, so a palette or a
+   scheme recolours it like the marker. The cell exists on every row (an empty
+   one where there is no status) so the columns beside it never step. */
+.kanuni-datagrid-status-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.kanuni-datagrid-status-icon {
+  display: none;
+  width: 12px;
+  height: 12px;
+  background: var(--dg-row-status-color);
+  -webkit-mask: var(--dg-row-status-glyph) center / contain no-repeat;
+  mask: var(--dg-row-status-glyph) center / contain no-repeat;
+}
+
+.kanuni-datagrid-row[data-row-status] .kanuni-datagrid-status-icon {
+  display: block;
+}
+
+.kanuni-datagrid-row--status-changed {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-saving {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-saved {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 3.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-error {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15.5 14.5H.5z M7 6v4.5h2V6z M7 11.5v2h2v-2z' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-saving .kanuni-datagrid-status-icon {
+  animation: kanuni-datagrid-status-spin 0.9s linear infinite;
+}
+
+@keyframes kanuni-datagrid-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kanuni-datagrid-row--status-saving .kanuni-datagrid-status-icon {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .kanuni-datagrid-status-icon {
+    background: CanvasText;
+  }
+}
+
 /* ─────────────────────────────────────────────────────────────
    KANUNILABS DataGrid — packaged themes
    ─────────────────────────────────────────────────────────────
@@ -3920,6 +4148,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #f87171;
   --dg-danger-text: #fca5a5;
   --dg-on-danger: #450a0a;
+  --dg-success: #4ade80;
+  --dg-success-text: #86efac;
+  --dg-on-success: #0d2817;
   --dg-warning: #fbbf24;
   --dg-overlay: rgba(12, 10, 9, 0.72);
 
@@ -4268,6 +4499,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #a2515a;              /* Aurora nord11, deepened for white text */
   --dg-danger-text: #8f4149;
   --dg-on-danger: #ffffff;
+  --dg-success: #687a5a;
+  --dg-success-text: #5d6c50;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a6220;             /* nord13 family */
 }
 
@@ -4296,6 +4530,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   /* nord11 is a muted red, so the label on it has to go further down than the
      usual near-black: #2b1113 measured 4.31:1 and this is 5.17:1. */
   --dg-on-danger: #170709;
+  --dg-success: #a3be8c;
+  --dg-success-text: #adc599;
+  --dg-on-success: #1d2219;
   --dg-warning: #ebcb8b;             /* nord13 */
   --dg-overlay: rgba(24, 28, 36, 0.72);
 }
@@ -4329,6 +4566,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #b03a5b;              /* Pink #ff79c6 / Red #ff5555 family */
   --dg-danger-text: #98304d;
   --dg-on-danger: #ffffff;
+  --dg-success: #2a8441;
+  --dg-success-text: #257339;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a5a1c;
 }
 
@@ -4355,6 +4595,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #ff5555;              /* Red */
   --dg-danger-text: #ff8a8a;
   --dg-on-danger: #3b0000;
+  --dg-success: #50fa7b;
+  --dg-success-text: #50fa7b;
+  --dg-on-success: #0e2d16;
   --dg-warning: #f1fa8c;             /* Yellow */
   --dg-overlay: rgba(18, 19, 26, 0.74);
 }
@@ -4388,6 +4631,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #b3372c;              /* red #dc322f, deepened */
   --dg-danger-text: #9c2f25;
   --dg-on-danger: #ffffff;
+  --dg-success: #6c7c00;
+  --dg-success-text: #5a6800;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a5a00;             /* yellow #b58900, deepened */
 }
 
@@ -4414,6 +4660,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #e07a72;
   --dg-danger-text: #f0a49e;
   --dg-on-danger: #34110d;
+  --dg-success: #859900;
+  --dg-success-text: #a4b240;
+  --dg-on-success: #181c00;
   --dg-warning: #d5a63b;
   --dg-overlay: rgba(0, 20, 26, 0.74);
 }
@@ -4446,6 +4695,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #9d0006;              /* light red */
   --dg-danger-text: #9d0006;
   --dg-on-danger: #ffffff;
+  --dg-success: #79740e;
+  --dg-success-text: #605c0b;
+  --dg-on-success: #ffffff;
   /* The scheme's light yellow (#b57614) is 3.33:1 on this cream ground — the
      warmth that makes Gruvbox work is also what makes its yellow weak here.
      Same hue, two steps down, 4.72:1. */
@@ -4475,6 +4727,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #fb4934;              /* dark red */
   --dg-danger-text: #fb8b7f;
   --dg-on-danger: #2c0500;
+  --dg-success: #b8bb26;
+  --dg-success-text: #bfc23c;
+  --dg-on-success: #212207;
   --dg-warning: #fabd2f;             /* dark yellow */
   --dg-overlay: rgba(20, 20, 20, 0.74);
 }
@@ -4508,6 +4763,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #c4304a;              /* red #d20f39, deepened for white text */
   --dg-danger-text: #b02540;
   --dg-on-danger: #ffffff;
+  --dg-success: #358524;
+  --dg-success-text: #2d701e;
+  --dg-on-success: #ffffff;
   --dg-warning: #995f14;             /* peach, deepened */
 }
 
@@ -4534,6 +4792,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #f38ba8;              /* red */
   --dg-danger-text: #f5a3ba;
   --dg-on-danger: #3d0b1a;
+  --dg-success: #a6e3a1;
+  --dg-success-text: #a6e3a1;
+  --dg-on-success: #1e291d;
   --dg-warning: #fab387;             /* peach */
   --dg-overlay: rgba(14, 14, 22, 0.74);
 }
@@ -4570,6 +4831,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #b1364a;
   --dg-danger-text: #9d2c3f;
   --dg-on-danger: #ffffff;
+  --dg-success: #587539;
+  --dg-success-text: #455b2c;
+  --dg-on-success: #ffffff;
   --dg-warning: #8a5a12;
 }
 
@@ -4596,6 +4860,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-danger: #f7768e;              /* red */
   --dg-danger-text: #f993a6;
   --dg-on-danger: #3a0713;
+  --dg-success: #9ece6a;
+  --dg-success-text: #9ece6a;
+  --dg-on-success: #1c2513;
   --dg-warning: #e0af68;             /* yellow */
   --dg-overlay: rgba(10, 11, 18, 0.76);
 }