@vaadin/component-base 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -4,7 +4,7 @@ A set of helpers and mixins used by Vaadin components.
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/custom_typings/vaadin.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

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-alpha1';
+      return '23.3.0-alpha1';
     }
 
     /** @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-direction-mixin.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardMixinClass } from './keyboard-mixin.js';
+
+/**
+ * A mixin for navigating items with keyboard.
+ */
+export declare function KeyboardDirectionMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<KeyboardDirectionMixinClass> & Constructor<KeyboardMixinClass> & T;
+
+export declare class KeyboardDirectionMixinClass {
+  protected readonly focused: Element | null;
+
+  protected readonly _vertical: boolean;
+
+  /**
+   * Returns index of the next item that satisfies the given condition,
+   * based on the index of the current item and a numeric increment.
+   */
+  protected _getAvailableIndex(
+    items: Element[],
+    index: number,
+    increment: number,
+    condition: (item: Element) => boolean,
+  ): number;
+
+  /**
+   * Focus the item at given index. Override this method to add custom logic.
+   */
+  protected _focus(index: number, navigating: boolean): void;
+
+  /**
+   * Focus the given item. Override this method to add custom logic.
+   */
+  protected _focusItem(item: Element, navigating: boolean): void;
+}

package/src/keyboard-direction-mixin.js

@@ -0,0 +1,192 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { isElementFocused, isElementHidden } from './focus-utils.js';
+import { KeyboardMixin } from './keyboard-mixin.js';
+
+/**
+ * A mixin for navigating items with keyboard.
+ *
+ * @polymerMixin
+ * @mixes KeyboardMixin
+ */
+export const KeyboardDirectionMixin = (superclass) =>
+  class KeyboardDirectionMixinClass extends KeyboardMixin(superclass) {
+    /** @protected */
+    focus() {
+      const items = this._getItems();
+      if (Array.isArray(items)) {
+        const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
+        if (idx >= 0) {
+          items[idx].focus();
+        }
+      }
+    }
+
+    /**
+     * @return {Element | null}
+     * @protected
+     */
+    get focused() {
+      return (this._getItems() || []).find(isElementFocused);
+    }
+
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get _vertical() {
+      return true;
+    }
+
+    /**
+     * Get the list of items participating in keyboard navigation.
+     * By default, it treats all the light DOM children as items.
+     * Override this method to provide custom list of elements.
+     *
+     * @return {Element[]}
+     * @protected
+     */
+    _getItems() {
+      return Array.from(this.children);
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     *
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      if (event.metaKey || event.ctrlKey) {
+        return;
+      }
+
+      const { key } = event;
+      const items = this._getItems() || [];
+      const currentIdx = items.indexOf(this.focused);
+
+      let idx;
+      let increment;
+
+      const isRTL = !this._vertical && this.getAttribute('dir') === 'rtl';
+      const dirIncrement = isRTL ? -1 : 1;
+
+      if (this.__isPrevKey(key)) {
+        increment = -dirIncrement;
+        idx = currentIdx - dirIncrement;
+      } else if (this.__isNextKey(key)) {
+        increment = dirIncrement;
+        idx = currentIdx + dirIncrement;
+      } else if (key === 'Home') {
+        increment = 1;
+        idx = 0;
+      } else if (key === 'End') {
+        increment = -1;
+        idx = items.length - 1;
+      }
+
+      idx = this._getAvailableIndex(items, idx, increment, (item) => !isElementHidden(item));
+
+      if (idx >= 0) {
+        event.preventDefault();
+        this._focus(idx, true);
+      }
+    }
+
+    /**
+     * @param {string} key
+     * @return {boolean}
+     * @private
+     */
+    __isPrevKey(key) {
+      return this._vertical ? key === 'ArrowUp' : key === 'ArrowLeft';
+    }
+
+    /**
+     * @param {string} key
+     * @return {boolean}
+     * @private
+     */
+    __isNextKey(key) {
+      return this._vertical ? key === 'ArrowDown' : key === 'ArrowRight';
+    }
+
+    /**
+     * Focus the item at given index. Override this method to add custom logic.
+     *
+     * @param {number} index
+     * @param {boolean} navigating
+     * @protected
+     */
+    _focus(index, navigating = false) {
+      const items = this._getItems();
+
+      this._focusItem(items[index], navigating);
+    }
+
+    /**
+     * Focus the given item. Override this method to add custom logic.
+     *
+     * @param {Element} item
+     * @param {boolean} navigating
+     * @protected
+     */
+    _focusItem(item) {
+      if (item) {
+        item.focus();
+
+        // Generally, the items are expected to implement `FocusMixin`
+        // that would set this attribute based on the `keydown` event.
+        // We set it manually to handle programmatic focus() calls.
+        item.setAttribute('focus-ring', '');
+      }
+    }
+
+    /**
+     * Returns index of the next item that satisfies the given condition,
+     * based on the index of the current item and a numeric increment.
+     *
+     * @param {Element[]} items - array of items to iterate over
+     * @param {number} index - index of the current item
+     * @param {number} increment - numeric increment, can be either 1 or -1
+     * @param {Function} condition - function used to check the item
+     * @return {number}
+     * @protected
+     */
+    _getAvailableIndex(items, index, increment, condition) {
+      const totalItems = items.length;
+      let idx = index;
+      for (let i = 0; typeof idx === 'number' && i < totalItems; i += 1, idx += increment || 1) {
+        if (idx < 0) {
+          idx = totalItems - 1;
+        } else if (idx >= totalItems) {
+          idx = 0;
+        }
+
+        const item = items[idx];
+
+        if (!item.hasAttribute('disabled') && this.__isMatchingItem(item, condition)) {
+          return idx;
+        }
+      }
+      return -1;
+    }
+
+    /**
+     * Returns true if the item matches condition.
+     *
+     * @param {Element} item - item to check
+     * @param {Function} condition - function used to check the item
+     * @return {number}
+     * @private
+     */
+    __isMatchingItem(item, condition) {
+      return typeof condition === 'function' ? condition(item) : true;
+    }
+  };

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/tooltip-controller.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+type TooltipPosition =
+  | 'bottom-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'end-bottom'
+  | 'end-top'
+  | 'end'
+  | 'start-bottom'
+  | 'start-top'
+  | 'start'
+  | 'top-end'
+  | 'top-start'
+  | 'top';
+
+/**
+ * A controller that manages the slotted tooltip element.
+ */
+export class TooltipController extends SlotController {
+  /**
+   * Object with properties passed to `textGenerator`
+   * function to be used for generating tooltip text.
+   */
+  context: Record<string, unknown>;
+
+  /**
+   * When true, the tooltip is controlled programmatically
+   * instead of reacting to focus and mouse events.
+   */
+  manual: boolean;
+
+  /**
+   * When true, the tooltip is opened programmatically.
+   * Only works if `manual` is set to `true`.
+   */
+  opened: boolean;
+
+  /**
+   * Position of the tooltip with respect to its target.
+   */
+  position: TooltipPosition;
+
+  /**
+   * An HTML element to attach the tooltip to.
+   */
+  target: HTMLElement;
+
+  /**
+   * Set a context object to be used by text generator.
+   */
+  setContext(context: Record<string, unknown>): void;
+
+  /**
+   * Toggle manual state on the slotted tooltip.
+   */
+  setManual(manual: boolean): void;
+
+  /**
+   * Toggle opened state on the slotted tooltip.
+   */
+  setOpened(opened: boolean): void;
+
+  /**
+   * Set position on the slotted tooltip.
+   */
+  setPosition(position: TooltipPosition): void;
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   */
+  setShouldShow(shouldShow: (target: HTMLElement) => boolean): void;
+
+  /**
+   * Set an HTML element to attach the tooltip to.
+   */
+  setTarget(target: HTMLElement): void;
+}

package/src/tooltip-controller.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright (c) 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { SlotController } from './slot-controller.js';
+
+/**
+ * A controller that manages the slotted tooltip element.
+ */
+export class TooltipController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
+
+    this.setTarget(host);
+  }
+
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
+
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
+
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
+
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
+    }
+
+    if (this.position !== undefined) {
+      tooltipNode.position = this.position;
+    }
+
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
+    }
+  }
+
+  /**
+   * Set a context object to be used by text generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
+    }
+  }
+
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
+  }
+
+  /**
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
+   */
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
+  }
+
+  /**
+   * Set position on the slotted tooltip.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.position = position;
+    }
+  }
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
+  }
+
+  /**
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
+    }
+  }
+}

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;
+      });
     }
   }