defer recalculateLayout in _finishTransition to fix Lit element detail sizing

Wrapping recalculateLayout in queueMicrotask ensures Lit elements
have completed their rendering before layout measurement occurs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vursen

packages/master-detail-layout/src/vaadin-master-detail-layout.js

@@ -663,7 +663,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * @protected
    */
   _finishTransition() {
-    this.recalculateLayout();
+    queueMicrotask(() => this.recalculateLayout());
   }
 
   /**

packages/master-detail-layout/test/detail-auto-size.test.js

@@ -2,6 +2,7 @@ import { expect } from '@vaadin/chai-plugins';
 import { defineCE, fixtureSync } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-master-detail-layout.js';
+import { css, html, LitElement } from 'lit';
 import { onceResized } from './helpers.js';
 
 window.Vaadin ||= {};
@@ -11,6 +12,10 @@ window.Vaadin.featureFlags.masterDetailLayoutComponent = true;
 describe('detail auto size', () => {
   let layout;
 
+  function getCachedSize(layout) {
+    return layout.style.getPropertyValue('--_detail-cached-size');
+  }
+
   describe('basic', () => {
     beforeEach(async () => {
       layout = fixtureSync(`
@@ -54,13 +59,52 @@ describe('detail auto size', () => {
     });
   });
 
+  describe('Lit element detail', () => {
+    const detailElementTag = defineCE(
+      class extends LitElement {
+        static get styles() {
+          return css`
+            :host {
+              display: block;
+            }
+
+            div {
+              width: 200px;
+            }
+          `;
+        }
+
+        render() {
+          return html`<div>Detail</div>`;
+        }
+      },
+    );
+
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-master-detail-layout master-size="100px">
+          <div>Master</div>
+        </vaadin-master-detail-layout>
+      `);
+      await onceResized(layout);
+    });
+
+    it('should measure correct detail size for a Lit element set via _setDetail', async () => {
+      await layout._setDetail(document.createElement(detailElementTag));
+      await onceResized(layout);
+      expect(getCachedSize(layout)).to.equal('201px');
+    });
+
+    it('should measure correct detail size for a Lit element set via _setDetail without transition', async () => {
+      await layout._setDetail(document.createElement(detailElementTag), true);
+      await onceResized(layout);
+      expect(getCachedSize(layout)).to.equal('201px');
+    });
+  });
+
   describe('nested layouts', () => {
     let outer, middle, inner;
 
-    function getCachedSize(layout) {
-      return layout.style.getPropertyValue('--_detail-cached-size');
-    }
-
     const shadowElement = defineCE(
       class extends HTMLElement {
         constructor() {