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

package/README.md

@@ -2,6 +2,8 @@
 
 A web component for building UIs with a master (or primary) area and a detail (or secondary) area.
 
+> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.masterDetailLayoutComponent = true`.
+
 ```html
 <vaadin-master-detail-layout>
   <div>Master content</div>

package/package.json

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

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

@@ -133,6 +133,28 @@ export const transitionStyles = css`
     }
   }
 
+  /* 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;
+  }
+
   /* Overlay - vertical - add */
 
   vaadin-master-detail-layout[overlay][orientation='vertical'][transition='add']::part(detail) {
@@ -242,4 +264,26 @@ export const transitionStyles = css`
       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/src/vaadin-master-detail-layout.js

@@ -94,6 +94,11 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
       :host([overlay][has-detail]) [part='backdrop'] {
         display: block;
         inset: 0;
+        z-index: 1;
+      }
+
+      :host([overlay]) [part='detail'] {
+        z-index: 1;
       }
 
       :host([overlay][orientation='horizontal']) [part='detail'] {
@@ -353,9 +358,24 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
         reflectToAttribute: true,
         sync: true,
       },
+
+      /**
+       * When true, the component has the detail content provided.
+       * @protected
+       */
+      _hasDetail: {
+        type: Boolean,
+        attribute: 'has-detail',
+        reflectToAttribute: true,
+        sync: true,
+      },
     };
   }
 
+  static get experimental() {
+    return true;
+  }
+
   /** @override */
   get slotStyles() {
     return [transitionStyles];
@@ -365,7 +385,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
   render() {
     return html`
       <div part="backdrop"></div>
-      <div id="master" part="master" ?inert="${this._overlay && this.containment === 'layout'}">
+      <div id="master" part="master" ?inert="${this._hasDetail && this._overlay && this.containment === 'layout'}">
         <slot></slot>
       </div>
       <div
@@ -383,7 +403,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
   __onDetailSlotChange(e) {
     const children = e.target.assignedNodes();
 
-    this.toggleAttribute('has-detail', children.length > 0);
+    this._hasDetail = children.length > 0;
     this.__detectLayoutMode();
 
     // Move focus to the detail area when it is added to the DOM,
@@ -477,15 +497,20 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
     }
 
     if (this.stackThreshold != null) {
+      // Set stack to true to disable masterMinSize and detailMinSize
+      // that would affect size measurements below when in split mode
+      this._stack = true;
+
       const threshold = this.__getStackThresholdInPixels();
       const size = this.orientation === 'vertical' ? this.offsetHeight : this.offsetWidth;
-      if (size <= threshold) {
-        this._stack = true;
+      if (size > threshold) {
+        this._stack = false;
+      } else {
         return;
       }
     }
 
-    if (!this.hasAttribute('has-detail')) {
+    if (!this._hasDetail) {
       return;
     }
 

package/web-types.json

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