@keenmate/web-grid 1.0.1 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.0.1",
+	"version": "1.0.4",
 	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
 	"type": "module",
 	"main": "./dist/web-grid.umd.js",

package/src/css/_cell-selection.css

@@ -7,7 +7,7 @@
 .wg__cell--in-range {
   background: var(--wg-cell-selection-bg) !important;
   position: relative;
-  z-index: 1;
+  z-index: var(--wg-z-cell-highlight);
 }
 
 /* Don't highlight when cell is editing */
@@ -27,13 +27,13 @@
 
 /* Range border - thick blue border around entire range
    Shown during drag AND after selection completes.
-   z-index must be below frozen cells (sticky, z-index: 1-2) so the border
+   z-index must be below frozen cells so the border
    scrolls behind frozen columns instead of bleeding over them. */
 .wg__cell-range-border {
   position: absolute;
   border: var(--wg-cell-selection-border-width) solid var(--wg-cell-selection-border);
   pointer-events: none;
-  z-index: 0;
+  z-index: var(--wg-z-selection-border);
   box-sizing: border-box;
   border-radius: 1px;
 }
@@ -69,7 +69,7 @@
   position: absolute;
   border: var(--wg-selection-border-width) solid var(--wg-selection-border-color);
   pointer-events: none;
-  z-index: 0;
+  z-index: var(--wg-z-selection-border);
   box-sizing: border-box;
   border-radius: 1px;
 }

package/src/css/_cells.css

@@ -76,7 +76,7 @@
   background: var(--wg-surface-1);
   outline: 2px solid var(--wg-accent-color);
   outline-offset: -2px;
-  z-index: 1;  /* Paint above neighboring cells so outline isn't hidden */
+  z-index: var(--wg-z-cell-highlight);  /* Paint above neighboring cells so outline isn't hidden */
 }
 
 /* Hide the dashed hover border when editing */

package/src/css/_dark-mode.css

@@ -32,6 +32,9 @@
     --wg-active-bg: #4a4a4a;
     --wg-danger-bg-light: #442726;
     --wg-danger-color: #f87c86;
+    --wg-dirty-indicator-color: #ffa940;
+    --wg-dirty-cell-bg: rgba(255, 169, 64, 0.12);
+    --wg-dirty-row-number-border-color: #ffa940;
   }
 }
 
@@ -56,6 +59,8 @@
   --wg-active-bg: #4a4a4a;
   --wg-danger-bg-light: #442726;
   --wg-danger-color: #f87c86;
+  --wg-dirty-indicator-color: #ffa940;
+  --wg-dirty-row-number-border-color: #ffa940;
 }
 
 /* ==============================================================================

package/src/css/_dirty-indicator.css

@@ -0,0 +1,37 @@
+/* ==============================================================================
+   DIRTY INDICATOR (Unsaved Changes)
+   ==============================================================================
+   Shows a small triangle in the top-left corner of cells that have been edited
+   but not yet saved/committed to the original data.
+*/
+
+/* Dirty cell - subtle background tint */
+.wg__cell--dirty {
+  background: var(--wg-dirty-cell-bg) !important;
+}
+
+/* Dirty cell - small corner triangle via ::before */
+.wg__cell--dirty::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: var(--wg-dirty-indicator-size) var(--wg-dirty-indicator-size) 0 0;
+  border-color: var(--wg-dirty-indicator-color) transparent transparent transparent;
+  pointer-events: none;
+}
+
+/* Don't show dirty indicator when cell is being actively edited */
+.wg__cell--dirty.wg__cell--editing::before {
+  display: none;
+}
+
+/* Row number dirty indicator - left border accent */
+.wg__row-number--dirty {
+  box-shadow:
+    inset 3px 0 0 var(--wg-dirty-row-number-border-color),
+    inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
+}

package/src/css/_fill-handle.css

@@ -12,7 +12,7 @@
   background: var(--wg-fill-handle-bg);
   border: var(--wg-fill-handle-border-width) solid var(--wg-fill-handle-border-color);
   cursor: crosshair;
-  z-index: 10;
+  z-index: var(--wg-z-fill-handle);
   pointer-events: auto;
   box-sizing: border-box;
 }
@@ -28,7 +28,7 @@
   background: var(--wg-fill-range-bg);
   border: 1px dashed var(--wg-fill-range-border-color);
   pointer-events: none;
-  z-index: 5;
+  z-index: var(--wg-z-fill-handle-area);
   box-sizing: border-box;
 }
 

package/src/css/_freeze.css

@@ -10,6 +10,7 @@
 
 .wg__header--frozen {
   background: var(--wg-frozen-header-bg, var(--wg-header-bg));
+  z-index: var(--wg-z-frozen-header) !important;
 }
 
 /* Selected frozen header (column selection) */
@@ -19,9 +20,9 @@
   color: var(--wg-selection-row-number-color);
 }
 
-/* Corner cell (row number header when sticky) - highest z-index */
+/* Corner cell (row number header when sticky) - highest table z-index */
 .wg__row-number-header.wg__header--frozen {
-  z-index: 4 !important;
+  z-index: var(--wg-z-frozen-header) !important;
 }
 
 /* ==========================================================================
@@ -40,7 +41,7 @@
 /* Row number cells when sticky */
 .wg__row-number.wg__cell--frozen {
   background: var(--wg-header-bg);
-  z-index: 2 !important;
+  z-index: var(--wg-z-frozen) !important;
 }
 
 /* ==========================================================================

package/src/css/_header.css

@@ -7,7 +7,7 @@
 .wg__header {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var(--wg-z-header);
   background: var(--wg-header-bg);
   color: var(--wg-header-color);
   font-weight: var(--wg-header-font-weight);

package/src/css/_reorder.css

@@ -15,7 +15,7 @@
 /* Ghost element that follows cursor - fixed to viewport for simplicity */
 .wg__reorder-ghost {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--wg-z-reorder-ghost);
   background: var(--wg-header-bg);
   border: 2px solid var(--wg-accent-color);
   border-radius: var(--wg-border-radius-sm);
@@ -34,7 +34,7 @@
   position: absolute;
   width: 3px;
   background: var(--wg-accent-color);
-  z-index: 999;
+  z-index: var(--wg-z-reorder-indicator);
   pointer-events: none;
   display: none;
 }

package/src/css/_resize.css

@@ -16,7 +16,7 @@
   bottom: 0;
   width: var(--wg-resize-handle-width);
   cursor: col-resize;
-  z-index: 2;  /* Above header content but below frozen column headers */
+  z-index: var(--wg-z-resize-handle);
   opacity: 0;
   transition: opacity 0.1s ease;
 }

package/src/css/_shortcuts.css

@@ -7,7 +7,7 @@
 	position: absolute;
 	top: var(--wg-spacing-xs);
 	right: var(--wg-spacing-sm);
-	z-index: 5;
+	z-index: var(--wg-z-shortcuts-help);
 }
 
 .wg__shortcuts-help--left {

package/src/css/_table.css

@@ -59,7 +59,7 @@ web-grid:not(:defined) {
 .wg--table-border-only .wg__table-container .wg__header {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var(--wg-z-header);
 }
 
 /* ==============================================================================
@@ -88,7 +88,7 @@ web-grid:not(:defined) {
 th.wg__filler {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: var(--wg-z-header);
   background: var(--wg-header-bg);
   /* Use box-shadow for bottom border - real borders disappear with border-collapse when content scrolls underneath */
   box-shadow: inset 0 -2px 0 var(--wg-border-color) !important;

package/src/css/_variables.css

@@ -209,6 +209,14 @@
   --wg-error-message-font-size: var(--wg-font-size-xs);
   --wg-error-indicator-color: var(--wg-danger-color);
 
+  /* ==========================================================================
+     DIRTY INDICATOR (unsaved changes)
+     ========================================================================== */
+  --wg-dirty-indicator-color: #ed8b00;
+  --wg-dirty-indicator-size: 6px;
+  --wg-dirty-cell-bg: rgba(237, 139, 0, 0.08);
+  --wg-dirty-row-number-border-color: #ed8b00;
+
   /* ==========================================================================
      EDITOR
      ========================================================================== */
@@ -273,7 +281,7 @@
   /* ==========================================================================
      CONTEXT MENU
      ========================================================================== */
-  --wg-context-menu-z-index: 1001;
+  --wg-context-menu-z-index: var(--wg-z-context-menu);
   --wg-context-menu-min-width: calc(16 * var(--wg-rem));
 
   /* ==========================================================================
@@ -293,10 +301,24 @@
 
   /* ==========================================================================
      Z-INDEX LAYERS
-     ========================================================================== */
-  --wg-z-dropdown: 9999;
+     Table-internal stacking (within scroll container):
+     ========================================================================== */
+  --wg-z-cell-highlight: 1;          /* Cell in-range / selection highlight */
+  --wg-z-selection-border: 1;        /* Range, row, column selection borders */
+  --wg-z-frozen: 2;                  /* Frozen columns (sticky) */
+  --wg-z-header: 3;                  /* Sticky header row */
+  --wg-z-frozen-header: 4;           /* Frozen header corner cell (sticky both ways) */
+  --wg-z-fill-handle: 5;             /* Fill handle dot */
+  --wg-z-fill-handle-area: 4;        /* Fill handle drag area */
+  --wg-z-resize-handle: 6;           /* Column resize handle */
+  --wg-z-shortcuts-help: 10;         /* Keyboard shortcuts overlay */
+
+  /* Popover layers (above grid content): */
+  --wg-z-reorder-indicator: 100;     /* Column reorder drop indicator */
   --wg-z-toolbar: 1000;
   --wg-z-context-menu: 1001;
+  --wg-z-dropdown: 9999;
+  --wg-z-reorder-ghost: 10000;       /* Column reorder drag ghost */
   --wg-z-tooltip: 10000;
 
   /* ==========================================================================

package/src/css/main.css

@@ -9,10 +9,10 @@
    - _header.css       : Header, sort indicators, filter row
    - _resize.css       : Column resize handles
    - _reorder.css      : Column reorder drag-and-drop
-   - _fill-handle.css  : Fill handle (Excel-like autofill)
-   - _selection.css    : Row selection via row numbers
-   - _cell-selection.css : Cell range selection (Excel-like)
-   - _freeze.css       : Freeze panes (sticky columns)
+   - _fill-handle.css  : Fill handle (Excel-like autofill)
+   - _selection.css    : Row selection via row numbers
+   - _cell-selection.css : Cell range selection (Excel-like)
+   - _freeze.css       : Freeze panes (sticky columns)
    - _cells.css        : Cells, editable states, editing, validation
    - _editors.css      : All editor types (text, number, date, combobox, etc)
    - _dropdown.css     : Dropdown menus, select triggers
@@ -32,12 +32,13 @@
 @import '_header.css';
 @import '_resize.css';
 @import '_reorder.css';
-@import '_fill-handle.css';
-@import '_selection.css';
-@import '_cell-selection.css';
-@import '_freeze.css';
+@import '_fill-handle.css';
+@import '_selection.css';
+@import '_cell-selection.css';
+@import '_freeze.css';
 @import '_cells.css';
 @import '_row-locking.css';
+@import '_dirty-indicator.css';
 @import '_editors.css';
 @import '_dropdown.css';
 @import '_navigation.css';