@vaadin/component-base 25.2.0-alpha1 → 25.2.0-alpha11

package/custom-elements.json

@@ -7,9 +7,22 @@
       "path": "src/delegate-state-mixin.js",
       "declarations": [
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "",
           "name": "DelegateStateMixin",
-          "description": "A mixin to delegate properties and attributes to a target element."
+          "members": [],
+          "attributes": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
       ],
       "exports": [
@@ -91,7 +104,7 @@
       "declarations": [
         {
           "kind": "mixin",
-          "description": "A mixin that allows to set partial I18N properties.",
+          "description": "A mixin that allows to set partial I18N properties.\n\nSubclasses provide their default values by overriding the\n`defaultI18n` static getter:\n\n```js\nstatic get defaultI18n() {\n  return { foo: 'Foo', bar: 'Bar' };\n}\n```",
           "name": "I18nMixin",
           "members": [
             {
@@ -116,9 +129,6 @@
             }
           ],
           "parameters": [
-            {
-              "name": "defaultI18n"
-            },
             {
               "name": "superClass"
             }
@@ -223,9 +233,21 @@
       "path": "src/resize-mixin.js",
       "declarations": [
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "A mixin that uses a ResizeObserver to listen to host size changes.",
           "name": "ResizeMixin",
-          "description": "A mixin that uses a ResizeObserver to listen to host size changes."
+          "members": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
       ],
       "exports": [
@@ -244,9 +266,21 @@
       "path": "src/slot-styles-mixin.js",
       "declarations": [
         {
-          "kind": "variable",
+          "kind": "mixin",
+          "description": "Mixin to insert styles into the outer scope to handle slotted components.\nThis is useful e.g. to hide native `<input type=\"number\">` controls.",
           "name": "SlotStylesMixin",
-          "description": "Mixin to insert styles into the outer scope to handle slotted components.\nThis is useful e.g. to hide native `<input type=\"number\">` controls."
+          "members": [],
+          "parameters": [
+            {
+              "name": "superclass"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "dedupeMixin",
+              "package": "@open-wc/dedupe-mixin"
+            }
+          ]
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.2.0-alpha1",
+  "version": "25.2.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.2.0-alpha1",
-    "@vaadin/test-runner-commands": "25.2.0-alpha1",
+    "@vaadin/chai-plugins": "25.2.0-alpha11",
+    "@vaadin/test-runner-commands": "25.2.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "866f813f89655a351cbd25328eba1fcb317e267d"
+  "gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
 }

package/src/data-provider-controller/data-provider-controller.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import type { ReactiveController } from 'lit';
 import type { Cache } from './cache.js';
 import type { getFlatIndexByPath, getFlatIndexContext, getItemContext } from './helpers.js';
 
@@ -23,10 +22,7 @@ export type DataProvider<TItem, TDataProviderParams extends Record<string, unkno
 /**
  * A controller that stores and manages items loaded with a data provider.
  */
-export class DataProviderController<
-  TItem,
-  TDataProviderParams extends Record<string, unknown>,
-> implements ReactiveController {
+export class DataProviderController<TItem, TDataProviderParams extends Record<string, unknown>> extends EventTarget {
   /**
    * The controller host element.
    */
@@ -94,10 +90,6 @@ export class DataProviderController<
    */
   get flatSize(): number;
 
-  hostConnected(): void;
-
-  hostDisconnected(): void;
-
   /**
    * Whether the root cache or any of its decendant caches have pending requests.
    */

package/src/data-provider-controller/helpers.js

@@ -105,7 +105,7 @@ export function getFlatIndexByPath(cache, [levelIndex, ...subIndexes], flatIndex
 
   const flatIndexOnLevel = cache.getFlatIndex(levelIndex);
   const subCache = cache.getSubCache(levelIndex);
-  if (subCache && subCache.flatSize > 0 && subIndexes.length) {
+  if (subCache?.flatSize > 0 && subIndexes.length) {
     return getFlatIndexByPath(subCache, subIndexes, flatIndex + flatIndexOnLevel + 1);
   }
   return flatIndex + flatIndexOnLevel;

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.2.0-alpha1') {
+export function defineCustomElement(CustomElement, version = '25.2.0-alpha11') {
   Object.defineProperty(CustomElement, 'version', {
     get() {
       return version;

package/src/delegate-state-mixin.js

@@ -7,119 +7,118 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to delegate properties and attributes to a target element.
- *
- * @polymerMixin
  */
-export const DelegateStateMixin = dedupeMixin(
-  (superclass) =>
-    class DelegateStateMixinClass extends superclass {
-      static get properties() {
-        return {
-          /**
-           * A target element to which attributes and properties are delegated.
-           * @protected
-           */
-          stateTarget: {
-            type: Object,
-            observer: '_stateTargetChanged',
-          },
-        };
+const DelegateStateMixinImplementation = (superclass) => {
+  return class DelegateStateMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A target element to which attributes and properties are delegated.
+         * @protected
+         */
+        stateTarget: {
+          type: Object,
+          observer: '_stateTargetChanged',
+        },
+      };
+    }
+
+    /**
+     * An array of the host attributes to delegate to the target element.
+     */
+    static get delegateAttrs() {
+      return [];
+    }
+
+    /**
+     * An array of the host properties to delegate to the target element.
+     */
+    static get delegateProps() {
+      return [];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._createDelegateAttrsObserver();
+      this._createDelegatePropsObserver();
+    }
+
+    /** @protected */
+    _stateTargetChanged(target) {
+      if (target) {
+        this._ensureAttrsDelegated();
+        this._ensurePropsDelegated();
       }
-
-      /**
-       * An array of the host attributes to delegate to the target element.
-       */
-      static get delegateAttrs() {
-        return [];
+    }
+
+    /** @protected */
+    _createDelegateAttrsObserver() {
+      this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
+    }
+
+    /** @protected */
+    _createDelegatePropsObserver() {
+      this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
+    }
+
+    /** @protected */
+    _ensureAttrsDelegated() {
+      this.constructor.delegateAttrs.forEach((name) => {
+        this._delegateAttribute(name, this[name]);
+      });
+    }
+
+    /** @protected */
+    _ensurePropsDelegated() {
+      this.constructor.delegateProps.forEach((name) => {
+        this._delegateProperty(name, this[name]);
+      });
+    }
+
+    /** @protected */
+    _delegateAttrsChanged(...values) {
+      this.constructor.delegateAttrs.forEach((name, index) => {
+        this._delegateAttribute(name, values[index]);
+      });
+    }
+
+    /** @protected */
+    _delegatePropsChanged(...values) {
+      this.constructor.delegateProps.forEach((name, index) => {
+        this._delegateProperty(name, values[index]);
+      });
+    }
+
+    /** @protected */
+    _delegateAttribute(name, value) {
+      if (!this.stateTarget) {
+        return;
       }
 
-      /**
-       * An array of the host properties to delegate to the target element.
-       */
-      static get delegateProps() {
-        return [];
+      if (name === 'invalid') {
+        this._delegateAttribute('aria-invalid', value ? 'true' : false);
       }
 
-      /** @protected */
-      ready() {
-        super.ready();
-
-        this._createDelegateAttrsObserver();
-        this._createDelegatePropsObserver();
+      if (typeof value === 'boolean') {
+        this.stateTarget.toggleAttribute(name, value);
+      } else if (value) {
+        this.stateTarget.setAttribute(name, value);
+      } else {
+        this.stateTarget.removeAttribute(name);
       }
+    }
 
-      /** @protected */
-      _stateTargetChanged(target) {
-        if (target) {
-          this._ensureAttrsDelegated();
-          this._ensurePropsDelegated();
-        }
+    /** @protected */
+    _delegateProperty(name, value) {
+      if (!this.stateTarget) {
+        return;
       }
 
-      /** @protected */
-      _createDelegateAttrsObserver() {
-        this._createMethodObserver(`_delegateAttrsChanged(${this.constructor.delegateAttrs.join(', ')})`);
-      }
-
-      /** @protected */
-      _createDelegatePropsObserver() {
-        this._createMethodObserver(`_delegatePropsChanged(${this.constructor.delegateProps.join(', ')})`);
-      }
-
-      /** @protected */
-      _ensureAttrsDelegated() {
-        this.constructor.delegateAttrs.forEach((name) => {
-          this._delegateAttribute(name, this[name]);
-        });
-      }
-
-      /** @protected */
-      _ensurePropsDelegated() {
-        this.constructor.delegateProps.forEach((name) => {
-          this._delegateProperty(name, this[name]);
-        });
-      }
+      this.stateTarget[name] = value;
+    }
+  };
+};
 
-      /** @protected */
-      _delegateAttrsChanged(...values) {
-        this.constructor.delegateAttrs.forEach((name, index) => {
-          this._delegateAttribute(name, values[index]);
-        });
-      }
-
-      /** @protected */
-      _delegatePropsChanged(...values) {
-        this.constructor.delegateProps.forEach((name, index) => {
-          this._delegateProperty(name, values[index]);
-        });
-      }
-
-      /** @protected */
-      _delegateAttribute(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
-
-        if (name === 'invalid') {
-          this._delegateAttribute('aria-invalid', value ? 'true' : false);
-        }
-
-        if (typeof value === 'boolean') {
-          this.stateTarget.toggleAttribute(name, value);
-        } else if (value) {
-          this.stateTarget.setAttribute(name, value);
-        } else {
-          this.stateTarget.removeAttribute(name);
-        }
-      }
-
-      /** @protected */
-      _delegateProperty(name, value) {
-        if (!this.stateTarget) {
-          return;
-        }
-
-        this.stateTarget[name] = value;
-      }
-    },
-);
+export const DelegateStateMixin = dedupeMixin(DelegateStateMixinImplementation);

package/src/dir-mixin.js

@@ -33,8 +33,6 @@ directionObserver.observe(document.documentElement, { attributes: true, attribut
 
 /**
  * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
- *
- * @polymerMixin
  */
 export const DirMixin = (superClass) =>
   class VaadinDirMixin extends superClass {

package/src/dom-utils.js

@@ -74,7 +74,7 @@ export function getClosestElement(selector, node) {
     return null;
   }
 
-  return node.closest(selector) || getClosestElement(selector, node.getRootNode().host);
+  return node.closest?.(selector) || getClosestElement(selector, node.getRootNode().host);
 }
 
 /**

package/src/element-mixin.js

@@ -31,10 +31,6 @@ let statsJob;
 
 const registered = new Set();
 
-/**
- * @polymerMixin
- * @mixes DirMixin
- */
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     /** @protected */

package/src/gestures.js

@@ -121,7 +121,7 @@ function hasLeftMouseButton(ev) {
   // instead we use ev.buttons (bitmask of buttons) or fall back to ev.which (deprecated, 0 for no buttons, 1 for left button)
   if (type === 'mousemove') {
     // Allow undefined for testing events
-    let buttons = ev.buttons === undefined ? 1 : ev.buttons;
+    let buttons = ev.buttons ?? 1;
     if (ev instanceof window.MouseEvent && !MOUSE_HAS_BUTTONS) {
       buttons = MOUSE_WHICH_TO_BUTTONS[ev.which] || 0;
     }
@@ -129,7 +129,7 @@ function hasLeftMouseButton(ev) {
     return Boolean(buttons & 1);
   }
   // Allow undefined for testing events
-  const button = ev.button === undefined ? 0 : ev.button;
+  const button = ev.button ?? 0;
   // Ev.button is 0 in mousedown/mouseup/click for left button activation
   return button === 0;
 }
@@ -232,7 +232,7 @@ export function deepTargetFind(x, y) {
   // This code path is only taken when native ShadowDOM is used
   // if there is a shadowroot, it may have a node at x/y
   // if there is not a shadowroot, exit the loop
-  while (next && next.shadowRoot && !window.ShadyDOM) {
+  while (next?.shadowRoot && !window.ShadyDOM) {
     // If there is a node at x/y in the shadowroot, look deeper
     const oldNext = next;
     next = next.shadowRoot.elementFromPoint(x, y);
@@ -448,7 +448,7 @@ function _remove(node, evType, handler) {
     for (let i = 0, dep, gd; i < deps.length; i++) {
       dep = deps[i];
       gd = gobj[dep];
-      if (gd && gd[name]) {
+      if (gd?.[name]) {
         gd[name] = (gd[name] || 1) - 1;
         gd._count = (gd._count || 1) - 1;
         if (gd._count === 0) {
@@ -531,7 +531,7 @@ function _fire(target, type, detail) {
   // Forward `preventDefault` in a clean way
   if (ev.defaultPrevented) {
     const preventer = detail.preventer || detail.sourceEvent;
-    if (preventer && preventer.preventDefault) {
+    if (preventer?.preventDefault) {
       preventer.preventDefault();
     }
   }

package/src/i18n-mixin.d.ts

@@ -8,8 +8,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 /**
  * A mixin that allows to set partial I18N properties.
  */
-export declare function I18nMixin<I, T extends Constructor<HTMLElement>>(
-  defaultI18n: I,
+export declare function I18nMixin<T extends Constructor<HTMLElement>, I = unknown>(
   superclass: T,
 ): Constructor<I18nMixinClass<I>> & T;
 

package/src/i18n-mixin.js

@@ -35,9 +35,16 @@ function deepMerge(target, ...sources) {
 /**
  * A mixin that allows to set partial I18N properties.
  *
- * @polymerMixin
+ * Subclasses provide their default values by overriding the
+ * `defaultI18n` static getter:
+ *
+ * ```js
+ * static get defaultI18n() {
+ *   return { foo: 'Foo', bar: 'Bar' };
+ * }
+ * ```
  */
-export const I18nMixin = (defaultI18n, superClass) =>
+export const I18nMixin = (superClass) =>
   class I18nMixinClass extends superClass {
     static get properties() {
       return {
@@ -55,10 +62,20 @@ export const I18nMixin = (defaultI18n, superClass) =>
       };
     }
 
+    /**
+     * Default I18N values. Must be overridden by subclasses with actual defaults.
+     *
+     * @protected
+     * @return {Object}
+     */
+    static get defaultI18n() {
+      return {};
+    }
+
     constructor() {
       super();
 
-      this.i18n = deepMerge({}, defaultI18n);
+      this.i18n = deepMerge({}, this.constructor.defaultI18n);
     }
 
     /**
@@ -80,6 +97,6 @@ export const I18nMixin = (defaultI18n, superClass) =>
         return;
       }
       this.__customI18n = value;
-      this.__effectiveI18n = deepMerge({}, defaultI18n, this.__customI18n);
+      this.__effectiveI18n = deepMerge({}, this.constructor.defaultI18n, this.__customI18n);
     }
   };

package/src/overflow-controller.js

@@ -3,8 +3,6 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { animationFrame } from './async.js';
-import { Debouncer } from './debounce.js';
 
 /**
  * A controller that detects if content inside the element overflows its scrolling viewport,
@@ -48,12 +46,7 @@ export class OverflowController {
   observe() {
     const { host } = this;
 
-    this.__resizeObserver = new ResizeObserver(() => {
-      this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
-        this.__updateOverflow();
-      });
-    });
-
+    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
     this.__resizeObserver.observe(host);
 
     // Observe initial children
@@ -74,26 +67,43 @@ export class OverflowController {
             this.__resizeObserver.unobserve(node);
           }
         });
-      });
 
-      this.__updateOverflow();
+        if (addedNodes.length === 0 && removedNodes.length > 0) {
+          this.__updateState({ sync: true });
+        }
+      });
     });
 
     this.__childObserver.observe(host, { childList: true });
 
     // Update overflow attribute on scroll
     this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+  }
 
-    this.__updateOverflow();
+  /** @private */
+  __onResize() {
+    this.__updateState({ sync: false });
   }
 
   /** @private */
   __onScroll() {
-    this.__updateOverflow();
+    this.__updateState({ sync: true });
   }
 
   /** @private */
-  __updateOverflow() {
+  __updateState({ sync }) {
+    cancelAnimationFrame(this.__resizeRaf);
+
+    const state = this.__readState();
+    if (sync) {
+      this.__writeState(state);
+    } else {
+      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+    }
+  }
+
+  /** @private */
+  __readState() {
     const target = this.scrollTarget;
 
     let overflow = '';
@@ -115,10 +125,14 @@ export class OverflowController {
       overflow += ' end';
     }
 
-    overflow = overflow.trim();
-    if (overflow.length > 0 && this.host.getAttribute('overflow') !== overflow) {
+    return { overflow: overflow.trim() };
+  }
+
+  /** @private */
+  __writeState({ overflow }) {
+    if (overflow) {
       this.host.setAttribute('overflow', overflow);
-    } else if (overflow.length === 0 && this.host.hasAttribute('overflow')) {
+    } else {
       this.host.removeAttribute('overflow');
     }
   }

package/src/overlay-class-mixin.js

@@ -7,8 +7,6 @@
 /**
  * A mixin that forwards CSS class names to the internal overlay element
  * by setting the `overlayClass` property or `overlay-class` attribute.
- *
- * @polymerMixin
  */
 export const OverlayClassMixin = (superclass) =>
   class OverlayClassMixinClass extends superclass {

package/src/polylit-mixin.js

@@ -59,7 +59,7 @@ const PolylitMixinImplementation = (superclass) => {
         };
       }
 
-      if (options && options.reflectToAttribute) {
+      if (options?.reflectToAttribute) {
         options.reflect = true;
       }
 

package/src/resize-mixin.js

@@ -26,69 +26,67 @@ const observer = new ResizeObserver((entries) => {
 
 /**
  * A mixin that uses a ResizeObserver to listen to host size changes.
- *
- * @polymerMixin
  */
-export const ResizeMixin = dedupeMixin(
-  (superclass) =>
-    class ResizeMixinClass extends superclass {
-      /**
-       * When true, the parent element resize will be also observed.
-       * Override this getter and return `true` to enable this.
-       *
-       * @protected
-       */
-      get _observeParent() {
-        return false;
-      }
-
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
-        observer.observe(this);
+const ResizeMixinImplementation = (superclass) =>
+  class ResizeMixinClass extends superclass {
+    /**
+     * When true, the parent element resize will be also observed.
+     * Override this getter and return `true` to enable this.
+     *
+     * @protected
+     */
+    get _observeParent() {
+      return false;
+    }
 
-        if (this._observeParent) {
-          const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      observer.observe(this);
 
-          if (!parent.resizables) {
-            parent.resizables = new Set();
-            observer.observe(parent);
-          }
+      if (this._observeParent) {
+        const parent = this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentNode;
 
-          parent.resizables.add(this);
-          this.__parent = parent;
+        if (!parent.resizables) {
+          parent.resizables = new Set();
+          observer.observe(parent);
         }
+
+        parent.resizables.add(this);
+        this.__parent = parent;
       }
+    }
 
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
-        observer.unobserve(this);
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      observer.unobserve(this);
 
-        const parent = this.__parent;
-        if (this._observeParent && parent) {
-          const resizables = parent.resizables;
+      const parent = this.__parent;
+      if (this._observeParent && parent) {
+        const resizables = parent.resizables;
 
-          if (resizables) {
-            resizables.delete(this);
+        if (resizables) {
+          resizables.delete(this);
 
-            if (resizables.size === 0) {
-              observer.unobserve(parent);
-            }
+          if (resizables.size === 0) {
+            observer.unobserve(parent);
           }
-
-          this.__parent = null;
         }
-      }
 
-      /**
-       * A handler invoked on host resize. By default, it does nothing.
-       * Override the method to implement your own behavior.
-       *
-       * @protected
-       */
-      _onResize(_contentRect) {
-        // To be implemented.
+        this.__parent = null;
       }
-    },
-);
+    }
+
+    /**
+     * A handler invoked on host resize. By default, it does nothing.
+     * Override the method to implement your own behavior.
+     *
+     * @protected
+     */
+    _onResize(_contentRect) {
+      // To be implemented.
+    }
+  };
+
+export const ResizeMixin = dedupeMixin(ResizeMixinImplementation);

package/src/slot-controller.js

@@ -223,7 +223,7 @@ export class SlotController extends EventTarget {
         });
       }
 
-      if (newNodes && newNodes.length > 0) {
+      if (newNodes?.length > 0) {
         if (this.multiple) {
           // Remove default node if exists
           if (this.defaultNode) {

package/src/slot-observer.js

@@ -9,13 +9,13 @@
  */
 export class SlotObserver {
   constructor(slot, callback, forceInitial) {
-    /** @type HTMLSlotElement */
+    /** @type {HTMLSlotElement} */
     this.slot = slot;
 
-    /** @type Function */
+    /** @type {Function} */
     this.callback = callback;
 
-    /** @type boolean */
+    /** @type {boolean} */
     this.forceInitial = forceInitial;
 
     /** @type {Node[]} */

package/src/slot-styles-mixin.js

@@ -39,38 +39,36 @@ function insertStyles(styles, root) {
 /**
  * Mixin to insert styles into the outer scope to handle slotted components.
  * This is useful e.g. to hide native `<input type="number">` controls.
- *
- * @polymerMixin
  */
-export const SlotStylesMixin = dedupeMixin(
-  (superclass) =>
-    class SlotStylesMixinClass extends superclass {
-      /**
-       * List of styles to insert into root.
-       * @protected
-       */
-      get slotStyles() {
-        return [];
-      }
+const SlotStylesMixinImplementation = (superclass) =>
+  class SlotStylesMixinClass extends superclass {
+    /**
+     * List of styles to insert into root.
+     * @protected
+     */
+    get slotStyles() {
+      return [];
+    }
 
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-        this.__applySlotStyles();
-      }
+      this.__applySlotStyles();
+    }
 
-      /** @private */
-      __applySlotStyles() {
-        const root = this.getRootNode();
-        const rootStyles = getRootStyles(root);
+    /** @private */
+    __applySlotStyles() {
+      const root = this.getRootNode();
+      const rootStyles = getRootStyles(root);
 
-        this.slotStyles.forEach((styles) => {
-          if (!rootStyles.has(styles)) {
-            insertStyles(styles, root);
-            rootStyles.add(styles);
-          }
-        });
-      }
-    },
-);
+      this.slotStyles.forEach((styles) => {
+        if (!rootStyles.has(styles)) {
+          insertStyles(styles, root);
+          rootStyles.add(styles);
+        }
+      });
+    }
+  };
+
+export const SlotStylesMixin = dedupeMixin(SlotStylesMixinImplementation);

package/src/styles/style-props.js

@@ -119,6 +119,13 @@ addGlobalStyles(
         --safe-area-inset-right: env(safe-area-inset-right, 0px);
         --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
         --safe-area-inset-left: env(safe-area-inset-left, 0px);
+        --safe-area-inset-inline-start: var(--safe-area-inset-left);
+        --safe-area-inset-inline-end: var(--safe-area-inset-right);
+
+        &:dir(rtl) {
+          --safe-area-inset-inline-start: var(--safe-area-inset-right);
+          --safe-area-inset-inline-end: var(--safe-area-inset-left);
+        }
       }
 
       @supports not (color: hsl(0 0 0)) {

package/src/tooltip-controller.d.ts

@@ -23,6 +23,8 @@ type TooltipPosition =
  * A controller that manages the slotted tooltip element.
  */
 export class TooltipController extends SlotController {
+  constructor(host: HTMLElement);
+
   /**
    * An HTML element for linking with the tooltip overlay
    * via `aria-describedby` attribute used by screen readers.
@@ -42,12 +44,6 @@ export class TooltipController extends SlotController {
    */
   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.
    */
@@ -74,11 +70,6 @@ export class TooltipController extends SlotController {
    */
   setManual(manual: boolean): void;
 
-  /**
-   * Toggle opened state on the slotted tooltip.
-   */
-  setOpened(opened: boolean): void;
-
   /**
    * Set default position for the slotted tooltip.
    * This can be overridden by setting the position
@@ -96,4 +87,18 @@ export class TooltipController extends SlotController {
    * Set an HTML element to attach the tooltip to.
    */
   setTarget(target: HTMLElement): void;
+
+  /**
+   * Schedule opening the slotted tooltip. Respects the tooltip's
+   * configured `hoverDelay` / `focusDelay` and the shared warm-up state.
+   * No-op when no tooltip is slotted.
+   */
+  open(options?: { hover?: boolean; focus?: boolean; immediate?: boolean }): void;
+
+  /**
+   * Schedule closing the slotted tooltip. Respects the tooltip's
+   * configured `hideDelay` unless `immediate` is true.
+   * No-op when no tooltip is slotted.
+   */
+  close(immediate?: boolean): void;
 }

package/src/tooltip-controller.js

@@ -39,10 +39,6 @@ export class TooltipController extends SlotController {
       tooltipNode.manual = this.manual;
     }
 
-    if (this.opened !== undefined) {
-      tooltipNode.opened = this.opened;
-    }
-
     if (this.position !== undefined) {
       tooltipNode._position = this.position;
     }
@@ -113,19 +109,6 @@ export class TooltipController extends SlotController {
     }
   }
 
-  /**
-   * 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 default position for the slotted tooltip.
    * This can be overridden by setting the position
@@ -168,6 +151,34 @@ export class TooltipController extends SlotController {
     }
   }
 
+  /**
+   * Schedule opening the slotted tooltip. Respects the tooltip's
+   * configured `hoverDelay` / `focusDelay` and the shared warm-up state.
+   * No-op when no tooltip is slotted.
+   *
+   * @param {{ hover?: boolean, focus?: boolean, immediate?: boolean }} [options]
+   */
+  open(options) {
+    const tooltipNode = this.node;
+    if (tooltipNode?.isConnected) {
+      tooltipNode._stateController.open(options);
+    }
+  }
+
+  /**
+   * Schedule closing the slotted tooltip. Respects the tooltip's
+   * configured `hideDelay` unless `immediate` is true.
+   * No-op when no tooltip is slotted.
+   *
+   * @param {boolean} [immediate]
+   */
+  close(immediate) {
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._stateController.close(immediate);
+    }
+  }
+
   /** @private */
   __onContentChange(event) {
     this.__notifyChange(event.target);

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

@@ -78,8 +78,6 @@ export class IronListAdapter {
     });
     attachObserver.observe(this.scrollTarget);
 
-    this._scrollLineHeight = this._getScrollLineHeight();
-
     this.scrollTarget.addEventListener('virtualizer-element-focused', (e) => this.__onElementFocused(e));
     this.elementsContainer.addEventListener('focusin', () => {
       this.scrollTarget.dispatchEvent(
@@ -462,10 +460,6 @@ export class IronListAdapter {
     this._isRTL = Boolean(styles.direction === 'rtl');
     this._viewportWidth = this.elementsContainer.offsetWidth;
     this._viewportHeight = this.scrollTarget.offsetHeight;
-    this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
-    if (this.grid) {
-      this._updateGridMetrics();
-    }
   }
 
   /** @private */
@@ -521,11 +515,19 @@ export class IronListAdapter {
 
   /** @private */
   __getFocusedElement(visibleElements = this.__getVisibleElements()) {
-    return visibleElements.find(
-      (element) =>
-        element.contains(this.elementsContainer.getRootNode().activeElement) ||
-        element.contains(this.scrollTarget.getRootNode().activeElement),
-    );
+    // `document.activeElement` retargets to the outermost shadow host when
+    // focus lives in a nested shadow tree. Descend through nested shadow
+    // roots' `activeElement`s to reach the real focused node, then walk up
+    // the flattened tree (via `assignedSlot`/`parentNode`/`host`) until a
+    // visible row is reached.
+    let node = document.activeElement;
+    while (node?.shadowRoot?.activeElement) {
+      node = node.shadowRoot.activeElement;
+    }
+    while (node && !visibleElements.includes(node)) {
+      node = node.assignedSlot || node.parentNode || node.host;
+    }
+    return node;
   }
 
   /** @private */
@@ -780,20 +782,6 @@ export class IronListAdapter {
     return 0;
   }
 
-  /**
-   * @returns {Number|undefined} - The browser's default font-size in pixels
-   * @private
-   */
-  _getScrollLineHeight() {
-    const el = document.createElement('div');
-    el.style.fontSize = 'initial';
-    el.style.display = 'none';
-    document.body.appendChild(el);
-    const fontSize = window.getComputedStyle(el).fontSize;
-    document.body.removeChild(el);
-    return fontSize ? window.parseInt(fontSize) : undefined;
-  }
-
   __getVisibleElements() {
     return Array.from(this.elementsContainer.children).filter((element) => !element.hidden);
   }