@keenmate/web-grid 1.1.0 → 1.2.0-rc01

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.1.0",
+	"version": "1.2.0-rc01",
 	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
 	"type": "module",
 	"main": "./dist/web-grid.umd.js",
@@ -36,7 +36,10 @@
 		"build:types": "tsc",
 		"preview": "vite preview",
 		"clean": "rimraf dist --glob \"*.tgz\"",
-		"clean:dist": "rimraf dist"
+		"clean:dist": "rimraf dist",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ui": "vitest --ui"
 	},
 	"keywords": [
 		"grid",
@@ -69,9 +72,12 @@
 	},
 	"homepage": "https://github.com/KeenMate/web-grid#readme",
 	"devDependencies": {
+		"@vitest/ui": "^2.1.0",
+		"happy-dom": "^15.0.0",
 		"rimraf": "^5.0.5",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.8"
+		"vite": "^5.0.8",
+		"vitest": "^2.1.0"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.4"

package/src/css/_navigation.css

@@ -19,8 +19,13 @@
     inset calc(-1 * var(--wg-cell-splitter-width)) 0 0 var(--wg-cell-splitter-color);
 }
 
-/* Focused cell styling for editable navigate mode (.wg__cell--focused class) */
-.wg--editable .wg__cell.wg__cell--focused {
+/* Focused cell styling (.wg__cell--focused class).
+   Applies whenever focusedCell state is set, in any grid mode. Read-only grids
+   (default editTrigger, isEditable: false) still set focusedCell on click via
+   the cell-selection module; the indicator needs to be visible there too,
+   otherwise tree-shortcut Ctrl+Arrows look like they're losing focus after a
+   re-render destroys/rebuilds the tbody. */
+.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);

package/src/css/_tree.css

@@ -2,70 +2,68 @@
    TREE COLUMN
    ==============================================================================
    Indent + chevron rendered inside a cell when column.isTree is true.
-   The chevron is absolutely positioned so it can't affect row height; the
-   wrapper's padding-left reserves space for (level * indent + chevron + gap).
+   Inline-flex wrapper: chevron (or leaf spacer) + cell-body sit on one row.
+   Per-level depth comes from `padding-inline-start: level * --wg-tree-indent`,
+   set inline by JS.
 */
 
 :host {
-  --wg-tree-indent: 1.6rem;        /* per-level indent */
-  --wg-tree-chevron-size: 1.6rem;  /* chevron width/height */
+  --wg-tree-indent: 1.25rem;             /* per-level indent */
+  --wg-tree-chevron-size: 1rem;          /* chevron width/height (also used for leaf spacer) */
   --wg-tree-chevron-color: var(--wg-text-color-2);
-  --wg-tree-chevron-gap: var(--wg-spacing-xs);
+  --wg-tree-chevron-gap: 4px;            /* gap between chevron and content */
 }
 
 .wg__tree-cell {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  /* padding-left + width: 100% would overflow the cell with content-box; force
-     padding to be included in the width so the wrapper exactly fills the cell. */
-  box-sizing: border-box;
-  /* Fill the cell vertically so clicks anywhere inside the cell land on the
-     wrapper, not the cell's padding band. Helps for the dblclick-toggle hit area. */
-  min-height: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wg-tree-chevron-gap);
+  /* `padding-inline-start: level * --wg-tree-indent` is set inline by JS */
 }
 
-.wg__tree-cell-content {
+.wg__tree-cell-body {
+  min-width: 0;
   overflow: hidden;
   text-overflow: inherit;
   white-space: inherit;
 }
 
 .wg__tree-chevron {
-  position: absolute;
-  top: 50%;
-  /* `left` is set inline by JS = level * indent */
-  transform: translateY(-50%);
+  all: unset;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--wg-tree-chevron-size);
   height: var(--wg-tree-chevron-size);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--wg-tree-chevron-color);
-  font-size: 0.9em;
+  border-radius: 2px;
+  font-size: 0.85em;
   line-height: 1;
+  color: var(--wg-tree-chevron-color);
   cursor: pointer;
-  user-select: none;
-  border-radius: 3px;
+  flex-shrink: 0;
+  transition: transform 0.12s ease, background 0.1s ease;
 }
 
 .wg__tree-chevron:hover:not(.wg__tree-chevron--leaf) {
   background: var(--wg-hover-bg);
 }
 
-.wg__tree-chevron--leaf {
-  cursor: default;
-  pointer-events: none;
-  background: transparent;
+.wg__tree-chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.wg__tree-leaf-spacer {
+  display: inline-block;
+  width: var(--wg-tree-chevron-size);
+  height: var(--wg-tree-chevron-size);
+  flex-shrink: 0;
 }
 
 /* While the cell is being edited, let the editor absolute-fill the <td> as it
    normally does. The chevron/indent are visual aids for display mode; they come
    back when editing ends. */
-.wg__cell--editing .wg__tree-chevron {
+.wg__cell--editing .wg__tree-chevron,
+.wg__cell--editing .wg__tree-leaf-spacer {
   display: none;
 }
 .wg__cell--editing .wg__tree-cell {