@vaadin/component-base 25.0.0-alpha4 → 25.0.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.0.0-alpha4",
+  "version": "25.0.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -38,10 +38,10 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha4",
-    "@vaadin/test-runner-commands": "25.0.0-alpha4",
+    "@vaadin/chai-plugins": "25.0.0-alpha6",
+    "@vaadin/test-runner-commands": "25.0.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
+  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
 }

package/src/define.js

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

package/src/loader-styles.js

@@ -0,0 +1,42 @@
+/**
+ * @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`
+  @layer base {
+    @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));
+      border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
+        hsl(from var(--_spinner-color) h s l / 0.2);
+      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-iron-list-adapter.js

@@ -599,6 +599,24 @@ export class IronListAdapter {
     }
   }
 
+  /** @override */
+  _resizeHandler() {
+    super._resizeHandler();
+
+    // Fixes an issue where the new items are not created on scroll target resize when the scroll position is around the end.
+    // See https://github.com/vaadin/flow-components/issues/7307
+    const lastIndexVisible = this.adjustedLastVisibleIndex === this.size - 1;
+    const emptySpace = this._physicalTop - this._scrollPosition;
+    if (lastIndexVisible && emptySpace > 0) {
+      const idxAdjustment = Math.ceil(emptySpace / this._physicalAverage);
+      this._virtualStart = Math.max(0, this._virtualStart - idxAdjustment);
+      this._physicalStart = Math.max(0, this._physicalStart - idxAdjustment);
+      // Scroll to end for smoother resize
+      super.scrollToIndex(this._virtualCount - 1);
+      this.scrollTarget.scrollTop = this.scrollTarget.scrollHeight - this.scrollTarget.clientHeight;
+    }
+  }
+
   /**
    * Work around an iron-list issue with invalid item positioning.
    * See https://github.com/vaadin/flow-components/issues/4306