@vaadin/master-detail-layout 25.2.0-alpha10 → 25.2.0-alpha12

package/package.json

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

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

@@ -183,13 +183,11 @@ export const masterDetailLayoutStyles = css`
 
   #detailPlaceholder {
     z-index: 1;
-    opacity: 0;
-    pointer-events: none;
+    visibility: hidden;
   }
 
   :host([has-detail-placeholder]:not([has-detail], [overlay])) #detailPlaceholder {
-    opacity: 1;
-    pointer-events: auto;
+    visibility: visible;
   }
 
   :is(#detail, #detailPlaceholder, #detailOutgoing) {

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

@@ -90,8 +90,6 @@ import {
  *
  * @customElement vaadin-master-detail-layout
  * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes ElementMixin
  */
 class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
@@ -614,10 +612,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     await updateSlot();
 
     const progress = getCurrentAnimationProgress(this.$.detail);
-    await Promise.all([
-      animateIn(this.$.detail, ['fade', 'slide'], progress),
-      animateIn(this.$.backdrop, ['fade'], this.hasAttribute('overlay') ? progress : 1),
-    ]);
+
+    if (this.hasAttribute('overlay')) {
+      await Promise.all([
+        animateIn(this.$.detail, ['slide'], progress),
+        animateIn(this.$.backdrop, ['fade'], progress),
+      ]);
+    } else {
+      await animateIn(this.$.detail, ['slide', 'fade'], progress);
+    }
   }
 
   /** @private */
@@ -632,10 +635,12 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
       await updateSlot();
 
+      const isOverlay = this.hasAttribute('overlay');
       const progress = getCurrentAnimationProgress(this.$.detail);
+
       await Promise.all([
-        animateIn(this.$.detail, ['fade', 'slide'], progress),
-        animateOut(this.$.detailOutgoing, ['fade', 'slide'], progress),
+        animateIn(this.$.detail, isOverlay ? ['slide'] : ['slide', 'fade'], progress),
+        animateOut(this.$.detailOutgoing, isOverlay ? ['slide'] : ['slide', 'fade'], progress),
       ]);
     } finally {
       // Skip removal if the slot was reassigned during the transition.
@@ -649,10 +654,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   /** @private */
   async __removeTransition(updateSlot) {
     const progress = getCurrentAnimationProgress(this.$.detail);
-    await Promise.all([
-      animateOut(this.$.detail, ['fade', 'slide'], progress),
-      animateOut(this.$.backdrop, ['fade'], this.hasAttribute('overlay') ? progress : 1),
-    ]);
+
+    if (this.hasAttribute('overlay')) {
+      await Promise.all([
+        animateOut(this.$.detail, ['slide'], progress),
+        animateOut(this.$.backdrop, ['fade'], progress),
+      ]);
+    } else {
+      await animateOut(this.$.detail, ['slide', 'fade'], progress);
+    }
 
     await updateSlot();
   }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "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-alpha10",
+  "version": "25.2.0-alpha12",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {