@vaadin/grid 25.3.0-alpha6 → 25.3.0-alpha8

package/custom-elements.json

@@ -497,7 +497,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -651,7 +651,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -863,7 +863,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -1041,7 +1041,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -1200,7 +1200,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align"
             }
           ],
@@ -1291,7 +1291,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign"
             }
           ],
@@ -1494,7 +1494,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -1671,7 +1671,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -2027,7 +2027,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -2240,7 +2240,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -2954,7 +2954,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -3163,7 +3163,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -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"
@@ -5609,7 +5647,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -5863,7 +5901,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -6275,7 +6313,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -6505,7 +6543,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -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": [
@@ -7149,7 +7194,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -7358,7 +7403,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -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-alpha8",
   "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-alpha8",
+    "@vaadin/checkbox": "25.3.0-alpha8",
+    "@vaadin/component-base": "25.3.0-alpha8",
+    "@vaadin/lit-renderer": "25.3.0-alpha8",
+    "@vaadin/text-field": "25.3.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha8",
     "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-alpha8",
+    "@vaadin/chai-plugins": "25.3.0-alpha8",
+    "@vaadin/test-runner-commands": "25.3.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha8",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "92c124fb9cff367bc07e734d8e65707facd0bd43"
+  "gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
 }

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

@@ -0,0 +1,33 @@
+/**
+ * @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, { textAlign } = {}]) {
+    this.#cell = part.parentNode;
+    this.#cell._content ??= document.createElement('vaadin-grid-cell-content');
+    this.#cell._content.slot = slotName;
+    this.#cell._content.style.textAlign = textAlign ?? '';
+
+    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.d.ts

@@ -12,7 +12,7 @@ export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column
   model: GridItemModel<TItem>,
 ) => void;
 
-export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
+export type GridColumnTextAlign = 'center' | 'end' | 'left' | 'right' | 'start' | null;
 
 export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
   root: HTMLElement,
@@ -71,8 +71,8 @@ export declare class ColumnBaseMixinClass<TItem, Column extends ColumnBaseMixinC
 
   /**
    * Aligns the columns cell content horizontally.
-   * Supported values: "start", "center" and "end".
-   * @attr {start|center|end} text-align
+   *
+   * @attr {start|center|end|left|right} text-align
    */
   textAlign: GridColumnTextAlign | null | undefined;