@vaadin/grid 24.0.0-alpha1 → 24.0.0-alpha11

package/src/vaadin-grid.js

@@ -1,14 +1,16 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.js';
 import './vaadin-grid-styles.js';
 import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
 import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -25,6 +27,7 @@ import { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';
 import { DynamicColumnsMixin } from './vaadin-grid-dynamic-columns-mixin.js';
 import { EventContextMixin } from './vaadin-grid-event-context-mixin.js';
 import { FilterMixin } from './vaadin-grid-filter-mixin.js';
+import { getBodyRowCells, iterateChildren, updateCellsPart, updateRowStates } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
 import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
 import { ScrollMixin } from './vaadin-grid-scroll-mixin.js';
@@ -172,45 +175,86 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------------|----------------
- * `row` | Row in the internal table
- * `cell` | Cell in the internal table
- * `header-cell` | Header cell in the internal table
- * `body-cell` | Body cell in the internal table
- * `footer-cell` | Footer cell in the internal table
- * `details-cell` | Row details cell in the internal table
- * `focused-cell` | Focused cell in the internal table
- * `resize-handle` | Handle for resizing the columns
- * `reorder-ghost` | Ghost element of the header cell being dragged
+ * Part name                  | Description
+ * ---------------------------|----------------
+ * `row`                      | Row in the internal table
+ * `expanded-row`             | Expanded row
+ * `selected-row`             | Selected row
+ * `details-opened-row`       | Row with details open
+ * `odd-row`                  | Odd row
+ * `even-row`                 | Even row
+ * `first-row`                | The first body row
+ * `last-row`                 | The last body row
+ * `dragstart-row`            | Set on the row for one frame when drag is starting.
+ * `dragover-above-row`       | Set on the row when the a row is dragged over above
+ * `dragover-below-row`       | Set on the row when the a row is dragged over below
+ * `dragover-on-top-row`      | Set on the row when the a row is dragged over on top
+ * `drag-disabled-row`        | Set to a row that isn't available for dragging
+ * `drop-disabled-row`        | Set to a row that can't be dropped on top of
+ * `cell`                     | Cell in the internal table
+ * `header-cell`              | Header cell in the internal table
+ * `body-cell`                | Body cell in the internal table
+ * `footer-cell`              | Footer cell in the internal table
+ * `details-cell`             | Row details cell in the internal table
+ * `focused-cell`             | Focused cell in the internal table
+ * `odd-row-cell`             | Cell in an odd row
+ * `even-row-cell`            | Cell in an even row
+ * `first-row-cell`           | Cell in the first body row
+ * `last-row-cell`            | Cell in the last body row
+ * `first-header-row-cell`    | Cell in the first header row
+ * `first-footer-row-cell`    | Cell in the first footer row
+ * `last-header-row-cell`     | Cell in the last header row
+ * `last-footer-row-cell`     | Cell in the last footer row
+ * `loading-row-cell`         | Cell in a row that is waiting for data from data provider
+ * `selected-row-cell`        | Cell in a selected row
+ * `expanded-row-cell`        | Cell in an expanded row
+ * `details-opened-row-cell`  | Cell in an row with details open
+ * `dragstart-row-cell`       | Cell in a row that user started to drag (set for one frame)
+ * `dragover-above-row-cell`  | Cell in a row that has another row dragged over above
+ * `dragover-below-row-cell`  | Cell in a row that has another row dragged over below
+ * `dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top
+ * `drag-disabled-row-cell`   | Cell in a row that isn't available for dragging
+ * `drop-disabled-row-cell`   | Cell in a row that can't be dropped on top of
+ * `frozen-cell`              | Frozen cell in the internal table
+ * `frozen-to-end-cell`       | Frozen to end cell in the internal table
+ * `last-frozen-cell`         | Last frozen cell
+ * `first-frozen-to-end-cell` | First cell frozen to end
+ * `first-column-cell`        | First visible cell on a row
+ * `last-column-cell`         | Last visible cell on a row
+ * `reorder-allowed-cell`     | Cell in a column where another column can be reordered
+ * `reorder-dragging-cell`    | Cell in a column currently being reordered
+ * `resize-handle`            | Handle for resizing the columns
+ * `reorder-ghost`            | Ghost element of the header cell being dragged
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `loading` | Set when the grid is loading data from data provider | :host
- * `interacting` | Keyboard navigation in interaction mode | :host
- * `navigating` | Keyboard navigation in navigation mode | :host
- * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
- * `reordering` | Set when the grid's columns are being reordered | :host
- * `dragover` | Set when the grid (not a specific row) is dragged over | :host
- * `dragging-rows` | Set when grid rows are dragged  | :host
- * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
- * `frozen` | Frozen cell | cell
- * `last-frozen` | Last frozen cell | cell
- * `first-column` | First visible cell on a row | cell
- * `last-column` | Last visible cell on a row | cell
- * `selected` | Selected row | row
- * `expanded` | Expanded row | row
- * `details-opened` | Row with details open | row
- * `loading` | Row that is waiting for data from data provider | row
- * `odd` | Odd row | row
- * `first` | The first body row | row
- * `last` | The last body row | row
- * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row
- * `dragover` | Set when the row is dragged over | row
- * `drag-disabled` | Set to a row that isn't available for dragging | row
- * `drop-disabled` | Set to a row that can't be dropped on top of | row
+ * Attribute             | Description                                                                                       | Part name
+ * ----------------------|---------------------------------------------------------------------------------------------------|-----------
+ * `loading`             | Set when the grid is loading data from data provider                                              | :host
+ * `interacting`         | Keyboard navigation in interaction mode                                                           | :host
+ * `navigating`          | Keyboard navigation in navigation mode                                                            | :host
+ * `overflow`            | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
+ * `reordering`          | Set when the grid's columns are being reordered                                                   | :host
+ * `dragover`            | Set when the grid (not a specific row) is dragged over                                            | :host
+ * `dragging-rows`       | Set when grid rows are dragged                                                                    | :host
+ * `reorder-status`      | Reflects the status of a cell while columns are being reordered                                   | cell
+ * `frozen`              | Frozen cell                                                                                       | cell
+ * `frozen-to-end`       | Cell frozen to end                                                                                | cell
+ * `last-frozen`         | Last frozen cell                                                                                  | cell
+ * `first-frozen-to-end` | First cell frozen to end                                                                          | cell
+ * `first-column`        | First visible cell on a row                                                                       | cell
+ * `last-column`         | Last visible cell on a row                                                                        | cell
+ * `selected`            | Selected row                                                                                      | row
+ * `expanded`            | Expanded row                                                                                      | row
+ * `details-opened`      | Row with details open                                                                             | row
+ * `loading`             | Row that is waiting for data from data provider                                                   | row
+ * `odd`                 | Odd row                                                                                           | row
+ * `first`               | The first body row                                                                                | row
+ * `last`                | The last body row                                                                                 | row
+ * `dragstart`           | Set for one frame when starting to drag a row. The value is a number when dragging multiple rows  | row
+ * `dragover`            | Set when the row is dragged over                                                                  | row
+ * `drag-disabled`       | Set to a row that isn't available for dragging                                                    | row
+ * `drop-disabled`       | Set to a row that can't be dropped on top of                                                      | row
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
@@ -219,12 +263,14 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
  * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
  * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
+ * @fires {CustomEvent} data-provider-changed - Fired when the `dataProvider` property changes.
  * @fires {CustomEvent} expanded-items-changed - Fired when the `expandedItems` property changes.
  * @fires {CustomEvent} grid-dragstart - Fired when starting to drag grid rows.
  * @fires {CustomEvent} grid-dragend - Fired when the dragging of the rows ends.
  * @fires {CustomEvent} grid-drop - Fired when a drop occurs on top of the grid.
  * @fires {CustomEvent} loading-changed - Fired when the `loading` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
+ * @fires {CustomEvent} size-changed - Fired when the `size` property changes.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -390,6 +436,18 @@ class Grid extends ElementMixin(
     this.addEventListener('animationend', this._onAnimationEnd);
   }
 
+  /** @private */
+  get _firstVisibleIndex() {
+    const firstVisibleItem = this.__getFirstVisibleItem();
+    return firstVisibleItem ? firstVisibleItem.index : undefined;
+  }
+
+  /** @private */
+  get _lastVisibleIndex() {
+    const lastVisibleItem = this.__getLastVisibleItem();
+    return lastVisibleItem ? lastVisibleItem.index : undefined;
+  }
+
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
@@ -409,12 +467,6 @@ class Grid extends ElementMixin(
     return this._getVisibleRows().find((row) => this._isInViewport(row));
   }
 
-  /** @private */
-  get _firstVisibleIndex() {
-    const firstVisibleItem = this.__getFirstVisibleItem();
-    return firstVisibleItem ? firstVisibleItem.index : undefined;
-  }
-
   /** @private */
   __getLastVisibleItem() {
     return this._getVisibleRows()
@@ -422,12 +474,6 @@ class Grid extends ElementMixin(
       .find((row) => this._isInViewport(row));
   }
 
-  /** @private */
-  get _lastVisibleIndex() {
-    const lastVisibleItem = this.__getLastVisibleItem();
-    return lastVisibleItem ? lastVisibleItem.index : undefined;
-  }
-
   /** @private */
   _isInViewport(item) {
     const scrollTargetRect = this.$.table.getBoundingClientRect();
@@ -467,19 +513,6 @@ class Grid extends ElementMixin(
     this._tooltipController.setManual(true);
   }
 
-  /**
-   * @param {string} name
-   * @param {?string} oldValue
-   * @param {?string} newValue
-   * @protected
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === 'dir') {
-      this.__isRTL = newValue === 'rtl';
-    }
-  }
-
   /** @private */
   __getBodyCellCoordinates(cell) {
     if (this.$.items.contains(cell) && cell.localName === 'td') {
@@ -506,9 +539,15 @@ class Grid extends ElementMixin(
       const cell = this.shadowRoot.activeElement;
       const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
+      const previousSize = virtualizer.size || 0;
       virtualizer.size = effectiveSize;
-      virtualizer.update();
-      virtualizer.flush();
+
+      // Request an update for the previous last row to have the "last" state removed
+      virtualizer.update(previousSize - 1, previousSize - 1);
+      if (effectiveSize < previousSize) {
+        // Size was decreased, so the new last row requires an explicit update
+        virtualizer.update(effectiveSize - 1, effectiveSize - 1);
+      }
 
       // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
       if (cellCoordinates && cell.parentElement.hidden) {
@@ -539,6 +578,18 @@ class Grid extends ElementMixin(
 
   /** @private */
   __getIntrinsicWidth(col) {
+    if (this.__intrinsicWidthCache.has(col)) {
+      return this.__intrinsicWidthCache.get(col);
+    }
+
+    const width = this.__calculateIntrinsicWidth(col);
+    this.__intrinsicWidthCache.set(col, width);
+
+    return width;
+  }
+
+  /** @private */
+  __calculateIntrinsicWidth(col) {
     const initialWidth = col.width;
     const initialFlexGrow = col.flexGrow;
 
@@ -605,12 +656,19 @@ class Grid extends ElementMixin(
   _recalculateColumnWidths(cols) {
     // Flush to make sure DOM is up-to-date when measuring the column widths
     this.__virtualizer.flush();
+    [...this.$.header.children, ...this.$.footer.children].forEach((row) => {
+      if (row.__debounceUpdateHeaderFooterRowVisibility) {
+        row.__debounceUpdateHeaderFooterRowVisibility.flush();
+      }
+    });
 
     // Flush to account for any changes to the visibility of the columns
     if (this._debouncerHiddenChanged) {
       this._debouncerHiddenChanged.flush();
     }
 
+    this.__intrinsicWidthCache = new Map();
+
     cols.forEach((col) => {
       col.width = `${this.__getDistributedWidth(col)}px`;
     });
@@ -751,13 +809,10 @@ class Grid extends ElementMixin(
    * @param {boolean} noNotify
    * @protected
    */
-  // eslint-disable-next-line max-params
-  _updateRow(row, columns, section, isColumnRow, noNotify) {
-    section = section || 'body';
-
+  _updateRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
     const contentsFragment = document.createDocumentFragment();
 
-    Array.from(row.children).forEach((cell) => {
+    iterateChildren(row, (cell) => {
       cell._vacant = true;
     });
     row.innerHTML = '';
@@ -769,7 +824,9 @@ class Grid extends ElementMixin(
 
         if (section === 'body') {
           // Body
-          column._cells = column._cells || [];
+          if (!column._cells) {
+            column._cells = [];
+          }
           cell = column._cells.find((cell) => cell._vacant);
           if (!cell) {
             cell = this._createCell('td', column);
@@ -780,7 +837,9 @@ class Grid extends ElementMixin(
 
           if (index === cols.length - 1 && this.rowDetailsRenderer) {
             // Add details cell as last cell to body rows
-            this._detailsCells = this._detailsCells || [];
+            if (!this._detailsCells) {
+              this._detailsCells = [];
+            }
             const detailsCell = this._detailsCells.find((cell) => cell._vacant) || this._createCell('td');
             if (this._detailsCells.indexOf(detailsCell) === -1) {
               this._detailsCells.push(detailsCell);
@@ -806,7 +865,9 @@ class Grid extends ElementMixin(
             row.appendChild(cell);
             column[`_${section}Cell`] = cell;
           } else {
-            column._emptyCells = column._emptyCells || [];
+            if (!column._emptyCells) {
+              column._emptyCells = [];
+            }
             cell = column._emptyCells.find((cell) => cell._vacant) || this._createCell(tagName);
             cell._column = column;
             row.appendChild(cell);
@@ -815,7 +876,6 @@ class Grid extends ElementMixin(
             }
           }
           cell.setAttribute('part', `cell ${section}-cell`);
-          this.__updateHeaderFooterRowVisibility(row);
         }
 
         if (!cell._content.parentElement) {
@@ -825,6 +885,10 @@ class Grid extends ElementMixin(
         cell._column = column;
       });
 
+    if (section !== 'body') {
+      this.__debounceUpdateHeaderFooterRowVisibility(row);
+    }
+
     // Might be empty if only cache was used
     this.appendChild(contentsFragment);
 
@@ -832,6 +896,18 @@ class Grid extends ElementMixin(
     this._updateFirstAndLastColumnForRow(row);
   }
 
+  /**
+   * @param {HTMLTableRowElement} row
+   * @protected
+   */
+  __debounceUpdateHeaderFooterRowVisibility(row) {
+    row.__debounceUpdateHeaderFooterRowVisibility = Debouncer.debounce(
+      row.__debounceUpdateHeaderFooterRowVisibility,
+      microTask,
+      () => this.__updateHeaderFooterRowVisibility(row),
+    );
+  }
+
   /**
    * @param {HTMLTableRowElement} row
    * @protected
@@ -886,9 +962,8 @@ class Grid extends ElementMixin(
       return;
     }
 
-    row.toggleAttribute('first', index === 0);
-    row.toggleAttribute('last', index === this._effectiveSize - 1);
-    row.toggleAttribute('odd', index % 2);
+    this._updateRowOrderParts(row, index);
+
     this._a11yUpdateRowRowindex(row, index);
     this._getItem(index, row);
   }
@@ -899,14 +974,38 @@ class Grid extends ElementMixin(
     this.recalculateColumnWidths();
   }
 
+  /** @private */
+  _updateRowOrderParts(row, index = row.index) {
+    updateRowStates(row, {
+      first: index === 0,
+      last: index === this._effectiveSize - 1,
+      odd: index % 2 !== 0,
+      even: index % 2 === 0,
+    });
+  }
+
+  /** @private */
+  _updateRowStateParts(row, { expanded, selected, detailsOpened }) {
+    updateRowStates(row, {
+      expanded,
+      selected,
+      'details-opened': detailsOpened,
+    });
+  }
+
   /**
    * @param {!Array<!GridColumn>} columnTree
    * @protected
    */
   _renderColumnTree(columnTree) {
-    Array.from(this.$.items.children).forEach((row) =>
-      this._updateRow(row, columnTree[columnTree.length - 1], null, false, true),
-    );
+    iterateChildren(this.$.items, (row) => {
+      this._updateRow(row, columnTree[columnTree.length - 1], 'body', false, true);
+
+      const model = this.__getRowModel(row);
+      this._updateRowOrderParts(row);
+      this._updateRowStateParts(row, model);
+      this._filterDragAndDrop(row, model);
+    });
 
     while (this.$.header.children.length < columnTree.length) {
       const headerRow = document.createElement('tr');
@@ -926,13 +1025,21 @@ class Grid extends ElementMixin(
       this.$.footer.removeChild(this.$.footer.firstElementChild);
     }
 
-    Array.from(this.$.header.children).forEach((headerRow, index) =>
-      this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1),
-    );
+    iterateChildren(this.$.header, (headerRow, index, rows) => {
+      this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
 
-    Array.from(this.$.footer.children).forEach((footerRow, index) =>
-      this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0),
-    );
+      const cells = getBodyRowCells(headerRow);
+      updateCellsPart(cells, 'first-header-row-cell', index === 0);
+      updateCellsPart(cells, 'last-header-row-cell', index === rows.length - 1);
+    });
+
+    iterateChildren(this.$.footer, (footerRow, index, rows) => {
+      this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
+
+      const cells = getBodyRowCells(footerRow);
+      updateCellsPart(cells, 'first-footer-row-cell', index === 0);
+      updateCellsPart(cells, 'last-footer-row-cell', index === rows.length - 1);
+    });
 
     // Sizer rows
     this._updateRow(this.$.sizer, columnTree[columnTree.length - 1]);
@@ -945,11 +1052,13 @@ class Grid extends ElementMixin(
     this._a11yUpdateFooterRows();
     this.__updateFooterPositioning();
     this.generateCellClassNames();
+    this.generateCellPartNames();
   }
 
+  /** @private */
   __updateFooterPositioning() {
     // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support
-    if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/)[1]) < 99) {
+    if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/u)[1]) < 99) {
       // Sticky (or translated) footer in a flexbox host doesn't get included in
       // the scroll height calculation on FF. This is a workaround for the issue.
       this.$.items.style.paddingBottom = 0;
@@ -973,14 +1082,13 @@ class Grid extends ElementMixin(
     this._a11yUpdateRowLevel(row, model.level);
     this._a11yUpdateRowSelected(row, model.selected);
 
-    row.toggleAttribute('expanded', model.expanded);
-    row.toggleAttribute('selected', model.selected);
-    row.toggleAttribute('details-opened', model.detailsOpened);
+    this._updateRowStateParts(row, model);
 
     this._generateCellClassNames(row, model);
+    this._generateCellPartNames(row, model);
     this._filterDragAndDrop(row, model);
 
-    Array.from(row.children).forEach((cell) => {
+    iterateChildren(row, (cell) => {
       if (cell._renderer) {
         const owner = cell._column || this;
         cell._renderer.call(owner, cell._content, owner, model);
@@ -1088,21 +1196,6 @@ class Grid extends ElementMixin(
       this.__virtualizer.update(start, end);
     }
   }
-
-  /**
-   * Updates the computed metrics and positioning of internal grid parts
-   * (row/details cell positioning etc). Needs to be invoked whenever the sizing of grid
-   * content changes asynchronously to ensure consistent appearance (e.g. when a
-   * contained image whose bounds aren't known beforehand finishes loading).
-   *
-   * @deprecated Since Vaadin 22, `notifyResize()` is deprecated. The component uses a
-   * ResizeObserver internally and doesn't need to be explicitly notified of resizes.
-   */
-  notifyResize() {
-    console.warn(
-      `WARNING: Since Vaadin 22, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`,
-    );
-  }
 }
 
 customElements.define(Grid.is, Grid);

package/theme/lumo/vaadin-grid-styles.js

@@ -57,7 +57,7 @@ registerStyles(
     }
 
     /* Hide first body row top border */
-    :host(:not([theme~='no-row-borders'])) [part='row'][first] [part~='cell']:not([part~='details-cell']) {
+    :host(:not([theme~='no-row-borders'])) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
       border-top: 0;
       min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
     }
@@ -137,7 +137,7 @@ registerStyles(
       margin-top: -1px;
     }
 
-    :host([all-rows-visible]) [part~='row'][last][dragover='below'] [part~='cell']::after {
+    :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
       height: 1px;
     }
 
@@ -207,42 +207,42 @@ registerStyles(
       font-weight: 400;
     }
 
-    [part='row']:only-child [part~='header-cell'] {
+    [part~='row']:only-child [part~='header-cell'] {
       min-height: var(--lumo-size-xl);
     }
 
     /* Header borders */
 
     /* Hide first header row top border */
-    :host(:not([theme~='no-row-borders'])) [part='row']:first-child [part~='header-cell'] {
+    :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='header-cell'] {
       border-top: 0;
     }
 
-    [part='row']:last-child [part~='header-cell'] {
+    [part~='row']:last-child [part~='header-cell'] {
       border-bottom: var(--_lumo-grid-border-width) solid transparent;
     }
 
-    :host(:not([theme~='no-row-borders'])) [part='row']:last-child [part~='header-cell'] {
+    :host(:not([theme~='no-row-borders'])) [part~='row']:last-child [part~='header-cell'] {
       border-bottom-color: var(--_lumo-grid-secondary-border-color);
     }
 
     /* Overflow uses a stronger border color */
-    :host([overflow~='top']) [part='row']:last-child [part~='header-cell'] {
+    :host([overflow~='top']) [part~='row']:last-child [part~='header-cell'] {
       border-bottom-color: var(--_lumo-grid-border-color);
     }
 
     /* Footer borders */
 
-    [part='row']:first-child [part~='footer-cell'] {
+    [part~='row']:first-child [part~='footer-cell'] {
       border-top: var(--_lumo-grid-border-width) solid transparent;
     }
 
-    :host(:not([theme~='no-row-borders'])) [part='row']:first-child [part~='footer-cell'] {
+    :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='footer-cell'] {
       border-top-color: var(--_lumo-grid-secondary-border-color);
     }
 
     /* Overflow uses a stronger border color */
-    :host([overflow~='bottom']) [part='row']:first-child [part~='footer-cell'] {
+    :host([overflow~='bottom']) [part~='row']:first-child [part~='footer-cell'] {
       border-top-color: var(--_lumo-grid-border-color);
     }
 
@@ -309,8 +309,8 @@ registerStyles(
 
     /* Row stripes */
 
-    :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='body-cell'],
-    :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='details-cell'] {
+    :host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
+    :host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
       background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
       background-repeat: repeat-x;
     }
@@ -334,7 +334,7 @@ registerStyles(
 
     /* Compact */
 
-    :host([theme~='compact']) [part='row']:only-child [part~='header-cell'] {
+    :host([theme~='compact']) [part~='row']:only-child [part~='header-cell'] {
       min-height: var(--lumo-size-m);
     }
 
@@ -342,7 +342,7 @@ registerStyles(
       min-height: var(--lumo-size-s);
     }
 
-    :host([theme~='compact']) [part='row'][first] [part~='cell']:not([part~='details-cell']) {
+    :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
       min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
     }
 

package/theme/lumo/vaadin-grid.js

@@ -1,9 +1,2 @@
-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';
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
 import './vaadin-grid-styles.js';
 import '../../src/vaadin-grid.js';

package/theme/material/vaadin-grid-styles.js

@@ -191,7 +191,7 @@ registerStyles(
       margin-top: -1px;
     }
 
-    :host([all-rows-visible]) [part~='row'][last][dragover='below'] [part~='cell']::after {
+    :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
       height: 1px;
     }