refactor: rename #outgoing to #detailOutgoing for consistency (#11475)

Author: vursen

packages/master-detail-layout/ARCHITECTURE.md

@@ -108,11 +108,11 @@ The `detail-placeholder` slot shows content in the detail area when no detail is
 Visible only when a placeholder element is slotted, no detail is present, and there is no overlay. Uses `visibility: hidden/visible` (not `display: none/block`) so it always participates in grid sizing:
 
 ```css
-#detail-placeholder {
+#detailPlaceholder {
   visibility: hidden;
 }
 
-:host([has-detail-placeholder]:not([has-detail], [overlay])) #detail-placeholder {
+:host([has-detail-placeholder]:not([has-detail], [overlay])) #detailPlaceholder {
   visibility: visible;
 }
 ```
@@ -185,17 +185,17 @@ Each animation is tagged with a shared ID. When a new transition starts, the run
 ### Z-index layering
 
 ```
-z-index: 1 — #detail-placeholder
+z-index: 1 — #detailPlaceholder
 z-index: 2 — #backdrop
-z-index: 3 — #outgoing (always position: absolute)
+z-index: 3 — #detailOutgoing (always position: absolute)
 z-index: 4 — #detail
 ```
 
-`#detail` above `#outgoing` is correct: split-mode replace has 0ms duration (no frames painted, z-order irrelevant), and overlay-mode replace has the incoming sliding over the outgoing.
+`#detail` above `#detailOutgoing` is correct: split-mode replace has 0ms duration (no frames painted, z-order irrelevant), and overlay-mode replace has the incoming sliding over the outgoing.
 
-### Outgoing container
+### Detail outgoing container
 
-The `#outgoing` shadow DOM element with `<slot name="detail-outgoing">` enables replace animations. Old content is moved to this slot (light DOM reassignment preserves user styles), animated out, then removed on completion. During replace, the outgoing width is frozen to `__detailCachedSize` so it retains the previous detail's dimensions even when the new detail has a different intrinsic size.
+The `#detailOutgoing` shadow DOM element with `<slot name="detail-outgoing">` enables replace animations. Old content is moved to this slot (light DOM reassignment preserves user styles), animated out, then removed on completion. During replace, the outgoing width is frozen to `__detailCachedSize` so it retains the previous detail's dimensions even when the new detail has a different intrinsic size.
 
 ## Test Patterns
 

packages/master-detail-layout/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;
   }
@@ -78,7 +78,7 @@ export const masterDetailLayoutStyles = css`
     pointer-events: auto;
   }
 
-  :is(#detail, #detail-placeholder, #outgoing) {
+  :is(#detail, #detailPlaceholder, #detailOutgoing) {
     grid-column: detail-start / detail-end;
     grid-row: 1;
   }
@@ -88,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;
   }
@@ -125,19 +125,19 @@ export const masterDetailLayoutStyles = css`
     --_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;
   }
@@ -162,7 +162,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));
@@ -175,30 +175,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;
     }
   }

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

@@ -232,7 +232,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 ?hidden="${!this.__replacing}">
         <slot name="detail-outgoing"></slot>
       </div>
       <div
@@ -244,7 +244,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>
     `;
@@ -599,17 +599,17 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
   /** @private */
   async __replaceTransition(updateSlot) {
     try {
-      this.__snapshotOutgoing();
+      this.__snapshotDetailOutgoing();
 
       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();
+      this.__clearDetailOutgoing();
     }
   }
 
@@ -630,23 +630,23 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
    * light DOM so light DOM styles continue to apply.
    * @private
    */
-  __snapshotOutgoing() {
+  __snapshotDetailOutgoing() {
     const currentDetail = this.querySelector('[slot="detail"]');
     if (!currentDetail) {
       return;
     }
     currentDetail.setAttribute('slot', 'detail-outgoing');
-    this.$.outgoing.style.width = this.__detailCachedSize;
+    this.$.detailOutgoing.style.width = this.__detailCachedSize;
     this.__replacing = true;
   }
 
   /**
    * Clears the outgoing container after the replace transition completes.
    * @private
    */
-  __clearOutgoing() {
+  __clearDetailOutgoing() {
     this.querySelectorAll('[slot="detail-outgoing"]').forEach((el) => el.remove());
-    this.$.outgoing.style.width = '';
+    this.$.detailOutgoing.style.width = '';
     this.__replacing = false;
   }
 

packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js

@@ -75,7 +75,7 @@ snapshots["vaadin-master-detail-layout shadow default"] =
 </div>
 <div
   hidden=""
-  id="outgoing"
+  id="detailOutgoing"
   inert=""
 >
   <slot name="detail-outgoing">
@@ -89,7 +89,7 @@ snapshots["vaadin-master-detail-layout shadow default"] =
   </slot>
 </div>
 <div
-  id="detail-placeholder"
+  id="detailPlaceholder"
   part="detail-placeholder"
 >
   <slot name="detail-placeholder">

packages/master-detail-layout/test/transitions.test.js

@@ -252,8 +252,8 @@ describe('Transitions', () => {
       const detailTranslateAfter = parseFloat(getComputedStyle(layout.$.detail).translate);
       expect(detailTranslateAfter).to.be.greaterThan(0).and.lessThan(detailTranslate);
 
-      const outgoingTranslateAfter = parseFloat(getComputedStyle(layout.$.outgoing).translate);
-      expect(outgoingTranslateAfter).to.be.greaterThan(detailTranslate).and.lessThan(200);
+      const detailOutgoingTranslateAfter = parseFloat(getComputedStyle(layout.$.detailOutgoing).translate);
+      expect(detailOutgoingTranslateAfter).to.be.greaterThan(detailTranslate).and.lessThan(200);
     });
 
     it('should complete transition immediately when no animation is running', async () => {
@@ -364,8 +364,8 @@ describe('Transitions', () => {
       const replacePromise = layout._setDetail(newDetail);
 
       // During replace, old content should be in the outgoing slot
-      const outgoing = layout.shadowRoot.querySelector('#outgoing');
-      expect(outgoing.hasAttribute('hidden')).to.be.false;
+      const detailOutgoing = layout.shadowRoot.querySelector('#detailOutgoing');
+      expect(detailOutgoing.hasAttribute('hidden')).to.be.false;
       expect(detail.getAttribute('slot')).to.equal('detail-outgoing');
 
       // New content should be in the detail slot
@@ -375,7 +375,7 @@ describe('Transitions', () => {
       await replacePromise;
 
       // After transition, outgoing should be cleared and old element removed
-      expect(outgoing.hasAttribute('hidden')).to.be.true;
+      expect(detailOutgoing.hasAttribute('hidden')).to.be.true;
       expect(layout.querySelector('[slot="detail-outgoing"]')).to.be.null;
     });
 
@@ -390,16 +390,16 @@ describe('Transitions', () => {
       detailContent = document.createElement('detail-content');
       detailContent.style.width = '400px';
       replacePromise = layout._setDetail(detailContent);
-      expect(layout.$.outgoing.style.width).to.equal('201px'); // 1px border
+      expect(layout.$.detailOutgoing.style.width).to.equal('201px'); // 1px border
       await replacePromise;
-      expect(layout.$.outgoing.style.width).to.equal('');
+      expect(layout.$.detailOutgoing.style.width).to.equal('');
 
       detailContent = document.createElement('detail-content');
       detailContent.style.width = '200px';
       replacePromise = layout._setDetail(detailContent);
-      expect(layout.$.outgoing.style.width).to.equal('401px'); // 1px border
+      expect(layout.$.detailOutgoing.style.width).to.equal('401px'); // 1px border
       await replacePromise;
-      expect(layout.$.outgoing.style.width).to.equal('');
+      expect(layout.$.detailOutgoing.style.width).to.equal('');
     });
 
     it('should adjust detail size after replacing with a differently sized detail', async () => {