feat: add backdrop fade-in/out transition to master-detail-layout (#11414)

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

Author: web-padawan

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

@@ -74,11 +74,12 @@ export const masterDetailLayoutStyles = css`
     grid-row: detail-start / detail-end;
   }
 
-  [part~='backdrop'] {
+  #backdrop {
     position: absolute;
     inset: 0;
     z-index: 1;
-    display: none;
+    opacity: 0;
+    pointer-events: none;
     background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
     forced-color-adjust: none;
   }
@@ -141,8 +142,9 @@ export const masterDetailLayoutStyles = css`
     grid-row: none;
   }
 
-  :host([has-detail][overlay]) [part~='backdrop'] {
-    display: block;
+  :host([has-detail][overlay]) #backdrop {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   :host([has-detail][overlay]:not([orientation='vertical'])) :is(#detail, #outgoing) {
@@ -157,8 +159,7 @@ export const masterDetailLayoutStyles = css`
     height: var(--_overlay-size, var(--_detail-size, min-content));
   }
 
-  :host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #outgoing),
-  :host([has-detail][overlay][overlay-containment='viewport']) [part~='backdrop'] {
+  :host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #outgoing, #backdrop) {
     position: fixed;
   }
 

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

@@ -214,7 +214,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     const isLayoutContained = isOverlay && !isViewport;
 
     return html`
-      <div part="backdrop" @click="${this.__onBackdropClick}"></div>
+      <div id="backdrop" part="backdrop" @click="${this.__onBackdropClick}"></div>
       <div id="master" part="master" ?inert="${isLayoutContained}">
         <slot @slotchange="${this.__onSlotChange}"></slot>
       </div>
@@ -542,6 +542,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       } else {
         this.__slide(this.$.detail, true, opts).then(() => onFinish());
       }
+
+      // 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',
+        });
+      }
     });
   }
 

packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js

@@ -115,7 +115,10 @@ snapshots["vaadin-master-detail-layout host no detail placeholder"] =
 /* end snapshot vaadin-master-detail-layout host no detail placeholder */
 
 snapshots["vaadin-master-detail-layout shadow default"] = 
-`<div part="backdrop">
+`<div
+  id="backdrop"
+  part="backdrop"
+>
 </div>
 <div
   id="master"