@vaadin/master-detail-layout 24.8.0-alpha4 → 24.8.0-alpha5

package/package.json

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

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

@@ -109,4 +109,108 @@ export const transitionStyles = css`
       opacity: 0;
     }
   }
+
+  /* Overlay - vertical - add */
+
+  vaadin-master-detail-layout[overlay][orientation='vertical'][transition='add']::part(detail) {
+    view-transition-name: vaadin-master-detail-layout-overlay-vertical-detail-add;
+  }
+
+  ::view-transition-group(vaadin-master-detail-layout-overlay-vertical-detail-add) {
+    clip-path: inset(0);
+  }
+
+  ::view-transition-new(vaadin-master-detail-layout-overlay-vertical-detail-add) {
+    animation: 300ms ease both vaadin-master-detail-layout-overlay-vertical-detail-add;
+  }
+
+  @keyframes vaadin-master-detail-layout-overlay-vertical-detail-add {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  /* Overlay - vertical - remove */
+
+  vaadin-master-detail-layout[overlay][orientation='vertical'][transition='remove']::part(detail) {
+    view-transition-name: vaadin-master-detail-layout-overlay-vertical-detail-remove;
+  }
+
+  ::view-transition-group(vaadin-master-detail-layout-overlay-vertical-detail-remove) {
+    clip-path: inset(0);
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-overlay-vertical-detail-remove) {
+    animation: 300ms ease both vaadin-master-detail-layout-overlay-vertical-detail-remove;
+  }
+
+  @keyframes vaadin-master-detail-layout-overlay-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: 300ms ease both vaadin-master-detail-layout-stack-vertical-add-new;
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-add) {
+    animation: 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: 300ms ease both vaadin-master-detail-layout-stack-vertical-remove-new;
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-remove) {
+    animation: 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;
+    }
+  }
 `;

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

@@ -108,6 +108,13 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
    */
   stackThreshold: string | null | undefined;
 
+  /**
+   * When true, the layout does not use animated transitions for the detail area.
+   *
+   * @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

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

@@ -304,6 +304,16 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
         sync: true,
       },
 
+      /**
+       * When true, the layout does not use animated transitions for the detail area.
+       *
+       * @attr {boolean} no-animation
+       */
+      noAnimation: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * When true, the component uses the overlay mode. This property is read-only.
        * In order to enforce the overlay mode, use `forceOverlay` property.
@@ -545,7 +555,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
       }
     };
 
-    if (typeof document.startViewTransition === 'function') {
+    if (typeof document.startViewTransition === 'function' && !this.noAnimation) {
       const hasDetail = !!currentDetail;
       const transitionType = hasDetail && element ? 'replace' : hasDetail ? 'remove' : 'add';
       this.setAttribute('transition', transitionType);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/master-detail-layout",
-  "version": "24.8.0-alpha4",
+  "version": "24.8.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -98,6 +98,17 @@
                 ]
               }
             },
+            {
+              "name": "no-animation",
+              "description": "When true, the layout does not use animated transitions for the detail area.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -199,6 +210,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "noAnimation",
+                "description": "When true, the layout does not use animated transitions for the detail area.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": []

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-alpha4",
+  "version": "24.8.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -26,6 +26,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?noAnimation",
+              "description": "When true, the layout does not use animated transitions for the detail area.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".detailSize",
               "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 layout switches to the overlay mode.",