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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.4"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/active-mixin.d.ts

@@ -17,7 +17,7 @@ import { KeyboardMixinClass } from './keyboard-mixin.js';
  * by the pointer or by releasing the activation key.
  */
 export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
 
 export declare class ActiveMixinClass {

package/src/async.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+export interface AsyncInterface {
+  run: (fn: Function, delay?: number) => number;
+  cancel: (handle: number) => void;
+}
+
+/**
+ * Not defined in the TypeScript DOM library.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/IdleDeadline
+ */
+export interface IdleDeadline {
+  didTimeout: boolean;
+  timeRemaining(): number;
+}
+
+/**
+ * Async interface wrapper around `setTimeout`.
+ */
+declare namespace timeOut {
+  /**
+   * Returns a sub-module with the async interface providing the provided
+   * delay.
+   *
+   * @returns An async timeout interface
+   */
+  function after(delay?: number): AsyncInterface;
+
+  /**
+   * Enqueues a function called in the next task.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(fn: Function, delay?: number): number;
+
+  /**
+   * Cancels a previously enqueued `timeOut` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { timeOut };
+
+/**
+ * Async interface wrapper around `requestAnimationFrame`.
+ */
+declare namespace animationFrame {
+  /**
+   * Enqueues a function called at `requestAnimationFrame` timing.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(fn: (p0: number) => void): number;
+
+  /**
+   * Cancels a previously enqueued `animationFrame` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { animationFrame };
+
+/**
+ * Async interface wrapper around `requestIdleCallback`. Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
+ */
+declare namespace idlePeriod {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(fn: (p0: IdleDeadline) => void): number;
+
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { idlePeriod };
+
+/**
+ * Async interface for enqueuing callbacks that run at microtask timing.
+ *
+ * Note that microtask timing is achieved via a single `MutationObserver`,
+ * and thus callbacks enqueued with this API will all run in a single
+ * batch, and not interleaved with other microtasks such as promises.
+ * Promises are avoided as an implementation choice for the time being
+ * due to Safari bugs that cause Promises to lack microtask guarantees.
+ */
+declare namespace microTask {
+  /**
+   * Enqueues a function called at microtask timing.
+   *
+   * @returns Handle used for canceling task
+   */
+  function run(callback?: Function): number;
+
+  /**
+   * Cancels a previously enqueued `microTask` callback.
+   */
+  function cancel(handle: number): void;
+}
+
+export { microTask };

package/src/async.js

@@ -70,7 +70,7 @@ const timeOut = {
       },
       cancel(handle) {
         window.clearTimeout(handle);
-      }
+      },
     };
   },
   /**
@@ -93,7 +93,7 @@ const timeOut = {
    */
   cancel(handle) {
     window.clearTimeout(handle);
-  }
+  },
 };
 export { timeOut };
 
@@ -123,7 +123,7 @@ const animationFrame = {
    */
   cancel(handle) {
     window.cancelAnimationFrame(handle);
-  }
+  },
 };
 export { animationFrame };
 
@@ -153,8 +153,12 @@ const idlePeriod = {
    * @return {void}
    */
   cancel(handle) {
-    window.cancelIdleCallback ? window.cancelIdleCallback(handle) : window.clearTimeout(handle);
-  }
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
+    }
+  },
 };
 export { idlePeriod };
 
@@ -202,10 +206,10 @@ const microTask = {
     const idx = handle - microtaskLastHandle;
     if (idx >= 0) {
       if (!microtaskCallbacks[idx]) {
-        throw new Error('invalid async handle: ' + handle);
+        throw new Error(`invalid async handle: ${handle}`);
       }
       microtaskCallbacks[idx] = null;
     }
-  }
+  },
 };
 export { microTask };

package/src/controller-mixin.d.ts

@@ -10,7 +10,7 @@ import { ReactiveController, ReactiveControllerHost } from 'lit';
  * A mixin for connecting controllers to the element.
  */
 export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
-  superclass: T
+  superclass: T,
 ): T & Constructor<ControllerMixinClass>;
 
 export declare class ControllerMixinClass

package/src/controller-mixin.js

@@ -27,7 +27,9 @@ export const ControllerMixin = dedupingMixin(
         super.connectedCallback();
 
         this.__controllers.forEach((c) => {
-          c.hostConnected && c.hostConnected();
+          if (c.hostConnected) {
+            c.hostConnected();
+          }
         });
       }
 
@@ -36,7 +38,9 @@ export const ControllerMixin = dedupingMixin(
         super.disconnectedCallback();
 
         this.__controllers.forEach((c) => {
-          c.hostDisconnected && c.hostDisconnected();
+          if (c.hostDisconnected) {
+            c.hostDisconnected();
+          }
         });
       }
 
@@ -63,5 +67,5 @@ export const ControllerMixin = dedupingMixin(
       removeController(controller) {
         this.__controllers.delete(controller);
       }
-    }
+    },
 );

package/src/debounce.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+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
+   * 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 object.
+   * @param asyncModule Object with Async interface
+   * @param callback Callback to run.
+   * @returns Returns a debouncer object.
+   */
+  static debounce(debouncer: Debouncer | null, asyncModule: AsyncInterface, callback: () => any): Debouncer;
+
+  /**
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param asyncModule Object with Async interface.
+   * @param callback Callback to run.
+   */
+  setConfig(asyncModule: AsyncInterface, callback: () => any): void;
+
+  /**
+   * Cancels an active debouncer and returns a reference to itself.
+   */
+  cancel(): void;
+
+  /**
+   * Cancels a debouncer's async callback.
+   */
+  _cancelAsync(): void;
+
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   */
+  flush(): void;
+
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @returns True if active.
+   */
+  isActive(): boolean;
+}
+
+/**
+ * Adds a `Debouncer` to a list of globally flushable tasks.
+ */
+export declare function enqueueDebouncer(debouncer: Debouncer): void;
+
+/**
+ * Flushes any enqueued debouncers.
+ *
+ * @returns Returns whether any debouncers were flushed
+ */
+export declare function flushDebouncers(): boolean;
+
+/**
+ * Forces debouncers added via `enqueueDebouncer` to flush.
+ *
+ * @return {void}
+ */
+export declare function flush(): void;

package/src/dir-helper.d.ts

@@ -35,7 +35,7 @@ declare class DirHelper {
     scrollType: string,
     direction: string,
     element: Element | null,
-    scrollLeft: number
+    scrollLeft: number,
   ): void;
 }
 

package/src/dir-mixin.js

@@ -48,8 +48,16 @@ export const DirMixin = (superClass) =>
         dir: {
           type: String,
           value: '',
-          reflectToAttribute: true
-        }
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
+          },
+        },
       };
     }
 
@@ -127,9 +135,11 @@ export const DirMixin = (superClass) =>
     /** @private */
     __subscribe(push = true) {
       if (push) {
-        directionSubscribers.indexOf(this) === -1 && directionSubscribers.push(this);
-      } else {
-        directionSubscribers.indexOf(this) > -1 && directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
+        if (!directionSubscribers.includes(this)) {
+          directionSubscribers.push(this);
+        }
+      } else if (directionSubscribers.includes(this)) {
+        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
       }
     }
 

package/src/disabled-mixin.js

@@ -22,8 +22,8 @@ export const DisabledMixin = dedupingMixin(
             type: Boolean,
             value: false,
             observer: '_disabledChanged',
-            reflectToAttribute: true
-          }
+            reflectToAttribute: true,
+          },
         };
       }
 
@@ -58,5 +58,5 @@ export const DisabledMixin = dedupingMixin(
           super.click();
         }
       }
-    }
+    },
 );

package/src/element-mixin.d.ts

@@ -12,7 +12,7 @@ import { DirMixinClass } from './dir-mixin.js';
  * A mixin providing common logic for Vaadin components.
  */
 export declare function ElementMixin<T extends Constructor<HTMLElement>>(
-  superclass: T
+  superclass: T,
 ): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
 
 export declare class ElementMixinClass {

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-alpha1';
+      return '23.1.0-alpha4';
     }
 
     /** @protected */
@@ -67,7 +67,7 @@ export const ElementMixin = (superClass) =>
 
       if (document.doctype === null) {
         console.warn(
-          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.'
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
         );
       }
     }

package/src/focus-mixin.js

@@ -16,7 +16,7 @@ window.addEventListener(
   () => {
     keyboardActive = true;
   },
-  { capture: true }
+  { capture: true },
 );
 
 window.addEventListener(
@@ -24,7 +24,7 @@ window.addEventListener(
   () => {
     keyboardActive = false;
   },
-  { capture: true }
+  { capture: true },
 );
 
 /**
@@ -110,5 +110,5 @@ export const FocusMixin = dedupingMixin(
       _shouldRemoveFocus(_event) {
         return true;
       }
-    }
+    },
 );

package/src/gestures.js

@@ -65,7 +65,7 @@ let supportsPassive = false;
       // eslint-disable-next-line getter-return
       get() {
         supportsPassive = true;
-      }
+      },
     });
     window.addEventListener('test', null, opts);
     window.removeEventListener('test', null, opts);
@@ -103,7 +103,7 @@ const canBeDisabled = {
   optgroup: true,
   option: true,
   select: true,
-  textarea: true
+  textarea: true,
 };
 
 /**
@@ -161,14 +161,14 @@ function isSyntheticClick(ev) {
 const POINTERSTATE = {
   mouse: {
     target: null,
-    mouseIgnoreJob: null
+    mouseIgnoreJob: null,
   },
   touch: {
     x: 0,
     y: 0,
     id: -1,
-    scrollDecided: false
-  }
+    scrollDecided: false,
+  },
 };
 
 function firstTouchAction(ev) {
@@ -555,13 +555,13 @@ register({
   deps: ['mousedown', 'touchstart', 'touchend'],
   flow: {
     start: ['mousedown', 'touchstart'],
-    end: ['mouseup', 'touchend']
+    end: ['mouseup', 'touchend'],
   },
   emits: ['down', 'up'],
 
   info: {
     movefn: null,
-    upfn: null
+    upfn: null,
   },
 
   /**
@@ -616,7 +616,7 @@ register({
    */
   touchend: function (e) {
     downupFire('up', _findOriginalTarget(e), e.changedTouches[0], e);
-  }
+  },
 });
 
 /**
@@ -637,7 +637,7 @@ function downupFire(type, target, event, preventer) {
     preventer: preventer,
     prevent: function (e) {
       return prevent(e);
-    }
+    },
   });
 }
 
@@ -647,7 +647,7 @@ register({
   deps: ['mousedown', 'touchstart', 'touchmove', 'touchend'],
   flow: {
     start: ['mousedown', 'touchstart'],
-    end: ['mouseup', 'touchend']
+    end: ['mouseup', 'touchend'],
   },
   emits: ['track'],
 
@@ -666,7 +666,7 @@ register({
     },
     movefn: null,
     upfn: null,
-    prevent: false
+    prevent: false,
   },
 
   /**
@@ -779,7 +779,7 @@ register({
       this.info.addMove({ x: ct.clientX, y: ct.clientY });
       trackFire(this.info, t, ct);
     }
-  }
+  },
 });
 
 /**
@@ -831,7 +831,7 @@ function trackFire(info, target, touch) {
     sourceEvent: touch,
     hover: function () {
       return deepTargetFind(touch.clientX, touch.clientY);
-    }
+    },
   });
 }
 
@@ -840,13 +840,13 @@ register({
   deps: ['mousedown', 'click', 'touchstart', 'touchend'],
   flow: {
     start: ['mousedown', 'touchstart'],
-    end: ['click', 'touchend']
+    end: ['click', 'touchend'],
   },
   emits: ['tap'],
   info: {
     x: NaN,
     y: NaN,
-    prevent: false
+    prevent: false,
   },
 
   /**
@@ -900,7 +900,7 @@ register({
    */
   touchend: function (e) {
     trackForward(this.info, e.changedTouches[0], e);
-  }
+  },
 });
 
 /**
@@ -925,7 +925,7 @@ function trackForward(info, e, preventer) {
         x: e.clientX,
         y: e.clientY,
         sourceEvent: e,
-        preventer: preventer
+        preventer: preventer,
       });
     }
   }

package/src/iron-list-core.js

@@ -346,7 +346,7 @@ export const ironList = {
       // _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._scrollPosition,
       );
       this._update();
     } else if (this._physicalCount > 0) {
@@ -454,7 +454,7 @@ export const ironList = {
 
   _isClientFull: function () {
     return (
-      this._scrollBottom != 0 &&
+      this._scrollBottom !== 0 &&
       this._physicalBottom - 1 >= this._scrollBottom &&
       this._physicalTop <= this._scrollPosition
     );
@@ -467,7 +467,7 @@ export const ironList = {
     var nextPhysicalCount = this._clamp(
       this._physicalCount + count,
       DEFAULT_PHYSICAL_COUNT,
-      this._virtualCount - this._virtualStart
+      this._virtualCount - this._virtualStart,
     );
     nextPhysicalCount = this._convertIndexToCompleteRow(nextPhysicalCount);
     if (this.grid) {
@@ -520,7 +520,7 @@ export const ironList = {
       this._debounce(
         '_increasePoolIfNeeded',
         this._increasePoolIfNeeded.bind(this, this._clamp(Math.round(50 / this._templateCost), 1, nextIncrease)),
-        idlePeriod
+        idlePeriod,
       );
     }
   },
@@ -553,7 +553,9 @@ export const ironList = {
     }
     this.notifyResize();
     flush();
-    newGrid && this._updateGridMetrics();
+    if (newGrid) {
+      this._updateGridMetrics();
+    }
   },
 
   /**
@@ -581,7 +583,7 @@ 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(function (splice) {
+      var itemAddedOrRemoved = change.value.indexSplices.some((splice) => {
         return splice.addedCount > 0 || splice.removed.length > 0;
       });
       if (itemAddedOrRemoved) {
@@ -593,9 +595,9 @@ export const ironList = {
         }
       }
       // Render only if the affected index is rendered.
-      var affectedIndexRendered = change.value.indexSplices.some(function (splice) {
+      var affectedIndexRendered = change.value.indexSplices.some((splice) => {
         return splice.index + splice.addedCount >= this._virtualStart && splice.index <= this._virtualEnd;
-      }, this);
+      });
       if (!this._isClientFull() || affectedIndexRendered) {
         this._debounce('_render', this._render, animationFrame);
       }
@@ -689,7 +691,7 @@ export const ironList = {
     // Update the average if it measured something.
     if (this._physicalAverageCount !== prevAvgCount) {
       this._physicalAverage = Math.round(
-        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount
+        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
       );
     }
   },
@@ -718,7 +720,7 @@ export const ironList = {
         if (this._isRTL) {
           x *= -1;
         }
-        this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
+        this.translate3d(`${x}px`, `${y}px`, 0, this._physicalItems[pidx]);
         if (this._shouldRenderNextRow(vidx)) {
           y += this._rowHeight;
         }
@@ -728,7 +730,7 @@ export const ironList = {
       // 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);
+        this.translate3d(0, `${y}px`, 0, item);
         y += this._physicalSizes[pidx];
         const itemId = item.id;
         if (itemId) {
@@ -809,7 +811,7 @@ export const ironList = {
     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';
+      this.$.items.style.height = `${this._estScrollHeight}px`;
       this._scrollHeight = this._estScrollHeight;
     }
   },
@@ -890,7 +892,7 @@ export const ironList = {
           this.toggleScrollListener(false);
         }
       },
-      animationFrame
+      animationFrame,
     );
   },
 
@@ -949,5 +951,5 @@ export const ironList = {
     this._debouncers = this._debouncers || {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
-  }
+  },
 };

package/src/keyboard-mixin.js

@@ -49,5 +49,5 @@ export const KeyboardMixin = dedupingMixin(
       _onKeyUp(_event) {
         // To be implemented.
       }
-    }
+    },
 );

package/src/polylit-mixin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): T & Constructor<PolylitMixinClass>;
+
+export declare class PolylitMixinClass {
+  ready(): void;
+
+  /**
+   * Reads a value from a path.
+   */
+  protected _get(root: Object, path: String): any;
+
+  /**
+   * Sets a value to a path.
+   */
+  protected _set(root: Object, path: String, value: any): void;
+}

package/src/polylit-mixin.js

@@ -0,0 +1,266 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 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;
+
+function camelToDash(camel) {
+  return caseMap[camel] || (caseMap[camel] = camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase());
+}
+
+function upper(name) {
+  return name[0].toUpperCase() + name.substring(1);
+}
+
+function parseObserver(observerString) {
+  const [method, rest] = observerString.split('(');
+  const observerProps = rest
+    .replace(')', '')
+    .split(',')
+    .map((prop) => prop.trim());
+
+  return {
+    method,
+    observerProps,
+  };
+}
+
+function getOrCreateMap(obj, name) {
+  if (!Object.prototype.hasOwnProperty.call(obj, name)) {
+    // clone any existing entries (superclasses)
+    obj[name] = new Map(obj[name]);
+  }
+  return obj[name];
+}
+
+const PolylitMixinImplementation = (superclass) => {
+  class PolylitMixinClass extends superclass {
+    static createProperty(name, options) {
+      if ([String, Boolean, Number, Array].includes(options)) {
+        options = {
+          type: options,
+        };
+      }
+
+      if (options.reflectToAttribute) {
+        options.reflect = true;
+      }
+
+      super.createProperty(name, options);
+    }
+
+    static getOrCreateMap(name) {
+      return getOrCreateMap(this, name);
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    static finalize() {
+      super.finalize();
+
+      if (Array.isArray(this.observers)) {
+        const complexObservers = this.getOrCreateMap('__complexObservers');
+
+        this.observers.forEach((observer) => {
+          const { method, observerProps } = parseObserver(observer);
+          complexObservers.set(method, observerProps);
+        });
+      }
+    }
+
+    static addCheckedInitializer(initializer) {
+      super.addInitializer((instance) => {
+        // Prevent initializer from affecting superclass
+        if (instance instanceof this) {
+          initializer(instance);
+        }
+      });
+    }
+
+    static getPropertyDescriptor(name, key, options) {
+      const defaultDescriptor = super.getPropertyDescriptor(name, key, options);
+
+      let result = defaultDescriptor;
+
+      if ('value' in options) {
+        // Set the default value
+        this.addCheckedInitializer((instance) => {
+          if (typeof options.value === 'function') {
+            instance[name] = options.value.call(instance);
+          } else {
+            instance[name] = options.value;
+          }
+        });
+      }
+
+      if (options.readOnly) {
+        const setter = defaultDescriptor.set;
+
+        this.addCheckedInitializer((instance) => {
+          // This is run during construction of the element
+          instance[`_set${upper(name)}`] = function (value) {
+            setter.call(instance, value);
+          };
+        });
+
+        result = {
+          get: defaultDescriptor.get,
+          set() {
+            // Do nothing, property is read-only.
+          },
+          configurable: true,
+          enumerable: true,
+        };
+      }
+
+      if (options.observer) {
+        const method = options.observer;
+
+        // set this method
+        this.getOrCreateMap('__observers').set(name, method);
+
+        this.addCheckedInitializer((instance) => {
+          if (!instance[method]) {
+            console.warn(`observer method ${method} not defined`);
+          }
+        });
+      }
+
+      if (options.notify) {
+        if (!this.__notifyProps) {
+          this.__notifyProps = new Set();
+          // eslint-disable-next-line no-prototype-builtins
+        } else if (!this.hasOwnProperty('__notifyProps')) {
+          // clone any existing observers (superclasses)
+          const notifyProps = this.__notifyProps;
+          this.__notifyProps = new Set(notifyProps);
+        }
+
+        // set this method
+        this.__notifyProps.add(name);
+      }
+
+      if (options.computed) {
+        const assignComputedMethod = `__assignComputed${name}`;
+        const observer = parseObserver(options.computed);
+        this.prototype[assignComputedMethod] = function (...props) {
+          this[name] = this[observer.method](...props);
+        };
+
+        this.getOrCreateMap('__complexObservers').set(assignComputedMethod, observer.observerProps);
+      }
+
+      if (!options.attribute) {
+        options.attribute = camelToDash(name);
+      }
+
+      return result;
+    }
+
+    /** @protected */
+    ready() {
+      if (super.ready) {
+        super.ready();
+      }
+      this.$ = this.$ || {};
+      this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
+        this.$[node.id] = node;
+      });
+    }
+
+    /** @protected */
+    firstUpdated() {
+      super.firstUpdated();
+
+      this.ready();
+    }
+
+    /** @protected */
+    updated(props) {
+      if (this.constructor.__observers) {
+        this.__runObservers(props, this.constructor.__observers);
+      }
+
+      if (this.constructor.__complexObservers) {
+        this.__runComplexObservers(props, this.constructor.__complexObservers);
+      }
+
+      if (this.__dynamicObservers) {
+        this.__runComplexObservers(props, this.__dynamicObservers);
+      }
+
+      if (this.constructor.__notifyProps) {
+        this.__runNotifyProps(props, this.constructor.__notifyProps);
+      }
+    }
+
+    /** @protected */
+    _createMethodObserver(observer) {
+      const dynamicObservers = getOrCreateMap(this, '__dynamicObservers');
+      const { method, observerProps } = parseObserver(observer);
+      dynamicObservers.set(method, observerProps);
+    }
+
+    /** @private */
+    __runComplexObservers(props, observers) {
+      observers.forEach((observerProps, method) => {
+        if (observerProps.some((prop) => props.has(prop))) {
+          if (!this[method]) {
+            console.warn(`observer method ${method} not defined`);
+          } else {
+            this[method](...observerProps.map((prop) => this[prop]));
+          }
+        }
+      });
+    }
+
+    /** @private */
+    __runObservers(props, observers) {
+      props.forEach((v, k) => {
+        const observer = observers.get(k);
+        if (observer !== undefined && this[observer]) {
+          this[observer](this[k], v);
+        }
+      });
+    }
+
+    /** @private */
+    __runNotifyProps(props, notifyProps) {
+      props.forEach((_, k) => {
+        if (notifyProps.has(k)) {
+          this.dispatchEvent(
+            new CustomEvent(`${camelToDash(k)}-changed`, {
+              detail: {
+                value: this[k],
+              },
+            }),
+          );
+        }
+      });
+    }
+
+    /** @protected */
+    _get(path, object) {
+      return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), object);
+    }
+
+    /** @protected */
+    _set(path, value, object) {
+      const pathParts = path.split('.');
+      const lastPart = pathParts.pop();
+      const target = pathParts.reduce((target, part) => target[part], object);
+      target[lastPart] = value;
+    }
+  }
+
+  return PolylitMixinClass;
+};
+
+export const PolylitMixin = dedupeMixin(PolylitMixinImplementation);

package/src/resize-mixin.js

@@ -49,8 +49,8 @@ export const ResizeMixin = dedupingMixin(
        */
       notifyResize() {
         console.warn(
-          `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`
+          `WARNING: Since Vaadin 23, notifyResize() is deprecated. The component uses a ResizeObserver internally and doesn't need to be explicitly notified of resizes.`,
         );
       }
-    }
+    },
 );

package/src/slot-controller.d.ts

@@ -10,7 +10,7 @@ export class SlotController extends EventTarget implements ReactiveController {
     host: HTMLElement,
     slotName: string,
     slotFactory?: () => HTMLElement,
-    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void
+    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
   );
 
   hostConnected(): void;

package/src/slot-mixin.js

@@ -56,5 +56,5 @@ export const SlotMixin = dedupingMixin(
           );
         });
       }
-    }
+    },
 );

package/src/tabindex-mixin.d.ts

@@ -9,13 +9,11 @@ import { DisabledMixinClass } from './disabled-mixin.js';
 /**
  * A mixin to toggle the `tabindex` attribute.
  *
- * By default, the attribute is set to 0 that makes the element focusable.
- *
  * The attribute is set to -1 whenever the user disables the element
  * and restored with the last known value once the element is enabled.
  */
 export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
 
 export declare class TabindexMixinClass {
@@ -24,6 +22,11 @@ export declare class TabindexMixinClass {
    */
   tabindex: number | undefined | null;
 
+  /**
+   * Stores the last known tabindex since the element has been disabled.
+   */
+  protected _lastTabIndex: number | undefined | null;
+
   /**
    * When the user has changed tabindex while the element is disabled,
    * the observer reverts tabindex to -1 and rather saves the new tabindex value to apply it later.

package/src/tabindex-mixin.js

@@ -8,8 +8,6 @@ import { DisabledMixin } from './disabled-mixin.js';
 /**
  * A mixin to toggle the `tabindex` attribute.
  *
- * By default, the attribute is set to 0 that makes the element focusable.
- *
  * The attribute is set to -1 whenever the user disables the element
  * and restored with the last known value once the element is enabled.
  *
@@ -22,24 +20,23 @@ export const TabindexMixin = (superclass) =>
       return {
         /**
          * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         *
          * @protected
          */
         tabindex: {
           type: Number,
-          value: 0,
           reflectToAttribute: true,
-          observer: '_tabindexChanged'
+          observer: '_tabindexChanged',
         },
 
         /**
          * Stores the last known tabindex since the element has been disabled.
          *
-         * @private
+         * @protected
          */
-        __lastTabIndex: {
+        _lastTabIndex: {
           type: Number,
-          value: 0
-        }
+        },
       };
     }
 
@@ -57,11 +54,11 @@ export const TabindexMixin = (superclass) =>
 
       if (disabled) {
         if (this.tabindex !== undefined) {
-          this.__lastTabIndex = this.tabindex;
+          this._lastTabIndex = this.tabindex;
         }
         this.tabindex = -1;
       } else if (oldDisabled) {
-        this.tabindex = this.__lastTabIndex;
+        this.tabindex = this._lastTabIndex;
       }
     }
 
@@ -74,7 +71,7 @@ export const TabindexMixin = (superclass) =>
      */
     _tabindexChanged(tabindex) {
       if (this.disabled && tabindex !== -1) {
-        this.__lastTabIndex = tabindex;
+        this._lastTabIndex = tabindex;
         this.tabindex = -1;
       }
     }

package/src/templates.js

@@ -18,7 +18,7 @@ export function processTemplates(component) {
 
   if (component.querySelector('template')) {
     console.warn(
-      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/polymer-legacy-adapter/template-renderer.js to enable compatibility.`
+      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/polymer-legacy-adapter/template-renderer.js to enable compatibility.`,
     );
   }
 }

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

@@ -28,7 +28,7 @@ export class IronListAdapter {
 
     this.timeouts = {
       SCROLL_REORDER: 500,
-      IGNORE_WHEEL: 500
+      IGNORE_WHEEL: 500,
     };
 
     this.__resizeObserver = new ResizeObserver(() => this._resizeHandler());
@@ -118,8 +118,12 @@ export class IronListAdapter {
     this._resizeHandler();
     flush();
     this._scrollHandler();
-    this.__scrollReorderDebouncer && this.__scrollReorderDebouncer.flush();
-    this.__debouncerWheelAnimationFrame && this.__debouncerWheelAnimationFrame.flush();
+    if (this.__scrollReorderDebouncer) {
+      this.__scrollReorderDebouncer.flush();
+    }
+    if (this.__debouncerWheelAnimationFrame) {
+      this.__debouncerWheelAnimationFrame.flush();
+    }
   }
 
   update(startIndex = 0, endIndex = this.size - 1) {
@@ -183,7 +187,7 @@ export class IronListAdapter {
     flush();
 
     this._itemsChanged({
-      path: 'items'
+      path: 'items',
     });
     flush();
 
@@ -221,7 +225,7 @@ export class IronListAdapter {
   /** @private */
   get items() {
     return {
-      length: Math.min(this.size, MAX_VIRTUAL_COUNT)
+      length: Math.min(this.size, MAX_VIRTUAL_COUNT),
     };
   }
 
@@ -233,7 +237,7 @@ export class IronListAdapter {
   /** @private */
   get $() {
     return {
-      items: this.scrollContainer
+      items: this.scrollContainer,
     };
   }
 
@@ -245,7 +249,9 @@ export class IronListAdapter {
     this._viewportWidth = this.elementsContainer.offsetWidth;
     this._viewportHeight = this.scrollTarget.offsetHeight;
     this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
-    this.grid && this._updateGridMetrics();
+    if (this.grid) {
+      this._updateGridMetrics();
+    }
   }
 
   /** @private */
@@ -302,7 +308,7 @@ export class IronListAdapter {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,
         timeOut.after(this.timeouts.SCROLL_REORDER),
-        () => this.__reorderElements()
+        () => this.__reorderElements(),
       );
     }
 
@@ -340,7 +346,7 @@ export class IronListAdapter {
     this.__debouncerWheelAnimationFrame = Debouncer.debounce(
       this.__debouncerWheelAnimationFrame,
       animationFrame,
-      () => (this._wheelAnimationFrame = false)
+      () => (this._wheelAnimationFrame = false),
     );
 
     const momentum = Math.abs(e.deltaX) + Math.abs(deltaY);
@@ -356,7 +362,7 @@ export class IronListAdapter {
       this._debouncerIgnoreNewWheel = Debouncer.debounce(
         this._debouncerIgnoreNewWheel,
         timeOut.after(this.timeouts.IGNORE_WHEEL),
-        () => (this._ignoreNewWheel = false)
+        () => (this._ignoreNewWheel = false),
       );
     } else if ((this._hasResidualMomentum && momentum <= this._previousMomentum) || this._ignoreNewWheel) {
       e.preventDefault();
@@ -427,7 +433,7 @@ export class IronListAdapter {
     const elementWithFocus = visibleElements.find(
       (element) =>
         element.contains(this.elementsContainer.getRootNode().activeElement) ||
-        element.contains(this.scrollTarget.getRootNode().activeElement)
+        element.contains(this.scrollTarget.getRootNode().activeElement),
     );
     const targetElement = elementWithFocus || visibleElements[0];
     if (!targetElement) {