diff --git a/packages/dialog/src/DialogBase.ts b/packages/dialog/src/DialogBase.ts
index e0b0dfd258c..0796833eb60 100644
--- a/packages/dialog/src/DialogBase.ts
+++ b/packages/dialog/src/DialogBase.ts
@@ -183,7 +183,7 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
                 ? html`
                       <sp-underlay
                           ?open=${this.open}
-                          @click=${this.dismiss}
+                          @close=${this.dismiss}
                           @transitionrun=${this.handleTransitionEvent}
                           @transitionend=${this.handleUnderlayTransitionend}
                           @transitioncancel=${this.handleTransitionEvent}
diff --git a/packages/tray/src/Tray.ts b/packages/tray/src/Tray.ts
index 0be4ab5609b..9041e40316c 100644
--- a/packages/tray/src/Tray.ts
+++ b/packages/tray/src/Tray.ts
@@ -123,7 +123,7 @@ export class Tray extends SpectrumElement {
         return html`
             <sp-underlay
                 ?open=${this.open}
-                @click=${this.close}
+                @close=${this.close}
                 @transitionend=${this.handleUnderlayTransitionend}
             ></sp-underlay>
             <div
diff --git a/packages/underlay/src/Underlay.ts b/packages/underlay/src/Underlay.ts
index b58ac462049..eb2a1b1fc27 100644
--- a/packages/underlay/src/Underlay.ts
+++ b/packages/underlay/src/Underlay.ts
@@ -22,16 +22,40 @@ import styles from './underlay.css.js';
 
 /**
  * @element sp-underlay
+ *
+ * @fires close - When the underlay is "clicked" and the consuming pattern should chose whether to close based on that interaction
  */
 export class Underlay extends SpectrumElement {
     public static override get styles(): CSSResultArray {
         return [styles];
     }
 
+    private canClick = false;
+
     @property({ type: Boolean, reflect: true })
     public open = false;
 
+    public override click(): void {
+        this.dispatchEvent(new Event('close'));
+    }
+
+    protected handlePointerdown(): void {
+        this.canClick = true;
+    }
+
+    protected handlePointerup(): void {
+        if (this.canClick) {
+            this.dispatchEvent(new Event('close'));
+        }
+        this.canClick = false;
+    }
+
     protected override render(): TemplateResult {
         return html``;
     }
+
+    protected override firstUpdated(): void {
+        this.addEventListener('pointerdown', this.handlePointerdown);
+        this.addEventListener('pointerup', this.handlePointerup);
+    }
 }
diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
index d41b86bbb87..f9d13190d33 100644
--- a/projects/documentation/src/components/layout.ts
+++ b/projects/documentation/src/components/layout.ts
@@ -341,7 +341,7 @@ export class LayoutElement extends LitElement {
                       <sp-underlay
                           class="scrim"
                           ?open=${this.settings}
-                          @click=${this.toggleSettings}
+                          @close=${this.toggleSettings}
                           ?hidden=${!this.isNarrow}
                       ></sp-underlay>
                       <aside
diff --git a/projects/documentation/src/components/side-nav.ts b/projects/documentation/src/components/side-nav.ts
index 772aa652e94..1c5f730082d 100644
--- a/projects/documentation/src/components/side-nav.ts
+++ b/projects/documentation/src/components/side-nav.ts
@@ -75,7 +75,7 @@ export class SideNav extends LitElement {
         return html`
             <sp-underlay
                 class="scrim"
-                @click=${this.toggle}
+                @close=${this.toggle}
                 ?open=${this.open}
             ></sp-underlay>
             <aside>