@vaadin/grid 24.4.0-dev.4b20a0c55.3 → 24.4.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.4.0-dev.4b20a0c55.3",
+  "version": "24.4.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -46,14 +46,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/checkbox": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/text-field": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/a11y-base": "24.4.0-rc1",
+    "@vaadin/checkbox": "24.4.0-rc1",
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/lit-renderer": "24.4.0-rc1",
+    "@vaadin/text-field": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

package/src/vaadin-grid-a11y-mixin.js

@@ -16,7 +16,9 @@ export const A11yMixin = (superClass) =>
 
     /** @private */
     _a11yGetHeaderRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer || col.path || col.header)).length;
+      return _columnTree.filter((level) =>
+        level.some((col) => col.headerRenderer || (col.path && col.header !== null) || col.header),
+      ).length;
     }
 
     /** @private */

package/src/vaadin-grid-column-reordering-mixin.js

@@ -237,13 +237,26 @@ export const ColumnReorderingMixin = (superClass) =>
       if (!this._draggedColumn) {
         this.$.scroller.toggleAttribute('no-content-pointer-events', true);
       }
-      const cell = this.shadowRoot.elementFromPoint(x, y);
+      const elementFromPoint = this.shadowRoot.elementFromPoint(x, y);
       this.$.scroller.toggleAttribute('no-content-pointer-events', false);
 
-      // Make sure the element is actually a cell
-      if (cell && cell._column) {
-        return cell;
+      return this._getCellFromElement(elementFromPoint);
+    }
+
+    /** @private */
+    _getCellFromElement(element) {
+      if (element) {
+        // Check if element is a cell
+        if (element._column) {
+          return element;
+        }
+        // Check if element is the cell of a focus button mode column
+        const { parentElement } = element;
+        if (parentElement && parentElement._focusButton === element) {
+          return parentElement;
+        }
       }
+      return null;
     }
 
     /**

package/src/vaadin-grid-data-provider-mixin.js

@@ -321,8 +321,18 @@ export const DataProviderMixin = (superClass) =>
 
     /** @protected */
     _onDataProviderPageReceived() {
-      // With the new items added, update the cache size and the grid's effective size
-      this._flatSize = this._dataProviderController.flatSize;
+      // If the page response affected the flat size
+      if (this._flatSize !== this._dataProviderController.flatSize) {
+        // Schedule an update of all rendered rows by _debouncerApplyCachedData,
+        // to ensure that all pages associated with the rendered rows are loaded.
+        this._shouldUpdateAllRenderedRowsAfterPageLoad = true;
+
+        // TODO: Updating the flat size property can still result in a synchonous virtualizer update
+        // if the size change requires the virtualizer to increase the amount of physical elements
+        // to display new items e.g. the viewport fits 10 items and the size changes from 1 to 10.
+        // This is something to be optimized in the future.
+        this._flatSize = this._dataProviderController.flatSize;
+      }
 
       // After updating the cache, check if some of the expanded items should have sub-caches loaded
       this._getRenderedRows().forEach((row) => {
@@ -338,9 +348,12 @@ export const DataProviderMixin = (superClass) =>
       this._debouncerApplyCachedData = Debouncer.debounce(this._debouncerApplyCachedData, timeOut.after(0), () => {
         this._setLoading(false);
 
+        const shouldUpdateAllRenderedRowsAfterPageLoad = this._shouldUpdateAllRenderedRowsAfterPageLoad;
+        this._shouldUpdateAllRenderedRowsAfterPageLoad = false;
+
         this._getRenderedRows().forEach((row) => {
           const { item } = this._dataProviderController.getFlatIndexContext(row.index);
-          if (item) {
+          if (item || shouldUpdateAllRenderedRowsAfterPageLoad) {
             this._getItem(row.index, row);
           }
         });

package/src/vaadin-grid-filter-column-mixin.js

@@ -30,13 +30,7 @@ export const GridFilterColumnMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
-    }
-
-    constructor() {
-      super();
-
-      this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
+      return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)'];
     }
 
     /**
@@ -54,16 +48,12 @@ export const GridFilterColumnMixin = (superClass) =>
         textField.setAttribute('theme', 'small');
         textField.setAttribute('style', 'max-width: 100%;');
         textField.setAttribute('focus-target', '');
-        textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
         filter.appendChild(textField);
         root.appendChild(filter);
       }
 
       filter.path = this.path;
-      filter.value = this._filterValue;
 
-      textField.__rendererValue = this._filterValue;
-      textField.value = this._filterValue;
       textField.label = this.__getHeader(this.header, this.path);
     }
 
@@ -78,21 +68,6 @@ export const GridFilterColumnMixin = (superClass) =>
       return this._defaultHeaderRenderer;
     }
 
-    /**
-     * Updates the internal filter value once the filter text field is changed.
-     * The listener handles only user-fired events.
-     *
-     * @private
-     */
-    __onFilterValueChanged(e) {
-      // Skip if the value is changed by the renderer.
-      if (e.detail.value === e.target.__rendererValue) {
-        return;
-      }
-
-      this._filterValue = e.detail.value;
-    }
-
     /** @private */
     __getHeader(header, path) {
       if (header) {

package/src/vaadin-grid-filter-element-mixin.js

@@ -69,12 +69,8 @@ export const GridFilterElementMixin = (superClass) =>
 
       this._filterController = new SlotController(this, '', 'vaadin-text-field', {
         initializer: (field) => {
-          field.addEventListener('value-changed', (e) => {
-            if (field.__previousValue === undefined && e.detail.value === '') {
-              field.__previousValue = e.detail.value;
-              return;
-            }
-            this.value = e.detail.value;
+          field.addEventListener('input', (e) => {
+            this.value = e.target.value;
           });
 
           this._textField = field;
@@ -88,12 +84,8 @@ export const GridFilterElementMixin = (superClass) =>
       if (path === undefined || value === undefined || !textField) {
         return;
       }
-      if (this._previousValue === undefined && value === '') {
-        return;
-      }
 
       textField.value = value;
-      this._previousValue = value;
 
       this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
         this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -814,10 +814,12 @@ export const KeyboardNavigationMixin = (superClass) =>
       const rootTarget = e.composedPath()[0];
 
       if (rootTarget === this.$.table || rootTarget === this.$.focusexit) {
-        // The focus enters the top (bottom) of the grid, meaning that user has
-        // tabbed (shift-tabbed) into the grid. Move the focus to
-        // the first (the last) focusable.
-        this._predictFocusStepTarget(rootTarget, rootTarget === this.$.table ? 1 : -1).focus();
+        if (!this._isMousedown) {
+          // The focus enters the top (bottom) of the grid, meaning that user has
+          // tabbed (shift-tabbed) into the grid. Move the focus to
+          // the first (the last) focusable.
+          this._predictFocusStepTarget(rootTarget, rootTarget === this.$.table ? 1 : -1).focus();
+        }
         this._setInteracting(false);
       } else {
         this._detectInteracting(e);

package/src/vaadin-grid-mixin.js

@@ -589,10 +589,6 @@ export const GridMixin = (superClass) =>
         });
       }
 
-      if (column && column._onCellKeyDown) {
-        cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
-      }
-
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
 
@@ -681,6 +677,9 @@ export const GridMixin = (superClass) =>
             cell = column._cells.find((cell) => cell._vacant);
             if (!cell) {
               cell = this._createCell('td', column);
+              if (column._onCellKeyDown) {
+                cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+              }
               column._cells.push(cell);
             }
             cell.setAttribute('part', 'cell body-cell');
@@ -724,7 +723,13 @@ export const GridMixin = (superClass) =>
             // Header & footer
             const tagName = section === 'header' ? 'th' : 'td';
             if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`] || this._createCell(tagName, column);
+              cell = column[`_${section}Cell`];
+              if (!cell) {
+                cell = this._createCell(tagName);
+                if (column._onCellKeyDown) {
+                  cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+                }
+              }
               cell._column = column;
               row.appendChild(cell);
               column[`_${section}Cell`] = cell;
@@ -942,6 +947,9 @@ export const GridMixin = (superClass) =>
       this._filterDragAndDrop(row, model);
 
       iterateChildren(row, (cell) => {
+        if (cell._column && !cell._column.isConnected) {
+          return;
+        }
         if (cell._renderer) {
           const owner = cell._column || this;
           cell._renderer.call(owner, cell._content, owner, model);

package/src/vaadin-grid-scroll-mixin.js

@@ -248,17 +248,11 @@ export const ScrollMixin = (superClass) =>
 
     /** @private */
     __updateColumnsBodyContentHidden() {
-      if (!this._columnTree) {
+      if (!this._columnTree || !this._areSizerCellsAssigned()) {
         return;
       }
 
       const columnsInOrder = this._getColumnsInOrder();
-
-      // Return if sizer cells are not yet assigned to columns
-      if (!columnsInOrder[0] || !columnsInOrder[0]._sizerCell) {
-        return;
-      }
-
       let bodyContentHiddenChanged = false;
 
       // Remove the column cells from the DOM if the column is outside the viewport.
@@ -498,7 +492,7 @@ export const ScrollMixin = (superClass) =>
 
       let transformFrozenToEndBody = transformFrozenToEnd;
 
-      if (this._lazyColumns) {
+      if (this._lazyColumns && this._areSizerCellsAssigned()) {
         // Lazy column rendering is used, calculate the offset to apply to the frozen to end cells
         const columnsInOrder = this._getColumnsInOrder();
 
@@ -528,4 +522,9 @@ export const ScrollMixin = (superClass) =>
         this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
       }
     }
+
+    /** @private */
+    _areSizerCellsAssigned() {
+      return this._getColumnsInOrder().every((column) => column._sizerCell);
+    }
   };

package/theme/lumo/all-imports.d.ts

@@ -0,0 +1,11 @@
+import './vaadin-grid-column-group.js';
+import './vaadin-grid-column.js';
+import './vaadin-grid-filter.js';
+import './vaadin-grid-filter-column.js';
+import './vaadin-grid-selection-column.js';
+import './vaadin-grid-sorter.js';
+import './vaadin-grid-sort-column.js';
+import './vaadin-grid-tree-toggle.js';
+import './vaadin-grid-tree-column.js';
+import './vaadin-grid.js';
+import '../../src/all-imports.js';

package/theme/lumo/lit-all-imports.d.ts

@@ -0,0 +1,11 @@
+import './vaadin-lit-grid-column-group.js';
+import './vaadin-lit-grid-column.js';
+import './vaadin-lit-grid-filter.js';
+import './vaadin-lit-grid-filter-column.js';
+import './vaadin-lit-grid-selection-column.js';
+import './vaadin-lit-grid-sorter.js';
+import './vaadin-lit-grid-sort-column.js';
+import './vaadin-lit-grid-tree-toggle.js';
+import './vaadin-lit-grid-tree-column.js';
+import './vaadin-lit-grid.js';
+import '../../src/lit-all-imports.js';

package/theme/lumo/vaadin-grid-column-group.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column-group.js';

package/theme/lumo/vaadin-grid-column.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column.js';

package/theme/lumo/vaadin-grid-filter-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-filter.js';
+import '../../src/vaadin-grid-filter-column.js';

package/theme/lumo/vaadin-grid-filter.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import '../../src/vaadin-grid-filter.js';

package/theme/lumo/vaadin-grid-selection-column.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import '../../src/vaadin-grid-selection-column.js';

package/theme/lumo/vaadin-grid-sort-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter.js';
+import '../../src/vaadin-grid-sort-column.js';

package/theme/lumo/vaadin-grid-sorter-styles.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';

package/theme/lumo/vaadin-grid-sorter.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-grid-sorter.js';

package/theme/lumo/vaadin-grid-styles.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-grid-tree-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle.js';
+import '../../src/vaadin-grid-tree-column.js';

package/theme/lumo/vaadin-grid-tree-toggle-styles.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';

package/theme/lumo/vaadin-grid-tree-toggle.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-grid-tree-toggle.js';

package/theme/lumo/vaadin-grid.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-grid.js';

package/theme/lumo/vaadin-lit-grid-column-group.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column-group.js';

package/theme/lumo/vaadin-lit-grid-column.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column.js';

package/theme/lumo/vaadin-lit-grid-filter-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-filter.js';
+import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/lumo/vaadin-lit-grid-filter.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
+import '../../src/vaadin-lit-grid-filter.js';

package/theme/lumo/vaadin-lit-grid-selection-column.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
+import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/lumo/vaadin-lit-grid-sort-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-sorter.js';
+import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/lumo/vaadin-lit-grid-sorter.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-lit-grid-sorter.js';

package/theme/lumo/vaadin-lit-grid-tree-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-tree-toggle.js';
+import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/lumo/vaadin-lit-grid-tree-toggle.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/lumo/vaadin-lit-grid.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-lit-grid.js';

package/theme/material/all-imports.d.ts

@@ -0,0 +1,11 @@
+import './vaadin-grid-column-group.js';
+import './vaadin-grid-column.js';
+import './vaadin-grid-filter.js';
+import './vaadin-grid-filter-column.js';
+import './vaadin-grid-selection-column.js';
+import './vaadin-grid-sorter.js';
+import './vaadin-grid-sort-column.js';
+import './vaadin-grid-tree-toggle.js';
+import './vaadin-grid-tree-column.js';
+import './vaadin-grid.js';
+import '../../src/all-imports.js';

package/theme/material/lit-all-imports.d.ts

@@ -0,0 +1,11 @@
+import './vaadin-lit-grid-column-group.js';
+import './vaadin-lit-grid-column.js';
+import './vaadin-lit-grid-filter.js';
+import './vaadin-lit-grid-filter-column.js';
+import './vaadin-lit-grid-selection-column.js';
+import './vaadin-lit-grid-sorter.js';
+import './vaadin-lit-grid-sort-column.js';
+import './vaadin-lit-grid-tree-toggle.js';
+import './vaadin-lit-grid-tree-column.js';
+import './vaadin-lit-grid.js';
+import '../../src/lit-all-imports.js';

package/theme/material/vaadin-grid-column-group.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column-group.js';

package/theme/material/vaadin-grid-column.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column.js';

package/theme/material/vaadin-grid-filter-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-filter.js';
+import '../../src/vaadin-grid-filter-column.js';

package/theme/material/vaadin-grid-filter.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import '../../src/vaadin-grid-filter.js';

package/theme/material/vaadin-grid-selection-column.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
+import '../../src/vaadin-grid-selection-column.js';

package/theme/material/vaadin-grid-sort-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter.js';
+import '../../src/vaadin-grid-sort-column.js';

package/theme/material/vaadin-grid-sorter-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';

package/theme/material/vaadin-grid-sorter.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-grid-sorter.js';

package/theme/material/vaadin-grid-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-grid-tree-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle.js';
+import '../../src/vaadin-grid-tree-column.js';

package/theme/material/vaadin-grid-tree-toggle-styles.d.ts

@@ -0,0 +1,3 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-grid-tree-toggle.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-grid-tree-toggle.js';

package/theme/material/vaadin-grid.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-grid.js';

package/theme/material/vaadin-lit-grid-column-group.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column-group.js';

package/theme/material/vaadin-lit-grid-column.d.ts

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-grid-column.js';

package/theme/material/vaadin-lit-grid-filter-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-filter.js';
+import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/material/vaadin-lit-grid-filter.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
+import '../../src/vaadin-lit-grid-filter.js';

package/theme/material/vaadin-lit-grid-selection-column.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/material/vaadin-lit-checkbox.js';
+import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/material/vaadin-lit-grid-sort-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-sorter.js';
+import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/material/vaadin-lit-grid-sorter.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-lit-grid-sorter.js';

package/theme/material/vaadin-lit-grid-tree-column.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-lit-grid-tree-toggle.js';
+import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/material/vaadin-lit-grid-tree-toggle.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/material/vaadin-lit-grid.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-lit-grid.js';