@vaadin/master-detail-layout 25.2.0-alpha6 → 25.2.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/master-detail-layout",
-  "version": "25.2.0-alpha6",
+  "version": "25.2.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -34,16 +34,16 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.2.0-alpha6",
-    "@vaadin/component-base": "25.2.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha6",
+    "@vaadin/a11y-base": "25.2.0-alpha7",
+    "@vaadin/component-base": "25.2.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha6",
-    "@vaadin/chai-plugins": "25.2.0-alpha6",
+    "@vaadin/aura": "25.2.0-alpha7",
+    "@vaadin/chai-plugins": "25.2.0-alpha7",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha7",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "30f23c65765f27616f2db292406d5759a7e987c3"
+  "gitHead": "3f0862906d60205d107836d8eca84c6fde4a9129"
 }

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

@@ -51,17 +51,17 @@ export const masterDetailLayoutStyles = css`
       [detail-end];
   }
 
-  :is(#master, #detail, #detail-placeholder, #outgoing) {
+  :is(#master, #detail, #detailPlaceholder, #detailOutgoing) {
     box-sizing: border-box;
   }
 
-  #detail-placeholder {
+  #detailPlaceholder {
     z-index: 1;
     opacity: 0;
     pointer-events: none;
   }
 
-  :host([has-detail-placeholder]:not([has-detail], [overlay])) #detail-placeholder {
+  :host([has-detail-placeholder]:not([has-detail], [overlay])) #detailPlaceholder {
     opacity: 1;
     pointer-events: auto;
   }
@@ -69,9 +69,16 @@ export const masterDetailLayoutStyles = css`
   #master {
     grid-column: master-start / detail-start;
     grid-row: 1;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([has-master]) #master {
+    opacity: 1;
+    pointer-events: auto;
   }
 
-  :is(#detail, #detail-placeholder, #outgoing) {
+  :is(#detail, #detailPlaceholder, #detailOutgoing) {
     grid-column: detail-start / detail-end;
     grid-row: 1;
   }
@@ -81,7 +88,7 @@ export const masterDetailLayoutStyles = css`
     grid-row: master-start / detail-start;
   }
 
-  :host([orientation='vertical']) :is(#detail, #detail-placeholder, #outgoing) {
+  :host([orientation='vertical']) :is(#detail, #detailPlaceholder, #detailOutgoing) {
     grid-column: 1;
     grid-row: detail-start / detail-end;
   }
@@ -113,26 +120,31 @@ export const masterDetailLayoutStyles = css`
   }
 
   :host([keep-detail-column-offscreen]),
-  :host([has-detail-placeholder][overlay]),
+  :host([has-detail-placeholder][overlay]:not([has-detail])),
   :host(:not([has-detail-placeholder], [has-detail])) {
     --_master-extra: calc(100% - var(--_master-size));
   }
 
-  :host([orientation='horizontal']) #detail-placeholder,
+  :host([orientation='horizontal']) #detailPlaceholder,
   :host([orientation='horizontal']:not([overlay])) #detail {
     border-inline-start: var(--vaadin-master-detail-layout-border-width, 1px) solid
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
-  :host([orientation='vertical']) #detail-placeholder,
+  :host([orientation='vertical']) #detailPlaceholder,
   :host([orientation='vertical']:not([overlay])) #detail {
     border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
       var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
   }
 
-  #outgoing {
+  #detailOutgoing {
     position: absolute;
     z-index: 3;
+    display: none;
+  }
+
+  :host([transition='replace']) #detailOutgoing {
+    display: block;
   }
 
   /* Detail transition: off-screen by default, on-screen when has-detail */
@@ -155,7 +167,7 @@ export const masterDetailLayoutStyles = css`
     --_transition-offset: 0 calc(100% + 30px);
   }
 
-  :host([has-detail][overlay]) :is(#detail, #outgoing) {
+  :host([has-detail][overlay]) :is(#detail, #detailOutgoing) {
     position: absolute;
     background: var(--vaadin-master-detail-layout-detail-background, var(--vaadin-background-color));
     box-shadow: var(--vaadin-master-detail-layout-detail-shadow, 0 0 20px 0 rgba(0, 0, 0, 0.3));
@@ -168,30 +180,30 @@ export const masterDetailLayoutStyles = css`
     pointer-events: auto;
   }
 
-  :host([has-detail][overlay]:not([orientation='vertical'])) :is(#detail, #outgoing) {
+  :host([has-detail][overlay]:not([orientation='vertical'])) :is(#detail, #detailOutgoing) {
     inset-block: 0;
     inset-inline-end: 0;
     width: var(--_overlay-size, var(--_detail-size));
     max-width: 100%;
   }
 
-  :host([has-detail][overlay][orientation='vertical']) :is(#detail, #outgoing) {
+  :host([has-detail][overlay][orientation='vertical']) :is(#detail, #detailOutgoing) {
     inset-inline: 0;
     inset-block-end: 0;
     height: var(--_overlay-size, var(--_detail-size));
     max-height: 100%;
   }
 
-  :host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #outgoing, #backdrop) {
+  :host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #detailOutgoing, #backdrop) {
     position: fixed;
   }
 
   @media (forced-colors: active) {
-    :host([has-detail][overlay]) :is(#detail, #outgoing) {
+    :host([has-detail][overlay]) :is(#detail, #detailOutgoing) {
       outline: 3px solid !important;
     }
 
-    :is(#detail, #detail-placeholder, #outgoing) {
+    :is(#detail, #detailPlaceholder, #detailOutgoing) {
       background: Canvas !important;
     }
   }

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

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement, nothing } from 'lit';
-import { getFocusableElements } from '@vaadin/a11y-base/src/focus-utils.js';
+import { getFocusableElements, isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -202,12 +202,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
         reflectToAttribute: true,
       },
 
-      /** @private */
-      __replacing: {
-        type: Boolean,
-        sync: true,
-      },
-
       /** @private */
       __detailCachedSize: {
         type: String,
@@ -232,7 +226,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       <div id="master" part="master" ?inert="${isLayoutContained}">
         <slot @slotchange="${this.__onSlotChange}"></slot>
       </div>
-      <div id="outgoing" inert ?hidden="${!this.__replacing}">
+      <div id="detailOutgoing" inert>
         <slot name="detail-outgoing"></slot>
       </div>
       <div
@@ -244,7 +238,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       >
         <slot name="detail" @slotchange="${this.__onSlotChange}"></slot>
       </div>
-      <div id="detail-placeholder" part="detail-placeholder">
+      <div id="detailPlaceholder" part="detail-placeholder">
         <slot name="detail-placeholder" @slotchange="${this.__onSlotChange}"></slot>
       </div>
     `;
@@ -254,6 +248,17 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   connectedCallback() {
     super.connectedCallback();
     this.__initResizeObserver();
+
+    const ancestorLayouts = this.__ancestorLayouts;
+    if (ancestorLayouts.length > 0) {
+      ancestorLayouts.forEach((layout) => {
+        cancelAnimationFrame(layout.__initialRaf);
+      });
+
+      this.__initialRaf = requestAnimationFrame(() => {
+        this.recalculateLayout();
+      });
+    }
   }
 
   /** @protected */
@@ -261,6 +266,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     super.disconnectedCallback();
     this.__resizeObserver.disconnect();
     cancelAnimationFrame(this.__resizeRaf);
+    cancelAnimationFrame(this.__initialRaf);
     cancelAnimations(this);
   }
 
@@ -318,9 +324,10 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     this.__resizeObserver = this.__resizeObserver || new ResizeObserver(() => this.__onResize());
     this.__resizeObserver.disconnect();
 
-    const children = this.querySelectorAll(':scope > [slot="detail"], :scope >:not([slot])');
-    [this, this.$.master, this.$.detail, ...children].forEach((node) => {
-      this.__resizeObserver.observe(node);
+    [this, this.$.master, this.$.detail, this.__slottedMaster, this.__slottedDetail].forEach((node) => {
+      if (node) {
+        this.__resizeObserver.observe(node);
+      }
     });
   }
 
@@ -344,12 +351,14 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   __readLayoutState() {
     const isVertical = this.orientation === 'vertical';
 
-    const detailContent = this.querySelector(':scope > [slot="detail"]');
-    const detailPlaceholder = this.querySelector(':scope > [slot="detail-placeholder"]');
+    const slottedMaster = this.__slottedMaster;
+    const slottedDetail = this.__slottedDetail;
+    const slottedDetailPlaceholder = this.__slottedDetailPlaceholder;
 
+    const hasMaster = !!slottedMaster;
     const hadDetail = this.hasAttribute('has-detail');
-    const hasDetail = detailContent != null && detailContent.checkVisibility();
-    const hasDetailPlaceholder = !!detailPlaceholder;
+    const hasDetail = slottedDetail != null && slottedDetail.checkVisibility();
+    const hasDetailPlaceholder = !!slottedDetailPlaceholder;
 
     const computedStyle = getComputedStyle(this);
     const hostSizeProp = isVertical ? 'height' : 'width';
@@ -359,9 +368,10 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     const trackSizes = parseTrackSizes(computedStyle[trackSizesProp]);
 
     const hasOverflow = (hasDetail || hasDetailPlaceholder) && detectOverflow(hostSize, trackSizes);
-    const focusTarget = !hadDetail && hasDetail && hasOverflow ? getFocusableElements(detailContent)[0] : null;
+    const focusTarget = !hadDetail && hasDetail && hasOverflow ? getFocusableElements(slottedDetail)[0] : null;
 
     return {
+      hasMaster,
       hadDetail,
       hasDetail,
       hasDetailPlaceholder,
@@ -376,7 +386,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * Applies layout state to DOM attributes. Pure writes, no reads.
    * @private
    */
-  __writeLayoutState({ hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget, trackSizes }) {
+  __writeLayoutState({ hasMaster, hadDetail, hasDetail, hasDetailPlaceholder, hasOverflow, focusTarget, trackSizes }) {
     const [_masterSize, _masterExtra, detailSize] = trackSizes;
 
     // If no detailSize is explicitily set, cache the intrinsic size (min-content) of
@@ -398,6 +408,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     }
 
     this.toggleAttribute('overlay', hasOverflow);
+    this.toggleAttribute('has-master', hasMaster);
     this.toggleAttribute('has-detail', hasDetail);
     this.toggleAttribute('has-detail-placeholder', hasDetailPlaceholder);
 
@@ -406,7 +417,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     this.requestUpdate();
 
     if (focusTarget) {
-      focusTarget.focus({ preventScroll: true });
+      focusTarget.focus({ preventScroll: true, focusVisible: isKeyboardActive() });
     }
   }
 
@@ -424,14 +435,14 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * synchronous DOM reads and writes.
    */
   recalculateLayout() {
-    // Cancel any pending ResizeObserver rAF to prevent it from potentially
-    // overriding the layout state with stale measurements.
-    cancelAnimationFrame(this.__resizeRaf);
-
-    const invalidatedLayouts = [...this.__ancestorLayouts.filter((layout) => layout.__isDetailAutoSized), this];
+    const invalidatedLayouts = [...this.__ancestorLayouts, this];
 
     // Write
     invalidatedLayouts.forEach((layout) => {
+      // Cancel any pending ResizeObserver rAF to prevent it from potentially
+      // overriding the layout state with stale measurements.
+      cancelAnimationFrame(layout.__resizeRaf);
+
       layout.__detailCachedSize = null;
 
       if (layout.__isDetailAutoSized) {
@@ -496,7 +507,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    */
   async _setDetail(newDetail, skipTransition) {
     // Don't start a transition if detail didn't change
-    const oldDetail = this.querySelector('[slot="detail"]');
+    const oldDetail = this.__slottedDetail;
     if (oldDetail === (newDetail || null)) {
       return;
     }
@@ -522,7 +533,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
       return;
     }
 
-    const hasPlaceholder = !!this.querySelector('[slot="detail-placeholder"]');
+    const hasPlaceholder = !!this.__slottedDetailPlaceholder;
     if ((oldDetail && newDetail) || (hasPlaceholder && !this.hasAttribute('overlay'))) {
       await this._startTransition('replace', updateSlot);
     } else if (!oldDetail && newDetail) {
@@ -594,18 +605,27 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
 
   /** @private */
   async __replaceTransition(updateSlot) {
+    const oldDetail = this.__slottedDetail;
+    if (oldDetail) {
+      oldDetail.slot = 'detail-outgoing';
+    }
+
     try {
-      this.__snapshotOutgoing();
+      this.$.detailOutgoing.style.width = this.__detailCachedSize;
 
       await updateSlot();
 
       const progress = getCurrentAnimationProgress(this.$.detail);
       await Promise.all([
         animateIn(this.$.detail, ['fade', 'slide'], progress),
-        animateOut(this.$.outgoing, ['fade', 'slide'], progress),
+        animateOut(this.$.detailOutgoing, ['fade', 'slide'], progress),
       ]);
     } finally {
-      this.__clearOutgoing();
+      // Skip removal if the slot was reassigned during the transition.
+      // The React component does this to let React handle the removal.
+      if (oldDetail && oldDetail.slot === 'detail-outgoing') {
+        oldDetail.remove();
+      }
     }
   }
 
@@ -620,30 +640,19 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
     await updateSlot();
   }
 
-  /**
-   * Moves the current detail content to the outgoing slot so it can
-   * slide out while the new content slides in. Keeps the element in
-   * light DOM so light DOM styles continue to apply.
-   * @private
-   */
-  __snapshotOutgoing() {
-    const currentDetail = this.querySelector('[slot="detail"]');
-    if (!currentDetail) {
-      return;
-    }
-    currentDetail.setAttribute('slot', 'detail-outgoing');
-    this.$.outgoing.style.width = this.__detailCachedSize;
-    this.__replacing = true;
+  /** @private */
+  get __slottedMaster() {
+    return this.querySelector(':scope > :is([slot=""], :not([slot]))');
   }
 
-  /**
-   * Clears the outgoing container after the replace transition completes.
-   * @private
-   */
-  __clearOutgoing() {
-    this.querySelectorAll('[slot="detail-outgoing"]').forEach((el) => el.remove());
-    this.$.outgoing.style.width = '';
-    this.__replacing = false;
+  /** @private */
+  get __slottedDetail() {
+    return this.querySelector(':scope > [slot="detail"]');
+  }
+
+  /** @private */
+  get __slottedDetailPlaceholder() {
+    return this.querySelector(':scope > [slot="detail-placeholder"]');
   }
 
   /**

package/web-types.json

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