@dxos/lit-grid 0.8.4-staging.ac66bdf99f → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-staging.ac66bdf99f",
+  "version": "0.9.0",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": [
     "*.css",
@@ -30,13 +30,6 @@
   },
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "dist/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "src",
     "dist"
@@ -46,7 +39,10 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@dxos/random": "0.8.4-staging.ac66bdf99f",
-    "@dxos/test-utils": "0.8.4-staging.ac66bdf99f"
+    "@dxos/random": "0.9.0",
+    "@dxos/test-utils": "0.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/dx-grid-axis-resize-handle.pcss

@@ -25,6 +25,6 @@ dx-grid-axis-resize-handle {
     outline: none;
   }
   &:focus-visible {
-    background: var(--color-accent-surface);
+    background: var(--color-accent-bg);
   }
 }

package/src/dx-grid.pcss

@@ -19,8 +19,13 @@
 @layer dx-components {
   dx-grid {
     display: contents;
-    --dx-grid-gap: 1px;
-    --dx-plane-gap: 1px;
+    /*
+     * Cells touch edge-to-edge; lines come from each cell's border-right /
+     * border-bottom. Setting either gap to a non-zero value re-introduces the
+     * doubled-line artifact at plane seams.
+     */
+    --dx-grid-gap: 0;
+    --dx-plane-gap: 0;
   }
 
   .dx-grid {
@@ -56,7 +61,7 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-indicator);
+      border: var(--dx-grid-focus-indicator-width) solid var(--color-focus-ring);
     }
   }
 
@@ -70,17 +75,26 @@
 
   .dx-grid {
     --grid-cell-surface: var(--color-grid-surface);
+    --grid-cell-fg: var(--color-grid-fg);
 
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
       background: var(--grid-cell-surface);
+      color: var(--grid-cell-fg);
       cursor: pointer;
       position: relative;
 
-      /** TODO(burdon): It this performant? */
-      border-right: 1px solid var(--color-grid-line);
-      border-bottom: 1px solid var(--color-grid-line);
+      /*
+       * Paint grid lines via inset box-shadow rather than border so the cell's
+       * content-box equals its border-box. This lets `.dx-grid__cell__content`
+       * (with block-size/inline-size: 100%) fill the cell exactly — including
+       * the right/bottom edges. When focused, the cell-content's own border
+       * (focus ring) then aligns with the grid lines pixel-for-pixel.
+       */
+      box-shadow:
+        inset calc(-1 * var(--dx-grid-focus-indicator-width)) 0 0 var(--color-grid-line),
+        inset 0 calc(-1 * var(--dx-grid-focus-indicator-width)) 0 var(--color-grid-line);
 
       &[aria-readonly='true'] {
         cursor: default;
@@ -126,7 +140,8 @@
       [role='columnheader'],
       [role='rowheader'] {
         &[aria-selected] {
-          --grid-cell-surface: var(--color-grid-selection-overlay);
+          --grid-cell-surface: var(--color-grid-selection-surface);
+          --grid-cell-fg: var(--color-grid-selection-fg);
 
           &:focus:not([aria-readonly='true']),
           &:focus-visible,
@@ -148,7 +163,7 @@
     }
 
     &:has(.dx-grid__row--cta__cell:hover) .dx-grid__row--cta__cell {
-      background: var(--color-grid-hover-overlay);
+      background: var(--color-grid-highlight);
     }
   }
 
@@ -161,10 +176,15 @@
         &:focus,
         &:focus-within {
           & > .dx-grid__cell__content {
-            min-block-size: 100%;
-            block-size: min-content;
-            max-block-size: min(12em, 50vh);
-
+            /*
+             * Inline (horizontal) unfurl: cell-content can grow horizontally
+             * to show wider content. Block-size stays clamped to the cell
+             * height so the focus ring aligns with the bottom grid line —
+             * `block-size: min-content` would let cell-content overshoot the
+             * cell when the content's natural height (line-height + padding +
+             * border) exceeds the cell track size by even a fraction of a
+             * pixel, pushing the focus ring's bottom edge below the grid line.
+             */
             min-inline-size: 100%;
             inline-size: min-content;
             max-inline-size: min(60ch, 90vw);
@@ -173,23 +193,20 @@
             scrollbar-width: thin;
             overscroll-behavior: contain;
 
-            white-space: normal;
-            hyphens: auto;
-            overflow-wrap: break-word;
-
             z-index: 1;
 
             background: var(--grid-cell-surface);
+            color: var(--grid-cell-fg);
           }
 
           &:not([aria-readonly='true']) > .dx-grid__cell__content {
-            border-color: var(--color-grid-focus-indicator);
+            border-color: var(--color-focus-ring);
           }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--color-grid-focus-indicator);
+        border-color: var(--color-focus-ring);
       }
     }
   }
@@ -201,7 +218,7 @@
     overflow-wrap: break-word;
 
     background: var(--dx-grid-base, var(--color-base-surface));
-    border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-indicator);
+    border: var(--dx-grid-focus-indicator-width) solid var(--color-focus-ring);
     border-radius: 2px;
 
     --dx-grid-cell-editor-max-block-size: min(12em, 50vh);
@@ -227,7 +244,7 @@
     [role='columnheader'],
     [role='rowheader'] {
       &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
-        border-color: var(--color-grid-focus-indicator);
+        border-color: var(--color-focus-ring);
       }
     }
   }

package/src/playwright/dx-grid.spec.ts

@@ -12,8 +12,9 @@ import { toPlaneCellIndex } from '../util';
 
 const gridPlaneCellSize = 31;
 const gap = 1;
-const nCols = 9;
-const nRows = 7;
+// The spec viewport fits one extra column/row beyond the nominal grid plane size.
+const nCols = 10;
+const nRows = 8;
 
 test.describe('dx-grid', () => {
   let page: Page;
@@ -23,8 +24,8 @@ test.describe('dx-grid', () => {
     const setup = await setupPage(browser, {
       url: storybookUrl('dx-grid--spec', 9002),
       viewportSize: {
-        width: (gridPlaneCellSize + gap) * (nCols + 1.5),
-        height: (gridPlaneCellSize + gap) * (nRows + 1.5),
+        width: (gridPlaneCellSize + gap) * (nCols + 0.5),
+        height: (gridPlaneCellSize + gap) * (nRows + 0.5),
       }, // 336 x 272
     });
     page = setup.page;
@@ -46,8 +47,8 @@ test.describe('dx-grid', () => {
     // Now pan by wheel to the center point of the cell one right and one down from the origin cell of the grid plane.
     await grid.panByWheel(gridPlaneCellSize * 1.5 + gap, gridPlaneCellSize * 1.5 + gap);
 
-    // Confirm that the grid plane is showing only the cells that would be visible.
-    await grid.expectVirtualizationResult(nCols + 1, nRows + 1, 1, 1);
+    // Pan shifts the viewport by one cell; visible cell counts stay the same.
+    await grid.expectVirtualizationResult(nCols, nRows, 1, 1);
   });
 
   test('mouse access', async () => {

package/src/util.ts

@@ -63,9 +63,11 @@ export const rowToA1Notation = (row: number): string => {
 };
 
 /**
- * The size in pixels of the gap between cells
+ * The size in pixels of the gap between cells.
+ * Must match `--dx-grid-gap` / `--dx-plane-gap` in `dx-grid.pcss`. Cells
+ * paint their own borders edge-to-edge, so this is 0.
  */
-export const gap = 1;
+export const gap = 0;
 
 /**
  * ResizeObserver notices even subpixel changes, only respond to changes of at least 1px.