@alaarab/ogrid-angular-material 2.0.11 → 2.0.13

package/dist/esm/column-chooser/column-chooser.component.js

@@ -67,20 +67,24 @@ ColumnChooserComponent = __decorate([
     .ogrid-column-chooser { position: relative; }
     .ogrid-column-chooser__trigger {
       display: inline-flex; align-items: center; gap: 6px;
-      padding: 6px 12px; border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      padding: 6px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
       background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;
       text-transform: none; white-space: nowrap;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
+    .ogrid-column-chooser__trigger:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-column-chooser__caret { font-size: 10px; }
     .ogrid-column-chooser__dropdown {
       position: absolute; top: 100%; right: 0; z-index: 10;
       min-width: 220px; margin-top: 4px;
-      background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     }
     .ogrid-column-chooser__header {
       padding: 8px 12px; font-size: 14px; font-weight: 600;
-      border-bottom: 1px solid rgba(0,0,0,0.12); background: #fafafa;
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-column-chooser__list {
       max-height: 320px; overflow-y: auto; padding: 4px 0;
@@ -88,22 +92,25 @@ ColumnChooserComponent = __decorate([
     .ogrid-column-chooser__item {
       display: flex; align-items: center; gap: 8px;
       padding: 4px 12px; min-height: 32px; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-column-chooser__item:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-column-chooser__item:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-column-chooser__footer {
       display: flex; justify-content: flex-end; gap: 8px;
-      padding: 8px 12px; border-top: 1px solid rgba(0,0,0,0.12); background: #fafafa;
+      padding: 8px 12px; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
     .ogrid-column-chooser__btn {
       padding: 4px 12px; border: none; border-radius: 4px;
       background: transparent; cursor: pointer; font-size: 13px; text-transform: none;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-column-chooser__btn:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-column-chooser__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-column-chooser__btn--primary {
       background: var(--mat-sys-primary, #1976d2); color: #fff;
     }
     .ogrid-column-chooser__btn--primary:hover {
-      background: var(--mat-sys-primary, #1565c0);
+      opacity: 0.9;
     }
   `],
         host: {

package/dist/esm/column-header-filter/column-header-filter.component.js

@@ -232,9 +232,9 @@ ColumnHeaderFilterComponent = __decorate([
       width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;
       background: transparent; cursor: pointer; font-size: 12px; line-height: 1;
       display: inline-flex; align-items: center; justify-content: center; position: relative;
-      color: rgba(0,0,0,0.54);
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
     }
-    .ogrid-header-filter__btn:hover { background: rgba(0,0,0,0.08); }
+    .ogrid-header-filter__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); }
     .ogrid-header-filter__btn--active { color: var(--mat-sys-primary, #1976d2); }
     .ogrid-header-filter__filter-btn {
       width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;
@@ -243,17 +243,17 @@ ColumnHeaderFilterComponent = __decorate([
       opacity: 0.6; transition: opacity 0.15s;
     }
     .ogrid-header-filter:hover .ogrid-header-filter__filter-btn { opacity: 0.8; }
-    .ogrid-header-filter__filter-btn:hover { background: rgba(0,0,0,0.08); opacity: 1 !important; }
+    .ogrid-header-filter__filter-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); opacity: 1 !important; }
     .ogrid-header-filter__filter-btn--active { opacity: 1 !important; }
     .ogrid-header-filter__funnel {
       display: block; width: 0; height: 0;
       border-left: 5px solid transparent; border-right: 5px solid transparent;
-      border-top: 6px solid rgba(0,0,0,0.65);
+      border-top: 6px solid var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65));
       position: relative;
     }
     .ogrid-header-filter__funnel::after {
       content: ''; display: block; width: 2px; height: 4px;
-      background: rgba(0,0,0,0.65); position: absolute;
+      background: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65)); position: absolute;
       top: -1px; left: -1px;
     }
     .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel {
@@ -269,24 +269,26 @@ ColumnHeaderFilterComponent = __decorate([
     }
     .ogrid-header-filter__popover {
       position: fixed; z-index: 10000;
-      background: #ffffff; border: 1px solid rgba(0,0,0,0.2);
-      border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.1);
-      margin-top: 4px;
+      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.2));
+      border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
+      margin-top: 4px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-header-filter__popover-header {
       padding: 8px 12px; font-size: 14px; font-weight: 600;
-      border-bottom: 1px solid rgba(0,0,0,0.12);
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-header-filter__popover-body { }
     .ogrid-header-filter__popover-actions {
       display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px;
     }
     .ogrid-header-filter__input {
-      width: 100%; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.23);
+      width: 100%; padding: 8px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23));
       border-radius: 4px; font-size: 14px; box-sizing: border-box;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-header-filter__input:focus { outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -1px; }
-    .ogrid-header-filter__options-info { margin-top: 4px; font-size: 12px; color: rgba(0,0,0,0.6); }
+    .ogrid-header-filter__options-info { margin-top: 4px; font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
     .ogrid-header-filter__select-actions {
       display: flex; justify-content: space-between; padding: 4px 12px;
     }
@@ -294,40 +296,44 @@ ColumnHeaderFilterComponent = __decorate([
     .ogrid-header-filter__option {
       display: flex; align-items: center; gap: 8px;
       padding: 4px 8px; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-header-filter__option:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-header-filter__option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-header-filter__loading, .ogrid-header-filter__empty {
-      padding: 16px; text-align: center; font-size: 14px; color: rgba(0,0,0,0.6);
+      padding: 16px; text-align: center; font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
     }
     .ogrid-header-filter__action-btn {
       padding: 4px 12px; border: none; border-radius: 4px;
       background: transparent; cursor: pointer; font-size: 13px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-header-filter__action-btn:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-header-filter__action-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-header-filter__action-btn:disabled { opacity: 0.38; cursor: default; }
     .ogrid-header-filter__action-btn--primary {
       background: var(--mat-sys-primary, #1976d2); color: #fff;
     }
-    .ogrid-header-filter__action-btn--primary:hover { background: var(--mat-sys-primary, #1565c0); }
+    .ogrid-header-filter__action-btn--primary:hover { opacity: 0.9; }
     .ogrid-header-filter__people-selected {
-      padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.12);
+      padding: 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
-    .ogrid-header-filter__people-info-label { font-size: 12px; color: rgba(0,0,0,0.6); }
+    .ogrid-header-filter__people-info-label { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
     .ogrid-header-filter__people-card {
       display: flex; align-items: center; gap: 8px; margin-top: 4px;
     }
     .ogrid-header-filter__people-avatar {
-      width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.08);
+      width: 32px; height: 32px; border-radius: 50%; background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
       display: flex; align-items: center; justify-content: center;
       font-size: 14px; font-weight: 600; flex-shrink: 0;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-header-filter__people-details { flex: 1; min-width: 0; font-size: 14px; }
+    .ogrid-header-filter__people-details { flex: 1; min-width: 0; font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
     .ogrid-header-filter__people-details > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .ogrid-header-filter__people-email { font-size: 12px; color: rgba(0,0,0,0.6); }
+    .ogrid-header-filter__people-email { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
     .ogrid-header-filter__people-option {
       display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-header-filter__people-option:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-header-filter__people-option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
   `],
         host: {
             '(document:click)': 'onDocumentClickWrapper($event)',

package/dist/esm/column-header-menu/column-header-menu.component.js

@@ -121,12 +121,12 @@ ColumnHeaderMenuComponent = __decorate([
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      color: rgba(0,0,0,0.54);
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
     }
 
     .column-header-menu-trigger:hover {
-      background: rgba(0,0,0,0.08);
-      color: rgba(0,0,0,0.87);
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

package/dist/esm/datagrid-table/datagrid-table.component.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ChangeDetectionStrategy, Input, ViewChild, signal } from '@angular/core';
-import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, StatusBarComponent, GridContextMenuComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, signal } from '@angular/core';
+import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, StatusBarComponent, GridContextMenuComponent, EmptyStateComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
 import { InlineCellEditorComponent } from './inline-cell-editor.component';
@@ -40,7 +40,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             onUnpin: () => this.onUnpinColumn(columnId),
             onSortAsc: () => this.onSortAsc(columnId),
             onSortDesc: () => this.onSortDesc(columnId),
-            onClearSort: () => this.onClearSort(),
+            onClearSort: () => this.onClearSort(columnId),
             onAutosizeThis: () => this.onAutosizeColumn(columnId),
             onAutosizeAll: () => this.onAutosizeAllColumns(),
             onClose: () => { }
@@ -61,7 +61,8 @@ DataGridTableComponent = __decorate([
         selector: 'ogrid-datagrid-table',
         standalone: true,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
+        encapsulation: ViewEncapsulation.None,
+        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
         providers: [DataGridStateService],
         template: `
     <div class="ogrid-datagrid-root">
@@ -70,6 +71,7 @@ DataGridTableComponent = __decorate([
         class="ogrid-datagrid-wrapper"
         [class.ogrid-datagrid-wrapper--fit]="layoutModeFit()"
         [class.ogrid-datagrid-wrapper--overflow-x]="allowOverflowX()"
+        [class.ogrid-datagrid-wrapper--loading-empty]="isLoading() && items().length === 0"
         tabindex="0"
         role="region"
         [attr.aria-label]="ariaLabel()"
@@ -226,6 +228,7 @@ DataGridTableComponent = __decorate([
                         @for (colLayout of columnLayouts(); track colLayout.col.columnId; let colIdx = $index) {
                           <td
                             class="ogrid-datagrid-td"
+                            [attr.data-column-id]="colLayout.col.columnId"
                             [class.ogrid-datagrid-td--pinned-left]="colLayout.pinnedLeft"
                             [class.ogrid-datagrid-td--pinned-right]="colLayout.pinnedRight"
                             [style.minWidth.px]="colLayout.minWidth"
@@ -315,15 +318,12 @@ DataGridTableComponent = __decorate([
                 <div class="ogrid-datagrid-empty">
                   <div class="ogrid-datagrid-empty__title">No results found</div>
                   <div class="ogrid-datagrid-empty__message">
-                    @if (emptyState()!.message != null) {
-                      {{ emptyState()!.message }}
-                    } @else if (emptyState()!.hasActiveFilters) {
-                      No items match your current filters. Try adjusting your search or
-                      <button class="ogrid-datagrid-empty__clear" (click)="emptyState()!.onClearAll?.()">clear all filters</button>
-                      to see all items.
-                    } @else {
-                      There are no items available at this time.
-                    }
+                    <ogrid-empty-state
+                      [message]="emptyState()?.message"
+                      [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
+                      [render]="emptyState()?.render"
+                      (clearAll)="emptyState()?.onClearAll()"
+                    ></ogrid-empty-state>
                   </div>
                 </div>
               }
@@ -381,44 +381,95 @@ DataGridTableComponent = __decorate([
     </div>
   `,
         styles: [`
+    /* ─── OGrid Theme Variables ─── */
+    :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-hover-bg: rgba(0, 0, 0, 0.04);
+      --ogrid-selected-row-bg: #e6f0fb;
+      --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+      --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+      --ogrid-accent: #0078d4;
+      --ogrid-selection-color: #217346;
+      --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+    }
+    @media (prefers-color-scheme: dark) {
+      :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-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);
+      }
+    }
+    [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);
+    }
     :host { display: block; }
     .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
     .ogrid-datagrid-wrapper {
       position: relative; flex: 1; min-height: 0; width: 100%; max-width: 100%;
-      overflow-x: hidden; overflow-y: auto; background: #fff;
+      overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
       will-change: scroll-position; outline: none;
     }
-    .ogrid-datagrid-wrapper [data-drag-range] { background: rgba(33, 115, 70, 0.12) !important; }
+    .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
     .ogrid-datagrid-wrapper--fit { width: fit-content; }
     .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }
+    .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }
     .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }
     .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }
     .ogrid-datagrid-table {
       width: 100%; border-collapse: collapse; table-layout: fixed;
     }
     .ogrid-datagrid-thead {
-      z-index: 8; background: rgba(0,0,0,0.04);
+      z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
-    .ogrid-datagrid-thead th { background: rgba(0,0,0,0.04); }
-    .ogrid-datagrid-header-row { background: rgba(0,0,0,0.04); }
+    .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-datagrid-th {
       font-weight: 600; position: sticky; top: 0; padding: 6px 10px; text-align: left;
-      font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.12);
-      background: rgba(0,0,0,0.04); z-index: 8;
+      font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-datagrid-th:focus-visible {
-      outline: 2px solid #1976d2; outline-offset: -2px; z-index: 11;
+      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;
     }
     .ogrid-datagrid-th--pinned-left {
-      position: sticky; top: 0; left: 0; z-index: 10; background: rgba(0,0,0,0.04); will-change: transform;
-      border-right: 2px solid rgba(0,0,0,0.12);
+      position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;
+      border-right: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
     .ogrid-datagrid-th--pinned-right {
-      position: sticky; top: 0; right: 0; z-index: 10; background: rgba(0,0,0,0.04); will-change: transform;
-      border-left: 2px solid rgba(0,0,0,0.12);
+      position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;
+      border-left: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
     .ogrid-datagrid-group-header {
-      text-align: center; font-weight: 600; border-bottom: 2px solid rgba(0,0,0,0.12); padding: 6px;
+      text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;
     }
     .ogrid-datagrid-checkbox-col {
       width: ${CHECKBOX_COLUMN_WIDTH}px; min-width: ${CHECKBOX_COLUMN_WIDTH}px;
@@ -428,8 +479,8 @@ DataGridTableComponent = __decorate([
     .ogrid-row-number-header, .ogrid-row-number-cell {
       width: ${ROW_NUMBER_COLUMN_WIDTH}px; min-width: ${ROW_NUMBER_COLUMN_WIDTH}px;
       max-width: ${ROW_NUMBER_COLUMN_WIDTH}px; text-align: center;
-      background: rgba(0,0,0,0.04); font-weight: 600;
-      font-variant-numeric: tabular-nums; color: rgba(0,0,0,0.6);
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;
+      font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
       position: sticky; left: 0; z-index: 3;
     }
     .ogrid-row-number-header { z-index: 4; }
@@ -437,51 +488,53 @@ DataGridTableComponent = __decorate([
       display: flex; align-items: center; justify-content: center;
     }
     .ogrid-datagrid-row { }
-    .ogrid-datagrid-row:hover { background: rgba(0,0,0,0.04); }
-    .ogrid-datagrid-row--selected { background: rgba(25,118,210,0.08); }
-    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid rgba(0,0,0,0.06); }
+    .ogrid-datagrid-row:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-datagrid-row--selected { background: var(--ogrid-selected-row-bg, #e6f0fb); }
+    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }
     .ogrid-datagrid-td--pinned-left {
-      position: sticky; left: 0; z-index: 6; background: #fff; will-change: transform;
-      border-right: 2px solid rgba(0,0,0,0.12);
+      position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;
+      border-right: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
     .ogrid-datagrid-td--pinned-right {
-      position: sticky; right: 0; z-index: 6; background: #fff; will-change: transform;
-      border-left: 2px solid rgba(0,0,0,0.12);
+      position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;
+      border-left: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
     .ogrid-datagrid-cell {
       width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
       padding: 6px 10px; box-sizing: border-box; overflow: hidden;
       text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;
-      font-size: 14px;
+      font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-datagrid-cell:focus-visible {
-      outline: 2px solid #1976d2; outline-offset: -2px; z-index: 3;
+      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;
     }
     .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }
     .ogrid-datagrid-cell--boolean { justify-content: center; text-align: center; }
     .ogrid-datagrid-cell--editable { cursor: cell; }
     .ogrid-datagrid-cell--active {
-      outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px;
+      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
       z-index: 2; position: relative; overflow: visible;
     }
-    .ogrid-datagrid-cell--in-range { background: var(--ogrid-bg-range, rgba(33, 115, 70, 0.12)); }
-    .ogrid-datagrid-cell--in-cut-range { background: rgba(0,0,0,0.04); opacity: 0.7; }
+    .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
+    .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }
     .ogrid-datagrid-cell--editing { padding: 0; }
     .ogrid-datagrid-editor-input {
-      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection, #217346);
+      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);
       box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {
       text-align: right;
     }
     .ogrid-datagrid-editor-select {
-      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection, #217346);
+      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection-color, #217346);
       box-sizing: border-box; font-size: 14px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-datagrid-fill-handle {
       position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
-      background: var(--ogrid-selection, #217346);
-      border: 1px solid var(--ogrid-bg, #fff); border-radius: 1px;
+      background: var(--ogrid-selection-color, #217346);
+      border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;
       cursor: crosshair; pointer-events: auto; z-index: 3;
     }
     .ogrid-datagrid-resize-handle {
@@ -490,16 +543,16 @@ DataGridTableComponent = __decorate([
     }
     .ogrid-datagrid-resize-handle::after {
       content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;
-      background: rgba(0,0,0,0.12); border-radius: 1px; transition: background 0.15s;
+      background: var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 1px; transition: background 0.15s;
     }
-    .ogrid-datagrid-resize-handle:hover::after { background: rgba(0,0,0,0.4); }
+    .ogrid-datagrid-resize-handle:hover::after { background: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4)); }
     .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }
     .ogrid-datagrid-empty {
-      padding: 32px 16px; text-align: center; border-top: 1px solid rgba(0,0,0,0.12);
-      background: rgba(0,0,0,0.04);
+      padding: 32px 16px; text-align: center; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
-    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
-    .ogrid-datagrid-empty__message { font-size: 14px; color: rgba(0,0,0,0.6); }
+    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
+    .ogrid-datagrid-empty__message { font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
     .ogrid-datagrid-empty__clear {
       background: none; border: none; color: var(--mat-sys-primary, #1976d2);
       cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;
@@ -507,26 +560,42 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-loading-overlay {
       position: absolute; inset: 0; z-index: 2;
       display: flex; align-items: center; justify-content: center;
-      background: rgba(255,255,255,0.7);
+      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
     }
     .ogrid-datagrid-loading-inner {
       display: flex; flex-direction: column; align-items: center; gap: 8px;
-      padding: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
+      padding: 16px; background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-datagrid-spinner {
-      width: 24px; height: 24px; border: 3px solid rgba(0,0,0,0.12);
+      width: 24px; height: 24px; border: 3px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       border-top-color: var(--mat-sys-primary, #1976d2);
       border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;
     }
     @keyframes ogrid-spin { to { transform: rotate(360deg); } }
     .ogrid-datagrid-drop-indicator {
       position: absolute; top: 0; bottom: 0; width: 3px;
-      background: var(--ogrid-primary, #217346);
+      background: var(--ogrid-selection-color, #217346);
       pointer-events: none; z-index: 100; transition: left 0.05s;
     }
     .ogrid-datagrid-context-menu-overlay {
       position: fixed; inset: 0; z-index: 1000;
     }
+
+    /* Angular Material Menu popup dark mode overrides */
+    .mat-mdc-menu-panel {
+      background: var(--ogrid-bg, #ffffff) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .mat-mdc-menu-item {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .mat-mdc-menu-item:hover:not([disabled]) {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+    }
+    .mat-mdc-menu-item .mat-mdc-menu-item-text {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
   `],
     })
 ], DataGridTableComponent);

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -109,9 +109,10 @@ PopoverCellEditorComponent = __decorate([
       display: flex; align-items: center; justify-content: center;
     }
     .ogrid-popover-editor-content {
-      background: #fff; border-radius: 4px; padding: 16px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       max-width: 90vw; max-height: 90vh; overflow: auto;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

package/dist/esm/ogrid/ogrid.component.js

@@ -52,6 +52,7 @@ OGridComponent = __decorate([
             PaginationControlsComponent,
         ],
         providers: [OGridService],
+        styles: [`:host { display: block; height: 100%; }`],
         template: `
     <ogrid-layout
       [className]="ogridService.className()"

package/dist/esm/pagination-controls/pagination-controls.component.js

@@ -97,25 +97,29 @@ PaginationControlsComponent = __decorate([
     .ogrid-pagination {
       display: flex; align-items: center; justify-content: space-between;
       flex-wrap: wrap; gap: 8px; padding: 6px 12px; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-pagination__info { color: rgba(0,0,0,0.6); }
+    .ogrid-pagination__info { color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
     .ogrid-pagination__pages { display: flex; align-items: center; gap: 2px; }
     .ogrid-pagination__btn {
       min-width: 32px; height: 32px; padding: 0 6px;
-      border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
       background: transparent; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
+    .ogrid-pagination__btn:hover:not(:disabled) { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-pagination__btn:disabled { opacity: 0.38; cursor: default; }
     .ogrid-pagination__btn--active {
       background: var(--mat-sys-primary, #1976d2); color: #fff;
       border-color: var(--mat-sys-primary, #1976d2);
     }
-    .ogrid-pagination__ellipsis { margin: 0 4px; color: rgba(0,0,0,0.6); }
-    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; }
+    .ogrid-pagination__ellipsis { margin: 0 4px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
     .ogrid-pagination__size select {
       min-width: 60px; height: 32px; padding: 4px 8px;
-      border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
       font-size: 14px; margin-left: 8px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "description": "OGrid Angular Material – MatTable-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -14,7 +14,9 @@
   },
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json",
-    "test": "jest --passWithNoTests"
+    "test": "jest --passWithNoTests",
+    "storybook": "ng run angular-material:storybook",
+    "build-storybook": "ng run angular-material:build-storybook"
   },
   "keywords": [
     "ogrid",
@@ -35,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.11"
+    "@alaarab/ogrid-angular": "2.0.13"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
@@ -54,7 +56,14 @@
     "@angular/platform-browser-dynamic": "^21.1.4",
     "rxjs": "^7.8.2",
     "typescript": "^5.9.3",
-    "zone.js": "^0.15.0"
+    "zone.js": "^0.15.0",
+    "@angular/cli": "^21.1.4",
+    "@angular/compiler-cli": "^21.1.4",
+    "@angular-devkit/core": "^21.1.4",
+    "@angular-devkit/architect": "^0.2101.4",
+    "@angular-devkit/build-angular": "^21.1.4",
+    "@storybook/angular": "^10.2.8",
+    "storybook": "^10.2.8"
   },
   "sideEffects": false,
   "publishConfig": {