@vaadin/master-detail-layout 25.2.0-alpha3 → 25.2.0-alpha5

package/custom-elements.json

@@ -33,7 +33,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "attribute": "detail-size"
             },
             {
@@ -95,6 +95,11 @@
               },
               "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
               "attribute": "overlay-size"
+            },
+            {
+              "kind": "method",
+              "name": "recalculateLayout",
+              "description": "When `detailSize` is not explicitly set, re-measures the cached intrinsic size of\nthe detail content by placing it in a min-content CSS grid column, then repeats\nthis process for ancestor master-detail layouts without an explicit `detailSize`,\nif any, so that their detail areas also adapt.\n\nCall this method after changing the detail content in a way that affects its intrinsic\nsize — for example, when opening a detail in a nested master-detail layout that was\nnot previously visible.\n\nNOTE: This method can be expensive in large layouts as it triggers consecutive\nsynchronous DOM reads and writes."
             }
           ],
           "events": [
@@ -119,7 +124,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "fieldName": "detailSize"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha3",
+  "version": "25.2.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -34,16 +34,16 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.2.0-alpha3",
-    "@vaadin/component-base": "25.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha3",
+    "@vaadin/a11y-base": "25.2.0-alpha5",
+    "@vaadin/component-base": "25.2.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha3",
-    "@vaadin/chai-plugins": "25.2.0-alpha3",
+    "@vaadin/aura": "25.2.0-alpha5",
+    "@vaadin/chai-plugins": "25.2.0-alpha5",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha5",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6ba3d66b9eeb541945dc071e72e05dac2d4c3e0b"
+  "gitHead": "2f0c822a389571591b1b9d2c27d45e008ccbae6b"
 }

package/src/styles/vaadin-master-detail-layout-base-styles.js

@@ -8,10 +8,12 @@ import { css } from 'lit';
 
 export const masterDetailLayoutStyles = css`
   :host {
-    --_master-size: 30em;
-    --_detail-size: 15em;
-    --_master-column: var(--_master-size) 0;
-    --_detail-column: var(--_detail-size) 0;
+    --_master-size: 30rem;
+    --_master-extra: 0px;
+    --_detail-size: var(--_detail-cached-size);
+    --_detail-extra: 0px;
+    --_detail-cached-size: min-content;
+
     --_transition-duration: 0s;
     --_transition-easing: cubic-bezier(0.78, 0, 0.22, 1);
     --_rtl-multiplier: 1;
@@ -22,12 +24,16 @@ export const masterDetailLayoutStyles = css`
     height: 100%;
     position: relative;
     z-index: 0;
-    overflow: hidden;
-    grid-template-columns: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
+    overflow: clip;
+    grid-template-columns:
+      [master-start] var(--_master-size) var(--_master-extra)
+      [detail-start] var(--_detail-size) var(--_detail-extra)
+      [detail-end];
     grid-template-rows: 100%;
   }
 
-  :host([hidden]) {
+  :host([hidden]),
+  ::slotted([hidden]) {
     display: none !important;
   }
 
@@ -39,7 +45,10 @@ export const masterDetailLayoutStyles = css`
     --_detail-offscreen: 0 30px;
 
     grid-template-columns: 100%;
-    grid-template-rows: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
+    grid-template-rows:
+      [master-start] var(--_master-size) var(--_master-extra)
+      [detail-start] var(--_detail-size) var(--_detail-extra)
+      [detail-end];
   }
 
   :is(#master, #detail, #detail-placeholder, #outgoing) {
@@ -47,11 +56,14 @@ export const masterDetailLayoutStyles = css`
   }
 
   #detail-placeholder {
-    display: none;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
   }
 
   :host([has-detail-placeholder]:not([has-detail], [overlay])) #detail-placeholder {
-    display: block;
+    opacity: 1;
+    pointer-events: auto;
   }
 
   #master {
@@ -77,7 +89,7 @@ export const masterDetailLayoutStyles = css`
   #backdrop {
     position: absolute;
     inset: 0;
-    z-index: 1;
+    z-index: 2;
     opacity: 0;
     pointer-events: none;
     background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
@@ -86,43 +98,51 @@ export const masterDetailLayoutStyles = css`
 
   :host([expand='both']),
   :host([expand='master']) {
-    --_master-column: var(--_master-size) 1fr;
+    --_master-extra: 1fr;
+  }
+
+  :host([expand='both']:is([has-detail], [has-detail-placeholder])),
+  :host([expand='detail']:is([has-detail], [has-detail-placeholder])) {
+    --_detail-extra: 1fr;
+  }
+
+  :host([recalculating-detail-size]:is([has-detail], [has-detail-placeholder])) {
+    --_detail-extra: 0px;
   }
 
   :host([keep-detail-column-offscreen]),
   :host([has-detail-placeholder][overlay]),
   :host(:not([has-detail-placeholder], [has-detail])) {
-    --_master-column: var(--_master-size) calc(100% - var(--_master-size));
-  }
-
-  :host([expand='both']),
-  :host([expand='detail']) {
-    --_detail-column: var(--_detail-size) 1fr;
+    --_master-extra: calc(100% - var(--_master-size));
   }
 
   :host([orientation='horizontal']) #detail-placeholder,
-  :host([orientation='horizontal'][has-detail]:not([overlay])) #detail {
+  :host([orientation='horizontal']:not([overlay])) #detail {
     border-inline-start: var(--vaadin-master-detail-layout-border-width, 1px) solid
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
   :host([orientation='vertical']) #detail-placeholder,
-  :host([orientation='vertical'][has-detail]:not([overlay])) #detail {
+  :host([orientation='vertical']:not([overlay])) #detail {
     border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
+  #outgoing {
+    position: absolute;
+    z-index: 3;
+  }
+
   /* Detail transition: off-screen by default, on-screen when has-detail */
   #detail {
     translate: var(--_detail-offscreen);
+    opacity: 0;
+    z-index: 4;
   }
 
   :host([has-detail]) #detail {
     translate: none;
-  }
-
-  #outgoing:not([hidden]) {
-    z-index: 1;
+    opacity: 1;
   }
 
   :host([overlay]) {
@@ -135,7 +155,6 @@ export const masterDetailLayoutStyles = css`
 
   :host([has-detail][overlay]) :is(#detail, #outgoing) {
     position: absolute;
-    z-index: 2;
     background: var(--vaadin-master-detail-layout-detail-background, var(--vaadin-background-color));
     box-shadow: var(--vaadin-master-detail-layout-detail-shadow, 0 0 20px 0 rgba(0, 0, 0, 0.3));
     grid-column: none;
@@ -150,13 +169,15 @@ export const masterDetailLayoutStyles = css`
   :host([has-detail][overlay]:not([orientation='vertical'])) :is(#detail, #outgoing) {
     inset-block: 0;
     inset-inline-end: 0;
-    width: var(--_overlay-size, var(--_detail-size, min-content));
+    width: var(--_overlay-size, var(--_detail-size));
+    max-width: 100%;
   }
 
   :host([has-detail][overlay][orientation='vertical']) :is(#detail, #outgoing) {
     inset-inline: 0;
     inset-block-end: 0;
-    height: var(--_overlay-size, var(--_detail-size, min-content));
+    height: var(--_overlay-size, var(--_detail-size));
+    max-height: 100%;
   }
 
   :host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #outgoing, #backdrop) {

package/src/vaadin-master-detail-layout.d.ts

@@ -84,9 +84,15 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
 declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)) {
   /**
    * Size (in CSS length units) to be set on the detail area in
-   * the CSS grid layout. If there is not enough space to show
+   * the CSS grid layout. When there is not enough space to show
    * master and detail areas next to each other, the detail area
-   * is shown as an overlay. Defaults to 15em.
+   * is shown as an overlay.
+   * <p>
+   * If not specified, the size is determined automatically by measuring
+   * the detail content in a `min-content` CSS grid column when it first
+   * becomes visible, and then caching the resulting intrinsic size. To
+   * recalculate the cached intrinsic size, use the `recalculateLayout`
+   * method.
    *
    * @attr {string} detail-size
    */
@@ -143,6 +149,21 @@ declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)
    */
   noAnimation: boolean;
 
+  /**
+   * When `detailSize` is not explicitly set, re-measures the cached intrinsic size of
+   * the detail content by placing it in a min-content CSS grid column, then repeats
+   * this process for ancestor master-detail layouts without an explicit `detailSize`,
+   * if any, so that their detail areas also adapt.
+   *
+   * Call this method after changing the detail content in a way that affects its intrinsic
+   * size — for example, when opening a detail in a nested master-detail layout that was
+   * not previously visible.
+   *
+   * NOTE: This method can be expensive in large layouts as it triggers consecutive
+   * synchronous DOM reads and writes.
+   */
+  recalculateLayout(): void;
+
   addEventListener<K extends keyof MasterDetailLayoutEventMap>(
     type: K,
     listener: (this: MasterDetailLayout, ev: MasterDetailLayoutEventMap[K]) => void,

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

@@ -6,6 +6,7 @@
 import { html, LitElement, nothing } from 'lit';
 import { getFocusableElements } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -20,6 +21,18 @@ function parseTrackSizes(gridTemplate) {
     .map(parseFloat);
 }
 
+function detectOverflow(hostSize, trackSizes) {
+  const [masterSize, masterExtra, detailSize] = trackSizes;
+
+  if (Math.floor(masterSize + masterExtra + detailSize) <= Math.floor(hostSize)) {
+    return false;
+  }
+  if (Math.floor(masterExtra) >= Math.floor(detailSize)) {
+    return false;
+  }
+  return true;
+}
+
 /**
  * `<vaadin-master-detail-layout>` is a web component for building UIs with a master
  * (or primary) area and a detail (or secondary) area that is displayed next to, or
@@ -105,9 +118,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     return {
       /**
        * Size (in CSS length units) to be set on the detail area in
-       * the CSS grid layout. If there is not enough space to show
+       * the CSS grid layout. When there is not enough space to show
        * master and detail areas next to each other, the detail area
-       * is shown as an overlay. Defaults to 15em.
+       * is shown as an overlay.
+       * <p>
+       * If not specified, the size is determined automatically by measuring
+       * the detail content in a `min-content` CSS grid column when it first
+       * becomes visible, and then caching the resulting intrinsic size. To
+       * recalculate the cached intrinsic size, use the `recalculateLayout`
+       * method.
        *
        * @attr {string} detail-size
        */
@@ -155,6 +174,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         value: 'horizontal',
         reflectToAttribute: true,
         sync: true,
+        observer: '__orientationChanged',
       },
 
       /**
@@ -200,6 +220,13 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         type: Boolean,
         sync: true,
       },
+
+      /** @private */
+      __detailCachedSize: {
+        type: String,
+        observer: '__detailCachedSizeChanged',
+        sync: true,
+      },
     };
   }
 
@@ -253,11 +280,26 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   /** @private */
   __masterSizeChanged(size, oldSize) {
     this.__updateStyleProperty('master-size', size, oldSize);
+
+    if (oldSize != null) {
+      this.recalculateLayout();
+    }
   }
 
   /** @private */
   __detailSizeChanged(size, oldSize) {
     this.__updateStyleProperty('detail-size', size, oldSize);
+
+    if (oldSize != null) {
+      this.recalculateLayout();
+    }
+  }
+
+  /** @private */
+  __orientationChanged(_orientation, oldOrientation) {
+    if (oldOrientation != null) {
+      this.recalculateLayout();
+    }
   }
 
   /** @private */
@@ -265,6 +307,11 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     this.__updateStyleProperty('overlay-size', size, oldSize);
   }
 
+  /** @private */
+  __detailCachedSizeChanged(size, oldSize) {
+    this.__updateStyleProperty('detail-cached-size', size, oldSize);
+  }
+
   /** @private */
   __updateStyleProperty(prop, size, oldSize) {
     if (size) {
@@ -297,9 +344,9 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * @private
    */
   __onResize() {
-    const state = this.__computeLayoutState();
+    const state = this.__readLayoutState();
     cancelAnimationFrame(this.__resizeRaf);
-    this.__resizeRaf = requestAnimationFrame(() => this.__applyLayoutState(state));
+    this.__resizeRaf = requestAnimationFrame(() => this.__writeLayoutState(state));
   }
 
   /**
@@ -307,26 +354,56 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * ResizeObserver callback where layout is already computed (no forced reflow).
    * @private
    */
-  __computeLayoutState() {
+  __readLayoutState() {
+    const isVertical = this.orientation === 'vertical';
+
     const detailContent = this.querySelector(':scope > [slot="detail"]');
     const detailPlaceholder = this.querySelector(':scope > [slot="detail-placeholder"]');
 
     const hadDetail = this.hasAttribute('has-detail');
     const hasDetail = detailContent != null && detailContent.checkVisibility();
     const hasDetailPlaceholder = !!detailPlaceholder;
-    const hasOverflow = (hasDetail || hasDetailPlaceholder) && this.__checkOverflow();
 
+    const computedStyle = getComputedStyle(this);
+    const hostSizeProp = isVertical ? 'height' : 'width';
+    const hostSize = parseFloat(computedStyle[hostSizeProp]);
+
+    const trackSizesProp = isVertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+    const trackSizes = parseTrackSizes(computedStyle[trackSizesProp]);
+
+    const hasOverflow = (hasDetail || hasDetailPlaceholder) && detectOverflow(hostSize, trackSizes);
     const focusTarget = !hadDetail && hasDetail && hasOverflow ? getFocusableElements(detailContent)[0] : null;
-    return { hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget };
+
+    return {
+      hadDetail,
+      hasDetail,
+      hasDetailPlaceholder,
+      hasOverflow,
+      focusTarget,
+      hostSize,
+      trackSizes,
+    };
   }
 
   /**
    * Applies layout state to DOM attributes. Pure writes, no reads.
    * @private
    */
-  __applyLayoutState({ hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget }) {
-    // Set keep-detail-column-offscreen when detail first appears with overlay
-    // to prevent master width from jumping.
+  __writeLayoutState({ hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget, trackSizes }) {
+    const [_masterSize, _masterExtra, detailSize] = trackSizes;
+
+    // If no detailSize is explicitily set, cache the intrinsic size (min-content) of
+    // the slotted detail content to use as a fallback for the detail column size
+    // while the detail content is rendered in an overlay.
+    if ((hasDetail || hasDetailPlaceholder) && this.__isDetailAutoSized && detailSize > 0) {
+      this.__detailCachedSize = this.__detailCachedSize || `${Math.ceil(detailSize)}px`;
+    } else {
+      this.__detailCachedSize = null;
+    }
+
+    // Force the detail column offscreen when it first appears and overflow
+    // is already detected. This prevents unnecessary master column shrinking,
+    // as the detail content is rendered in an overlay anyway.
     if (!hadDetail && hasDetail && hasOverflow) {
       this.setAttribute('keep-detail-column-offscreen', '');
     } else if (!hasDetail || !hasOverflow) {
@@ -346,23 +423,59 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
   }
 
-  /** @private */
-  __checkOverflow() {
-    const isVertical = this.orientation === 'vertical';
-    const computedStyle = getComputedStyle(this);
+  /**
+   * When `detailSize` is not explicitly set, re-measures the cached intrinsic size of
+   * the detail content by placing it in a min-content CSS grid column, then repeats
+   * this process for ancestor master-detail layouts without an explicit `detailSize`,
+   * if any, so that their detail areas also adapt.
+   *
+   * Call this method after changing the detail content in a way that affects its intrinsic
+   * size — for example, when opening a detail in a nested master-detail layout that was
+   * not previously visible.
+   *
+   * NOTE: This method can be expensive in large layouts as it triggers consecutive
+   * synchronous DOM reads and writes.
+   */
+  recalculateLayout() {
+    // Cancel any pending ResizeObserver rAF to prevent it from potentially
+    // overriding the layout state with stale measurements.
+    cancelAnimationFrame(this.__resizeRaf);
 
-    const hostSize = parseFloat(computedStyle[isVertical ? 'height' : 'width']);
-    const [masterSize, masterExtra, detailSize] = parseTrackSizes(
-      computedStyle[isVertical ? 'gridTemplateRows' : 'gridTemplateColumns'],
-    );
+    const invalidatedLayouts = [...this.__ancestorLayouts.filter((layout) => layout.__isDetailAutoSized), this];
 
-    if (Math.floor(masterSize + masterExtra + detailSize) <= Math.floor(hostSize)) {
-      return false;
-    }
-    if (Math.floor(masterExtra) >= Math.floor(detailSize)) {
-      return false;
-    }
-    return true;
+    // Write
+    invalidatedLayouts.forEach((layout) => {
+      layout.__detailCachedSize = null;
+
+      if (layout.__isDetailAutoSized) {
+        layout.removeAttribute('overlay');
+        layout.toggleAttribute('recalculating-detail-size', true);
+      }
+    });
+
+    // Read/Write
+    invalidatedLayouts.forEach((layout) => {
+      const state = layout.__readLayoutState();
+      layout.__writeLayoutState(state);
+    });
+
+    // Write
+    invalidatedLayouts.forEach((layout) => {
+      if (layout.__isDetailAutoSized) {
+        layout.toggleAttribute('recalculating-detail-size', false);
+      }
+    });
+  }
+
+  /** @private */
+  get __isDetailAutoSized() {
+    return this.detailSize == null;
+  }
+
+  /** @private */
+  get __ancestorLayouts() {
+    const parent = getClosestElement(this.constructor.is, this.parentNode);
+    return parent ? [...parent.__ancestorLayouts, parent] : [];
   }
 
   /** @private */
@@ -413,10 +526,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
     if (skipTransition || this.noAnimation) {
       updateSlot();
-      queueMicrotask(() => {
-        const state = this.__computeLayoutState();
-        this.__applyLayoutState(state);
-      });
+      queueMicrotask(() => this.recalculateLayout());
       return Promise.resolve();
     }
 
@@ -462,23 +572,25 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * Starts an animated transition for adding, replacing or removing the
    * detail area using the Web Animations API.
    *
-   * For 'remove', the DOM update is deferred until the slide-out completes.
-   * For 'add'/'replace', the DOM is updated immediately and the slide-in
-   * plays on the new content.
+   * For 'add'/'replace': DOM is updated immediately, then animation
+   * starts after a microtask (so Lit elements render and layout is
+   * recalculated before animation params are read).
+   *
+   * For 'remove': animation plays first, then DOM is updated after
+   * the slide-out completes.
    *
-   * Animations are interruptible: starting a new transition cancels any
-   * in-progress animation and the new animation picks up from the
-   * interrupted position (see `__captureDetailState`).
+   * Interruptible: a new transition cancels any in-progress animation
+   * and picks up from the interrupted position.
    *
    * @param transitionType
    * @param updateCallback
    * @return {Promise<void>}
    * @protected
    */
-  _startTransition(transitionType, updateCallback) {
+  async _startTransition(transitionType, updateCallback) {
     if (this.noAnimation) {
       updateCallback();
-      return Promise.resolve();
+      return;
     }
 
     // Capture mid-flight state before cancelling active animations
@@ -492,66 +604,67 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
     this.setAttribute('transition', transitionType);
 
+    const version = (this.__transitionVersion = (this.__transitionVersion || 0) + 1);
+
     if (transitionType !== 'remove') {
+      // Add/Replace: update DOM, wait for Lit rendering + recalculateLayout
       updateCallback();
+      await Promise.resolve();
+      if (this.__transitionVersion !== version) return;
     }
 
     const opts = this.__getAnimationParams();
     opts.interrupted = interrupted;
     opts.overlay = this.hasAttribute('overlay');
 
-    return this.__animateTransition(transitionType, opts, updateCallback);
+    // Run animations and wait for the detail slide to finish
+    await this.__runAnimations(transitionType, opts);
+    if (this.__transitionVersion !== version) return;
+
+    if (transitionType === 'remove') {
+      // Remove: deferred DOM update after slide-out completes
+      updateCallback();
+      await Promise.resolve();
+    }
+
+    this.__endTransition();
   }
 
   /**
-   * Creates slide animation(s) for the given transition type and returns
-   * a promise that resolves when the primary animation completes.
-   * A version counter prevents stale callbacks from executing after
-   * a newer transition has started.
+   * Starts slide animation(s) for the given transition type and returns
+   * a promise that resolves when the detail slide completes.
    *
    * @param {string} transitionType
    * @param {{ offscreen: string, duration: number, easing: string, interrupted?: { translate: string, opacity: string }, overlay?: boolean }} opts
-   * @param {Function} updateCallback
    * @return {Promise<void>}
    * @private
    */
-  __animateTransition(transitionType, opts, updateCallback) {
-    const version = (this.__transitionVersion = (this.__transitionVersion || 0) + 1);
-
-    return new Promise((resolve) => {
-      this.__transitionResolve = resolve;
-
-      const onFinish = (callback) => {
-        if (this.__transitionVersion === version) {
-          if (callback) {
-            callback();
-          }
-          this.__endTransition();
-        }
-      };
-
-      if (transitionType === 'remove') {
-        this.__slide(this.$.detail, false, opts).then(() => onFinish(updateCallback));
-      } else if (transitionType === 'replace') {
-        // Outgoing slides out on top (z-index), revealing incoming underneath.
-        // In overlay mode, the incoming also slides in simultaneously.
-        this.__slide(this.$.outgoing, false, opts).then(() => onFinish());
-        if (opts.overlay) {
-          this.__slide(this.$.detail, true, { ...opts, interrupted: null });
-        }
-      } else {
-        this.__slide(this.$.detail, true, opts).then(() => onFinish());
+  __runAnimations(transitionType, opts) {
+    let slide;
+
+    if (transitionType === 'remove') {
+      slide = this.__slide(this.$.detail, false, opts);
+    } else if (transitionType === 'replace') {
+      // Outgoing slides out while incoming is revealed underneath.
+      // In overlay mode, the incoming also slides in simultaneously.
+      slide = this.__slide(this.$.outgoing, false, opts);
+      if (opts.overlay) {
+        this.__slide(this.$.detail, true, { ...opts, interrupted: null });
       }
+    } else {
+      slide = this.__slide(this.$.detail, true, opts);
+    }
 
-      // Fade backdrop in/out for overlay add/remove (not replace — backdrop stays visible)
-      if (opts.overlay && transitionType !== 'replace') {
-        const fadeIn = transitionType !== 'remove';
-        this.__animate(this.$.backdrop, [{ opacity: fadeIn ? 0 : 1 }, { opacity: fadeIn ? 1 : 0 }], {
-          duration: opts.duration,
-          easing: 'linear',
-        });
-      }
-    });
+    // Fade backdrop in/out for overlay add/remove (not replace — backdrop stays visible)
+    if (opts.overlay && transitionType !== 'replace') {
+      const fadeIn = transitionType !== 'remove';
+      this.__animate(this.$.backdrop, [{ opacity: fadeIn ? 0 : 1 }, { opacity: fadeIn ? 1 : 0 }], {
+        duration: opts.duration,
+        easing: 'linear',
+      });
+    }
+
+    return slide;
   }
 
   /**
@@ -561,8 +674,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * @protected
    */
   _finishTransition() {
-    const state = this.__computeLayoutState();
-    this.__applyLayoutState(state);
+    queueMicrotask(() => this.recalculateLayout());
   }
 
   /**
@@ -659,8 +771,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   }
 
   /**
-   * Cancels in-progress animations, cleans up state, and resolves the
-   * pending transition promise.
+   * Cancels in-progress animations and cleans up transition state.
    * @private
    */
   __endTransition() {
@@ -670,14 +781,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
     this.removeAttribute('transition');
     this.__clearOutgoing();
-    // Cancel any pending ResizeObserver rAF that captured stale state
-    // during the animation — _finishTransition already applied the
-    // correct post-transition state synchronously.
-    cancelAnimationFrame(this.__resizeRaf);
-    if (this.__transitionResolve) {
-      this.__transitionResolve();
-      this.__transitionResolve = null;
-    }
   }
 
   /**
@@ -692,6 +795,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       return;
     }
     currentDetail.setAttribute('slot', 'detail-outgoing');
+    this.$.outgoing.style.width = this.__detailCachedSize;
     this.__replacing = true;
   }
 
@@ -701,6 +805,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    */
   __clearOutgoing() {
     this.querySelectorAll('[slot="detail-outgoing"]').forEach((el) => el.remove());
+    this.$.outgoing.style.width = '';
     this.__replacing = false;
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha3",
+  "version": "25.2.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12,7 +12,7 @@
           "attributes": [
             {
               "name": "detail-size",
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "value": {
                 "type": [
                   "string",
@@ -103,7 +103,7 @@
             "properties": [
               {
                 "name": "detailSize",
-                "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+                "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
                 "value": {
                   "type": [
                     "string",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha3",
+  "version": "25.2.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -28,7 +28,7 @@
             },
             {
               "name": ".detailSize",
-              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 15em.",
+              "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
               "value": {
                 "kind": "expression"
               }