@vaadin/component-base 24.0.0-alpha7 → 24.0.0-alpha8

package/src/dom-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/element-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '../custom_typings/vaadin-usage-statistics.js';

package/src/element-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
@@ -15,14 +15,20 @@ import { DirMixin } from './dir-mixin.js';
 // for buttons that are based on `[role=button]` e.g vaadin-button.
 setCancelSyntheticClickEvents(false);
 
-window.Vaadin ||= {};
+if (!window.Vaadin) {
+  window.Vaadin = {};
+}
 
 /**
  * Array of Vaadin custom element classes that have been finalized.
  */
-window.Vaadin.registrations ||= [];
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
 
-window.Vaadin.developmentModeCallback ||= {};
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
+}
 
 window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
   usageStatistics();
@@ -39,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha7';
+      return '24.0.0-alpha8';
     }
 
     /** @protected */

package/src/focus-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/focus-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/focus-trap-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/focus-trap-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getFocusableElements, isElementFocused } from './focus-utils.js';

package/src/focus-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/focus-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/gestures.js

@@ -90,7 +90,7 @@ function PASSIVE_TOUCH(eventName) {
 }
 
 // Check for touch-only devices
-const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
+const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/u);
 
 // Defined at https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
 /** @type {!Object<boolean>} */

package/src/iron-list-core.js

@@ -10,12 +10,22 @@
 import { animationFrame, idlePeriod, microTask } from './async.js';
 import { Debouncer, enqueueDebouncer, flush } from './debounce.js';
 
-const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
+const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/u);
 const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
 const DEFAULT_PHYSICAL_COUNT = 3;
 
 /**
- * @private
+ * DO NOT EDIT THIS FILE!
+ *
+ * This file includes the iron-list scrolling engine copied from
+ * https://github.com/PolymerElements/iron-list/blob/master/iron-list.js
+ *
+ * If something in the scrolling engine needs to be changed
+ * for the virtualizer's purposes, override a function
+ * in virtualizer-iron-list-adapter.js instead of changing it here.
+ *
+ * This will allow us to keep the iron-list code here as close to
+ * the original as possible.
  */
 export const ironList = {
   /**
@@ -491,9 +501,12 @@ export const ironList = {
       this._physicalIndexForKey = {};
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
-      this._physicalCount ||= 0;
-      this._physicalItems ||= [];
-      this._physicalSizes ||= [];
+      if (!this._physicalItems) {
+        this._physicalItems = [];
+      }
+      if (!this._physicalSizes) {
+        this._physicalSizes = [];
+      }
       this._physicalStart = 0;
       if (this._scrollTop > this._scrollOffset) {
         this._resetScrollPosition(0);
@@ -635,16 +648,21 @@ export const ironList = {
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
   _updateScrollerSize(forceUpdate) {
-    this._estScrollHeight =
+    const estScrollHeight =
       this._physicalBottom +
       Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
 
-    forceUpdate ||= this._scrollHeight === 0;
-    forceUpdate ||= this._scrollPosition >= this._estScrollHeight - this._physicalSize;
+    this._estScrollHeight = estScrollHeight;
+
     // Amortize height adjustment, so it won't trigger large repaints too often.
-    if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._viewportHeight) {
-      this.$.items.style.height = `${this._estScrollHeight}px`;
-      this._scrollHeight = this._estScrollHeight;
+    if (
+      forceUpdate ||
+      this._scrollHeight === 0 ||
+      this._scrollPosition >= estScrollHeight - this._physicalSize ||
+      Math.abs(estScrollHeight - this._scrollHeight) >= this._viewportHeight
+    ) {
+      this.$.items.style.height = `${estScrollHeight}px`;
+      this._scrollHeight = estScrollHeight;
     }
   },
 
@@ -740,7 +758,9 @@ export const ironList = {
   },
 
   _debounce(name, cb, asyncModule) {
-    this._debouncers ||= {};
+    if (!this._debouncers) {
+      this._debouncers = {};
+    }
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
   },

package/src/keyboard-direction-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 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';

package/src/keyboard-direction-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isElementFocused, isElementHidden } from './focus-utils.js';

package/src/keyboard-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/keyboard-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/list-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 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';

package/src/list-mixin.js

@@ -1,12 +1,12 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { timeOut } from './async.js';
 import { Debouncer } from './debounce.js';
-import { DirHelper } from './dir-helper.js';
+import { getNormalizedScrollLeft, setNormalizedScrollLeft } from './dir-utils.js';
 import { KeyboardDirectionMixin } from './keyboard-direction-mixin.js';
 
 /**
@@ -213,7 +213,7 @@ export const ListMixin = (superClass) =>
       const key = event.key;
 
       const currentIdx = this.items.indexOf(this.focused);
-      if (/[a-zA-Z0-9]/.test(key) && key.length === 1) {
+      if (/[a-zA-Z0-9]/u.test(key) && key.length === 1) {
         const idx = this._searchKey(currentIdx, key);
         if (idx >= 0) {
           this._focus(idx);
@@ -327,9 +327,8 @@ export const ListMixin = (superClass) =>
         this._scrollerElement.scrollTop += pixels;
       } else {
         const dir = this.getAttribute('dir') || 'ltr';
-        const scrollType = DirHelper.detectScrollType();
-        const scrollLeft = DirHelper.getNormalizedScrollLeft(scrollType, dir, this._scrollerElement) + pixels;
-        DirHelper.setNormalizedScrollLeft(scrollType, dir, this._scrollerElement, scrollLeft);
+        const scrollLeft = getNormalizedScrollLeft(this._scrollerElement, dir) + pixels;
+        setNormalizedScrollLeft(this._scrollerElement, dir, scrollLeft);
       }
     }
 

package/src/media-query-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/media-query-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/overflow-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/overflow-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';

package/src/polylit-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/polylit-mixin.js

@@ -1,16 +1,18 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';
 
 const caseMap = {};
 
-const CAMEL_TO_DASH = /([A-Z])/g;
+const CAMEL_TO_DASH = /([A-Z])/gu;
 
 function camelToDash(camel) {
-  caseMap[camel] ||= camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
+  if (!caseMap[camel]) {
+    caseMap[camel] = camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
+  }
   return caseMap[camel];
 }
 
@@ -169,7 +171,10 @@ const PolylitMixinImplementation = (superclass) => {
     firstUpdated() {
       super.firstUpdated();
 
-      this.$ ||= {};
+      if (!this.$) {
+        this.$ = {};
+      }
+
       this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
         this.$[node.id] = node;
       });

package/src/resize-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/resize-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/{slot-observe-controller.d.ts → slot-child-observe-controller.d.ts}

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';
@@ -9,7 +9,7 @@ import { SlotController } from './slot-controller.js';
  * A controller that observes slotted element mutations, especially ID attribute
  * and the text content, and fires an event to notify host element about those.
  */
-export class SlotObserveController extends SlotController {
+export class SlotChildObserveController extends SlotController {
   /**
    * Setup the mutation observer on the node to update ID and notify host.
    * Node doesn't get observed automatically until this method is called.

package/src/{slot-observe-controller.js → slot-child-observe-controller.js}

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';
@@ -9,7 +9,7 @@ import { SlotController } from './slot-controller.js';
  * A controller that observes slotted element mutations, especially ID attribute
  * and the text content, and fires an event to notify host element about those.
  */
-export class SlotObserveController extends SlotController {
+export class SlotChildObserveController extends SlotController {
   constructor(host, slot, tagName, config = {}) {
     super(host, slot, tagName, { ...config, useUniqueId: true });
   }

package/src/slot-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { ReactiveController } from 'lit';

package/src/slot-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';

package/src/tabindex-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 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';

package/src/tabindex-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from './disabled-mixin.js';

package/src/templates.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/tooltip-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/tooltip-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from './slot-controller.js';

package/src/unique-id-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

package/src/unique-id-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame, timeOut } from './async.js';
@@ -34,6 +34,7 @@ export class IronListAdapter {
     this.timeouts = {
       SCROLL_REORDER: 500,
       IGNORE_WHEEL: 500,
+      FIX_INVALID_ITEM_POSITIONING: 100,
     };
 
     this.__resizeObserver = new ResizeObserver(() => this._resizeHandler());
@@ -121,6 +122,9 @@ export class IronListAdapter {
     this._resizeHandler();
     flush();
     this._scrollHandler();
+    if (this.__fixInvalidItemPositioningDebouncer) {
+      this.__fixInvalidItemPositioningDebouncer.flush();
+    }
     if (this.__scrollReorderDebouncer) {
       this.__scrollReorderDebouncer.flush();
     }
@@ -184,6 +188,14 @@ export class IronListAdapter {
     if (size === this.size) {
       return;
     }
+    // Cancel active debouncers
+    if (this.__fixInvalidItemPositioningDebouncer) {
+      this.__fixInvalidItemPositioningDebouncer.cancel();
+    }
+    if (this._debouncers && this._debouncers._increasePoolIfNeeded) {
+      // Avoid creating unnecessary elements on the following flush()
+      this._debouncers._increasePoolIfNeeded.cancel();
+    }
 
     // Prevent element update while the scroll position is being restored
     this.__preventElementUpdates = true;
@@ -199,10 +211,6 @@ export class IronListAdapter {
     // Change the size
     this.__size = size;
 
-    // Flush before invoking items change to avoid
-    // creating excess elements on the following flush()
-    flush();
-
     this._itemsChanged({
       path: 'items',
     });
@@ -344,6 +352,15 @@ export class IronListAdapter {
       }
     }
 
+    if (delta) {
+      // There was a change in scroll top. Schedule a check for invalid item positioning.
+      this.__fixInvalidItemPositioningDebouncer = Debouncer.debounce(
+        this.__fixInvalidItemPositioningDebouncer,
+        timeOut.after(this.timeouts.FIX_INVALID_ITEM_POSITIONING),
+        () => this.__fixInvalidItemPositioning(),
+      );
+    }
+
     if (this.reorderElements) {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,
@@ -355,9 +372,46 @@ export class IronListAdapter {
     this.__previousScrollTop = this._scrollTop;
 
     // If the first visible index is not 0 when scrolled to the top,
-    // add some scroll offset to enable the user to continue scrolling.
-    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0) {
-      this._scrollTop = 1;
+    // scroll to index 0 to fix the issue.
+    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0 && Math.abs(delta) > 0) {
+      this.scrollToIndex(0);
+    }
+  }
+
+  /**
+   * Work around an iron-list issue with invalid item positioning.
+   * See https://github.com/vaadin/flow-components/issues/4306
+   * @private
+   */
+  __fixInvalidItemPositioning() {
+    if (!this.scrollTarget.isConnected) {
+      return;
+    }
+
+    // Check if the first physical item element is below the top of the viewport
+    const physicalTopBelowTop = this._physicalTop > this._scrollTop;
+    // Check if the last physical item element is above the bottom of the viewport
+    const physicalBottomAboveBottom = this._physicalBottom < this._scrollBottom;
+
+    // Check if the first index is visible
+    const firstIndexVisible = this.adjustedFirstVisibleIndex === 0;
+    // Check if the last index is visible
+    const lastIndexVisible = this.adjustedLastVisibleIndex === this.size - 1;
+
+    if ((physicalTopBelowTop && !firstIndexVisible) || (physicalBottomAboveBottom && !lastIndexVisible)) {
+      // Invalid state! Try to recover.
+
+      const isScrollingDown = physicalBottomAboveBottom;
+      // Set the "_ratio" property temporarily to 0 to make iron-list's _getReusables
+      // place all the free physical items on one side of the viewport.
+      const originalRatio = this._ratio;
+      this._ratio = 0;
+      // Fake a scroll change to make _scrollHandler place the physical items
+      // on the desired side.
+      this._scrollPosition = this._scrollTop + (isScrollingDown ? -1 : 1);
+      this._scrollHandler();
+      // Restore the original "_ratio" value.
+      this._ratio = originalRatio;
     }
   }
 
@@ -376,7 +430,9 @@ export class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    this._deltaYAcc ||= 0;
+    if (!this._deltaYAcc) {
+      this._deltaYAcc = 0;
+    }
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed