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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha4",
+  "version": "25.2.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -34,16 +34,16 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.2.0-alpha4",
-    "@vaadin/component-base": "25.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha4",
+    "@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-alpha4",
-    "@vaadin/chai-plugins": "25.2.0-alpha4",
+    "@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-alpha4",
+    "@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": "fc054a1bed540874ef3b5000828c191cc12044ec"
+  "gitHead": "2f0c822a389571591b1b9d2c27d45e008ccbae6b"
 }

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

@@ -56,11 +56,14 @@ export const masterDetailLayoutStyles = css`
   }
 
   #detail-placeholder {
-    visibility: hidden;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
   }
 
   :host([has-detail-placeholder]:not([has-detail], [overlay])) #detail-placeholder {
-    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
   }
 
   #master {
@@ -86,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));
@@ -125,19 +128,21 @@ export const masterDetailLayoutStyles = css`
       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);
-    visibility: hidden;
+    opacity: 0;
+    z-index: 4;
   }
 
   :host([has-detail]) #detail {
     translate: none;
-    visibility: visible;
-  }
-
-  #outgoing:not([hidden]) {
-    z-index: 1;
+    opacity: 1;
   }
 
   :host([overlay]) {
@@ -150,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;

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

@@ -572,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).
    *
-   * Animations are interruptible: starting a new transition cancels any
-   * in-progress animation and the new animation picks up from the
-   * interrupted position (see `__captureDetailState`).
+   * For 'remove': animation plays first, then DOM is updated after
+   * the slide-out completes.
+   *
+   * 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
@@ -602,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;
   }
 
   /**
@@ -768,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() {
@@ -779,10 +781,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
     this.removeAttribute('transition');
     this.__clearOutgoing();
-    if (this.__transitionResolve) {
-      this.__transitionResolve();
-      this.__transitionResolve = null;
-    }
   }
 
   /**
@@ -797,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;
   }
 
@@ -806,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-alpha4",
+  "version": "25.2.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {

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-alpha4",
+  "version": "25.2.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {