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,9 +62,21 @@ 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
+### Web Animations
 
-`_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.
+Detail panel slide animations use the Web Animations API (`element.animate()`). Animation parameters are read from CSS custom properties:
+
+- `--_mdl-detail-offscreen` — off-screen translate value (horizontal or vertical depending on orientation)
+- `--_mdl-transition-duration` — defaults to `0s`, enabled to `400ms` via `@media (prefers-reduced-motion: no-preference)` + `:host(:not([no-animation]))`
+- `--_mdl-easing` — cubic-bezier easing
+
+CSS still handles resting states: default `translate: var(--_mdl-detail-offscreen)` on `[part~='detail']`, overridden to `translate: none` by `:host([has-detail])`.
+
+- **Add**: DOM updated, `_finishTransition()` sets `has-detail`, then `__animate()` slides detail from off-screen to on-screen
+- **Remove**: `__animate()` slides detail from on-screen to off-screen, element removed on `animation.finished`
+- **Replace**: old content reassigned to `slot="detail-outgoing"` (stays in light DOM for style continuity), old slides out while new slides in simultaneously via two `__animate()` calls
+- **Interruptible**: `__endTransition()` cancels in-progress animations; version counter prevents stale callbacks
+- RTL support via `--_mdl-dir-multiplier` CSS variable with `:host([dir='rtl'])`
 
 ## Overlay Modes
 
@@ -100,15 +112,17 @@ 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
 
-Uses the CSS View Transitions API (`document.startViewTransition`):
+Uses the Web Animations API (`element.animate()`) for detail panel transitions:
 
 - `_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`
+- `_startTransition(transitionType, updateCallback)` — reads CSS custom properties, calls `__animate()`, manages lifecycle via `__endTransition()`
+- `_finishTransition()` — computes and applies layout state (`has-detail`, `overflow`, etc.)
+- `__animate(element, offscreen, duration, easing, slideOut)` — creates a Web Animation on `translate`, returns `animation.finished` promise
+- `noAnimation` property (reflected to attribute) disables animations; also disabled via CSS when `--_mdl-transition-duration: 0s`
+- `#detail-outgoing` container with `<slot name="detail-outgoing">` for simultaneous replace animations (old content stays in light DOM via slot reassignment)
+- Animations work inside shadow roots (unlike View Transitions API)
 
 ## 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;
+    --_mdl-transition-duration: 0s;
+    --_mdl-easing: cubic-bezier(0.78, 0, 0.22, 1);
+    --_mdl-dir-multiplier: 1;
+    --_mdl-detail-offscreen: calc((100% + 30px) * var(--_mdl-dir-multiplier));
 
     display: grid;
     box-sizing: border-box;
@@ -27,7 +31,13 @@ export const masterDetailLayoutStyles = css`
     display: none !important;
   }
 
+  :host([dir='rtl']) {
+    --_mdl-dir-multiplier: -1;
+  }
+
   :host([orientation='vertical']) {
+    --_mdl-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];
   }
@@ -89,6 +99,27 @@ export const masterDetailLayoutStyles = css`
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
+  /* Detail transition: off-screen by default, on-screen when has-detail */
+  [part~='detail']:not([part~='detail-outgoing']) {
+    translate: var(--_mdl-detail-offscreen);
+  }
+
+  :host([has-detail]) [part~='detail']:not([part~='detail-outgoing']) {
+    translate: none;
+  }
+
+  /* During replace, the outgoing detail needs an opaque background for
+     the slide-out to be visible in split mode (no background by default).
+     The outgoing also needs grid-row to overlap with the incoming detail
+     (otherwise auto-placed in an implicit row with 0 height). */
+  :host([transition='replace']) [part~='detail'] {
+    background: var(--vaadin-master-detail-layout-detail-background, var(--vaadin-background-color));
+  }
+
+  [part~='detail-outgoing']:not([hidden]) {
+    grid-row: 1 / -1;
+  }
+
   :host([overflow]) [part~='detail'] {
     position: absolute;
     z-index: 2;
@@ -129,4 +160,11 @@ export const masterDetailLayoutStyles = css`
       background: Canvas !important;
     }
   }
+
+  /* Enable transitions when motion is allowed */
+  @media (prefers-reduced-motion: no-preference) {
+    :host(:not([no-animation])) {
+      --_mdl-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