@vaadin/component-base 23.1.0-beta4 → 23.1.0-rc3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.1.0-beta4",
+  "version": "23.1.0-rc3",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e283473964ecb3085aacf3eddb5333d052a045"
+  "gitHead": "49c312fbe0228adb559296d45655bbfd4eac6235"
 }

package/src/debounce.d.ts

@@ -10,8 +10,6 @@
 import { AsyncInterface } from './async.js';
 
 export declare class Debouncer {
-  constructor();
-
   /**
    * Creates a debouncer if no debouncer is passed as a parameter
    * or it cancels an active debouncer otherwise. The following
@@ -48,6 +46,8 @@ export declare class Debouncer {
    */
   static debounce(debouncer: Debouncer | null, asyncModule: AsyncInterface, callback: () => any): Debouncer;
 
+  constructor();
+
   /**
    * Sets the scheduler; that is, a module with the Async interface,
    * a callback and optional arguments to be passed to the run function

package/src/debounce.js

@@ -12,6 +12,52 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
  * @summary Collapse multiple callbacks into one invocation after a timer.
  */
 export class Debouncer {
+  /**
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param {Debouncer?} debouncer Debouncer object.
+   * @param {!AsyncInterface} asyncModule Object with Async interface
+   * @param {function()} callback Callback to run.
+   * @return {!Debouncer} Returns a debouncer object.
+   */
+  static debounce(debouncer, asyncModule, callback) {
+    if (debouncer instanceof Debouncer) {
+      // Cancel the async callback, but leave in debouncerQueue if it was
+      // enqueued, to maintain 1.x flush order
+      debouncer._cancelAsync();
+    } else {
+      debouncer = new Debouncer();
+    }
+    debouncer.setConfig(asyncModule, callback);
+    return debouncer;
+  }
+
   constructor() {
     this._asyncModule = null;
     this._callback = null;
@@ -85,52 +131,6 @@ export class Debouncer {
   isActive() {
     return this._timer != null;
   }
-
-  /**
-   * Creates a debouncer if no debouncer is passed as a parameter
-   * or it cancels an active debouncer otherwise. The following
-   * example shows how a debouncer can be called multiple times within a
-   * microtask and "debounced" such that the provided callback function is
-   * called once. Add this method to a custom element:
-   *
-   * ```js
-   * import {microTask} from '@vaadin/component-base/src/async.js';
-   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
-   * // ...
-   *
-   * _debounceWork() {
-   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
-   *       microTask, () => this._doWork());
-   * }
-   * ```
-   *
-   * If the `_debounceWork` method is called multiple times within the same
-   * microtask, the `_doWork` function will be called only once at the next
-   * microtask checkpoint.
-   *
-   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
-   * this with a debouncer, you can use `enqueueDebouncer` and
-   * `flush`. For example, extend the above example by adding
-   * `enqueueDebouncer(this._debounceJob)` at the end of the
-   * `_debounceWork` method. Then in a test, call `flush` to ensure
-   * the debouncer has completed.
-   *
-   * @param {Debouncer?} debouncer Debouncer object.
-   * @param {!AsyncInterface} asyncModule Object with Async interface
-   * @param {function()} callback Callback to run.
-   * @return {!Debouncer} Returns a debouncer object.
-   */
-  static debounce(debouncer, asyncModule, callback) {
-    if (debouncer instanceof Debouncer) {
-      // Cancel the async callback, but leave in debouncerQueue if it was
-      // enqueued, to maintain 1.x flush order
-      debouncer._cancelAsync();
-    } else {
-      debouncer = new Debouncer();
-    }
-    debouncer.setConfig(asyncModule, callback);
-    return debouncer;
-  }
 }
 
 let debouncerQueue = new Set();

package/src/dom-utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns an array of ancestor root nodes for the given node.
+ *
+ * A root node is either a document node or a document fragment node (Shadow Root).
+ * The array is collected by a bottom-up DOM traversing that starts with the given node
+ * and involves both the light DOM and ancestor shadow DOM trees.
+ */
+export function getAncestorRootNodes(node: Node): Node[];

package/src/dom-utils.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns an array of ancestor root nodes for the given node.
+ *
+ * A root node is either a document node or a document fragment node (Shadow Root).
+ * The array is collected by a bottom-up DOM traversing that starts with the given node
+ * and involves both the light DOM and ancestor shadow DOM trees.
+ *
+ * @param {Node} node
+ * @return {Node[]}
+ */
+export function getAncestorRootNodes(node) {
+  const result = [];
+
+  while (node) {
+    if (node.nodeType === Node.DOCUMENT_NODE) {
+      result.push(node);
+      break;
+    }
+
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      result.push(node);
+      node = node.host;
+      continue;
+    }
+
+    if (node.assignedSlot) {
+      node = node.assignedSlot;
+      continue;
+    }
+
+    node = node.parentNode;
+  }
+
+  return result;
+}

package/src/element-mixin.js

@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.1.0-beta4';
+      return '23.1.0-rc3';
     }
 
     /** @protected */

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

@@ -9,17 +9,17 @@ import { ReactiveController } from 'lit';
  * A controller for trapping focus within a DOM node.
  */
 export class FocusTrapController implements ReactiveController {
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+
   constructor(node: HTMLElement);
 
   hostConnected(): void;
 
   hostDisconnected(): void;
 
-  /**
-   * The controller host element.
-   */
-  host: HTMLElement;
-
   /**
    * Activates a focus trap for a DOM node that will prevent focus from escaping the node.
    * The trap can be deactivated with the `.releaseFocus()` method.

package/src/iron-list-core.js

@@ -115,32 +115,11 @@ export const ironList = {
    */
   _maxPages: 2,
 
-  /**
-   * The maximum items per row
-   */
-  _itemsPerRow: 1,
-
-  /**
-   * The width of each grid item
-   */
-  _itemWidth: 0,
-
-  /**
-   * The height of the row in grid layout.
-   */
-  _rowHeight: 0,
-
   /**
    * The cost of stamping a template in ms.
    */
   _templateCost: 0,
 
-  /**
-   * Needed to pass event.model property to declarative event handlers -
-   * see polymer/polymer#4339.
-   */
-  _parentModel: true,
-
   /**
    * The bottom of the physical content.
    */
@@ -166,8 +145,7 @@ export const ironList = {
    * The height of the physical content that isn't on the screen.
    */
   get _hiddenContentSize() {
-    const size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
-    return size - this._viewportHeight;
+    return this._physicalSize - this._viewportHeight;
   },
 
   /**
@@ -182,7 +160,7 @@ export const ironList = {
    * `_physicalStart`.
    */
   get _maxVirtualStart() {
-    const virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
+    const virtualCount = this._virtualCount;
     return Math.max(0, virtualCount - this._physicalCount);
   },
 
@@ -192,9 +170,6 @@ export const ironList = {
 
   set _virtualStart(val) {
     val = this._clamp(val, 0, this._maxVirtualStart);
-    if (this.grid) {
-      val -= val % this._itemsPerRow;
-    }
     this._virtualStartVal = val;
   },
 
@@ -210,9 +185,6 @@ export const ironList = {
     if (val < 0) {
       val = this._physicalCount + val;
     }
-    if (this.grid) {
-      val -= val % this._itemsPerRow;
-    }
     this._physicalStartVal = val;
   },
 
@@ -264,11 +236,7 @@ export const ironList = {
           physicalOffset += this._getPhysicalSizeIncrement(pidx);
 
           if (physicalOffset > this._scrollPosition) {
-            return this.grid ? vidx - (vidx % this._itemsPerRow) : vidx;
-          }
-          // Handle a partially rendered final row in grid mode
-          if (this.grid && this._virtualCount - 1 === vidx) {
-            return vidx - (vidx % this._itemsPerRow);
+            return vidx;
           }
         }) || 0;
       this._firstVisibleIndexVal = idx;
@@ -284,38 +252,19 @@ export const ironList = {
   get lastVisibleIndex() {
     let idx = this._lastVisibleIndexVal;
     if (idx == null) {
-      if (this.grid) {
-        idx = Math.min(this._virtualCount, this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1);
-      } else {
-        let physicalOffset = this._physicalTop + this._scrollOffset;
-        this._iterateItems((pidx, vidx) => {
-          if (physicalOffset < this._scrollBottom) {
-            idx = vidx;
-          }
-          physicalOffset += this._getPhysicalSizeIncrement(pidx);
-        });
-      }
+      let physicalOffset = this._physicalTop + this._scrollOffset;
+      this._iterateItems((pidx, vidx) => {
+        if (physicalOffset < this._scrollBottom) {
+          idx = vidx;
+        }
+        physicalOffset += this._getPhysicalSizeIncrement(pidx);
+      });
+
       this._lastVisibleIndexVal = idx;
     }
     return idx;
   },
 
-  get _defaultScrollTarget() {
-    return this;
-  },
-
-  get _virtualRowCount() {
-    return Math.ceil(this._virtualCount / this._itemsPerRow);
-  },
-
-  get _estRowsInView() {
-    return Math.ceil(this._viewportHeight / this._rowHeight);
-  },
-
-  get _physicalRows() {
-    return Math.ceil(this._physicalCount / this._itemsPerRow);
-  },
-
   get _scrollOffset() {
     return this._scrollerPaddingTop + this.scrollOffset;
   },
@@ -335,7 +284,7 @@ export const ironList = {
     // Random access.
     if (Math.abs(delta) > this._physicalSize && this._physicalSize > 0) {
       delta -= this._scrollOffset;
-      const idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
+      const idxAdjustment = Math.round(delta / this._physicalAverage);
       this._virtualStart += idxAdjustment;
       this._physicalStart += idxAdjustment;
       // Estimate new physical offset based on the virtual start index.
@@ -344,10 +293,7 @@ export const ironList = {
       // more than the scroll position however, since that would result in
       // the physical items not covering the viewport, and leading to
       // _increasePoolIfNeeded to run away creating items to try to fill it.
-      this._physicalTop = Math.min(
-        Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage,
-        this._scrollPosition,
-      );
+      this._physicalTop = Math.min(Math.floor(this._virtualStart) * this._physicalAverage, this._scrollPosition);
       this._update();
     } else if (this._physicalCount > 0) {
       const reusables = this._getReusables(isScrollingDown);
@@ -371,7 +317,7 @@ export const ironList = {
    * @param {boolean} fromTop If the potential reusable items are above the scrolling region.
    */
   _getReusables(fromTop) {
-    let ith, lastIth, offsetContent, physicalItemHeight;
+    let ith, offsetContent, physicalItemHeight;
     const idxs = [];
     const protectedOffsetContent = this._hiddenContentSize * this._ratio;
     const virtualStart = this._virtualStart;
@@ -385,12 +331,9 @@ export const ironList = {
 
     if (fromTop) {
       ith = this._physicalStart;
-      lastIth = this._physicalEnd;
       offsetContent = scrollTop - top;
     } else {
       ith = this._physicalEnd;
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      lastIth = this._physicalStart;
       offsetContent = bottom - scrollBottom;
     }
     // eslint-disable-next-line no-constant-condition
@@ -438,7 +381,6 @@ export const ironList = {
     if ((itemSet && itemSet.length === 0) || this._physicalCount === 0) {
       return;
     }
-    this._manageFocus();
     this._assignModels(itemSet);
     this._updateMetrics(itemSet);
     // Adjust offset after measuring.
@@ -464,19 +406,11 @@ export const ironList = {
    * Increases the pool size.
    */
   _increasePoolIfNeeded(count) {
-    let nextPhysicalCount = this._clamp(
+    const nextPhysicalCount = this._clamp(
       this._physicalCount + count,
       DEFAULT_PHYSICAL_COUNT,
       this._virtualCount - this._virtualStart,
     );
-    nextPhysicalCount = this._convertIndexToCompleteRow(nextPhysicalCount);
-    if (this.grid) {
-      const correction = nextPhysicalCount % this._itemsPerRow;
-      if (correction && nextPhysicalCount - correction <= this._physicalCount) {
-        nextPhysicalCount += this._itemsPerRow;
-      }
-      nextPhysicalCount -= correction;
-    }
     const delta = nextPhysicalCount - this._physicalCount;
     let nextIncrease = Math.round(this._physicalCount * 0.5);
 
@@ -508,8 +442,6 @@ export const ironList = {
       this._templateCost = (window.performance.now() - ts) / delta;
       nextIncrease = Math.round(this._physicalCount * 0.5);
     }
-    // The upper bounds is not fixed when dealing with a grid that doesn't
-    // fill it's last row with the exact number of items per row.
     if (this._virtualEnd >= this._virtualCount - 1 || nextIncrease === 0) {
       // Do nothing.
     } else if (!this._isClientFull()) {
@@ -547,17 +479,6 @@ export const ironList = {
     }
   },
 
-  _gridChanged(newGrid, oldGrid) {
-    if (typeof oldGrid === 'undefined') {
-      return;
-    }
-    this.notifyResize();
-    flush();
-    if (newGrid) {
-      this._updateGridMetrics();
-    }
-  },
-
   /**
    * Called when the items have changed. That is, reassignments
    * to `items`, splices or updates to a single item.
@@ -577,32 +498,7 @@ export const ironList = {
       if (this._scrollTop > this._scrollOffset) {
         this._resetScrollPosition(0);
       }
-      this._removeFocusedItem();
       this._debounce('_render', this._render, animationFrame);
-    } else if (change.path === 'items.splices') {
-      this._adjustVirtualIndex(change.value.indexSplices);
-      this._virtualCount = this.items ? this.items.length : 0;
-      // Only blur if at least one item is added or removed.
-      const itemAddedOrRemoved = change.value.indexSplices.some((splice) => {
-        return splice.addedCount > 0 || splice.removed.length > 0;
-      });
-      if (itemAddedOrRemoved) {
-        // Only blur activeElement if it is a descendant of the list (#505,
-        // #507).
-        const activeElement = this._getActiveElement();
-        if (this.contains(activeElement)) {
-          activeElement.blur();
-        }
-      }
-      // Render only if the affected index is rendered.
-      const affectedIndexRendered = change.value.indexSplices.some((splice) => {
-        return splice.index + splice.addedCount >= this._virtualStart && splice.index <= this._virtualEnd;
-      });
-      if (!this._isClientFull() || affectedIndexRendered) {
-        this._debounce('_render', this._render, animationFrame);
-      }
-    } else if (change.path !== 'items.length') {
-      this._forwardItemPath(change.path, change.value);
     }
   },
 
@@ -677,17 +573,8 @@ export const ironList = {
       this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
     }, itemSet);
 
-    if (this.grid) {
-      this._updateGridMetrics();
-      this._physicalSize = Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
-    } else {
-      oldPhysicalSize =
-        this._itemsPerRow === 1
-          ? oldPhysicalSize
-          : Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
-      this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
-      this._itemsPerRow = 1;
-    }
+    this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
+
     // Update the average if it measured something.
     if (this._physicalAverageCount !== prevAvgCount) {
       this._physicalAverage = Math.round(
@@ -696,12 +583,6 @@ export const ironList = {
     }
   },
 
-  _updateGridMetrics() {
-    this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].getBoundingClientRect().width : 200;
-    this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetHeight : 200;
-    this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / this._itemWidth) : this._itemsPerRow;
-  },
-
   /**
    * Updates the position of the physical items.
    */
@@ -710,59 +591,14 @@ export const ironList = {
 
     let y = this._physicalTop;
 
-    if (this.grid) {
-      const totalItemWidth = this._itemsPerRow * this._itemWidth;
-      const rowOffset = (this._viewportWidth - totalItemWidth) / 2;
-
-      this._iterateItems((pidx, vidx) => {
-        const modulus = vidx % this._itemsPerRow;
-        let x = Math.floor(modulus * this._itemWidth + rowOffset);
-        if (this._isRTL) {
-          x *= -1;
-        }
-        this.translate3d(`${x}px`, `${y}px`, 0, this._physicalItems[pidx]);
-        if (this._shouldRenderNextRow(vidx)) {
-          y += this._rowHeight;
-        }
-      });
-    } else {
-      const order = [];
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      this._iterateItems((pidx, vidx) => {
-        const item = this._physicalItems[pidx];
-        this.translate3d(0, `${y}px`, 0, item);
-        y += this._physicalSizes[pidx];
-        const itemId = item.id;
-        if (itemId) {
-          order.push(itemId);
-        }
-      });
-      if (order.length) {
-        this.setAttribute('aria-owns', order.join(' '));
-      }
-    }
+    this._iterateItems((pidx) => {
+      this.translate3d(0, `${y}px`, 0, this._physicalItems[pidx]);
+      y += this._physicalSizes[pidx];
+    });
   },
 
   _getPhysicalSizeIncrement(pidx) {
-    if (!this.grid) {
-      return this._physicalSizes[pidx];
-    }
-    if (this._computeVidx(pidx) % this._itemsPerRow !== this._itemsPerRow - 1) {
-      return 0;
-    }
-    return this._rowHeight;
-  },
-
-  /**
-   * Returns, based on the current index,
-   * whether or not the next index will need
-   * to be rendered on a new row.
-   *
-   * @param {number} vidx Virtual index
-   * @return {boolean}
-   */
-  _shouldRenderNextRow(vidx) {
-    return vidx % this._itemsPerRow === this._itemsPerRow - 1;
+    return this._physicalSizes[pidx];
   },
 
   /**
@@ -799,16 +635,12 @@ export const ironList = {
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
   _updateScrollerSize(forceUpdate) {
-    if (this.grid) {
-      this._estScrollHeight = this._virtualRowCount * this._rowHeight;
-    } else {
-      this._estScrollHeight =
-        this._physicalBottom +
-        Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
-    }
+    this._estScrollHeight =
+      this._physicalBottom +
+      Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
+
     forceUpdate = forceUpdate || this._scrollHeight === 0;
     forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
-    forceUpdate = forceUpdate || (this.grid && this.$.items.style.height < this._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`;
@@ -835,13 +667,12 @@ export const ironList = {
     idx = this._clamp(idx, 0, this._virtualCount - 1);
     // Update the virtual start only when needed.
     if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
-      this._virtualStart = this.grid ? idx - this._itemsPerRow * 2 : idx - 1;
+      this._virtualStart = idx - 1;
     }
-    this._manageFocus();
     this._assignModels();
     this._updateMetrics();
     // Estimate new physical offset.
-    this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage;
+    this._physicalTop = this._virtualStart * this._physicalAverage;
 
     let currentTopItem = this._physicalStart;
     let currentVirtualItem = this._virtualStart;
@@ -896,49 +727,10 @@ export const ironList = {
     );
   },
 
-  /**
-   * Updates the size of a given list item.
-   *
-   * @method updateSizeForItem
-   * @param {Object} item The item instance.
-   */
-  updateSizeForItem(item) {
-    return this.updateSizeForIndex(this.items.indexOf(item));
-  },
-
-  /**
-   * Updates the size of the item at the given index in the items array.
-   *
-   * @method updateSizeForIndex
-   * @param {number} index The index of the item in the items array.
-   */
-  updateSizeForIndex(index) {
-    if (!this._isIndexRendered(index)) {
-      return null;
-    }
-    this._updateMetrics([this._getPhysicalIndex(index)]);
-    this._positionItems();
-    return null;
-  },
-
-  /**
-   * Converts a random index to the index of the item that completes it's row.
-   * Allows for better order and fill computation when grid == true.
-   */
-  _convertIndexToCompleteRow(idx) {
-    // When grid == false _itemPerRow can be unset.
-    this._itemsPerRow = this._itemsPerRow || 1;
-    return this.grid ? Math.ceil(idx / this._itemsPerRow) * this._itemsPerRow : idx;
-  },
-
   _isIndexRendered(idx) {
     return idx >= this._virtualStart && idx <= this._virtualEnd;
   },
 
-  _isIndexVisible(idx) {
-    return idx >= this.firstVisibleIndex && idx <= this.lastVisibleIndex;
-  },
-
   _getPhysicalIndex(vidx) {
     return (this._physicalStart + (vidx - this._virtualStart)) % this._physicalCount;
   },

package/src/keyboard-mixin.d.ts

@@ -14,7 +14,20 @@ export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base:
 
 export declare class KeyboardMixinClass {
   /**
-   * A handler for the `keydown` event. By default, it does nothing.
+   * A handler for the "Enter" key. By default, it does nothing.
+   * Override the method to implement your own behavior.
+   */
+  protected _onEnter(event: KeyboardEvent): void;
+
+  /**
+   * A handler for the "Escape" key. By default, it does nothing.
+   * Override the method to implement your own behavior.
+   */
+  protected _onEscape(event: KeyboardEvent): void;
+
+  /**
+   * A handler for the `keydown` event. By default, it calls
+   * separate methods for handling "Enter" and "Escape" keys.
    * Override the method to implement your own behavior.
    */
   protected _onKeyDown(event: KeyboardEvent): void;

package/src/keyboard-mixin.js

@@ -29,14 +29,24 @@ export const KeyboardMixin = dedupingMixin(
       }
 
       /**
-       * A handler for the `keydown` event. By default, it does nothing.
+       * A handler for the `keydown` event. By default, it calls
+       * separate methods for handling "Enter" and "Escape" keys.
        * Override the method to implement your own behavior.
        *
-       * @param {KeyboardEvent} _event
+       * @param {KeyboardEvent} event
        * @protected
        */
-      _onKeyDown(_event) {
-        // To be implemented.
+      _onKeyDown(event) {
+        switch (event.key) {
+          case 'Enter':
+            this._onEnter(event);
+            break;
+          case 'Escape':
+            this._onEscape(event);
+            break;
+          default:
+            break;
+        }
       }
 
       /**
@@ -49,5 +59,27 @@ export const KeyboardMixin = dedupingMixin(
       _onKeyUp(_event) {
         // To be implemented.
       }
+
+      /**
+       * A handler for the "Enter" key. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
+       */
+      _onEnter(_event) {
+        // To be implemented.
+      }
+
+      /**
+       * A handler for the "Escape" key. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
+       */
+      _onEscape(_event) {
+        // To be implemented.
+      }
     },
 );

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

@@ -9,15 +9,6 @@ import { ReactiveController } from 'lit';
  * A controller for listening on media query changes.
  */
 export class MediaQueryController implements ReactiveController {
-  /**
-   * @param {HTMLElement} host
-   */
-  constructor(query: string, callback: (matches: boolean) => void);
-
-  hostConnected(): void;
-
-  hostDisconnected(): void;
-
   /**
    * The CSS media query to evaluate.
    */
@@ -27,4 +18,13 @@ export class MediaQueryController implements ReactiveController {
    * Function to call when media query changes.
    */
   protected callback: (matches: boolean) => void;
+
+  /**
+   * @param {HTMLElement} host
+   */
+  constructor(query: string, callback: (matches: boolean) => void);
+
+  hostConnected(): void;
+
+  hostDisconnected(): void;
 }

package/src/resize-mixin.d.ts

@@ -11,15 +11,15 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ResizeMixinClass>;
 
 export declare class ResizeMixinClass {
-  /**
-   * A handler invoked on host resize. By default, it does nothing.
-   * Override the method to implement your own behavior.
-   */
-  protected _onResize(contentRect: DOMRect): void;
-
   /**
    * When true, the parent element resize will be also observed.
    * Override this getter and return `true` to enable this.
    */
   protected readonly _observeParent: boolean;
+
+  /**
+   * A handler invoked on host resize. By default, it does nothing.
+   * Override the method to implement your own behavior.
+   */
+  protected _onResize(contentRect: DOMRect): void;
 }

package/src/slot-controller.d.ts

@@ -6,15 +6,6 @@
 import { ReactiveController } from 'lit';
 
 export class SlotController extends EventTarget implements ReactiveController {
-  constructor(
-    host: HTMLElement,
-    slotName: string,
-    slotFactory?: () => HTMLElement,
-    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
-  );
-
-  hostConnected(): void;
-
   /**
    * The controller host element.
    */
@@ -25,17 +16,26 @@ export class SlotController extends EventTarget implements ReactiveController {
    */
   node: HTMLElement;
 
-  /**
-   * Return a reference to the node managed by the controller.
-   */
-  getSlotChild(): Node;
-
   protected initialized: boolean;
 
   protected defaultNode: Node;
 
   protected defaultId: string;
 
+  constructor(
+    host: HTMLElement,
+    slotName: string,
+    slotFactory?: () => HTMLElement,
+    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
+  );
+
+  hostConnected(): void;
+
+  /**
+   * Return a reference to the node managed by the controller.
+   */
+  getSlotChild(): Node;
+
   protected attachDefaultNode(): Node | undefined;
 
   protected initNode(node: Node): void;

package/src/slot-controller.js

@@ -10,16 +10,6 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
  * A controller for providing content to slot element and observing changes.
  */
 export class SlotController extends EventTarget {
-  constructor(host, slotName, slotFactory, slotInitializer) {
-    super();
-
-    this.host = host;
-    this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
-    this.defaultId = SlotController.generateId(slotName, host);
-  }
-
   /**
    * Ensure that every instance has unique ID.
    *
@@ -40,6 +30,16 @@ export class SlotController extends EventTarget {
     return `${prefix}-${host.localName}-${this[field]}`;
   }
 
+  constructor(host, slotName, slotFactory, slotInitializer) {
+    super();
+
+    this.host = host;
+    this.slotName = slotName;
+    this.slotFactory = slotFactory;
+    this.slotInitializer = slotInitializer;
+    this.defaultId = SlotController.generateId(slotName, host);
+  }
+
   hostConnected() {
     if (!this.initialized) {
       let node = this.getSlotChild();

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

@@ -26,6 +26,11 @@ export class IronListAdapter {
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
+    // Placeholder height (used for sizing elements that have intrinsic 0 height after update)
+    this.__placeholderHeight = 200;
+    // A queue of 10 previous element heights
+    this.__elementHeightQueue = Array(10);
+
     this.timeouts = {
       SCROLL_REORDER: 500,
       IGNORE_WHEEL: 500,
@@ -60,10 +65,6 @@ export class IronListAdapter {
     }
   }
 
-  _manageFocus() {}
-
-  _removeFocusedItem() {}
-
   get scrollOffset() {
     return 0;
   }
@@ -135,9 +136,9 @@ export class IronListAdapter {
   }
 
   __updateElement(el, index, forceSameIndexUpdates) {
-    // Clean up temporary min height
-    if (el.style.minHeight) {
-      el.style.minHeight = '';
+    // Clean up temporary placeholder sizing
+    if (el.style.paddingTop) {
+      el.style.paddingTop = '';
     }
 
     if (!this.__preventElementUpdates && (el.__lastUpdatedIndex !== index || forceSameIndexUpdates)) {
@@ -145,12 +146,22 @@ export class IronListAdapter {
       el.__lastUpdatedIndex = index;
     }
 
-    if (el.offsetHeight === 0) {
+    const elementHeight = el.offsetHeight;
+    if (elementHeight === 0) {
       // If the elements have 0 height after update (for example due to lazy rendering),
       // it results in iron-list requesting to create an unlimited count of elements.
-      // Assign a temporary min height to elements that would otherwise end up having
+      // Assign a temporary placeholder sizing to elements that would otherwise end up having
       // no height.
-      el.style.minHeight = '200px';
+      el.style.paddingTop = `${this.__placeholderHeight}px`;
+    } else {
+      // Add element height to the queue
+      this.__elementHeightQueue.push(elementHeight);
+      this.__elementHeightQueue.shift();
+
+      // Calcualte new placeholder height based on the average of the defined values in the
+      // element height queue
+      const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
+      this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
     }
   }
 
@@ -301,16 +312,28 @@ export class IronListAdapter {
 
   _scrollHandler() {
     this._adjustVirtualIndexOffset(this._scrollTop - (this.__previousScrollTop || 0));
+    const delta = this.scrollTarget.scrollTop - this._scrollPosition;
 
     super._scrollHandler();
 
     if (this._physicalCount !== 0) {
-      // After running super._scrollHandler, fix _virtualStart to workaround an iron-list issue.
-      // See https://github.com/vaadin/web-components/issues/1691
-      const reusables = this._getReusables(true);
-      this._physicalTop = reusables.physicalTop;
-      this._virtualStart += reusables.indexes.length;
-      this._physicalStart += reusables.indexes.length;
+      const isScrollingDown = delta >= 0;
+      const reusables = this._getReusables(!isScrollingDown);
+
+      if (reusables.indexes.length) {
+        // After running super._scrollHandler, fix internal properties to workaround an iron-list issue.
+        // See https://github.com/vaadin/web-components/issues/1691
+        this._physicalTop = reusables.physicalTop;
+
+        if (isScrollingDown) {
+          this._virtualStart -= reusables.indexes.length;
+          this._physicalStart -= reusables.indexes.length;
+        } else {
+          this._virtualStart += reusables.indexes.length;
+          this._physicalStart += reusables.indexes.length;
+        }
+        this._resizeHandler();
+      }
     }
 
     if (this.reorderElements) {