@vaadin/vaadin-themable-mixin 24.8.0-alpha12 → 24.8.0-alpha14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-themable-mixin",
-  "version": "24.8.0-alpha12",
+  "version": "24.8.0-alpha14",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "lit": "^3.0.0"
+    "lit": "^3.0.0",
+    "style-observer": "^0.0.8"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/chai-plugins": "24.8.0-alpha12",
-    "@vaadin/test-runner-commands": "24.8.0-alpha12",
+    "@vaadin/chai-plugins": "24.8.0-alpha14",
+    "@vaadin/test-runner-commands": "24.8.0-alpha14",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "60050031f788a34bfe2d7f595ada9cea6e60b09c"
+  "gitHead": "c8a33608cf1ab377529afd0650360e349886384c"
 }

package/vaadin-themable-mixin.js

@@ -3,7 +3,8 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { adoptStyles, css, CSSResult, LitElement, unsafeCSS } from 'lit';
+import { css, CSSResult, LitElement, unsafeCSS } from 'lit';
+import { applyInstanceStyles } from './src/css-utils.js';
 import { ThemePropertyMixin } from './vaadin-theme-property-mixin.js';
 
 export { css, unsafeCSS };
@@ -115,13 +116,7 @@ function updateInstanceStyles(instance) {
 
   if (instance instanceof LitElement) {
     // LitElement
-
-    // The adoptStyles function may fall back to appending style elements to shadow root.
-    // Remove them first to avoid duplicates.
-    [...instance.shadowRoot.querySelectorAll('style')].forEach((style) => style.remove());
-
-    // Adopt the updated styles
-    adoptStyles(instance.shadowRoot, componentClass.elementStyles);
+    applyInstanceStyles(instance);
   } else {
     // PolymerElement
 
@@ -362,11 +357,16 @@ export const ThemableMixin = (superClass) =>
      * @protected
      */
     static finalizeStyles(styles) {
-      // The "styles" object originates from the "static get styles()" function of
-      // a LitElement based component. The theme styles are added after it
-      // so that they can override the component styles.
-      const themeStyles = this.getStylesForThis();
-      return styles ? [...[styles].flat(Infinity), ...themeStyles] : themeStyles;
+      // Preserve the styles the user supplied via the `static get styles()` getter
+      // so that they will always be injected before styles added by `CSSInjector`.
+      this.baseStyles = styles ? [styles].flat(Infinity) : [];
+
+      // Preserve the theme styles the user supplied via the `registerStyles()` API
+      // so that they will always be injected after styles added by `CSSInjector`.
+      this.themeStyles = this.getStylesForThis();
+
+      // Merged styles are stored in `elementStyles` and passed to `adoptStyles()`.
+      return [...this.baseStyles, ...this.themeStyles];
     }
 
     /**