@vaadin/vaadin-themable-mixin 25.0.0-beta2 → 25.0.0-beta4

package/lumo-injection-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { LumoInjector } from './src/lumo-injector.js';
+import { getLumoInjectorPropName, LumoInjector } from './src/lumo-injector.js';
 
 /**
  * @type {Set<string>}
@@ -36,7 +36,7 @@ export const LumoInjectionMixin = (superClass) =>
     static finalize() {
       super.finalize();
 
-      const propName = this.lumoInjectPropName;
+      const propName = getLumoInjectorPropName(this.lumoInjector);
 
       // Prevent registering same property twice when a class extends
       // another class using this mixin, since `finalize()` is called
@@ -57,12 +57,9 @@ export const LumoInjectionMixin = (superClass) =>
       }
     }
 
-    static get lumoInjectPropName() {
-      return `--_lumo-${this.is}-inject`;
-    }
-
     static get lumoInjector() {
       return {
+        is: this.is,
         includeBaseStyles: false,
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-beta2",
+  "version": "25.0.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-beta2",
+    "@vaadin/component-base": "25.0.0-beta4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-beta2",
-    "@vaadin/test-runner-commands": "25.0.0-beta2",
+    "@vaadin/chai-plugins": "25.0.0-beta4",
+    "@vaadin/test-runner-commands": "25.0.0-beta4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.0"
   },
-  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
+  "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
 }

package/src/lumo-injector.js

@@ -7,6 +7,10 @@ import { CSSPropertyObserver } from './css-property-observer.js';
 import { injectLumoStyleSheet, removeLumoStyleSheet } from './css-utils.js';
 import { parseStyleSheets } from './lumo-modules.js';
 
+export function getLumoInjectorPropName(lumoInjector) {
+  return `--_lumo-${lumoInjector.is}-inject`;
+}
+
 /**
  * Implements auto-injection of CSS styles from document style sheets
  * into the Shadow DOM of corresponding Vaadin components.
@@ -103,7 +107,8 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentConnected(component) {
-    const { is: tagName, lumoInjectPropName } = component.constructor;
+    const { lumoInjector } = component.constructor;
+    const { is: tagName } = lumoInjector;
 
     this.#componentsByTag.set(tagName, this.#componentsByTag.get(tagName) ?? new Set());
     this.#componentsByTag.get(tagName).add(component);
@@ -117,7 +122,9 @@ export class LumoInjector {
     }
 
     this.#initStyleSheet(tagName);
-    this.#cssPropertyObserver.observe(lumoInjectPropName);
+
+    const propName = getLumoInjectorPropName(lumoInjector);
+    this.#cssPropertyObserver.observe(propName);
   }
 
   /**
@@ -127,7 +134,7 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentDisconnected(component) {
-    const { is: tagName } = component.constructor;
+    const { is: tagName } = component.constructor.lumoInjector;
     this.#componentsByTag.get(tagName)?.delete(component);
 
     removeLumoStyleSheet(component);