@vaadin/vaadin-themable-mixin 23.1.0-alpha2 → 23.1.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,7 +38,7 @@
     "@esm-bundle/chai": "^4.3.4",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.4"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8be43cf83102a6b9ccf309687446e590ce0164e8"
 }

package/vaadin-themable-mixin.d.ts

@@ -11,7 +11,7 @@ import { 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
+  base: T,
 ): T & Constructor<ThemableMixinClass> & Constructor<ThemePropertyMixinClass>;
 
 export declare class ThemableMixinClass {

package/vaadin-themable-mixin.js

@@ -52,7 +52,7 @@ export function registerStyles(themeFor, styles, options = {}) {
       themeFor,
       styles,
       include: options.include,
-      moduleId: options.moduleId
+      moduleId: options.moduleId,
     });
   }
 }
@@ -77,7 +77,7 @@ function getAllThemes() {
  */
 function matchesThemeFor(themeFor, tagName) {
   return (themeFor || '').split(' ').some((themeForToken) => {
-    return new RegExp('^' + themeForToken.split('*').join('.*') + '$').test(tagName);
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`).test(tagName);
   });
 }
 
@@ -151,7 +151,7 @@ function addStylesToTemplate(styles, template) {
  * @returns {Theme[]}
  */
 function getThemes(tagName) {
-  const defaultModuleName = tagName + '-default-theme';
+  const defaultModuleName = `${tagName}-default-theme`;
 
   const themes = getAllThemes()
     // Filter by matching themeFor properties
@@ -161,7 +161,7 @@ function getThemes(tagName) {
       // Prepend styles from included themes
       styles: [...getIncludedStyles(theme), ...theme.styles],
       // Map moduleId to includePriority
-      includePriority: getIncludePriority(theme.moduleId)
+      includePriority: getIncludePriority(theme.moduleId),
     }))
     // Sort by includePriority
     .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
@@ -179,7 +179,15 @@ function getThemes(tagName) {
  * @returns {boolean}
  */
 function hasThemes(tagName) {
-  const elementClass = customElements.get(tagName);
+  return classHasThemes(customElements.get(tagName));
+}
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {Function} elementClass
+ * @returns {boolean}
+ */
+function classHasThemes(elementClass) {
   return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
 }
 
@@ -196,8 +204,13 @@ export const ThemableMixin = (superClass) =>
     static finalize() {
       super.finalize();
 
+      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
+      if (this.elementStyles) {
+        return;
+      }
+
       const template = this.prototype._template;
-      if (!template || hasThemes(this.is)) {
+      if (!template || classHasThemes(this)) {
         return;
       }
 

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

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ThemePropertyMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ThemePropertyMixinClass>;
 
 export declare class ThemePropertyMixinClass {

package/vaadin-theme-property-mixin.js

@@ -32,7 +32,7 @@ export const ThemePropertyMixin = (superClass) =>
         theme: {
           type: String,
           reflectToAttribute: true,
-          observer: '__deprecatedThemePropertyChanged'
+          observer: '__deprecatedThemePropertyChanged',
         },
 
         /**
@@ -54,8 +54,8 @@ export const ThemePropertyMixin = (superClass) =>
          */
         _theme: {
           type: String,
-          readOnly: true
-        }
+          readOnly: true,
+        },
       };
     }