@vaadin/master-detail-layout 25.1.0-rc1 → 25.2.0-alpha1

package/custom-elements.json

@@ -23,29 +23,9 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name      | Description\n---------------|----------------------\n`backdrop`     | Backdrop covering the master area in the drawer mode\n`master`       | The master area\n`detail`       | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------| -----------\n`containment`  | Set to `layout` or `viewport` depending on the containment.\n`orientation`  | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail`   | Set when the detail content is provided.\n`drawer`       | Set when the layout is using the drawer mode.\n`stack`        | Set when the layout is using the stack mode.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                  |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color`       |\n| `--vaadin-master-detail-layout-border-width`       |\n| `--vaadin-master-detail-layout-detail-background`  |\n| `--vaadin-master-detail-layout-detail-shadow`      |\n| `--vaadin-overlay-backdrop-background`             |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name      | Description\n---------------|----------------------\n`backdrop`     | Backdrop covering the master area in the overlay mode\n`master`       | The master area\n`detail`       | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute             | Description\n----------------------|----------------------\n`expand`              | Set to `master`, `detail`, or `both`.\n`orientation`         | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail`          | Set when the detail content is provided and visible.\n`overflow`            | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `viewport`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                  |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color`       |\n| `--vaadin-master-detail-layout-border-width`       |\n| `--vaadin-master-detail-layout-detail-background`  |\n| `--vaadin-master-detail-layout-detail-shadow`      |\n| `--vaadin-overlay-backdrop-background`             |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "MasterDetailLayout",
           "members": [
-            {
-              "kind": "field",
-              "name": "containment",
-              "privacy": "public",
-              "type": {
-                "text": "string"
-              },
-              "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
-              "attribute": "containment"
-            },
-            {
-              "kind": "field",
-              "name": "detailMinSize",
-              "privacy": "public",
-              "type": {
-                "text": "string"
-              },
-              "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
-              "attribute": "detail-min-size"
-            },
             {
               "kind": "field",
               "name": "detailSize",
@@ -53,28 +33,18 @@
               "type": {
                 "text": "string"
               },
-              "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
+              "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.",
               "attribute": "detail-size"
             },
             {
               "kind": "field",
-              "name": "forceOverlay",
-              "privacy": "public",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
-              "attribute": "force-overlay"
-            },
-            {
-              "kind": "field",
-              "name": "masterMinSize",
+              "name": "expand",
               "privacy": "public",
               "type": {
                 "text": "string"
               },
-              "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
-              "attribute": "master-min-size"
+              "description": "Controls which column(s) expand to fill available space.\nPossible values: `'master'`, `'detail'`, `'both'`.\nDefaults to `'both'`.",
+              "attribute": "expand"
             },
             {
               "kind": "field",
@@ -83,7 +53,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
+              "description": "Size (in CSS length units) to be set on the master 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 30em.",
               "attribute": "master-size"
             },
             {
@@ -108,18 +78,33 @@
             },
             {
               "kind": "field",
-              "name": "slotStyles",
-              "readonly": true
+              "name": "overlayContainment",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
+              "attribute": "overlay-containment"
             },
             {
               "kind": "field",
-              "name": "stackOverlay",
+              "name": "overlaySize",
               "privacy": "public",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
-              "attribute": "stack-overlay"
+              "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": "field",
+              "name": "slotStyles",
+              "return": {
+                "type": {
+                  "text": "!Array<!CSSResult>"
+                }
+              },
+              "readonly": true
             }
           ],
           "events": [
@@ -128,7 +113,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the user clicks the backdrop in the drawer mode."
+              "description": "Fired when the user clicks the backdrop in the overlay mode."
             },
             {
               "name": "detail-escape-press",
@@ -139,52 +124,28 @@
             }
           ],
           "attributes": [
-            {
-              "name": "containment",
-              "type": {
-                "text": "string"
-              },
-              "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
-              "fieldName": "containment"
-            },
-            {
-              "name": "detail-min-size",
-              "type": {
-                "text": "string"
-              },
-              "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
-              "fieldName": "detailMinSize"
-            },
             {
               "name": "detail-size",
               "type": {
                 "text": "string"
               },
-              "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
+              "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.",
               "fieldName": "detailSize"
             },
             {
-              "name": "force-overlay",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
-              "fieldName": "forceOverlay"
-            },
-            {
-              "name": "master-min-size",
+              "name": "expand",
               "type": {
                 "text": "string"
               },
-              "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
-              "fieldName": "masterMinSize"
+              "description": "Controls which column(s) expand to fill available space.\nPossible values: `'master'`, `'detail'`, `'both'`.\nDefaults to `'both'`.",
+              "fieldName": "expand"
             },
             {
               "name": "master-size",
               "type": {
                 "text": "string"
               },
-              "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
+              "description": "Size (in CSS length units) to be set on the master 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 30em.",
               "fieldName": "masterSize"
             },
             {
@@ -204,12 +165,20 @@
               "fieldName": "orientation"
             },
             {
-              "name": "stack-overlay",
+              "name": "overlay-containment",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
-              "fieldName": "stackOverlay"
+              "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
+              "fieldName": "overlayContainment"
+            },
+            {
+              "name": "overlay-size",
+              "type": {
+                "text": "string"
+              },
+              "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.",
+              "fieldName": "overlaySize"
             }
           ],
           "mixins": [
@@ -217,10 +186,6 @@
               "name": "SlotStylesMixin",
               "package": "@vaadin/component-base/src/slot-styles-mixin.js"
             },
-            {
-              "name": "ResizeMixin",
-              "package": "@vaadin/component-base/src/resize-mixin.js"
-            },
             {
               "name": "ElementMixin",
               "package": "@vaadin/component-base/src/element-mixin.js"

package/package.json

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

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

@@ -7,17 +7,20 @@ import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const masterDetailLayoutStyles = css`
-  /* Layout and positioning styles */
-
   :host {
-    display: flex;
+    --_master-size: 30em;
+    --_detail-size: 15em;
+    --_master-column: var(--_master-size) 0;
+    --_detail-column: var(--_detail-size) 0;
+
+    display: grid;
     box-sizing: border-box;
     height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    position: relative; /* Keep the positioning context stable across all modes */
-    z-index: 0; /* Create a new stacking context, don't let "layout contained" detail element stack outside it */
+    position: relative;
+    z-index: 0;
     overflow: hidden;
+    grid-template-columns: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
+    grid-template-rows: 100%;
   }
 
   :host([hidden]) {
@@ -25,171 +28,104 @@ export const masterDetailLayoutStyles = css`
   }
 
   :host([orientation='vertical']) {
-    flex-direction: column;
-  }
-
-  [part='_detail-internal'] {
-    display: contents;
-    justify-content: end;
-    /* Disable pointer events for the detail wrapper to allow clicks to pass through to the backdrop */
-    pointer-events: none;
-  }
-
-  [part='detail'] {
-    /* Re-enable pointer events for the actual detail content */
-    pointer-events: auto;
-  }
-
-  :host([orientation='vertical']) [part='_detail-internal'] {
-    align-items: end;
-  }
-
-  :host(:is([drawer], [stack])) [part='_detail-internal'],
-  :host(:is([drawer], [stack])[has-detail]) [part='backdrop'] {
-    display: flex;
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    overscroll-behavior: contain;
-  }
-
-  :host(:not([has-detail])) [part='_detail-internal'],
-  [part='backdrop'] {
-    display: none;
-  }
-
-  :host([orientation='horizontal'][drawer]) [part='detail'] {
-    margin-inline-start: 50px;
-  }
-
-  :host([orientation='vertical'][drawer]) [part='detail'] {
-    margin-top: 50px;
-  }
-
-  :host(:is([drawer], [stack])[containment='viewport']) :is([part='_detail-internal'], [part='backdrop']) {
-    position: fixed;
+    grid-template-columns: 100%;
+    grid-template-rows: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
   }
 
-  :host(:is([drawer], [stack])[containment='viewport']) [part='detail'] {
-    padding-top: var(--safe-area-inset-top);
-    padding-bottom: var(--safe-area-inset-bottom);
-  }
-
-  :host([containment='viewport']:dir(ltr)) [part='detail'] {
-    padding-right: var(--safe-area-inset-right);
-  }
-
-  :host([containment='viewport']:dir(rtl)) [part='detail'] {
-    padding-left: var(--safe-area-inset-left);
-  }
-
-  :host([stack][containment='viewport']) [part='detail'] {
-    padding-left: var(--safe-area-inset-left);
-    padding-right: var(--safe-area-inset-right);
-  }
-
-  /* Sizing styles */
-
-  [part] {
+  [part~='master'],
+  [part~='detail'] {
     box-sizing: border-box;
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  /* No fixed size */
-  :host(:not([has-master-size])) [part='master'],
-  :host(:not([has-detail-size]):not([drawer], [stack])) [part='detail'] {
-    flex-grow: 1;
-    flex-basis: 50%;
   }
 
-  /* Fixed size */
-  :host([has-master-size]) [part='master'],
-  :host([has-detail-size]) [part='detail'] {
-    flex-shrink: 0;
+  [part~='master'] {
+    grid-column: master-start / detail-start;
   }
 
-  :host([orientation='horizontal'][has-master-size][has-detail]) [part='master'] {
-    width: var(--_master-size);
+  [part~='detail'] {
+    grid-column: detail-start / detail-end;
   }
 
-  :host([orientation='vertical'][has-master-size][has-detail]) [part='master'] {
-    height: var(--_master-size);
+  :host([orientation='vertical']) [part~='master'] {
+    grid-column: auto;
+    grid-row: master-start / detail-start;
   }
 
-  :host([orientation='horizontal'][has-detail-size]:not([stack])) [part='detail'] {
-    width: var(--_detail-size);
+  :host([orientation='vertical']) [part~='detail'] {
+    grid-column: auto;
+    grid-row: detail-start / detail-end;
   }
 
-  :host([orientation='vertical'][has-detail-size]:not([stack])) [part='detail'] {
-    height: var(--_detail-size);
-  }
-
-  :host([has-master-size][has-detail-size]) [part='master'] {
-    flex-grow: 1;
-    flex-basis: var(--_master-size);
+  [part~='backdrop'] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: none;
+    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
+    forced-color-adjust: none;
   }
 
-  :host([has-master-size][has-detail-size]:not([drawer], [stack])) [part='detail'] {
-    flex-grow: 1;
-    flex-basis: var(--_detail-size);
+  :host([expand='both']),
+  :host([expand='master']) {
+    --_master-column: var(--_master-size) 1fr;
   }
 
-  /* Min size */
-  :host([orientation='horizontal'][has-master-min-size]) [part='master'] {
-    min-width: min(100%, var(--_master-min-size));
+  :host(:not([has-detail])),
+  :host([keep-detail-column-offscreen]) {
+    --_master-column: var(--_master-size) calc(100% - var(--_master-size));
   }
 
-  :host([orientation='vertical'][has-master-min-size]) [part='master'] {
-    min-height: min(100%, var(--_master-min-size));
+  :host([expand='both']),
+  :host([expand='detail']) {
+    --_detail-column: var(--_detail-size) 1fr;
   }
 
-  :host([orientation='horizontal'][has-detail-min-size]) [part='detail'] {
-    min-width: min(100%, var(--_detail-min-size));
+  :host([orientation='horizontal'][has-detail]:not([overflow])) [part~='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'][has-detail-min-size]) [part='detail'] {
-    min-height: min(100%, var(--_detail-min-size));
+  :host([orientation='vertical'][has-detail]:not([overflow])) [part~='detail'] {
+    border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
+      var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
-  :host([drawer]) [part='master'],
-  :host([stack]) [part] {
-    width: 100% !important;
-    height: 100% !important;
-    min-width: auto !important;
-    min-height: auto !important;
-    max-width: 100% !important;
-    max-height: 100% !important;
+  :host([overflow]) [part~='detail'] {
+    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;
   }
 
-  /* Decorative/visual styles */
-
-  [part='backdrop'] {
-    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
-    forced-color-adjust: none;
+  :host([overflow]) [part~='backdrop'] {
+    display: block;
   }
 
-  :host(:is([drawer], [stack])) [part='detail'] {
-    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));
+  :host([overflow]:not([orientation='vertical'])) [part~='detail'] {
+    inset-block: 0;
+    width: var(--_overlay-size, var(--_detail-size, min-content));
+    inset-inline-end: 0;
   }
 
-  :host([orientation='horizontal']:not([drawer], [stack])) [part='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([overflow][orientation='vertical']) [part~='detail'] {
+    grid-column: auto;
+    grid-row: none;
+    inset-inline: 0;
+    height: var(--_overlay-size, var(--_detail-size, min-content));
+    inset-block-end: 0;
   }
 
-  :host([orientation='vertical']:not([drawer], [stack])) [part='detail'] {
-    border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
-      var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
+  :host([overflow][overlay-containment='viewport']) [part~='detail'],
+  :host([overflow][overlay-containment='viewport']) [part~='backdrop'] {
+    position: fixed;
   }
 
   @media (forced-colors: active) {
-    :host(:is([drawer], [stack])) [part='detail'] {
+    :host([overflow]) [part~='detail'] {
       outline: 3px solid !important;
     }
 
-    [part='detail'] {
+    [part~='detail'] {
       background: Canvas !important;
     }
   }

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

@@ -9,14 +9,11 @@ export const masterDetailLayoutTransitionStyles = css`
   @media (prefers-reduced-motion: no-preference) {
     html {
       --_vaadin-mdl-dir-multiplier: 1;
-      --_vaadin-mdl-stack-master-offset: 20%;
-      --_vaadin-mdl-stack-master-clip-path: inset(0 0 0 var(--_vaadin-mdl-stack-master-offset));
       --_vaadin-mdl-easing: cubic-bezier(0.78, 0, 0.22, 1);
     }
 
     html[dir='rtl'] {
       --_vaadin-mdl-dir-multiplier: -1;
-      --_vaadin-mdl-stack-master-clip-path: inset(0 var(--_vaadin-mdl-stack-master-offset) 0 0);
     }
 
     ::view-transition-group(vaadin-mdl-backdrop),
@@ -44,8 +41,8 @@ export const masterDetailLayoutTransitionStyles = css`
       view-transition-name: vaadin-mdl-backdrop;
     }
 
-    vaadin-master-detail-layout[transition]:not([transition='replace']):not([drawer], [stack])::part(detail),
-    vaadin-master-detail-layout[transition]:is([drawer], [stack])::part(_detail-internal) {
+    vaadin-master-detail-layout[transition][has-detail]:not([transition='replace']):not([overflow])::part(detail),
+    vaadin-master-detail-layout[transition][has-detail][overflow]::part(detail) {
       view-transition-name: vaadin-mdl-detail;
     }
 
@@ -68,23 +65,10 @@ export const masterDetailLayoutTransitionStyles = css`
       }
     }
 
-    vaadin-master-detail-layout[orientation='horizontal'][stack][has-detail]::part(master) {
-      translate: calc(var(--_vaadin-mdl-stack-master-offset) * var(--_vaadin-mdl-dir-multiplier) * -1);
-      opacity: 0;
-    }
-
     vaadin-master-detail-layout[transition]::part(master) {
       view-transition-name: vaadin-mdl-master;
     }
 
-    vaadin-master-detail-layout[orientation='horizontal'][stack][transition='add']::part(master) {
-      view-transition-class: stack-add;
-    }
-
-    vaadin-master-detail-layout[orientation='horizontal'][stack][transition='remove']::part(master) {
-      view-transition-class: stack-remove;
-    }
-
     ::view-transition-new(vaadin-mdl-master),
     ::view-transition-old(vaadin-mdl-master) {
       object-fit: none;
@@ -98,33 +82,9 @@ export const masterDetailLayoutTransitionStyles = css`
       object-position: 100% 0;
     }
 
-    ::view-transition-new(vaadin-mdl-master.stack-remove),
-    ::view-transition-old(vaadin-mdl-master.stack-remove) {
-      animation-name: vaadin-mdl-master-stack-remove;
-      clip-path: var(--_vaadin-mdl-stack-master-clip-path);
-    }
-
-    @keyframes vaadin-mdl-master-stack-remove {
-      100% {
-        clip-path: inset(0);
-      }
-    }
-
-    ::view-transition-new(vaadin-mdl-master.stack-add),
-    ::view-transition-old(vaadin-mdl-master.stack-add) {
-      animation-name: vaadin-mdl-master-stack-add;
-      clip-path: inset(0);
-    }
-
-    @keyframes vaadin-mdl-master-stack-add {
-      100% {
-        clip-path: var(--_vaadin-mdl-stack-master-clip-path);
-      }
-    }
-
     /* prettier-ignore */
-    vaadin-master-detail-layout[orientation='vertical']:not([drawer], [stack])[transition]:not([transition='replace'])::part(detail),
-    vaadin-master-detail-layout[orientation='vertical']:is([drawer], [stack])[transition]::part(_detail-internal) {
+    vaadin-master-detail-layout[orientation='vertical'][has-detail]:not([overflow])[transition]:not([transition='replace'])::part(detail),
+    vaadin-master-detail-layout[orientation='vertical'][has-detail][overflow][transition]::part(detail) {
       view-transition-name: vaadin-mdl-detail;
       view-transition-class: vertical;
     }