@vaadin/component-base 24.8.0-alpha8 → 24.8.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.8.0-alpha8",
+  "version": "24.8.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,8 @@
     "custom_typings",
     "index.d.ts",
     "index.js",
-    "src"
+    "src",
+    "!src/style-props.js"
   ],
   "keywords": [
     "Vaadin",
@@ -38,10 +39,10 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "24.8.0-beta1",
+    "@vaadin/test-runner-commands": "24.8.0-beta1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "57ce3a90de99e49049312b0ba4041d3e7542e9d8"
 }

package/src/controller-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * @typedef ReactiveController
@@ -15,7 +15,7 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
  *
  * @polymerMixin
  */
-export const ControllerMixin = dedupingMixin((superClass) => {
+export const ControllerMixin = dedupeMixin((superClass) => {
   // If the superclass extends from LitElement,
   // use its own controllers implementation.
   if (typeof superClass.prototype.addController === 'function') {

package/src/define.js

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

package/src/delegate-state-mixin.js

@@ -3,14 +3,14 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to delegate properties and attributes to a target element.
  *
  * @polymerMixin
  */
-export const DelegateStateMixin = dedupingMixin(
+export const DelegateStateMixin = dedupeMixin(
   (superclass) =>
     class DelegateStateMixinClass extends superclass {
       static get properties() {

package/src/i18n-mixin.js

@@ -90,6 +90,9 @@ export const I18nMixin = (defaultI18n, superClass) =>
      * @param {Object} value
      */
     set i18n(value) {
+      if (value === this.__customI18n) {
+        return;
+      }
       this.__customI18n = value;
       this.__effectiveI18n = deepMerge({}, defaultI18n, this.__customI18n);
     }

package/src/polylit-mixin.js

@@ -45,6 +45,13 @@ function getOrCreateMap(obj, name) {
 
 const PolylitMixinImplementation = (superclass) => {
   class PolylitMixinClass extends superclass {
+    // PolylitMixin, and components using it, force synchronous updates
+    // in connectedCallback and for properties that are configured to
+    // be sync. This causes Lit's `change-in-update` warning to be
+    // logged for almost every component when Lit runs in development
+    // mode. Since we intentionally force updates, disable the warning.
+    static enabledWarnings = [];
+
     static createProperty(name, options) {
       if ([String, Boolean, Number, Array].includes(options)) {
         options = {
@@ -68,6 +75,13 @@ const PolylitMixinImplementation = (superclass) => {
      * @override
      */
     static finalize() {
+      // Suppress warnings about deprecated overriding ReactiveElement methods
+      // as the mixin requires those. See https://github.com/lit/lit/pull/4901
+      if (window.litIssuedWarnings) {
+        window.litIssuedWarnings.add('no-override-create-property');
+        window.litIssuedWarnings.add('no-override-get-property-descriptor');
+      }
+
       super.finalize();
 
       if (Array.isArray(this.observers)) {

package/src/resize-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 const observer = new ResizeObserver((entries) => {
   setTimeout(() => {
@@ -29,7 +29,7 @@ const observer = new ResizeObserver((entries) => {
  *
  * @polymerMixin
  */
-export const ResizeMixin = dedupingMixin(
+export const ResizeMixin = dedupeMixin(
   (superclass) =>
     class ResizeMixinClass extends superclass {
       /**

package/src/slot-styles-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 const stylesMap = new WeakMap();
 
@@ -42,7 +42,7 @@ function insertStyles(styles, root) {
  *
  * @polymerMixin
  */
-export const SlotStylesMixin = dedupingMixin(
+export const SlotStylesMixin = dedupeMixin(
   (superclass) =>
     class SlotStylesMixinClass extends superclass {
       /**

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

@@ -178,6 +178,16 @@ export class IronListAdapter {
     }
   }
 
+  hostConnected() {
+    // Restore scroll position, which is reset when host is removed from DOM,
+    // since virtualizer doesn't re-render when adding it to the DOM again.
+    // If the scroll target isn't visible and its `offsetParent` is `null`, wait
+    // for the ResizeObserver to handle this case (hiding -> moving -> showing).
+    if (this.scrollTarget.offsetParent && this.scrollTarget.scrollTop !== this._scrollPosition) {
+      this.scrollTarget.scrollTop = this._scrollPosition;
+    }
+  }
+
   update(startIndex = 0, endIndex = this.size - 1) {
     const updatedElements = [];
     this.__getVisibleElements().forEach((el) => {

package/src/virtualizer.js

@@ -80,4 +80,13 @@ export class Virtualizer {
   flush() {
     this.__adapter.flush();
   }
+
+  /**
+   * Notifies the virtualizer about its host element connected to the DOM.
+   *
+   * @method hostConnected
+   */
+  hostConnected() {
+    this.__adapter.hostConnected();
+  }
 }