@keenmate/web-grid 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.0.1",
+	"version": "1.0.3",
 	"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/_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

@@ -273,7 +273,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 +293,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;
 
   /* ==========================================================================