@vaadin/component-base 24.8.4 → 25.0.0-alpha10

package/index.d.ts

@@ -1,4 +1,3 @@
-export { ControllerMixin } from './src/controller-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';

package/index.js

@@ -1,4 +1,3 @@
-export { ControllerMixin } from './src/controller-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
 export { DirMixin } from './src/dir-mixin.js';
 export { ElementMixin } from './src/element-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,8 @@
     "custom_typings",
     "index.d.ts",
     "index.js",
-    "src"
+    "src",
+    "!src/style-props.js"
   ],
   "keywords": [
     "Vaadin",
@@ -32,16 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-development-mode-detector": "^2.0.0",
     "@vaadin/vaadin-usage-statistics": "^2.1.0",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

package/src/browser-utils.js

@@ -33,6 +33,3 @@ export const isTouch = (() => {
     return false;
   }
 })();
-
-export const supportsAdoptingStyleSheets =
-  window.ShadowRoot && 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;

package/src/data-provider-controller/cache.d.ts

@@ -58,14 +58,6 @@ export class Cache<TItem> {
    */
   get flatSize(): number;
 
-  /**
-   * The total number of items, including items from expanded sub-caches.
-   *
-   * @protected
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  get effectiveSize(): number;
-
   constructor(
     context: CacheContext<TItem>,
     pageSize: number,
@@ -113,34 +105,4 @@ export class Cache<TItem> {
    * of an item in the `items` array.
    */
   getFlatIndex(index: number): number;
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  getItemForIndex(index: number): TItem | undefined;
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  getCacheAndIndex(index: number): { cache: Cache<TItem>; scaledIndex: number };
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  updateSize(): void;
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  ensureSubCacheForScaledIndex(scaledIndex: number): void;
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  get grid(): HTMLElement;
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  get itemCaches(): object;
 }

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { getFlatIndexContext } from './helpers.js';
 
 /**
  * A class that stores items with their associated sub-caches.
@@ -124,19 +123,6 @@ export class Cache {
     return this.__flatSize;
   }
 
-  /**
-   * The total number of items, including items from expanded sub-caches.
-   *
-   * @protected
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  get effectiveSize() {
-    console.warn(
-      '<vaadin-grid> The `effectiveSize` property of ItemCache is deprecated and will be removed in Vaadin 25.',
-    );
-    return this.flatSize;
-  }
-
   /**
    * The number of items.
    *
@@ -261,66 +247,4 @@ export class Cache {
       return clampedIndex > index ? prev + subCache.flatSize : prev;
     }, clampedIndex);
   }
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  getItemForIndex(index) {
-    console.warn(
-      '<vaadin-grid> The `getItemForIndex` method of ItemCache is deprecated and will be removed in Vaadin 25.',
-    );
-    const { item } = getFlatIndexContext(this, index);
-    return item;
-  }
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  getCacheAndIndex(index) {
-    console.warn(
-      '<vaadin-grid> The `getCacheAndIndex` method of ItemCache is deprecated and will be removed in Vaadin 25.',
-    );
-    const { cache, index: scaledIndex } = getFlatIndexContext(this, index);
-    return { cache, scaledIndex };
-  }
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  updateSize() {
-    console.warn('<vaadin-grid> The `updateSize` method of ItemCache is deprecated and will be removed in Vaadin 25.');
-    this.recalculateFlatSize();
-  }
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  ensureSubCacheForScaledIndex(scaledIndex) {
-    console.warn(
-      '<vaadin-grid> The `ensureSubCacheForScaledIndex` method of ItemCache is deprecated and will be removed in Vaadin 25.',
-    );
-
-    if (!this.getSubCache(scaledIndex)) {
-      const subCache = this.createSubCache(scaledIndex);
-      this.context.__controller.__loadCachePage(subCache, 0);
-    }
-  }
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  get grid() {
-    console.warn('<vaadin-grid> The `grid` property of ItemCache is deprecated and will be removed in Vaadin 25.');
-    return this.context.__controller.host;
-  }
-
-  /**
-   * @deprecated since 24.3 and will be removed in Vaadin 25.
-   */
-  get itemCaches() {
-    console.warn(
-      '<vaadin-grid> The `itemCaches` property of ItemCache is deprecated and will be removed in Vaadin 25.',
-    );
-    return this.__subCacheByIndex;
-  }
 }

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

@@ -100,8 +100,6 @@ export class DataProviderController extends EventTarget {
     return {
       isExpanded: this.isExpanded,
       placeholder: this.placeholder,
-      // The controller instance is needed to ensure deprecated cache methods work.
-      __controller: this,
     };
   }
 

package/src/define.js

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

package/src/element-mixin.js

@@ -3,18 +3,11 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { setCancelSyntheticClickEvents } from '@polymer/polymer/lib/utils/settings.js';
 import { usageStatistics } from '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js';
 import { idlePeriod } from './async.js';
 import { Debouncer, enqueueDebouncer } from './debounce.js';
 import { DirMixin } from './dir-mixin.js';
 
-// This setting affects the legacy Polymer gestures which get activated
-// once you import any iron component e.g iron-icon.
-// It has to be explicitly disabled to prevent click issues in iOS + VoiceOver
-// for buttons that are based on `[role=button]` e.g vaadin-button.
-setCancelSyntheticClickEvents(false);
-
 if (!window.Vaadin) {
   window.Vaadin = {};
 }

package/src/gestures.js

@@ -58,7 +58,6 @@ function isMouseEvent(name) {
   return MOUSE_EVENTS.indexOf(name) > -1;
 }
 
-/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
 // check for passive event listeners
 let supportsPassive = false;
 (function () {

package/src/iron-list-core.js

@@ -347,7 +347,6 @@ export const ironList = {
       ith = this._physicalEnd;
       offsetContent = bottom - scrollBottom;
     }
-    // eslint-disable-next-line no-constant-condition
     while (true) {
       physicalItemHeight = this._getPhysicalSizeIncrement(ith);
       offsetContent -= physicalItemHeight;

package/src/loader-styles.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './style-props.js';
+import { css } from 'lit';
+
+export const loaderStyles = css`
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  [part='loader'] {
+    animation:
+      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-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%;
+    box-sizing: border-box;
+    height: var(--vaadin-spinner-size, 1lh);
+    pointer-events: none;
+    width: var(--vaadin-spinner-size, 1lh);
+  }
+
+  :host(:not([loading])) [part~='loader'] {
+    display: none;
+  }
+`;

package/src/virtualizer.js

@@ -1,3 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 import { IronListAdapter } from './virtualizer-iron-list-adapter.js';
 
 export class Virtualizer {

package/src/controller-mixin.d.ts

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ReactiveController } from 'lit';
-
-/**
- * A mixin for connecting controllers to the element.
- */
-export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
-  superclass: T,
-): Constructor<ControllerMixinClass> & T;
-
-export declare class ControllerMixinClass {
-  /**
-   * Registers a controller to participate in the element update cycle.
-   */
-  protected addController(controller: ReactiveController): void;
-
-  /**
-   * Removes a controller from the element.
-   */
-  protected removeController(controller: ReactiveController): void;
-}

package/src/controller-mixin.js

@@ -1,81 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-
-/**
- * @typedef ReactiveController
- * @type {import('lit').ReactiveController}
- */
-
-/**
- * A mixin for connecting controllers to the element.
- *
- * @polymerMixin
- */
-export const ControllerMixin = dedupeMixin((superClass) => {
-  // If the superclass extends from LitElement,
-  // use its own controllers implementation.
-  if (typeof superClass.prototype.addController === 'function') {
-    return superClass;
-  }
-
-  return class ControllerMixinClass extends superClass {
-    constructor() {
-      super();
-
-      /**
-       * @type {Set<ReactiveController>}
-       */
-      this.__controllers = new Set();
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this.__controllers.forEach((c) => {
-        if (c.hostConnected) {
-          c.hostConnected();
-        }
-      });
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      this.__controllers.forEach((c) => {
-        if (c.hostDisconnected) {
-          c.hostDisconnected();
-        }
-      });
-    }
-
-    /**
-     * Registers a controller to participate in the element update cycle.
-     *
-     * @param {ReactiveController} controller
-     * @protected
-     */
-    addController(controller) {
-      this.__controllers.add(controller);
-      // Call hostConnected if a controller is added after the element is attached.
-      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
-        controller.hostConnected();
-      }
-    }
-
-    /**
-     * Removes a controller from the element.
-     *
-     * @param {ReactiveController} controller
-     * @protected
-     */
-    removeController(controller) {
-      this.__controllers.delete(controller);
-    }
-  };
-});

package/src/templates.js

@@ -1,24 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Passes the component to the template renderer callback if the template renderer is imported.
- * Otherwise, if there is a template, it warns that the template renderer needs to be imported.
- *
- * @param {HTMLElement} component
- */
-export function processTemplates(component) {
-  if (window.Vaadin && window.Vaadin.templateRendererCallback) {
-    window.Vaadin.templateRendererCallback(component);
-    return;
-  }
-
-  if (component.querySelector('template')) {
-    console.warn(
-      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/polymer-legacy-adapter/template-renderer.js to enable compatibility.`,
-    );
-  }
-}