@svgrid/grid 3.0.4 → 3.0.6

package/dist/SvGrid.css

@@ -463,6 +463,83 @@
   user-select: text;
 }
 
+/* Rows whose data has not arrived yet (server-side / infinite loading).
+
+   The shimmer is per CELL, not per row, so the columns keep their widths
+   and the table does not reflow as blocks land. Widths vary a little by
+   column position so a screenful of them reads as text rather than as a
+   barcode - the same trick every skeleton screen uses. */
+.sv-grid-placeholder-cell {
+  user-select: none;
+  cursor: default;
+}
+/* The per-cell shimmer of a placeholder row. Its own name: `.sv-grid-skeleton`
+   above is the full-body loading overlay, absolutely positioned under the
+   header, and sharing it pulled every placeholder cell's bar up there. */
+.sv-grid-placeholder-skeleton {
+  display: inline-block;
+  width: 72%;
+  height: 9px;
+  border-radius: 5px;
+  vertical-align: middle;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent) 25%,
+    color-mix(in srgb, var(--sg-fg, #0f172a) 3%, transparent) 50%,
+    color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent) 75%
+  );
+  background-size: 200% 100%;
+  animation: sv-grid-skeleton-shimmer 1.2s linear infinite;
+}
+.sv-grid-placeholder-cell:nth-child(2n) .sv-grid-placeholder-skeleton { width: 54%; }
+.sv-grid-placeholder-cell:nth-child(3n) .sv-grid-placeholder-skeleton { width: 84%; }
+@keyframes sv-grid-skeleton-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sv-grid-placeholder-skeleton { animation: none; }
+}
+
+/* A block that failed to load: one message across the row, and a way out.
+   The cell stays a table cell so its colspan holds; the flex box is inside
+   it (a flex `td` stops spanning and the tint shrank to the text). Rows
+   that continue a failed run are the same band without the message. */
+.sv-grid-placeholder-failed .sv-grid-placeholder-cell {
+  background: color-mix(in srgb, var(--sg-danger, #dc2626) 6%, transparent);
+}
+.sv-grid-placeholder-failed-body {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 100%;
+  padding-left: var(--sg-cell-px, 7px);
+}
+.sv-grid-placeholder-failed-cont .sv-grid-placeholder-cell {
+  border-top-color: transparent;
+}
+.sv-grid-placeholder-error {
+  color: var(--sg-danger, #dc2626);
+  font-size: 13px;
+}
+.sv-grid-placeholder-retry {
+  background: none;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-radius: var(--sg-radius, 6px);
+  padding: 2px 10px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--sg-fg, #0f172a);
+  cursor: pointer;
+}
+.sv-grid-placeholder-retry:hover {
+  background: color-mix(in srgb, var(--sg-fg, #0f172a) 6%, transparent);
+}
+.sv-grid-placeholder-retry:focus-visible {
+  outline: 2px solid var(--sg-accent, #2563eb);
+  outline-offset: 2px;
+}
+
 /* Pinned columns read as "frozen" via three layered cues:
      1. A distinct fill (slightly stronger than the header) so the
         pinned strip is visible even before you scroll. Themes with a
@@ -740,6 +817,12 @@
 .sv-grid-row-drop-after > td {
   box-shadow: inset 0 -2px 0 0 var(--sg-accent, #6366f1);
 }
+/* Landing inside a group or tree row (the row becomes its child): the
+ * whole row is the target, so it takes a tint and a ring rather than a line. */
+.sv-grid-row-drop-into > td {
+  box-shadow: inset 0 2px 0 0 var(--sg-accent, #6366f1), inset 0 -2px 0 0 var(--sg-accent, #6366f1);
+  background: color-mix(in srgb, var(--sg-accent, #6366f1) 10%, transparent);
+}
 
 /* Pinned rows (top / bottom). Each cell sticks individually so the
  * row tracks scroll on every browser. Top rows stick below the sticky
@@ -764,6 +847,27 @@
 .sv-grid-pinned-row-bottom[data-pinned-index="1"] td { bottom: var(--sg-pinned-row-h, 32px); }
 .sv-grid-pinned-row-bottom[data-pinned-index="2"] td { bottom: calc(var(--sg-pinned-row-h, 32px) * 2); }
 .sv-grid-pinned-row-bottom[data-pinned-index="3"] td { bottom: calc(var(--sg-pinned-row-h, 32px) * 3); }
+/* While the selection bar is up the scroller carries bottom padding (see
+   --sg-selbar-reserve), and a sticky bottom edge is inset by that padding:
+   the lowest pinned row then holds 68px above the viewport's edge, with the
+   body rows scrolling through the strip beneath it, in and out from behind
+   the bar. That strip is meant to be the bar's own ground, so the lowest
+   pinned row paints it: a shadow in the body colour, spread by half the
+   reserve and pushed down by the same, fills the strip under each cell; the
+   clip cuts the spread's sideways spill at the cell's own edges so a later
+   cell's shadow never paints over its neighbour. The cells sit at z-index 4,
+   above the rows and under the floating bar. */
+.sv-grid-root[data-selbar$='bottom'] .sv-grid-pinned-row-bottom[data-pinned-index="0"] td {
+  box-shadow: 0 calc(var(--sg-selbar-reserve) / 2) 0 calc(var(--sg-selbar-reserve) / 2) var(--sg-bg, #fff);
+  clip-path: inset(0 0 calc(-1 * var(--sg-selbar-reserve)) 0);
+}
+/* The same strip above a sticky header when the bar sits at the top: the
+   header holds under the reserve and rows scrolled up showed through above
+   it. The first header row's cells paint the strip the same way. */
+.sv-grid-root[data-selbar$='top'] .sv-grid-head > tr:first-child > th {
+  box-shadow: 0 calc(-1 * var(--sg-selbar-reserve) / 2) 0 calc(var(--sg-selbar-reserve) / 2) var(--sg-bg, #fff);
+  clip-path: inset(calc(-1 * var(--sg-selbar-reserve)) 0 0 0);
+}
 /* Sticky-left columns keep their left position; just override their
  * z so they sit above non-pinned pinned-row cells. */
 .sv-grid-pinned-row td[data-pinned] { z-index: 5; }
@@ -945,13 +1049,58 @@
   z-index: 4;
 }
 
-/* Row-number column: sticks to the left edge of the scroll viewport. */
+/* Detail-toggle column (`showDetailToggle`): a row-header gutter of chevrons
+   that open and close detail rows. Sticky beside the row numbers and the
+   selection column, on the header band's colour so it reads as chrome, not
+   data; no menu, no resize handle, outside the active cell. */
+.sv-grid-detail-toggle-column,
+.sv-grid-detail-toggle-cell {
+  text-align: center;
+  padding: 0;
+  position: sticky;
+  z-index: 4;
+  background: var(--sg-header-bg, #f5f7fb);
+  vertical-align: middle;
+}
+.sv-grid-detail-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--sg-muted, #64748b);
+  cursor: pointer;
+  vertical-align: middle;
+}
+.sv-grid-detail-toggle:hover {
+  background: color-mix(in srgb, var(--sg-accent, #2563eb) 12%, transparent);
+  color: var(--sg-accent, #2563eb);
+}
+.sv-grid-detail-toggle:focus-visible {
+  outline: 2px solid var(--sg-accent, #2563eb);
+  outline-offset: 1px;
+}
+.sv-grid-detail-toggle > .sv-grid-icon {
+  width: 12px;
+  height: 12px;
+  transition: transform 0.15s ease;
+}
+.sv-grid-detail-toggle[aria-expanded="true"] > .sv-grid-icon {
+  transform: rotate(90deg);
+}
+
+/* Row-number column: sticks to the inline-start edge of the scroll viewport,
+   which is the right edge under `dir="rtl"`. */
 .sv-grid-row-number-column,
 .sv-grid-row-number-cell {
   text-align: right;
   padding-inline: 8px;
   position: sticky;
-  left: 0;
+  inset-inline-start: 0;
   z-index: 4;
   /* Match the column-header band so the row-number gutter and the column
      headers form one continuous header chrome. */
@@ -1254,6 +1403,15 @@ select.sv-grid-fr-editor {
      overflow: hidden so the chips picker would otherwise be clipped). */
   overflow: visible;
 }
+/* The active cell a grid mounts with is seeded at (0,0), not chosen: no
+   ring until a click, an arrow key or the api activates a cell (the same
+   gate the fill handle has always had). Once activated it stays through a
+   blur, so a toolbar acting on "the focused row" keeps its cue. A page with
+   six grids on it, or a detail grid inside each open row, used to open
+   with an accent ring in every one of them. */
+.sv-grid-active-seeded .sv-grid-cell-active {
+  box-shadow: none;
+}
 
 /* ---- The editing cell's border -------------------------------------------
    One ring for every editor, drawn by the CELL rather than by each editor.
@@ -1552,6 +1710,40 @@ select.sv-grid-fr-editor {
   border-bottom: 1px solid var(--sg-frozen-edge, var(--sg-border, #94a3b8));
 }
 
+/* A detail row with a declared height (detailRowHeight): the row keeps the
+   height the virtualizer counted on - the auto-height rule above must not
+   win - and the panel's body, a block inside the cell, takes that height
+   and scrolls what does not fit. (A table cell's own height is only a
+   minimum, so the height goes on the block.) */
+.sv-grid-row.sv-grid-detail-row.sv-grid-detail-row-sized {
+  height: var(--sv-detail-h) !important;
+}
+.sv-grid-row.sv-grid-detail-row-sized > .sv-grid-detail-cell {
+  vertical-align: top;
+  box-sizing: border-box;
+  height: var(--sv-detail-h);
+}
+.sv-grid-detail-body {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+}
+
+/* Sticky group rows: the group a row belongs to, held under the header
+   (and under the frozen band) while its rows scroll past. Same layer as
+   the frozen band; the last one carries the band's edge. */
+.sv-grid-row.sv-grid-row-sticky-group {
+  position: sticky;
+  z-index: 31;
+  background: var(--sg-bg, #fff);
+}
+.sv-grid-row.sv-grid-row-sticky-group > .sv-grid-cell {
+  background: var(--sg-bg, #fff);
+}
+.sv-grid-row.sv-grid-row-sticky-group-last > .sv-grid-cell {
+  border-bottom: 1px solid var(--sg-frozen-edge, var(--sg-border, #94a3b8));
+}
+
 /* The multiline text editor sizes itself by its lines and keeps the
    input's single-line look until a break is typed. */
 .sv-grid-cell-editor-multiline {
@@ -3009,6 +3201,12 @@ select.sv-grid-fr-editor {
 .sv-grid-row-number-cell {
   border-right-color: var(--sg-header-bg, #f1f5f9);
 }
+/* The detail-toggle gutter fuses with the row numbers the same way; only
+   its own right edge keeps a line, between the chrome and the data. */
+.sv-grid-row-number-cell:has(+ .sv-grid-detail-toggle-cell),
+.sv-grid-row-number-column:has(+ .sv-grid-detail-toggle-column) {
+  border-right-color: var(--sg-header-bg, #f1f5f9);
+}
 
 /* Group row label colour. */
 .sv-grid-group-row > .sv-grid-cell {