@vaadin/grid 25.0.0-alpha3 → 25.0.0-alpha5

package/src/styles/vaadin-grid-sorter-base-styles.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const gridSorterStyles = css`
+  @layer base {
+    :host {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      max-width: 100%;
+      gap: var(--_vaadin-gap-container-inline);
+      -webkit-user-select: none;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    [part='content'] {
+      flex: 1 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [part='indicators'] {
+      position: relative;
+      flex: none;
+    }
+
+    [part='order'] {
+      display: inline;
+      vertical-align: super;
+      font-size: 0.75em;
+      line-height: 1;
+    }
+
+    [part='indicators']::before {
+      content: '';
+      display: inline-block;
+      height: 12px;
+      width: 8px;
+      mask-image: var(--_vaadin-icon-sort);
+      background: currentColor;
+    }
+
+    :host([direction]) [part='indicators']::before {
+      padding-bottom: 6px;
+      height: 6px;
+      mask-clip: content-box;
+    }
+
+    :host([direction='desc']) [part='indicators']::before {
+      padding-block: 6px 0;
+    }
+
+    @media (forced-colors: active) {
+      [part='indicators']::before {
+        background: CanvasText;
+      }
+    }
+  }
+`;

package/src/styles/vaadin-grid-sorter-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const gridSorterStyles: CSSResult;

package/src/styles/vaadin-grid-sorter-core-styles.js

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+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);
+
+export const gridSorterStyles = 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';
+  }
+`;

package/src/styles/vaadin-grid-tree-toggle-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const gridTreeToggleStyles: CSSResult;

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const gridTreeToggleStyles = css`
+  @layer base {
+    :host {
+      display: flex;
+      max-width: 100%;
+      pointer-events: none;
+    }
+
+    /* Don't expand/collapse when clicking #level-spacer */
+    [part] {
+      pointer-events: auto;
+    }
+
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host(:not([leaf])) {
+      cursor: var(--vaadin-clickable-cursor);
+    }
+
+    #level-spacer,
+    [part='toggle'] {
+      flex: none;
+    }
+
+    #level-spacer {
+      width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 1em));
+    }
+
+    [part='toggle'] {
+      margin-inline-end: var(--_vaadin-gap-container-inline);
+    }
+
+    [part='toggle']::before {
+      content: '';
+      display: block;
+      width: var(--vaadin-icon-size, 1lh);
+      height: var(--vaadin-icon-size, 1lh);
+      background: currentColor;
+      mask-image: var(--_vaadin-icon-chevron-down);
+    }
+
+    :host(:not([expanded])) [part='toggle']::before {
+      rotate: -90deg;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      [part='toggle']::before {
+        transition: rotate 120ms;
+      }
+    }
+
+    :host([leaf]) [part='toggle'] {
+      visibility: hidden;
+    }
+
+    slot {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    @media (forced-colors: active) {
+      [part='toggle']::before {
+        background: CanvasText;
+      }
+    }
+  }
+`;

package/src/styles/vaadin-grid-tree-toggle-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const gridTreeToggleStyles: CSSResult;

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+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);
+
+export const gridTreeToggleStyles = 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;
+  }
+`;

package/src/vaadin-grid-data-provider-mixin.js

@@ -166,24 +166,6 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.addEventListener('page-loaded', this._onDataProviderPageLoaded.bind(this));
     }
 
-    /**
-     * @protected
-     * @deprecated since 24.3 and will be removed in Vaadin 25.
-     */
-    get _cache() {
-      console.warn('<vaadin-grid> The `_cache` property is deprecated and will be removed in Vaadin 25.');
-      return this._dataProviderController.rootCache;
-    }
-
-    /**
-     * @protected
-     * @deprecated since 24.3 and will be removed in Vaadin 25.
-     */
-    get _effectiveSize() {
-      console.warn('<vaadin-grid> The `_effectiveSize` property is deprecated and will be removed in Vaadin 25.');
-      return this._flatSize;
-    }
-
     /** @private */
     _sizeChanged(size) {
       this._dataProviderController.rootCache.size = size;
@@ -309,17 +291,6 @@ export const DataProviderMixin = (superClass) =>
       return level;
     }
 
-    /**
-     * @param {number} page
-     * @param {ItemCache} cache
-     * @protected
-     * @deprecated since 24.3 and will be removed in Vaadin 25.
-     */
-    _loadPage(page, cache) {
-      console.warn('<vaadin-grid> The `_loadPage` method is deprecated and will be removed in Vaadin 25.');
-      this._dataProviderController.__loadCachePage(cache, page);
-    }
-
     /** @protected */
     _onDataProviderPageRequested() {
       this._setLoading(true);

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -247,6 +247,9 @@ export const DragAndDropMixin = (superClass) =>
 
         let row = e.composedPath().find((node) => node.localName === 'tr');
 
+        // Update the horizontal scroll position property of the row being dragged over
+        this.__updateRowScrollPositionProperty(row);
+
         if (!this._flatSize || this.dropMode === DropMode.ON_GRID) {
           // The grid is empty or "on-grid" drop mode was used, always default to "empty"
           this._dropLocation = DropLocation.EMPTY;

package/src/vaadin-grid-filter-element-mixin.js

@@ -6,23 +6,6 @@
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
-
-registerStyles(
-  'vaadin-grid-filter',
-  css`
-    :host {
-      display: inline-flex;
-      max-width: 100%;
-    }
-
-    ::slotted(*) {
-      width: 100%;
-      box-sizing: border-box;
-    }
-  `,
-  { moduleId: 'vaadin-grid-filter-styles' },
-);
 
 /**
  * @polymerMixin

package/src/vaadin-grid-filter.js

@@ -8,6 +8,7 @@ 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 { gridFilterStyles } from './styles/vaadin-grid-filter-core-styles.js';
 import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
 /**
@@ -44,6 +45,10 @@ class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LitEl
     return 'vaadin-grid-filter';
   }
 
+  static get styles() {
+    return gridFilterStyles;
+  }
+
   /** @protected */
   render() {
     return html`<slot></slot>`;

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -280,7 +280,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       if (!targetRowInDom) {
         this._scrollToFlatIndex(index);
       } else {
-        this.__scrollIntoViewport(index);
+        this.__scrollIntoViewport(targetRowInDom);
       }
     }
 

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';
@@ -929,15 +921,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-scroll-mixin.js

@@ -122,10 +122,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)) {
@@ -171,25 +184,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;
       }
     }
 
@@ -476,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;
@@ -511,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

@@ -8,6 +8,7 @@ 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 { gridSorterStyles } from './styles/vaadin-grid-sorter-core-styles.js';
 import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
 
 /**
@@ -60,6 +61,10 @@ class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(Lit
     return 'vaadin-grid-sorter';
   }
 
+  static get styles() {
+    return gridSorterStyles;
+  }
+
   /** @protected */
   render() {
     return html`