@vaadin/grid 25.3.0-alpha6 → 25.3.0-dev.1fa5a51482

package/custom-elements.json

@@ -3350,30 +3350,6 @@
               "name": "value-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "GridFilterElementMixin",
-              "module": "src/vaadin-grid-filter-element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-grid-filter",
-          "customElement": true,
           "attributes": [
             {
               "name": "path",
@@ -3387,6 +3363,13 @@
                 "module": "src/vaadin-grid-filter-element-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            },
             {
               "name": "value",
               "type": {
@@ -3399,7 +3382,31 @@
                 "module": "src/vaadin-grid-filter-element-mixin.js"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "GridFilterElementMixin",
+              "module": "src/vaadin-grid-filter-element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-grid-filter",
+          "customElement": true
         }
       ],
       "exports": [
@@ -3413,6 +3420,33 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-grid-header-footer-rendering-mixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "A mixin providing rendering of header and footer rows based on the column tree.",
+          "name": "HeaderFooterRenderingMixin",
+          "members": [],
+          "parameters": [
+            {
+              "name": "superClass"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HeaderFooterRenderingMixin",
+          "declaration": {
+            "name": "HeaderFooterRenderingMixin",
+            "module": "src/vaadin-grid-header-footer-rendering-mixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-grid-helpers.js",
@@ -4739,6 +4773,10 @@
               "name": "DynamicColumnsMixin",
               "module": "src/vaadin-grid-dynamic-columns-mixin.js"
             },
+            {
+              "name": "HeaderFooterRenderingMixin",
+              "module": "src/vaadin-grid-header-footer-rendering-mixin.js"
+            },
             {
               "name": "ActiveItemMixin",
               "module": "src/vaadin-grid-active-item-mixin.js"
@@ -6768,6 +6806,39 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "string"
+              },
+              "description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
+              "fieldName": "direction",
+              "inheritedFrom": {
+                "name": "GridSorterMixin",
+                "module": "src/vaadin-grid-sorter-mixin.js"
+              }
+            },
+            {
+              "name": "path",
+              "type": {
+                "text": "string"
+              },
+              "description": "JS Path of the property in the item used for sorting the data.",
+              "fieldName": "path",
+              "inheritedFrom": {
+                "name": "GridSorterMixin",
+                "module": "src/vaadin-grid-sorter-mixin.js"
+              }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            }
+          ],
           "mixins": [
             {
               "name": "GridSorterMixin",
@@ -6795,33 +6866,7 @@
             "package": "lit"
           },
           "tagName": "vaadin-grid-sorter",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "string"
-              },
-              "description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
-              "fieldName": "direction",
-              "inheritedFrom": {
-                "name": "GridSorterMixin",
-                "module": "src/vaadin-grid-sorter-mixin.js"
-              }
-            },
-            {
-              "name": "path",
-              "type": {
-                "text": "string"
-              },
-              "description": "JS Path of the property in the item used for sorting the data.",
-              "fieldName": "path",
-              "inheritedFrom": {
-                "name": "GridSorterMixin",
-                "module": "src/vaadin-grid-sorter-mixin.js"
-              }
-            }
-          ]
+          "customElement": true
         }
       ],
       "exports": [
@@ -7537,34 +7582,6 @@
               "name": "expanded-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "GridTreeToggleMixin",
-              "module": "src/vaadin-grid-tree-toggle-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin"
-            },
-            {
-              "name": "DirMixin",
-              "package": "@vaadin/component-base/src/dir-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-grid-tree-toggle",
-          "customElement": true,
           "attributes": [
             {
               "name": "expanded",
@@ -7601,8 +7618,43 @@
                 "name": "GridTreeToggleMixin",
                 "module": "src/vaadin-grid-tree-toggle-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "GridTreeToggleMixin",
+              "module": "src/vaadin-grid-tree-toggle-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin"
+            },
+            {
+              "name": "DirMixin",
+              "package": "@vaadin/component-base/src/dir-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-grid-tree-toggle",
+          "customElement": true
         }
       ],
       "exports": [
@@ -8369,38 +8421,6 @@
               "name": "size-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "GridMixin",
-              "module": "src/vaadin-grid-mixin.js"
-            },
-            {
-              "name": "I18nMixin",
-              "package": "@vaadin/component-base/src/i18n-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-grid",
-          "customElement": true,
           "attributes": [
             {
               "name": "accessible-name",
@@ -8677,8 +8697,47 @@
                 "name": "DataProviderMixin",
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "GridMixin",
+              "module": "src/vaadin-grid-mixin.js"
+            },
+            {
+              "name": "I18nMixin",
+              "package": "@vaadin/component-base/src/i18n-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-grid",
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "25.3.0-alpha6",
+  "version": "25.3.0-dev.1fa5a51482",
   "publishConfig": {
     "access": "public"
   },
@@ -45,20 +45,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha6",
-    "@vaadin/checkbox": "25.3.0-alpha6",
-    "@vaadin/component-base": "25.3.0-alpha6",
-    "@vaadin/lit-renderer": "25.3.0-alpha6",
-    "@vaadin/text-field": "25.3.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha6",
+    "@vaadin/a11y-base": "25.3.0-dev.1fa5a51482",
+    "@vaadin/checkbox": "25.3.0-dev.1fa5a51482",
+    "@vaadin/component-base": "25.3.0-dev.1fa5a51482",
+    "@vaadin/lit-renderer": "25.3.0-dev.1fa5a51482",
+    "@vaadin/text-field": "25.3.0-dev.1fa5a51482",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.1fa5a51482",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha6",
-    "@vaadin/chai-plugins": "25.3.0-alpha6",
-    "@vaadin/test-runner-commands": "25.3.0-alpha6",
+    "@vaadin/aura": "25.3.0-dev.1fa5a51482",
+    "@vaadin/chai-plugins": "25.3.0-dev.1fa5a51482",
+    "@vaadin/test-runner-commands": "25.3.0-dev.1fa5a51482",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.1fa5a51482",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "92c124fb9cff367bc07e734d8e65707facd0bd43"
+  "gitHead": "1cd5964b758ffbce3ddb6248a1997f55f8e0ebf6"
 }

package/src/directives/cell-content-directive.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+
+/**
+ * A directive that manages the `<vaadin-grid-cell-content>` element for a cell.
+ */
+class CellContentDirective extends AsyncDirective {
+  #cell;
+
+  update(part, [grid, slotName]) {
+    this.#cell = part.parentNode;
+    this.#cell._content ??= document.createElement('vaadin-grid-cell-content');
+    this.#cell._content.slot = slotName;
+
+    if (!grid.contains(this.#cell._content)) {
+      grid.appendChild(this.#cell._content);
+    }
+
+    return html`<slot name="${slotName}"></slot>`;
+  }
+
+  disconnected() {
+    this.#cell._content?.remove();
+  }
+}
+
+export const cellContent = directive(CellContentDirective);

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

@@ -153,15 +153,6 @@ export const A11yMixin = (superClass) =>
       });
     }
 
-    /**
-     * @param {!HTMLElement} cell
-     * @param {number} colspan
-     * @private
-     */
-    __a11yUpdateCellColspan(cell, colspan) {
-      cell.setAttribute('aria-colspan', Number(colspan));
-    }
-
     /** @private */
     __a11yUpdateSorters() {
       Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach((sorter) => {

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

@@ -137,11 +137,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
     _recalculateColumnWidths() {
       // 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();
-        }
-      });
+      this.__renderHeaderFooterDebouncer?.flush();
 
       this.__hasHadRenderedRowsForColumnWidthCalculation ||= this._getRenderedRows().length > 0;
 

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

@@ -57,7 +57,7 @@ export const GridColumnGroupMixin = (superClass) =>
         '_groupFrozenChanged(frozen, _rootColumns)',
         '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
         '_groupHiddenChanged(hidden)',
-        '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
+        '_colSpanChanged(_colSpan)',
         '_groupOrderChanged(_order, _rootColumns)',
         '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
         '_groupResizableChanged(resizable, _rootColumns)',
@@ -307,19 +307,8 @@ export const GridColumnGroupMixin = (superClass) =>
     }
 
     /** @private */
-    _colSpanChanged(colSpan, headerCell, footerCell) {
-      if (headerCell) {
-        headerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(headerCell, colSpan);
-        }
-      }
-      if (footerCell) {
-        footerCell.setAttribute('colspan', colSpan);
-        if (this._grid) {
-          this._grid.__a11yUpdateCellColspan(footerCell, colSpan);
-        }
-      }
+    _colSpanChanged() {
+      this._grid?.__scheduleRenderHeaderFooter?.();
     }
 
     /**

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

@@ -7,7 +7,8 @@ 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, updatePart } from './vaadin-grid-helpers.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { updateCellState } from './vaadin-grid-helpers.js';
 
 export const ColumnBaseMixin = (superClass) =>
   class ColumnBaseMixin extends superClass {
@@ -270,7 +271,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, path)',
         '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)',
         '_onFooterRendererOrBindingChanged(_footerRenderer, _footerCell)',
-        '_resizableChanged(resizable, _headerCell)',
+        '_resizableChanged(resizable)',
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells)',
         '_rowHeaderChanged(rowHeader, _cells)',
@@ -302,6 +303,19 @@ export const ColumnBaseMixin = (superClass) =>
         .filter((cell) => cell);
     }
 
+    constructor() {
+      super();
+
+      /**
+       * A stable unique id assigned once per column instance. Used to build
+       * cell content slot names that stay stable across re-renders, so lit
+       * can reuse the cell content elements when the column tree changes.
+       *
+       * @protected
+       */
+      this._id = generateUniqueId();
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
@@ -313,7 +327,7 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
+        this._cells?.forEach((cell) => {
           if (!cell._content.parentNode) {
             this._grid.appendChild(cell._content);
           }
@@ -332,7 +346,7 @@ export const ColumnBaseMixin = (superClass) =>
           return;
         }
 
-        this._allCells.forEach((cell) => {
+        this._cells?.forEach((cell) => {
           if (cell._content.parentNode) {
             cell._content.parentNode.removeChild(cell._content);
           }
@@ -485,27 +499,12 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _resizableChanged(resizable, headerCell) {
-      if (resizable === undefined || headerCell === undefined) {
+    _resizableChanged(resizable) {
+      if (resizable === undefined || this._grid === undefined) {
         return;
       }
 
-      if (headerCell) {
-        [headerCell].concat(this._emptyCells).forEach((cell) => {
-          if (cell) {
-            const existingHandle = cell.querySelector('[part~="resize-handle"]');
-            if (existingHandle) {
-              cell.removeChild(existingHandle);
-            }
-
-            if (resizable) {
-              const handle = document.createElement('div');
-              updatePart(handle, 'resize-handle', true);
-              cell.appendChild(handle);
-            }
-          }
-        });
-      }
+      this._grid.__scheduleRenderHeaderFooter?.();
     }
 
     /** @private */
@@ -531,7 +530,7 @@ export const ColumnBaseMixin = (superClass) =>
 
       if (!!hidden !== !!this._previousHidden && this._grid) {
         if (hidden === true) {
-          this._allCells.forEach((cell) => {
+          this._cells?.forEach((cell) => {
             if (cell._content.parentNode) {
               cell._content.parentNode.removeChild(cell._content);
             }
@@ -632,9 +631,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(headerRenderer, [headerCell]);
-      if (this._grid && headerCell.parentElement) {
-        this._grid.__debounceUpdateHeaderFooterRowVisibility(headerCell.parentElement);
-      }
+
+      this._grid?.__scheduleRenderHeaderFooter();
     }
 
     /** @protected */
@@ -689,9 +687,8 @@ export const ColumnBaseMixin = (superClass) =>
       }
 
       this.__renderCellsContent(footerRenderer, [footerCell]);
-      if (this._grid && footerCell.parentElement) {
-        this._grid.__debounceUpdateHeaderFooterRowVisibility(footerCell.parentElement);
-      }
+
+      this._grid?.__scheduleRenderHeaderFooter();
     }
 
     /** @protected */

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

@@ -203,6 +203,8 @@ export const ColumnReorderingMixin = (superClass) =>
         for (let i = startIndex; i !== endIndex; i += direction) {
           this._swapColumnOrders(this._draggedColumn, levelColumnsInOrder[i + direction]);
         }
+
+        this.__renderHeaderFooter();
       }
 
       this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);
@@ -434,7 +436,7 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     /**
-     * Swaps column orders and physically reorders cells in all rows.
+     * Swaps column orders and reorders cells in all rows.
      * @param {!GridColumn} column1
      * @param {!GridColumn} column2
      * @protected
@@ -444,8 +446,7 @@ export const ColumnReorderingMixin = (superClass) =>
       [column1._order, column2._order] = [column2._order, column1._order];
       const [firstColumn, secondColumn] = column1._order < column2._order ? [column1, column2] : [column2, column1];
 
-      // Reorder cells in all rows (header, footer, body, sizer)
-      [...this.$.header.children, ...this.$.footer.children, ...this.$.items.children, this.$.sizer].forEach((row) => {
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
         const cells = getBodyRowCells(row);
         const firstColumnCells = cells.filter((cell) => firstColumn.contains(cell._column));
         const secondColumnFirstCell = cells.find((cell) => secondColumn.contains(cell._column));
@@ -456,8 +457,12 @@ export const ColumnReorderingMixin = (superClass) =>
         }
       });
 
+      [...this.$.items.children, this.$.sizer].forEach((row) => {
+        this._updateFirstAndLastColumnForRow(row);
+      });
+
+      this.__scheduleRenderHeaderFooter();
       this._debounceUpdateFrozenColumn();
-      this._updateFirstAndLastColumn();
     }
 
     /**

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -143,11 +143,6 @@ export const DynamicColumnsMixin = (superClass) =>
       });
     }
 
-    /** @protected */
-    _updateFirstAndLastColumn() {
-      Array.from(this.shadowRoot.querySelectorAll('tr')).forEach((row) => this._updateFirstAndLastColumnForRow(row));
-    }
-
     /**
      * @param {!HTMLElement} row
      * @protected

package/src/vaadin-grid-filter.js

@@ -37,6 +37,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-grid-filter
  * @extends HTMLElement
  */