@svgrid/grid 1.2.1 → 1.2.4

package/dist/menus.js

@@ -221,12 +221,14 @@ export function createMenus(ctx) {
             ...prev,
             pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
         }));
+        ctx.scrollContainer?.scrollTo({ top: 0 });
     }
     function goToPage(pageIndex) {
         ctx.grid.setPagination((prev) => ({
             ...prev,
             pageIndex: Math.max(0, pageIndex),
         }));
+        ctx.scrollContainer?.scrollTo({ top: 0 });
     }
     function setPageSize(pageSize) {
         ctx.grid.setPagination((prev) => {
@@ -281,9 +283,15 @@ export function createMenus(ctx) {
         const rowModel = ctx.allRows[rowIndex];
         const row = rowModel?.original ?? null;
         const rowId = rowModel?.id ?? String(rowIndex);
+        // Reserve ~280px for the menu body. If the click is in the bottom third,
+        // flip the menu above the cursor so it stays fully in the viewport.
+        const menuHeight = 280;
+        const y = event.clientY + menuHeight > window.innerHeight
+            ? Math.max(8, event.clientY - menuHeight)
+            : event.clientY;
         ctx.contextMenuPos = {
             x: clampMenuX(event.clientX, 220),
-            y: Math.max(8, Math.min(event.clientY, window.innerHeight - 16)),
+            y,
         };
         ctx.contextMenuFor = { rowIndex, colIndex, columnId, rowId, row };
     }

package/dist/scroll-sync.js

@@ -61,7 +61,7 @@ export function createScrollSync(ctx) {
         const container = event.currentTarget;
         if (!container)
             return;
-        if (ctx.columnMenuFor || ctx.operatorMenuFor)
+        if (ctx.columnMenuFor || ctx.operatorMenuFor || ctx.contextMenuFor)
             ctx.closeMenus();
         scheduleScrollSync(container.scrollTop, container.scrollLeft);
         // Mirror horizontal scroll to any aligned grids in the same group.

package/dist/sv-grid-scrollbar.js

@@ -148,6 +148,7 @@ class SvGridScrollbarElement extends ScrollbarBase {
         this.valueStart = 0;
         this.holdTimer = null;
         this.resizeObserver = null;
+        this.resizeFrame = 0;
         this.onArrowStartPointerDown = (event) => {
             event.preventDefault();
             this.startHold(-1);
@@ -225,12 +226,26 @@ class SvGridScrollbarElement extends ScrollbarBase {
             btn.addEventListener('pointerleave', this.stopHold);
             btn.addEventListener('pointercancel', this.stopHold);
         }
-        this.resizeObserver = new ResizeObserver(() => this.render());
+        // Coalesce resize notifications into a single next-frame render so the
+        // observer callback never re-lays-out the observed element within the same
+        // delivery cycle (which is what triggers the benign but noisy
+        // "ResizeObserver loop completed with undelivered notifications" warning).
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.resizeFrame)
+                return;
+            this.resizeFrame = requestAnimationFrame(() => {
+                this.resizeFrame = 0;
+                this.render();
+            });
+        });
         this.resizeObserver.observe(this);
         this.render();
     }
     disconnectedCallback() {
         this.stopHold();
+        if (this.resizeFrame)
+            cancelAnimationFrame(this.resizeFrame);
+        this.resizeFrame = 0;
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
         document.removeEventListener('pointermove', this.onPointerMove);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "1.2.1",
+  "version": "1.2.4",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/SvGrid.controller.svelte.ts

@@ -216,6 +216,35 @@ function getMaxDomScrollHeight(): number {
   return detectedMaxDomHeight;
 }
 
+/**
+ * Observe an element's size, but run the callback on the next animation frame
+ * and coalesce bursts into a single call. This is what keeps the benign but
+ * noisy "ResizeObserver loop completed with undelivered notifications" warning
+ * out of the console: the browser emits it when an observer callback
+ * synchronously mutates layout in a way that would require another notification
+ * within the same delivery cycle - which our callbacks do (they bump reactive
+ * versions / remeasure, driving a re-layout of the observed element). Deferring
+ * the work to the next frame lets the current delivery finish cleanly, so the
+ * loop never spans a single cycle. This is especially visible when swapping the
+ * whole grid (e.g. switching demos), which remounts everything at once.
+ * Returns a disconnect function suitable for an $effect cleanup.
+ */
+function observeSizeRaf(el: Element, cb: () => void): () => void {
+  let frame = 0;
+  const observer = new ResizeObserver(() => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      cb();
+    });
+  });
+  observer.observe(el);
+  return () => {
+    if (frame) cancelAnimationFrame(frame);
+    observer.disconnect();
+  };
+}
+
 /**
  * SvGrid controller. The component's entire reactive core - every $state,
  * $derived, $effect and handler - lives here so SvGrid.svelte can stay a thin
@@ -1057,6 +1086,17 @@ export function createSvGridController<
     const start = pageIndex * pageSize;
     return rows.slice(start, start + pageSize);
   });
+
+  // When a filter reduces the dataset, the stored pageIndex can point beyond
+  // the last valid page. Reset to page 0 so the grid never shows a blank body.
+  $effect(() => {
+    if (!paginationEnabled) return;
+    const { pageIndex, pageSize } = paginationState;
+    const pageCount = Math.ceil(allRowsBeforePagination.length / pageSize);
+    if (pageCount > 0 && pageIndex >= pageCount) {
+      grid.setPagination({ pageIndex: 0, pageSize });
+    }
+  });
   const rowSelectionState = $derived.by(() => {
     gridStateVersion;
     return grid.getState().rowSelection ?? {};
@@ -1356,14 +1396,45 @@ export function createSvGridController<
     return columnVirtualizer.getTotalSize();
   });
   const renderedColumnItems = $derived.by(() => {
-    if (columnVirtualizationEnabled) return virtualColumns;
-    let start = 0;
-    return allColumns.map((column, index) => {
-      const size = getColumnWidth(column.id);
-      const item = { index, key: index, size, start, end: start + size };
-      start += size;
-      return item;
-    });
+    if (!columnVirtualizationEnabled) {
+      let start = 0;
+      return allColumns.map((column, index) => {
+        const size = getColumnWidth(column.id);
+        const item = { index, key: index, size, start, end: start + size };
+        start += size;
+        return item;
+      });
+    }
+    // Pinned columns are position:sticky, so they only stay pinned while their
+    // cell is in the DOM. Plain column virtualization drops them once they leave
+    // the scroll window, and the pinned column vanishes. Because allColumns is
+    // ordered [pinnedLeft, unpinned, pinnedRight], we keep the rendered window
+    // CONTIGUOUS from the pinned-left prefix (index 0) through the pinned-right
+    // suffix (last index) whenever those exist. The pinned cells are then always
+    // rendered - the existing single-spacer layout positions everything, so no
+    // markup changes are needed. (Cost: with a pinned side, the columns between
+    // that edge and the window are also rendered; negligible for typical grids,
+    // and correctness beats shaving a few off-screen cells.)
+    const window = virtualColumns;
+    const hasLeft = columnPinning.left.length > 0;
+    const hasRight = columnPinning.right.length > 0;
+    if ((!hasLeft && !hasRight) || window.length === 0) return window;
+
+    const firstIdx = window[0]!.index;
+    const lastIdx = window[window.length - 1]!.index;
+    const startIndex = hasLeft ? 0 : firstIdx;
+    const endIndex = hasRight ? allColumns.length - 1 : lastIdx;
+    if (startIndex === firstIdx && endIndex === lastIdx) return window;
+
+    const items: Array<{ index: number; key: number; size: number; start: number; end: number }> = [];
+    let offset = 0;
+    for (let i = 0; i < startIndex; i += 1) offset += getColumnWidth(allColumns[i]!.id);
+    for (let i = startIndex; i <= endIndex; i += 1) {
+      const size = getColumnWidth(allColumns[i]!.id);
+      items.push({ index: i, key: i, size, start: offset, end: offset + size });
+      offset += size;
+    }
+    return items;
   });
   const renderedColumns = $derived.by(() =>
     renderedColumnItems
@@ -1461,11 +1532,9 @@ export function createSvGridController<
   $effect(() => {
     if (!theadEl) return;
     headerHeight = theadEl.offsetHeight;
-    const observer = new ResizeObserver(() => {
+    return observeSizeRaf(theadEl, () => {
       headerHeight = theadEl?.offsetHeight ?? 0;
     });
-    observer.observe(theadEl);
-    return () => observer.disconnect();
   });
 
   // Bump scrollVersion when the table's layout size changes so scrollbar
@@ -1473,11 +1542,9 @@ export function createSvGridController<
   // after column resize / show-hide / add-remove.
   $effect(() => {
     if (!gridRootEl) return;
-    const observer = new ResizeObserver(() => {
+    return observeSizeRaf(gridRootEl, () => {
       scrollVersion += 1;
     });
-    observer.observe(gridRootEl);
-    return () => observer.disconnect();
   });
 
   $effect(() => {
@@ -1596,12 +1663,10 @@ export function createSvGridController<
 
   $effect(() => {
     if (!scrollContainer) return;
-    const observer = new ResizeObserver(() => {
+    return observeSizeRaf(scrollContainer, () => {
       viewportVersion += 1;
       if (!hasMeasured) hasMeasured = true;
     });
-    observer.observe(scrollContainer);
-    return () => observer.disconnect();
   });
 
   $effect(() => {

package/src/SvGrid.css

@@ -336,6 +336,21 @@
   background: var(--sg-bg, #fff);
   color: var(--sg-fg, #0f172a);
   user-select: none;
+  /* Grid lines ship with the grid so it looks complete out of the box - no
+     host stylesheet required. Only right + bottom per cell (border-spacing is
+     0), so adjacent cells share a single 1px line rather than doubling. */
+  border-right: 1px solid var(--sg-border, #e2e8f0);
+  border-bottom: 1px solid var(--sg-border, #e2e8f0);
+}
+/* The last cell / column in each row drops its right border so the grid's
+   right edge stays clean (the shell provides the outer frame). */
+.sv-grid-table tr > :last-child.sv-grid-column,
+.sv-grid-table tr > :last-child.sv-grid-cell {
+  border-right: 0;
+}
+/* Row hover tint. */
+.sv-grid-table tbody tr:hover > .sv-grid-cell {
+  background: var(--sg-row-hover-bg, #eef2ff);
 }
 /* Only the active cell + the cell hosting the fill handle become a
    positioning context (so the absolutely-positioned handle anchors
@@ -384,14 +399,14 @@
    always points toward the scrollable middle. */
 .sv-grid-cell[data-pinned="left"],
 .sv-grid-column[data-pinned="left"] {
-  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
   box-shadow:
     inset -1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
     8px 0 12px -6px rgba(15, 23, 42, 0.22);
 }
 .sv-grid-cell[data-pinned="right"],
 .sv-grid-column[data-pinned="right"] {
-  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
   box-shadow:
     inset 1px 0 0 var(--sg-pinned-divider, var(--sg-border, #cbd5e1)),
     -8px 0 12px -6px rgba(15, 23, 42, 0.22);
@@ -400,7 +415,7 @@
    so the frozen header itself reads as part of the grid chrome. */
 .sv-grid-head .sv-grid-column[data-pinned="left"],
 .sv-grid-head .sv-grid-column[data-pinned="right"] {
-  background: var(--sg-pinned-header-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 60%, var(--sg-accent, #2563eb) 14%));
+  background: var(--sg-pinned-header-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 86%, var(--sg-accent, #2563eb) 14%));
   font-weight: 600;
 }
 /* Zebra striping, opt-in via the `zebraRows` prop (which adds
@@ -414,7 +429,7 @@
 /* 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] {
-  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+  background: var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
 /* When the row is selected, keep the pinned tint but layer the
    selection color over it so the row still reads as selected. */
@@ -424,7 +439,7 @@
       color-mix(in srgb, var(--sg-selection-bg, #dbeafe) 65%, transparent),
       color-mix(in srgb, var(--sg-selection-bg, #dbeafe) 65%, transparent)
     ),
-    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
 /* Hovered row keeps the pinned tint distinguishable from the hover. */
 .sv-grid-row:hover > .sv-grid-cell[data-pinned] {
@@ -433,7 +448,7 @@
       color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent),
       color-mix(in srgb, var(--sg-row-hover-bg, #eef2ff) 55%, transparent)
     ),
-    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 70%, var(--sg-accent, #2563eb) 8%));
+    var(--sg-pinned-bg, color-mix(in oklab, var(--sg-header-bg, #f1f5f9) 92%, var(--sg-accent, #2563eb) 8%));
 }
 
 .sv-grid-column {
@@ -462,6 +477,14 @@
 .sv-grid-column[data-align="right"] .sv-grid-header-sort {
   justify-content: flex-end;
 }
+/* The custom vertical scrollbar overlays the right 16px of the viewport
+   (absolute, z-index 40). Nudge the last column's right-aligned content in by
+   that width when the scrollbar is visible, so numbers/values aren't hidden
+   underneath it. Left/center content already clears the right edge. */
+.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-cell[data-align="right"],
+.sv-grid-has-vscroll .sv-grid-table tr > :last-child.sv-grid-column[data-align="right"] {
+  padding-right: calc(var(--sg-cell-px, 7px) + 16px);
+}
 .sv-grid-column[data-align="center"] .sv-grid-header-sort {
   justify-content: center;
 }
@@ -478,9 +501,26 @@
   transition: background-color 100ms ease;
 }
 
-.sv-grid-resize-handle:hover,
-.sv-grid-resize-handle.is-resizing {
-  background: color-mix(in srgb, var(--sg-accent, #0b63f3) 30%, transparent);
+/* An accent center pill (rather than tinting the whole strip): faint on column
+   hover, bright when the handle itself is hovered or while dragging. */
+.sv-grid-resize-handle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto 2px;
+  width: 2px;
+  background: var(--sg-fg, #0f172a);
+  opacity: 0;
+  border-radius: 1px;
+  transition: background-color 100ms ease, opacity 100ms ease;
+}
+.sv-grid-column:hover .sv-grid-resize-handle::after {
+  opacity: 0.3;
+}
+.sv-grid-column:hover .sv-grid-resize-handle:hover::after,
+.sv-grid-resize-handle.is-resizing::after {
+  background: var(--sg-accent, #2563eb);
+  opacity: 1;
 }
 
 /* Row resize handle (counterpart of the column resize handle). Lives
@@ -907,8 +947,9 @@ select.sv-grid-fr-editor {
 
 .sv-grid-checkbox[aria-checked="true"],
 .sv-grid-checkbox[aria-checked="mixed"] {
-  border-color: var(--sg-accent, #0b63f3);
-  background: var(--sg-selection-bg, #eaf2ff);
+  border-color: var(--sg-accent, #2563eb);
+  background: var(--sg-accent, #2563eb);
+  color: var(--sg-on-accent, #fff);
 }
 
 .sv-grid-checkbox[aria-checked="true"]::after {
@@ -1108,16 +1149,49 @@ select.sv-grid-fr-editor {
   padding: 0 8px;
 }
 
-/* Filter-related inputs share the same focused-cell outline treatment. */
+/* Base look for the filter inputs (header filter row, per-column filter, the
+   global search box, and the menu's search / condition inputs). The inline cell
+   editor is styled separately - it's borderless and fills its cell. Shipping
+   this with the grid means filters look like real inputs with no host
+   stylesheet. */
+.sv-grid-column-filter,
+.sv-grid-filter-value,
+.sv-grid-global-filter input,
+.sv-grid-menu-search,
+.sv-grid-menu-condition-value {
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+  border: 1px solid var(--sg-input-border, #cbd5e1);
+  border-radius: 5px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  font: inherit;
+}
+.sv-grid-column-filter {
+  height: 28px;
+  width: 100%;
+  font-size: 0.8125rem;
+}
+.sv-grid-column-filter::placeholder,
+.sv-grid-filter-value::placeholder,
+.sv-grid-menu-search::placeholder,
+.sv-grid-global-filter input::placeholder,
+.sv-grid-cell-editor::placeholder {
+  color: var(--sg-muted, #64748b);
+  opacity: 0.7;
+}
+
+/* Calm, theme-aware focus (a soft box-shadow rather than a hard outline). */
 .sv-grid-global-filter input:focus,
 .sv-grid-filter-value:focus,
 .sv-grid-column-filter:focus,
 .sv-grid-menu-search:focus,
 .sv-grid-menu-condition-value:focus,
-.sv-grid-menu-operator:focus {
-  outline: 2px solid var(--sg-accent, #0b63f3);
-  outline-offset: -2px;
-  border-color: var(--sg-accent, #0b63f3);
+.sv-grid-menu-operator:focus,
+.sv-grid-cell-editor:focus {
+  outline: none;
+  border-color: var(--sg-accent, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
 }
 
 .sv-grid-cell-editor-number,
@@ -2010,3 +2084,207 @@ select.sv-grid-fr-editor {
   color: var(--sg-fg, #0f172a);
 }
 .sv-grid-find-step:disabled { opacity: 0.30; cursor: default; }
+
+/* ---- Pagination footer (GridFooter.svelte) ------------------------------
+   Ships with the grid so the pager is styled out of the box - previously this
+   lived only in the examples' host stylesheet, leaving bare consumers with an
+   unstyled pager. Uses --sg-* tokens with fallbacks like the rest of the theme. */
+.sv-grid-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+  padding: 12px 16px;
+  margin-top: 0;
+  border: 1px solid var(--sg-border, #e2e8f0);
+  border-top: 0;
+  border-radius: 0 0 var(--sg-radius, 6px) var(--sg-radius, 6px);
+  background: var(--sg-header-bg, #f1f5f9);
+  color: var(--sg-fg, #0f172a);
+  font-size: 13px;
+}
+.sv-grid-pagination-pagesize {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--sg-muted, #64748b);
+}
+.sv-grid-pagination-pagesize select {
+  height: 28px;
+  padding: 0 22px 0 8px;
+  border: 1px solid var(--sg-input-border, #cbd5e1);
+  border-radius: 5px;
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+.sv-grid-pagination-pagesize select:focus {
+  outline: none;
+  border-color: var(--sg-accent, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
+}
+.sv-grid-pagination-range {
+  color: var(--sg-fg, #0f172a);
+}
+.sv-grid-pagination-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.sv-grid-pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+}
+.sv-grid-pagination-btn:hover:not(:disabled) {
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-accent, #2563eb);
+}
+.sv-grid-pagination-btn:disabled {
+  color: var(--sg-muted, #64748b);
+  opacity: 0.4;
+  cursor: default;
+}
+.sv-grid-pagination-label {
+  margin: 0 8px;
+  color: var(--sg-fg, #0f172a);
+}
+
+/* ---- Menu / filter chrome completeness -----------------------------------
+   These styles previously lived only in the examples' host stylesheet. Shipping
+   them here means the column menu, filter/choose-columns popovers, facet
+   checklist, operator select, filter buttons, and the scrollbar corner are
+   fully themed out of the box for any consumer - all via --sg-* tokens. */
+
+/* Hide the scrollbar corner when its scrollbar is absent. */
+.sv-grid-no-scroll .sv-grid-scrollbar-corner,
+.sv-grid-no-scroll .sv-grid-scrollbar {
+  display: none;
+}
+/* Scrollbar corner divider uses the theme border token. */
+.sv-grid-scrollbar-corner,
+.sv-grid-scrollbar-corner-br {
+  border-bottom-color: var(--sg-border, #e2e8f0);
+}
+
+/* Filter operator <select> (the dropdown that replaced the radio group). */
+.sv-grid-menu-operator-select {
+  width: 100%;
+  height: 28px;
+  padding: 0 22px 0 8px;
+  margin-bottom: 6px;
+  border: 1px solid var(--sg-input-border, #cbd5e1);
+  border-radius: 5px;
+  background: var(--sg-input-bg, #fff);
+  color: var(--sg-fg, #0f172a);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: calc(100% - 12px) 12px, calc(100% - 8px) 12px;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+}
+.sv-grid-menu-operator-select:focus {
+  outline: none;
+  border-color: var(--sg-accent, #2563eb);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-accent, #2563eb) 40%, transparent);
+}
+/* Operator toggle button (active) uses the on-accent token. */
+.sv-grid-menu-operator-btn.is-active {
+  color: var(--sg-on-accent, #fff);
+}
+
+/* Filter-only + choose-columns popover widths. */
+.sv-grid-filter-menu {
+  width: 260px;
+}
+.sv-grid-choose-columns-menu {
+  width: 240px;
+}
+.sv-grid-choose-columns-menu .sv-grid-facet-list {
+  max-height: 280px;
+}
+
+/* Native checkboxes in the facet list pick up the theme accent. */
+.sv-grid-facet input[type="checkbox"] {
+  accent-color: var(--sg-accent, #2563eb);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+/* Submenu right-chevron on the "Choose columns" item. */
+.sv-grid-menu-item-chevron {
+  margin-left: auto;
+  transform: rotate(-90deg);
+  opacity: 0.55;
+}
+.sv-grid-menu-item.is-open .sv-grid-menu-item-chevron {
+  opacity: 1;
+}
+
+/* Magnifier prefix on the menu's search input. */
+.sv-grid-menu-search {
+  padding-left: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
+  background-position: 8px center;
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+}
+
+/* Filter menu vertical rhythm. */
+.sv-grid-menu-filter > * + * {
+  margin-top: 6px;
+}
+
+/* Column-header filter (funnel) button tints accent when a filter is active. */
+.sv-grid-col-filter-btn.is-active {
+  color: var(--sg-accent, #2563eb);
+}
+
+/* Row-number gutter: neutralize the right border so it fuses with the header. */
+.sv-grid-row-number-column,
+.sv-grid-row-number-cell {
+  border-right-color: var(--sg-header-bg, #f1f5f9);
+}
+
+/* Group row label colour. */
+.sv-grid-group-row > .sv-grid-cell {
+  color: var(--sg-header-fg, #0f172a);
+}
+
+/* Filter-row operator button: soften when idle, accent border on hover/open. */
+.sv-grid-filter-operator-btn {
+  opacity: 0.85;
+}
+.sv-grid-filter-operator-btn:hover {
+  opacity: 1;
+  border-color: var(--sg-accent, #2563eb);
+}
+.sv-grid-filter-operator-btn.is-open {
+  opacity: 1;
+}

package/src/SvGrid.svelte

@@ -1189,6 +1189,7 @@
     >
       <div
         class="sv-grid-container sv-grid-container-custom-scrollbars"
+        class:sv-grid-has-vscroll={hasMeasured && hasVerticalOverflow}
         bind:this={ctrl.scrollContainer}
         onscroll={onBodyScroll}
         style={`overflow: auto; position: relative; height: calc(100% - ${hasMeasured && hasHorizontalOverflow ? 16 : 0}px);`}

package/src/a11y.ts

@@ -50,7 +50,7 @@ export function getGridCellA11yProps(input: GridCellA11yInput = {}) {
     ...(id ? { id } : {}),
     ...(colIndex !== undefined ? { 'aria-colindex': colIndex } : {}),
     ...(rowIndex !== undefined ? { 'aria-rowindex': rowIndex } : {}),
-    ...(selected ? { 'aria-selected': true } : {}),
+    'aria-selected': selected,
   } as const
 }
 

package/src/menus.ts

@@ -373,6 +373,7 @@ export function createMenus<
       ...prev,
       pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
     }));
+    ctx.scrollContainer?.scrollTo({ top: 0 });
   }
 
   function goToPage(pageIndex: number) {
@@ -380,6 +381,7 @@ export function createMenus<
       ...prev,
       pageIndex: Math.max(0, pageIndex),
     }));
+    ctx.scrollContainer?.scrollTo({ top: 0 });
   }
 
   function setPageSize(pageSize: number) {
@@ -447,9 +449,15 @@ export function createMenus<
     const rowModel = ctx.allRows[rowIndex];
     const row = rowModel?.original ?? null;
     const rowId = rowModel?.id ?? String(rowIndex);
+    // Reserve ~280px for the menu body. If the click is in the bottom third,
+    // flip the menu above the cursor so it stays fully in the viewport.
+    const menuHeight = 280;
+    const y = event.clientY + menuHeight > window.innerHeight
+      ? Math.max(8, event.clientY - menuHeight)
+      : event.clientY;
     ctx.contextMenuPos = {
       x: clampMenuX(event.clientX, 220),
-      y: Math.max(8, Math.min(event.clientY, window.innerHeight - 16)),
+      y,
     };
     ctx.contextMenuFor = { rowIndex, colIndex, columnId, rowId, row };
   }