@vaadin/vaadin-themable-mixin 23.0.6 → 23.1.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "23.0.6",
+  "version": "23.1.0-alpha3",
   "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": "82ca8522e24a63343fb28bcb4c686e55d25c8858"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

package/vaadin-themable-mixin.js

@@ -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');
 }
 
@@ -197,7 +205,7 @@ export const ThemableMixin = (superClass) =>
       super.finalize();
 
       const template = this.prototype._template;
-      if (!template || hasThemes(this.is)) {
+      if (!template || classHasThemes(this)) {
         return;
       }
 

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

@@ -24,6 +24,29 @@ export declare class ThemePropertyMixinClass {
    *
    * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/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: 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/ds/customization/styling-components/#sub-components).
+   * page for more information.
+   *
+   * @protected
    */
-  readonly theme: string | null | undefined;
+  readonly _theme: string | null | undefined;
 }

package/vaadin-theme-property-mixin.js

@@ -25,21 +25,42 @@ export const ThemePropertyMixin = (superClass) =>
          * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/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,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/ds/customization/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @protected
+         */
+        _theme: {
           type: String,
           readOnly: true
         }
       };
     }
 
-    /** @protected */
-    attributeChangedCallback(name, oldValue, newValue) {
-      super.attributeChangedCallback(name, oldValue, newValue);
-
-      if (name === 'theme') {
-        this._setTheme(newValue);
-      }
+    /** @private */
+    __deprecatedThemePropertyChanged(theme) {
+      this._set_theme(theme);
     }
   };