@vaadin/grid 25.3.0-alpha7 → 25.3.0-alpha9

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",
@@ -1723,33 +1723,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/vaadin-grid-column-rendering-mixin.js",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "A mixin providing rendering of rows based on the column tree.",
-          "name": "ColumnRenderingMixin",
-          "members": [],
-          "parameters": [
-            {
-              "name": "superClass"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ColumnRenderingMixin",
-          "declaration": {
-            "name": "ColumnRenderingMixin",
-            "module": "src/vaadin-grid-column-rendering-mixin.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-grid-column-reordering-mixin.js",
@@ -2054,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",
@@ -2267,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",
@@ -2981,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",
@@ -3190,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",
@@ -3377,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",
@@ -3414,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": {
@@ -3426,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": [
@@ -3440,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",
@@ -4767,8 +4774,8 @@
               "module": "src/vaadin-grid-dynamic-columns-mixin.js"
             },
             {
-              "name": "ColumnRenderingMixin",
-              "module": "src/vaadin-grid-column-rendering-mixin.js"
+              "name": "HeaderFooterRenderingMixin",
+              "module": "src/vaadin-grid-header-footer-rendering-mixin.js"
             },
             {
               "name": "ActiveItemMixin",
@@ -5640,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",
@@ -5894,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",
@@ -6306,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",
@@ -6536,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",
@@ -6799,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",
@@ -6826,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": [
@@ -7180,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",
@@ -7389,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",
@@ -7568,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",
@@ -7632,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": [
@@ -8400,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",
@@ -8708,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-alpha7",
+  "version": "25.3.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -45,20 +45,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha7",
-    "@vaadin/checkbox": "25.3.0-alpha7",
-    "@vaadin/component-base": "25.3.0-alpha7",
-    "@vaadin/lit-renderer": "25.3.0-alpha7",
-    "@vaadin/text-field": "25.3.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha7",
+    "@vaadin/a11y-base": "25.3.0-alpha9",
+    "@vaadin/checkbox": "25.3.0-alpha9",
+    "@vaadin/component-base": "25.3.0-alpha9",
+    "@vaadin/lit-renderer": "25.3.0-alpha9",
+    "@vaadin/text-field": "25.3.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha7",
-    "@vaadin/chai-plugins": "25.3.0-alpha7",
-    "@vaadin/test-runner-commands": "25.3.0-alpha7",
+    "@vaadin/aura": "25.3.0-alpha9",
+    "@vaadin/chai-plugins": "25.3.0-alpha9",
+    "@vaadin/test-runner-commands": "25.3.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ae7b9823df5598faebd7a482993029ee489c35ae"
+  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
 }

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

@@ -12,10 +12,11 @@ import { AsyncDirective, directive } from 'lit/async-directive.js';
 class CellContentDirective extends AsyncDirective {
   #cell;
 
-  update(part, [grid, slotName]) {
+  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);

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { findTreeToggleCell, getClosestCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 
 export const A11yMixin = (superClass) =>
@@ -110,19 +111,13 @@ export const A11yMixin = (superClass) =>
       const toggleCell = findTreeToggleCell(row);
       if (this.__isRowExpandable(row)) {
         row.setAttribute('aria-expanded', 'false');
-        if (toggleCell) {
-          toggleCell.setAttribute('aria-expanded', 'false');
-        }
+        toggleCell?.setAttribute('aria-expanded', 'false');
       } else if (this.__isRowCollapsible(row)) {
         row.setAttribute('aria-expanded', 'true');
-        if (toggleCell) {
-          toggleCell.setAttribute('aria-expanded', 'true');
-        }
+        toggleCell?.setAttribute('aria-expanded', 'true');
       } else {
         row.removeAttribute('aria-expanded');
-        if (toggleCell) {
-          toggleCell.removeAttribute('aria-expanded');
-        }
+        toggleCell?.removeAttribute('aria-expanded');
       }
     }
 
@@ -133,11 +128,8 @@ export const A11yMixin = (superClass) =>
      */
     __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);
-      } else {
-        row.removeAttribute('aria-level');
-      }
+      const hasLevel = level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row);
+      setOrRemoveAttribute(row, 'aria-level', hasLevel && level + 1);
     }
 
     /**
@@ -153,15 +145,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) => {