@vaadin/component-base 25.3.0-alpha1 → 25.3.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha1",
-    "@vaadin/test-runner-commands": "25.3.0-alpha1",
+    "@vaadin/chai-plugins": "25.3.0-alpha3",
+    "@vaadin/test-runner-commands": "25.3.0-alpha3",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "5824d54c995945aafd50d30edc2cb763a58a18b6"
+  "gitHead": "ba0c4c55ea219eadd9aefe244f53e87803a066c8"
 }

package/src/css-utils.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Registers a CSS custom property, tolerating the case where the property has
+ * already been registered. This can happen when a module is evaluated more than
+ * once (e.g. duplicate bundle chunks or two copies of the library on the page),
+ * in which case `CSS.registerProperty` throws `InvalidModificationError`. That
+ * error is caught and logged as a warning rather than allowed to break loading.
+ *
+ * @param {PropertyDefinition} definition
+ */
+export function registerCSSProperty(definition) {
+  try {
+    CSS.registerProperty(definition);
+  } catch (e) {
+    if (e instanceof DOMException && e.name === 'InvalidModificationError') {
+      console.warn(`The CSS property ${definition.name} has already been registered.`);
+    } else {
+      throw e;
+    }
+  }
+}
+
+/**
+ * Add a `<style>` block with given styles to the document.
+ *
+ * @param {string} id the id to set on the created element, only for informational purposes
+ * @param  {CSSResultGroup[]} styles the styles to add
+ */
+export const addGlobalStyles = (id, ...styles) => {
+  const styleTag = document.createElement('style');
+  styleTag.id = id;
+  styleTag.textContent = styles.map((style) => style.toString()).join('\n');
+
+  document.head.insertAdjacentElement('afterbegin', styleTag);
+};

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

@@ -15,13 +15,6 @@ export class Cache {
    */
   context;
 
-  /**
-   * The number of items to display per page.
-   *
-   * @type {number}
-   */
-  pageSize;
-
   /**
    * An array of cached items.
    *
@@ -50,6 +43,14 @@ export class Cache {
    */
   #subCacheByIndex = {};
 
+  /**
+   * The number of items per page.
+   *
+   * @type {number}
+   * @private
+   */
+  #pageSize;
+
   /**
    * The number of items.
    *
@@ -123,6 +124,29 @@ export class Cache {
     return this.#flatSize;
   }
 
+  /**
+   * The number of items per page.
+   *
+   * @return {number}
+   */
+  get pageSize() {
+    return this.#pageSize;
+  }
+
+  /**
+   * Sets the number of items per page for this cache and its descendants.
+   * Changing the page size discards all pending page requests.
+   *
+   * @param {number} pageSize
+   */
+  set pageSize(pageSize) {
+    this.#pageSize = pageSize;
+    this.pendingRequests = {};
+    this.subCaches.forEach((subCache) => {
+      subCache.pageSize = pageSize;
+    });
+  }
+
   /**
    * The number of items.
    *

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

@@ -29,13 +29,6 @@ export class DataProviderController extends EventTarget {
    */
   dataProviderParams;
 
-  /**
-   * A number of items to display per page.
-   *
-   * @type {number}
-   */
-  pageSize;
-
   /**
    * A callback that returns whether the given item is expanded.
    *
@@ -78,14 +71,13 @@ export class DataProviderController extends EventTarget {
   ) {
     super();
     this.host = host;
-    this.pageSize = pageSize;
     this.getItemId = getItemId;
     this.isExpanded = isExpanded;
     this.placeholder = placeholder;
     this.isPlaceholder = isPlaceholder;
     this.dataProvider = dataProvider;
     this.dataProviderParams = dataProviderParams;
-    this.rootCache = this.#createRootCache(size);
+    this.rootCache = this.#createRootCache(pageSize, size);
   }
 
   /**
@@ -95,6 +87,13 @@ export class DataProviderController extends EventTarget {
     return this.rootCache.flatSize;
   }
 
+  /**
+   * The number of items per page in the root cache.
+   */
+  get pageSize() {
+    return this.rootCache.pageSize;
+  }
+
   /** @private */
   get #cacheContext() {
     return {
@@ -113,13 +112,12 @@ export class DataProviderController extends EventTarget {
   }
 
   /**
-   * Sets the page size and clears the cache.
+   * Sets the number of items per page in the root cache and any of its descendants.
    *
    * @param {number} pageSize
    */
   setPageSize(pageSize) {
-    this.pageSize = pageSize;
-    this.clearCache();
+    this.rootCache.pageSize = pageSize;
   }
 
   /**
@@ -129,7 +127,6 @@ export class DataProviderController extends EventTarget {
    */
   setDataProvider(dataProvider) {
     this.dataProvider = dataProvider;
-    this.clearCache();
   }
 
   /**
@@ -143,7 +140,7 @@ export class DataProviderController extends EventTarget {
    * Clears the cache.
    */
   clearCache() {
-    this.rootCache = this.#createRootCache(this.rootCache.size);
+    this.rootCache = this.#createRootCache(this.rootCache.pageSize, this.rootCache.size);
   }
 
   /**
@@ -238,8 +235,8 @@ export class DataProviderController extends EventTarget {
   }
 
   /** @private */
-  #createRootCache(size) {
-    return new Cache(this.#cacheContext, this.pageSize, size);
+  #createRootCache(pageSize, size) {
+    return new Cache(this.#cacheContext, pageSize, size);
   }
 
   /** @private */
@@ -250,7 +247,7 @@ export class DataProviderController extends EventTarget {
 
     let params = {
       page,
-      pageSize: this.pageSize,
+      pageSize: cache.pageSize,
       parentItem: cache.parentItem,
     };
 

package/src/define.js

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

package/src/styles/style-props.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
-import { addGlobalStyles } from './add-global-styles.js';
+import { addGlobalStyles, registerCSSProperty } from '../css-utils.js';
 
 // NOTE: Base color CSS custom properties are explicitly registered as `<color>`
 // here to avoid performance issues in Aura. Aura overrides these properties with
@@ -18,7 +18,7 @@ import { addGlobalStyles } from './add-global-styles.js';
   '--vaadin-border-color-secondary',
   '--vaadin-background-color',
 ].forEach((propertyName) => {
-  CSS.registerProperty({
+  registerCSSProperty({
     name: propertyName,
     syntax: '<color>',
     inherits: true,

package/src/styles/user-colors.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';
-import { addGlobalStyles } from './add-global-styles.js';
+import { addGlobalStyles } from '../css-utils.js';
 
 addGlobalStyles(
   'vaadin-base-user-colors',

package/src/styles/add-global-styles.js

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright (c) 2025 - 2026 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Add a `<style>` block with given styles to the document.
- *
- * @param {string} id the id to set on the created element, only for informational purposes
- * @param  {CSSResultGroup[]} styles the styles to add
- */
-export const addGlobalStyles = (id, ...styles) => {
-  const styleTag = document.createElement('style');
-  styleTag.id = id;
-  styleTag.textContent = styles.map((style) => style.toString()).join('\n');
-
-  document.head.insertAdjacentElement('afterbegin', styleTag);
-};