@vaadin/component-base 25.2.0-alpha9 → 25.2.0-beta1

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-alpha9",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.2.0-alpha9",
-    "@vaadin/test-runner-commands": "25.2.0-alpha9",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "a38a03e8a8be45821f39c14054c63634dafe08d0"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

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-alpha9') {
+export function defineCustomElement(CustomElement, version = '25.2.0-beta1') {
   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/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/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.d.ts

@@ -5,15 +5,25 @@
  */
 
 /**
- * A helper for observing slot changes.
+ * A helper for observing slot or shadow-root changes.
+ *
+ * When `target` is an `HTMLSlotElement`, the observer listens for `slotchange`
+ * on the slot itself and diffs `target.assignedNodes({ flatten: true })`.
+ *
+ * When `target` is a `ShadowRoot`, the observer listens for `slotchange` events
+ * bubbling to it and diffs the **union** of `assignedNodes({ flatten: true })`
+ * every descendant `<slot>`. Cross-slot reassignment of the same node does
+ * not change the union and therefore fires no callback.
  */
 export class SlotObserver {
   constructor(
-    slot: HTMLSlotElement,
+    target: HTMLSlotElement | DocumentFragment,
     callback: (info: { addedNodes: Node[]; currentNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
     forceInitial?: boolean,
   );
 
+  readonly target: HTMLSlotElement | DocumentFragment;
+
   /**
    * Activates an observer. This method is automatically called when
    * a `SlotObserver` is created. It should only be called to  re-activate

package/src/slot-observer.js

@@ -5,22 +5,33 @@
  */
 
 /**
- * A helper for observing slot changes.
+ * A helper for observing slot or shadow-root changes.
+ *
+ * When `target` is an `HTMLSlotElement`, the observer listens for `slotchange`
+ * on the slot itself and diffs `target.assignedNodes({ flatten: true })`.
+ *
+ * When `target` is a `ShadowRoot`, the observer listens for `slotchange` events
+ * bubbling to it and diffs the **union** of `assignedNodes({ flatten: true })`
+ * across every descendant `<slot>`. Cross-slot reassignment of the same node
+ * does not change the union and therefore fires no callback.
  */
 export class SlotObserver {
-  constructor(slot, callback, forceInitial) {
-    /** @type HTMLSlotElement */
-    this.slot = slot;
+  constructor(target, callback, forceInitial) {
+    /** @type {HTMLSlotElement | DocumentFragment} */
+    this.target = target;
 
-    /** @type Function */
+    /** @type {Function} */
     this.callback = callback;
 
-    /** @type boolean */
+    /** @type {boolean} */
     this.forceInitial = forceInitial;
 
     /** @type {Node[]} */
     this._storedNodes = [];
 
+    /** @type {boolean} */
+    this._isSlot = target instanceof HTMLSlotElement;
+
     this._connected = false;
     this._scheduled = false;
 
@@ -38,7 +49,7 @@ export class SlotObserver {
    * an observer that has been deactivated via the `disconnect` method.
    */
   connect() {
-    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this.target.addEventListener('slotchange', this._boundSchedule);
     this._connected = true;
   }
 
@@ -48,7 +59,7 @@ export class SlotObserver {
    * may be subsequently called to reactivate the observer.
    */
   disconnect() {
-    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this.target.removeEventListener('slotchange', this._boundSchedule);
     this._connected = false;
   }
 
@@ -77,27 +88,56 @@ export class SlotObserver {
   }
 
   /** @private */
-  _processNodes() {
-    const currentNodes = this.slot.assignedNodes({ flatten: true });
+  _collectNodes() {
+    const slots = this._isSlot ? [this.target] : [...this.target.querySelectorAll('slot')];
+    return [...new Set(slots.flatMap((slot) => slot.assignedNodes({ flatten: true })))];
+  }
 
-    let addedNodes = [];
-    const removedNodes = [];
-    const movedNodes = [];
+  /** @private */
+  _groupNodesBySlot(nodes) {
+    const map = new Map();
+    nodes.forEach((node) => {
+      const slot = node.assignedSlot;
+      map.set(slot, map.get(slot) ?? []);
+      map.get(slot).push(node);
+    });
+    return map;
+  }
 
-    if (currentNodes.length) {
-      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
-    }
+  /**
+   * Collect moved nodes reordered within its current slot,
+   * but not those that are assigned to different slot.
+   *
+   * @private
+   */
+  _collectMovedNodes(currentNodes) {
+    const currentPerSlot = this._groupNodesBySlot(currentNodes);
+    const storedPerSlot = this._groupNodesBySlot(this._storedNodes);
+    const movedNodes = [];
 
-    if (this._storedNodes.length) {
-      this._storedNodes.forEach((node, index) => {
-        const idx = currentNodes.indexOf(node);
-        if (idx === -1) {
-          removedNodes.push(node);
-        } else if (idx !== index) {
+    currentPerSlot.forEach((nodes, slot) => {
+      const stored = storedPerSlot.get(slot) || [];
+      // Skip slots whose membership changed: nodes entered or left the slot.
+      if (new Set(stored).difference(new Set(nodes)).size > 0) {
+        return;
+      }
+      stored.forEach((node, storedIndex) => {
+        if (nodes.indexOf(node) !== storedIndex) {
           movedNodes.push(node);
         }
       });
-    }
+    });
+
+    return movedNodes;
+  }
+
+  /** @private */
+  _processNodes() {
+    const currentNodes = this._collectNodes();
+
+    const addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    const removedNodes = this._storedNodes.filter((node) => !currentNodes.includes(node));
+    const movedNodes = this._collectMovedNodes(currentNodes);
 
     // By default, callback is not invoked if there is no child nodes in the slot.
     // Use `forceInitial` flag if needed to also invoke it for the initial state.

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

@@ -22,9 +22,7 @@ import { addGlobalStyles } from './add-global-styles.js';
     name: propertyName,
     syntax: '<color>',
     inherits: true,
-    // Use this initial value so the color stays visible when the property
-    // is set to an invalid value to make debugging a bit easier.
-    initialValue: 'light-dark(black, white)',
+    initialValue: 'transparent',
   });
 });
 
@@ -86,6 +84,7 @@ addGlobalStyles(
         --_vaadin-icon-calendar: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>');
         --_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');
         --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
+        --_vaadin-icon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
         --_vaadin-icon-clock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>');
         --_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
         --_vaadin-icon-drag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M11 7c0 .82843-.6716 1.5-1.5 1.5C8.67157 8.5 8 7.82843 8 7s.67157-1.5 1.5-1.5c.8284 0 1.5.67157 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5Zm5-10c0 .82843-.6716 1.5-1.5 1.5S13 7.82843 13 7s.6716-1.5 1.5-1.5S16 6.17157 16 7Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 12.8284 13 12s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5c0 .8284-.6716 1.5-1.5 1.5S13 17.8284 13 17s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z" fill="currentColor"/></svg>');

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

@@ -515,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 */