refactor: replace view transitions with Web Animations in MDL

Replace the View Transitions API with the Web Animations API for
master-detail-layout detail panel animations. This fixes two issues:
- View transition styles don't work when MDL is inside a shadow root
- [overflow] attribute eagerly removed when closing details

Uses element.animate() with parameters read from CSS custom properties
(--_mdl-detail-offscreen, --_mdl-transition-duration, --_mdl-easing).
Animations are interruptible via cancel(). Replace transitions show
old content sliding out simultaneously with new content sliding in,
using a detail-outgoing slot that keeps old content in light DOM.

Removes SlotStylesMixin dependency and document-level pseudo-elements.
Uses preventScroll on focus to avoid scrolling the overflow:hidden
host during overlay transitions. Duration defaults to 0s and is enabled
via prefers-reduced-motion: no-preference media query.

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

Author: web-padawan

packages/aura/src/components/dialog.css

@@ -17,18 +17,8 @@ vaadin-confirm-dialog::part(overlay) {
     var(--vaadin-dialog-shadow, var(--vaadin-overlay-shadow, var(--aura-overlay-shadow)));
   --aura-surface-level: 2;
   --aura-surface-opacity: var(--aura-overlay-surface-opacity);
-
-  /* TODO probably should be in base styles */
-  /* Keeps dialogs on top of MDL view transitions */
-  view-transition-name: vaadin-dialog;
 }
 
 vaadin-confirm-dialog::part(message) {
   color: var(--vaadin-text-color-secondary);
 }
-
-/* TODO probably should be in base styles */
-::view-transition-group(vaadin-dialog) {
-  border-radius: var(--vaadin-dialog-border-radius, var(--vaadin-radius-l));
-  z-index: 1;
-}

packages/aura/src/components/master-detail-layout.css

@@ -30,11 +30,3 @@ vaadin-master-detail-layout:not([overflow])::part(detail) {
   border-start-end-radius: var(--_app-layout-radius);
   border-end-end-radius: var(--_app-layout-radius);
 }
-
-/* TODO these end up affecting all MDLs, not just the one directly inside the App Layout */
-::view-transition-group(vaadin-mdl-backdrop),
-::view-transition-group(vaadin-mdl-master),
-::view-transition-group(vaadin-mdl-detail) {
-  border-radius: var(--_app-layout-radius);
-  overflow: hidden;
-}

packages/aura/src/components/notification.css

@@ -13,10 +13,6 @@ vaadin-notification-card::part(overlay) {
   --aura-surface-level: 3.5;
   background: var(--vaadin-notification-background, var(--aura-surface-color));
   box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-notification-shadow, var(--aura-overlay-shadow));
-
-  /* TODO probably should be in base styles */
-  /* Keeps notifications on top of MDL view transitions */
-  view-transition-name: vaadin-notification;
 }
 
 vaadin-notification-card:is(
@@ -44,21 +40,6 @@ vaadin-notification-card:is(
     var(--vaadin-notification-shadow, var(--aura-shadow-m));
 }
 
-::view-transition-group(vaadin-notification) {
-  /* Keep on top of MDL view-transition elements */
-  z-index: 1;
-  /* The backdrop-filter from vaadin-notification-card::part(overlay) is copied here, so we need to clip it with the same border radius */
-  border-radius: var(--vaadin-notification-border-radius, var(--vaadin-radius-l));
-}
-
-/* In Safari, the backdrop-filter is copied to transition-group pseudo element but also retained in the new/old pseudo elements */
-/* Removing it from the transition-group makes it look better */
-@supports (background: -webkit-named-image(i)) {
-  ::view-transition-group(vaadin-notification) {
-    backdrop-filter: none;
-  }
-}
-
 vaadin-notification-card vaadin-card {
   --vaadin-card-border-width: 0px;
   --vaadin-card-gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);

packages/master-detail-layout/ARCHITECTURE.md

@@ -62,10 +62,6 @@ Layout detection is split into two methods to avoid forced reflows:
 - ResizeObserver callback: calls `__computeLayoutState()` (read), cancels any pending rAF via `cancelAnimationFrame`, then defers `__applyLayoutState()` (write) via `requestAnimationFrame`. Cancelling ensures the write phase always uses the latest state when multiple callbacks fire per frame.
 - **Property observers** (`masterSize`/`detailSize`) only update CSS custom properties — ResizeObserver picks up the resulting size changes automatically
 
-### View transitions
-
-`_finishTransition()` uses `queueMicrotask` to call both `__computeLayoutState()` + `__applyLayoutState()` synchronously. The microtask runs before the Promise resolution propagates to `startViewTransition`, ensuring the "new" snapshot captures the correct overlay state (backdrop, absolute positioning). The `getComputedStyle` read in the microtask does cause a forced reflow, but this is unavoidable for correct transition snapshots.
-
 ## Overlay Modes
 
 When `overflow` AND `has-detail` are both set, the detail becomes an overlay:
@@ -100,15 +96,48 @@ When no detail is present, master's extra track is set to `calc(100% - masterSiz
 
 Set when detail first appears with overflow, cleared when detail is removed or overflow resolves.
 
-## View Transitions
+## Detail Animations
+
+Detail panel slide transitions use the Web Animations API (`element.animate()`) on the `translate` property. This works inside shadow roots (unlike the View Transitions API).
+
+### CSS custom properties
+
+Animation parameters are driven by CSS custom properties, read once per transition to avoid repeated layout reads:
+
+- `--_detail-offscreen` — off-screen translate value (horizontal or vertical depending on orientation)
+- `--_transition-duration` — defaults to `0s`, enabled to `400ms` via `@media (prefers-reduced-motion: no-preference)` + `:host(:not([no-animation]))`
+- `--_transition-easing` — cubic-bezier easing
+
+CSS handles resting states: `translate: var(--_detail-offscreen)` on `[part~='detail']` by default, overridden to `translate: none` by `:host([has-detail])`. RTL is supported via `--_rtl-multiplier`.
+
+### Transition types
+
+- **Add**: DOM is updated first (new element inserted, `has-detail` set), then the detail slides in from off-screen
+- **Remove**: the detail slides out to off-screen first, then the DOM is updated (element removed, `has-detail` cleared) on `animation.finished`
+- **Replace**: old content is reassigned to `slot="detail-outgoing"` (stays in light DOM so styles continue to apply), then old slides out while new slides in simultaneously
+
+The `noAnimation` property (reflected as `no-animation` attribute) skips all animations. Animations are also disabled when `--_transition-duration` resolves to `0s`.
+
+### Transition flow
+
+1. **Capture interrupted position** — read the detail panel's current `translate` via `getComputedStyle()` _before_ cancelling any in-progress animation (see "Smooth interruption" below)
+2. **Cancel previous** — cancel in-progress animations, clean up state, resolve the pending promise
+3. **Snapshot outgoing** — reassign old content to the outgoing slot (replace only)
+4. **DOM update** — run the update callback, apply layout state (add/replace only; remove defers this to step 6)
+5. **Animate** — create Web Animations on `translate` using parameters from step 1
+6. **Finish** — on `animation.finished`, clean up the `transition` attribute and resolve the promise. For remove, the deferred DOM update runs here
+
+A version counter guards step 6: if a newer transition has started since step 5, the stale finish callback is ignored.
+
+### Smooth interruption
+
+`animation.cancel()` removes the animation effect and the element reverts to its CSS resting state — causing a visual jump. To avoid this, the current `translate` value is read via `getComputedStyle()` _before_ cancelling. This captured mid-flight position becomes the starting keyframe of the new animation, so the panel changes direction smoothly from where it actually is.
+
+For `replace` interruptions, the captured position is applied to the outgoing element (since the interrupted content moves from the detail slot to the outgoing slot).
 
-Uses the CSS View Transitions API (`document.startViewTransition`):
+### Outgoing container
 
-- `_setDetail(element, skipTransition)` — adds/replaces/removes detail with animation
-- `_startTransition(transitionType, updateCallback)` — starts a named transition
-- `_finishTransition()` — calls `__computeLayoutState()` + `__applyLayoutState()` via `queueMicrotask` (see read/write separation above)
-- `noAnimation` property disables transitions
-- Styles injected via `SlotStylesMixin`
+The `#detail-outgoing` shadow DOM element with `<slot name="detail-outgoing">` enables simultaneous replace animations. Old content is moved to this slot (light DOM reassignment preserves user styles), animated out, then removed on completion.
 
 ## Test Patterns
 

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

@@ -12,6 +12,10 @@ export const masterDetailLayoutStyles = css`
     --_detail-size: 15em;
     --_master-column: var(--_master-size) 0;
     --_detail-column: var(--_detail-size) 0;
+    --_transition-duration: 0s;
+    --_transition-easing: cubic-bezier(0.78, 0, 0.22, 1);
+    --_rtl-multiplier: 1;
+    --_detail-offscreen: calc((100% + 30px) * var(--_rtl-multiplier));
 
     display: grid;
     box-sizing: border-box;
@@ -27,21 +31,29 @@ export const masterDetailLayoutStyles = css`
     display: none !important;
   }
 
+  :host([dir='rtl']) {
+    --_rtl-multiplier: -1;
+  }
+
   :host([orientation='vertical']) {
+    --_detail-offscreen: 0 calc(100% + 30px);
+
     grid-template-columns: 100%;
     grid-template-rows: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
   }
 
   #master,
-  #detail {
+  #detail,
+  #outgoing {
     box-sizing: border-box;
   }
 
   #master {
     grid-column: master-start / detail-start;
   }
 
-  #detail {
+  #detail,
+  #outgoing {
     grid-column: detail-start / detail-end;
   }
 
@@ -50,7 +62,8 @@ export const masterDetailLayoutStyles = css`
     grid-row: master-start / detail-start;
   }
 
-  :host([orientation='vertical']) #detail {
+  :host([orientation='vertical']) #detail,
+  :host([orientation='vertical']) #outgoing {
     grid-column: auto;
     grid-row: detail-start / detail-end;
   }
@@ -89,7 +102,41 @@ export const masterDetailLayoutStyles = css`
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
-  :host([overflow]) #detail {
+  /* Detail transition: off-screen by default, on-screen when has-detail */
+  #detail {
+    translate: var(--_detail-offscreen);
+  }
+
+  :host([has-detail]) #detail {
+    translate: none;
+  }
+
+  /* During replace, both detail elements must overlap in the same grid
+     cell. Without explicit placement on the non-positioned axis, the
+     second element is auto-placed into an implicit track. In split mode,
+     the outgoing cross-fades out and needs an opaque background so
+     transparent areas don't reveal the incoming prematurely. In overlay
+     mode, the [overflow] rule already provides the background. */
+  :host(:not([overflow])[transition='replace']) #outgoing {
+    background: var(--vaadin-master-detail-layout-detail-background, var(--vaadin-background-color));
+  }
+
+  :host(:not([orientation='vertical'])[transition='replace']) #detail,
+  :host(:not([orientation='vertical'])[transition='replace']) #outgoing {
+    grid-row: 1 / -1;
+  }
+
+  :host([orientation='vertical'][transition='replace']) #detail,
+  :host([orientation='vertical'][transition='replace']) #outgoing {
+    grid-column: 1 / -1;
+  }
+
+  #outgoing:not([hidden]) {
+    z-index: 1;
+  }
+
+  :host([overflow]) #detail,
+  :host([overflow]) #outgoing {
     position: absolute;
     z-index: 2;
     background: var(--vaadin-master-detail-layout-detail-background, var(--vaadin-background-color));
@@ -101,13 +148,15 @@ export const masterDetailLayoutStyles = css`
     display: block;
   }
 
-  :host([overflow]:not([orientation='vertical'])) #detail {
+  :host([overflow]:not([orientation='vertical'])) #detail,
+  :host([overflow]:not([orientation='vertical'])) #outgoing {
     inset-block: 0;
     width: var(--_overlay-size, var(--_detail-size, min-content));
     inset-inline-end: 0;
   }
 
-  :host([overflow][orientation='vertical']) #detail {
+  :host([overflow][orientation='vertical']) #detail,
+  :host([overflow][orientation='vertical']) #outgoing {
     grid-column: auto;
     grid-row: none;
     inset-inline: 0;
@@ -116,17 +165,27 @@ export const masterDetailLayoutStyles = css`
   }
 
   :host([overflow][overlay-containment='viewport']) #detail,
+  :host([overflow][overlay-containment='viewport']) #outgoing,
   :host([overflow][overlay-containment='viewport']) [part~='backdrop'] {
     position: fixed;
   }
 
   @media (forced-colors: active) {
-    :host([overflow]) #detail {
+    :host([overflow]) #detail,
+    :host([overflow]) #outgoing {
       outline: 3px solid !important;
     }
 
-    #detail {
+    #detail,
+    #outgoing {
       background: Canvas !important;
     }
   }
+
+  /* Enable transitions when motion is allowed */
+  @media (prefers-reduced-motion: no-preference) {
+    :host(:not([no-animation])) {
+      --_transition-duration: 400ms;
+    }
+  }
 `;

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

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 export interface MasterDetailLayoutCustomEventMap {
@@ -55,7 +54,7 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
  * @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the overlay mode.
  * @fires {CustomEvent} detail-escape-press - Fired when the user presses Escape in the detail area.
  */
-declare class MasterDetailLayout extends SlotStylesMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+declare class MasterDetailLayout extends ThemableMixin(ElementMixin(HTMLElement)) {
   /**
    * Size (in CSS length units) to be set on the detail area in
    * the CSS grid layout. If there is not enough space to show