@vaadin/component-base 25.3.0-alpha7 → 25.3.0-alpha9

package/package.json

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

package/src/define.js

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

package/src/delegate-state-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { setOrRemoveAttribute } from './dom-utils.js';
 
 /**
  * A mixin to delegate properties and attributes to a target element.
@@ -103,10 +104,8 @@ const DelegateStateMixinImplementation = (superclass) => {
 
       if (typeof value === 'boolean') {
         this.stateTarget.toggleAttribute(name, value);
-      } else if (value) {
-        this.stateTarget.setAttribute(name, value);
       } else {
-        this.stateTarget.removeAttribute(name);
+        setOrRemoveAttribute(this.stateTarget, name, value);
       }
     }
 

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/dom-utils.d.ts

@@ -37,15 +37,26 @@ export function deserializeAttributeValue(value: string): Set<string>;
 export function serializeAttributeValue(values: Set<string>): string;
 
 /**
- * Adds a value to an attribute containing space-delimited values.
+ * Sets the attribute to the given value, or removes the attribute when the
+ * value is falsy (e.g. `null`, `undefined`, `false` or an empty string).
  */
-export function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
+export function setOrRemoveAttribute(
+  element: HTMLElement,
+  attr: string,
+  value: string | boolean | null | undefined,
+): void;
 
 /**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
+ * Adds one or more values to an attribute containing space-delimited values.
+ * If no values remain, the whole attribute is removed.
  */
-export function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;
+export function addValuesToAttribute(element: HTMLElement, attr: string, valuesToAdd: string | string[]): void;
+
+/**
+ * Removes one or more values from an attribute containing space-delimited values.
+ * If no values remain, the whole attribute is removed.
+ */
+export function removeValuesFromAttribute(element: HTMLElement, attr: string, valuesToRemove: string | string[]): void;
 
 /**
  * Returns true if the given node is an empty text node, false otherwise.

package/src/dom-utils.js

@@ -84,11 +84,7 @@ export function getClosestElement(selector, node) {
  * @return {Set<string>}
  */
 export function deserializeAttributeValue(value) {
-  if (!value) {
-    return new Set();
-  }
-
-  return new Set(value.split(' '));
+  return new Set(value ? value.split(' ').filter(Boolean) : []);
 }
 
 /**
@@ -102,34 +98,65 @@ export function serializeAttributeValue(values) {
 }
 
 /**
- * Adds a value to an attribute containing space-delimited values.
+ * Sets the attribute to the given value, or removes the attribute when the
+ * value is falsy (e.g. `null`, `undefined`, `false` or an empty string).
  *
  * @param {HTMLElement} element
  * @param {string} attr
- * @param {string} value
+ * @param {string | boolean | null | undefined} value
+ */
+export function setOrRemoveAttribute(element, attr, value) {
+  if (value) {
+    element.setAttribute(attr, value);
+  } else {
+    element.removeAttribute(attr);
+  }
+}
+
+/**
+ * Normalizes values passed to `addValuesToAttribute` and `removeValuesFromAttribute`
+ * into a set of values. Both a single string and every array entry may contain
+ * multiple values separated by space.
+ *
+ * @param {string | string[] | null | undefined} values
+ * @return {Set<string>}
+ */
+function normalizeAttributeValues(values) {
+  return deserializeAttributeValue(Array.isArray(values) ? values.join(' ') : values);
+}
+
+/**
+ * Adds one or more values to an attribute containing space-delimited values.
+ * If no values remain, the whole attribute is removed.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attr
+ * @param {string | string[]} valuesToAdd a string or an array of strings with values separated by space
  */
-export function addValueToAttribute(element, attr, value) {
+export function addValuesToAttribute(element, attr, valuesToAdd) {
+  valuesToAdd = normalizeAttributeValues(valuesToAdd);
+
   const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.add(value);
-  element.setAttribute(attr, serializeAttributeValue(values));
+  valuesToAdd.forEach((value) => values.add(value));
+
+  setOrRemoveAttribute(element, 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.
+ * Removes one or more values from an attribute containing space-delimited values.
+ * If no values remain, the whole attribute is removed.
  *
  * @param {HTMLElement} element
  * @param {string} attr
- * @param {string} value
+ * @param {string | string[]} valuesToRemove a string or an array of strings with values separated by space
  */
-export function removeValueFromAttribute(element, attr, value) {
+export function removeValuesFromAttribute(element, attr, valuesToRemove) {
+  valuesToRemove = normalizeAttributeValues(valuesToRemove);
+
   const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.delete(value);
-  if (values.size === 0) {
-    element.removeAttribute(attr);
-    return;
-  }
-  element.setAttribute(attr, serializeAttributeValue(values));
+  valuesToRemove.forEach((value) => values.delete(value));
+
+  setOrRemoveAttribute(element, attr, serializeAttributeValue(values));
 }
 
 /**

package/src/overflow-controller.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setOrRemoveAttribute } from './dom-utils.js';
 
 /**
  * A controller that detects if content inside the element overflows its scrolling viewport,
@@ -131,10 +132,6 @@ export class OverflowController {
   }
 
   #writeState({ overflow }) {
-    if (overflow) {
-      this.host.setAttribute('overflow', overflow);
-    } else {
-      this.host.removeAttribute('overflow');
-    }
+    setOrRemoveAttribute(this.host, 'overflow', overflow);
   }
 }

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

@@ -22,7 +22,6 @@ export class IronListAdapter {
     reorderElements,
     elementsContainer,
     __disableHeightPlaceholder,
-    __alwaysUpdateScrollerSize,
   }) {
     this.isAttached = true;
     this._vidxOffset = 0;
@@ -38,12 +37,6 @@ export class IronListAdapter {
     // elements with a non-zero height. Not for public use.
     this.__disableHeightPlaceholder = __disableHeightPlaceholder ?? false;
 
-    // Internal option: a predicate that, when it returns true, makes the scroller
-    // height always be applied instead of amortized (see `_updateScrollerSize`).
-    // Used by components whose height tracks the content exactly (e.g. the grid's
-    // `allRowsVisible` mode). Not for public use.
-    this.__alwaysUpdateScrollerSize = __alwaysUpdateScrollerSize;
-
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
@@ -223,11 +216,6 @@ export class IronListAdapter {
     this.__afterElementsUpdated(updatedElements);
   }
 
-  /** @override */
-  _updateScrollerSize(forceUpdate) {
-    super._updateScrollerSize(forceUpdate || !!this.__alwaysUpdateScrollerSize?.());
-  }
-
   /**
    * Updates the height for a given set of items.
    *
@@ -426,6 +414,8 @@ export class IronListAdapter {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
+    this._updateScrollerSize(true);
+
     // Re-render items once the scroll position has been restored.
     // This call also updates the cached scrollTarget height and
     // rechecks whether more virtual elements are needed, since the