@vaadin/component-base 25.3.0-alpha6 → 25.3.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha6",
+  "version": "25.3.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha6",
-    "@vaadin/test-runner-commands": "25.3.0-alpha6",
+    "@vaadin/chai-plugins": "25.3.0-alpha8",
+    "@vaadin/test-runner-commands": "25.3.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "92c124fb9cff367bc07e734d8e65707facd0bd43"
+  "gitHead": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
 }

package/src/define.js

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

package/src/directives/part-map.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { DirectiveResult } from 'lit/directive.js';
+
+/**
+ * A key-value set of part names to truthy values.
+ */
+export interface PartNameInfo {
+  readonly [name: string]: string | boolean | number | null | undefined;
+}
+
+/**
+ * A directive that applies dynamic shadow DOM part names.
+ *
+ * This must be used in the `part` attribute and must be the only binding in it.
+ * Each property name in `partNameInfo` is added to the element's `part` list
+ * if the property value is truthy, and removed if the value is falsy.
+ */
+export declare function partMap(partNameInfo: PartNameInfo): DirectiveResult;

package/src/directives/part-map.js

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright (c) 2026 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { noChange } from 'lit';
+import { Directive, directive, PartType } from 'lit/directive.js';
+
+class PartMapDirective extends Directive {
+  // Part names applied by the directive on the previous render,
+  // used to remove names that no longer apply.
+  #previousParts;
+
+  // Part names declared statically in the attribute, never removed.
+  #staticParts;
+
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== 'part' || partInfo.strings?.length > 2) {
+      throw new Error('`partMap()` can only be used in the `part` attribute and must be the only binding in it.');
+    }
+  }
+
+  render(partNameInfo) {
+    // Add spaces to ensure separation from static parts
+    return ` ${Object.keys(partNameInfo)
+      .filter((key) => partNameInfo[key])
+      .join(' ')} `;
+  }
+
+  update(part, [partNameInfo]) {
+    // Remember dynamic parts on the first render
+    if (this.#previousParts === undefined) {
+      this.#previousParts = new Set();
+      if (part.strings !== undefined) {
+        this.#staticParts = new Set(
+          part.strings
+            .join(' ')
+            .split(/\s/u)
+            .filter((s) => s !== ''),
+        );
+      }
+      Object.keys(partNameInfo).forEach((name) => {
+        if (partNameInfo[name] && !this.#staticParts?.has(name)) {
+          this.#previousParts.add(name);
+        }
+      });
+      return this.render(partNameInfo);
+    }
+
+    const partList = part.element.part;
+
+    // Remove old parts that no longer apply
+    this.#previousParts.forEach((name) => {
+      if (!(name in partNameInfo)) {
+        partList.remove(name);
+        this.#previousParts.delete(name);
+      }
+    });
+
+    // Add or remove parts based on their partMap value
+    Object.keys(partNameInfo).forEach((name) => {
+      const value = !!partNameInfo[name];
+      if (value !== this.#previousParts.has(name) && !this.#staticParts?.has(name)) {
+        if (value) {
+          partList.add(name);
+          this.#previousParts.add(name);
+        } else {
+          partList.remove(name);
+          this.#previousParts.delete(name);
+        }
+      }
+    });
+
+    return noChange;
+  }
+}
+
+/**
+ * A directive that applies dynamic shadow DOM part names.
+ *
+ * This must be used in the `part` attribute and must be the only binding in it.
+ * Each property name in `partNameInfo` is added to the element's `part` list
+ * if the property value is truthy, and removed if the value is falsy.
+ */
+export const partMap = directive(PartMapDirective);

package/src/media-query-controller.js

@@ -8,6 +8,9 @@
  * A controller for listening on media query changes.
  */
 export class MediaQueryController {
+  /** @type {MediaQueryList | null} */
+  #mediaQuery = null;
+
   constructor(query, callback) {
     /**
      * The CSS media query to evaluate.
@@ -24,44 +27,39 @@ export class MediaQueryController {
      * @protected
      */
     this.callback = callback;
-
-    this._boundQueryHandler = this._queryHandler.bind(this);
   }
 
   hostConnected() {
-    this._removeListener();
+    this.#removeListener();
 
-    this._mediaQuery = window.matchMedia(this.query);
+    this.#mediaQuery = window.matchMedia(this.query);
 
-    this._addListener();
+    this.#addListener();
 
-    this._queryHandler(this._mediaQuery);
+    this.#queryHandler(this.#mediaQuery);
   }
 
   hostDisconnected() {
-    this._removeListener();
+    this.#removeListener();
   }
 
-  /** @private */
-  _addListener() {
-    if (this._mediaQuery) {
-      this._mediaQuery.addListener(this._boundQueryHandler);
+  #addListener() {
+    if (this.#mediaQuery) {
+      this.#mediaQuery.addListener(this.#queryHandler);
     }
   }
 
-  /** @private */
-  _removeListener() {
-    if (this._mediaQuery) {
-      this._mediaQuery.removeListener(this._boundQueryHandler);
+  #removeListener() {
+    if (this.#mediaQuery) {
+      this.#mediaQuery.removeListener(this.#queryHandler);
     }
 
-    this._mediaQuery = null;
+    this.#mediaQuery = null;
   }
 
-  /** @private */
-  _queryHandler(mediaQuery) {
+  #queryHandler = (mediaQuery) => {
     if (typeof this.callback === 'function') {
       this.callback(mediaQuery.matches);
     }
-  }
+  };
 }

package/src/overflow-controller.js

@@ -10,6 +10,15 @@
  * where content is overflowing. Supported values are: `top`, `bottom`, `start`, `end`.
  */
 export class OverflowController {
+  /** @type {ResizeObserver} */
+  #resizeObserver;
+
+  /** @type {MutationObserver} */
+  #childObserver;
+
+  /** @type {number} */
+  #resizeRaf;
+
   constructor(host, scrollTarget) {
     /**
      * The controller host element.
@@ -25,9 +34,6 @@ export class OverflowController {
      * @type {HTMLElement}
      */
     this.scrollTarget = scrollTarget || host;
-
-    /** @private */
-    this.__boundOnScroll = this.__onScroll.bind(this);
   }
 
   hostConnected() {
@@ -46,64 +52,60 @@ export class OverflowController {
   observe() {
     const { host } = this;
 
-    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
-    this.__resizeObserver.observe(host);
+    this.#resizeObserver = new ResizeObserver(() => this.#onResize());
+    this.#resizeObserver.observe(host);
 
     // Observe initial children
     [...host.children].forEach((child) => {
-      this.__resizeObserver.observe(child);
+      this.#resizeObserver.observe(child);
     });
 
-    this.__childObserver = new MutationObserver((mutations) => {
+    this.#childObserver = new MutationObserver((mutations) => {
       mutations.forEach(({ addedNodes, removedNodes }) => {
         addedNodes.forEach((node) => {
           if (node.nodeType === Node.ELEMENT_NODE) {
-            this.__resizeObserver.observe(node);
+            this.#resizeObserver.observe(node);
           }
         });
 
         removedNodes.forEach((node) => {
           if (node.nodeType === Node.ELEMENT_NODE) {
-            this.__resizeObserver.unobserve(node);
+            this.#resizeObserver.unobserve(node);
           }
         });
 
         if (addedNodes.length === 0 && removedNodes.length > 0) {
-          this.__updateState({ sync: true });
+          this.#updateState({ sync: true });
         }
       });
     });
 
-    this.__childObserver.observe(host, { childList: true });
+    this.#childObserver.observe(host, { childList: true });
 
     // Update overflow attribute on scroll
-    this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+    this.scrollTarget.addEventListener('scroll', this.#onScroll);
   }
 
-  /** @private */
-  __onResize() {
-    this.__updateState({ sync: false });
+  #onResize() {
+    this.#updateState({ sync: false });
   }
 
-  /** @private */
-  __onScroll() {
-    this.__updateState({ sync: true });
-  }
+  #onScroll = () => {
+    this.#updateState({ sync: true });
+  };
 
-  /** @private */
-  __updateState({ sync }) {
-    cancelAnimationFrame(this.__resizeRaf);
+  #updateState({ sync }) {
+    cancelAnimationFrame(this.#resizeRaf);
 
-    const state = this.__readState();
+    const state = this.#readState();
     if (sync) {
-      this.__writeState(state);
+      this.#writeState(state);
     } else {
-      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+      this.#resizeRaf = requestAnimationFrame(() => this.#writeState(state));
     }
   }
 
-  /** @private */
-  __readState() {
+  #readState() {
     const target = this.scrollTarget;
 
     let overflow = '';
@@ -128,8 +130,7 @@ export class OverflowController {
     return { overflow: overflow.trim() };
   }
 
-  /** @private */
-  __writeState({ overflow }) {
+  #writeState({ overflow }) {
     if (overflow) {
       this.host.setAttribute('overflow', overflow);
     } else {

package/src/slot-child-observe-controller.d.ts

@@ -25,4 +25,9 @@ export class SlotChildObserveController extends SlotController {
    * Override to update default node text on property change.
    */
   protected updateDefaultNode(node: Node): void;
+
+  /**
+   * Fire an event to notify the controller host about node changes.
+   */
+  protected _notifyChange(node: Node): void;
 }

package/src/slot-child-observe-controller.js

@@ -10,6 +10,9 @@ import { SlotController } from './slot-controller.js';
  * and the text content, and fires an event to notify host element about those.
  */
 export class SlotChildObserveController extends SlotController {
+  /** @type {MutationObserver} */
+  #nodeObserver;
+
   constructor(host, slot, tagName, config = {}) {
     super(host, slot, tagName, { ...config, useUniqueId: true });
   }
@@ -22,8 +25,8 @@ export class SlotChildObserveController extends SlotController {
    * @override
    */
   initCustomNode(node) {
-    this.__updateNodeId(node);
-    this.__notifyChange(node);
+    this.#updateNodeId(node);
+    this._notifyChange(node);
   }
 
   /**
@@ -39,7 +42,7 @@ export class SlotChildObserveController extends SlotController {
 
     // Custom node is added to the slot
     if (node && node !== this.defaultNode) {
-      this.__notifyChange(node);
+      this._notifyChange(node);
     } else {
       this.restoreDefaultNode();
       this.updateDefaultNode(this.node);
@@ -58,7 +61,7 @@ export class SlotChildObserveController extends SlotController {
     const node = super.attachDefaultNode();
 
     if (node) {
-      this.__updateNodeId(node);
+      this.#updateNodeId(node);
     }
 
     return node;
@@ -80,7 +83,7 @@ export class SlotChildObserveController extends SlotController {
    * @protected
    */
   updateDefaultNode(node) {
-    this.__notifyChange(node);
+    this._notifyChange(node);
   }
 
   /**
@@ -92,11 +95,11 @@ export class SlotChildObserveController extends SlotController {
    */
   observeNode(node) {
     // Stop observing the previous node, if any.
-    if (this.__nodeObserver) {
-      this.__nodeObserver.disconnect();
+    if (this.#nodeObserver) {
+      this.#nodeObserver.disconnect();
     }
 
-    this.__nodeObserver = new MutationObserver((mutations) => {
+    this.#nodeObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         const target = mutation.target;
 
@@ -108,17 +111,17 @@ export class SlotChildObserveController extends SlotController {
           // We use attributeFilter to only observe ID mutation,
           // no need to check for attribute name separately.
           if (isCurrentNodeMutation) {
-            this.__updateNodeId(target);
+            this.#updateNodeId(target);
           }
         } else if (isCurrentNodeMutation || target.parentElement === this.node) {
           // Node text content has changed.
-          this.__notifyChange(this.node);
+          this._notifyChange(this.node);
         }
       });
     });
 
     // Observe changes to node ID attribute, text content and children.
-    this.__nodeObserver.observe(node, {
+    this.#nodeObserver.observe(node, {
       attributes: true,
       attributeFilter: ['id'],
       childList: true,
@@ -133,9 +136,8 @@ export class SlotChildObserveController extends SlotController {
    *
    * @param {Node} node
    * @return {boolean}
-   * @private
    */
-  __hasContent(node) {
+  #hasContent(node) {
     if (!node) {
       return false;
     }
@@ -150,12 +152,12 @@ export class SlotChildObserveController extends SlotController {
    * Fire an event to notify the controller host about node changes.
    *
    * @param {Node} node
-   * @private
+   * @protected
    */
-  __notifyChange(node) {
+  _notifyChange(node) {
     this.dispatchEvent(
       new CustomEvent('slot-content-changed', {
-        detail: { hasContent: this.__hasContent(node), node },
+        detail: { hasContent: this.#hasContent(node), node },
       }),
     );
   }
@@ -164,9 +166,8 @@ export class SlotChildObserveController extends SlotController {
    * Set default ID on the node in case it is an HTML element.
    *
    * @param {Node} node
-   * @private
    */
-  __updateNodeId(node) {
+  #updateNodeId(node) {
     // When in multiple mode, only set ID attribute on the element in default slot.
     const isFirstNode = !this.nodes || node === this.nodes[0];
     if (node.nodeType === Node.ELEMENT_NODE && (!this.multiple || isFirstNode) && !node.id) {

package/src/slot-controller.js

@@ -202,7 +202,8 @@ export class SlotController extends EventTarget {
     const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
     const slot = this.host.shadowRoot.querySelector(selector);
 
-    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+    // eslint-disable-next-line no-new
+    new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
       const current = this.multiple ? this.nodes : [this.node];
 
       // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:

package/src/tooltip-controller.js

@@ -14,7 +14,6 @@ export class TooltipController extends SlotController {
     super(host, 'tooltip');
 
     this.setTarget(host);
-    this.__onContentChange = this.__onContentChange.bind(this);
   }
 
   /**
@@ -50,8 +49,8 @@ export class TooltipController extends SlotController {
     if (!this.manual) {
       this.host.setAttribute('has-tooltip', '');
     }
-    this.__notifyChange(tooltipNode);
-    tooltipNode.addEventListener('content-changed', this.__onContentChange);
+    this.#notifyChange(tooltipNode);
+    tooltipNode.addEventListener('content-changed', this.#onContentChange);
   }
 
   /**
@@ -65,8 +64,8 @@ export class TooltipController extends SlotController {
     if (!this.manual) {
       this.host.removeAttribute('has-tooltip');
     }
-    tooltipNode.removeEventListener('content-changed', this.__onContentChange);
-    this.__notifyChange(null);
+    tooltipNode.removeEventListener('content-changed', this.#onContentChange);
+    this.#notifyChange(null);
   }
 
   /**
@@ -179,13 +178,11 @@ export class TooltipController extends SlotController {
     }
   }
 
-  /** @private */
-  __onContentChange(event) {
-    this.__notifyChange(event.target);
-  }
+  #onContentChange = (event) => {
+    this.#notifyChange(event.target);
+  };
 
-  /** @private */
-  __notifyChange(node) {
+  #notifyChange(node) {
     this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node } }));
   }
 }