@vaadin/component-base 25.1.0-alpha9 → 25.1.0-beta2

package/custom-elements.json

@@ -98,19 +98,9 @@
               "kind": "field",
               "name": "i18n",
               "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
-              "return": {
-                "type": {
-                  "text": "Object"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "Object"
-                  }
-                }
-              ]
+              "type": {
+                "text": "Object"
+              }
             }
           ],
           "attributes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.1.0-alpha9",
+  "version": "25.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.1.0-alpha9",
-    "@vaadin/test-runner-commands": "25.1.0-alpha9",
+    "@vaadin/chai-plugins": "25.1.0-beta2",
+    "@vaadin/test-runner-commands": "25.1.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
+  "gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
 }

package/src/define.js

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

package/src/i18n-mixin.js

@@ -79,22 +79,12 @@ export const I18nMixin = (defaultI18n, superClass) =>
      * Should be overridden by subclasses to provide a custom JSDoc with the
      * default I18N properties.
      *
-     * @returns {Object}
+     * @type {Object}
      */
     get i18n() {
       return this.__customI18n;
     }
 
-    /**
-     * The object used to localize this component. To change the default
-     * localization, replace this with an object that provides all properties, or
-     * just the individual properties you want to change.
-     *
-     * Should be overridden by subclasses to provide a custom JSDoc with the
-     * default I18N properties.
-     *
-     * @param {Object} value
-     */
     set i18n(value) {
       if (value === this.__customI18n) {
         return;

package/src/styles/loader-styles.js

@@ -21,15 +21,13 @@ export const loaderStyles = css`
 
   [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-text-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);
+      spin var(--vaadin-spinner-animation-duration, 0.7s) linear infinite,
+      fade-in 0.15s 0.3s both;
+    border: var(--vaadin-spinner-width, 2px) solid var(--vaadin-spinner-color, var(--vaadin-text-color));
     border-radius: 50%;
     box-sizing: border-box;
     height: var(--vaadin-spinner-size, 1lh);
+    mask-image: radial-gradient(circle at 50% var(--vaadin-spinner-width, 2px), transparent 40%, #000 70%);
     pointer-events: none;
     width: var(--vaadin-spinner-size, 1lh);
   }

package/src/styles/style-props.js

@@ -91,6 +91,7 @@ addGlobalStyles(
         --_vaadin-icon-drag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11 7c0 .82843-.6716 1.5-1.5 1.5C8.67157 8.5 8 7.82843 8 7s.67157-1.5 1.5-1.5c.8284 0 1.5.67157 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm5-10c0 .82843-.6716 1.5-1.5 1.5S13 7.82843 13 7s.6716-1.5 1.5-1.5S16 6.17157 16 7Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 12.8284 13 12s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 17.8284 13 17s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z" fill="currentColor"/></svg>');
         --_vaadin-icon-eye: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>');
         --_vaadin-icon-eye-slash: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>');
+        --_vaadin-icon-file: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
         --_vaadin-icon-fullscreen: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg>');
         --_vaadin-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');
         --_vaadin-icon-link: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>');

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

@@ -350,13 +350,12 @@ export class IronListAdapter {
       this._debouncers._increasePoolIfNeeded.cancel();
     }
 
-    // Prevent element update while the scroll position is being restored
-    this.__preventElementUpdates = true;
+    const shouldRestoreScrollPosition = size > 0 && this._scrollTop > 0;
 
     // Record the scroll position before changing the size
     let fvi; // First visible index
     let fviOffsetBefore; // Scroll offset of the first visible index
-    if (size > 0) {
+    if (shouldRestoreScrollPosition) {
       fvi = this.adjustedFirstVisibleIndex;
       fviOffsetBefore = this.__getIndexScrollOffset(fvi);
     }
@@ -364,13 +363,19 @@ export class IronListAdapter {
     // Change the size
     this.__size = size;
 
+    // Attempts to update elements during _itemsChanged and the subsequent
+    // scrollToIndex should be skipped when the scroll position needs to be
+    // restored (scroll position > 0 before size change). Otherwise, these
+    // element updates can cause the component to make incorrect server
+    // requests in its updateElement callback.
+    this.__preventElementUpdates = shouldRestoreScrollPosition;
+
     this._itemsChanged({
       path: 'items',
     });
     flush();
 
-    // Try to restore the scroll position if the new size is larger than 0
-    if (size > 0) {
+    if (shouldRestoreScrollPosition) {
       fvi = Math.min(fvi, size - 1);
       // Note, calling scrollToIndex also updates the virtual index offset,
       // causing the virtualizer to add more items when size is increased,
@@ -396,9 +401,16 @@ export class IronListAdapter {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    // Schedule and flush a resize handler
+    // Re-render items once the scroll position has been restored.
+    // This call also updates the cached scrollTarget height and
+    // rechecks whether more virtual elements are needed, since the
+    // scrollTarget's height may change after the scrollContainer's
+    // height is determined and set, requiring more elements to fill
+    // the viewport (e.g., in combo-box, where the scroller height
+    // depends on the height of #selector element in the shadow DOM).
     this._resizeHandler();
     flush();
+
     // Schedule an update to ensure item positions are correct after subsequent size changes
     // Fix for https://github.com/vaadin/flow-components/issues/6269
     this._debounce('_update', this._update, microTask);