@vaadin/grid 25.0.0-alpha2 → 25.0.0-alpha21

package/src/vaadin-grid-mixin.js

@@ -5,15 +5,7 @@
  */
 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';
@@ -36,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';
@@ -263,13 +256,21 @@ export const GridMixin = (superClass) =>
         scrollContainer: this.$.items,
         scrollTarget: this.$.table,
         reorderElements: true,
+        // Grid rows have a CSS-defined minimum height, so the virtualizer's height
+        // placeholder logic can be disabled. This helps save reflows which might
+        // otherwise be triggered by this logic because it reads the row height
+        // right after updating the rows' content.
+        __disableHeightPlaceholder: true,
       });
 
-      new ResizeObserver(() =>
+      new ResizeObserver(() => {
         setTimeout(() => {
           this.__updateColumnsBodyContentHidden();
-        }),
-      ).observe(this.$.table);
+        });
+        // Updating data can change the visibility of the scroll bar. Therefore,
+        // the scroll position has to be recalculated.
+        this.__updateHorizontalScrollPosition();
+      }).observe(this.$.table);
 
       const minHeightObserver = new ResizeObserver(() =>
         setTimeout(() => {
@@ -353,7 +354,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);
       }
@@ -465,9 +466,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) => {
@@ -637,6 +638,7 @@ export const GridMixin = (superClass) =>
 
       // Make sure the section has a tabbable element
       this._resetKeyboardNavigation();
+      this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
     }
 
     /** @private */
@@ -647,10 +649,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 */
@@ -691,7 +698,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);
@@ -718,7 +725,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);
@@ -726,7 +733,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);
@@ -734,7 +741,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();
@@ -749,10 +756,38 @@ export const GridMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @param {GridItem} item
-     * @protected
+     * @param {boolean} loading
+     * @private
      */
-    _updateItem(row, item) {
+    __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
+     */
+    __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);
 
@@ -813,9 +848,10 @@ export const GridMixin = (superClass) =>
       return {
         index: row.index,
         item: row._item,
-        level: this._getIndexLevel(row.index),
+        level: this.__getRowLevel(row),
         expanded: this._isExpanded(row._item),
         selected: this._isSelected(row._item),
+        hasChildren: this._hasChildren(row._item),
         detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item),
       };
     }
@@ -929,15 +965,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);
         }
       });
     }
@@ -124,7 +124,7 @@ export const RowDetailsMixin = (superClass) =>
 
     /**
      * @param {!HTMLElement} row
-     * @param {!GridItem} item
+     * @param {boolean} detailsOpened
      * @protected
      */
     _toggleDetailsCell(row, detailsOpened) {
@@ -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

@@ -4,9 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isElementHidden } from '@vaadin/a11y-base';
-import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
+import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
+import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const timeouts = {
@@ -122,10 +123,23 @@ export const ScrollMixin = (superClass) =>
         const row = composedPath[composedPath.indexOf(this.$.items) - 1];
 
         if (row) {
-          // Make sure the row with the focused element is fully inside the visible viewport
-          // Don't change scroll position if the user is interacting with the mouse
+          // Don't change scroll position if the user is interacting with the mouse.
           if (!this._isMousedown) {
-            this.__scrollIntoViewport(row.index);
+            // Make sure the focused element (row, cell, or focusable element inside a cell)
+            // is inside the viewport. If the whole row fits into the viewport, then scroll
+            // the row into view. This ensures that labels, helper texts and other related
+            // elements of focusable elements within cells also become visible. When the row
+            // is larger than the viewport, scroll the focus event target into the viewport.
+            // This works better when focusing elements within cells, which could otherwise
+            // still be outside the viewport when scrolling to the top or bottom of the row.
+            const tableHeight = this.$.table.clientHeight;
+            const headerHeight = this.$.header.clientHeight;
+            const footerHeight = this.$.footer.clientHeight;
+            const viewportHeight = tableHeight - headerHeight - footerHeight;
+            const isRowLargerThanViewport = row.clientHeight > viewportHeight;
+            const scrollTarget = isRowLargerThanViewport ? e.target : row;
+
+            this.__scrollIntoViewport(scrollTarget);
           }
 
           if (!this.$.table.contains(e.relatedTarget)) {
@@ -137,6 +151,9 @@ export const ScrollMixin = (superClass) =>
       });
 
       this.$.table.addEventListener('scroll', () => this._afterScroll());
+
+      this.__overflowController = new OverflowController(this, this.$.table);
+      this.addController(this.__overflowController);
     }
 
     /**
@@ -144,7 +161,6 @@ export const ScrollMixin = (superClass) =>
      * @override
      */
     _onResize() {
-      this._updateOverflow();
       this.__updateHorizontalScrollPosition();
 
       // For Firefox, manually restore last scroll position when grid becomes
@@ -171,25 +187,27 @@ export const ScrollMixin = (superClass) =>
     _scrollToFlatIndex(index) {
       index = Math.min(this._flatSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
-      this.__scrollIntoViewport(index);
+      const rowElement = [...this.$.items.children].find((child) => child.index === index);
+      this.__scrollIntoViewport(rowElement);
     }
 
     /**
-     * Makes sure the row with the given index (if found in the DOM) is fully
-     * inside the visible viewport, taking header/footer into account.
+     * Makes sure the given element is fully inside the visible viewport,
+     * taking header/footer into account.
      * @private
      */
-    __scrollIntoViewport(index) {
-      const rowElement = [...this.$.items.children].find((child) => child.index === index);
-      if (rowElement) {
-        const dstRect = rowElement.getBoundingClientRect();
-        const footerTop = this.$.footer.getBoundingClientRect().top;
-        const headerBottom = this.$.header.getBoundingClientRect().bottom;
-        if (dstRect.bottom > footerTop) {
-          this.$.table.scrollTop += dstRect.bottom - footerTop;
-        } else if (dstRect.top < headerBottom) {
-          this.$.table.scrollTop -= headerBottom - dstRect.top;
-        }
+    __scrollIntoViewport(element) {
+      if (!element) {
+        return;
+      }
+
+      const dstRect = element.getBoundingClientRect();
+      const footerTop = this.$.footer.getBoundingClientRect().top;
+      const headerBottom = this.$.header.getBoundingClientRect().bottom;
+      if (dstRect.bottom > footerTop) {
+        this.$.table.scrollTop += dstRect.bottom - footerTop;
+      } else if (dstRect.top < headerBottom) {
+        this.$.table.scrollTop -= headerBottom - dstRect.top;
       }
     }
 
@@ -217,8 +235,6 @@ export const ScrollMixin = (superClass) =>
         this._hideTooltip(true);
       }
 
-      this._updateOverflow();
-
       this._debounceColumnContentVisibility = Debouncer.debounce(
         this._debounceColumnContentVisibility,
         timeOut.after(timeouts.UPDATE_CONTENT_VISIBILITY),
@@ -345,58 +361,6 @@ export const ScrollMixin = (superClass) =>
       this.__updateColumnsBodyContentHidden();
     }
 
-    /** @private */
-    _updateOverflow() {
-      this._debounceOverflow = Debouncer.debounce(this._debounceOverflow, animationFrame, () => {
-        this.__doUpdateOverflow();
-      });
-    }
-
-    /** @private */
-    __doUpdateOverflow() {
-      // Set overflow styling attributes
-      let overflow = '';
-      const table = this.$.table;
-      if (table.scrollTop < table.scrollHeight - table.clientHeight) {
-        overflow += ' bottom';
-      }
-
-      if (table.scrollTop > 0) {
-        overflow += ' top';
-      }
-
-      const scrollLeft = getNormalizedScrollLeft(table, this.getAttribute('dir'));
-      if (scrollLeft > 0) {
-        overflow += ' start';
-      }
-
-      if (scrollLeft < table.scrollWidth - table.clientWidth) {
-        overflow += ' end';
-      }
-
-      if (this.__isRTL) {
-        overflow = overflow.replace(/start|end/giu, (matched) => {
-          return matched === 'start' ? 'end' : 'start';
-        });
-      }
-
-      // TODO: Remove "right" and "left" values in the next major.
-      if (table.scrollLeft < table.scrollWidth - table.clientWidth) {
-        overflow += ' right';
-      }
-
-      if (table.scrollLeft > 0) {
-        overflow += ' left';
-      }
-
-      const value = overflow.trim();
-      if (value.length > 0 && this.getAttribute('overflow') !== value) {
-        this.setAttribute('overflow', value);
-      } else if (value.length === 0 && this.hasAttribute('overflow')) {
-        this.removeAttribute('overflow');
-      }
-    }
-
     /** @protected */
     _frozenCellsChanged() {
       this._debouncerCacheElements = Debouncer.debounce(this._debouncerCacheElements, microTask, () => {
@@ -476,6 +440,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;
@@ -511,10 +476,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-selection-column-base-mixin.d.ts

@@ -28,7 +28,7 @@ export declare class GridSelectionColumnBaseMixinClass<TItem> {
   selectAll: boolean;
 
   /**
-   * When true, the active gets automatically selected.
+   * When true, the active item gets automatically selected.
    * @attr {boolean} auto-select
    */
   autoSelect: boolean;

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

@@ -63,7 +63,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * When true, the active gets automatically selected.
+         * When true, the active item gets automatically selected.
          * @attr {boolean} auto-select
          * @type {boolean}
          */

package/src/vaadin-grid-selection-column.d.ts

@@ -34,6 +34,8 @@ export * from './vaadin-grid-selection-column-mixin.js';
  * selection for all the items at once.
  *
  * __The default content can also be overridden__
+ *
+ * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
 declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {}
 

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

@@ -30,8 +30,9 @@ import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.j
  *
  * __The default content can also be overridden__
  *
- * @customElement
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
+ *
+ * @customElement
  * @extends GridColumn
  * @mixes GridSelectionColumnMixin
  */

package/src/vaadin-grid-sort-column.d.ts

@@ -21,6 +21,8 @@ export * from './vaadin-grid-sort-column-mixin.js';
  *  <vaadin-grid-column>
  *    ...
  * ```
+ *
+ * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  */
 declare class GridSortColumn<TItem = GridDefaultItem> extends HTMLElement {}
 

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.d.ts

@@ -41,9 +41,9 @@ export * from './vaadin-grid-sorter-mixin.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `direction` | Sort direction of a sorter | :host
+ * Attribute    | Description
+ * -------------|---------------------------
+ * `direction`  | Sort direction of a sorter
  *
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.

package/src/vaadin-grid-sorter.js

@@ -8,6 +8,8 @@ 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 { gridSorterStyles } from './styles/vaadin-grid-sorter-base-styles.js';
 import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
 
 /**
@@ -42,9 +44,9 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `direction` | Sort direction of a sorter | :host
+ * Attribute    | Description
+ * -------------|---------------------------
+ * `direction`  | Sort direction of a sorter
  *
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  * @fires {CustomEvent} sorter-changed - Fired when the `path` or `direction` property changes.
@@ -55,11 +57,15 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  * @mixes ThemableMixin
  * @mixes DirMixin
  */
-class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+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`

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

@@ -37,7 +37,7 @@ export const GridTreeColumnMixin = (superClass) =>
      *
      * @private
      */
-    __defaultRenderer(root, _column, { item, expanded, level }) {
+    __defaultRenderer(root, _column, { item, expanded, level, hasChildren }) {
       let toggle = root.firstElementChild;
       if (!toggle) {
         toggle = document.createElement('vaadin-grid-tree-toggle');
@@ -48,7 +48,7 @@ export const GridTreeColumnMixin = (superClass) =>
       toggle.__item = item;
       toggle.__rendererExpanded = expanded;
       toggle.expanded = expanded;
-      toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
+      toggle.leaf = !hasChildren;
       toggle.textContent = this.__getToggleContent(this.path, item);
       toggle.level = level;
     }
@@ -83,11 +83,6 @@ export const GridTreeColumnMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __isLeafItem(item, itemHasChildrenPath) {
-      return !item || !item[itemHasChildrenPath];
-    }
-
     /** @private */
     __getToggleContent(path, item) {
       return path && get(path, item);