@svgrid/grid 1.1.0 → 1.1.2

package/dist/SvGrid.css

@@ -90,33 +90,48 @@
   100% { background-position: -200% 0; }
 }
 
-.sv-grid-tool-panel-toggle {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  z-index: 21;
+/* Grid toolbar strip above the shell - hosts the tool-panel trigger (and is a
+   natural home for future grid-level actions). */
+.sv-grid-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 2px;
+}
+.sv-grid-toolbar-btn {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
+  gap: 6px;
+  padding: 6px 12px;
   border: 1px solid var(--sg-border, #e2e8f0);
   border-radius: var(--sg-radius, 6px);
   background: var(--sg-bg, #fff);
-  color: var(--sg-muted, #64748b);
+  color: var(--sg-fg, #0f172a);
+  font-size: 12.5px;
+  font-weight: 600;
   cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
 }
-.sv-grid-tool-panel-toggle:hover,
-.sv-grid-tool-panel-toggle.is-open {
+.sv-grid-toolbar-btn:hover {
+  border-color: var(--sg-accent, #2563eb);
   color: var(--sg-accent, #2563eb);
+}
+.sv-grid-toolbar-btn.is-active {
+  background: var(--sg-accent, #2563eb);
   border-color: var(--sg-accent, #2563eb);
+  color: #fff;
 }
 .sv-grid-tool-panel {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
-  z-index: 20;
+  /* Above the grid's sticky header (z-index 30) and custom scrollbars (z ~900)
+     so the docked panel fully overlays the grid instead of the header/right
+     columns bleeding through its top-right. Ties the menu layer (901) but the
+     menus render later in the DOM, so a column menu opened over the panel still
+     wins. */
+  z-index: 901;
   width: 250px;
   display: flex;
   flex-direction: column;
@@ -205,6 +220,83 @@
   opacity: 0.35;
   cursor: default;
 }
+/* Tool-panel tab bar (Columns | Filters) */
+.sv-grid-tool-panel-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 6px 6px 0;
+  border-bottom: 1px solid var(--sg-border, #e2e8f0);
+}
+.sv-grid-tool-panel-tab {
+  flex: 1;
+  padding: 6px 8px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--sg-muted, #64748b);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.sv-grid-tool-panel-tab:hover {
+  color: var(--sg-fg, #0f172a);
+}
+.sv-grid-tool-panel-tab.is-active {
+  color: var(--sg-accent, #2563eb);
+  border-bottom-color: var(--sg-accent, #2563eb);
+}
+/* Filters tab: one control block per filterable column */
+.sv-grid-tool-panel-filters {
+  padding: 6px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.sv-grid-tp-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-radius: 6px;
+}
+.sv-grid-tp-filter.is-filtered {
+  border-color: var(--sg-accent, #2563eb);
+}
+.sv-grid-tp-filter-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sv-grid-tp-filter-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sg-fg, #0f172a);
+}
+.sv-grid-tp-filter-clear {
+  border: 0;
+  background: transparent;
+  color: var(--sg-muted, #64748b);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0 2px;
+}
+.sv-grid-tp-filter-clear:hover {
+  color: var(--sg-accent, #2563eb);
+}
+.sv-grid-tp-filter-op,
+.sv-grid-tp-filter-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 4px 6px;
+  font-size: 12px;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-radius: 5px;
+  background: var(--sg-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+}
 /* Root wrapper fill mode: only takes effect when consumer passes
  * containerHeight='100%'. The shell becomes a flex item that expands
  * while the pager keeps its natural height. */
@@ -311,6 +403,14 @@
   background: var(--sg-pinned-header-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 60%, var(--sg-accent, #2563eb) 14%));
   font-weight: 600;
 }
+/* Zebra striping, opt-in via the `zebraRows` prop (which adds
+   `.sv-grid-row-alt` to alternating DATA rows only - pinned, group,
+   detail, and summary rows never get the class, so they keep a single
+   background). This rule sits before `.sv-grid-row-selected` /
+   `:hover` so those states paint over the stripe. */
+.sv-grid-row-alt > .sv-grid-cell {
+  background: var(--sg-row-alt-bg, #f8fafc);
+}
 /* Zebra rows: keep the pinned tint visible (don't let the row-alt
    background bleed through) by re-painting the pinned cells. */
 .sv-grid-row-alt > .sv-grid-cell[data-pinned] {
@@ -380,7 +480,7 @@
 
 .sv-grid-resize-handle:hover,
 .sv-grid-resize-handle.is-resizing {
-  background: rgba(11, 99, 243, 0.3);
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 30%, transparent);
 }
 
 /* Row resize handle (counterpart of the column resize handle). Lives
@@ -395,7 +495,7 @@
 }
 .sv-grid-row-resize-handle:hover,
 .sv-grid-row-resize-handle.is-resizing {
-  background: rgba(11, 99, 243, 0.3);
+  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 30%, transparent);
 }
 
 .sv-grid-head {
@@ -409,6 +509,22 @@
   z-index: 35;
   background: var(--sg-header-bg, #f5f7fb);
 }
+/* Column-header cells take the header background (and header foreground)
+   so the header row paints as a solid band rather than body-colored
+   cells over the sticky header strip. Together with the row-number
+   gutter below - which uses the same --sg-header-bg - the column headers
+   and row headers read as one continuous header chrome. */
+.sv-grid-head .sv-grid-column {
+  background: var(--sg-header-bg, #f5f7fb);
+  /* Header typography is themeable so each design-system preset can match
+     its real grid header (e.g. Excel bold, Atlassian uppercase + subtle,
+     shadcn medium + muted). The label/sort-button inherit these. */
+  color: var(--sg-header-label-color, var(--sg-header-fg, var(--sg-fg, #0f172a)));
+  font-weight: var(--sg-header-weight, 600);
+  font-size: var(--sg-header-size, inherit);
+  text-transform: var(--sg-header-transform, none);
+  letter-spacing: var(--sg-header-tracking, normal);
+}
 
 /* Header drag-to-reorder. The `draggable` attribute is only set
  * when `enableColumnReorder` is true, so the cursor and drop
@@ -435,6 +551,48 @@
 .sv-grid-column.is-drag-target-after::after   { right: -2px; }
 @keyframes sg-drop-pulse { from { opacity: 0.55; } to { opacity: 1; } }
 
+/* Managed row dragging ----------------------------------------------------- */
+/* The whole row is the drag source; the row-number cell shows a grip so the
+ * affordance is discoverable. Pair `rowDragManaged` with `showRowNumbers` for
+ * the grip; without row numbers the grab cursor still hints it. */
+.sv-grid-row-draggable { cursor: grab; }
+.sv-grid-row-draggable:active { cursor: grabbing; }
+.sv-grid-row-draggable .sv-grid-row-number-cell {
+  position: relative;
+  padding-left: 14px;
+}
+.sv-grid-row-draggable .sv-grid-row-number-cell::before {
+  content: "\2807"; /* braille grip glyph */
+  position: absolute;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 13px;
+  line-height: 1;
+  color: var(--sg-muted, #94a3b8);
+  opacity: 0.4;
+  transition: opacity 120ms ease;
+  pointer-events: none;
+}
+.sv-grid-row-draggable:hover .sv-grid-row-number-cell::before { opacity: 1; }
+
+/* Default highlight for an external drop zone (use:rowDropZone) while a
+   matching row is dragged over it. Consumers can override the class. */
+.sv-grid-row-dropzone-over {
+  outline: 2px dashed var(--sg-accent, #6366f1);
+  outline-offset: -2px;
+  background: color-mix(in srgb, var(--sg-accent, #6366f1) 10%, transparent);
+}
+
+/* Drop indicator: a glowing line on the row's top (before) or bottom (after)
+ * edge. Painted on the cells so it spans the full row across table layouts. */
+.sv-grid-row-drop-before > td {
+  box-shadow: inset 0 2px 0 0 var(--sg-accent, #6366f1);
+}
+.sv-grid-row-drop-after > td {
+  box-shadow: inset 0 -2px 0 0 var(--sg-accent, #6366f1);
+}
+
 /* Pinned rows (top / bottom). Each cell sticks individually so the
  * row tracks scroll on every browser. Top rows stick below the sticky
  * thead via --sg-thead-h; bottom rows stick to the bottom of the
@@ -490,6 +648,34 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Collapse toggle on a collapsible column group header. */
+.sv-grid-group-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+.sv-grid-group-toggle:hover {
+  background: color-mix(in srgb, var(--sg-accent, #2563eb) 12%, transparent);
+  color: var(--sg-accent, #2563eb);
+}
+.sv-grid-group-caret {
+  flex-shrink: 0;
+  transition: transform 140ms ease;
+}
+/* Collapsed: point the caret right (like a closed disclosure). */
+.sv-grid-group-toggle.is-collapsed .sv-grid-group-caret {
+  transform: rotate(-90deg);
+}
 
 .sv-grid-foot {
   position: sticky;
@@ -602,6 +788,9 @@
   position: sticky;
   left: 0;
   z-index: 4;
+  /* Match the column-header band so the row-number gutter and the column
+     headers form one continuous header chrome. */
+  background: var(--sg-header-bg, #f5f7fb);
   color: var(--sg-muted, #64748b);
   font-variant-numeric: tabular-nums;
 }
@@ -635,9 +824,9 @@
   animation: sv-grid-filter-pulse 700ms ease-out;
 }
 @keyframes sv-grid-filter-pulse {
-  0%   { box-shadow: 0 0 0 0 rgba(11, 99, 243, 0.55); }
-  70%  { box-shadow: 0 0 0 6px rgba(11, 99, 243, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(11, 99, 243, 0); }
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sg-accent, #0b63f3) 55%, transparent); }
+  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sg-accent, #0b63f3) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sg-accent, #0b63f3) 0%, transparent); }
 }
 
 .sv-grid-checkbox {
@@ -658,6 +847,23 @@
     background-color 120ms ease;
 }
 
+/* Full-row editor: inline editors shown for every editable cell of a row
+   in full-row edit. Fill the cell so the row reads as a form line. */
+.sv-grid-fr-editor {
+  width: 100%;
+  box-sizing: border-box;
+}
+select.sv-grid-fr-editor {
+  height: 100%;
+  min-height: 26px;
+}
+.sv-grid-fr-checkbox {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--sg-accent, #3b82f6);
+  cursor: pointer;
+}
+
 /* Color editor - native HTML color input filling the cell so the
    swatch is clickable across the whole cell area, not just the tiny
    OS default size. */
@@ -732,6 +938,19 @@
   pointer-events: none;
 }
 
+/* Built-in cell flash (ColumnDef `cellFlash`). Theme-tinted fade; consumers
+   can pass their own class (e.g. up/down colouring) via `cellFlash.className`. */
+@keyframes sv-grid-cell-flash-kf {
+  0%   { background-color: var(--sg-cell-flash, color-mix(in oklab, var(--sg-accent, #3b82f6) 42%, transparent)); }
+  100% { background-color: transparent; }
+}
+.sv-grid-cell-flash {
+  animation: sv-grid-cell-flash-kf 0.7s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sv-grid-cell-flash { animation: none; }
+}
+
 .sv-grid-cell-active,
 .sv-grid-cell-editing {
   position: relative;
@@ -802,12 +1021,18 @@
   transform-origin: bottom right;
 }
 
-/* Fill-preview overlay paints a dashed accent border on the cells the
-   user is about to fill. Source cells (still in the selection range)
-   keep their normal range styling. */
+/* Fill-preview overlay paints an accent border on the cells the user is
+   about to fill. Source cells (still in the selection range) keep their
+   normal range styling. The border + tint derive from the theme accent
+   (`--sg-accent`) so they match each theme instead of a fixed blue;
+   `--sg-fill-preview-border` / `--sg-fill-preview-bg` let a theme override
+   them directly. */
 .sv-grid-cell[data-fill-preview="true"] {
-  box-shadow: inset 0 0 0 2px rgba(11, 99, 243, 0.5);
-  background: rgba(11, 99, 243, 0.08);
+  box-shadow: inset 0 0 0 2px
+    var(--sg-fill-preview-border,
+      color-mix(in srgb, var(--sg-accent, #0b63f3) 50%, transparent));
+  background: var(--sg-fill-preview-bg,
+    color-mix(in srgb, var(--sg-accent, #0b63f3) 8%, transparent));
 }
 
 .sv-grid-cell-editing {
@@ -1119,6 +1344,11 @@
   gap: 2px;
   width: 100%;
   min-width: 0;
+  /* Themeable header height. Defaults to auto (content-driven); presets
+     can set a taller header (e.g. Material's roomy data-table header).
+     The component measures the rendered header height for sticky offsets,
+     so this propagates to --sg-thead-h automatically. */
+  min-height: var(--sg-header-min-height, auto);
 }
 
 .sv-grid-header-sort {
@@ -1287,6 +1517,32 @@
 .sv-grid-column-menu {
   width: 260px;
 }
+/* Column-menu tab bar (General / Filter / Columns). */
+.sv-grid-menu-tabs {
+  display: flex;
+  gap: 2px;
+  margin: -2px -2px 4px;
+  padding: 2px 2px 0;
+  border-bottom: 1px solid var(--sg-border, #e2e8f0);
+}
+.sv-grid-menu-tab {
+  flex: 1;
+  padding: 6px 6px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--sg-muted, #64748b);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.sv-grid-menu-tab:hover {
+  color: var(--sg-fg, #0f172a);
+}
+.sv-grid-menu-tab.is-active {
+  color: var(--sg-accent, #2563eb);
+  border-bottom-color: var(--sg-accent, #2563eb);
+}
 
 .sv-grid-operator-menu {
   width: 184px;
@@ -1449,6 +1705,53 @@
   font: inherit;
 }
 
+/* Multi-condition filter: AND/OR join toggle + add-condition button. */
+.sv-grid-menu-add-cond {
+  align-self: flex-start;
+  margin-top: 2px;
+  padding: 3px 8px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--sg-accent, #3b82f6);
+  background: transparent;
+  border: 1px dashed var(--sg-border, #cbd5e1);
+  border-radius: 5px;
+  cursor: pointer;
+}
+.sv-grid-menu-add-cond:hover {
+  background: color-mix(in oklab, var(--sg-accent, #3b82f6) 8%, transparent);
+  border-style: solid;
+}
+.sv-grid-menu-join {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin: 2px 0;
+}
+.sv-grid-menu-join button {
+  padding: 2px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--sg-muted, #64748b);
+  background: transparent;
+  border: 1px solid var(--sg-border, #cbd5e1);
+  cursor: pointer;
+}
+.sv-grid-menu-join button:first-child { border-radius: 5px 0 0 5px; }
+.sv-grid-menu-join button:nth-child(2) { border-radius: 0; border-left: 0; }
+.sv-grid-menu-join button.is-on {
+  background: var(--sg-accent, #3b82f6);
+  color: #fff;
+  border-color: var(--sg-accent, #3b82f6);
+}
+.sv-grid-menu-join-x {
+  margin-left: auto;
+  border-radius: 5px !important;
+  font-size: 14px;
+  line-height: 1;
+  padding: 2px 7px !important;
+}
+
 .sv-grid-facet-list {
   max-height: 200px;
   overflow: auto;

package/dist/SvGrid.helpers.test.d.ts

@@ -0,0 +1 @@
+export {};