@vaadin/vaadin-themable-mixin 23.2.16 → 23.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "23.2.16",
+  "version": "23.2.18",
   "publishConfig": {
     "access": "public"
   },
@@ -37,8 +37,8 @@
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "57010013e59a3ecdc70ceef4377dbc3b1ac03fb3"
+  "gitHead": "0633266344f3b8eaae21f5c1365b682f163dd0cb"
 }

package/register-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export { registerStyles, css, unsafeCSS } from './vaadin-themable-mixin.js';

package/register-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export { registerStyles, css, unsafeCSS } from './vaadin-themable-mixin.js';

package/vaadin-themable-mixin.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 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';

package/vaadin-themable-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css, CSSResult, unsafeCSS } from 'lit';
@@ -23,40 +23,6 @@ export { css, unsafeCSS };
  */
 const themeRegistry = [];
 
-/**
- * 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');
-}
-
-/**
- * Check if the custom element type has themes applied.
- * @param {string} tagName
- * @returns {boolean}
- */
-function hasThemes(tagName) {
-  return classHasThemes(customElements.get(tagName));
-}
-
-/**
- * Flattens the styles into a single array of styles.
- * @param {CSSResultGroup} styles
- * @param {CSSResult[]} result
- * @returns {CSSResult[]}
- */
-function flattenStyles(styles = []) {
-  return [styles].flat(Infinity).filter((style) => {
-    if (style instanceof CSSResult) {
-      return true;
-    }
-    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
-    return false;
-  });
-}
-
 /**
  * Registers CSS styles for a component type. Make sure to register the styles before
  * the first instance of a component of the type is attached to DOM.
@@ -111,7 +77,7 @@ function getAllThemes() {
  */
 function matchesThemeFor(themeFor, tagName) {
   return (themeFor || '').split(' ').some((themeForToken) => {
-    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`).test(tagName);
   });
 }
 
@@ -131,6 +97,22 @@ function getIncludePriority(moduleName = '') {
   return includePriority;
 }
 
+/**
+ * Flattens the styles into a single array of styles.
+ * @param {CSSResultGroup} styles
+ * @param {CSSResult[]} result
+ * @returns {CSSResult[]}
+ */
+function flattenStyles(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof CSSResult) {
+      return true;
+    }
+    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+    return false;
+  });
+}
+
 /**
  * Gets an array of CSSResults matching the include property of the theme.
  * @param {Theme} theme
@@ -191,6 +173,24 @@ function getThemes(tagName) {
   return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
 }
 
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes(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');
+}
+
 /**
  * @polymerMixin
  * @mixes ThemePropertyMixin

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 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';
@@ -16,7 +16,7 @@ export declare class ThemePropertyMixinClass {
    *
    * Enables the component implementation to propagate the `theme`
    * attribute value to the sub-components in Shadow DOM by binding
-   * the sub-component's "theme" attribute to the `theme` property of
+   * the sub-component’s "theme" attribute to the `theme` property of
    * the host.
    *
    * **NOTE:** Extending the mixin only provides the property for binding,
@@ -25,7 +25,28 @@ export declare class ThemePropertyMixinClass {
    * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components).
    * page for more information.
    *
+   * @deprecated The `theme` property is not supposed for public use and will be dropped in Vaadin 24.
+   * Please, use the `theme` attribute instead.
    * @protected
    */
-  protected readonly _theme: string | null | undefined;
+  theme: string | null | undefined;
+
+  /**
+   * Helper property with theme attribute value facilitating propagation
+   * in shadow DOM.
+   *
+   * Enables the component implementation to propagate the `theme`
+   * attribute value to the sub-components in Shadow DOM by binding
+   * the sub-component’s "theme" attribute to the `theme` property of
+   * the host.
+   *
+   * **NOTE:** Extending the mixin only provides the property for binding,
+   * and does not make the propagation alone.
+   *
+   * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components).
+   * page for more information.
+   *
+   * @protected
+   */
+  readonly _theme: string | null | undefined;
 }

package/vaadin-theme-property-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 /**
@@ -16,7 +16,32 @@ export const ThemePropertyMixin = (superClass) =>
          *
          * Enables the component implementation to propagate the `theme`
          * attribute value to the sub-components in Shadow DOM by binding
-         * the sub-component's "theme" attribute to the `theme` property of
+         * the sub-component’s "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @deprecated The `theme` property is not supposed for public use and will be dropped in Vaadin 24.
+         * Please, use the `theme` attribute instead.
+         * @protected
+         */
+        theme: {
+          type: String,
+          reflectToAttribute: true,
+          observer: '__deprecatedThemePropertyChanged',
+        },
+
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the sub-components in Shadow DOM by binding
+         * the sub-component’s "theme" attribute to the `theme` property of
          * the host.
          *
          * **NOTE:** Extending the mixin only provides the property for binding,
@@ -34,16 +59,8 @@ export const ThemePropertyMixin = (superClass) =>
       };
     }
 
-    static get observedAttributes() {
-      return [...super.observedAttributes, 'theme'];
-    }
-
-    /** @protected */
-    attributeChangedCallback(name, oldValue, newValue) {
-      super.attributeChangedCallback(name, oldValue, newValue);
-
-      if (name === 'theme') {
-        this._set_theme(newValue);
-      }
+    /** @private */
+    __deprecatedThemePropertyChanged(theme) {
+      this._set_theme(theme);
     }
   };