@alaarab/ogrid-js 2.1.7 → 2.1.9

package/dist/esm/index.js

@@ -69,6 +69,9 @@ function getCellValue(item, col) {
   if (col.valueGetter) return col.valueGetter(item);
   return item[col.columnId];
 }
+function isColumnEditable(col, item) {
+  return col.editable === true || typeof col.editable === "function" && col.editable(item);
+}
 function isColumnGroupDef(c) {
   return "children" in c && Array.isArray(c.children);
 }
@@ -757,9 +760,9 @@ function getHeaderFilterConfig(col, input) {
 function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
   const rowId = input.getRowId(item);
   const globalColIndex = colIdx + input.colOffset;
-  const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-  const canEditInline = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== "function";
-  const canEditPopup = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor === "function" && col.cellEditorPopup !== false;
+  const colEditable = isColumnEditable(col, item);
+  const canEditInline = input.editable !== false && colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== "function";
+  const canEditPopup = input.editable !== false && colEditable && !!input.onCellValueChanged && typeof col.cellEditor === "function" && col.cellEditorPopup !== false;
   const canEditAny = canEditInline || canEditPopup;
   const isEditing = input.editingCell?.rowId === rowId && input.editingCell?.columnId === col.columnId;
   const isActive = !input.isDragging && input.activeCell?.rowIndex === rowIndex && input.activeCell?.columnIndex === globalColIndex;
@@ -891,6 +894,18 @@ function measureRange(container, range, colOffset) {
     height: brRect.bottom - tlRect.top
   };
 }
+function buildCellIndex(container) {
+  const index = /* @__PURE__ */ new Map();
+  if (!container) return index;
+  const cells = container.querySelectorAll("[data-row-index][data-col-index]");
+  for (let i = 0; i < cells.length; i++) {
+    const el = cells[i];
+    const r = el.getAttribute("data-row-index") ?? "";
+    const c = el.getAttribute("data-col-index") ?? "";
+    index.set(`${r},${c}`, el);
+  }
+  return index;
+}
 function injectGlobalStyles(id, css) {
   if (typeof document === "undefined") return;
   if (document.getElementById(id)) return;
@@ -1044,8 +1059,7 @@ function applyCellDeletion(range, items, visibleCols) {
       if (r >= items.length || c >= visibleCols.length) continue;
       const item = items[r];
       const col = visibleCols[c];
-      const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(col, item)) continue;
       const oldValue = getCellValue(item, col);
       const result = parseValue("", oldValue, item, col);
       if (!result.valid) continue;
@@ -1141,8 +1155,7 @@ function applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols)
       if (targetRow >= items.length || targetCol >= visibleCols.length) continue;
       const item = items[targetRow];
       const col = visibleCols[targetCol];
-      const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(col, item)) continue;
       const rawValue = cells[c] ?? "";
       const oldValue = getCellValue(item, col);
       const result = parseValue(rawValue, oldValue, item, col);
@@ -1165,8 +1178,7 @@ function applyCutClear(cutRange, items, visibleCols) {
       if (r >= items.length || c >= visibleCols.length) continue;
       const item = items[r];
       const col = visibleCols[c];
-      const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(col, item)) continue;
       const oldValue = getCellValue(item, col);
       const result = parseValue("", oldValue, item, col);
       if (!result.valid) continue;
@@ -1193,8 +1205,7 @@ function applyFillValues(range, sourceRow, sourceCol, items, visibleCols) {
       if (row >= items.length || col >= visibleCols.length) continue;
       const item = items[row];
       const colDef = visibleCols[col];
-      const colEditable = colDef.editable === true || typeof colDef.editable === "function" && colDef.editable(item);
-      if (!colEditable) continue;
+      if (!isColumnEditable(colDef, item)) continue;
       const oldValue = getCellValue(item, colDef);
       const result = parseValue(startValue, oldValue, item, colDef);
       if (!result.valid) continue;
@@ -5809,86 +5820,107 @@ var OGridRendering = class {
 // src/OGrid.ts
 var OGRID_THEME_CSS = `
 .ogrid-drag-target { box-shadow: inset 0 0 0 1px var(--ogrid-accent, #0078d4); }
-:root {
+:where(:root) {
   --ogrid-bg: #ffffff;
   --ogrid-fg: rgba(0, 0, 0, 0.87);
   --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
   --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
   --ogrid-border: rgba(0, 0, 0, 0.12);
-  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-border-strong: rgba(0, 0, 0, 0.5);
+  --ogrid-border-hover: rgba(0, 0, 0, 0.3);
+  --ogrid-header-bg: #f5f5f5;
   --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
   --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-bg-selected-hover: #dae8f8;
   --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
   --ogrid-range-bg: rgba(33, 115, 70, 0.12);
   --ogrid-accent: #0078d4;
+  --ogrid-accent-dark: #005a9e;
   --ogrid-selection-color: #217346;
-  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
-  --ogrid-bg-subtle: #f3f2f1;
+  --ogrid-primary: #0078d4;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #106ebe;
+  --ogrid-bg-subtle: #f5f5f5;
   --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
-  --ogrid-bg-selected: #e6f0fb;
-  --ogrid-bg-selected-hover: #dae8f8;
-  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-active-bg: rgba(0, 0, 0, 0.06);
   --ogrid-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
   --ogrid-selection: #217346;
-  --ogrid-primary: #217346;
-  --ogrid-primary-fg: #fff;
+  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-bg-selected: #e6f0fb;
   --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
-  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-}
-[data-theme='dark'] {
-  --ogrid-bg: #1e1e1e;
-  --ogrid-fg: rgba(255, 255, 255, 0.87);
-  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
-  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
-  --ogrid-border: rgba(255, 255, 255, 0.12);
-  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
-  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
-  --ogrid-selected-row-bg: #1a3a5c;
-  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
-  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
-  --ogrid-accent: #4da6ff;
-  --ogrid-selection-color: #2ea043;
-  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-  --ogrid-bg-subtle: #2a2a2a;
-  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
-  --ogrid-bg-selected: #1a3a5c;
-  --ogrid-bg-selected-hover: #1f426b;
-  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
-  --ogrid-muted: rgba(255, 255, 255, 0.5);
-  --ogrid-selection: #2ea043;
-  --ogrid-primary: #2ea043;
-  --ogrid-primary-fg: #fff;
-  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
-  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
 }
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
+  :where(:root:not([data-theme="light"])) {
     --ogrid-bg: #1e1e1e;
     --ogrid-fg: rgba(255, 255, 255, 0.87);
     --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
     --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
     --ogrid-border: rgba(255, 255, 255, 0.12);
-    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+    --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+    --ogrid-header-bg: #2c2c2c;
     --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
     --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-bg-selected-hover: #1f3650;
     --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
     --ogrid-range-bg: rgba(46, 160, 67, 0.15);
     --ogrid-accent: #4da6ff;
+    --ogrid-accent-dark: #3390e0;
     --ogrid-selection-color: #2ea043;
-    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-    --ogrid-bg-subtle: #2a2a2a;
+    --ogrid-primary: #4da6ff;
+    --ogrid-primary-fg: #fff;
+    --ogrid-primary-hover: #66b3ff;
+    --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
     --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
-    --ogrid-bg-selected: #1a3a5c;
-    --ogrid-bg-selected-hover: #1f426b;
-    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-active-bg: rgba(255, 255, 255, 0.08);
     --ogrid-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
     --ogrid-selection: #2ea043;
-    --ogrid-primary: #2ea043;
-    --ogrid-primary-fg: #fff;
+    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-bg-selected: #1a3a5c;
     --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
-    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
   }
 }
+:where([data-theme='dark']) {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+  --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+  --ogrid-header-bg: #2c2c2c;
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-bg-selected-hover: #1f3650;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-accent-dark: #3390e0;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-primary: #4da6ff;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #66b3ff;
+  --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
+  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+  --ogrid-active-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-selection: #2ea043;
+  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+  --ogrid-bg-selected: #1a3a5c;
+  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+}
 `;
 var OGrid = class {
   constructor(container, options) {
@@ -6340,4 +6372,4 @@ var OGrid = class {
   }
 };
 
-export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, EventEmitter, FillHandleState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VirtualScrollState, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds };
+export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ClipboardState, ColumnChooser, ColumnPinningState, ColumnReorderState, ColumnResizeState, ContextMenu, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, EventEmitter, FillHandleState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridState, HeaderFilter, HeaderFilterState, InlineCellEditor, KeyboardNavState, MAX_PAGE_BUTTONS, MarchingAntsOverlay, OGrid, OGridEventWiring, OGridRendering, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, PaginationControls, ROW_NUMBER_COLUMN_WIDTH, RowSelectionState, SIDEBAR_TRANSITION_MS, SelectionState, SideBar, SideBarState, StatusBar, TableLayoutState, TableRenderer, UndoRedoStack, UndoRedoState, VirtualScrollState, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCellIndex, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isColumnEditable, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds };

package/dist/styles/ogrid.css

@@ -4,112 +4,113 @@
    Override any --ogrid-* variable to customize.
    ────────────────────────────────────────────────────────────── */
 
-/* ── Light Theme (default) ── */
-:root {
+/* ── Light Theme (default) — :where() for zero specificity ── */
+:where(:root) {
   --ogrid-bg: #ffffff;
   --ogrid-fg: rgba(0, 0, 0, 0.87);
   --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
   --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
   --ogrid-border: rgba(0, 0, 0, 0.12);
-  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-border-strong: rgba(0, 0, 0, 0.5);
+  --ogrid-border-hover: rgba(0, 0, 0, 0.3);
+  --ogrid-header-bg: #f5f5f5;
   --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
   --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-bg-selected-hover: #dae8f8;
   --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
   --ogrid-range-bg: rgba(33, 115, 70, 0.12);
   --ogrid-accent: #0078d4;
+  --ogrid-accent-dark: #005a9e;
   --ogrid-selection-color: #217346;
-  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
-  /* Aliases for backward compat */
-  --ogrid-border-strong: #888;
-  --ogrid-border-hover: #999;
-  --ogrid-bg-subtle: #f3f2f1;
+  --ogrid-primary: #0078d4;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #106ebe;
+  --ogrid-bg-subtle: #f5f5f5;
   --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
-  --ogrid-bg-selected: #e6f0fb;
-  --ogrid-bg-selected-hover: #dae8f8;
-  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-active-bg: rgba(0, 0, 0, 0.06);
   --ogrid-muted: rgba(0, 0, 0, 0.5);
-  --ogrid-selection: #217346;
-  --ogrid-primary: #217346;
-  --ogrid-primary-fg: #fff;
-  --ogrid-primary-hover: #1b5f39;
-  --ogrid-accent-dark: #1b5f39;
   --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  --ogrid-selection: #217346;
+  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-bg-selected: #e6f0fb;
   --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
-  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.12);
-}
-
-/* ── Dark Theme ── */
-[data-theme='dark'] {
-  --ogrid-bg: #1e1e1e;
-  --ogrid-fg: rgba(255, 255, 255, 0.87);
-  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
-  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
-  --ogrid-border: rgba(255, 255, 255, 0.12);
-  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
-  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
-  --ogrid-selected-row-bg: #1a3a5c;
-  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
-  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
-  --ogrid-accent: #4da6ff;
-  --ogrid-selection-color: #2ea043;
-  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-  /* Aliases for backward compat */
-  --ogrid-border-strong: #555;
-  --ogrid-border-hover: #666;
-  --ogrid-bg-subtle: #2a2a2a;
-  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
-  --ogrid-bg-selected: #1a3a5c;
-  --ogrid-bg-selected-hover: #1f426b;
-  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
-  --ogrid-muted: rgba(255, 255, 255, 0.5);
-  --ogrid-selection: #2ea043;
-  --ogrid-primary: #2ea043;
-  --ogrid-primary-fg: #fff;
-  --ogrid-primary-hover: #3db852;
-  --ogrid-accent-dark: #3db852;
-  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
-  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
-  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
-  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
 }
 
+/* ── Auto Dark (system preference) ── */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
+  :where(:root:not([data-theme="light"])) {
     --ogrid-bg: #1e1e1e;
     --ogrid-fg: rgba(255, 255, 255, 0.87);
     --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
     --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
     --ogrid-border: rgba(255, 255, 255, 0.12);
-    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+    --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+    --ogrid-header-bg: #2c2c2c;
     --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
     --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-bg-selected-hover: #1f3650;
     --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
     --ogrid-range-bg: rgba(46, 160, 67, 0.15);
     --ogrid-accent: #4da6ff;
+    --ogrid-accent-dark: #3390e0;
     --ogrid-selection-color: #2ea043;
-    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
-    /* Aliases for backward compat */
-    --ogrid-border-strong: #555;
-    --ogrid-border-hover: #666;
-    --ogrid-bg-subtle: #2a2a2a;
+    --ogrid-primary: #4da6ff;
+    --ogrid-primary-fg: #fff;
+    --ogrid-primary-hover: #66b3ff;
+    --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
     --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
-    --ogrid-bg-selected: #1a3a5c;
-    --ogrid-bg-selected-hover: #1f426b;
-    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-active-bg: rgba(255, 255, 255, 0.08);
     --ogrid-muted: rgba(255, 255, 255, 0.5);
-    --ogrid-selection: #2ea043;
-    --ogrid-primary: #2ea043;
-    --ogrid-primary-fg: #fff;
-    --ogrid-primary-hover: #3db852;
-    --ogrid-accent-dark: #3db852;
-    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
     --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    --ogrid-selection: #2ea043;
+    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-bg-selected: #1a3a5c;
     --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
-    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.4);
   }
 }
 
+/* ── Explicit Dark ── */
+:where([data-theme='dark']) {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+  --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+  --ogrid-header-bg: #2c2c2c;
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-bg-selected-hover: #1f3650;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-accent-dark: #3390e0;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-primary: #4da6ff;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #66b3ff;
+  --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
+  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+  --ogrid-active-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-selection: #2ea043;
+  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+  --ogrid-bg-selected: #1a3a5c;
+  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+}
+
 /* ── Layout ── */
 
 .ogrid-container {
@@ -316,6 +317,7 @@
 
 .ogrid-table tbody td {
   padding: 6px 10px;
+  background: var(--ogrid-bg, #ffffff);
   border-bottom: 1px solid var(--ogrid-border, #e8e8e8);
   position: relative;
   color: var(--ogrid-fg, #242424);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.7"
+    "@alaarab/ogrid-core": "2.1.9"
   },
   "sideEffects": [
     "**/*.css"