@dxos/lit-grid 0.8.4-main.fbb7a13 → 0.8.4-main.fcfe5033a5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-main.fbb7a13",
+  "version": "0.8.4-main.fcfe5033a5",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -46,7 +46,7 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@dxos/random": "0.8.4-main.fbb7a13",
-    "@dxos/test-utils": "0.8.4-main.fbb7a13"
+    "@dxos/random": "0.8.4-main.fcfe5033a5",
+    "@dxos/test-utils": "0.8.4-main.fcfe5033a5"
   }
 }

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

@@ -7,24 +7,24 @@ dx-grid-axis-resize-handle {
   background: transparent;
   z-index: 2;
   &:hover {
-    background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
+    background: var(--color-hover-surface);
   }
   &[data-dx-grid-axis='col'] {
     inset-block: 0;
     inset-inline-end: 0;
-    inline-size: .5rem;
+    inline-size: 0.5rem;
     cursor: col-resize;
   }
   &[data-dx-grid-axis='row'] {
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: .5rem;
+    block-size: 0.5rem;
     cursor: row-resize;
   }
   &:focus {
     outline: none;
   }
   &:focus-visible {
-    background: var(--dx-grid-resizeHandleFocus, var(--dx-accentSurface));
+    background: var(--color-accent-surface);
   }
 }

package/src/dx-grid-multiselect-cell.pcss

@@ -1,8 +1,10 @@
+@reference "../../ui-theme/src/main.css";
+
 dx-grid-multiselect-cell {
   display: contents;
 }
 
-.dx-grid__cell__multiselect{
+.dx-grid__cell__multiselect {
   display: flex;
   flex-flow: row nowrap;
   gap: 2px;
@@ -14,19 +16,19 @@ dx-grid-multiselect-cell {
     white-space: nowrap;
     text-overflow: ellipsis;
     &.dx-grid__cell__multiselect__value {
-      @apply bs-full border border-separator text-xs font-semibold pli-2 plb-0.5 rounded cursor-default text-neutral-800 dark:text-neutral-150
+      @apply h-full border border-separator text-xs font-semibold px-2 py-0.5 rounded cursor-default text-neutral-800 dark:text-neutral-200;
     }
     &.dx-grid__cell__multiselect__placeholder {
       @apply text-description;
     }
   }
-  & > .dx-grid__cell__multiselect__separator{
+  & > .dx-grid__cell__multiselect__separator {
     flex: 1 0 0;
   }
   & > svg {
     flex: 0 0 auto;
-    margin-block: .25em;
+    margin-block: 0.25em;
     inline-size: 1em;
     block-size: 1em;
   }
-}
+}

package/src/dx-grid.lit-stories.ts

@@ -3,15 +3,13 @@
 //
 
 import '@dxos-theme';
-
 import './dx-grid.ts';
 import './dx-grid.pcss';
-
 import './dx-grid-multiselect-cell.ts';
 
 import { html, nothing } from 'lit';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { defaultRowSize } from './defs.js';
 import { type DxGridFrozenPlane, type DxGridPlaneCells, type DxGridProps } from './types';
@@ -39,7 +37,7 @@ const initialLabels = {
     '0,0': { value: '', resizeHandle: 'col' },
   },
   frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
-    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end pie-1', resizeHandle: 'row' };
+    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end pe-1', resizeHandle: 'row' };
     return acc;
   }, {}),
   frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
@@ -53,7 +51,7 @@ Basic.args = {
     grid: {
       '1,1': {
         // end: '8,1',
-        value: faker.lorem.paragraphs(5),
+        value: random.lorem.paragraphs(5),
       },
       '2,2': {
         value: '',

package/src/dx-grid.pcss

@@ -4,10 +4,14 @@
 @layer dx-tokens {
   :root {
     --dx-grid-cell-padding-block: 0.2rem;
-    --dx-grid-cell-content-padding-block: calc(var(--dx-grid-cell-padding-block) - var(--dx-gridFocusIndicatorWidth));
+    --dx-grid-cell-content-padding-block: calc(
+      var(--dx-grid-cell-padding-block) - var(--dx-grid-focus-indicator-width)
+    );
     --dx-grid-cell-editor-padding-block: var(--dx-grid-cell-content-padding-block);
     --dx-grid-cell-padding-inline: 0.25rem;
-    --dx-grid-cell-content-padding-inline: calc(var(--dx-grid-cell-padding-inline) - var(--dx-gridFocusIndicatorWidth));
+    --dx-grid-cell-content-padding-inline: calc(
+      var(--dx-grid-cell-padding-inline) - var(--dx-grid-focus-indicator-width)
+    );
     --dx-grid-cell-editor-padding-inline: var(--dx-grid-cell-content-padding-inline);
   }
 }
@@ -33,8 +37,6 @@
 
     touch-action: none;
     user-select: none;
-
-    background: var(--dx-grid-lines, var(--dx-gridLine));
   }
 
   .dx-grid__plane--frozen-row,
@@ -54,7 +56,7 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      border: var(--dx-gridFocusIndicatorWidth) solid var(--dx-gridFocusIndicatorColor);
+      border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-indicator);
     }
   }
 
@@ -67,15 +69,19 @@
   }
 
   .dx-grid {
-    --dx-grid-cell-surface: var(--dx-grid-base, var(--dx-baseSurface));
+    --grid-cell-surface: var(--color-grid-surface);
 
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      background: var(--dx-grid-cell-surface);
+      background: var(--grid-cell-surface);
       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);
+
       &[aria-readonly='true'] {
         cursor: default;
       }
@@ -98,10 +104,11 @@
         white-space: nowrap;
         block-size: 100%;
         position: relative;
-        border: var(--dx-gridFocusIndicatorWidth) solid transparent;
+        border: var(--dx-grid-focus-indicator-width) solid transparent;
         border-radius: 2px;
 
-        &:has(.dx-tag), &:has(dx-tag-picker-item) {
+        &:has(.dx-tag),
+        &:has(dx-tag-picker-item) {
           text-overflow: clip;
           line-height: 0;
           --dx-grid-cell-content-padding-inline: 1px;
@@ -110,7 +117,7 @@
       }
 
       &.dx-grid__cell--commented {
-        background: var(--dx-grid-commented, var(--dx-gridCommented));
+        background: var(--color-grid-comment);
       }
     }
 
@@ -119,10 +126,11 @@
       [role='columnheader'],
       [role='rowheader'] {
         &[aria-selected] {
-          --dx-grid-cell-surface: var(--dx-gridSelectionOverlay);
+          --grid-cell-surface: var(--color-grid-selection-overlay);
 
           &:focus:not([aria-readonly='true']),
-          &:focus-visible, &:focus-within {
+          &:focus-visible,
+          &:focus-within {
             & > .dx-grid__cell__content {
               background: transparent;
             }
@@ -140,7 +148,7 @@
     }
 
     &:has(.dx-grid__row--cta__cell:hover) .dx-grid__row--cta__cell {
-      background: var(--dx-hoverOverlay);
+      background: var(--color-grid-hover-overlay);
     }
   }
 
@@ -149,7 +157,7 @@
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      &:not([data-focus-unfurl="false"]):not(.dx-grid__cell--no-focus-unfurl) {
+      &:not([data-focus-unfurl='false']):not(.dx-grid__cell--no-focus-unfurl) {
         &:focus,
         &:focus-within {
           & > .dx-grid__cell__content {
@@ -171,17 +179,17 @@
 
             z-index: 1;
 
-            background: var(--dx-grid-cell-surface);
+            background: var(--grid-cell-surface);
           }
 
           &:not([aria-readonly='true']) > .dx-grid__cell__content {
-            border-color: var(--dx-gridFocusIndicatorColor);
+            border-color: var(--color-grid-focus-indicator);
           }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--dx-gridFocusIndicatorColor);
+        border-color: var(--color-grid-focus-indicator);
       }
     }
   }
@@ -192,8 +200,8 @@
     hyphens: auto;
     overflow-wrap: break-word;
 
-    background: var(--dx-grid-base, var(--dx-baseSurface));
-    border: var(--dx-gridFocusIndicatorWidth) solid var(--dx-gridFocusIndicatorColor);
+    background: var(--dx-grid-base, var(--color-base-surface));
+    border: var(--dx-grid-focus-indicator-width) solid var(--color-grid-focus-indicator);
     border-radius: 2px;
 
     --dx-grid-cell-editor-max-block-size: min(12em, 50vh);
@@ -204,7 +212,8 @@
     inline-size: min-content;
     max-inline-size: var(--dx-grid-cell-editor-max-inline-size);
 
-    &:has(.dx-tag), &:has(dx-tag-picker-item) {
+    &:has(.dx-tag),
+    &:has(dx-tag-picker-item) {
       text-overflow: clip;
       line-height: 0;
       --dx-grid-cell-editor-padding-inline: 1px;
@@ -218,7 +227,7 @@
     [role='columnheader'],
     [role='rowheader'] {
       &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
-        border-color: var(--dx-gridFocusIndicatorColor);
+        border-color: var(--color-grid-focus-indicator);
       }
     }
   }
@@ -246,7 +255,7 @@
       inline-size: 0;
       block-size: 0;
       border-inline-start: 0.5em solid transparent;
-      border-block-start: 0.5em solid var(--dx-warningText);
+      border-block-start: 0.5em solid var(--color-warning-text);
       z-index: 1;
     }
   }

package/src/dx-grid.ts

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import './dx-grid-axis-resize-handle';
+
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.js';
@@ -9,7 +11,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 
 import { defaultColSize, defaultRowSize, focusUnfurlDefault } from './defs';
-import './dx-grid-axis-resize-handle';
 import {
   DxAxisResize,
   type DxAxisResizeInternal,
@@ -1476,9 +1477,7 @@ export class DxGrid extends LitElement {
           .split(' ')
           .filter((value) => value)
           .map(
-            // TODO(burdon): Consistent camelCase?
-            (activeRef) =>
-              `[data-refs~="${activeRef}"] { background: var(--dx-grid-commented-active, var(--dx-gridCommentedActive)) !important; }`,
+            (activeRef) => `[data-refs~="${activeRef}"] { background: var(--color-grid-comment-active) !important; }`,
           )
           .join('\n')}
       </style>

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook-lit:serve-e2e -- --port=9002',
+    command: 'pnpm storybook dev --ci --quiet --port=9002 --config-dir=.storybook',
     port: 9002,
     reuseExistingServer: false,
   },