From dd0c1193fb410b21a86eb82fad3866f5eb5b7977 Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Tue, 22 Jul 2025 10:55:18 +0100
Subject: [PATCH 1/8] chore: testing overlay fixes

---
 packages/overlay/src/Overlay.ts             |   2 +-
 packages/overlay/src/OverlayStack.ts        |  23 +++-
 packages/overlay/stories/overlay.stories.ts | 115 ++++++++++++++++++++
 packages/picker/src/Picker.ts               |   2 +-
 4 files changed, 138 insertions(+), 4 deletions(-)

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 8535f4db638..0fbef33e2e7 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -431,7 +431,7 @@ export class Overlay extends ComputedOverlayBase {
 
         switch (this.type) {
             case 'modal':
-                return 'auto';
+                return 'manual';
             case 'page':
                 return 'manual';
             case 'hint':
diff --git a/packages/overlay/src/OverlayStack.ts b/packages/overlay/src/OverlayStack.ts
index 4c174840f20..b85978b8604 100644
--- a/packages/overlay/src/OverlayStack.ts
+++ b/packages/overlay/src/OverlayStack.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /**
  * Copyright 2025 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -151,14 +152,14 @@ class OverlayStack {
 
     private handleKeydown = (event: KeyboardEvent): void => {
         if (event.code !== 'Escape') return;
+        if (event.defaultPrevented) return; // Don't handle if already handled
         if (!this.stack.length) return;
         const last = this.stack[this.stack.length - 1];
         if (last?.type === 'page') {
             event.preventDefault();
             return;
         }
-        if (last?.type === 'manual') {
-            // Manual overlays should close on "Escape" key, but not when losing focus or interacting with other parts of the page.
+        if (last?.type === 'manual' || last?.type === 'modal') {
             this.closeOverlay(last);
             return;
         }
@@ -213,11 +214,29 @@ class OverlayStack {
                     const path = event.composedPath();
                     this.stack.forEach((overlayEl) => {
                         const inPath = path.find((el) => el === overlayEl);
+
+                        // Check if the trigger element is inside this overlay
+                        const triggerInOverlay =
+                            overlay.triggerElement &&
+                            overlay.triggerElement instanceof HTMLElement &&
+                            overlayEl.contains &&
+                            overlayEl.contains(overlay.triggerElement);
+                        console.log(
+                            'overlayEl.type:',
+                            overlayEl.type,
+                            'triggerInOverlay:',
+                            triggerInOverlay,
+                            'inPath:',
+                            !!inPath
+                        );
+
                         if (
                             !inPath &&
+                            !triggerInOverlay &&
                             overlayEl.type !== 'manual' &&
                             overlayEl.type !== 'modal'
                         ) {
+                            console.log('Closing overlay:', overlayEl);
                             this.closeOverlay(overlayEl);
                         }
                     });
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 52031d0cefe..814bd698f47 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -33,6 +33,7 @@ import '@spectrum-web-components/overlay/overlay-trigger.js';
 
 import '@spectrum-web-components/accordion/sp-accordion-item.js';
 import '@spectrum-web-components/accordion/sp-accordion.js';
+import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/button-group/sp-button-group.js';
 import '@spectrum-web-components/menu/sp-menu-divider.js';
 import '@spectrum-web-components/menu/sp-menu-group.js';
@@ -634,6 +635,120 @@ export const deepChildTooltip = (): TemplateResult => html`
         </sp-popover>
     </overlay-trigger>
 `;
+export const debug = (): TemplateResult => {
+    return html`
+        <overlay-trigger type="modal" id="trigger" placement="top">
+            <sp-button
+                variant="primary"
+                slot="trigger"
+                style="position:absolute;bottom:50px"
+            >
+                Button popover
+            </sp-button>
+            <sp-popover slot="click-content" direction="bottom" tip>
+                <sp-dialog underlay no-divider class="options-popover-content">
+                    <sp-picker
+                        label="Select a Country with a very long label, too long in fact"
+                        value="item-2"
+                        id="picker-value"
+                    >
+                        <sp-menu-item value="item-1">Deselect</sp-menu-item>
+                        <sp-menu-item value="item-2">
+                            Select inverse
+                        </sp-menu-item>
+                        <sp-menu-item value="item-3">Feather...</sp-menu-item>
+                        <sp-menu-item value="item-4">
+                            Select and mask...
+                        </sp-menu-item>
+                        <sp-menu-divider></sp-menu-divider>
+                        <sp-menu-item value="item-5">
+                            Save selection
+                        </sp-menu-item>
+                        <sp-menu-item disabled value="item-6">
+                            Make work path
+                        </sp-menu-item>
+                    </sp-picker>
+                </sp-dialog>
+            </sp-popover>
+            <sp-tooltip slot="hover-content" placement="right">
+                I'm a tooltip in a different direction
+            </sp-tooltip>
+        </overlay-trigger>
+        <overlay-trigger placement="bottom" type="modal">
+            <sp-action-button slot="trigger">Open menu</sp-action-button>
+            <sp-popover style="padding: 20px" slot="click-content">
+                <sp-menu>
+                    <sp-menu-item>Item 1</sp-menu-item>
+                    <sp-menu-item>Item 2</sp-menu-item>
+                </sp-menu>
+                <sp-action-menu size="m">
+                    <span slot="label">More Actions</span>
+                    <sp-menu-item>Deselect</sp-menu-item>
+                    <sp-menu-item>Select inverse</sp-menu-item>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and mask...</sp-menu-item>
+                    <sp-menu-divider></sp-menu-divider>
+                    <sp-menu-item>Save selection</sp-menu-item>
+                    <sp-menu-item disabled>Make work path</sp-menu-item>
+                </sp-action-menu>
+            </sp-popover>
+        </overlay-trigger>
+        <div class="container"></div>
+        <sp-button variant="primary" @click=${openModalOverlay}>
+            Modal overlay
+        </sp-button>
+    `;
+};
+
+// Helper functions for the overlay functionality
+const getModalOverlayContent = (): HTMLElement => {
+    const fragment = document.createDocumentFragment();
+    render(
+        html`
+            <sp-popover style="padding: 20px">
+                Modal overlay content
+                <sp-button @click=${(event: Event) => openAutoOverlay(event)}>
+                    Auto overlay
+                </sp-button>
+            </sp-popover>
+        `,
+        fragment
+    );
+    return fragment.children[0] as HTMLElement;
+};
+
+const getAutoOverlayContent = (): HTMLElement => {
+    const fragment = document.createDocumentFragment();
+    render(
+        html`
+            <sp-popover>Auto overlay</sp-popover>
+        `,
+        fragment
+    );
+    return fragment.children[0] as HTMLElement;
+};
+
+const openModalOverlay = async (event: Event) => {
+    const trigger = event.target as HTMLElement;
+    const overlay = await Overlay.open(getModalOverlayContent(), {
+        trigger,
+        type: 'modal',
+        placement: 'bottom',
+    });
+    const container = document.querySelector('.container');
+    container?.insertAdjacentElement('afterend', overlay);
+};
+
+const openAutoOverlay = async (event: Event) => {
+    const trigger = event.target as HTMLElement;
+    const overlay = await Overlay.open(getAutoOverlayContent(), {
+        trigger,
+        type: 'auto',
+        placement: 'bottom',
+    });
+    const container = document.querySelector('.container');
+    container?.insertAdjacentElement('afterend', overlay);
+};
 
 export const deepNesting = (): TemplateResult => {
     const color = window.__swc_hack_knobs__.defaultColor;
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
index 9c48aaf6452..6daf136c917 100644
--- a/packages/picker/src/Picker.ts
+++ b/packages/picker/src/Picker.ts
@@ -285,7 +285,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
     protected handleEscape = (
         event: MenuItemKeydownEvent | KeyboardEvent
     ): void => {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && this.open) {
             event.stopPropagation();
             event.preventDefault();
             this.toggle(false);

From e87567cd94d7b675fd2749173ad8c1dc050c647d Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Tue, 22 Jul 2025 11:27:42 +0100
Subject: [PATCH 2/8] chore: allow outside click

---
 packages/overlay/src/Overlay.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 0fbef33e2e7..9f128c6bcf0 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -542,6 +542,9 @@ export class Overlay extends ComputedOverlayBase {
             const focusTrap = await import('focus-trap');
             this._focusTrap = focusTrap.createFocusTrap(this.dialogEl, {
                 initialFocus: focusEl || undefined,
+                allowOutsideClick: (event) => {
+                    return !event.isTrusted;
+                },
                 tabbableOptions: {
                     getShadowRoot: true,
                 },

From 87868a857a0d2b9e084269ae7ca1f3cd40e5a600 Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Wed, 23 Jul 2025 12:34:05 +0100
Subject: [PATCH 3/8] chore: make hint overlays render hint popovers

---
 packages/overlay/src/Overlay.ts             |  6 ++--
 packages/overlay/stories/overlay.stories.ts | 32 ++++++---------------
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 9f128c6bcf0..38b82a0ddea 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -420,9 +420,9 @@ export class Overlay extends ComputedOverlayBase {
      * Determines the value for the popover attribute based on the overlay type.
      *
      * @private
-     * @returns {'auto' | 'manual' | undefined} The popover value or undefined if not applicable.
+     * @returns {'auto' | 'manual' | 'hint' | undefined} The popover value or undefined if not applicable.
      */
-    private get popoverValue(): 'auto' | 'manual' | undefined {
+    private get popoverValue(): 'auto' | 'manual' | 'hint' | undefined {
         const hasPopoverAttribute = 'popover' in this;
 
         if (!hasPopoverAttribute) {
@@ -434,8 +434,6 @@ export class Overlay extends ComputedOverlayBase {
                 return 'manual';
             case 'page':
                 return 'manual';
-            case 'hint':
-                return 'manual';
             default:
                 return this.type;
         }
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 814bd698f47..19a9f542a4d 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -697,6 +697,14 @@ export const debug = (): TemplateResult => {
         <sp-button variant="primary" @click=${openModalOverlay}>
             Modal overlay
         </sp-button>
+        <overlay-trigger placement="bottom">
+            <sp-action-button slot="trigger">Open menu</sp-action-button>
+            <sp-popover style="padding: 20px" slot="click-content">
+                <sp-slider editable max="20" min="0" value="5" step="1">
+                    Max 20
+                </sp-slider>
+            </sp-popover>
+        </overlay-trigger>
     `;
 };
 
@@ -1183,30 +1191,6 @@ export const modalManaged = (): TemplateResult => {
     `;
 };
 
-export const modalWithinNonModal = (): TemplateResult => {
-    return html`
-        <overlay-trigger type="inline">
-            <sp-button variant="primary" slot="trigger">
-                Open inline overlay
-            </sp-button>
-            <sp-popover slot="click-content">
-                <sp-dialog size="s" no-divider>
-                    <overlay-trigger type="modal">
-                        <sp-button variant="primary" slot="trigger">
-                            Open modal overlay
-                        </sp-button>
-                        <sp-popover slot="click-content">
-                            <sp-dialog size="s" no-divider>
-                                Modal overlay
-                            </sp-dialog>
-                        </sp-popover>
-                    </overlay-trigger>
-                </sp-dialog>
-            </sp-popover>
-        </overlay-trigger>
-    `;
-};
-
 export const noCloseOnResize = (args: Properties): TemplateResult => html`
     <style>
         sp-button:hover {

From 74c9065ae5025e44f18ee051241cb3764a5413ed Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Wed, 23 Jul 2025 13:00:25 +0100
Subject: [PATCH 4/8] chore: make focustrap respect receivesFocus

---
 packages/overlay/src/Overlay.ts             | 5 ++++-
 packages/overlay/stories/overlay.stories.ts | 6 +++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 38b82a0ddea..3a9a357f8ab 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -555,7 +555,10 @@ export class Overlay extends ComputedOverlayBase {
                 escapeDeactivates: false,
             });
 
-            if (this.type === 'modal' || this.type === 'page') {
+            if (
+                (this.type === 'modal' || this.type === 'page') &&
+                this.receivesFocus !== 'false'
+            ) {
                 this._focusTrap.activate();
             }
         }
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 19a9f542a4d..40974e8cf25 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -674,7 +674,11 @@ export const debug = (): TemplateResult => {
                 I'm a tooltip in a different direction
             </sp-tooltip>
         </overlay-trigger>
-        <overlay-trigger placement="bottom" type="modal">
+        <overlay-trigger
+            .receivesFocus=${'false'}
+            placement="bottom"
+            type="modal"
+        >
             <sp-action-button slot="trigger">Open menu</sp-action-button>
             <sp-popover style="padding: 20px" slot="click-content">
                 <sp-menu>

From b6dd797c98af31d8207d5f6682003d94899aef37 Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Wed, 23 Jul 2025 13:12:39 +0100
Subject: [PATCH 5/8] chore: conditionally render underlay when overlay is
 modal to block interaction with the page

---
 packages/overlay/package.json               |  1 +
 packages/overlay/src/Overlay.ts             | 12 ++++++++++++
 packages/overlay/stories/overlay.stories.ts |  9 +++++++++
 yarn.lock                                   |  1 +
 4 files changed, 23 insertions(+)

diff --git a/packages/overlay/package.json b/packages/overlay/package.json
index b0500e5a3a8..14d78ac0b74 100644
--- a/packages/overlay/package.json
+++ b/packages/overlay/package.json
@@ -171,6 +171,7 @@
         "@spectrum-web-components/reactive-controllers": "1.7.0",
         "@spectrum-web-components/shared": "1.7.0",
         "@spectrum-web-components/theme": "1.7.0",
+        "@spectrum-web-components/underlay": "1.7.0",
         "focus-trap": "^7.6.4"
     },
     "types": "./src/index.d.ts",
diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 3a9a357f8ab..309c5d375a6 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -55,6 +55,7 @@ import {
 
 import styles from './overlay.css.js';
 import { FocusTrap } from 'focus-trap';
+import '@spectrum-web-components/underlay/sp-underlay.js';
 
 const browserSupportsPopover = 'showPopover' in document.createElement('div');
 
@@ -1145,6 +1146,17 @@ export class Overlay extends ComputedOverlayBase {
      */
     public override render(): TemplateResult {
         return html`
+            ${this.type === 'modal'
+                ? html`
+                      <sp-underlay
+                          ?open=${this.open}
+                          @close=${() => {
+                              this.open = false;
+                          }}
+                          style="--spectrum-underlay-background-color: transparent"
+                      ></sp-underlay>
+                  `
+                : ''}
             ${this.renderPopover()}
             <slot name="longpress-describedby-descriptor"></slot>
         `;
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 40974e8cf25..3eed0b519d8 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -674,6 +674,15 @@ export const debug = (): TemplateResult => {
                 I'm a tooltip in a different direction
             </sp-tooltip>
         </overlay-trigger>
+        <overlay-trigger type="modal">
+            <sp-button variant="primary" slot="trigger">Button</sp-button>
+            <sp-popover slot="click-content" placement="bottom" tip>
+                Popover content
+            </sp-popover>
+            <sp-tooltip slot="hover-content" placement="right">
+                Tooltip content
+            </sp-tooltip>
+        </overlay-trigger>
         <overlay-trigger
             .receivesFocus=${'false'}
             placement="bottom"
diff --git a/yarn.lock b/yarn.lock
index 8f15597c609..70b9dad4f4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5335,6 +5335,7 @@ __metadata:
     "@spectrum-web-components/reactive-controllers": "npm:1.7.0"
     "@spectrum-web-components/shared": "npm:1.7.0"
     "@spectrum-web-components/theme": "npm:1.7.0"
+    "@spectrum-web-components/underlay": "npm:1.7.0"
     focus-trap: "npm:^7.6.4"
   languageName: unknown
   linkType: soft

From fd7dd4bd76dff9aea1591faf903f553a43b1510a Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Wed, 23 Jul 2025 13:13:53 +0100
Subject: [PATCH 6/8] chore: also add underlay for page

---
 packages/overlay/src/Overlay.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index 309c5d375a6..d8d056de1d1 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -1146,7 +1146,7 @@ export class Overlay extends ComputedOverlayBase {
      */
     public override render(): TemplateResult {
         return html`
-            ${this.type === 'modal'
+            ${this.type === 'modal' || this.type === 'page'
                 ? html`
                       <sp-underlay
                           ?open=${this.open}

From d8eaafa41f226de08447b2f4073c327ef6d9945f Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Wed, 23 Jul 2025 21:55:03 +0100
Subject: [PATCH 7/8] chore: manage body scroll blocking for modal and page
 overlays

---
 packages/overlay/src/OverlayStack.ts        | 24 ++++++++
 packages/overlay/stories/overlay.stories.ts | 63 +++++++++++++++++++++
 2 files changed, 87 insertions(+)

diff --git a/packages/overlay/src/OverlayStack.ts b/packages/overlay/src/OverlayStack.ts
index b85978b8604..44193a101ea 100644
--- a/packages/overlay/src/OverlayStack.ts
+++ b/packages/overlay/src/OverlayStack.ts
@@ -28,6 +28,10 @@ class OverlayStack {
 
     stack: Overlay[] = [];
 
+    private originalBodyOverflow = '';
+
+    private bodyScrollBlocked = false;
+
     constructor() {
         this.bindEvents();
     }
@@ -80,6 +84,25 @@ class OverlayStack {
             this.stack.splice(overlayIndex, 1);
         }
         overlay.open = false;
+
+        this.manageBodyScroll();
+    }
+
+    /**
+     * Manage body scroll blocking based on modal/page overlays
+     */
+    private manageBodyScroll(): void {
+        const shouldBlock = this.stack.some(
+            (overlay) => overlay.type === 'modal' || overlay.type === 'page'
+        );
+        if (shouldBlock && !this.bodyScrollBlocked) {
+            this.originalBodyOverflow = document.body.style.overflow || '';
+            document.body.style.overflow = 'hidden';
+            this.bodyScrollBlocked = true;
+        } else if (!shouldBlock && this.bodyScrollBlocked) {
+            document.body.style.overflow = this.originalBodyOverflow;
+            this.bodyScrollBlocked = false;
+        }
     }
 
     /**
@@ -267,6 +290,7 @@ class OverlayStack {
             overlay.addEventListener('beforetoggle', this.handleBeforetoggle, {
                 once: true,
             });
+            this.manageBodyScroll();
         });
     }
 
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 3eed0b519d8..78a3e2bea3b 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -674,6 +674,69 @@ export const debug = (): TemplateResult => {
                 I'm a tooltip in a different direction
             </sp-tooltip>
         </overlay-trigger>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+
         <overlay-trigger type="modal">
             <sp-button variant="primary" slot="trigger">Button</sp-button>
             <sp-popover slot="click-content" placement="bottom" tip>

From 07569c52388acae8d30320a8aa461c80448e2702 Mon Sep 17 00:00:00 2001
From: Ruben Carvalho <rcarvalho@adobe.com>
Date: Thu, 24 Jul 2025 10:40:31 +0100
Subject: [PATCH 8/8] chore: use underlay inside a popover to render it in the
 top layer

---
 packages/overlay/src/Overlay.ts             | 16 +++++++++-------
 packages/overlay/stories/overlay.stories.ts |  8 ++++++--
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/overlay/src/Overlay.ts b/packages/overlay/src/Overlay.ts
index d8d056de1d1..c78a0545f1a 100644
--- a/packages/overlay/src/Overlay.ts
+++ b/packages/overlay/src/Overlay.ts
@@ -1148,13 +1148,15 @@ export class Overlay extends ComputedOverlayBase {
         return html`
             ${this.type === 'modal' || this.type === 'page'
                 ? html`
-                      <sp-underlay
-                          ?open=${this.open}
-                          @close=${() => {
-                              this.open = false;
-                          }}
-                          style="--spectrum-underlay-background-color: transparent"
-                      ></sp-underlay>
+                      <popover>
+                          <sp-underlay
+                              ?open=${this.open}
+                              @close=${() => {
+                                  this.open = false;
+                              }}
+                              style="--spectrum-underlay-background-color: transparent"
+                          ></sp-underlay>
+                      </popover>
                   `
                 : ''}
             ${this.renderPopover()}
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 78a3e2bea3b..e39dc249e83 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -737,7 +737,7 @@ export const debug = (): TemplateResult => {
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
 
-        <overlay-trigger type="modal">
+        <overlay-trigger type="auto">
             <sp-button variant="primary" slot="trigger">Button</sp-button>
             <sp-popover slot="click-content" placement="bottom" tip>
                 Popover content
@@ -770,7 +770,11 @@ export const debug = (): TemplateResult => {
             </sp-popover>
         </overlay-trigger>
         <div class="container"></div>
-        <sp-button variant="primary" @click=${openModalOverlay}>
+        <sp-button
+            style="z-index: 1000"
+            variant="primary"
+            @click=${openModalOverlay}
+        >
             Modal overlay
         </sp-button>
         <overlay-trigger placement="bottom">