@vaadin/master-detail-layout 24.8.0-alpha6 → 24.8.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "24.8.0-alpha6",
+  "version": "24.8.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -34,15 +34,15 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "24.8.0-alpha6",
-    "@vaadin/component-base": "24.8.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha6",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha6",
+    "@vaadin/a11y-base": "24.8.0-alpha8",
+    "@vaadin/component-base": "24.8.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha6",
+    "@vaadin/chai-plugins": "24.8.0-alpha8",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -50,5 +50,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "be9ac1686511f20dad4adf9303597c5eaa687df3"
+  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
 }

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

@@ -15,13 +15,13 @@ export const transitionStyles = css`
   }
 
   /* Default cross-fade animation */
-  vaadin-master-detail-layout {
+  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);
-
+  }
 
   /* Overlay - horizontal - add */
 

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

@@ -122,18 +122,6 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
    * @attr {boolean} no-animation
    */
   noAnimation: boolean;
-
-  /**
-   * Sets the detail element to be displayed in the detail area and starts a
-   * view transition that animates adding, replacing or removing the detail
-   * area. During the view transition, the element is added to the DOM and
-   * assigned to the `detail` slot. Any previous detail element is removed.
-   * When passing null as the element, the current detail element is removed.
-   *
-   * If the browser does not support view transitions, the respective updates
-   * are applied immediately without starting a transition.
-   */
-  protected _setDetail(detail: HTMLElement | null): Promise<void>;
 }
 
 declare global {

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

@@ -550,22 +550,22 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
    * When passing null as the element, the current detail element is removed.
    *
    * If the browser does not support view transitions, the respective updates
-   * are applied immediately without starting a transition.
+   * are applied immediately without starting a transition. The transition can
+   * also be skipped using the `skipTransition` parameter.
    *
    * @param element the new detail element, or null to remove the current detail
+   * @param skipTransition whether to skip the transition
    * @returns {Promise<void>}
    * @protected
    */
-  _setDetail(element) {
+  _setDetail(element, skipTransition) {
     // Don't start a transition if detail didn't change
     const currentDetail = this.querySelector('[slot="detail"]');
     if ((element || null) === currentDetail) {
-      return;
+      return Promise.resolve();
     }
 
-    const hasDetail = !!currentDetail;
-    const transitionType = hasDetail && element ? 'replace' : hasDetail ? 'remove' : 'add';
-    return this._startTransition(transitionType, () => {
+    const updateSlot = () => {
       // Remove old content
       this.querySelectorAll('[slot="detail"]').forEach((oldElement) => oldElement.remove());
       // Add new content
@@ -573,6 +573,18 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
         element.setAttribute('slot', 'detail');
         this.appendChild(element);
       }
+    };
+
+    if (skipTransition) {
+      updateSlot();
+      return Promise.resolve();
+    }
+
+    const hasDetail = !!currentDetail;
+    const transitionType = hasDetail && element ? 'replace' : hasDetail ? 'remove' : 'add';
+    return this._startTransition(transitionType, () => {
+      // Update the DOM
+      updateSlot();
       // Finish the transition
       this._finishTransition();
     });

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "24.8.0-alpha6",
+  "version": "24.8.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "24.8.0-alpha6",
+  "version": "24.8.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {