fix: delegate details theme attribute in Lit version (#8267)

packages/details/src/vaadin-details-base-mixin.js

@@ -34,12 +34,8 @@ export const DetailsBaseMixin = (superClass) =>
       return ['__updateAriaControls(focusElement, _contentElements)', '__updateAriaExpanded(focusElement, opened)'];
     }
 
-    static get delegateAttrs() {
-      return ['theme'];
-    }
-
     static get delegateProps() {
-      return ['disabled', 'opened'];
+      return ['disabled', 'opened', '_theme'];
     }
 
     constructor() {
@@ -67,6 +63,25 @@ export const DetailsBaseMixin = (superClass) =>
       this.addController(this._tooltipController);
     }
 
+    /**
+     * Override method from `DelegateStateMixin` to set delegate `theme`
+     * using attribute instead of property (needed for the Lit version).
+     * @protected
+     * @override
+     */
+    _delegateProperty(name, value) {
+      if (!this.stateTarget) {
+        return;
+      }
+
+      if (name === '_theme') {
+        this._delegateAttribute('theme', value);
+        return;
+      }
+
+      super._delegateProperty(name, value);
+    }
+
     /**
      * Override method inherited from `DisabledMixin`
      * to not set `aria-disabled` on the host element.

packages/details/test/details.common.js

@@ -190,6 +190,16 @@ describe('vaadin-details', () => {
         await nextUpdate(details);
         expect(summary.hasAttribute('disabled')).to.be.false;
       });
+
+      it(`should propagate theme attribute to ${type} summary`, async () => {
+        details.setAttribute('theme', 'filled');
+        await nextUpdate(details);
+        expect(summary.getAttribute('theme')).to.equal('filled');
+
+        details.removeAttribute('theme');
+        await nextUpdate(details);
+        expect(summary.hasAttribute('theme')).to.be.false;
+      });
     });
   });