@vaadin/vaadin-themable-mixin 25.0.0-alpha19 → 25.0.0-alpha20

package/lumo-injection-mixin.js

@@ -58,7 +58,7 @@ export const LumoInjectionMixin = (superClass) =>
     }
 
     static get lumoInjectPropName() {
-      return `--${this.is}-lumo-inject`;
+      return `--_lumo-${this.is}-inject`;
     }
 
     static get lumoInjector() {

package/package.json

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

package/src/css-property-observer.js

@@ -11,16 +11,15 @@
  */
 export class CSSPropertyObserver {
   #root;
-  #name;
   #callback;
   #properties = new Set();
   #styleSheet;
   #isConnected = false;
 
-  constructor(root, name, callback) {
+  constructor(root, callback) {
     this.#root = root;
-    this.#name = name;
     this.#callback = callback;
+    this.#styleSheet = new CSSStyleSheet();
   }
 
   #handleTransitionEvent(event) {
@@ -33,16 +32,12 @@ export class CSSPropertyObserver {
   observe(property) {
     this.connect();
 
-    this.#properties.add(property);
-    this.#rootHost.style.setProperty(`--${this.#name}-props`, [...this.#properties].join(', '));
-  }
-
-  connect() {
-    if (this.#isConnected) {
+    if (this.#properties.has(property)) {
       return;
     }
 
-    this.#styleSheet = new CSSStyleSheet();
+    this.#properties.add(property);
+
     this.#styleSheet.replaceSync(`
       :is(:root, :host)::before {
         content: '' !important;
@@ -51,9 +46,16 @@ export class CSSPropertyObserver {
         left: -9999px !important;
         visibility: hidden !important;
         transition: 1ms allow-discrete step-end !important;
-        transition-property: var(--${this.#name}-props) !important;
+        transition-property: ${[...this.#properties].join(', ')} !important;
       }
     `);
+  }
+
+  connect() {
+    if (this.#isConnected) {
+      return;
+    }
+
     this.#root.adoptedStyleSheets.unshift(this.#styleSheet);
 
     this.#rootHost.addEventListener('transitionstart', (event) => this.#handleTransitionEvent(event));
@@ -69,7 +71,6 @@ export class CSSPropertyObserver {
 
     this.#rootHost.removeEventListener('transitionstart', this.#handleTransitionEvent);
     this.#rootHost.removeEventListener('transitionend', this.#handleTransitionEvent);
-    this.#rootHost.style.removeProperty(`--${this.#name}-props`);
 
     this.#isConnected = false;
   }

package/src/lumo-injector.js

@@ -34,26 +34,26 @@ import { parseStyleSheets } from './lumo-modules.js';
  * }
  *
  * html {
- *   --vaadin-text-field-lumo-inject: 1;
- *   --vaadin-text-field-lumo-inject-modules:
+ *   --_lumo-vaadin-text-field-inject: 1;
+ *   --_lumo-vaadin-text-field-inject-modules:
  *      lumo_base-field,
  *      lumo_text-field;
  *
- *   --vaadin-email-field-lumo-inject: 1;
- *   --vaadin-email-field-lumo-inject-modules:
+ *   --_lumo-vaadin-email-field-inject: 1;
+ *   --_lumo-vaadin-email-field-inject-modules:
  *      lumo_base-field,
  *      lumo_email-field;
  * }
  * ```
  *
- * The class observes the custom property `--{tagName}-lumo-inject`,
+ * The class observes the custom property `--_lumo-{tagName}-inject`,
  * which indicates whether styles are present for the given component
  * in the document style sheets. When the property is set to `1`, the
  * class recursively searches all document style sheets for CSS modules
- * listed in the `--{tagName}-lumo-inject-modules` property that apply to
+ * listed in the `--_lumo-{tagName}-inject-modules` property that apply to
  * the given component tag name. The found rules are then injected
  * into the component's Shadow DOM using the `adoptedStyleSheets` API,
- * in the order specified in the `--{tagName}-lumo-inject-modules` property.
+ * in the order specified in the `--_lumo-{tagName}-inject-modules` property.
  * The same module can be used in multiple components.
  *
  * The class also removes the injected styles when the property is set to `0`.
@@ -82,8 +82,8 @@ export class LumoInjector {
 
   constructor(root = document) {
     this.#root = root;
-    this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, 'vaadin-lumo-injector', (propertyName) => {
-      const tagName = propertyName.slice(2).replace('-lumo-inject', '');
+    this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, (propertyName) => {
+      const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
       this.#updateStyleSheet(tagName);
     });
   }
@@ -98,7 +98,7 @@ export class LumoInjector {
    * Adds a component to the list of elements monitored for style injection.
    * If the styles have already been detected, they are injected into the
    * component's shadow DOM immediately. Otherwise, the class watches the
-   * custom property `--{tagName}-lumo-inject` to trigger injection when
+   * custom property `--_lumo-{tagName}-inject` to trigger injection when
    * the styles are added to the document or root element.
    *
    * @param {HTMLElement} component

package/src/lumo-modules.js

@@ -58,9 +58,9 @@ function parseStyleSheet(
       continue;
     }
 
-    if (rule instanceof CSSStyleRule && rule.cssText.includes('-lumo-inject')) {
+    if (rule instanceof CSSStyleRule && rule.cssText.includes('-inject')) {
       for (const property of rule.style) {
-        const tagName = property.match(/^--(.*)-lumo-inject-modules$/u)?.[1];
+        const tagName = property.match(/^--_lumo-(.*)-inject-modules$/u)?.[1];
         if (!tagName) {
           continue;
         }
@@ -111,7 +111,7 @@ function parseStyleSheet(
  *
  * ```css
  * html {
- *   --vaadin-text-field-lumo-inject-modules:
+ *   --_lumo-vaadin-text-field-inject-modules:
  *      lumo_base-field,
  *      lumo_text-field;
  * }