@vaadin/grid 24.8.4 → 25.0.0-alpha10

package/src/vaadin-grid-filter.js

@@ -4,9 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { gridFilterStyles } from './styles/vaadin-grid-filter-core-styles.js';
 import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
 /**
@@ -38,14 +41,19 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  * @extends HTMLElement
  * @mixes GridFilterElementMixin
  */
-class GridFilter extends GridFilterElementMixin(ThemableMixin(PolymerElement)) {
-  static get template() {
-    return html`<slot></slot>`;
-  }
-
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-grid-filter';
   }
+
+  static get styles() {
+    return gridFilterStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
 }
 
 defineCustomElement(GridFilter);

package/src/vaadin-grid-mixin.js

@@ -5,19 +5,10 @@
  */
 import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
 import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
-import {
-  isAndroid,
-  isChrome,
-  isFirefox,
-  isIOS,
-  isSafari,
-  isTouch,
-  supportsAdoptingStyleSheets,
-} from '@vaadin/component-base/src/browser-utils.js';
+import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
-import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
@@ -37,6 +28,7 @@ import {
   iterateRowCells,
   updateBooleanRowStates,
   updateCellsPart,
+  updateState,
 } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
 import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
@@ -282,8 +274,6 @@ export const GridMixin = (superClass) =>
       minHeightObserver.observe(this.$.items);
       minHeightObserver.observe(this.$.footer);
 
-      processTemplates(this);
-
       this._tooltipController = new TooltipController(this);
       this.addController(this._tooltipController);
       this._tooltipController.setManual(true);
@@ -356,7 +346,7 @@ export const GridMixin = (superClass) =>
         row.setAttribute('role', 'row');
         row.setAttribute('tabindex', '-1');
         if (this._columnTree) {
-          this._updateRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
+          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
         }
         rows.push(row);
       }
@@ -468,9 +458,9 @@ export const GridMixin = (superClass) =>
      * @param {?string} section
      * @param {boolean} isColumnRow
      * @param {boolean} noNotify
-     * @protected
+     * @private
      */
-    _updateRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
+    __initRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
       const contentsFragment = document.createDocumentFragment();
 
       iterateRowCells(row, (cell) => {
@@ -650,10 +640,15 @@ export const GridMixin = (superClass) =>
         return;
       }
 
+      row.index = index;
+
       this._updateRowOrderParts(row, index);
 
       this._a11yUpdateRowRowindex(row, index);
-      this._getItem(index, row);
+
+      this.__ensureRowItem(row);
+      this.__ensureRowHierarchy(row);
+      this.__updateRow(row);
     }
 
     /** @private */
@@ -694,7 +689,7 @@ export const GridMixin = (superClass) =>
      */
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
-        this._updateRow(row, columnTree[columnTree.length - 1], 'body', false, true);
+        this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
 
         const model = this.__getRowModel(row);
         this._updateRowOrderParts(row);
@@ -721,7 +716,7 @@ export const GridMixin = (superClass) =>
       }
 
       iterateChildren(this.$.header, (headerRow, index, rows) => {
-        this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
+        this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
 
         const cells = getBodyRowCells(headerRow);
         updateCellsPart(cells, 'first-header-row-cell', index === 0);
@@ -729,7 +724,7 @@ export const GridMixin = (superClass) =>
       });
 
       iterateChildren(this.$.footer, (footerRow, index, rows) => {
-        this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
+        this.__initRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
 
         const cells = getBodyRowCells(footerRow);
         updateCellsPart(cells, 'first-footer-row-cell', index === 0);
@@ -737,7 +732,7 @@ export const GridMixin = (superClass) =>
       });
 
       // Sizer rows
-      this._updateRow(this.$.sizer, columnTree[columnTree.length - 1]);
+      this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
       this._resizeHandler();
       this._frozenCellsChanged();
@@ -752,10 +747,38 @@ export const GridMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @param {GridItem} item
-     * @protected
+     * @param {boolean} loading
+     * @private
+     */
+    __updateRowLoading(row, loading) {
+      const cells = getBodyRowCells(row);
+
+      // Row state attribute
+      updateState(row, 'loading', loading);
+
+      // Cells part attribute
+      updateCellsPart(cells, 'loading-row-cell', loading);
+
+      if (loading) {
+        // Run style generators for the loading row to have custom names cleared
+        this._generateCellClassNames(row);
+        this._generateCellPartNames(row);
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @private
      */
-    _updateItem(row, item) {
+    __updateRow(row) {
+      const item = this.__getRowItem(row);
+      if (item) {
+        this.__updateRowLoading(row, false);
+      } else {
+        this.__updateRowLoading(row, true);
+        return;
+      }
+
       row._item = item;
       const model = this.__getRowModel(row);
 
@@ -932,15 +955,11 @@ export const GridMixin = (superClass) =>
 
       // The style is set to host instead of the scroller so that the value can be overridden by the user with "grid { min-height: 0 }"
       // Prefer setting style in adopted style sheet to avoid the need to add a confusing inline style on the host element
-      // If adopted style sheets are not supported, the style is set inline
-      if (!this.__minHeightStyleSheet && supportsAdoptingStyleSheets) {
+      if (!this.__minHeightStyleSheet) {
         this.__minHeightStyleSheet = new CSSStyleSheet();
-        this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, this.__minHeightStyleSheet];
-      }
-      if (this.__minHeightStyleSheet) {
-        this.__minHeightStyleSheet.replaceSync(`:host { --_grid-min-height: ${minHeight}px; }`);
-      } else {
-        this.style.setProperty('--_grid-min-height', `${minHeight}px`);
+        this.shadowRoot.adoptedStyleSheets.push(this.__minHeightStyleSheet);
       }
+
+      this.__minHeightStyleSheet.replaceSync(`:host { --_grid-min-height: ${minHeight}px; }`);
     }
   };

package/src/vaadin-grid-row-details-mixin.js

@@ -85,7 +85,7 @@ export const RowDetailsMixin = (superClass) =>
         // Only update the rows if the column tree has already been initialized
         iterateChildren(this.$.items, (row) => {
           if (!row.querySelector('[part~=details-cell]')) {
-            this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
+            this.__initRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
             this._toggleDetailsCell(row, isDetailsOpened);
           }
@@ -98,13 +98,13 @@ export const RowDetailsMixin = (superClass) =>
       iterateChildren(this.$.items, (row) => {
         // Re-renders the row to possibly close the previously opened details.
         if (row.hasAttribute('details-opened')) {
-          this._updateItem(row, row._item);
+          this.__updateRow(row);
           return;
         }
 
         // Re-renders the row to open the details when a row details renderer is provided.
         if (rowDetailsRenderer && this._isDetailsOpened(row._item)) {
-          this._updateItem(row, row._item);
+          this.__updateRow(row);
         }
       });
     }
@@ -140,7 +140,7 @@ export const RowDetailsMixin = (superClass) =>
       }
 
       // Assigns a renderer when the details cell is opened.
-      // The details cell content is rendered later in the `_updateItem` method.
+      // The details cell content is rendered later in the `__updateRow` method.
       if (this.rowDetailsRenderer) {
         cell._renderer = this.rowDetailsRenderer;
       }

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

@@ -491,6 +491,7 @@ export const ScrollMixin = (superClass) =>
 
       // Position frozen cells
       const x = this.__isRTL ? normalizedScrollLeft + clientWidth - scrollWidth : scrollLeft;
+      this.__horizontalScrollPosition = x;
       const transformFrozen = `translate(${x}px, 0)`;
       this._frozenCells.forEach((cell) => {
         cell.style.transform = transformFrozen;
@@ -526,10 +527,25 @@ export const ScrollMixin = (superClass) =>
         }
       });
 
-      // Only update the --_grid-horizontal-scroll-position custom property when navigating
-      // on row focus mode to avoid performance issues.
-      if (this.hasAttribute('navigating') && this.__rowFocusMode) {
-        this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
+      const focusedRow = this.shadowRoot.querySelector("[part~='row']:focus");
+      if (focusedRow) {
+        // Update the horizontal scroll position property of the focused row
+        this.__updateRowScrollPositionProperty(focusedRow);
+      }
+    }
+
+    /**
+     * Synchronizes the internal `--_grid-horizontal-scroll-position` CSS property
+     * of the given row with the current horizontal scroll position of the grid.
+     * @private
+     */
+    __updateRowScrollPositionProperty(row) {
+      if (row instanceof HTMLTableRowElement === false) {
+        return;
+      }
+      const newValue = `${this.__horizontalScrollPosition}px`;
+      if (row.style.getPropertyValue('--_grid-horizontal-scroll-position') !== newValue) {
+        row.style.setProperty('--_grid-horizontal-scroll-position', newValue);
       }
     }
 

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

@@ -3,66 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    @font-face {
-      font-family: 'vaadin-grid-sorter-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAA0AAAAABuwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEFAAAABkAAAAcfep+mUdERUYAAAP4AAAAHAAAAB4AJwAOT1MvMgAAAZgAAAA/AAAAYA8TBPpjbWFwAAAB7AAAAFUAAAFeF1fZ4mdhc3AAAAPwAAAACAAAAAgAAAAQZ2x5ZgAAAlgAAABcAAAAnMvguMloZWFkAAABMAAAAC8AAAA2C5Ap72hoZWEAAAFgAAAAHQAAACQGbQPHaG10eAAAAdgAAAAUAAAAHAoAAABsb2NhAAACRAAAABIAAAASAIwAYG1heHAAAAGAAAAAFgAAACAACwAKbmFtZQAAArQAAAECAAACZxWCgKhwb3N0AAADuAAAADUAAABZCrApUXicY2BkYGAA4rDECVrx/DZfGbhZGEDgyqNPOxH0/wNMq5kPALkcDEwgUQBWRA0dAHicY2BkYGA+8P8AAwMLAwgwrWZgZEAFbABY4QM8AAAAeJxjYGRgYOAAQiYGEICQSAAAAi8AFgAAeJxjYGY6yziBgZWBgWkm0xkGBoZ+CM34msGYkZMBFTAKoAkwODAwvmRiPvD/AIMDMxCD1CDJKjAwAgBktQsXAHicY2GAAMZQCM0EwqshbAALxAEKeJxjYGBgZoBgGQZGBhCIAPIYwXwWBhsgzcXAwcAEhIwMCi+Z/v/9/x+sSuElA4T9/4k4K1gHFwMMMILMY2QDYmaoABOQYGJABUA7WBiGNwAAJd4NIQAAAAAAAAAACAAIABAAGAAmAEAATgAAeJyNjLENgDAMBP9tIURJwQCMQccSZgk2i5fIYBDAidJjycXr7x5EPwE2wY8si7jmyBNXGo/bNBerxJNrpxhbO3/fEFpx8ZICpV+ghxJ74fAMe+h7Ox14AbrsHB14nK2QQWrDMBRER4mTkhQK3ZRQKOgCNk7oGQqhhEIX2WSlWEI1BAlkJ5CDdNsj5Ey9Rncdi38ES+jzNJo/HwTgATcoDEthhY3wBHc4CE+pfwsX5F/hGe7Vo/AcK/UhvMSz+mGXKhZU6pww8ISz3oWn1BvhgnwTnuEJf8Jz1OpFeIlX9YULDLdFi4ASHolkSR0iuYdjLak1vAequBhj21D61Nqyi6l3qWybGPjySbPHGScGJl6dP58MYcQRI0bts7mjebBqrFENH7t3qWtj0OuqHnXcW7b0HOTZFnKryRGW2hFX1m0O2vEM3opNMfTau+CS6Z3Vx6veNnEXY6jwDxhsc2gAAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSrpYEBlIbxjQDrzgsuAAAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKyoz1cD0o087YTQATOcIewAAAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);
-
-registerStyles(
-  'vaadin-grid-sorter',
-  css`
-    :host {
-      display: inline-flex;
-      cursor: pointer;
-      max-width: 100%;
-    }
-
-    [part='content'] {
-      flex: 1 1 auto;
-    }
-
-    [part='indicators'] {
-      position: relative;
-      align-self: center;
-      flex: none;
-    }
-
-    [part='order'] {
-      display: inline;
-      vertical-align: super;
-    }
-
-    [part='indicators']::before {
-      font-family: 'vaadin-grid-sorter-icons';
-      display: inline-block;
-    }
-
-    :host(:not([direction])) [part='indicators']::before {
-      content: '\\e901';
-    }
-
-    :host([direction='asc']) [part='indicators']::before {
-      content: '\\e900';
-    }
-
-    :host([direction='desc']) [part='indicators']::before {
-      content: '\\e902';
-    }
-  `,
-  { moduleId: 'vaadin-grid-sorter-styles' },
-);
 
 /**
  * A mixin providing common sorter functionality.

package/src/vaadin-grid-sorter.js

@@ -3,10 +3,13 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { gridSorterStyles } from './styles/vaadin-grid-sorter-core-styles.js';
 import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
 
 /**
@@ -54,21 +57,26 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  * @mixes ThemableMixin
  * @mixes DirMixin
  */
-class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolymerElement))) {
-  static get template() {
+class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-grid-sorter';
+  }
+
+  static get styles() {
+    return gridSorterStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div part="content">
         <slot></slot>
       </div>
       <div part="indicators">
-        <span part="order">[[_getDisplayOrder(_order)]]</span>
+        <span part="order">${this._getDisplayOrder(this._order)}</span>
       </div>
     `;
   }
-
-  static get is() {
-    return 'vaadin-grid-sorter';
-  }
 }
 
 defineCustomElement(GridSorter);

package/src/vaadin-grid-tree-toggle-mixin.js

@@ -3,85 +3,8 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { isFocusable } from './vaadin-grid-active-item-mixin.js';
 
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    @font-face {
-      font-family: "vaadin-grid-tree-icons";
-      src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAA0AAAAABrwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAECAAAABoAAAAcgHwa6EdERUYAAAPsAAAAHAAAAB4AJwAOT1MvMgAAAZQAAAA/AAAAYA8TBIJjbWFwAAAB8AAAAFUAAAFeGJvXWmdhc3AAAAPkAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAABLAAAAhIrPOhFoZWFkAAABMAAAACsAAAA2DsJI02hoZWEAAAFcAAAAHQAAACQHAgPHaG10eAAAAdQAAAAZAAAAHAxVAgBsb2NhAAACSAAAABIAAAASAIAAVG1heHAAAAF8AAAAGAAAACAACgAFbmFtZQAAAqgAAAECAAACTwflzbdwb3N0AAADrAAAADYAAABZQ7Ajh3icY2BkYGAA4twv3Vfi+W2+MnCzMIDANSOmbGSa2YEZRHEwMIEoAAoiB6sAeJxjYGRgYD7w/wADAwsDCDA7MDAyoAI2AFEEAtIAAAB4nGNgZGBg4GBgZgDRDAxMDGgAAAGbABB4nGNgZp7JOIGBlYGBaSbTGQYGhn4IzfiawZiRkwEVMAqgCTA4MDA+38d84P8BBgdmIAapQZJVYGAEAGc/C54AeJxjYYAAxlAIzQTELAwMBxgZGB0ACy0BYwAAAHicY2BgYGaAYBkGRgYQiADyGMF8FgYbIM3FwMHABISMDArP9/3/+/8/WJXC8z0Q9v8nEp5gHVwMMMAIMo+RDYiZoQJMQIKJARUA7WBhGN4AACFKDtoAAAAAAAAAAAgACAAQABgAJgA0AEIAAHichYvBEYBADAKBVHBjBT4swl9KS2k05o0XHd/yW1hAfBFwCv9sIlJu3nZaNS3PXAaXXHI8Lge7DlzF7C1RgXc7xkK6+gvcD2URmQB4nK2RQWoCMRiFX3RUqtCli65yADModOMBLLgQSqHddRFnQghIAnEUvEA3vUUP0LP0Fj1G+yb8R5iEhO9/ef/7FwFwj28o9EthiVp4hBlehcfUP4Ur8o/wBAv8CU+xVFvhOR7UB7tUdUdlVRJ6HnHWTnhM/V24In8JT5j/KzzFSi2E53hUz7jCcrcIiDDwyKSW1JEct2HdIPH1DFytbUM0PofWdNk5E5oUqb/Q6HHBiVGZpfOXkyUMEj5IyBuNmYZQjBobfsuassvnkKLe1OuBBj0VQ8cRni2xjLWsHaM0jrjx3peYA0/vrdmUYqe9iy7bzrX6eNP7Jh1SijX+AaUVbB8AAHicY2BiwA84GBgYmRiYGJkZmBlZGFkZ2djScyoLMgzZS/MyDQwMwLSruZMzlHaB0q4A76kLlwAAAAEAAf//AA94nGNgZGBg4AFiMSBmYmAEQnYgZgHzGAAD6wA2eJxjYGBgZACCKxJigiD6mhFTNowGACmcA/8AAA==) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);
-
-registerStyles(
-  'vaadin-grid-tree-toggle',
-  css`
-    :host {
-      display: inline-flex;
-      align-items: baseline;
-      max-width: 100%;
-
-      /* CSS API for :host */
-      --vaadin-grid-tree-toggle-level-offset: 1em;
-      --_collapsed-icon: '\\e7be\\00a0';
-    }
-
-    :host([dir='rtl']) {
-      --_collapsed-icon: '\\e7bd\\00a0';
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    :host(:not([leaf])) {
-      cursor: pointer;
-    }
-
-    #level-spacer,
-    [part='toggle'] {
-      flex: none;
-    }
-
-    #level-spacer {
-      display: inline-block;
-      width: calc(var(--_level, '0') * var(--vaadin-grid-tree-toggle-level-offset));
-    }
-
-    [part='toggle']::before {
-      font-family: 'vaadin-grid-tree-icons';
-      line-height: 1em; /* make icon font metrics not affect baseline */
-    }
-
-    :host(:not([expanded])) [part='toggle']::before {
-      content: var(--_collapsed-icon);
-    }
-
-    :host([expanded]) [part='toggle']::before {
-      content: '\\e7bc\\00a0'; /* icon glyph + single non-breaking space */
-    }
-
-    :host([leaf]) [part='toggle'] {
-      visibility: hidden;
-    }
-
-    slot {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `,
-  { moduleId: 'vaadin-grid-tree-toggle-styles' },
-);
-
 /**
  * @polymerMixin
  */

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

@@ -3,10 +3,13 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { gridTreeToggleStyles } from './styles/vaadin-grid-tree-toggle-core-styles.js';
 import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
 
 /**
@@ -63,12 +66,19 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
  * @mixes DirMixin
  * @mixes GridTreeToggleMixin
  */
-class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(PolymerElement))) {
+class GridTreeToggle extends GridTreeToggleMixin(
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-grid-tree-toggle';
   }
 
-  static get template() {
+  static get styles() {
+    return gridTreeToggleStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <span id="level-spacer"></span>
       <span part="toggle"></span>

package/src/vaadin-grid.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
@@ -277,7 +276,6 @@ interface Grid<TItem = GridDefaultItem>
     ElementMixinClass,
     ThemableMixinClass,
     ThemePropertyMixinClass,
-    ControllerMixinClass,
     GridMixinClass<TItem> {}
 
 declare global {

package/src/vaadin-grid.js

@@ -4,15 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { gridStyles } from './styles/vaadin-grid-core-styles.js';
 import { GridMixin } from './vaadin-grid-mixin.js';
-import { gridStyles } from './vaadin-grid-styles.js';
-
-registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
 
 /**
  * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
@@ -261,20 +261,34 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
  * @extends HTMLElement
  * @mixes GridMixin
  * @mixes ThemableMixin
- * @mixes ControllerMixin
  */
-class Grid extends GridMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get template() {
+class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-grid';
+  }
+
+  static get styles() {
+    return gridStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div
         id="scroller"
-        safari$="[[_safari]]"
-        ios$="[[_ios]]"
-        loading$="[[loading]]"
-        column-reordering-allowed$="[[columnReorderingAllowed]]"
-        empty-state$="[[__emptyState]]"
+        ?safari="${this._safari}"
+        ?ios="${this._ios}"
+        ?loading="${this.loading}"
+        ?column-reordering-allowed="${this.columnReorderingAllowed}"
+        ?empty-state="${this.__emptyState}"
       >
-        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0" aria-label$="[[accessibleName]]">
+        <table
+          id="table"
+          role="treegrid"
+          aria-multiselectable="true"
+          tabindex="0"
+          aria-label="${ifDefined(this.accessibleName)}"
+        >
           <caption id="sizer" part="row"></caption>
           <thead id="header" role="rowgroup"></thead>
           <tbody id="items" role="rowgroup"></tbody>
@@ -296,10 +310,6 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerE
       <div id="focusexit" tabindex="0"></div>
     `;
   }
-
-  static get is() {
-    return 'vaadin-grid';
-  }
 }
 
 defineCustomElement(Grid);

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

@@ -86,7 +86,7 @@ registerStyles(
     }
 
     :host([navigating]) [part~='row']:focus::before {
-      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
+      transform: translateX(var(--_grid-horizontal-scroll-position));
       z-index: 3;
     }