@vaadin/vaadin-themable-mixin 25.2.0-alpha8 → 25.2.0-beta1

package/lumo-injection-mixin.js

@@ -28,8 +28,6 @@ export function findRoot(element) {
 
 /**
  * Mixin for internal use only. Do not use it in custom components.
- *
- * @polymerMixin
  */
 export const LumoInjectionMixin = (superClass) =>
   class LumoInjectionMixinClass extends superClass {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "25.2.0-alpha8",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -33,15 +33,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.2.0-alpha8",
+    "@vaadin/component-base": "25.2.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "25.2.0-alpha8",
-    "@vaadin/test-runner-commands": "25.2.0-alpha8",
+    "@vaadin/chai-plugins": "25.2.0-beta1",
+    "@vaadin/test-runner-commands": "25.2.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.2"
   },
-  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

package/src/css-utils.js

@@ -18,11 +18,12 @@ function getEffectiveStyles(component) {
   const { baseStyles, themeStyles, elementStyles, lumoInjector } = component.constructor;
   const lumoStyleSheet = component.__lumoStyleSheet;
 
-  if (lumoStyleSheet && (baseStyles || themeStyles)) {
-    return [...(lumoInjector.includeBaseStyles ? baseStyles : []), lumoStyleSheet, ...themeStyles];
+  if (lumoStyleSheet) {
+    const base = lumoInjector.includeBaseStyles ? (baseStyles ?? elementStyles) : [];
+    return [...base, lumoStyleSheet, ...(themeStyles ?? [])];
   }
 
-  return [lumoStyleSheet, ...elementStyles].filter(Boolean);
+  return elementStyles;
 }
 
 /**

package/vaadin-themable-mixin.js

@@ -298,10 +298,6 @@ function getThemes(tagName) {
   return themeRegistry.filter((theme) => theme.moduleId === defaultModuleName);
 }
 
-/**
- * @polymerMixin
- * @mixes ThemePropertyMixin
- */
 export const ThemableMixin = (superClass) =>
   class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
     constructor() {

package/vaadin-theme-detection-mixin.js

@@ -6,8 +6,6 @@ import { ThemeDetector } from './src/theme-detector.js';
  * 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 {
@@ -23,7 +21,7 @@ export const ThemeDetectionMixin = (superClass) =>
 
       if (this.isConnected) {
         const root = findRoot(this);
-        root.__themeDetector = root.__themeDetector || new ThemeDetector(root);
+        root.__themeDetector ||= new ThemeDetector(root);
         this.__themeDetector = root.__themeDetector;
         this.__themeDetector.addEventListener('theme-changed', this.__applyDetectedTheme);
         this.__applyDetectedTheme();

package/vaadin-theme-property-mixin.js

@@ -3,9 +3,6 @@
  * Copyright (c) 2017 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-/**
- * @polymerMixin
- */
 export const ThemePropertyMixin = (superClass) =>
   class VaadinThemePropertyMixin extends superClass {
     static get properties() {