@keenmate/web-grid 1.0.0-rc14 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.0.0-rc14",
+	"version": "1.0.0",
 	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
 	"type": "module",
 	"main": "./dist/web-grid.umd.js",
@@ -27,6 +27,7 @@
 	"files": [
 		"dist",
 		"src/css",
+		"ai",
 		"component-variables.manifest.json"
 	],
 	"scripts": {

package/src/css/_cell-selection.css

@@ -26,12 +26,14 @@
 }
 
 /* Range border - thick blue border around entire range
-   Shown during drag AND after selection completes */
+   Shown during drag AND after selection completes.
+   z-index must be below frozen cells (sticky, z-index: 1-2) 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: 3;
+  z-index: 0;
   box-sizing: border-box;
   border-radius: 1px;
 }
@@ -67,7 +69,7 @@
   position: absolute;
   border: var(--wg-selection-border-width) solid var(--wg-selection-border-color);
   pointer-events: none;
-  z-index: 3;
+  z-index: 0;
   box-sizing: border-box;
   border-radius: 1px;
 }

package/src/css/_cells.css

@@ -9,6 +9,8 @@
   color: var(--wg-cell-color);
   height: var(--wg-row-min-height);  /* In table layout, height acts as min-height */
   box-sizing: border-box;  /* Include padding in width calculation */
+  /* Positioned ancestor for absolute children (checkbox, edit button, etc.) */
+  position: relative;
   /* Account for sticky header when scrolling into view */
   scroll-margin-top: calc(3.0 * var(--wg-rem));
   scroll-margin-bottom: calc(0.5 * var(--wg-rem));
@@ -50,7 +52,6 @@
    ============================================================================== */
 .wg__cell--editable {
   cursor: pointer;
-  position: relative;
 }
 
 .wg__cell--editable:hover {
@@ -96,7 +97,9 @@
 
 /* ==============================================================================
    READ-ONLY CELLS (permanent styling, not focus-related)
+   Only apply when the grid IS editable - distinguishes non-editable columns
+   from editable ones. When the entire grid is read-only, no gray background.
    ============================================================================== */
-.wg--navigate-mode .wg__cell:not(.wg__cell--editable) {
+.wg--editable.wg--navigate-mode .wg__cell:not(.wg__cell--editable) {
   background: var(--wg-cell-readonly-bg);
 }

package/src/css/_freeze.css

@@ -66,14 +66,19 @@
 
 /* When a row is focused (master/detail)
    Uses !important to beat striped (0,3,2) and hover (0,3,2) rules above.
-   Consistent with selected/column-selected/in-range rules below. */
+   Consistent with selected/column-selected/in-range rules below.
+
+   Frozen cells MUST have opaque backgrounds — the normal selection/focus
+   variables are semi-transparent (color-mix with transparent), which lets
+   non-frozen content show through when it scrolls behind sticky columns.
+   Mix against the opaque frozen column base instead. */
 .wg__row--focused > .wg__cell--frozen {
-  background: var(--wg-row-focus-bg) !important;
+  background: color-mix(in srgb, var(--wg-accent-color) 10%, var(--wg-frozen-column-bg, var(--wg-surface-1))) !important;
 }
 
 /* Row selection on frozen cells */
 .wg__row--selected > .wg__cell--frozen {
-  background: var(--wg-selection-bg) !important;
+  background: color-mix(in srgb, var(--wg-accent-color) 15%, var(--wg-frozen-column-bg, var(--wg-surface-1))) !important;
 }
 
 /* Row number cells in selected rows - accent color (override above rule) */
@@ -84,12 +89,12 @@
 
 /* Column selection on frozen cells */
 .wg__cell--frozen.wg__cell--column-selected {
-  background: var(--wg-selection-bg) !important;
+  background: color-mix(in srgb, var(--wg-accent-color) 15%, var(--wg-frozen-column-bg, var(--wg-surface-1))) !important;
 }
 
 /* Cell range selection on frozen cells */
 .wg__cell--frozen.wg__cell--in-range {
-  background: var(--wg-cell-selection-bg) !important;
+  background: color-mix(in srgb, var(--wg-accent-color) 10%, var(--wg-frozen-column-bg, var(--wg-surface-1))) !important;
 }
 
 /* ==========================================================================

package/src/css/_navigation.css

@@ -8,22 +8,30 @@
   cursor: cell;
 }
 
-/* Remove browser default focus outline - we handle it with .wg__cell--focused */
-.wg--navigate-mode .wg__cell:focus {
+/* Replace browser default focus outline with box-shadow on all cells.
+   Outline ignores z-index stacking and bleeds over frozen columns.
+   Box-shadow respects stacking contexts so frozen columns properly cover it.
+   Combines with the cell splitter shadow (from _cells.css) to keep the right-edge separator. */
+.wg__cell:focus {
   outline: none;
+  box-shadow:
+    inset 0 0 0 var(--wg-focus-border-width) var(--wg-focus-border-color),
+    inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
 }
 
-/* Focused cell styling - Excel-like green border for ALL cells */
-.wg--navigate-mode .wg__cell.wg__cell--focused {
-  outline: var(--wg-focus-outline);
-  outline-offset: -2px;
+/* Focused cell styling for editable navigate mode (.wg__cell--focused class) */
+.wg--editable .wg__cell.wg__cell--focused {
+  box-shadow:
+    inset 0 0 0 var(--wg-focus-border-width) var(--wg-focus-border-color),
+    inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
 }
 
 /* Focus styling for always-editing mode (editTrigger: 'always' / input-matrix mode) */
-/* In this mode, wg--navigate-mode is not added, but we still need focus visual */
+/* In this mode, the <td> doesn't have :focus (the inner input does), so no specificity conflict */
 .wg__cell.wg__cell--always-edit-focused {
-  outline: var(--wg-focus-outline);
-  outline-offset: -2px;
+  box-shadow:
+    inset 0 0 0 var(--wg-focus-border-width) var(--wg-focus-border-color),
+    inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
 }
 
 /* Hide hover border when cell is focused */
@@ -36,8 +44,7 @@
    ROW FOCUS (master/detail patterns)
    ==============================================================================
    Must be in this file (after _cells.css) so source order beats the
-   .wg--navigate-mode .wg__cell:not(.wg__cell--editable) readonly rule
-   at equal specificity (0,3,0).
+   .wg--editable.wg--navigate-mode .wg__cell:not(.wg__cell--editable) readonly rule.
 */
 .wg__row--focused > .wg__cell {
   background: var(--wg-row-focus-bg);
@@ -47,11 +54,11 @@
   background: var(--wg-row-focus-row-number-bg);
 }
 
-/* Navigate mode: override read-only cell background (needs 0,3,0 specificity) */
-.wg--navigate-mode .wg__row--focused > .wg__cell {
+/* Navigate mode: override read-only cell background (needs higher specificity than _cells.css rule) */
+.wg--editable.wg--navigate-mode .wg__row--focused > .wg__cell {
   background: var(--wg-row-focus-bg);
 }
 
-.wg--navigate-mode .wg__row--focused > .wg__cell.wg__row-number {
+.wg--editable.wg--navigate-mode .wg__row--focused > .wg__cell.wg__row-number {
   background: var(--wg-row-focus-row-number-bg);
 }

package/src/css/_selection.css

@@ -8,9 +8,11 @@
   background: var(--wg-selection-bg);
 }
 
-/* Selected row number cell - accent colored */
+/* Selected row number cell - accent colored
+   Needs .wg--editable prefix to beat the readonly rule in _cells.css
+   (.wg--editable.wg--navigate-mode .wg__cell:not(.wg__cell--editable)) which has specificity 0,4,0 */
 .wg__row--selected > .wg__cell.wg__row-number,
-.wg--navigate-mode .wg__row--selected > .wg__cell.wg__row-number {
+.wg--editable.wg--navigate-mode .wg__row--selected > .wg__cell.wg__row-number {
   background: var(--wg-selection-row-number-bg);
   color: var(--wg-selection-row-number-color);
 }
@@ -27,7 +29,7 @@
 
 /* When already selected, hover doesn't change background */
 .wg__row--selected > .wg__cell.wg__row-number:hover,
-.wg--navigate-mode .wg__row--selected > .wg__cell.wg__row-number:hover {
+.wg--editable.wg--navigate-mode .wg__row--selected > .wg__cell.wg__row-number:hover {
   background: var(--wg-selection-row-number-bg);
   color: var(--wg-selection-row-number-color);
 }

package/src/css/_variables.css

@@ -280,6 +280,8 @@
      ========================================================================== */
   --wg-focus-outline: 2px solid var(--wg-accent-color);
   --wg-focus-outline-offset: -2px;
+  --wg-focus-border-width: 2px;
+  --wg-focus-border-color: var(--wg-accent-color);
   --wg-focus-bg: var(--wg-hover-bg);
 
   /* ==========================================================================