@vaadin/component-base 25.0.0-alpha9 → 25.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -23,8 +23,7 @@
     "custom_typings",
     "index.d.ts",
     "index.js",
-    "src",
-    "!src/style-props.js"
+    "src"
   ],
   "keywords": [
     "Vaadin",
@@ -34,14 +33,15 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@vaadin/vaadin-development-mode-detector": "^2.0.0",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
     "@vaadin/vaadin-usage-statistics": "^2.1.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta2",
+    "@vaadin/test-runner-commands": "25.0.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
 }

package/src/data-provider-controller/cache.js

@@ -48,7 +48,7 @@ export class Cache {
    * @type {Record<number, Cache>}
    * @private
    */
-  __subCacheByIndex = {};
+  #subCacheByIndex = {};
 
   /**
    * The number of items.
@@ -56,7 +56,7 @@ export class Cache {
    * @type {number}
    * @private
    */
-  __size = 0;
+  #size = 0;
 
   /**
    * The total number of items, including items from expanded sub-caches.
@@ -64,7 +64,7 @@ export class Cache {
    * @type {number}
    * @private
    */
-  __flatSize = 0;
+  #flatSize = 0;
 
   /**
    * @param {Cache['context']} context
@@ -79,7 +79,7 @@ export class Cache {
     this.size = size;
     this.parentCache = parentCache;
     this.parentCacheIndex = parentCacheIndex;
-    this.__flatSize = size || 0;
+    this.#flatSize = size || 0;
   }
 
   /**
@@ -98,7 +98,7 @@ export class Cache {
    * @return {Cache[]}
    */
   get subCaches() {
-    return Object.values(this.__subCacheByIndex);
+    return Object.values(this.#subCacheByIndex);
   }
 
   /**
@@ -120,7 +120,7 @@ export class Cache {
    * @return {number}
    */
   get flatSize() {
-    return this.__flatSize;
+    return this.#flatSize;
   }
 
   /**
@@ -129,7 +129,7 @@ export class Cache {
    * @return {number}
    */
   get size() {
-    return this.__size;
+    return this.#size;
   }
 
   /**
@@ -138,12 +138,12 @@ export class Cache {
    * @param {number} size
    */
   set size(size) {
-    const oldSize = this.__size;
+    const oldSize = this.#size;
     if (oldSize === size) {
       return;
     }
 
-    this.__size = size;
+    this.#size = size;
 
     if (this.context.placeholder !== undefined) {
       this.items.length = size || 0;
@@ -152,6 +152,10 @@ export class Cache {
       }
     }
 
+    if (this.items.length > size) {
+      this.items.length = size || 0;
+    }
+
     Object.keys(this.pendingRequests).forEach((page) => {
       const startIndex = parseInt(page) * this.pageSize;
       if (startIndex >= this.size || 0) {
@@ -164,7 +168,7 @@ export class Cache {
    * Recalculates the flattened size for the cache and its descendant caches recursively.
    */
   recalculateFlatSize() {
-    this.__flatSize =
+    this.#flatSize =
       !this.parentItem || this.context.isExpanded(this.parentItem)
         ? this.size +
           this.subCaches.reduce((total, subCache) => {
@@ -199,7 +203,7 @@ export class Cache {
    * @return {Cache | undefined}
    */
   getSubCache(index) {
-    return this.__subCacheByIndex[index];
+    return this.#subCacheByIndex[index];
   }
 
   /**
@@ -209,14 +213,14 @@ export class Cache {
    * @param {number} index
    */
   removeSubCache(index) {
-    delete this.__subCacheByIndex[index];
+    delete this.#subCacheByIndex[index];
   }
 
   /**
    * Removes all sub-caches.
    */
   removeSubCaches() {
-    this.__subCacheByIndex = {};
+    this.#subCacheByIndex = {};
   }
 
   /**
@@ -228,7 +232,7 @@ export class Cache {
    */
   createSubCache(index) {
     const subCache = new Cache(this.context, this.pageSize, 0, this, index);
-    this.__subCacheByIndex[index] = subCache;
+    this.#subCacheByIndex[index] = subCache;
     return subCache;
   }
 

package/src/data-provider-controller/data-provider-controller.js

@@ -85,7 +85,7 @@ export class DataProviderController extends EventTarget {
     this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
-    this.rootCache = this.__createRootCache(size);
+    this.rootCache = this.#createRootCache(size);
   }
 
   /**
@@ -96,7 +96,7 @@ export class DataProviderController extends EventTarget {
   }
 
   /** @private */
-  get __cacheContext() {
+  get #cacheContext() {
     return {
       isExpanded: this.isExpanded,
       placeholder: this.placeholder,
@@ -143,7 +143,7 @@ export class DataProviderController extends EventTarget {
    * Clears the cache.
    */
   clearCache() {
-    this.rootCache = this.__createRootCache(this.rootCache.size);
+    this.rootCache = this.#createRootCache(this.rootCache.size);
   }
 
   /**
@@ -198,8 +198,8 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexLoaded(flatIndex) {
     const { cache, page, item } = this.getFlatIndexContext(flatIndex);
 
-    if (!this.__isItemLoaded(item)) {
-      this.__loadCachePage(cache, page);
+    if (!this.#isItemLoaded(item)) {
+      this.#loadCachePage(cache, page);
     }
   }
 
@@ -213,9 +213,9 @@ export class DataProviderController extends EventTarget {
   ensureFlatIndexHierarchy(flatIndex) {
     const { cache, item, index } = this.getFlatIndexContext(flatIndex);
 
-    if (this.__isItemLoaded(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
+    if (this.#isItemLoaded(item) && this.isExpanded(item) && !cache.getSubCache(index)) {
       const subCache = cache.createSubCache(index);
-      this.__loadCachePage(subCache, 0);
+      this.#loadCachePage(subCache, 0);
     }
   }
 
@@ -223,17 +223,28 @@ export class DataProviderController extends EventTarget {
    * Loads the first page into the root cache.
    */
   loadFirstPage() {
-    this.__loadCachePage(this.rootCache, 0);
+    this.#loadCachePage(this.rootCache, 0);
+  }
+
+  /**
+   * Override to prevent loading of the cache page under certain conditions.
+   *
+   * @param {Cache} cache
+   * @param {number} page
+   * @protected
+   */
+  _shouldLoadCachePage(_cache, _page) {
+    return true;
   }
 
   /** @private */
-  __createRootCache(size) {
-    return new Cache(this.__cacheContext, this.pageSize, size);
+  #createRootCache(size) {
+    return new Cache(this.#cacheContext, this.pageSize, size);
   }
 
   /** @private */
-  __loadCachePage(cache, page) {
-    if (!this.dataProvider || cache.pendingRequests[page]) {
+  #loadCachePage(cache, page) {
+    if (!this.dataProvider || cache.pendingRequests[page] || !this._shouldLoadCachePage(cache, page)) {
       return;
     }
 
@@ -277,7 +288,7 @@ export class DataProviderController extends EventTarget {
   }
 
   /** @private */
-  __isItemLoaded(item) {
+  #isItemLoaded(item) {
     if (this.isPlaceholder) {
       return !this.isPlaceholder(item);
     } else if (this.placeholder) {

package/src/data-provider-controller/helpers.js

@@ -18,6 +18,7 @@
  *
  * @param {Cache} cache
  * @param {number} flatIndex
+ * @param {number} level
  */
 export function getFlatIndexContext(cache, flatIndex, level = 0) {
   let levelIndex = flatIndex;
@@ -53,7 +54,6 @@ export function getFlatIndexContext(cache, flatIndex, level = 0) {
  *
  * If the item isn't found, the method returns undefined.
  *
- * @param {Cache} cache
  * @param {{ getItemId: (item: unknown) => unknown}} context
  * @param {Cache} cache
  * @param {unknown} targetItem

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.0.0-alpha9') {
+export function defineCustomElement(CustomElement, version = '25.0.0-beta2') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/element-mixin.js

@@ -48,9 +48,10 @@ export const ElementMixin = (superClass) =>
         window.Vaadin.registrations.push(this);
         registered.add(is);
 
-        if (window.Vaadin.developmentModeCallback) {
+        const callback = window.Vaadin.developmentModeCallback;
+        if (callback) {
           statsJob = Debouncer.debounce(statsJob, idlePeriod, () => {
-            window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
+            callback['vaadin-usage-statistics']();
           });
           enqueueDebouncer(statsJob);
         }

package/src/polylit-mixin.js

@@ -215,26 +215,10 @@ const PolylitMixinImplementation = (superclass) => {
       };
     }
 
-    constructor() {
-      super();
-      this.__hasPolylitMixin = true;
-    }
-
     /** @protected */
     connectedCallback() {
       super.connectedCallback();
 
-      // Components like `vaadin-overlay` are teleported to the body element when opened.
-      // If their opened state is set as an attribute, the teleportation happens immediately
-      // after they are connected to the DOM. This means they will be outside the scope of
-      // querySelectorAll in the parent component's `firstUpdated()`. To ensure their reference
-      // is still registered in the $ map, we propagate the reference here.
-      const parentHost = this.getRootNode().host;
-      if (parentHost && parentHost.__hasPolylitMixin && this.id) {
-        parentHost.$ ||= {};
-        parentHost.$[this.id] = this;
-      }
-
       const { polylitConfig } = this.constructor;
       if (!this.hasUpdated && !polylitConfig.asyncFirstRender) {
         this.performUpdate();
@@ -249,10 +233,8 @@ const PolylitMixinImplementation = (superclass) => {
         this.$ = {};
       }
 
-      [...Object.values(this.$), this.renderRoot].forEach((node) => {
-        node.querySelectorAll('[id]').forEach((node) => {
-          this.$[node.id] = node;
-        });
+      this.renderRoot.querySelectorAll('[id]').forEach((node) => {
+        this.$[node.id] = node;
       });
     }
 

package/src/slot-controller.js

@@ -15,7 +15,7 @@ export class SlotController extends EventTarget {
    * Ensure that every instance has unique ID.
    *
    * @param {HTMLElement} host
-   * @param {string} slotName
+   * @param {string} prefix
    * @return {string}
    * @protected
    */

package/src/{loader-styles.js → styles/loader-styles.js}

@@ -24,7 +24,7 @@ export const loaderStyles = css`
       spin var(--vaadin-spinner-animation-duration, 1s) linear infinite,
       fade-in 0.3s 0.3s both;
     border: var(--vaadin-spinner-width, 2px) solid;
-    --_spinner-color: var(--vaadin-spinner-color, var(--vaadin-color));
+    --_spinner-color: var(--vaadin-spinner-color, var(--vaadin-text-color));
     --_spinner-color2: color-mix(in srgb, var(--_spinner-color) 20%, transparent);
     border-color: var(--_spinner-color) var(--_spinner-color) var(--_spinner-color2) var(--_spinner-color2);
     border-radius: 50%;

package/src/styles/style-props.js

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+addGlobalThemeStyles(
+  'vaadin-base',
+  css`
+    @layer vaadin.base {
+      :where(html) {
+        /* Background color */
+        --vaadin-background-color: light-dark(#fff, #222);
+
+        /* Container colors */
+        --vaadin-background-container: color-mix(in oklab, var(--vaadin-text-color) 5%, var(--vaadin-background-color));
+        --vaadin-background-container-strong: color-mix(
+          in oklab,
+          var(--vaadin-text-color) 10%,
+          var(--vaadin-background-color)
+        );
+
+        /* Border colors */
+        --vaadin-border-color-secondary: color-mix(in oklab, var(--vaadin-text-color) 24%, transparent);
+        --vaadin-border-color: color-mix(in oklab, var(--vaadin-text-color) 48%, transparent); /* Above 3:1 contrast */
+
+        /* Text colors */
+        /* Above 3:1 contrast */
+        --vaadin-text-color-disabled: color-mix(in oklab, var(--vaadin-text-color) 48%, transparent);
+        /* Above 4.5:1 contrast */
+        --vaadin-text-color-secondary: color-mix(in oklab, var(--vaadin-text-color) 68%, transparent);
+        /* Above 7:1 contrast */
+        --vaadin-text-color: light-dark(#1f1f1f, white);
+
+        /* Padding */
+        --vaadin-padding-xs: 6px;
+        --vaadin-padding-s: 8px;
+        --vaadin-padding-m: 12px;
+        --vaadin-padding-l: 16px;
+        --vaadin-padding-xl: 24px;
+        --vaadin-padding-container: var(--vaadin-padding-xs) var(--vaadin-padding-s);
+
+        /* Gap/spacing */
+        --vaadin-gap-xs: 6px;
+        --vaadin-gap-s: 8px;
+        --vaadin-gap-m: 12px;
+        --vaadin-gap-l: 16px;
+        --vaadin-gap-xl: 24px;
+
+        /* Border radius */
+        --vaadin-radius-s: 3px;
+        --vaadin-radius-m: 6px;
+        --vaadin-radius-l: 12px;
+
+        /* Focus outline */
+        --vaadin-focus-ring-width: 2px;
+        --vaadin-focus-ring-color: var(--vaadin-text-color);
+
+        /* Icons, used as mask-image */
+        --_vaadin-icon-arrow-up: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" /></svg>');
+        --_vaadin-icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" /></svg>');
+        --_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
+        --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
+        --_vaadin-icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>');
+        --_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
+        --_vaadin-icon-drag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11 7c0 .82843-.6716 1.5-1.5 1.5C8.67157 8.5 8 7.82843 8 7s.67157-1.5 1.5-1.5c.8284 0 1.5.67157 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm5-10c0 .82843-.6716 1.5-1.5 1.5S13 7.82843 13 7s.6716-1.5 1.5-1.5S16 6.17157 16 7Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 12.8284 13 12s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 17.8284 13 17s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z" fill="currentColor"/></svg>');
+        --_vaadin-icon-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>');
+        --_vaadin-icon-eye-slash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>');
+        --_vaadin-icon-fullscreen: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>');
+        --_vaadin-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
+        --_vaadin-icon-link: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');
+        --_vaadin-icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>');
+        --_vaadin-icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');
+        --_vaadin-icon-paper-airplane: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>');
+        --_vaadin-icon-pen: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>');
+        --_vaadin-icon-play: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>');
+        --_vaadin-icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>');
+        --_vaadin-icon-redo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>');
+        --_vaadin-icon-refresh: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M22 10C22 10 19.995 7.26822 18.3662 5.63824C16.7373 4.00827 14.4864 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.1031 21 19.5649 18.2543 20.6482 14.5M22 10V4M22 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+        --_vaadin-icon-resize: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967c.2929.29289.2929.76777 0 1.06066L8.53033 18.5304c-.29289.2929-.76777.2929-1.06066 0s-.29289-.7678 0-1.0607L17.4697 7.46967c.2929-.29289.7677-.29289 1.0606 0Zm0 4.50003c.2929.2929.2929.7678 0 1.0607l-5.5 5.5c-.2929.2928-.7677.2928-1.0606 0-.2929-.2929-.2929-.7678 0-1.0607l5.4999-5.5c.2929-.2929.7678-.2929 1.0607 0Zm0 4.5c.2929.2928.2929.7677 0 1.0606l-1 1.0001c-.2929.2928-.7677.2929-1.0606 0-.2929-.2929-.2929-.7678 0-1.0607l1-1c.2929-.2929.7677-.2929 1.0606 0Z" fill="currentColor"/></svg>');
+        --_vaadin-icon-sort: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none"><path d="M7.49854 6.99951C7.92795 6.99951 8.15791 7.50528 7.87549 7.82861L4.37646 11.8296C4.17728 12.0571 3.82272 12.0571 3.62354 11.8296L0.125488 7.82861C-0.157248 7.50531 0.0719873 6.99956 0.501465 6.99951H7.49854ZM3.62354 0.17041C3.82275 -0.0573875 4.17725 -0.0573848 4.37646 0.17041L7.87549 4.17041C8.15825 4.49373 7.92806 5.00049 7.49854 5.00049L0.501465 4.99951C0.0719873 4.99946 -0.157248 4.49371 0.125488 4.17041L3.62354 0.17041Z" fill="black"/></svg>');
+        --_vaadin-icon-undo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>');
+        --_vaadin-icon-upload: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></svg>');
+        --_vaadin-icon-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M3 20C5.33579 17.5226 8.50702 16 12 16C15.493 16 18.6642 17.5226 21 20M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+        --_vaadin-icon-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>');
+
+        /* Cursors for interactive elements */
+        --vaadin-clickable-cursor: pointer;
+        --vaadin-disabled-cursor: not-allowed;
+      }
+
+      @media (forced-colors: active) {
+        html {
+          --vaadin-background-color: Canvas;
+          --vaadin-border-color: CanvasText;
+          --vaadin-border-color-secondary: CanvasText;
+          --vaadin-text-color-disabled: CanvasText;
+          --vaadin-text-color-secondary: CanvasText;
+          --vaadin-text-color: CanvasText;
+          --vaadin-icon-color: CanvasText;
+          --vaadin-focus-ring-color: Highlight;
+        }
+      }
+    }
+  `,
+);

package/src/styles/user-colors.js

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+addGlobalThemeStyles(
+  'vaadin-base-user-colors',
+  css`
+    @layer vaadin.base {
+      :where(html) {
+        --_color-count: 10;
+        --_hue-step: round(360 / var(--_color-count), 1);
+        --vaadin-user-color-0: var(--vaadin-user-color, oklch(0.52 0.2 240));
+        --vaadin-user-color-1: oklch(
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-2: oklch(
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-3: oklch(
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 0 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-4: oklch(
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-5: oklch(
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-6: oklch(
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-7: oklch(
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-8: oklch(
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
+        );
+        --vaadin-user-color-9: oklch(
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 6 * var(---_vaadin-safari-17-deg, 1))
+        );
+      }
+
+      @supports not (color: hsl(0 0 0)) {
+        :where(:root),
+        :where(:host) {
+          ---_vaadin-safari-17-deg: 1deg;
+        }
+      }
+    }
+  `,
+);

package/src/tooltip-controller.js

@@ -14,6 +14,7 @@ export class TooltipController extends SlotController {
     super(host, 'tooltip');
 
     this.setTarget(host);
+    this.__onContentChange = this.__onContentChange.bind(this);
   }
 
   /**
@@ -50,7 +51,11 @@ export class TooltipController extends SlotController {
       tooltipNode.shouldShow = this.shouldShow;
     }
 
-    this.__notifyChange();
+    if (!this.manual) {
+      this.host.setAttribute('has-tooltip', '');
+    }
+    this.__notifyChange(tooltipNode);
+    tooltipNode.addEventListener('content-changed', this.__onContentChange);
   }
 
   /**
@@ -60,8 +65,12 @@ export class TooltipController extends SlotController {
    * @protected
    * @override
    */
-  teardownNode() {
-    this.__notifyChange();
+  teardownNode(tooltipNode) {
+    if (!this.manual) {
+      this.host.removeAttribute('has-tooltip');
+    }
+    tooltipNode.removeEventListener('content-changed', this.__onContentChange);
+    this.__notifyChange(null);
   }
 
   /**
@@ -160,7 +169,12 @@ export class TooltipController extends SlotController {
   }
 
   /** @private */
-  __notifyChange() {
-    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  __onContentChange(event) {
+    this.__notifyChange(event.target);
+  }
+
+  /** @private */
+  __notifyChange(node) {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node } }));
   }
 }

package/src/virtualizer-iron-list-adapter.js

@@ -14,15 +14,29 @@ const MAX_VIRTUAL_COUNT = 100000;
 const OFFSET_ADJUST_MIN_THRESHOLD = 1000;
 
 export class IronListAdapter {
-  constructor({ createElements, updateElement, scrollTarget, scrollContainer, elementsContainer, reorderElements }) {
+  constructor({
+    createElements,
+    updateElement,
+    scrollTarget,
+    scrollContainer,
+    reorderElements,
+    elementsContainer,
+    __disableHeightPlaceholder,
+  }) {
     this.isAttached = true;
     this._vidxOffset = 0;
     this.createElements = createElements;
     this.updateElement = updateElement;
     this.scrollTarget = scrollTarget;
     this.scrollContainer = scrollContainer;
-    this.elementsContainer = elementsContainer || scrollContainer;
     this.reorderElements = reorderElements;
+    this.elementsContainer = elementsContainer || scrollContainer;
+
+    // Internal option that disables the heavy height placeholder calculation
+    // (see __afterElementsUpdated) for components that always render virtual
+    // elements with a non-zero height. Not for public use.
+    this.__disableHeightPlaceholder = __disableHeightPlaceholder ?? false;
+
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
@@ -33,7 +47,7 @@ export class IronListAdapter {
 
     this.timeouts = {
       SCROLL_REORDER: 500,
-      IGNORE_WHEEL: 500,
+      PREVENT_OVERSCROLL: 500,
       FIX_INVALID_ITEM_POSITIONING: 100,
     };
 
@@ -65,7 +79,6 @@ export class IronListAdapter {
     attachObserver.observe(this.scrollTarget);
 
     this._scrollLineHeight = this._getScrollLineHeight();
-    this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
 
     this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
     this.elementsContainer.addEventListener('focusin', () => {
@@ -218,7 +231,16 @@ export class IronListAdapter {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     this._iterateItems((pidx, vidx) => {
       oldPhysicalSize += this._physicalSizes[pidx];
+      const elementOldPhysicalSize = this._physicalSizes[pidx];
       this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
+
+      if (this._physicalSizes[pidx] !== elementOldPhysicalSize) {
+        // Physical size changed, but resize observer may not catch it if the original size is restored quickly.
+        // See https://github.com/vaadin/web-components/issues/9077
+        this.__resizeObserver.unobserve(this._physicalItems[pidx]);
+        this.__resizeObserver.observe(this._physicalItems[pidx], { box: 'border-box' });
+      }
+
       newPhysicalSize += this._physicalSizes[pidx];
       this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
     }, itemSet);
@@ -271,33 +293,35 @@ export class IronListAdapter {
    * @param {!Array<!HTMLElement>} updatedElements
    */
   __afterElementsUpdated(updatedElements) {
-    updatedElements.forEach((el) => {
-      const elementHeight = el.offsetHeight;
-      if (elementHeight === 0) {
-        // If the elements have 0 height after update (for example due to lazy rendering),
-        // it results in iron-list requesting to create an unlimited count of elements.
-        // Assign a temporary placeholder sizing to elements that would otherwise end up having
-        // no height.
-        el.style.paddingTop = `${this.__placeholderHeight}px`;
-        el.style.opacity = '0';
-        el.__virtualizerPlaceholder = true;
-
-        // Manually schedule the resize handler to make sure the placeholder padding is
-        // cleared in case the resize observer never triggers.
-        this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
-          this._resizeHandler(),
-        );
-      } else {
-        // Add element height to the queue
-        this.__elementHeightQueue.push(elementHeight);
-        this.__elementHeightQueue.shift();
-
-        // Calculate new placeholder height based on the average of the defined values in the
-        // element height queue
-        const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
-        this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
-      }
-    });
+    if (!this.__disableHeightPlaceholder) {
+      updatedElements.forEach((el) => {
+        const elementHeight = el.offsetHeight;
+        if (elementHeight === 0) {
+          // If the elements have 0 height after update (for example due to lazy rendering),
+          // it results in iron-list requesting to create an unlimited count of elements.
+          // Assign a temporary placeholder sizing to elements that would otherwise end up having
+          // no height.
+          el.style.paddingTop = `${this.__placeholderHeight}px`;
+          el.style.opacity = '0';
+          el.__virtualizerPlaceholder = true;
+
+          // Manually schedule the resize handler to make sure the placeholder padding is
+          // cleared in case the resize observer never triggers.
+          this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
+            this._resizeHandler(),
+          );
+        } else {
+          // Add element height to the queue
+          this.__elementHeightQueue.push(elementHeight);
+          this.__elementHeightQueue.shift();
+
+          // Calculate new placeholder height based on the average of the defined values in the
+          // element height queue
+          const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
+          this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
+        }
+      });
+    }
 
     if (this.__pendingScrollToIndex !== undefined && !this.__hasPlaceholders()) {
       this.scrollToIndex(this.__pendingScrollToIndex);
@@ -432,7 +456,7 @@ export class IronListAdapter {
     physicalItems.forEach((el) => {
       el.style.position = 'absolute';
       fragment.appendChild(el);
-      this.__resizeObserver.observe(el);
+      this.__resizeObserver.observe(el, { box: 'border-box' });
     });
     this.elementsContainer.appendChild(fragment);
     return physicalItems;
@@ -548,8 +572,8 @@ export class IronListAdapter {
       return;
     }
 
-    this._adjustVirtualIndexOffset(this._scrollTop - (this.__previousScrollTop || 0));
-    const delta = this.scrollTarget.scrollTop - this._scrollPosition;
+    this._adjustVirtualIndexOffset(this._scrollTop - this._scrollPosition);
+    const delta = this._scrollTop - this._scrollPosition;
 
     super._scrollHandler();
 
@@ -580,6 +604,18 @@ export class IronListAdapter {
         timeOut.after(this.timeouts.FIX_INVALID_ITEM_POSITIONING),
         () => this.__fixInvalidItemPositioning(),
       );
+
+      if (!this.__overscrollDebouncer?.isActive()) {
+        this.scrollTarget.style.overscrollBehavior = 'none';
+      }
+
+      this.__overscrollDebouncer = Debouncer.debounce(
+        this.__overscrollDebouncer,
+        timeOut.after(this.timeouts.PREVENT_OVERSCROLL),
+        () => {
+          this.scrollTarget.style.overscrollBehavior = null;
+        },
+      );
     }
 
     if (this.reorderElements) {
@@ -590,11 +626,9 @@ export class IronListAdapter {
       );
     }
 
-    this.__previousScrollTop = this._scrollTop;
-
     // If the first visible index is not 0 when scrolled to the top,
     // scroll to index 0 to fix the issue.
-    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0 && Math.abs(delta) > 0) {
+    if (this._scrollPosition === 0 && this.firstVisibleIndex !== 0 && Math.abs(delta) > 0) {
       this.scrollToIndex(0);
     }
   }
@@ -654,96 +688,6 @@ export class IronListAdapter {
     }
   }
 
-  /** @private */
-  __onWheel(e) {
-    if (e.ctrlKey || this._hasScrolledAncestor(e.target, e.deltaX, e.deltaY)) {
-      return;
-    }
-
-    let deltaY = e.deltaY;
-    if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-      // Scrolling by "lines of text" instead of pixels
-      deltaY *= this._scrollLineHeight;
-    } else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-      // Scrolling by "pages" instead of pixels
-      deltaY *= this._scrollPageHeight;
-    }
-
-    if (!this._deltaYAcc) {
-      this._deltaYAcc = 0;
-    }
-
-    if (this._wheelAnimationFrame) {
-      // Accumulate wheel delta while a frame is being processed
-      this._deltaYAcc += deltaY;
-      e.preventDefault();
-      return;
-    }
-
-    deltaY += this._deltaYAcc;
-    this._deltaYAcc = 0;
-
-    this._wheelAnimationFrame = true;
-    this.__debouncerWheelAnimationFrame = Debouncer.debounce(
-      this.__debouncerWheelAnimationFrame,
-      animationFrame,
-      () => {
-        this._wheelAnimationFrame = false;
-      },
-    );
-
-    const momentum = Math.abs(e.deltaX) + Math.abs(deltaY);
-
-    if (this._canScroll(this.scrollTarget, e.deltaX, deltaY)) {
-      e.preventDefault();
-      this.scrollTarget.scrollTop += deltaY;
-      this.scrollTarget.scrollLeft += e.deltaX;
-
-      this._hasResidualMomentum = true;
-
-      this._ignoreNewWheel = true;
-      this._debouncerIgnoreNewWheel = Debouncer.debounce(
-        this._debouncerIgnoreNewWheel,
-        timeOut.after(this.timeouts.IGNORE_WHEEL),
-        () => {
-          this._ignoreNewWheel = false;
-        },
-      );
-    } else if ((this._hasResidualMomentum && momentum <= this._previousMomentum) || this._ignoreNewWheel) {
-      e.preventDefault();
-    } else if (momentum > this._previousMomentum) {
-      this._hasResidualMomentum = false;
-    }
-    this._previousMomentum = momentum;
-  }
-
-  /**
-   * Determines if the element has an ancestor that handles the scroll delta prior to this
-   *
-   * @private
-   */
-  _hasScrolledAncestor(el, deltaX, deltaY) {
-    if (el === this.scrollTarget || el === this.scrollTarget.getRootNode().host) {
-      return false;
-    } else if (
-      this._canScroll(el, deltaX, deltaY) &&
-      ['auto', 'scroll'].indexOf(getComputedStyle(el).overflow) !== -1
-    ) {
-      return true;
-    } else if (el !== this && el.parentElement) {
-      return this._hasScrolledAncestor(el.parentElement, deltaX, deltaY);
-    }
-  }
-
-  _canScroll(el, deltaX, deltaY) {
-    return (
-      (deltaY > 0 && el.scrollTop < el.scrollHeight - el.offsetHeight) ||
-      (deltaY < 0 && el.scrollTop > 0) ||
-      (deltaX > 0 && el.scrollLeft < el.scrollWidth - el.offsetWidth) ||
-      (deltaX < 0 && el.scrollLeft > 0)
-    );
-  }
-
   /**
    * Increases the pool size.
    * @override

package/src/virtualizer.js

@@ -78,9 +78,7 @@ export class Virtualizer {
   /**
    * Flushes active asynchronous tasks so that the component and the DOM end up in a stable state
    *
-   * @method update
-   * @param {number | undefined} startIndex The start index of the range
-   * @param {number | undefined} endIndex The end index of the range
+   * @method flush
    */
   flush() {
     this.__adapter.flush();

package/src/warnings.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Issues a warning in the browser console if it has not been issued before.
+ */
+export declare function issueWarning(warning: string): void;

package/src/warnings.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const issuedWarnings = new Set();
+
+/**
+ * Issues a warning in the browser console if it has not been issued before.
+ * @param {string} warning
+ */
+export function issueWarning(warning) {
+  if (issuedWarnings.has(warning)) {
+    return;
+  }
+
+  issuedWarnings.add(warning);
+  console.warn(warning);
+}
+
+/**
+ * Clears all issued warnings. Only intended for testing purposes.
+ */
+export function clearWarnings() {
+  issuedWarnings.clear();
+}