@vaadin/component-base 25.3.0-alpha7 → 25.3.0-dev.1fa5a51482

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha7",
+  "version": "25.3.0-dev.1fa5a51482",
   "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-dev.1fa5a51482",
+    "@vaadin/test-runner-commands": "25.3.0-dev.1fa5a51482",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "ae7b9823df5598faebd7a482993029ee489c35ae"
+  "gitHead": "1cd5964b758ffbce3ddb6248a1997f55f8e0ebf6"
 }

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-dev.1fa5a51482') {
   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);