@vaadin/component-base 25.2.0-alpha5 → 25.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.2.0-alpha5",
+  "version": "25.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.2.0-alpha5",
-    "@vaadin/test-runner-commands": "25.2.0-alpha5",
+    "@vaadin/chai-plugins": "25.2.0-alpha6",
+    "@vaadin/test-runner-commands": "25.2.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2f0c822a389571591b1b9d2c27d45e008ccbae6b"
+  "gitHead": "30f23c65765f27616f2db292406d5759a7e987c3"
 }

package/src/define.js

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

package/src/overflow-controller.js

@@ -3,8 +3,6 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
 
 /**
  * A controller that detects if content inside the element overflows its scrolling viewport,
@@ -48,12 +46,7 @@ export class OverflowController {
   observe() {
     const { host } = this;
 
-    this.__resizeObserver = new ResizeObserver(() => {
-      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
-        this.__updateOverflow();
-      });
-    });
-
+    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
     this.__resizeObserver.observe(host);
 
     // Observe initial children
@@ -74,26 +67,43 @@ export class OverflowController {
             this.__resizeObserver.unobserve(node);
           }
         });
-      });
 
-      this.__updateOverflow();
+        if (addedNodes.length === 0 && removedNodes.length > 0) {
+          this.__updateState({ sync: true });
+        }
+      });
     });
 
     this.__childObserver.observe(host, { childList: true });
 
     // Update overflow attribute on scroll
     this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+  }
 
-    this.__updateOverflow();
+  /** @private */
+  __onResize() {
+    this.__updateState({ sync: false });
   }
 
   /** @private */
   __onScroll() {
-    this.__updateOverflow();
+    this.__updateState({ sync: true });
   }
 
   /** @private */
-  __updateOverflow() {
+  __updateState({ sync }) {
+    cancelAnimationFrame(this.__resizeRaf);
+
+    const state = this.__readState();
+    if (sync) {
+      this.__writeState(state);
+    } else {
+      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+    }
+  }
+
+  /** @private */
+  __readState() {
     const target = this.scrollTarget;
 
     let overflow = '';
@@ -115,10 +125,14 @@ export class OverflowController {
       overflow += ' end';
     }
 
-    overflow = overflow.trim();
-    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+    return { overflow: overflow.trim() };
+  }
+
+  /** @private */
+  __writeState({ overflow }) {
+    if (overflow) {
       this.host.setAttribute('overflow', overflow);
-    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+    } else {
       this.host.removeAttribute('overflow');
     }
   }

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

@@ -78,8 +78,6 @@ export class IronListAdapter {
     });
     attachObserver.observe(this.scrollTarget);
 
-    this._scrollLineHeight = this._getScrollLineHeight();
-
     this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
     this.elementsContainer.addEventListener('focusin', () => {
       this.scrollTarget.dispatchEvent(
@@ -462,10 +460,6 @@ export class IronListAdapter {
     this._isRTL = Boolean(styles.direction === 'rtl');
     this._viewportWidth = this.elementsContainer.offsetWidth;
     this._viewportHeight = this.scrollTarget.offsetHeight;
-    this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
-    if (this.grid) {
-      this._updateGridMetrics();
-    }
   }
 
   /** @private */
@@ -780,20 +774,6 @@ export class IronListAdapter {
     return 0;
   }
 
-  /**
-   * @returns {Number|undefined} - The browser's default font-size in pixels
-   * @private
-   */
-  _getScrollLineHeight() {
-    const el = document.createElement('div');
-    el.style.fontSize = 'initial';
-    el.style.display = 'none';
-    document.body.appendChild(el);
-    const fontSize = window.getComputedStyle(el).fontSize;
-    document.body.removeChild(el);
-    return fontSize ? window.parseInt(fontSize) : undefined;
-  }
-
   __getVisibleElements() {
     return Array.from(this.elementsContainer.children).filter((element) => !element.hidden);
   }