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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha8",
+  "version": "25.3.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha8",
-    "@vaadin/test-runner-commands": "25.3.0-alpha8",
+    "@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": "ccbb4aaffb63c745c6da0426b532d4d05e47af29"
+  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
 }

package/src/define.js

@@ -13,7 +13,7 @@ function dashToCamelCase(dash) {
 
 const experimentalMap = {};
 
-export function defineCustomElement(CustomElement, version = '25.3.0-alpha8') {
+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/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