@vaadin/master-detail-layout 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -34,20 +33,20 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const masterDetailLayoutStyles: CSSResult;

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

@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const masterDetailLayoutStyles = css`
+  /* Layout and positioning styles */
+
+  :host {
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    position: relative; /* Keep the positioning context stable across all modes */
+    overflow: hidden;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
+
+  [part='_detail-internal'] {
+    display: contents;
+    justify-content: end;
+  }
+
+  :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;
+  }
+
+  /* Sizing styles */
+
+  [part] {
+    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;
+  }
+
+  :host([orientation='horizontal'][has-master-size][has-detail]) [part='master'] {
+    width: var(--_master-size);
+  }
+
+  :host([orientation='vertical'][has-master-size][has-detail]) [part='master'] {
+    height: var(--_master-size);
+  }
+
+  :host([orientation='horizontal'][has-detail-size]:not([stack])) [part='detail'] {
+    width: var(--_detail-size);
+  }
+
+  :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);
+  }
+
+  :host([has-master-size][has-detail-size]:not([drawer], [stack])) [part='detail'] {
+    flex-grow: 1;
+    flex-basis: var(--_detail-size);
+  }
+
+  /* Min size */
+  :host([orientation='horizontal'][has-master-min-size]) [part='master'] {
+    min-width: min(100%, var(--_master-min-size));
+  }
+
+  :host([orientation='vertical'][has-master-min-size]) [part='master'] {
+    min-height: min(100%, var(--_master-min-size));
+  }
+
+  :host([orientation='horizontal'][has-detail-min-size]) [part='detail'] {
+    min-width: min(100%, var(--_detail-min-size));
+  }
+
+  :host([orientation='vertical'][has-detail-min-size]) [part='detail'] {
+    min-height: min(100%, var(--_detail-min-size));
+  }
+
+  :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;
+  }
+
+  /* Decorative/visual styles */
+
+  [part='backdrop'] {
+    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
+    forced-color-adjust: none;
+  }
+
+  :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([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([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));
+  }
+
+  @media (forced-colors: active) {
+    :host(:is([drawer], [stack])) [part='detail'] {
+      outline: 3px solid !important;
+    }
+
+    [part='detail'] {
+      background: Canvas !important;
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const masterDetailLayoutTransitionStyles: CSSResult;

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

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+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),
+    ::view-transition-group(vaadin-mdl-master),
+    ::view-transition-group(vaadin-mdl-detail) {
+      animation-duration: 0.4s;
+    }
+
+    ::view-transition-group(vaadin-mdl-master),
+    ::view-transition-group(vaadin-mdl-detail) {
+      animation-timing-function: var(--_vaadin-mdl-easing);
+    }
+
+    ::view-transition-image-pair(vaadin-mdl-master),
+    ::view-transition-image-pair(vaadin-mdl-detail),
+    ::view-transition-new(vaadin-mdl-master),
+    ::view-transition-new(vaadin-mdl-detail),
+    ::view-transition-old(vaadin-mdl-master),
+    ::view-transition-old(vaadin-mdl-detail) {
+      animation-timing-function: inherit;
+    }
+
+    /* Needed to promote the backdrop on top the master during the transition */
+    vaadin-master-detail-layout[transition]::part(backdrop) {
+      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) {
+      view-transition-name: vaadin-mdl-detail;
+    }
+
+    ::view-transition-group(vaadin-mdl-detail) {
+      clip-path: inset(0);
+    }
+
+    ::view-transition-new(vaadin-mdl-detail),
+    ::view-transition-old(vaadin-mdl-detail) {
+      animation-name: vaadin-mdl-detail-slide-in;
+    }
+
+    ::view-transition-old(vaadin-mdl-detail) {
+      animation-direction: reverse;
+    }
+
+    @keyframes vaadin-mdl-detail-slide-in {
+      0% {
+        translate: calc((100% + 30px) * var(--_vaadin-mdl-dir-multiplier));
+      }
+    }
+
+    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;
+      object-position: 0% 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    :dir(rtl)::view-transition-new(vaadin-mdl-master),
+    :dir(rtl)::view-transition-old(vaadin-mdl-master) {
+      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) {
+      view-transition-name: vaadin-mdl-detail;
+      view-transition-class: vertical;
+    }
+
+    ::view-transition-new(vaadin-mdl-detail.vertical),
+    ::view-transition-old(vaadin-mdl-detail.vertical) {
+      animation-name: vaadin-mdl-vertical-detail-slide-in;
+    }
+
+    ::view-transition-old(vaadin-mdl-detail.vertical) {
+      animation-direction: reverse;
+    }
+
+    @keyframes vaadin-mdl-vertical-detail-slide-in {
+      0% {
+        transform: translateY(calc(100% + 30px));
+      }
+    }
+  }
+`;

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

@@ -23,13 +23,6 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
  *
  * ### Styling
  *
- * The following custom CSS property are available for styling (needed to be set
- * on the `<html>` element since they are used by the global view transitions):
- *
- * Custom CSS property                                  | Description         | Default
- * -----------------------------------------------------|---------------------|--------
- * `--vaadin-master-detail-layout-transition-duration`  | Transition duration | 300ms
- *
  * The following shadow DOM parts are available for styling:
  *
  * Part name      | Description

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css, html, LitElement, nothing } from 'lit';
+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 { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -11,7 +11,8 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { transitionStyles } from './vaadin-master-detail-layout-transition-styles.js';
+import { masterDetailLayoutStyles } from './styles/vaadin-master-detail-layout-base-styles.js';
+import { masterDetailLayoutTransitionStyles } from './styles/vaadin-master-detail-layout-transition-base-styles.js';
 
 /**
  * `<vaadin-master-detail-layout>` is a web component for building UIs with a master
@@ -20,13 +21,6 @@ import { transitionStyles } from './vaadin-master-detail-layout-transition-style
  *
  * ### Styling
  *
- * The following custom CSS properties are available for styling (needed to be set
- * on the `<html>` element since they are used by the global view transitions):
- *
- * Custom CSS property                                  | Description         | Default
- * -----------------------------------------------------|---------------------|--------
- * `--vaadin-master-detail-layout-transition-duration`  | Transition duration | 300ms
- *
  * The following shadow DOM parts are available for styling:
  *
  * Part name      | Description
@@ -63,154 +57,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-        box-sizing: border-box;
-        height: 100%;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      :host(:not([has-detail])) [part='detail'],
-      [part='backdrop'] {
-        display: none;
-      }
-
-      :host([orientation='horizontal']) [part='master'] {
-        max-width: 100%;
-      }
-
-      /* Drawer mode */
-      :host(:is([drawer], [stack])) {
-        position: relative;
-      }
-
-      :host(:is([drawer], [stack])[containment='layout']) [part='detail'],
-      :host([drawer][containment='layout']) [part='backdrop'] {
-        position: absolute;
-      }
-
-      :host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
-      :host([drawer][containment='viewport']) [part='backdrop'] {
-        position: fixed;
-      }
-
-      :host([drawer][has-detail]) [part='backdrop'] {
-        display: block;
-        inset: 0;
-        z-index: 1;
-      }
-
-      :host(:is([drawer], [stack])) [part='detail'] {
-        z-index: 1;
-      }
-
-      :host([drawer][orientation='horizontal']) [part='detail'] {
-        inset-inline-end: 0;
-        height: 100%;
-        width: var(--_detail-min-size, min-content);
-        max-width: 100%;
-      }
-
-      :host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
-        inset-block-start: 0;
-      }
-
-      /* No fixed size */
-      :host(:not([has-master-size])) [part='master'],
-      :host(:not([has-detail-size])) [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;
-      }
-
-      :host([has-master-size][orientation='horizontal']) [part='master'] {
-        width: var(--_master-size);
-      }
-
-      :host([has-detail-size][orientation='horizontal']:not([stack])) [part='detail'] {
-        width: var(--_detail-size);
-      }
-
-      :host([has-master-size][has-detail-size]) [part='master'] {
-        flex-grow: 1;
-        flex-basis: var(--_master-size);
-      }
-
-      :host([has-master-size][has-detail-size]) [part='detail'] {
-        flex-grow: 1;
-        flex-basis: var(--_detail-size);
-      }
-
-      /* Min size */
-      :host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
-        min-width: var(--_master-min-size);
-      }
-
-      :host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
-        min-width: var(--_detail-min-size);
-      }
-
-      :host([has-master-min-size]) [part='master'],
-      :host([has-detail-min-size]) [part='detail'] {
-        flex-shrink: 0;
-      }
-
-      /* Vertical */
-      :host([orientation='vertical']) {
-        flex-direction: column;
-      }
-
-      :host([orientation='vertical'][drawer]) [part='master'] {
-        max-height: 100%;
-      }
-
-      :host([orientation='vertical'][drawer]) [part='detail'] {
-        inset-block-end: 0;
-        width: 100%;
-        height: var(--_detail-min-size, min-content);
-      }
-
-      :host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
-        inset-inline-start: 0;
-      }
-
-      /* Fixed size */
-      :host([has-master-size][orientation='vertical']) [part='master'] {
-        height: var(--_master-size);
-      }
-
-      :host([has-detail-size][orientation='vertical']:not([stack])) [part='detail'] {
-        height: var(--_detail-size);
-      }
-
-      /* Min size */
-      :host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
-      :host([has-master-min-size][orientation='vertical'][drawer]) {
-        min-height: var(--_master-min-size);
-      }
-
-      :host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
-        min-height: var(--_detail-min-size);
-      }
-
-      /* Stack mode */
-      :host([stack]) [part='master'] {
-        max-height: 100%;
-      }
-
-      :host([stack]) [part='detail'] {
-        inset: 0;
-      }
-    `;
+    return masterDetailLayoutStyles;
   }
 
   static get properties() {
@@ -388,24 +235,30 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
 
   /** @override */
   get slotStyles() {
-    return [transitionStyles];
+    return [masterDetailLayoutTransitionStyles];
   }
 
   /** @protected */
   render() {
     return html`
-      <div part="backdrop" @click="${this.__onBackdropClick}"></div>
-      <div id="master" part="master" ?inert="${this._hasDetail && this._drawer && this.containment === 'layout'}">
-        <slot></slot>
-      </div>
+      <div part="backdrop"></div>
       <div
-        id="detail"
-        part="detail"
-        role="${this._drawer || this._stack ? 'dialog' : nothing}"
-        aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
-        @keydown="${this.__onDetailKeydown}"
+        id="master"
+        part="master"
+        ?inert="${this._hasDetail && (this._stack || (this._drawer && this.containment === 'layout'))}"
       >
-        <slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
+        <slot></slot>
+      </div>
+      <div part="_detail-internal" @click="${this.__onDetailClick}">
+        <div
+          id="detail"
+          part="detail"
+          role="${this._drawer || this._stack ? 'dialog' : nothing}"
+          aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
+          @keydown="${this.__onDetailKeydown}"
+        >
+          <slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
+        </div>
       </div>
     `;
   }
@@ -428,15 +281,19 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
   }
 
   /** @private */
-  __onBackdropClick() {
-    this.dispatchEvent(new CustomEvent('backdrop-click'));
+  __onDetailClick(e) {
+    // The detail wrapper element fully covers the backdrop part, so listen
+    // to click event on it and detect if it was outside the detail content
+    if (!e.composedPath().includes(this.$.detail)) {
+      this.dispatchEvent(new CustomEvent('backdrop-click'));
+    }
   }
 
   /** @private */
   __onDetailKeydown(event) {
-    if (event.key === 'Escape') {
+    if (event.key === 'Escape' && !event.defaultPrevented) {
       // Prevent firing on parent layout when using nested layouts
-      event.stopPropagation();
+      event.preventDefault();
       this.dispatchEvent(new CustomEvent('detail-escape-press'));
     }
   }
@@ -666,8 +523,10 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
    * @protected
    */
   async _finishTransition() {
-    // Detect new layout mode after DOM has been updated
-    this.__detectLayoutMode();
+    // Detect new layout mode after DOM has been updated.
+    // The detection is wrapped in queueMicroTask in order to allow custom Lit elements to render before measurement.
+    // https://github.com/vaadin/web-components/issues/8969
+    queueMicrotask(() => this.__detectLayoutMode());
 
     if (!this.__transition) {
       return Promise.resolve();

package/vaadin-master-detail-layout.js

@@ -1,3 +1,3 @@
-import './theme/lumo/vaadin-master-detail-layout.js';
+import './src/vaadin-master-detail-layout.js';
 
 export * from './src/vaadin-master-detail-layout.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-master-detail-layout",
-          "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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property                                  | Description         | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration`  | Transition duration | 300ms\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\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 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "detail-size",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-master-detail-layout",
-          "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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property                                  | Description         | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration`  | Transition duration | 300ms\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\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 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {

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

@@ -1,289 +0,0 @@
-/**
- * @license
- * Copyright (c) 2025 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const transitionStyles = css`
-  html:not([dir='rtl']) {
-    --_vaadin-master-detail-layout-dir-multiplier: 1;
-  }
-
-  html[dir='rtl'] {
-    --_vaadin-master-detail-layout-dir-multiplier: -1;
-  }
-
-  /* Default cross-fade animation */
-  vaadin-master-detail-layout[transition] {
-    view-transition-name: vaadin-master-detail-layout;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout) {
-    animation-duration: var(--vaadin-master-detail-layout-transition-duration, 300ms);
-  }
-
-  /* Drawer - horizontal - add */
-
-  vaadin-master-detail-layout[drawer][orientation='horizontal'][transition='add']::part(detail) {
-    view-transition-name: vaadin-master-detail-layout-drawer-horizontal-detail-add;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-drawer-horizontal-detail-add;
-  }
-
-  @keyframes vaadin-master-detail-layout-drawer-horizontal-detail-add {
-    from {
-      transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
-    }
-  }
-
-  /* Drawer - horizontal - remove */
-
-  vaadin-master-detail-layout[drawer][orientation='horizontal'][transition='remove']::part(detail) {
-    view-transition-name: vaadin-master-detail-layout-drawer-horizontal-detail-remove;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-drawer-horizontal-detail-remove;
-  }
-
-  @keyframes vaadin-master-detail-layout-drawer-horizontal-detail-remove {
-    to {
-      transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
-    }
-  }
-
-  /* Stack - horizontal - add */
-
-  vaadin-master-detail-layout[stack][orientation='horizontal'][transition='add'] {
-    view-transition-name: vaadin-master-detail-layout-stack-horizontal-add;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-stack-horizontal-add) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-horizontal-add-new;
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-horizontal-add-old;
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-horizontal-add-new {
-    from {
-      transform: translateX(calc(100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
-      opacity: 0;
-    }
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-horizontal-add-old {
-    to {
-      transform: translateX(calc(-100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
-      opacity: 0;
-    }
-  }
-
-  /* Stack - horizontal - remove */
-
-  vaadin-master-detail-layout[stack][orientation='horizontal'][transition='remove'] {
-    view-transition-name: vaadin-master-detail-layout-stack-horizontal-remove;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-stack-horizontal-remove) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-horizontal-remove-new;
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-horizontal-remove-old;
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-horizontal-remove-new {
-    from {
-      transform: translateX(calc(-100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
-      opacity: 0;
-    }
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-horizontal-remove-old {
-    to {
-      transform: translateX(calc(100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
-      opacity: 0;
-    }
-  }
-
-  /* Stack - horizontal - viewport - add */
-
-  vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='add'] {
-    view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-add;
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-viewport-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-horizontal-add-new;
-  }
-
-  /* Stack - horizontal - viewport - remove */
-
-  vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='remove'] {
-    view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-remove;
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-viewport-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-horizontal-remove-old;
-  }
-
-  /* Drawer - vertical - add */
-
-  vaadin-master-detail-layout[drawer][orientation='vertical'][transition='add']::part(detail) {
-    view-transition-name: vaadin-master-detail-layout-drawer-vertical-detail-add;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-add) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-drawer-vertical-detail-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-drawer-vertical-detail-add;
-  }
-
-  @keyframes vaadin-master-detail-layout-drawer-vertical-detail-add {
-    from {
-      transform: translateY(100%);
-    }
-  }
-
-  /* Drawer - vertical - remove */
-
-  vaadin-master-detail-layout[drawer][orientation='vertical'][transition='remove']::part(detail) {
-    view-transition-name: vaadin-master-detail-layout-drawer-vertical-detail-remove;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-drawer-vertical-detail-remove;
-  }
-
-  @keyframes vaadin-master-detail-layout-drawer-vertical-detail-remove {
-    to {
-      transform: translateY(100%);
-    }
-  }
-
-  /* Stack - vertical - add */
-
-  vaadin-master-detail-layout[stack][orientation='vertical'][transition='add'] {
-    view-transition-name: vaadin-master-detail-layout-stack-vertical-add;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-stack-vertical-add) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-stack-vertical-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-vertical-add-new;
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-vertical-add-old;
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-vertical-add-new {
-    from {
-      transform: translateY(100px);
-      opacity: 0;
-    }
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-vertical-add-old {
-    to {
-      transform: translateY(-100px);
-      opacity: 0;
-    }
-  }
-
-  /* Stack - vertical - remove */
-
-  vaadin-master-detail-layout[stack][orientation='vertical'][transition='remove'] {
-    view-transition-name: vaadin-master-detail-layout-stack-vertical-remove;
-  }
-
-  ::view-transition-group(vaadin-master-detail-layout-stack-vertical-remove) {
-    clip-path: inset(0);
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-stack-vertical-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-vertical-remove-new;
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-vertical-remove-old;
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-vertical-remove-new {
-    from {
-      transform: translateY(-100px);
-      opacity: 0;
-    }
-  }
-
-  @keyframes vaadin-master-detail-layout-stack-vertical-remove-old {
-    to {
-      transform: translateY(100px);
-      opacity: 0;
-    }
-  }
-
-  /* Stack - vertical - viewport - add */
-
-  vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='add'] {
-    view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-add;
-  }
-
-  ::view-transition-new(vaadin-master-detail-layout-stack-vertical-viewport-add) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-vertical-add-new;
-  }
-
-  /* Stack - vertical - viewport - remove */
-
-  vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='remove'] {
-    view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-remove;
-  }
-
-  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-viewport-remove) {
-    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
-      vaadin-master-detail-layout-stack-vertical-remove-old;
-  }
-`;

package/theme/lumo/vaadin-master-detail-layout-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';

package/theme/lumo/vaadin-master-detail-layout-styles.js

@@ -1,28 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-master-detail-layout',
-  css`
-    :host(:is([drawer], [stack])) [part='detail'] {
-      background-color: var(--lumo-base-color);
-    }
-
-    :host([drawer]) [part='detail'] {
-      box-shadow: var(--lumo-box-shadow-s);
-    }
-
-    :host([drawer][orientation='horizontal']) [part='detail'] {
-      border-inline-start: 1px solid var(--lumo-contrast-10pct);
-    }
-
-    :host([drawer][orientation='vertical']) [part='detail'] {
-      border-block-start: 1px solid var(--lumo-contrast-10pct);
-    }
-
-    :host([drawer]) [part='backdrop'] {
-      background-color: var(--lumo-shade-20pct);
-    }
-  `,
-  { moduleId: 'lumo-master-detail-layout' },
-);

package/theme/lumo/vaadin-master-detail-layout.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-master-detail-layout-styles.js';
-import '../../src/vaadin-master-detail-layout.js';

package/theme/lumo/vaadin-master-detail-layout.js

@@ -1,2 +0,0 @@
-import './vaadin-master-detail-layout-styles.js';
-import '../../src/vaadin-master-detail-layout.js';