@vaadin/grid 25.0.0-beta3 → 25.0.0-beta5

package/src/styles/vaadin-grid-tree-toggle-base-styles.js

@@ -8,7 +8,7 @@ import { css } from 'lit';
 
 export const gridTreeToggleStyles = css`
   :host {
-    display: flex;
+    display: inline-flex;
     max-width: 100%;
     pointer-events: none;
   }
@@ -35,6 +35,13 @@ export const gridTreeToggleStyles = css`
     width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 16px));
   }
 
+  /* Baseline alignment */
+  #level-spacer::before {
+    content: '\\2003' / '';
+    display: inline-block;
+    width: 0;
+  }
+
   [part='toggle'] {
     margin-inline-end: var(--vaadin-gap-s);
   }
@@ -66,6 +73,7 @@ export const gridTreeToggleStyles = css`
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
+    flex: 1;
   }
 
   @media (forced-colors: active) {

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

@@ -22,73 +22,74 @@ export const A11yMixin = (superClass) =>
       };
     }
     static get observers() {
-      return ['_a11yUpdateGridSize(size, _columnTree, __emptyState)'];
+      return ['__a11yUpdateGridSize(size, _columnTree, __emptyState)'];
     }
 
     /** @private */
-    _a11yGetHeaderRowCount(_columnTree) {
+    __a11yGetHeaderRowCount(_columnTree) {
       return _columnTree.filter((level) =>
         level.some((col) => col.headerRenderer || (col.path && col.header !== null) || col.header),
       ).length;
     }
 
     /** @private */
-    _a11yGetFooterRowCount(_columnTree) {
+    __a11yGetFooterRowCount(_columnTree) {
       return _columnTree.filter((level) => level.some((col) => col.footerRenderer)).length;
     }
 
     /** @private */
-    _a11yUpdateGridSize(size, _columnTree, emptyState) {
+    __a11yUpdateGridSize(size, _columnTree, emptyState) {
       if (size === undefined || _columnTree === undefined) {
         return;
       }
 
-      const headerRowsCount = this._a11yGetHeaderRowCount(_columnTree);
-      const footerRowsCount = this._a11yGetFooterRowCount(_columnTree);
+      const headerRowsCount = this.__a11yGetHeaderRowCount(_columnTree);
+      const footerRowsCount = this.__a11yGetFooterRowCount(_columnTree);
       const bodyRowsCount = emptyState ? 1 : size;
       const rowsCount = bodyRowsCount + headerRowsCount + footerRowsCount;
 
       this.$.table.setAttribute('aria-rowcount', rowsCount);
 
       const bodyColumns = _columnTree[_columnTree.length - 1];
+
       // If no header and footer rows while the empty state is active, count as one column
       // Otherwise, use the number of body columns, if present
       const columnsCount = emptyState ? 1 : (rowsCount && bodyColumns && bodyColumns.length) || 0;
       this.$.table.setAttribute('aria-colcount', columnsCount);
 
-      this._a11yUpdateHeaderRows();
-      this._a11yUpdateFooterRows();
+      this.__a11yUpdateHeaderRows();
+      this.__a11yUpdateFooterRows();
     }
 
-    /** @protected */
-    _a11yUpdateHeaderRows() {
+    /** @private */
+    __a11yUpdateHeaderRows() {
       iterateChildren(this.$.header, (headerRow, index) => {
         headerRow.setAttribute('aria-rowindex', index + 1);
       });
     }
 
-    /** @protected */
-    _a11yUpdateFooterRows() {
+    /** @private */
+    __a11yUpdateFooterRows() {
       iterateChildren(this.$.footer, (footerRow, index) => {
-        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1);
+        footerRow.setAttribute('aria-rowindex', this.__a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1);
       });
     }
 
     /**
      * @param {!HTMLElement} row
      * @param {number} index
-     * @protected
+     * @private
      */
-    _a11yUpdateRowRowindex(row, index) {
-      row.setAttribute('aria-rowindex', index + this._a11yGetHeaderRowCount(this._columnTree) + 1);
+    __a11yUpdateRowRowindex(row) {
+      row.setAttribute('aria-rowindex', row.index + this.__a11yGetHeaderRowCount(this._columnTree) + 1);
     }
 
     /**
      * @param {!HTMLElement} row
      * @param {boolean} selected
-     * @protected
+     * @private
      */
-    _a11yUpdateRowSelected(row, selected) {
+    __a11yUpdateRowSelected(row, selected) {
       // Jaws reads selection only for rows, NVDA only for cells
       row.setAttribute('aria-selected', Boolean(selected));
       iterateRowCells(row, (cell) => {
@@ -98,9 +99,9 @@ export const A11yMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @protected
+     * @private
      */
-    _a11yUpdateRowExpanded(row) {
+    __a11yUpdateRowExpanded(row) {
       const toggleCell = findTreeToggleCell(row);
       if (this.__isRowExpandable(row)) {
         row.setAttribute('aria-expanded', 'false');
@@ -123,9 +124,9 @@ export const A11yMixin = (superClass) =>
     /**
      * @param {!HTMLElement} row
      * @param {number} level
-     * @protected
+     * @private
      */
-    _a11yUpdateRowLevel(row, level) {
+    __a11yUpdateRowLevel(row, level) {
       // Set level for the expandable rows itself, and all the nested rows.
       if (level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row)) {
         row.setAttribute('aria-level', level + 1);
@@ -137,9 +138,9 @@ export const A11yMixin = (superClass) =>
     /**
      * @param {!HTMLElement} row
      * @param {!HTMLElement} detailsCell
-     * @protected
+     * @private
      */
-    _a11ySetRowDetailsCell(row, detailsCell) {
+    __a11ySetRowDetailsCell(row, detailsCell) {
       iterateRowCells(row, (cell) => {
         if (cell !== detailsCell) {
           cell.setAttribute('aria-controls', detailsCell.id);
@@ -150,14 +151,14 @@ export const A11yMixin = (superClass) =>
     /**
      * @param {!HTMLElement} cell
      * @param {number} colspan
-     * @protected
+     * @private
      */
-    _a11yUpdateCellColspan(cell, colspan) {
+    __a11yUpdateCellColspan(cell, colspan) {
       cell.setAttribute('aria-colspan', Number(colspan));
     }
 
-    /** @protected */
-    _a11yUpdateSorters() {
+    /** @private */
+    __a11yUpdateSorters() {
       Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach((sorter) => {
         let cellContent = sorter.parentNode;
         while (cellContent && cellContent.localName !== 'vaadin-grid-cell-content') {

package/src/vaadin-grid-active-item-mixin.js

@@ -73,7 +73,7 @@ export const ActiveItemMixin = (superClass) =>
         // No clicked cell available
         !cell ||
         // Cell is a details cell
-        cell.getAttribute('part').includes('details-cell') ||
+        cell.part.contains('details-cell') ||
         // Cell is the empty state cell
         cell === this.$.emptystatecell ||
         // Cell content is focused

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

@@ -314,13 +314,13 @@ export const GridColumnGroupMixin = (superClass) =>
       if (headerCell) {
         headerCell.setAttribute('colspan', colSpan);
         if (this._grid) {
-          this._grid._a11yUpdateCellColspan(headerCell, colSpan);
+          this._grid.__a11yUpdateCellColspan(headerCell, colSpan);
         }
       }
       if (footerCell) {
         footerCell.setAttribute('colspan', colSpan);
         if (this._grid) {
-          this._grid._a11yUpdateCellColspan(footerCell, colSpan);
+          this._grid.__a11yUpdateCellColspan(footerCell, colSpan);
         }
       }
     }

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

@@ -7,7 +7,7 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
-import { updateCellState } from './vaadin-grid-helpers.js';
+import { updateCellState, updatePart } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -518,7 +518,7 @@ export const ColumnBaseMixin = (superClass) =>
 
             if (resizable) {
               const handle = document.createElement('div');
-              handle.setAttribute('part', 'resize-handle');
+              updatePart(handle, 'resize-handle', true);
               cell.appendChild(handle);
             }
           }

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

@@ -134,7 +134,7 @@ export const ColumnReorderingMixin = (superClass) =>
       }
 
       const headerCell = this._cellFromPoint(e.detail.x, e.detail.y);
-      if (!headerCell || !headerCell.getAttribute('part').includes('header-cell')) {
+      if (!headerCell || !headerCell.part.contains('header-cell')) {
         return;
       }
 

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

@@ -20,22 +20,16 @@ export const ColumnResizingMixin = (superClass) =>
       scroller.addEventListener('touchmove', (e) => scroller.hasAttribute('column-resizing') && e.preventDefault());
 
       // Disable contextmenu on any resize separator.
-      scroller.addEventListener(
-        'contextmenu',
-        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
-      );
+      scroller.addEventListener('contextmenu', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
 
       // Disable native cell focus when resizing
-      scroller.addEventListener(
-        'mousedown',
-        (e) => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault(),
-      );
+      scroller.addEventListener('mousedown', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
     }
 
     /** @private */
     _onHeaderTrack(e) {
       const handle = e.target;
-      if (handle.getAttribute('part') === 'resize-handle') {
+      if (handle.part.contains('resize-handle')) {
         const cell = handle.parentElement;
         let column = cell._column;
 

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -447,7 +447,7 @@ export const DragAndDropMixin = (superClass) =>
       return rows
         .map((row) => {
           return Array.from(row.children)
-            .filter((cell) => !cell.hidden && cell.getAttribute('part').indexOf('details-cell') === -1)
+            .filter((cell) => !cell.hidden && !cell.part.contains('details-cell'))
             .sort((a, b) => {
               return a._column._order > b._column._order ? 1 : -1;
             })

package/src/vaadin-grid-event-context-mixin.js

@@ -40,8 +40,8 @@ export const EventContextMixin = (superClass) =>
         return context;
       }
 
-      context.section = ['body', 'header', 'footer', 'details'].find(
-        (section) => cell.getAttribute('part').indexOf(section) > -1,
+      context.section = ['body', 'header', 'footer', 'details'].find((section) =>
+        cell.part.contains(`${section}-cell`),
       );
 
       if (cell._column) {

package/src/vaadin-grid-helpers.js

@@ -5,7 +5,6 @@
  */
 import { microTask } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
 /**
  * Returns the cells of the given row, excluding the details cell.
@@ -81,15 +80,13 @@ export function updateState(element, attribute, value) {
 
 /**
  * @param {!HTMLElement} element
- * @param {boolean | string | null | undefined} value
  * @param {string} part
+ * @param {boolean | string | null | undefined} value
  */
-export function updatePart(element, value, part) {
-  if (value || value === '') {
-    addValueToAttribute(element, 'part', part);
-  } else {
-    removeValueFromAttribute(element, 'part', part);
-  }
+export function updatePart(element, part, value) {
+  element.classList.toggle(part, value || value === '');
+  element.part.toggle(part, value || value === '');
+  element.part.length === 0 && element.removeAttribute('part');
 }
 
 /**
@@ -99,7 +96,7 @@ export function updatePart(element, value, part) {
  */
 export function updateCellsPart(cells, part, value) {
   cells.forEach((cell) => {
-    updatePart(cell, value, part);
+    updatePart(cell, part, value);
   });
 }
 
@@ -117,7 +114,7 @@ export function updateBooleanRowStates(row, states) {
     const rowPart = `${state}-row`;
 
     // Row part attribute
-    updatePart(row, value, rowPart);
+    updatePart(row, rowPart, value);
 
     // Cells part attribute
     updateCellsPart(cells, `${rowPart}-cell`, value);
@@ -140,14 +137,14 @@ export function updateStringRowStates(row, states) {
     // remove previous part from row and cells if there was any
     if (prevValue) {
       const prevRowPart = `${state}-${prevValue}-row`;
-      updatePart(row, false, prevRowPart);
+      updatePart(row, prevRowPart, false);
       updateCellsPart(cells, `${prevRowPart}-cell`, false);
     }
 
     // set new part to rows and cells if there is a value
     if (value) {
       const rowPart = `${state}-${value}-row`;
-      updatePart(row, value, rowPart);
+      updatePart(row, rowPart, value);
       updateCellsPart(cells, `${rowPart}-cell`, value);
     }
   });
@@ -166,11 +163,11 @@ export function updateCellState(cell, attribute, value, part, oldPart) {
 
   // Remove old part from the attribute
   if (oldPart) {
-    updatePart(cell, false, oldPart);
+    updatePart(cell, oldPart, false);
   }
 
   // Add new part to the cell attribute
-  updatePart(cell, value, part || `${attribute}-cell`);
+  updatePart(cell, part || `${attribute}-cell`, value);
 }
 
 /**

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

@@ -6,7 +6,7 @@
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { updatePart } from './vaadin-grid-helpers.js';
 
 function isRow(element) {
   return element instanceof HTMLTableRowElement;
@@ -169,11 +169,11 @@ export const KeyboardNavigationMixin = (superClass) =>
     /** @private */
     _focusedCellChanged(focusedCell, oldFocusedCell) {
       if (oldFocusedCell) {
-        removeValueFromAttribute(oldFocusedCell, 'part', 'focused-cell');
+        updatePart(oldFocusedCell, 'focused-cell', false);
       }
 
       if (focusedCell) {
-        addValueToAttribute(focusedCell, 'part', 'focused-cell');
+        updatePart(focusedCell, 'focused-cell', true);
       }
     }
 
@@ -603,7 +603,7 @@ export const KeyboardNavigationMixin = (superClass) =>
           this._scrollHorizontallyToCell(dstCell);
         }
 
-        dstCell.focus();
+        dstCell.focus({ preventScroll: true });
       }
     }
 
@@ -1016,8 +1016,9 @@ export const KeyboardNavigationMixin = (superClass) =>
       const dstRow = dstCell.parentNode;
       const dstCellIndex = Array.from(dstRow.children).indexOf(dstCell);
       const tableRect = this.$.table.getBoundingClientRect();
-      let leftBoundary = tableRect.left,
-        rightBoundary = tableRect.right;
+      const scrollbarWidth = this.$.table.clientWidth - this.$.table.offsetWidth;
+      let leftBoundary = tableRect.left - (this.__isRTL ? scrollbarWidth : 0);
+      let rightBoundary = tableRect.right + (this.__isRTL ? 0 : scrollbarWidth);
       for (let i = dstCellIndex - 1; i >= 0; i--) {
         const cell = dstRow.children[i];
         if (cell.hasAttribute('hidden') || isDetailsCell(cell)) {
@@ -1040,10 +1041,10 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
 
       if (dstCellRect.left < leftBoundary) {
-        this.$.table.scrollLeft += Math.round(dstCellRect.left - leftBoundary);
+        this.$.table.scrollLeft += dstCellRect.left - leftBoundary;
       }
       if (dstCellRect.right > rightBoundary) {
-        this.$.table.scrollLeft += Math.round(dstCellRect.right - rightBoundary);
+        this.$.table.scrollLeft += dstCellRect.right - rightBoundary;
       }
     }
 

package/src/vaadin-grid-mixin.d.ts

@@ -31,15 +31,10 @@ import type { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid
 import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
 import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
 import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
-import type {
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  StylingMixinClass,
-} from './vaadin-grid-styling-mixin.js';
+import type { GridCellPartNameGenerator, StylingMixinClass } from './vaadin-grid-styling-mixin.js';
 
 export {
   GridBodyRenderer,
-  GridCellClassNameGenerator,
   GridCellPartNameGenerator,
   GridDataProvider,
   GridDataProviderCallback,

package/src/vaadin-grid-mixin.js

@@ -28,6 +28,7 @@ import {
   iterateRowCells,
   updateBooleanRowStates,
   updateCellsPart,
+  updatePart,
   updateState,
 } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
@@ -353,9 +354,10 @@ export const GridMixin = (superClass) =>
       const rows = [];
       for (let i = 0; i < count; i++) {
         const row = document.createElement('tr');
-        row.setAttribute('part', 'row body-row');
         row.setAttribute('role', 'row');
         row.setAttribute('tabindex', '-1');
+        updatePart(row, 'row', true);
+        updatePart(row, 'body-row', true);
         if (this._columnTree) {
           this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
         }
@@ -502,7 +504,8 @@ export const GridMixin = (superClass) =>
               }
               column._cells.push(cell);
             }
-            cell.setAttribute('part', 'cell body-cell');
+            updatePart(cell, 'cell', true);
+            updatePart(cell, 'body-cell', true);
             cell.__parentRow = row;
             // Cache the cell reference
             row.__cells.push(cell);
@@ -532,7 +535,7 @@ export const GridMixin = (superClass) =>
               row.appendChild(detailsCell);
               // Cache the details cell reference
               row.__detailsCell = detailsCell;
-              this._a11ySetRowDetailsCell(row, detailsCell);
+              this.__a11ySetRowDetailsCell(row, detailsCell);
               detailsCell._vacant = false;
             }
 
@@ -564,7 +567,8 @@ export const GridMixin = (superClass) =>
                 column._emptyCells.push(cell);
               }
             }
-            cell.part.add('cell', `${section}-cell`);
+            updatePart(cell, 'cell', true);
+            updatePart(cell, `${section}-cell`, true);
           }
 
           if (!cell._content.parentElement) {
@@ -639,9 +643,19 @@ export const GridMixin = (superClass) =>
         row.hidden = !visibleRowCells.length;
       }
 
+      if (row.parentElement === this.$.header) {
+        this.$.table.toggleAttribute('has-header', this.$.header.querySelector('tr:not([hidden])'));
+        this.__updateHeaderFooterRowParts('header');
+      }
+
+      if (row.parentElement === this.$.footer) {
+        this.$.table.toggleAttribute('has-footer', this.$.footer.querySelector('tr:not([hidden])'));
+        this.__updateHeaderFooterRowParts('footer');
+      }
+
       // Make sure the section has a tabbable element
       this._resetKeyboardNavigation();
-      this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
+      this.__a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
     }
 
     /** @private */
@@ -653,11 +667,6 @@ export const GridMixin = (superClass) =>
       }
 
       row.index = index;
-
-      this._updateRowOrderParts(row, index);
-
-      this._a11yUpdateRowRowindex(row, index);
-
       this.__ensureRowItem(row);
       this.__ensureRowHierarchy(row);
       this.__updateRow(row);
@@ -670,17 +679,17 @@ export const GridMixin = (superClass) =>
     }
 
     /** @private */
-    _updateRowOrderParts(row, index = row.index) {
+    __updateRowOrderParts(row) {
       updateBooleanRowStates(row, {
-        first: index === 0,
-        last: index === this._flatSize - 1,
-        odd: index % 2 !== 0,
-        even: index % 2 === 0,
+        first: row.index === 0,
+        last: row.index === this._flatSize - 1,
+        odd: row.index % 2 !== 0,
+        even: row.index % 2 === 0,
       });
     }
 
     /** @private */
-    _updateRowStateParts(row, { item, expanded, selected, detailsOpened }) {
+    __updateRowStateParts(row, { item, expanded, selected, detailsOpened }) {
       updateBooleanRowStates(row, {
         expanded,
         collapsed: this.__isRowExpandable(row),
@@ -702,24 +711,22 @@ export const GridMixin = (superClass) =>
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
         this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
-
-        const model = this.__getRowModel(row);
-        this._updateRowOrderParts(row);
-        this._updateRowStateParts(row, model);
-        this._filterDragAndDrop(row, model);
+        this.__updateRow(row);
       });
 
       while (this.$.header.children.length < columnTree.length) {
         const headerRow = document.createElement('tr');
-        headerRow.setAttribute('part', 'row');
         headerRow.setAttribute('role', 'row');
         headerRow.setAttribute('tabindex', '-1');
+        updatePart(headerRow, 'row', true);
+        updatePart(headerRow, 'header-row', true);
         this.$.header.appendChild(headerRow);
 
         const footerRow = document.createElement('tr');
-        footerRow.setAttribute('part', 'row');
         footerRow.setAttribute('role', 'row');
         footerRow.setAttribute('tabindex', '-1');
+        updatePart(footerRow, 'row', true);
+        updatePart(footerRow, 'footer-row', true);
         this.$.footer.appendChild(footerRow);
       }
       while (this.$.header.children.length > columnTree.length) {
@@ -727,36 +734,43 @@ export const GridMixin = (superClass) =>
         this.$.footer.removeChild(this.$.footer.firstElementChild);
       }
 
-      iterateChildren(this.$.header, (headerRow, index, rows) => {
+      iterateChildren(this.$.header, (headerRow, index) => {
         this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
-
-        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) => {
+      iterateChildren(this.$.footer, (footerRow, index) => {
         this.__initRow(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.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
+      this.__updateHeaderFooterRowParts('header');
+      this.__updateHeaderFooterRowParts('footer');
       this._resizeHandler();
       this._frozenCellsChanged();
       this._updateFirstAndLastColumn();
       this._resetKeyboardNavigation();
-      this._a11yUpdateHeaderRows();
-      this._a11yUpdateFooterRows();
-      this.generateCellClassNames();
+      this.__a11yUpdateHeaderRows();
+      this.__a11yUpdateFooterRows();
       this.generateCellPartNames();
       this.__updateHeaderAndFooter();
     }
 
+    /** @private */
+    __updateHeaderFooterRowParts(section) {
+      const visibleRows = [...this.$[section].querySelectorAll('tr:not([hidden])')];
+      [...this.$[section].children].forEach((row) => {
+        updatePart(row, `first-${section}-row`, row === visibleRows.at(0));
+        updatePart(row, `last-${section}-row`, row === visibleRows.at(-1));
+
+        getBodyRowCells(row).forEach((cell) => {
+          updatePart(cell, `first-${section}-row-cell`, row === visibleRows.at(0));
+          updatePart(cell, `last-${section}-row-cell`, row === visibleRows.at(-1));
+        });
+      });
+    }
+
     /**
      * @param {!HTMLElement} row
      * @param {boolean} loading
@@ -773,7 +787,6 @@ export const GridMixin = (superClass) =>
 
       if (loading) {
         // Run style generators for the loading row to have custom names cleared
-        this._generateCellClassNames(row);
         this._generateCellPartNames(row);
       }
     }
@@ -783,6 +796,9 @@ export const GridMixin = (superClass) =>
      * @private
      */
     __updateRow(row) {
+      this.__a11yUpdateRowRowindex(row);
+      this.__updateRowOrderParts(row);
+
       const item = this.__getRowItem(row);
       if (item) {
         this.__updateRowLoading(row, false);
@@ -796,12 +812,11 @@ export const GridMixin = (superClass) =>
 
       this._toggleDetailsCell(row, model.detailsOpened);
 
-      this._a11yUpdateRowLevel(row, model.level);
-      this._a11yUpdateRowSelected(row, model.selected);
+      this.__a11yUpdateRowLevel(row, model.level);
+      this.__a11yUpdateRowSelected(row, model.selected);
 
-      this._updateRowStateParts(row, model);
+      this.__updateRowStateParts(row, model);
 
-      this._generateCellClassNames(row, model);
       this._generateCellPartNames(row, model);
       this._filterDragAndDrop(row, model);
       this.__updateDragSourceParts(row, model);
@@ -818,7 +833,7 @@ export const GridMixin = (superClass) =>
 
       this._updateDetailsCellHeight(row);
 
-      this._a11yUpdateRowExpanded(row, model.expanded);
+      this.__a11yUpdateRowExpanded(row, model.expanded);
     }
 
     /** @private */