@vaadin/component-base 23.2.0-dev.48e5e3967 → 23.2.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.2.0-dev.48e5e3967",
+  "version": "23.2.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "961bc4ae5b707c3c02f12b99819b3c12c9b478aa"
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

package/src/a11y-announcer.d.ts

@@ -7,4 +7,4 @@
 /**
  * Cause a text string to be announced by screen readers.
  */
-export function announce(text: string, options?: { mode?: 'polite' | 'assertive' | 'alert'; timeout?: number }): void;
+export function announce(text: string, options?: { mode?: 'alert' | 'assertive' | 'polite'; timeout?: number }): void;

package/src/active-mixin.d.ts

@@ -3,9 +3,9 @@
  * 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 { DisabledMixinClass } from './disabled-mixin.js';
-import { KeyboardMixinClass } from './keyboard-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from './disabled-mixin.js';
+import type { KeyboardMixinClass } from './keyboard-mixin.js';
 
 /**
  * A mixin to toggle the `active` attribute.
@@ -18,7 +18,7 @@ import { KeyboardMixinClass } from './keyboard-mixin.js';
  */
 export declare function ActiveMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass>;
+): Constructor<ActiveMixinClass> & Constructor<DisabledMixinClass> & Constructor<KeyboardMixinClass> & T;
 
 export declare class ActiveMixinClass {
   /**

package/src/active-mixin.js

@@ -79,21 +79,18 @@ export const ActiveMixin = (superclass) =>
 
       if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
         this._setActive(true);
-      }
-    }
-
-    /**
-     * Removes the `active` attribute from the element if the activation key is released.
-     *
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyUp(event) {
-      super._onKeyUp(event);
 
-      if (this._activeKeys.includes(event.key)) {
-        this._setActive(false);
+        // Element can become hidden before the `keyup` event, e.g. on button click.
+        // Use document listener to ensure `active` attribute is removed correctly.
+        document.addEventListener(
+          'keyup',
+          (e) => {
+            if (this._activeKeys.includes(e.key)) {
+              this._setActive(false);
+            }
+          },
+          { once: true },
+        );
       }
     }
 

package/src/controller-mixin.d.ts

@@ -3,15 +3,15 @@
  * 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 { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
 /**
  * A mixin for connecting controllers to the element.
  */
 export declare function ControllerMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<ControllerMixinClass>;
+): Constructor<ControllerMixinClass> & T;
 
 export declare class ControllerMixinClass
   implements Pick<ReactiveControllerHost, 'addController' | 'removeController'>

package/src/debounce.d.ts

@@ -7,7 +7,7 @@
  * 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';
+import type { AsyncInterface } from './async.js';
 
 export declare class Debouncer {
   /**

package/src/dir-mixin.d.ts

@@ -3,12 +3,12 @@
  * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
  */
-export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<DirMixinClass>;
+export declare function DirMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<DirMixinClass> & T;
 
 export declare class DirMixinClass {
   protected __getNormalizedScrollLeft(element: Element | null): number;

package/src/disabled-mixin.d.ts

@@ -3,7 +3,7 @@
  * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to provide disabled property for field components.

package/src/dom-utils.d.ts

@@ -12,3 +12,14 @@
  * and involves both the light DOM and ancestor shadow DOM trees.
  */
 export function getAncestorRootNodes(node: Node): Node[];
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ */
+export function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ */
+export function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;

package/src/dom-utils.js

@@ -39,3 +39,54 @@ export function getAncestorRootNodes(node) {
 
   return result;
 }
+
+/**
+ * @param {string} value
+ * @return {Set<string>}
+ */
+function deserializeAttributeValue(value) {
+  if (!value) {
+    return new Set();
+  }
+
+  return new Set(value.split(' '));
+}
+
+/**
+ * @param {Set<string>} values
+ * @return {string}
+ */
+function serializeAttributeValue(values) {
+  return [...values].join(' ');
+}
+
+/**
+ * Adds a value to an attribute containing space-delimited values.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function addValueToAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.add(value);
+  element.setAttribute(attr, serializeAttributeValue(values));
+}
+
+/**
+ * Removes a value from an attribute containing space-delimited values.
+ * If the value is the last one, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string} value
+ */
+export function removeValueFromAttribute(element, attr, value) {
+  const values = deserializeAttributeValue(element.getAttribute(attr));
+  values.delete(value);
+  if (values.size === 0) {
+    element.removeAttribute(attr);
+    return;
+  }
+  element.setAttribute(attr, serializeAttributeValue(values));
+}

package/src/element-mixin.d.ts

@@ -5,15 +5,15 @@
  */
 import '../custom_typings/vaadin-usage-statistics.js';
 import '../custom_typings/vaadin.js';
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DirMixinClass } from './dir-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DirMixinClass } from './dir-mixin.js';
 
 /**
  * A mixin providing common logic for Vaadin components.
  */
 export declare function ElementMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T & Constructor<DirMixinClass> & Constructor<ElementMixinClass>;
+): Constructor<DirMixinClass> & Constructor<ElementMixinClass> & T;
 
 export declare class ElementMixinClass {
   static version: string;

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.2.0-alpha2';
+      return '23.2.0-rc1';
     }
 
     /** @protected */

package/src/focus-mixin.d.ts

@@ -3,12 +3,12 @@
  * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
  */
-export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<FocusMixinClass>;
+export declare function FocusMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<FocusMixinClass> & T;
 
 export declare class FocusMixinClass {
   protected readonly _keyboardActive: boolean;

package/src/focus-mixin.js

@@ -4,28 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-
-// We consider the keyboard to be active if the window has received a keydown
-// event since the last mousedown event.
-let keyboardActive = false;
-
-// Listen for top-level keydown and mousedown events.
-// Use capture phase so we detect events even if they're handled.
-window.addEventListener(
-  'keydown',
-  () => {
-    keyboardActive = true;
-  },
-  { capture: true },
-);
-
-window.addEventListener(
-  'mousedown',
-  () => {
-    keyboardActive = false;
-  },
-  { capture: true },
-);
+import { isKeyboardActive } from './focus-utils.js';
 
 /**
  * A mixin to handle `focused` and `focus-ring` attributes based on focus.
@@ -40,7 +19,7 @@ export const FocusMixin = dedupingMixin(
        * @return {boolean}
        */
       get _keyboardActive() {
-        return keyboardActive;
+        return isKeyboardActive();
       }
 
       /** @protected */

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 /**
  * A controller for trapping focus within a DOM node.

package/src/focus-trap-controller.js

@@ -125,7 +125,11 @@ export class FocusTrapController {
     const step = backward ? -1 : 1;
     const currentIndex = this.__focusedElementIndex;
     const nextIndex = (focusableElements.length + currentIndex + step) % focusableElements.length;
-    focusableElements[nextIndex].focus();
+    const element = focusableElements[nextIndex];
+    element.focus();
+    if (element.localName === 'input') {
+      element.select();
+    }
   }
 
   /**

package/src/focus-utils.d.ts

@@ -4,6 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+/**
+ * Returns true if the window has received a keydown
+ * event since the last mousedown event.
+ */
+export declare function isKeyboardActive(): boolean;
+
 /**
  * Returns true if the element is hidden, false otherwise.
  *

package/src/focus-utils.js

@@ -4,6 +4,38 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+// We consider the keyboard to be active if the window has received a keydown
+// event since the last mousedown event.
+let keyboardActive = false;
+
+// Listen for top-level keydown and mousedown events.
+// Use capture phase so we detect events even if they're handled.
+window.addEventListener(
+  'keydown',
+  () => {
+    keyboardActive = true;
+  },
+  { capture: true },
+);
+
+window.addEventListener(
+  'mousedown',
+  () => {
+    keyboardActive = false;
+  },
+  { capture: true },
+);
+
+/**
+ * Returns true if the window has received a keydown
+ * event since the last mousedown event.
+ *
+ * @return {boolean}
+ */
+export function isKeyboardActive() {
+  return keyboardActive;
+}
+
 /**
  * Returns true if the element is hidden directly with `display: none` or `visibility: hidden`,
  * false otherwise.

package/src/gestures.js

@@ -277,7 +277,7 @@ function _handleNative(ev) {
   }
   if (!ev[HANDLED_OBJ]) {
     ev[HANDLED_OBJ] = {};
-    if (type.slice(0, 5) === 'touch') {
+    if (type.startsWith('touch')) {
       const t = ev.changedTouches[0];
       if (type === 'touchstart') {
         // Only handle the first finger

package/src/keyboard-mixin.d.ts

@@ -3,14 +3,14 @@
  * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin that manages keyboard handling.
  * The mixin subscribes to the keyboard events while an actual implementation
  * for the event handlers is left to the client (a component or another mixin).
  */
-export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<KeyboardMixinClass>;
+export declare function KeyboardMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<KeyboardMixinClass> & T;
 
 export declare class KeyboardMixinClass {
   /**

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 /**
  * A controller for listening on media query changes.

package/src/overflow-controller.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ReactiveController } from 'lit';
+
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController implements ReactiveController {
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+
+  /**
+   * The element that wraps scrollable content.
+   * If not set, the host element is used.
+   */
+  scrollTarget: HTMLElement;
+
+  constructor(host: HTMLElement, scrollTarget?: HTMLElement);
+
+  hostConnected(): void;
+
+  /**
+   * Setup a scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   */
+  protected observe(): void;
+}

package/src/overflow-controller.js

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { animationFrame } from './async.js';
+import { Debouncer } from './debounce.js';
+
+/**
+ * A controller that detects if content inside the element overflows its scrolling viewport,
+ * and sets the `overflow` attribute on the host with a value that indicates the directions
+ * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
+ */
+export class OverflowController {
+  constructor(host, scrollTarget) {
+    /**
+     * The controller host element.
+     *
+     * @type {HTMLElement}
+     */
+    this.host = host;
+
+    /**
+     * The element that wraps scrollable content.
+     * If not set, the host element is used.
+     *
+     * @type {HTMLElement}
+     */
+    this.scrollTarget = scrollTarget || host;
+
+    /** @private */
+    this.__boundOnScroll = this.__onScroll.bind(this);
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      this.initialized = true;
+
+      this.observe();
+    }
+  }
+
+  /**
+   * Setup scroll listener and observers to update overflow.
+   * Also performs one-time update synchronously when called.
+   * @protected
+   */
+  observe() {
+    this.__resizeObserver = new ResizeObserver(() => {
+      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
+        this.__updateOverflow();
+      });
+    });
+
+    this.__resizeObserver.observe(this.host);
+
+    this.__childObserver = new FlattenedNodesObserver(this.host, (info) => {
+      info.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.observe(node);
+        }
+      });
+
+      info.removedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          this.__resizeObserver.unobserve(node);
+        }
+      });
+
+      this.__updateOverflow();
+    });
+
+    // Update overflow attribute on scroll
+    this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+
+    this.__updateOverflow();
+  }
+
+  /** @private */
+  __onScroll() {
+    this.__updateOverflow();
+  }
+
+  /** @private */
+  __updateOverflow() {
+    const target = this.scrollTarget;
+
+    let overflow = '';
+
+    if (target.scrollTop > 0) {
+      overflow += ' top';
+    }
+
+    if (target.scrollTop < target.scrollHeight - target.clientHeight) {
+      overflow += ' bottom';
+    }
+
+    const scrollLeft = Math.abs(target.scrollLeft);
+    if (scrollLeft > 0) {
+      overflow += ' start';
+    }
+
+    if (scrollLeft < target.scrollWidth - target.clientWidth) {
+      overflow += ' end';
+    }
+
+    overflow = overflow.trim();
+    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+      this.host.setAttribute('overflow', overflow);
+    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+      this.host.removeAttribute('overflow');
+    }
+  }
+}

package/src/polylit-mixin.d.ts

@@ -3,10 +3,10 @@
  * 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';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LitElement } from 'lit';
 
-export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): T & Constructor<PolylitMixinClass>;
+export declare function PolylitMixin<T extends Constructor<LitElement>>(base: T): Constructor<PolylitMixinClass> & T;
 
 export declare class PolylitMixinClass {
   ready(): void;

package/src/polylit-mixin.js

@@ -10,7 +10,8 @@ const caseMap = {};
 const CAMEL_TO_DASH = /([A-Z])/g;
 
 function camelToDash(camel) {
-  return caseMap[camel] || (caseMap[camel] = camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase());
+  caseMap[camel] = caseMap[camel] || camel.replace(CAMEL_TO_DASH, '-$1').toLowerCase();
+  return caseMap[camel];
 }
 
 function upper(name) {
@@ -165,10 +166,9 @@ const PolylitMixinImplementation = (superclass) => {
     }
 
     /** @protected */
-    ready() {
-      if (super.ready) {
-        super.ready();
-      }
+    firstUpdated() {
+      super.firstUpdated();
+
       this.$ = this.$ || {};
       this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
         this.$[node.id] = node;
@@ -176,11 +176,7 @@ const PolylitMixinImplementation = (superclass) => {
     }
 
     /** @protected */
-    firstUpdated() {
-      super.firstUpdated();
-
-      this.ready();
-    }
+    ready() {}
 
     /** @protected */
     updated(props) {
@@ -199,6 +195,11 @@ const PolylitMixinImplementation = (superclass) => {
       if (this.constructor.__notifyProps) {
         this.__runNotifyProps(props, this.constructor.__notifyProps);
       }
+
+      if (!this.__isReadyInvoked) {
+        this.ready();
+        this.__isReadyInvoked = true;
+      }
     }
 
     /** @protected */

package/src/resize-mixin.d.ts

@@ -3,12 +3,12 @@
  * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin that uses a ResizeObserver to listen to host size changes.
  */
-export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ResizeMixinClass>;
+export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ResizeMixinClass> & T;
 
 export declare class ResizeMixinClass {
   /**

package/src/slot-controller.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 export class SlotController extends EventTarget implements ReactiveController {
   /**
@@ -27,6 +27,7 @@ export class SlotController extends EventTarget implements ReactiveController {
     slotName: string,
     slotFactory?: () => HTMLElement,
     slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
+    useUniqueId?: boolean,
   );
 
   hostConnected(): void;

package/src/slot-controller.js

@@ -23,14 +23,18 @@ export class SlotController extends EventTarget {
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  constructor(host, slotName, slotFactory, slotInitializer) {
+  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
     super();
 
     this.host = host;
     this.slotName = slotName;
     this.slotFactory = slotFactory;
     this.slotInitializer = slotInitializer;
-    this.defaultId = SlotController.generateId(slotName, host);
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = SlotController.generateId(slotName, host);
+    }
   }
 
   hostConnected() {

package/src/slot-mixin.d.ts

@@ -3,12 +3,12 @@
  * 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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to provide content for named slots defined by component.
  */
-export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<SlotMixinClass>;
+export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
 
 export declare class SlotMixinClass {
   /**

package/src/tabindex-mixin.d.ts

@@ -3,8 +3,8 @@
  * 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 { DisabledMixinClass } from './disabled-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from './disabled-mixin.js';
 
 /**
  * A mixin to toggle the `tabindex` attribute.
@@ -14,23 +14,23 @@ import { DisabledMixinClass } from './disabled-mixin.js';
  */
 export declare function TabindexMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass>;
+): Constructor<DisabledMixinClass> & Constructor<TabindexMixinClass> & T;
 
 export declare class TabindexMixinClass {
   /**
    * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
    */
-  tabindex: number | undefined | null;
+  tabindex: number | null | undefined;
 
   /**
    * Stores the last known tabindex since the element has been disabled.
    */
-  protected _lastTabIndex: number | undefined | null;
+  protected _lastTabIndex: number | null | undefined;
 
   /**
    * 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.
    * The new value will be applied as soon as the element becomes enabled.
    */
-  protected _tabindexChanged(tabindex: number | undefined | null): void;
+  protected _tabindexChanged(tabindex: number | null | undefined): void;
 }

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

@@ -55,7 +55,9 @@ export class IronListAdapter {
     if (this.reorderElements) {
       // Reordering the physical elements cancels the user's grab of the scroll bar handle on Safari.
       // Need to defer reordering until the user lets go of the scroll bar handle.
-      this.scrollTarget.addEventListener('mousedown', () => (this.__mouseDown = true));
+      this.scrollTarget.addEventListener('mousedown', () => {
+        this.__mouseDown = true;
+      });
       this.scrollTarget.addEventListener('mouseup', () => {
         this.__mouseDown = false;
         if (this.__pendingReorder) {
@@ -298,7 +300,9 @@ export class IronListAdapter {
   /** @private */
   _isClientFull() {
     // Workaround an issue in iron-list that can cause it to freeze on fast scroll
-    setTimeout(() => (this.__clientFull = true));
+    setTimeout(() => {
+      this.__clientFull = true;
+    });
     return this.__clientFull || super._isClientFull();
   }
 
@@ -378,7 +382,9 @@ 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);
@@ -394,7 +400,9 @@ 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();
@@ -494,7 +502,9 @@ export class IronListAdapter {
     if (isSafari) {
       const { transform } = this.scrollTarget.style;
       this.scrollTarget.style.transform = 'translateZ(0)';
-      setTimeout(() => (this.scrollTarget.style.transform = transform));
+      setTimeout(() => {
+        this.scrollTarget.style.transform = transform;
+      });
     }
   }