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

package/lumo-injection-mixin.js

@@ -16,7 +16,7 @@ const registeredProperties = new Set();
  * @param {HTMLElement} element
  * @return {DocumentOrShadowRoot}
  */
-function findRoot(element) {
+export function findRoot(element) {
   const root = element.getRootNode();
 
   if (root.host && root.host.constructor.version) {
@@ -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-alpha9",
+  "version": "25.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -33,14 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
+    "@vaadin/component-base": "25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta2",
+    "@vaadin/test-runner-commands": "25.0.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
 }

package/src/css-property-observer.js

@@ -9,51 +9,52 @@
  *
  * @private
  */
-export class CSSPropertyObserver {
+export class CSSPropertyObserver extends EventTarget {
   #root;
-  #name;
-  #callback;
   #properties = new Set();
   #styleSheet;
   #isConnected = false;
 
-  constructor(root, name, callback) {
+  constructor(root) {
+    super();
     this.#root = root;
-    this.#name = name;
-    this.#callback = callback;
+    this.#styleSheet = new CSSStyleSheet();
   }
 
   #handleTransitionEvent(event) {
     const { propertyName } = event;
     if (this.#properties.has(propertyName)) {
-      this.#callback(propertyName);
+      this.dispatchEvent(new CustomEvent('property-changed', { detail: { propertyName } }));
     }
   }
 
   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 {
+      :root::before, :host::before {
         content: '' !important;
         position: absolute !important;
         top: -9999px !important;
         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 +70,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;
   }
@@ -77,4 +77,14 @@ export class CSSPropertyObserver {
   get #rootHost() {
     return this.#root.documentElement ?? this.#root.host;
   }
+
+  /**
+   * Gets or creates the CSSPropertyObserver for the given root.
+   * @param {DocumentOrShadowRoot} root
+   * @returns {CSSPropertyObserver}
+   */
+  static for(root) {
+    root.__cssPropertyObserver ||= new CSSPropertyObserver(root);
+    return root.__cssPropertyObserver;
+  }
 }

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,14 +82,13 @@ 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.#updateStyleSheet(tagName);
-    });
+    this.handlePropertyChange = this.handlePropertyChange.bind(this);
+    this.#cssPropertyObserver = CSSPropertyObserver.for(root);
+    this.#cssPropertyObserver.addEventListener('property-changed', this.handlePropertyChange);
   }
 
   disconnect() {
-    this.#cssPropertyObserver.disconnect();
+    this.#cssPropertyObserver.removeEventListener('property-changed', this.handlePropertyChange);
     this.#styleSheetsByTag.clear();
     this.#componentsByTag.values().forEach((components) => components.forEach(removeLumoStyleSheet));
   }
@@ -98,7 +97,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
@@ -134,6 +133,14 @@ export class LumoInjector {
     removeLumoStyleSheet(component);
   }
 
+  handlePropertyChange(event) {
+    const { propertyName } = event.detail;
+    const tagName = propertyName.match(/^--_lumo-(.*)-inject$/u)?.[1];
+    if (tagName) {
+      this.#updateStyleSheet(tagName);
+    }
+  }
+
   #initStyleSheet(tagName) {
     this.#styleSheetsByTag.set(tagName, new CSSStyleSheet());
     this.#updateStyleSheet(tagName);

package/src/lumo-modules.js

@@ -3,9 +3,33 @@
  * Copyright (c) 2000 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { issueWarning } from '@vaadin/component-base/src/warnings.js';
+
 /** @type {WeakMap<CSSStyleSheet, Record<string, Map>>} */
 const cache = new WeakMap();
 
+function getRuleMediaText(rule) {
+  try {
+    return rule.media.mediaText;
+  } catch {
+    issueWarning(
+      '[LumoInjector] Browser denied to access property "mediaText" for some CSS rules, so they were skipped.',
+    );
+    return '';
+  }
+}
+
+function getStyleSheetRules(styleSheet) {
+  try {
+    return styleSheet.cssRules;
+  } catch {
+    issueWarning(
+      '[LumoInjector] Browser denied to access property "cssRules" for some CSS stylesheets, so they were skipped.',
+    );
+    return [];
+  }
+}
+
 function parseStyleSheet(
   styleSheet,
   result = {
@@ -13,20 +37,11 @@ function parseStyleSheet(
     modules: new Map(),
   },
 ) {
-  let cssRules;
-  try {
-    cssRules = styleSheet.cssRules;
-  } catch {
-    // External stylesheets may not be accessible due to CORS security restrictions.
-    cssRules = [];
-  }
-
-  for (const rule of cssRules) {
-    const { media } = rule;
-
+  for (const rule of getStyleSheetRules(styleSheet)) {
     if (rule instanceof CSSImportRule) {
-      if (media?.mediaText.startsWith('lumo_')) {
-        result.modules.set(media.mediaText, [...rule.styleSheet.cssRules]);
+      const mediaText = getRuleMediaText(rule);
+      if (mediaText.startsWith('lumo_')) {
+        result.modules.set(mediaText, [...rule.styleSheet.cssRules]);
       } else {
         parseStyleSheet(rule.styleSheet, result);
       }
@@ -35,16 +50,17 @@ function parseStyleSheet(
     }
 
     if (rule instanceof CSSMediaRule) {
-      if (media?.mediaText.startsWith('lumo_')) {
-        result.modules.set(media.mediaText, [...rule.cssRules]);
+      const mediaText = getRuleMediaText(rule);
+      if (mediaText.startsWith('lumo_')) {
+        result.modules.set(mediaText, [...rule.cssRules]);
       }
 
       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;
         }
@@ -95,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;
  * }

package/src/theme-detector.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSPropertyObserver } from './css-property-observer.js';
+
+// Register CSS custom properties for observing theme changes
+CSS.registerProperty({
+  name: '--vaadin-aura-theme',
+  syntax: '<number>',
+  inherits: true,
+  initialValue: '0',
+});
+
+CSS.registerProperty({
+  name: '--vaadin-lumo-theme',
+  syntax: '<number>',
+  inherits: true,
+  initialValue: '0',
+});
+
+/**
+ * Observes a root (Document or ShadowRoot) for which Vaadin theme is currently applied.
+ * Notifies about theme changes by firing a `theme-changed` event.
+ *
+ * WARNING: For internal use only. Do not use this class in custom components.
+ *
+ * @private
+ */
+export class ThemeDetector extends EventTarget {
+  /** @type {DocumentOrShadowRoot} */
+  #root;
+  /** @type {CSSPropertyObserver} */
+  #observer;
+  /** @type {{ aura: boolean; lumo: boolean }} */
+  #themes = { aura: false, lumo: false };
+  /** @type {(event: CustomEvent) => void} */
+  #boundHandleThemeChange = this.#handleThemeChange.bind(this);
+
+  constructor(root) {
+    super();
+    this.#root = root;
+    this.#detectTheme();
+
+    this.#observer = CSSPropertyObserver.for(this.#root);
+    this.#observer.observe('--vaadin-aura-theme');
+    this.#observer.observe('--vaadin-lumo-theme');
+    this.#observer.addEventListener('property-changed', this.#boundHandleThemeChange);
+  }
+
+  get themes() {
+    return { ...this.#themes };
+  }
+
+  #handleThemeChange(event) {
+    const { propertyName } = event.detail;
+    if (!['--vaadin-aura-theme', '--vaadin-lumo-theme'].includes(propertyName)) {
+      return;
+    }
+
+    this.#detectTheme();
+    this.dispatchEvent(new CustomEvent('theme-changed'));
+  }
+
+  #detectTheme() {
+    const rootElement = this.#root.documentElement ?? this.#root.host;
+    const style = getComputedStyle(rootElement);
+    this.#themes = {
+      aura: style.getPropertyValue('--vaadin-aura-theme').trim() === '1',
+      lumo: style.getPropertyValue('--vaadin-lumo-theme').trim() === '1',
+    };
+  }
+
+  disconnect() {
+    this.#observer.removeEventListener('property-changed', this.#boundHandleThemeChange);
+  }
+}

package/vaadin-themable-mixin.d.ts

@@ -7,9 +7,6 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { CSSResult, CSSResultGroup } from 'lit';
 import type { ThemePropertyMixinClass } from './vaadin-theme-property-mixin.js';
 
-/**
- * A mixin for `nav` elements, facilitating navigation and selection of childNodes.
- */
 export declare function ThemableMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ThemableMixinClass> & Constructor<ThemePropertyMixinClass> & T;
@@ -29,18 +26,6 @@ export declare interface ThemableMixinClass extends ThemePropertyMixinClass {}
  */
 declare function registerStyles(themeFor: string | null, styles: CSSResultGroup, options?: object | null): void;
 
-type Theme = {
-  themeFor: string;
-  styles: CSSResult[];
-  moduleId?: string;
-  include?: string[] | string;
-};
-
-/**
- * For internal purposes only.
- */
-declare const __themeRegistry: Theme[];
-
 export { css, unsafeCSS } from 'lit';
 
-export { registerStyles, __themeRegistry };
+export { registerStyles };

package/vaadin-themable-mixin.js

@@ -55,7 +55,6 @@ function hasThemes(tagName) {
 /**
  * Flattens the styles into a single array of styles.
  * @param {CSSResultGroup} styles
- * @param {CSSResult[]} result
  * @returns {CSSResult[]}
  */
 function flattenStyles(styles = []) {
@@ -234,18 +233,6 @@ export function registerStyles(themeFor, styles, options = {}) {
   }
 }
 
-/**
- * Returns all registered themes. By default the themeRegistry is returned as is.
- * In case the style-modules adapter is imported, the themes are obtained from there instead
- * @returns {Theme[]}
- */
-function getAllThemes() {
-  if (window.Vaadin && window.Vaadin.styleModules) {
-    return window.Vaadin.styleModules.getAllThemes();
-  }
-  return themeRegistry;
-}
-
 /**
  * Maps the moduleName to an include priority number which is used for
  * determining the order in which styles are applied.
@@ -271,7 +258,7 @@ function getIncludedStyles(theme) {
   const includedStyles = [];
   if (theme.include) {
     [].concat(theme.include).forEach((includeModuleId) => {
-      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
+      const includedTheme = themeRegistry.find((s) => s.moduleId === includeModuleId);
       if (includedTheme) {
         includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
       } else {
@@ -291,7 +278,7 @@ function getIncludedStyles(theme) {
 function getThemes(tagName) {
   const defaultModuleName = `${tagName}-default-theme`;
 
-  const themes = getAllThemes()
+  const themes = themeRegistry
     // Filter by matching themeFor properties
     .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
     .map((theme) => ({
@@ -308,7 +295,7 @@ function getThemes(tagName) {
     return themes;
   }
   // No theme modules found, return the default module if it exists
-  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
+  return themeRegistry.filter((theme) => theme.moduleId === defaultModuleName);
 }
 
 /**
@@ -380,5 +367,3 @@ export const ThemableMixin = (superClass) =>
       return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
     }
   };
-
-export { themeRegistry as __themeRegistry };

package/vaadin-theme-detection-mixin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function ThemeDetectionMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ThemeDetectionMixinClass> & T;
+
+export declare class ThemeDetectionMixinClass {}

package/vaadin-theme-detection-mixin.js

@@ -0,0 +1,58 @@
+import { findRoot } from './lumo-injection-mixin.js';
+import { ThemeDetector } from './src/theme-detector.js';
+
+/**
+ * Mixin for detecting which Vaadin theme is applied to the application.
+ * Automatically adds a `data-application-theme` attribute to the host
+ * element with the name of the detected theme (`lumo` or `aura`), which
+ * can be used in component styles to apply theme-specific styling.
+ *
+ * @polymerMixin
+ */
+export const ThemeDetectionMixin = (superClass) =>
+  class ThemeDetectionMixinClass extends superClass {
+    constructor() {
+      super();
+
+      this.__applyDetectedTheme = this.__applyDetectedTheme.bind(this);
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (this.isConnected) {
+        const root = findRoot(this);
+        root.__themeDetector = root.__themeDetector || new ThemeDetector(root);
+        this.__themeDetector = root.__themeDetector;
+        this.__themeDetector.addEventListener('theme-changed', this.__applyDetectedTheme);
+        this.__applyDetectedTheme();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      if (this.__themeDetector) {
+        this.__themeDetector.removeEventListener('theme-changed', this.__applyDetectedTheme);
+        this.__themeDetector = null;
+      }
+    }
+
+    /** @private */
+    __applyDetectedTheme() {
+      if (!this.__themeDetector) {
+        return;
+      }
+
+      const themes = this.__themeDetector.themes;
+      if (themes.aura) {
+        this.dataset.applicationTheme = 'aura';
+      } else if (themes.lumo) {
+        this.dataset.applicationTheme = 'lumo';
+      } else {
+        delete this.dataset.applicationTheme;
+      }
+    }
+  };