@vaadin/component-base 23.1.0-alpha4 → 23.1.0-beta3

package/custom_typings/vaadin.d.ts

@@ -1,11 +1,11 @@
 interface Vaadin {
   developmentModeCallback?: {
-    'usage-statistics'?: () => void;
-    'vaadin-license-checker'?: () => void;
+    'usage-statistics'?(): void;
+    'vaadin-license-checker'?(): void;
   };
   registrations?: Array<{ is: string; version: string }>;
   usageStatsChecker?: {
-    maybeGatherAndSend: () => void;
+    maybeGatherAndSend(): void;
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.1.0-alpha4",
+  "version": "23.1.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
+  "gitHead": "c787ceb8a312f88631c6d429ff320d5f89b1b838"
 }

package/src/async.d.ts

@@ -9,8 +9,8 @@
  */
 
 export interface AsyncInterface {
-  run: (fn: Function, delay?: number) => number;
-  cancel: (handle: number) => void;
+  run(fn: Function, delay?: number): number;
+  cancel(handle: number): void;
 }
 
 /**

package/src/browser-utils.js

@@ -16,7 +16,7 @@ export const isChrome = testUserAgent(/Chrome/) && testVendor(/Google Inc/);
 
 export const isFirefox = testUserAgent(/Firefox/);
 
-// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
 export const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
 
 export const isIPhone = testPlatform(/^iPhone/);

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-alpha4';
+      return '23.1.0-beta3';
     }
 
     /** @protected */

package/src/focus-mixin.js

@@ -68,7 +68,7 @@ export const FocusMixin = dedupingMixin(
       disconnectedCallback() {
         super.disconnectedCallback();
 
-        // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
+        // In non-Chrome browsers, blur does not fire on the element when it is disconnected.
         // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
         if (this.hasAttribute('focused')) {
           this._setFocused(false);
@@ -84,7 +84,7 @@ export const FocusMixin = dedupingMixin(
       _setFocused(focused) {
         this.toggleAttribute('focused', focused);
 
-        // focus-ring is true when the element was focused from the keyboard.
+        // Focus-ring is true when the element was focused from the keyboard.
         // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
         this.toggleAttribute('focus-ring', focused && this._keyboardActive);
       }

package/src/gestures.d.ts

@@ -65,12 +65,12 @@ export { prevent };
 declare function prevent(evName: string): void;
 
 export interface GestureRecognizer {
-  reset: () => void;
-  mousedown?: (e: MouseEvent) => void;
-  mousemove?: (e: MouseEvent) => void;
-  mouseup?: (e: MouseEvent) => void;
-  touchstart?: (e: TouchEvent) => void;
-  touchmove?: (e: TouchEvent) => void;
-  touchend?: (e: TouchEvent) => void;
-  click?: (e: MouseEvent) => void;
+  reset(): void;
+  mousedown?(e: MouseEvent): void;
+  mousemove?(e: MouseEvent): void;
+  mouseup?(e: MouseEvent): void;
+  touchstart?(e: TouchEvent): void;
+  touchmove?(e: TouchEvent): void;
+  touchend?(e: TouchEvent): void;
+  click?(e: MouseEvent): void;
 }

package/src/gestures.js

@@ -26,19 +26,19 @@ import { microTask } from './async.js';
 const passiveTouchGestures = false;
 const wrap = (node) => node;
 
-// detect native touch action support
+// Detect native touch action support
 const HAS_NATIVE_TA = typeof document.head.style.touchAction === 'string';
 const GESTURE_KEY = '__polymerGestures';
 const HANDLED_OBJ = '__polymerGesturesHandled';
 const TOUCH_ACTION = '__polymerGesturesTouchAction';
-// radius for tap and track
+// Radius for tap and track
 const TAP_DISTANCE = 25;
 const TRACK_DISTANCE = 5;
-// number of last N track positions to keep
+// Number of last N track positions to keep
 const TRACK_LENGTH = 2;
 
 const MOUSE_EVENTS = ['mousedown', 'mousemove', 'mouseup', 'click'];
-// an array of bitmask values for mapping MouseEvent.which to MouseEvent.buttons
+// An array of bitmask values for mapping MouseEvent.which to MouseEvent.buttons
 const MOUSE_WHICH_TO_BUTTONS = [0, 1, 4, 2];
 const MOUSE_HAS_BUTTONS = (function () {
   try {
@@ -112,47 +112,47 @@ const canBeDisabled = {
  */
 function hasLeftMouseButton(ev) {
   const type = ev.type;
-  // exit early if the event is not a mouse event
+  // Exit early if the event is not a mouse event
   if (!isMouseEvent(type)) {
     return false;
   }
-  // ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
+  // Ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
   // instead we use ev.buttons (bitmask of buttons) or fall back to ev.which (deprecated, 0 for no buttons, 1 for left button)
   if (type === 'mousemove') {
-    // allow undefined for testing events
+    // Allow undefined for testing events
     let buttons = ev.buttons === undefined ? 1 : ev.buttons;
     if (ev instanceof window.MouseEvent && !MOUSE_HAS_BUTTONS) {
       buttons = MOUSE_WHICH_TO_BUTTONS[ev.which] || 0;
     }
-    // buttons is a bitmask, check that the left button bit is set (1)
+    // Buttons is a bitmask, check that the left button bit is set (1)
     return Boolean(buttons & 1);
   }
-  // allow undefined for testing events
+  // Allow undefined for testing events
   const button = ev.button === undefined ? 0 : ev.button;
-  // ev.button is 0 in mousedown/mouseup/click for left button activation
+  // Ev.button is 0 in mousedown/mouseup/click for left button activation
   return button === 0;
 }
 
 function isSyntheticClick(ev) {
   if (ev.type === 'click') {
-    // ev.detail is 0 for HTMLElement.click in most browsers
+    // Ev.detail is 0 for HTMLElement.click in most browsers
     if (ev.detail === 0) {
       return true;
     }
-    // in the worst case, check that the x/y position of the click is within
+    // In the worst case, check that the x/y position of the click is within
     // the bounding box of the target of the event
     // Thanks IE 10 >:(
     const t = _findOriginalTarget(ev);
-    // make sure the target of the event is an element so we can use getBoundingClientRect,
+    // Make sure the target of the event is an element so we can use getBoundingClientRect,
     // if not, just assume it is a synthetic click
     if (!t.nodeType || /** @type {Element} */ (t).nodeType !== Node.ELEMENT_NODE) {
       return true;
     }
     const bcr = /** @type {Element} */ (t).getBoundingClientRect();
-    // use page x/y to account for scrolling
+    // Use page x/y to account for scrolling
     const x = ev.pageX,
       y = ev.pageY;
-    // ev is a synthetic click if the position is outside the bounding box of the target
+    // Ev is a synthetic click if the position is outside the bounding box of the target
     return !(x >= bcr.left && x <= bcr.right && y >= bcr.top && y <= bcr.bottom);
   }
   return false;
@@ -228,14 +228,14 @@ export const recognizers = [];
 export function deepTargetFind(x, y) {
   let node = document.elementFromPoint(x, y);
   let next = node;
-  // this code path is only taken when native ShadowDOM is used
+  // This code path is only taken when native ShadowDOM is used
   // if there is a shadowroot, it may have a node at x/y
   // if there is not a shadowroot, exit the loop
   while (next && next.shadowRoot && !window.ShadyDOM) {
-    // if there is a node at x/y in the shadowroot, look deeper
+    // If there is a node at x/y in the shadowroot, look deeper
     const oldNext = next;
     next = next.shadowRoot.elementFromPoint(x, y);
-    // on Safari, elementFromPoint may return the shadowRoot host
+    // On Safari, elementFromPoint may return the shadowRoot host
     if (oldNext === next) {
       break;
     }
@@ -247,7 +247,7 @@ export function deepTargetFind(x, y) {
 }
 
 /**
- * a cheaper check than ev.composedPath()[0];
+ * A cheaper check than ev.composedPath()[0];
  *
  * @private
  * @param {Event|Touch} ev Event.
@@ -278,10 +278,9 @@ function _handleNative(ev) {
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
     if (type.slice(0, 5) === 'touch') {
-      // ev = /** @type {TouchEvent} */ (ev); // eslint-disable-line no-self-assign
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
-        // only handle the first finger
+        // Only handle the first finger
         if (ev.touches.length === 1) {
           POINTERSTATE.touch.id = t.identifier;
         }
@@ -297,11 +296,11 @@ function _handleNative(ev) {
     }
   }
   const handled = ev[HANDLED_OBJ];
-  // used to ignore synthetic mouse events
+  // Used to ignore synthetic mouse events
   if (handled.skip) {
     return;
   }
-  // reset recognizer state
+  // Reset recognizer state
   for (let i = 0, r; i < recognizers.length; i++) {
     r = recognizers[i];
     if (gs[r.name] && !handled[r.name]) {
@@ -310,7 +309,7 @@ function _handleNative(ev) {
       }
     }
   }
-  // enforce gesture recognizer order
+  // Enforce gesture recognizer order
   for (let i = 0, r; i < recognizers.length; i++) {
     r = recognizers[i];
     if (gs[r.name] && !handled[r.name]) {
@@ -342,7 +341,7 @@ function _handleTouchAction(ev) {
     const dx = Math.abs(POINTERSTATE.touch.x - t.clientX);
     const dy = Math.abs(POINTERSTATE.touch.y - t.clientY);
     if (!ev.cancelable) {
-      // scrolling is happening
+      // Scrolling is happening
     } else if (ta === 'none') {
       shouldPrevent = true;
     } else if (ta === 'pan-x') {
@@ -392,7 +391,7 @@ export function removeListener(node, evType, handler) {
 }
 
 /**
- * automate the event listeners for the native events
+ * Automate the event listeners for the native events
  *
  * @private
  * @param {!EventTarget} node Node on which to add the event.
@@ -410,7 +409,7 @@ function _add(node, evType, handler) {
   }
   for (let i = 0, dep, gd; i < deps.length; i++) {
     dep = deps[i];
-    // don't add mouse handlers on iOS because they cause gray selection overlays
+    // Don't add mouse handlers on iOS because they cause gray selection overlays
     if (IS_TOUCH_ONLY && isMouseEvent(dep) && dep !== 'click') {
       continue;
     }
@@ -431,7 +430,7 @@ function _add(node, evType, handler) {
 }
 
 /**
- * automate event listener removal for native events
+ * Automate event listener removal for native events
  *
  * @private
  * @param {!EventTarget} node Node on which to remove the event.
@@ -528,7 +527,7 @@ function _fire(target, type, detail) {
   const ev = new Event(type, { bubbles: true, cancelable: true, composed: true });
   ev.detail = detail;
   wrap(/** @type {!Node} */ (target)).dispatchEvent(ev);
-  // forward `preventDefault` in a clean way
+  // Forward `preventDefault` in a clean way
   if (ev.defaultPrevented) {
     const preventer = detail.preventer || detail.sourceEvent;
     if (preventer && preventer.preventDefault) {
@@ -568,7 +567,7 @@ register({
    * @this {GestureRecognizer}
    * @return {void}
    */
-  reset: function () {
+  reset() {
     untrackDocument(this.info);
   },
 
@@ -577,7 +576,7 @@ register({
    * @param {MouseEvent} e
    * @return {void}
    */
-  mousedown: function (e) {
+  mousedown(e) {
     if (!hasLeftMouseButton(e)) {
       return;
     }
@@ -605,7 +604,7 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchstart: function (e) {
+  touchstart(e) {
     downupFire('down', _findOriginalTarget(e), e.changedTouches[0], e);
   },
 
@@ -614,7 +613,7 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchend: function (e) {
+  touchend(e) {
     downupFire('up', _findOriginalTarget(e), e.changedTouches[0], e);
   },
 });
@@ -634,8 +633,8 @@ function downupFire(type, target, event, preventer) {
     x: event.clientX,
     y: event.clientY,
     sourceEvent: event,
-    preventer: preventer,
-    prevent: function (e) {
+    preventer,
+    prevent(e) {
       return prevent(e);
     },
   });
@@ -658,7 +657,7 @@ register({
     started: false,
     moves: [],
     /** @this {GestureInfo} */
-    addMove: function (move) {
+    addMove(move) {
       if (this.moves.length > TRACK_LENGTH) {
         this.moves.shift();
       }
@@ -673,7 +672,7 @@ register({
    * @this {GestureRecognizer}
    * @return {void}
    */
-  reset: function () {
+  reset() {
     this.info.state = 'start';
     this.info.started = false;
     this.info.moves = [];
@@ -688,7 +687,7 @@ register({
    * @param {MouseEvent} e
    * @return {void}
    */
-  mousedown: function (e) {
+  mousedown(e) {
     if (!hasLeftMouseButton(e)) {
       return;
     }
@@ -699,15 +698,15 @@ register({
       const x = e.clientX,
         y = e.clientY;
       if (trackHasMovedEnough(self.info, x, y)) {
-        // first move is 'start', subsequent moves are 'move', mouseup is 'end'
+        // First move is 'start', subsequent moves are 'move', mouseup is 'end'
         self.info.state = self.info.started ? (e.type === 'mouseup' ? 'end' : 'track') : 'start';
         if (self.info.state === 'start') {
-          // if and only if tracking, always prevent tap
+          // If and only if tracking, always prevent tap
           prevent('tap');
         }
-        self.info.addMove({ x: x, y: y });
+        self.info.addMove({ x, y });
         if (!hasLeftMouseButton(e)) {
-          // always fire "end"
+          // Always fire "end"
           self.info.state = 'end';
           untrackDocument(self.info);
         }
@@ -722,10 +721,10 @@ register({
         movefn(e);
       }
 
-      // remove the temporary listeners
+      // Remove the temporary listeners
       untrackDocument(self.info);
     };
-    // add temporary document listeners as mouse retargets
+    // Add temporary document listeners as mouse retargets
     trackDocument(this.info, movefn, upfn);
     this.info.x = e.clientX;
     this.info.y = e.clientY;
@@ -736,7 +735,7 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchstart: function (e) {
+  touchstart(e) {
     const ct = e.changedTouches[0];
     this.info.x = ct.clientX;
     this.info.y = ct.clientY;
@@ -747,17 +746,17 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchmove: function (e) {
+  touchmove(e) {
     const t = _findOriginalTarget(e);
     const ct = e.changedTouches[0];
     const x = ct.clientX,
       y = ct.clientY;
     if (trackHasMovedEnough(this.info, x, y)) {
       if (this.info.state === 'start') {
-        // if and only if tracking, always prevent tap
+        // If and only if tracking, always prevent tap
         prevent('tap');
       }
-      this.info.addMove({ x: x, y: y });
+      this.info.addMove({ x, y });
       trackFire(this.info, t, ct);
       this.info.state = 'track';
       this.info.started = true;
@@ -769,12 +768,12 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchend: function (e) {
+  touchend(e) {
     const t = _findOriginalTarget(e);
     const ct = e.changedTouches[0];
-    // only trackend if track was started and not aborted
+    // Only trackend if track was started and not aborted
     if (this.info.started) {
-      // reset started state on up
+      // Reset started state on up
       this.info.state = 'end';
       this.info.addMove({ x: ct.clientX, y: ct.clientY });
       trackFire(this.info, t, ct);
@@ -824,12 +823,12 @@ function trackFire(info, target, touch) {
     state: info.state,
     x: touch.clientX,
     y: touch.clientY,
-    dx: dx,
-    dy: dy,
-    ddx: ddx,
-    ddy: ddy,
+    dx,
+    dy,
+    ddx,
+    ddy,
     sourceEvent: touch,
-    hover: function () {
+    hover() {
       return deepTargetFind(touch.clientX, touch.clientY);
     },
   });
@@ -853,7 +852,7 @@ register({
    * @this {GestureRecognizer}
    * @return {void}
    */
-  reset: function () {
+  reset() {
     this.info.x = NaN;
     this.info.y = NaN;
     this.info.prevent = false;
@@ -864,7 +863,7 @@ register({
    * @param {MouseEvent} e
    * @return {void}
    */
-  mousedown: function (e) {
+  mousedown(e) {
     if (hasLeftMouseButton(e)) {
       this.info.x = e.clientX;
       this.info.y = e.clientY;
@@ -876,7 +875,7 @@ register({
    * @param {MouseEvent} e
    * @return {void}
    */
-  click: function (e) {
+  click(e) {
     if (hasLeftMouseButton(e)) {
       trackForward(this.info, e);
     }
@@ -887,7 +886,7 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchstart: function (e) {
+  touchstart(e) {
     const touch = e.changedTouches[0];
     this.info.x = touch.clientX;
     this.info.y = touch.clientY;
@@ -898,7 +897,7 @@ register({
    * @param {TouchEvent} e
    * @return {void}
    */
-  touchend: function (e) {
+  touchend(e) {
     trackForward(this.info, e.changedTouches[0], e);
   },
 });
@@ -912,20 +911,20 @@ register({
 function trackForward(info, e, preventer) {
   const dx = Math.abs(e.clientX - info.x);
   const dy = Math.abs(e.clientY - info.y);
-  // find original target from `preventer` for TouchEvents, or `e` for MouseEvents
+  // Find original target from `preventer` for TouchEvents, or `e` for MouseEvents
   const t = _findOriginalTarget(preventer || e);
   if (!t || (canBeDisabled[/** @type {!HTMLElement} */ (t).localName] && t.hasAttribute('disabled'))) {
     return;
   }
-  // dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
+  // Dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
   if (isNaN(dx) || isNaN(dy) || (dx <= TAP_DISTANCE && dy <= TAP_DISTANCE) || isSyntheticClick(e)) {
-    // prevent taps from being generated if an event has canceled them
+    // Prevent taps from being generated if an event has canceled them
     if (!info.prevent) {
       _fire(t, 'tap', {
         x: e.clientX,
         y: e.clientY,
         sourceEvent: e,
-        preventer: preventer,
+        preventer,
       });
     }
   }

package/src/iron-list-core.js

@@ -166,7 +166,7 @@ export const ironList = {
    * The height of the physical content that isn't on the screen.
    */
   get _hiddenContentSize() {
-    var size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
+    const size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
     return size - this._viewportHeight;
   },
 
@@ -182,7 +182,7 @@ export const ironList = {
    * `_physicalStart`.
    */
   get _maxVirtualStart() {
-    var virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
+    const virtualCount = this._convertIndexToCompleteRow(this._virtualCount);
     return Math.max(0, virtualCount - this._physicalCount);
   },
 
@@ -255,9 +255,9 @@ export const ironList = {
    * @type {number}
    */
   get firstVisibleIndex() {
-    var idx = this._firstVisibleIndexVal;
+    let idx = this._firstVisibleIndexVal;
     if (idx == null) {
-      var physicalOffset = this._physicalTop + this._scrollOffset;
+      let physicalOffset = this._physicalTop + this._scrollOffset;
 
       idx =
         this._iterateItems((pidx, vidx) => {
@@ -282,12 +282,12 @@ export const ironList = {
    * @type {number}
    */
   get lastVisibleIndex() {
-    var idx = this._lastVisibleIndexVal;
+    let idx = this._lastVisibleIndexVal;
     if (idx == null) {
       if (this.grid) {
         idx = Math.min(this._virtualCount, this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1);
       } else {
-        var physicalOffset = this._physicalTop + this._scrollOffset;
+        let physicalOffset = this._physicalTop + this._scrollOffset;
         this._iterateItems((pidx, vidx) => {
           if (physicalOffset < this._scrollBottom) {
             idx = vidx;
@@ -323,10 +323,10 @@ export const ironList = {
   /**
    * Recycles the physical items when needed.
    */
-  _scrollHandler: function () {
-    var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
-    var delta = scrollTop - this._scrollPosition;
-    var isScrollingDown = delta >= 0;
+  _scrollHandler() {
+    const scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
+    let delta = scrollTop - this._scrollPosition;
+    const isScrollingDown = delta >= 0;
     // Track the current scroll position.
     this._scrollPosition = scrollTop;
     // Clear indexes for first and last visible indexes.
@@ -335,7 +335,7 @@ export const ironList = {
     // Random access.
     if (Math.abs(delta) > this._physicalSize && this._physicalSize > 0) {
       delta -= this._scrollOffset;
-      var idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
+      const idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
       this._virtualStart += idxAdjustment;
       this._physicalStart += idxAdjustment;
       // Estimate new physical offset based on the virtual start index.
@@ -350,7 +350,7 @@ export const ironList = {
       );
       this._update();
     } else if (this._physicalCount > 0) {
-      var reusables = this._getReusables(isScrollingDown);
+      const reusables = this._getReusables(isScrollingDown);
       if (isScrollingDown) {
         this._physicalTop = reusables.physicalTop;
         this._virtualStart += reusables.indexes.length;
@@ -370,18 +370,18 @@ export const ironList = {
    *
    * @param {boolean} fromTop If the potential reusable items are above the scrolling region.
    */
-  _getReusables: function (fromTop) {
-    var ith, lastIth, offsetContent, physicalItemHeight;
-    var idxs = [];
-    var protectedOffsetContent = this._hiddenContentSize * this._ratio;
-    var virtualStart = this._virtualStart;
-    var virtualEnd = this._virtualEnd;
-    var physicalCount = this._physicalCount;
-    var top = this._physicalTop + this._scrollOffset;
-    var bottom = this._physicalBottom + this._scrollOffset;
+  _getReusables(fromTop) {
+    let ith, lastIth, offsetContent, physicalItemHeight;
+    const idxs = [];
+    const protectedOffsetContent = this._hiddenContentSize * this._ratio;
+    const virtualStart = this._virtualStart;
+    const virtualEnd = this._virtualEnd;
+    const physicalCount = this._physicalCount;
+    let top = this._physicalTop + this._scrollOffset;
+    const bottom = this._physicalBottom + this._scrollOffset;
     // This may be called outside of a scrollHandler, so use last cached position
-    var scrollTop = this._scrollPosition;
-    var scrollBottom = this._scrollBottom;
+    const scrollTop = this._scrollPosition;
+    const scrollBottom = this._scrollBottom;
 
     if (fromTop) {
       ith = this._physicalStart;
@@ -434,7 +434,7 @@ export const ironList = {
    * @param {!Array<number>=} itemSet
    * @param {!Array<number>=} movingUp
    */
-  _update: function (itemSet, movingUp) {
+  _update(itemSet, movingUp) {
     if ((itemSet && itemSet.length === 0) || this._physicalCount === 0) {
       return;
     }
@@ -444,7 +444,7 @@ export const ironList = {
     // Adjust offset after measuring.
     if (movingUp) {
       while (movingUp.length) {
-        var idx = movingUp.pop();
+        const idx = movingUp.pop();
         this._physicalTop -= this._getPhysicalSizeIncrement(idx);
       }
     }
@@ -452,7 +452,7 @@ export const ironList = {
     this._updateScrollerSize();
   },
 
-  _isClientFull: function () {
+  _isClientFull() {
     return (
       this._scrollBottom !== 0 &&
       this._physicalBottom - 1 >= this._scrollBottom &&
@@ -463,33 +463,33 @@ export const ironList = {
   /**
    * Increases the pool size.
    */
-  _increasePoolIfNeeded: function (count) {
-    var nextPhysicalCount = this._clamp(
+  _increasePoolIfNeeded(count) {
+    let nextPhysicalCount = this._clamp(
       this._physicalCount + count,
       DEFAULT_PHYSICAL_COUNT,
       this._virtualCount - this._virtualStart,
     );
     nextPhysicalCount = this._convertIndexToCompleteRow(nextPhysicalCount);
     if (this.grid) {
-      var correction = nextPhysicalCount % this._itemsPerRow;
+      const correction = nextPhysicalCount % this._itemsPerRow;
       if (correction && nextPhysicalCount - correction <= this._physicalCount) {
         nextPhysicalCount += this._itemsPerRow;
       }
       nextPhysicalCount -= correction;
     }
-    var delta = nextPhysicalCount - this._physicalCount;
-    var nextIncrease = Math.round(this._physicalCount * 0.5);
+    const delta = nextPhysicalCount - this._physicalCount;
+    let nextIncrease = Math.round(this._physicalCount * 0.5);
 
     if (delta < 0) {
       return;
     }
     if (delta > 0) {
-      var ts = window.performance.now();
+      const ts = window.performance.now();
       // Concat arrays in place.
       [].push.apply(this._physicalItems, this._createPool(delta));
       // Push 0s into physicalSizes. Can't use Array.fill because IE11 doesn't
       // support it.
-      for (var i = 0; i < delta; i++) {
+      for (let i = 0; i < delta; i++) {
         this._physicalSizes.push(0);
       }
       this._physicalCount += delta;
@@ -528,12 +528,12 @@ export const ironList = {
   /**
    * Renders the a new list.
    */
-  _render: function () {
+  _render() {
     if (!this.isAttached || !this._isVisible) {
       return;
     }
     if (this._physicalCount !== 0) {
-      var reusables = this._getReusables(true);
+      const reusables = this._getReusables(true);
       this._physicalTop = reusables.physicalTop;
       this._virtualStart += reusables.indexes.length;
       this._physicalStart += reusables.indexes.length;
@@ -547,7 +547,7 @@ export const ironList = {
     }
   },
 
-  _gridChanged: function (newGrid, oldGrid) {
+  _gridChanged(newGrid, oldGrid) {
     if (typeof oldGrid === 'undefined') {
       return;
     }
@@ -562,7 +562,7 @@ export const ironList = {
    * Called when the items have changed. That is, reassignments
    * to `items`, splices or updates to a single item.
    */
-  _itemsChanged: function (change) {
+  _itemsChanged(change) {
     if (change.path === 'items') {
       this._virtualStart = 0;
       this._physicalTop = 0;
@@ -583,19 +583,19 @@ export const ironList = {
       this._adjustVirtualIndex(change.value.indexSplices);
       this._virtualCount = this.items ? this.items.length : 0;
       // Only blur if at least one item is added or removed.
-      var itemAddedOrRemoved = change.value.indexSplices.some((splice) => {
+      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).
-        var activeElement = this._getActiveElement();
+        const activeElement = this._getActiveElement();
         if (this.contains(activeElement)) {
           activeElement.blur();
         }
       }
       // Render only if the affected index is rendered.
-      var affectedIndexRendered = change.value.indexSplices.some((splice) => {
+      const affectedIndexRendered = change.value.indexSplices.some((splice) => {
         return splice.index + splice.addedCount >= this._virtualStart && splice.index <= this._virtualEnd;
       });
       if (!this._isClientFull() || affectedIndexRendered) {
@@ -614,8 +614,8 @@ export const ironList = {
    * @param {!function(number, number)} fn
    * @param {!Array<number>=} itemSet
    */
-  _iterateItems: function (fn, itemSet) {
-    var pidx, vidx, rtn, i;
+  _iterateItems(fn, itemSet) {
+    let pidx, vidx, rtn, i;
 
     if (arguments.length === 2 && itemSet) {
       for (i = 0; i < itemSet.length; i++) {
@@ -647,7 +647,7 @@ export const ironList = {
    * @param {number} pidx Physical index
    * @return {number}
    */
-  _computeVidx: function (pidx) {
+  _computeVidx(pidx) {
     if (pidx >= this._physicalStart) {
       return this._virtualStart + (pidx - this._physicalStart);
     }
@@ -659,15 +659,15 @@ export const ironList = {
    *
    * @param {!Array<number>=} itemSet
    */
-  _updateMetrics: function (itemSet) {
+  _updateMetrics(itemSet) {
     // Make sure we distributed all the physical items
     // so we can measure them.
     flush();
 
-    var newPhysicalSize = 0;
-    var oldPhysicalSize = 0;
-    var prevAvgCount = this._physicalAverageCount;
-    var prevPhysicalAvg = this._physicalAverage;
+    let newPhysicalSize = 0;
+    let oldPhysicalSize = 0;
+    const prevAvgCount = this._physicalAverageCount;
+    const prevPhysicalAvg = this._physicalAverage;
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     this._iterateItems((pidx, vidx) => {
@@ -696,7 +696,7 @@ export const ironList = {
     }
   },
 
-  _updateGridMetrics: function () {
+  _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;
@@ -705,18 +705,18 @@ export const ironList = {
   /**
    * Updates the position of the physical items.
    */
-  _positionItems: function () {
+  _positionItems() {
     this._adjustScrollPosition();
 
-    var y = this._physicalTop;
+    let y = this._physicalTop;
 
     if (this.grid) {
-      var totalItemWidth = this._itemsPerRow * this._itemWidth;
-      var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
+      const totalItemWidth = this._itemsPerRow * this._itemWidth;
+      const rowOffset = (this._viewportWidth - totalItemWidth) / 2;
 
       this._iterateItems((pidx, vidx) => {
-        var modulus = vidx % this._itemsPerRow;
-        var x = Math.floor(modulus * this._itemWidth + rowOffset);
+        const modulus = vidx % this._itemsPerRow;
+        let x = Math.floor(modulus * this._itemWidth + rowOffset);
         if (this._isRTL) {
           x *= -1;
         }
@@ -743,7 +743,7 @@ export const ironList = {
     }
   },
 
-  _getPhysicalSizeIncrement: function (pidx) {
+  _getPhysicalSizeIncrement(pidx) {
     if (!this.grid) {
       return this._physicalSizes[pidx];
     }
@@ -761,22 +761,22 @@ export const ironList = {
    * @param {number} vidx Virtual index
    * @return {boolean}
    */
-  _shouldRenderNextRow: function (vidx) {
+  _shouldRenderNextRow(vidx) {
     return vidx % this._itemsPerRow === this._itemsPerRow - 1;
   },
 
   /**
    * Adjusts the scroll position when it was overestimated.
    */
-  _adjustScrollPosition: function () {
-    var deltaHeight =
+  _adjustScrollPosition() {
+    const deltaHeight =
       this._virtualStart === 0 ? this._physicalTop : Math.min(this._scrollPosition + this._physicalTop, 0);
     // Note: the delta can be positive or negative.
     if (deltaHeight !== 0) {
       this._physicalTop -= deltaHeight;
       // This may be called outside of a scrollHandler, so use last cached position
-      var scrollTop = this._scrollPosition;
-      // juking scroll position during interial scrolling on iOS is no bueno
+      const scrollTop = this._scrollPosition;
+      // Juking scroll position during interial scrolling on iOS is no bueno
       if (!IOS_TOUCH_SCROLLING && scrollTop > 0) {
         this._resetScrollPosition(scrollTop - deltaHeight);
       }
@@ -786,7 +786,7 @@ export const ironList = {
   /**
    * Sets the position of the scroll.
    */
-  _resetScrollPosition: function (pos) {
+  _resetScrollPosition(pos) {
     if (this.scrollTarget && pos >= 0) {
       this._scrollTop = pos;
       this._scrollPosition = this._scrollTop;
@@ -798,7 +798,7 @@ export const ironList = {
    *
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
-  _updateScrollerSize: function (forceUpdate) {
+  _updateScrollerSize(forceUpdate) {
     if (this.grid) {
       this._estScrollHeight = this._virtualRowCount * this._rowHeight;
     } else {
@@ -823,7 +823,7 @@ export const ironList = {
    * @method scrollToIndex
    * @param {number} idx The index of the item
    */
-  scrollToIndex: function (idx) {
+  scrollToIndex(idx) {
     if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
       return;
     }
@@ -843,11 +843,11 @@ export const ironList = {
     // Estimate new physical offset.
     this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage;
 
-    var currentTopItem = this._physicalStart;
-    var currentVirtualItem = this._virtualStart;
-    var targetOffsetTop = 0;
-    var hiddenContentSize = this._hiddenContentSize;
-    // scroll to the item as much as we can.
+    let currentTopItem = this._physicalStart;
+    let currentVirtualItem = this._virtualStart;
+    let targetOffsetTop = 0;
+    const hiddenContentSize = this._hiddenContentSize;
+    // Scroll to the item as much as we can.
     while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
       targetOffsetTop += this._getPhysicalSizeIncrement(currentTopItem);
       currentTopItem = (currentTopItem + 1) % this._physicalCount;
@@ -857,7 +857,7 @@ export const ironList = {
     this._positionItems();
     this._resetScrollPosition(this._physicalTop + this._scrollOffset + targetOffsetTop);
     this._increasePoolIfNeeded(0);
-    // clear cached visible index.
+    // Clear cached visible index.
     this._firstVisibleIndexVal = null;
     this._lastVisibleIndexVal = null;
   },
@@ -865,7 +865,7 @@ export const ironList = {
   /**
    * Reset the physical average and the average count.
    */
-  _resetAverage: function () {
+  _resetAverage() {
     this._physicalAverage = 0;
     this._physicalAverageCount = 0;
   },
@@ -874,11 +874,11 @@ export const ironList = {
    * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
    * when the element is resized.
    */
-  _resizeHandler: function () {
+  _resizeHandler() {
     this._debounce(
       '_render',
       () => {
-        // clear cached visible index.
+        // Clear cached visible index.
         this._firstVisibleIndexVal = null;
         this._lastVisibleIndexVal = null;
         if (this._isVisible) {
@@ -902,7 +902,7 @@ export const ironList = {
    * @method updateSizeForItem
    * @param {Object} item The item instance.
    */
-  updateSizeForItem: function (item) {
+  updateSizeForItem(item) {
     return this.updateSizeForIndex(this.items.indexOf(item));
   },
 
@@ -912,7 +912,7 @@ export const ironList = {
    * @method updateSizeForIndex
    * @param {number} index The index of the item in the items array.
    */
-  updateSizeForIndex: function (index) {
+  updateSizeForIndex(index) {
     if (!this._isIndexRendered(index)) {
       return null;
     }
@@ -925,29 +925,29 @@ export const ironList = {
    * 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: function (idx) {
-    // when grid == false _itemPerRow can be unset.
+  _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: function (idx) {
+  _isIndexRendered(idx) {
     return idx >= this._virtualStart && idx <= this._virtualEnd;
   },
 
-  _isIndexVisible: function (idx) {
+  _isIndexVisible(idx) {
     return idx >= this.firstVisibleIndex && idx <= this.lastVisibleIndex;
   },
 
-  _getPhysicalIndex: function (vidx) {
+  _getPhysicalIndex(vidx) {
     return (this._physicalStart + (vidx - this._virtualStart)) % this._physicalCount;
   },
 
-  _clamp: function (v, min, max) {
+  _clamp(v, min, max) {
     return Math.min(max, Math.max(min, v));
   },
 
-  _debounce: function (name, cb, asyncModule) {
+  _debounce(name, cb, asyncModule) {
     this._debouncers = this._debouncers || {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);

package/src/polylit-mixin.js

@@ -32,7 +32,7 @@ function parseObserver(observerString) {
 
 function getOrCreateMap(obj, name) {
   if (!Object.prototype.hasOwnProperty.call(obj, name)) {
-    // clone any existing entries (superclasses)
+    // Clone any existing entries (superclasses)
     obj[name] = new Map(obj[name]);
   }
   return obj[name];
@@ -123,7 +123,7 @@ const PolylitMixinImplementation = (superclass) => {
       if (options.observer) {
         const method = options.observer;
 
-        // set this method
+        // Set this method
         this.getOrCreateMap('__observers').set(name, method);
 
         this.addCheckedInitializer((instance) => {
@@ -138,12 +138,12 @@ const PolylitMixinImplementation = (superclass) => {
           this.__notifyProps = new Set();
           // eslint-disable-next-line no-prototype-builtins
         } else if (!this.hasOwnProperty('__notifyProps')) {
-          // clone any existing observers (superclasses)
+          // Clone any existing observers (superclasses)
           const notifyProps = this.__notifyProps;
           this.__notifyProps = new Set(notifyProps);
         }
 
-        // set this method
+        // Set this method
         this.__notifyProps.add(name);
       }
 

package/src/resize-mixin.d.ts

@@ -16,4 +16,10 @@ export declare class ResizeMixinClass {
    * 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;
 }

package/src/resize-mixin.js

@@ -8,7 +8,14 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 const observer = new ResizeObserver((entries) => {
   setTimeout(() => {
     entries.forEach((entry) => {
-      entry.target._onResize(entry.contentRect);
+      // Notify child resizables, if any
+      if (entry.target.resizables) {
+        entry.target.resizables.forEach((resizable) => {
+          resizable._onResize(entry.contentRect);
+        });
+      } else {
+        entry.target._onResize(entry.contentRect);
+      }
     });
   });
 });
@@ -25,12 +32,49 @@ export const ResizeMixin = dedupingMixin(
       connectedCallback() {
         super.connectedCallback();
         observer.observe(this);
+
+        if (this._observeParent) {
+          const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
+
+          if (!parent.resizables) {
+            parent.resizables = new Set();
+            observer.observe(parent);
+          }
+
+          parent.resizables.add(this);
+          this.__parent = parent;
+        }
       }
 
       /** @protected */
       disconnectedCallback() {
         super.disconnectedCallback();
         observer.unobserve(this);
+
+        const parent = this.__parent;
+        if (this._observeParent && parent) {
+          const resizables = parent.resizables;
+
+          if (resizables) {
+            resizables.delete(this);
+
+            if (resizables.size === 0) {
+              observer.unobserve(parent);
+            }
+          }
+
+          this.__parent = null;
+        }
+      }
+
+      /**
+       * When true, the parent element resize will be also observed.
+       * Override this getter and return `true` to enable this.
+       *
+       * @protected
+       */
+      get _observeParent() {
+        return false;
       }
 
       /**

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

@@ -8,7 +8,7 @@ import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
 import { ironList } from './iron-list-core.js';
 
-// iron-list can by default handle sizes up to around 100000.
+// Iron-list can by default handle sizes up to around 100000.
 // When the size is larger than MAX_VIRTUAL_COUNT _vidxOffset is used
 const MAX_VIRTUAL_COUNT = 100000;
 const OFFSET_ADJUST_MIN_THRESHOLD = 1000;
@@ -172,8 +172,8 @@ export class IronListAdapter {
     this.__preventElementUpdates = true;
 
     // Record the scroll position before changing the size
-    let fvi; // first visible index
-    let fviOffsetBefore; // scroll offset of the first visible index
+    let fvi; // First visible index
+    let fviOffsetBefore; // Scroll offset of the first visible index
     if (size > 0) {
       fvi = this.adjustedFirstVisibleIndex;
       fviOffsetBefore = this.__getIndexScrollOffset(fvi);
@@ -304,6 +304,15 @@ export class IronListAdapter {
 
     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;
+    }
+
     if (this.reorderElements) {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,