@keenmate/web-grid 1.0.0 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +49 -5
  2. package/ai/callbacks-events.txt +2 -1
  3. package/ai/columns.txt +1 -1
  4. package/ai/selection.txt +4 -2
  5. package/ai/toolbar-actions.txt +2 -0
  6. package/ai/typescript-types.txt +1 -1
  7. package/dist/logger.d.ts +54 -0
  8. package/dist/modules/actions/adapter.d.ts +4 -0
  9. package/dist/modules/toolbar/index.d.ts +1 -1
  10. package/dist/types.d.ts +3 -0
  11. package/dist/web-component.d.ts +2 -0
  12. package/dist/web-grid.js +2794 -2476
  13. package/dist/web-grid.umd.js +90 -90
  14. package/package.json +1 -1
  15. package/src/css/_cell-selection.css +4 -4
  16. package/src/css/_cells.css +1 -1
  17. package/src/css/_dark-mode.css +44 -7
  18. package/src/css/_dialogs.css +1 -1
  19. package/src/css/_fill-handle.css +2 -2
  20. package/src/css/_freeze.css +4 -3
  21. package/src/css/_header.css +1 -1
  22. package/src/css/_reorder.css +2 -2
  23. package/src/css/_resize.css +1 -1
  24. package/src/css/_shortcuts.css +1 -1
  25. package/src/css/_table.css +2 -2
  26. package/src/css/_variables.css +18 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keenmate/web-grid",
3
- "version": "1.0.0",
3
+ "version": "1.0.3",
4
4
  "description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
5
5
  "type": "module",
6
6
  "main": "./dist/web-grid.umd.js",
package/src/css/_cell-selection.css CHANGED
@@ -7,7 +7,7 @@
7
7
  .wg__cell--in-range {
8
8
  background: var(--wg-cell-selection-bg) !important;
9
9
  position: relative;
10
- z-index: 1;
10
+ z-index: var(--wg-z-cell-highlight);
11
11
  }
12
12
 
13
13
  /* Don't highlight when cell is editing */
@@ -27,13 +27,13 @@
27
27
 
28
28
  /* Range border - thick blue border around entire range
29
29
  Shown during drag AND after selection completes.
30
- z-index must be below frozen cells (sticky, z-index: 1-2) so the border
30
+ z-index must be below frozen cells so the border
31
31
  scrolls behind frozen columns instead of bleeding over them. */
32
32
  .wg__cell-range-border {
33
33
  position: absolute;
34
34
  border: var(--wg-cell-selection-border-width) solid var(--wg-cell-selection-border);
35
35
  pointer-events: none;
36
- z-index: 0;
36
+ z-index: var(--wg-z-selection-border);
37
37
  box-sizing: border-box;
38
38
  border-radius: 1px;
39
39
  }
@@ -69,7 +69,7 @@
69
69
  position: absolute;
70
70
  border: var(--wg-selection-border-width) solid var(--wg-selection-border-color);
71
71
  pointer-events: none;
72
- z-index: 0;
72
+ z-index: var(--wg-z-selection-border);
73
73
  box-sizing: border-box;
74
74
  border-radius: 1px;
75
75
  }
package/src/css/_cells.css CHANGED
@@ -76,7 +76,7 @@
76
76
  background: var(--wg-surface-1);
77
77
  outline: 2px solid var(--wg-accent-color);
78
78
  outline-offset: -2px;
79
- z-index: 1; /* Paint above neighboring cells so outline isn't hidden */
79
+ z-index: var(--wg-z-cell-highlight); /* Paint above neighboring cells so outline isn't hidden */
80
80
  }
81
81
 
82
82
  /* Hide the dashed hover border when editing */
package/src/css/_dark-mode.css CHANGED
@@ -1,11 +1,19 @@
1
1
  /* ==============================================================================
2
- DARK MODE SUPPORT
2
+ DARK MODE / LIGHT MODE SUPPORT
3
3
  ==============================================================================
4
4
  Dark mode is controlled by:
5
5
  1. OS preference: @media (prefers-color-scheme: dark)
6
- 2. data-theme="dark" on ancestor or host
7
- 3. data-bs-theme="dark" (Bootstrap 5.3+) on ancestor
8
- 4. .dark class on ancestor (Tailwind CSS convention)
6
+ 2. data-theme="dark" on host or ancestor (via :host-context)
7
+ 3. data-bs-theme="dark" (Bootstrap 5.3+) on host or ancestor
8
+ 4. .dark class on host or ancestor (Tailwind CSS convention)
9
+
10
+ Light mode override (overrides OS dark preference):
11
+ 1. data-theme="light" on host or ancestor (via :host-context)
12
+ 2. data-bs-theme="light" (Bootstrap 5.3+) on host or ancestor
13
+ 3. .light class on host or ancestor (Tailwind CSS convention)
14
+
15
+ NOTE: Ancestor matching uses :host-context() because shadow DOM stylesheets
16
+ cannot see elements outside the shadow boundary with regular selectors.
9
17
  */
10
18
  @media (prefers-color-scheme: dark) {
11
19
  :host {
@@ -29,10 +37,10 @@
29
37
 
30
38
  /* Explicit dark mode via data-theme, data-bs-theme attribute, or .dark class */
31
39
  :host([data-theme="dark"]),
32
- [data-theme="dark"] :host,
40
+ :host-context([data-theme="dark"]),
33
41
  :host([data-bs-theme="dark"]),
34
- [data-bs-theme="dark"] :host,
35
- .dark :host {
42
+ :host-context([data-bs-theme="dark"]),
43
+ :host-context(.dark) {
36
44
  --wg-surface-1: #1f1f1f;
37
45
  --wg-surface-2: #2b2b2b;
38
46
  --wg-surface-3: #333333;
@@ -49,3 +57,32 @@
49
57
  --wg-danger-bg-light: #442726;
50
58
  --wg-danger-color: #f87c86;
51
59
  }
60
+
61
+ /* ==============================================================================
62
+ EXPLICIT LIGHT MODE OVERRIDE
63
+ ==============================================================================
64
+ When the app forces light mode (e.g. via data-theme="light" on <html> or <body>),
65
+ these selectors override the OS dark mode media query above by restoring the
66
+ --base-* fallback chain from _variables.css.
67
+ */
68
+ :host([data-theme="light"]),
69
+ :host-context([data-theme="light"]),
70
+ :host([data-bs-theme="light"]),
71
+ :host-context([data-bs-theme="light"]),
72
+ :host-context(.light) {
73
+ --wg-surface-1: var(--base-main-bg, #ffffff);
74
+ --wg-surface-2: var(--base-elevated-bg, #f5f5f5);
75
+ --wg-surface-3: var(--base-hover-bg, #ebebeb);
76
+ --wg-surface-floating: var(--base-dropdown-bg, var(--base-main-bg, #ffffff));
77
+ --wg-text-color-1: var(--base-text-color-1, #242424);
78
+ --wg-text-color-2: var(--base-text-color-2, #424242);
79
+ --wg-text-color-3: var(--base-text-color-3, #707070);
80
+ --wg-border-color: var(--base-border-color, #e0e0e0);
81
+ --wg-border-color-hover: var(--base-border-color, #d1d1d1);
82
+ --wg-input-bg: var(--base-input-bg, #ffffff);
83
+ --wg-input-border: var(--base-input-border, 1px solid #d1d1d1);
84
+ --wg-hover-bg: var(--base-hover-bg, #f0f0f0);
85
+ --wg-active-bg: var(--base-hover-bg, #e0e0e0);
86
+ --wg-danger-bg-light: var(--base-danger-bg-light, #fde7e9);
87
+ --wg-danger-color: var(--base-danger-color, #d13438);
88
+ }
package/src/css/_dialogs.css CHANGED
@@ -2,7 +2,7 @@
2
2
  TOOLTIP (Floating UI positioned)
3
3
  ============================================================================== */
4
4
  .wg__tooltip {
5
- position: fixed;
5
+ position: absolute;
6
6
  z-index: var(--wg-z-tooltip);
7
7
  max-width: var(--wg-tooltip-max-width);
8
8
  padding: var(--wg-tooltip-padding);
package/src/css/_fill-handle.css CHANGED
@@ -12,7 +12,7 @@
12
12
  background: var(--wg-fill-handle-bg);
13
13
  border: var(--wg-fill-handle-border-width) solid var(--wg-fill-handle-border-color);
14
14
  cursor: crosshair;
15
- z-index: 10;
15
+ z-index: var(--wg-z-fill-handle);
16
16
  pointer-events: auto;
17
17
  box-sizing: border-box;
18
18
  }
@@ -28,7 +28,7 @@
28
28
  background: var(--wg-fill-range-bg);
29
29
  border: 1px dashed var(--wg-fill-range-border-color);
30
30
  pointer-events: none;
31
- z-index: 5;
31
+ z-index: var(--wg-z-fill-handle-area);
32
32
  box-sizing: border-box;
33
33
  }
34
34
 
package/src/css/_freeze.css CHANGED
@@ -10,6 +10,7 @@
10
10
 
11
11
  .wg__header--frozen {
12
12
  background: var(--wg-frozen-header-bg, var(--wg-header-bg));
13
+ z-index: var(--wg-z-frozen-header) !important;
13
14
  }
14
15
 
15
16
  /* Selected frozen header (column selection) */
@@ -19,9 +20,9 @@
19
20
  color: var(--wg-selection-row-number-color);
20
21
  }
21
22
 
22
- /* Corner cell (row number header when sticky) - highest z-index */
23
+ /* Corner cell (row number header when sticky) - highest table z-index */
23
24
  .wg__row-number-header.wg__header--frozen {
24
- z-index: 4 !important;
25
+ z-index: var(--wg-z-frozen-header) !important;
25
26
  }
26
27
 
27
28
  /* ==========================================================================
@@ -40,7 +41,7 @@
40
41
  /* Row number cells when sticky */
41
42
  .wg__row-number.wg__cell--frozen {
42
43
  background: var(--wg-header-bg);
43
- z-index: 2 !important;
44
+ z-index: var(--wg-z-frozen) !important;
44
45
  }
45
46
 
46
47
  /* ==========================================================================
package/src/css/_header.css CHANGED
@@ -7,7 +7,7 @@
7
7
  .wg__header {
8
8
  position: sticky;
9
9
  top: 0;
10
- z-index: 1;
10
+ z-index: var(--wg-z-header);
11
11
  background: var(--wg-header-bg);
12
12
  color: var(--wg-header-color);
13
13
  font-weight: var(--wg-header-font-weight);
package/src/css/_reorder.css CHANGED
@@ -15,7 +15,7 @@
15
15
  /* Ghost element that follows cursor - fixed to viewport for simplicity */
16
16
  .wg__reorder-ghost {
17
17
  position: fixed;
18
- z-index: 10000;
18
+ z-index: var(--wg-z-reorder-ghost);
19
19
  background: var(--wg-header-bg);
20
20
  border: 2px solid var(--wg-accent-color);
21
21
  border-radius: var(--wg-border-radius-sm);
@@ -34,7 +34,7 @@
34
34
  position: absolute;
35
35
  width: 3px;
36
36
  background: var(--wg-accent-color);
37
- z-index: 999;
37
+ z-index: var(--wg-z-reorder-indicator);
38
38
  pointer-events: none;
39
39
  display: none;
40
40
  }
package/src/css/_resize.css CHANGED
@@ -16,7 +16,7 @@
16
16
  bottom: 0;
17
17
  width: var(--wg-resize-handle-width);
18
18
  cursor: col-resize;
19
- z-index: 2; /* Above header content but below frozen column headers */
19
+ z-index: var(--wg-z-resize-handle);
20
20
  opacity: 0;
21
21
  transition: opacity 0.1s ease;
22
22
  }
package/src/css/_shortcuts.css CHANGED
@@ -7,7 +7,7 @@
7
7
  position: absolute;
8
8
  top: var(--wg-spacing-xs);
9
9
  right: var(--wg-spacing-sm);
10
- z-index: 5;
10
+ z-index: var(--wg-z-shortcuts-help);
11
11
  }
12
12
 
13
13
  .wg__shortcuts-help--left {
package/src/css/_table.css CHANGED
@@ -59,7 +59,7 @@ web-grid:not(:defined) {
59
59
  .wg--table-border-only .wg__table-container .wg__header {
60
60
  position: sticky;
61
61
  top: 0;
62
- z-index: 1;
62
+ z-index: var(--wg-z-header);
63
63
  }
64
64
 
65
65
  /* ==============================================================================
@@ -88,7 +88,7 @@ web-grid:not(:defined) {
88
88
  th.wg__filler {
89
89
  position: sticky;
90
90
  top: 0;
91
- z-index: 1;
91
+ z-index: var(--wg-z-header);
92
92
  background: var(--wg-header-bg);
93
93
  /* Use box-shadow for bottom border - real borders disappear with border-collapse when content scrolls underneath */
94
94
  box-shadow: inset 0 -2px 0 var(--wg-border-color) !important;
package/src/css/_variables.css CHANGED
@@ -32,6 +32,7 @@
32
32
  HOST ELEMENT SIZING
33
33
  ========================================================================== */
34
34
  display: block;
35
+ position: relative; /* offsetParent for absolute-positioned tooltip */
35
36
 
36
37
  /* ==========================================================================
37
38
  COLORS & THEME
@@ -272,7 +273,7 @@
272
273
  /* ==========================================================================
273
274
  CONTEXT MENU
274
275
  ========================================================================== */
275
- --wg-context-menu-z-index: 1001;
276
+ --wg-context-menu-z-index: var(--wg-z-context-menu);
276
277
  --wg-context-menu-min-width: calc(16 * var(--wg-rem));
277
278
 
278
279
  /* ==========================================================================
@@ -292,10 +293,24 @@
292
293
 
293
294
  /* ==========================================================================
294
295
  Z-INDEX LAYERS
295
- ========================================================================== */
296
- --wg-z-dropdown: 9999;
296
+ Table-internal stacking (within scroll container):
297
+ ========================================================================== */
298
+ --wg-z-cell-highlight: 1; /* Cell in-range / selection highlight */
299
+ --wg-z-selection-border: 1; /* Range, row, column selection borders */
300
+ --wg-z-frozen: 2; /* Frozen columns (sticky) */
301
+ --wg-z-header: 3; /* Sticky header row */
302
+ --wg-z-frozen-header: 4; /* Frozen header corner cell (sticky both ways) */
303
+ --wg-z-fill-handle: 5; /* Fill handle dot */
304
+ --wg-z-fill-handle-area: 4; /* Fill handle drag area */
305
+ --wg-z-resize-handle: 6; /* Column resize handle */
306
+ --wg-z-shortcuts-help: 10; /* Keyboard shortcuts overlay */
307
+
308
+ /* Popover layers (above grid content): */
309
+ --wg-z-reorder-indicator: 100; /* Column reorder drop indicator */
297
310
  --wg-z-toolbar: 1000;
298
311
  --wg-z-context-menu: 1001;
312
+ --wg-z-dropdown: 9999;
313
+ --wg-z-reorder-ghost: 10000; /* Column reorder drag ghost */
299
314
  --wg-z-tooltip: 10000;
300
315
 
301
316
  /* ==========================================================================