@vaadin/vaadin-themable-mixin 25.0.0-alpha6 → 25.0.0-alpha7

package/lumo-injection-mixin.js

@@ -61,6 +61,12 @@ export const LumoInjectionMixin = (superClass) =>
       return `--${this.is}-lumo-inject`;
     }
 
+    static get lumoInjector() {
+      return {
+        includeBaseStyles: false,
+      };
+    }
+
     /** @protected */
     connectedCallback() {
       super.connectedCallback();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.0.0-alpha6",
+  "version": "25.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -37,10 +37,10 @@
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha6",
-    "@vaadin/test-runner-commands": "25.0.0-alpha6",
+    "@vaadin/chai-plugins": "25.0.0-alpha7",
+    "@vaadin/test-runner-commands": "25.0.0-alpha7",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
+  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
 }

package/src/css-utils.js

@@ -15,16 +15,14 @@ import { adoptStyles } from 'lit';
  * @return {CSSStyleSheet[]}
  */
 function getEffectiveStyles(component) {
-  const componentClass = component.constructor;
+  const { baseStyles, themeStyles, elementStyles, lumoInjector } = component.constructor;
+  const lumoStyleSheet = component.__lumoStyleSheet;
 
-  const styleSheet = component.__lumoInjectorStyleSheet;
-  if (styleSheet) {
-    return (componentClass.baseStyles ?? componentClass.themeStyles)
-      ? [...componentClass.baseStyles, styleSheet, ...componentClass.themeStyles]
-      : [styleSheet, ...componentClass.elementStyles];
+  if (lumoStyleSheet && (baseStyles || themeStyles)) {
+    return [...(lumoInjector.includeBaseStyles ? baseStyles : []), lumoStyleSheet, ...themeStyles];
   }
 
-  return componentClass.elementStyles;
+  return [lumoStyleSheet, ...elementStyles].filter(Boolean);
 }
 
 /**
@@ -47,7 +45,7 @@ export function applyInstanceStyles(component) {
  */
 export function injectLumoStyleSheet(component, styleSheet) {
   // Store the new stylesheet so that it can be removed later.
-  component.__lumoInjectorStyleSheet = styleSheet;
+  component.__lumoStyleSheet = styleSheet;
   applyInstanceStyles(component);
 }
 
@@ -57,11 +55,7 @@ export function injectLumoStyleSheet(component, styleSheet) {
  *
  * @param {HTMLElement} component
  */
-export function cleanupLumoStyleSheet(component) {
-  const adoptedStyleSheets = component.shadowRoot.adoptedStyleSheets.filter(
-    (s) => s !== component.__lumoInjectorStyleSheet,
-  );
-
-  component.shadowRoot.adoptedStyleSheets = adoptedStyleSheets;
-  component.__lumoInjectorStyleSheet = undefined;
+export function removeLumoStyleSheet(component) {
+  component.__lumoStyleSheet = undefined;
+  applyInstanceStyles(component);
 }

package/src/lumo-injector.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { CSSPropertyObserver } from './css-property-observer.js';
-import { cleanupLumoStyleSheet, injectLumoStyleSheet } from './css-utils.js';
+import { injectLumoStyleSheet, removeLumoStyleSheet } from './css-utils.js';
 import { parseStyleSheets } from './lumo-modules.js';
 
 /**
@@ -77,6 +77,9 @@ export class LumoInjector {
   /** @type {Map<string, CSSStyleSheet>} */
   #styleSheetsByTag = new Map();
 
+  /** @type {Map<string, Set<HTMLElement>>} */
+  #componentsByTag = new Map();
+
   constructor(root = document) {
     this.#root = root;
     this.#cssPropertyObserver = new CSSPropertyObserver(this.#root, 'vaadin-lumo-injector', (propertyName) => {
@@ -97,9 +100,8 @@ export class LumoInjector {
   componentConnected(component) {
     const { is: tagName, lumoInjectPropName } = component.constructor;
 
-    const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
-    injectLumoStyleSheet(component, stylesheet);
-    this.#styleSheetsByTag.set(tagName, stylesheet);
+    this.#componentsByTag.set(tagName, this.#componentsByTag.get(tagName) ?? new Set());
+    this.#componentsByTag.get(tagName).add(component);
 
     this.#updateComponentStyleSheet(tagName);
 
@@ -113,7 +115,10 @@ export class LumoInjector {
    * @param {HTMLElement} component
    */
   componentDisconnected(component) {
-    cleanupLumoStyleSheet(component);
+    const { is: tagName } = component.constructor;
+    this.#componentsByTag.get(tagName)?.delete(component);
+
+    removeLumoStyleSheet(component);
   }
 
   #updateComponentStyleSheet(tagName) {
@@ -127,6 +132,14 @@ export class LumoInjector {
     const stylesheet = this.#styleSheetsByTag.get(tagName) ?? new CSSStyleSheet();
     stylesheet.replaceSync(cssText);
     this.#styleSheetsByTag.set(tagName, stylesheet);
+
+    this.#componentsByTag.get(tagName)?.forEach((component) => {
+      if (cssText) {
+        injectLumoStyleSheet(component, stylesheet);
+      } else {
+        removeLumoStyleSheet(component);
+      }
+    });
   }
 
   get #rootStyleSheets() {