diff --git a/packages/dialog/stories/index.ts b/packages/dialog/stories/index.ts
index 19dcbc7527..a8da3f786e 100644
--- a/packages/dialog/stories/index.ts
+++ b/packages/dialog/stories/index.ts
@@ -29,9 +29,10 @@ class OverlayTriggerReady extends HTMLElement {
 
     async setup(): Promise<void> {
         await nextFrame();
+        await nextFrame();
 
         const overlay = document.querySelector(
-            `overlay-trigger`
+            `overlay-trigger[open]`
         ) as HTMLElement;
         overlay.addEventListener('sp-opened', this.handleTriggerOpened);
     }
diff --git a/packages/overlay/overlay-trigger.md b/packages/overlay/overlay-trigger.md
index fe9142f245..b3b8fccc56 100644
--- a/packages/overlay/overlay-trigger.md
+++ b/packages/overlay/overlay-trigger.md
@@ -45,8 +45,8 @@ Here a default `<overlay-trigger>` manages content that is triggered by click an
 ```html
 <overlay-trigger id="trigger" placement="bottom" offset="6">
     <sp-button variant="primary" slot="trigger">Button popover</sp-button>
-    <sp-popover dialog slot="click-content" direction="bottom" tip>
-        <div class="options-popover-content">
+    <sp-popover slot="click-content" direction="bottom" tip>
+        <sp-dialog no-divider class="options-popover-content">
             <sp-slider
                 value="5"
                 step="0.5"
@@ -55,7 +55,7 @@ Here a default `<overlay-trigger>` manages content that is triggered by click an
                 label="Awesomeness"
             ></sp-slider>
             <sp-button>Press me</sp-button>
-        </div>
+        </sp-dialog>
     </sp-popover>
     <sp-tooltip slot="hover-content" delayed>Tooltip</sp-tooltip>
     <sp-popover slot="longpress-content" tip>
diff --git a/packages/overlay/stories/overlay-story-components.ts b/packages/overlay/stories/overlay-story-components.ts
index e32ce631f3..5392561f82 100644
--- a/packages/overlay/stories/overlay-story-components.ts
+++ b/packages/overlay/stories/overlay-story-components.ts
@@ -286,23 +286,24 @@ class RecursivePopover extends LitElement {
                     Open Popover
                 </sp-button>
                 <sp-popover
-                    dialog
                     slot="click-content"
                     direction="${this.placement}"
                     tip
                     open
                 >
-                    ${this.depth < MAX_DEPTH
-                        ? html`
-                              <recursive-popover
-                                  position="${this.placement}"
-                                  depth="${this.depth + 1}"
-                                  tabindex="0"
-                              ></recursive-popover>
-                          `
-                        : html`
-                              <div>Maximum Depth</div>
-                          `}
+                    <sp-dialog size="s" no-divider>
+                        ${this.depth < MAX_DEPTH
+                            ? html`
+                                  <recursive-popover
+                                      position="${this.placement}"
+                                      depth="${this.depth + 1}"
+                                      tabindex="0"
+                                  ></recursive-popover>
+                              `
+                            : html`
+                                  <div>Maximum Depth</div>
+                              `}
+                    </sp-dialog>
                 </sp-popover>
             </overlay-trigger>
         `;
@@ -321,11 +322,13 @@ export class PopoverContent extends LitElement {
         return html`
             <overlay-trigger>
                 <sp-button slot="trigger">Open me</sp-button>
-                <sp-popover slot="click-content" direction="bottom" dialog>
-                    <p>This is all the content.</p>
-                    <p>This is all the content.</p>
-                    <p>This is all the content.</p>
-                    <p>This is all the content.</p>
+                <sp-popover slot="click-content" direction="bottom">
+                    <sp-dialog no-divider>
+                        <p>This is all the content.</p>
+                        <p>This is all the content.</p>
+                        <p>This is all the content.</p>
+                        <p>This is all the content.</p>
+                    </sp-dialog>
                 </sp-popover>
             </overlay-trigger>
         `;
diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts
index 6df19a10a6..882345383b 100644
--- a/packages/overlay/stories/overlay.stories.ts
+++ b/packages/overlay/stories/overlay.stories.ts
@@ -156,42 +156,44 @@ const template = ({
             type=${ifDefined(type)}
         >
             <sp-button variant="primary" slot="trigger">Show Popover</sp-button>
-            <sp-popover
-                dialog
-                slot="click-content"
-                placement="${placement}"
-                tip
-            >
-                <div class="options-popover-content">
-                    <sp-slider
-                        value="5"
-                        step="0.5"
-                        min="0"
-                        max="20"
-                        label="Awesomeness"
-                    ></sp-slider>
-                    <div id="styled-div">
-                        The background of this div should be blue
-                    </div>
-                    <overlay-trigger id="inner-trigger" placement="bottom">
-                        <sp-button slot="trigger">Press Me</sp-button>
-                        <sp-popover
-                            dialog
-                            slot="click-content"
-                            placement="bottom"
-                            tip
-                            open
-                        >
-                            <div class="options-popover-content">
-                                Another Popover
-                            </div>
-                        </sp-popover>
+            <sp-popover slot="click-content" placement="${placement}" tip>
+                <sp-dialog no-divider>
+                    <div class="options-popover-content">
+                        <sp-slider
+                            value="5"
+                            step="0.5"
+                            min="0"
+                            max="20"
+                            label="Awesomeness"
+                        ></sp-slider>
+                        <div id="styled-div">
+                            The background of this div should be blue
+                        </div>
+                        <overlay-trigger id="inner-trigger" placement="bottom">
+                            <sp-button slot="trigger">Press Me</sp-button>
+                            <sp-popover
+                                slot="click-content"
+                                placement="bottom"
+                                tip
+                                open
+                            >
+                                <sp-dialog size="s" no-divider>
+                                    <div class="options-popover-content">
+                                        Another Popover
+                                    </div>
+                                </sp-dialog>
+                            </sp-popover>
 
-                        <sp-tooltip slot="hover-content" delayed tip="bottom">
-                            Click to open another popover.
-                        </sp-tooltip>
-                    </overlay-trigger>
-                </div>
+                            <sp-tooltip
+                                slot="hover-content"
+                                delayed
+                                tip="bottom"
+                            >
+                                Click to open another popover.
+                            </sp-tooltip>
+                        </overlay-trigger>
+                    </div>
+                </sp-dialog>
             </sp-popover>
             <sp-tooltip
                 slot="hover-content"
@@ -377,19 +379,21 @@ export const deep = (): TemplateResult => html`
         <sp-button variant="primary" slot="trigger">
             Open popover 1 with buttons + selfmanaged Tooltips
         </sp-button>
-        <sp-popover dialog slot="click-content" direction="bottom" tip open>
-            <sp-action-button>
-                <sp-tooltip self-managed placement="bottom" offset="0">
-                    My Tooltip 1
-                </sp-tooltip>
-                A
-            </sp-action-button>
-            <sp-action-button>
-                <sp-tooltip self-managed placement="bottom" offset="0">
-                    My Tooltip 1
-                </sp-tooltip>
-                B
-            </sp-action-button>
+        <sp-popover slot="click-content" direction="bottom" tip open>
+            <sp-dialog size="s" no-divider>
+                <sp-action-button>
+                    <sp-tooltip self-managed placement="bottom" offset="0">
+                        My Tooltip 1
+                    </sp-tooltip>
+                    A
+                </sp-action-button>
+                <sp-action-button>
+                    <sp-tooltip self-managed placement="bottom" offset="0">
+                        My Tooltip 1
+                    </sp-tooltip>
+                    B
+                </sp-action-button>
+            </sp-dialog>
         </sp-popover>
     </overlay-trigger>
 
@@ -397,9 +401,11 @@ export const deep = (): TemplateResult => html`
         <sp-button variant="primary" slot="trigger">
             Open popover 2 with buttons without ToolTips
         </sp-button>
-        <sp-popover dialog slot="click-content" direction="bottom" tip open>
-            <sp-action-button>X</sp-action-button>
-            <sp-action-button>Y</sp-action-button>
+        <sp-popover slot="click-content" direction="bottom" tip open>
+            <sp-dialog size="s" no-divider>
+                <sp-action-button>X</sp-action-button>
+                <sp-action-button>Y</sp-action-button>
+            </sp-dialog>
         </sp-popover>
     </overlay-trigger>
 `;
@@ -591,47 +597,47 @@ export const updated = (): TemplateResult => {
                 <sp-tooltip slot="hover-content" delayed tip="bottom">
                     Click to open popover
                 </sp-tooltip>
-                <sp-popover
-                    dialog
-                    slot="click-content"
-                    position="bottom"
-                    tip
-                    open
-                >
-                    <div class="options-popover-content">
-                        <sp-slider
-                            value="5"
-                            step="0.5"
-                            min="0"
-                            max="20"
-                            label="Awesomeness"
-                        ></sp-slider>
-                        <div id="styled-div">
-                            The background of this div should be blue
-                        </div>
-                        <overlay-trigger id="inner-trigger" placement="bottom">
-                            <sp-button slot="trigger">Press Me</sp-button>
-                            <sp-popover
-                                dialog
-                                slot="click-content"
+                <sp-popover slot="click-content" position="bottom" tip open>
+                    <sp-dialog size="s" no-divider>
+                        <div class="options-popover-content">
+                            <sp-slider
+                                value="5"
+                                step="0.5"
+                                min="0"
+                                max="20"
+                                label="Awesomeness"
+                            ></sp-slider>
+                            <div id="styled-div">
+                                The background of this div should be blue
+                            </div>
+                            <overlay-trigger
+                                id="inner-trigger"
                                 placement="bottom"
-                                tip
-                                open
                             >
-                                <div class="options-popover-content">
-                                    Another Popover
-                                </div>
-                            </sp-popover>
-
-                            <sp-tooltip
-                                slot="hover-content"
-                                delayed
-                                tip="bottom"
-                            >
-                                Click to open another popover.
-                            </sp-tooltip>
-                        </overlay-trigger>
-                    </div>
+                                <sp-button slot="trigger">Press Me</sp-button>
+                                <sp-popover
+                                    slot="click-content"
+                                    placement="bottom"
+                                    tip
+                                    open
+                                >
+                                    <sp-dialog size="s" no-divider>
+                                        <div class="options-popover-content">
+                                            Another Popover
+                                        </div>
+                                    </sp-dialog>
+                                </sp-popover>
+
+                                <sp-tooltip
+                                    slot="hover-content"
+                                    delayed
+                                    tip="bottom"
+                                >
+                                    Click to open another popover.
+                                </sp-tooltip>
+                            </overlay-trigger>
+                        </div>
+                    </sp-dialog>
                 </sp-popover>
             </overlay-trigger>
         </overlay-drag>
@@ -872,34 +878,45 @@ export const superComplexModal = (): TemplateResult => {
     return html`
         <overlay-trigger type="modal" placement="none">
             <sp-button slot="trigger" variant="accent">Toggle Dialog</sp-button>
-            <sp-popover dialog slot="click-content">
-                <overlay-trigger>
-                    <sp-button slot="trigger" variant="primary">
-                        Toggle Dialog
-                    </sp-button>
-                    <sp-popover dialog slot="click-content">
-                        <overlay-trigger type="modal">
-                            <sp-button slot="trigger" variant="secondary">
-                                Toggle Dialog
-                            </sp-button>
-                            <sp-popover dialog slot="click-content">
-                                <p>
-                                    When you get this deep, this ActiveOverlay
-                                    should be the only one in [slot="open"].
-                                </p>
-                                <p>
-                                    All of the rest of the ActiveOverlay
-                                    elements should have had their [slot]
-                                    attribute removed.
-                                </p>
-                                <p>
-                                    Closing this ActiveOverlay should replace
-                                    them...
-                                </p>
-                            </sp-popover>
-                        </overlay-trigger>
-                    </sp-popover>
-                </overlay-trigger>
+            <sp-popover slot="click-content">
+                <sp-dialog size="s">
+                    <overlay-trigger>
+                        <sp-button slot="trigger" variant="primary">
+                            Toggle Dialog
+                        </sp-button>
+                        <sp-popover slot="click-content">
+                            <sp-dialog size="s" no-divider>
+                                <overlay-trigger type="modal">
+                                    <sp-button
+                                        slot="trigger"
+                                        variant="secondary"
+                                    >
+                                        Toggle Dialog
+                                    </sp-button>
+                                    <sp-popover slot="click-content">
+                                        <sp-dialog size="s" no-divider>
+                                            <p>
+                                                When you get this deep, this
+                                                ActiveOverlay should be the only
+                                                one in [slot="open"].
+                                            </p>
+                                            <p>
+                                                All of the rest of the
+                                                ActiveOverlay elements should
+                                                have had their [slot] attribute
+                                                removed.
+                                            </p>
+                                            <p>
+                                                Closing this ActiveOverlay
+                                                should replace them...
+                                            </p>
+                                        </sp-dialog>
+                                    </sp-popover>
+                                </overlay-trigger>
+                            </sp-dialog>
+                        </sp-popover>
+                    </overlay-trigger>
+                </sp-dialog>
             </sp-popover>
         </overlay-trigger>
     `;
@@ -1097,8 +1114,10 @@ export const definedOverlayElement = (): TemplateResult => {
     return html`
         <overlay-trigger placement="bottom" type="modal">
             <sp-button variant="primary" slot="trigger">Open popover</sp-button>
-            <sp-popover slot="click-content" direction="bottom" dialog>
-                <popover-content></popover-content>
+            <sp-popover slot="click-content" direction="bottom">
+                <sp-dialog no-divider>
+                    <popover-content></popover-content>
+                </sp-dialog>
             </sp-popover>
         </overlay-trigger>
     `;
@@ -1112,15 +1131,19 @@ export const modalWithinNonModal = (): TemplateResult => {
             <sp-button variant="primary" slot="trigger">
                 Open inline overlay
             </sp-button>
-            <sp-popover slot="click-content" dialog>
-                <overlay-trigger type="modal">
-                    <sp-button variant="primary" slot="trigger">
-                        Open modal overlay
-                    </sp-button>
-                    <sp-popover slot="click-content" dialog>
-                        Modal overlay
-                    </sp-popover>
-                </overlay-trigger>
+            <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>
     `;
@@ -1139,10 +1162,12 @@ export const updating = (): TemplateResult => {
             <sp-button variant="primary" slot="trigger">
                 Open inline overlay
             </sp-button>
-            <sp-popover slot="click-content" dialog>
-                <sp-button variant="primary" @click=${update}>
-                    Update trigger location.
-                </sp-button>
+            <sp-popover slot="click-content">
+                <sp-dialog size="s" no-divider>
+                    <sp-button variant="primary" @click=${update}>
+                        Update trigger location.
+                    </sp-button>
+                </sp-dialog>
             </sp-popover>
         </overlay-trigger>
     `;
@@ -1162,68 +1187,66 @@ export const accordion = (): TemplateResult => {
                 Open overlay w/ accordion
             </sp-button>
             <div slot="click-content" style="max-height: 100%;display: flex;">
-                <sp-popover
-                    open
-                    dialog
-                    style="overflow-y: scroll;position: static;"
-                >
-                    <sp-accordion
-                        allow-multiple
-                        @sp-accordion-item-toggle=${handleToggle}
-                    >
-                        <sp-accordion-item label="Some things">
-                            <p>
-                                Thing
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                more things
-                            </p>
-                        </sp-accordion-item>
-                        <sp-accordion-item label="Other things">
-                            <p>
-                                Thing
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                more things
-                            </p>
-                        </sp-accordion-item>
-                        <sp-accordion-item label="More things">
-                            <p>
-                                Thing
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                more things
-                            </p>
-                        </sp-accordion-item>
-                        <sp-accordion-item label="Additional things">
-                            <p>
-                                Thing
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                <br />
-                                more things
-                            </p>
-                        </sp-accordion-item>
-                    </sp-accordion>
+                <sp-popover open style="overflow-y: scroll;position: static;">
+                    <sp-dialog size="s" no-divider>
+                        <sp-accordion
+                            allow-multiple
+                            @sp-accordion-item-toggle=${handleToggle}
+                        >
+                            <sp-accordion-item label="Some things">
+                                <p>
+                                    Thing
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    more things
+                                </p>
+                            </sp-accordion-item>
+                            <sp-accordion-item label="Other things">
+                                <p>
+                                    Thing
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    more things
+                                </p>
+                            </sp-accordion-item>
+                            <sp-accordion-item label="More things">
+                                <p>
+                                    Thing
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    more things
+                                </p>
+                            </sp-accordion-item>
+                            <sp-accordion-item label="Additional things">
+                                <p>
+                                    Thing
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    <br />
+                                    more things
+                                </p>
+                            </sp-accordion-item>
+                        </sp-accordion>
+                    </sp-dialog>
                 </sp-popover>
             </div>
         </overlay-trigger>
diff --git a/packages/overlay/test/index.ts b/packages/overlay/test/index.ts
index e6a5f3d379..92c17cb1bc 100644
--- a/packages/overlay/test/index.ts
+++ b/packages/overlay/test/index.ts
@@ -83,14 +83,16 @@ export const runOverlayTriggerTests = (): void => {
                                 </sp-button>
                                 <sp-popover
                                     id="outer-popover"
-                                    dialog
                                     slot="click-content"
                                     direction="bottom"
                                     tip
                                     open
                                     tabindex="0"
                                 >
-                                    <div class="options-popover-content">
+                                    <sp-dialog
+                                        no-divider
+                                        class="options-popover-content"
+                                    >
                                         <overlay-trigger
                                             id="inner-trigger"
                                             placement="bottom"
@@ -103,21 +105,21 @@ export const runOverlayTriggerTests = (): void => {
                                             </sp-button>
                                             <sp-popover
                                                 id="inner-popover"
-                                                dialog
                                                 slot="click-content"
                                                 direction="bottom"
                                                 tip
                                                 open
                                                 tabindex="0"
                                             >
-                                                <div
+                                                <sp-dialog
+                                                    no-divider
                                                     class="options-popover-content"
                                                 >
                                                     Another Popover
-                                                </div>
+                                                </sp-dialog>
                                             </sp-popover>
                                         </overlay-trigger>
-                                    </div>
+                                    </sp-dialog>
                                 </sp-popover>
                                 <div
                                     id="hover-content"
@@ -701,39 +703,51 @@ export const runOverlayTriggerTests = (): void => {
                         <sp-button slot="trigger" variant="accent">
                             Toggle Dialog
                         </sp-button>
-                        <sp-popover dialog slot="click-content">
-                            <overlay-trigger>
-                                <sp-button slot="trigger" variant="primary">
-                                    Toggle Dialog
-                                </sp-button>
-                                <sp-popover dialog slot="click-content">
-                                    <overlay-trigger type="modal">
-                                        <sp-button
-                                            slot="trigger"
-                                            variant="secondary"
-                                        >
-                                            Toggle Dialog
-                                        </sp-button>
-                                        <sp-popover dialog slot="click-content">
-                                            <p>
-                                                When you get this deep, this
-                                                ActiveOverlay should be the only
-                                                one in [slot="open"].
-                                            </p>
-                                            <p>
-                                                All of the rest of the
-                                                ActiveOverlay elements should
-                                                have had their [slot] attribute
-                                                removed.
-                                            </p>
-                                            <p>
-                                                Closing this ActiveOverlay
-                                                should replace them...
-                                            </p>
-                                        </sp-popover>
-                                    </overlay-trigger>
-                                </sp-popover>
-                            </overlay-trigger>
+                        <sp-popover slot="click-content">
+                            <sp-dialog no-divider>
+                                <overlay-trigger>
+                                    <sp-button slot="trigger" variant="primary">
+                                        Toggle Dialog
+                                    </sp-button>
+                                    <sp-popover slot="click-content">
+                                        <sp-dialog no-divider>
+                                            <overlay-trigger type="modal">
+                                                <sp-button
+                                                    slot="trigger"
+                                                    variant="secondary"
+                                                >
+                                                    Toggle Dialog
+                                                </sp-button>
+                                                <sp-popover
+                                                    slot="click-content"
+                                                >
+                                                    <sp-dialog no-divider>
+                                                        <p>
+                                                            When you get this
+                                                            deep, this
+                                                            ActiveOverlay should
+                                                            be the only one in
+                                                            [slot="open"].
+                                                        </p>
+                                                        <p>
+                                                            All of the rest of
+                                                            the ActiveOverlay
+                                                            elements should have
+                                                            had their [slot]
+                                                            attribute removed.
+                                                        </p>
+                                                        <p>
+                                                            Closing this
+                                                            ActiveOverlay should
+                                                            replace them...
+                                                        </p>
+                                                    </sp-dialog>
+                                                </sp-popover>
+                                            </overlay-trigger>
+                                        </sp-dialog>
+                                    </sp-popover>
+                                </overlay-trigger>
+                            </sp-dialog>
                         </sp-popover>
                     </overlay-trigger>
                 `);
diff --git a/packages/overlay/test/overlay-trigger-extended.test.ts b/packages/overlay/test/overlay-trigger-extended.test.ts
index 688cedc1c2..2680bdaa50 100644
--- a/packages/overlay/test/overlay-trigger-extended.test.ts
+++ b/packages/overlay/test/overlay-trigger-extended.test.ts
@@ -59,7 +59,6 @@ const initTest = async (
                     </sp-button>
                     <sp-popover
                         id="outer-popover"
-                        dialog
                         slot="click-content"
                         direction="bottom"
                         tip
@@ -67,7 +66,9 @@ const initTest = async (
                         tabindex="0"
                         placement="top"
                     >
-                        This is the overlay content.
+                        <sp-dialog no-divider>
+                            This is the overlay content.
+                        </sp-dialog>
                     </sp-popover>
                 </overlay-trigger>
             </div>
diff --git a/packages/overlay/test/overlay.test.ts b/packages/overlay/test/overlay.test.ts
index d83f2922bc..a985a1ad37 100644
--- a/packages/overlay/test/overlay.test.ts
+++ b/packages/overlay/test/overlay.test.ts
@@ -77,15 +77,14 @@ describe('Overlays', () => {
                     <div id="overlay-content">
                         <sp-popover
                             id="outer-popover"
-                            dialog
                             slot="click-content"
                             direction="bottom"
                             tip
                             open
                         >
-                            <div class="options-popover-content">
+                            <sp-dialog class="options-popover-content">
                                 A popover message
-                            </div>
+                            </sp-dialog>
                         </sp-popover>
                         <div id="hover-1" class="hover-content">
                             Hover message
diff --git a/packages/popover/README.md b/packages/popover/README.md
index 82f380fb35..25917dda1e 100644
--- a/packages/popover/README.md
+++ b/packages/popover/README.md
@@ -36,21 +36,13 @@ import { Popover } from '@spectrum-web-components/popover';
         max-width: 100%;
     "
 >
-    <sp-popover dialog open style="--spectrum-popover-dialog-min-width: 0;">
-        <div
-            style="
-            font-size: 18px;
-            font-weight: 700;
-            padding-bottom: 30px;
-        "
-        >
-            Popover title
-        </div>
-        <div style="font-size: 14px">
+    <sp-popover open style="--spectrum-popover-dialog-min-width: 0;">
+        <sp-dialog>
+            <h3 slot="heading">Popover title</h3>
             Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
             Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
             sweet roll cake danish candy biscuit halvah
-        </div>
+        </sp-dialog>
     </sp-popover>
 </div>
 ```
@@ -99,7 +91,7 @@ element by default. The default popover has no padding by default
 
 ### Dialog popovers
 
-Popovers with padding, ideal for dialogs.
+To apply a managed about of padding within your `<sp-popover>` you may choose to wrap you slotted content with an `<sp-dialog>` element, as seen below:
 
 ```html
 <div
@@ -111,7 +103,7 @@ Popovers with padding, ideal for dialogs.
         max-width: 100%;
     "
 >
-    <sp-popover dialog open style="--spectrum-popover-dialog-min-width: 0;">
+    <sp-popover open style="--spectrum-popover-dialog-min-width: 0;">
         <div
             style="
             font-size: 18px;
@@ -132,7 +124,13 @@ Popovers with padding, ideal for dialogs.
 
 ### Popover with tip
 
-```html
+The `placement` attribute can be used to customize from where the `<sp-popover>` points to content to which it is related. `placement="top"` will point down to the related content from the top, etc.
+
+<sp-tabs selected="top" auto label="Popover tip placements">
+<sp-tab value="top">Top</sp-tab>
+<sp-tab-panel value="top">
+
+```html demo
 <div
     style="
         color: var(--spectrum-gray-800);
@@ -143,31 +141,26 @@ Popovers with padding, ideal for dialogs.
     "
 >
     <sp-popover
-        dialog
-        placement="bottom"
+        placement="top"
         tip
         open
         style="--spectrum-popover-dialog-min-width: 0;"
     >
-        <div
-            style="
-            font-size: 18px;
-            font-weight: 700;
-            padding-bottom: 30px;
-        "
-        >
-            Popover title
-        </div>
-        <div style="font-size: 14px">
+        <sp-dialog>
+            <h3 slot="heading">Popover title</h3>
             Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
             Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
             sweet roll cake danish candy biscuit halvah
-        </div>
+        </sp-dialog>
     </sp-popover>
 </div>
 ```
 
-```html
+</sp-tab-panel>
+<sp-tab value="right">Right</sp-tab>
+<sp-tab-panel value="right">
+
+```html demo
 <div
     style="
         color: var(--spectrum-gray-800);
@@ -178,31 +171,26 @@ Popovers with padding, ideal for dialogs.
     "
 >
     <sp-popover
-        dialog
-        placement="top"
+        placement="right"
         tip
         open
         style="--spectrum-popover-dialog-min-width: 0;"
     >
-        <div
-            style="
-            font-size: 18px;
-            font-weight: 700;
-            padding-bottom: 30px;
-        "
-        >
-            Popover title
-        </div>
-        <div style="font-size: 14px">
+        <sp-dialog>
+            <h3 slot="heading">Popover title</h3>
             Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
             Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
             sweet roll cake danish candy biscuit halvah
-        </div>
+        </sp-dialog>
     </sp-popover>
 </div>
 ```
 
-```html
+</sp-tab-panel>
+<sp-tab value="bottom">Bottom</sp-tab>
+<sp-tab-panel value="bottom">
+
+```html demo
 <div
     style="
         color: var(--spectrum-gray-800);
@@ -213,31 +201,26 @@ Popovers with padding, ideal for dialogs.
     "
 >
     <sp-popover
-        dialog
-        placement="left"
+        placement="bottom"
         tip
         open
         style="--spectrum-popover-dialog-min-width: 0;"
     >
-        <div
-            style="
-            font-size: 18px;
-            font-weight: 700;
-            padding-bottom: 30px;
-        "
-        >
-            Popover title
-        </div>
-        <div style="font-size: 14px">
+        <sp-dialog>
+            <h3 slot="heading">Popover title</h3>
             Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
             Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
             sweet roll cake danish candy biscuit halvah
-        </div>
+        </sp-dialog>
     </sp-popover>
 </div>
 ```
 
-```html
+</sp-tab-panel>
+<sp-tab value="left">Left</sp-tab>
+<sp-tab-panel value="left">
+
+```html demo
 <div
     style="
         color: var(--spectrum-gray-800);
@@ -248,26 +231,20 @@ Popovers with padding, ideal for dialogs.
     "
 >
     <sp-popover
-        dialog
-        placement="right"
+        placement="left"
         tip
         open
         style="--spectrum-popover-dialog-min-width: 0;"
     >
-        <div
-            style="
-            font-size: 18px;
-            font-weight: 700;
-            padding-bottom: 30px;
-        "
-        >
-            Popover title
-        </div>
-        <div style="font-size: 14px">
+        <sp-dialog>
+            <h3 slot="heading">Popover title</h3>
             Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
             Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
             sweet roll cake danish candy biscuit halvah
-        </div>
+        </sp-dialog>
     </sp-popover>
 </div>
 ```
+
+</sp-tab-panel>
+</sp-tabs>
diff --git a/packages/popover/package.json b/packages/popover/package.json
index cd2e5f4bbe..93107cbef7 100644
--- a/packages/popover/package.json
+++ b/packages/popover/package.json
@@ -61,7 +61,7 @@
         "@spectrum-web-components/overlay": "^0.31.0"
     },
     "devDependencies": {
-        "@spectrum-css/popover": "^5.0.18"
+        "@spectrum-css/popover": "^6.0.46"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts
index 41bdb92d0c..41cae4f64b 100644
--- a/packages/popover/src/Popover.ts
+++ b/packages/popover/src/Popover.ts
@@ -14,6 +14,7 @@ import {
     CSSResultArray,
     html,
     nothing,
+    PropertyValues,
     SpectrumElement,
     TemplateResult,
 } from '@spectrum-web-components/base';
@@ -60,15 +61,11 @@ export class Popover extends SpectrumElement {
     protected renderTip(): TemplateResult {
         return html`
             <div id="tip">
-                <svg
-                    xmlns="http://www.w3.org/svg/2000"
-                    class="tip"
-                    viewBox="0 0 24 12"
-                >
-                    <path
-                        class="triangle"
-                        d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0"
-                    ></path>
+                <svg class="tip block" viewBox="0 -0.5 16 9">
+                    <path class="triangle" d="M-1,-1 8,8 17,-1"></path>
+                </svg>
+                <svg class="tip inline" viewBox="0 -0.5 9 16">
+                    <path class="triangle" d="M-1,-1 8,8 -1,17"></path>
                 </svg>
             </div>
         `;
@@ -104,6 +101,23 @@ export class Popover extends SpectrumElement {
         }
     }
 
+    protected override update(changes: PropertyValues): void {
+        if (window.__swc.DEBUG) {
+            if (changes.has('dialog') && this.dialog) {
+                window.__swc.warn(
+                    this,
+                    `<${this.localName}> no longer supports the "dialog" attribute. Please slot an <sp-dialog> element into the <${this.localName}> instead.`,
+                    'https://opensource.adobe.com/spectrum-web-components/components/popover/#dialog-popovers',
+                    {
+                        type: 'api',
+                        level: 'deprecation',
+                    }
+                );
+            }
+        }
+        super.update(changes);
+    }
+
     protected override render(): TemplateResult {
         return html`
             <slot></slot>
diff --git a/packages/popover/src/popover.css b/packages/popover/src/popover.css
index a231cf322e..884e59b885 100644
--- a/packages/popover/src/popover.css
+++ b/packages/popover/src/popover.css
@@ -23,44 +23,62 @@ governing permissions and limitations under the License.
     overscroll-behavior: contain;
 }
 
-/* provide dimensions */
+/* orient the tip */
 
-.tip {
-    width: var(--sp-popover-tip-size);
-    height: calc(var(--sp-popover-tip-size) / 2);
-    position: absolute;
-    left: 0;
+:host([placement*='left']) #tip[style],
+:host([placement*='right']) #tip[style] {
+    bottom: auto;
 }
 
-/* override #tip orientation so we can orient on .tip instead */
+:host([placement*='top']) #tip[style],
+:host([placement*='bottom']) #tip[style] {
+    right: auto;
+}
 
+:host([placement*='left']) #tip,
 :host([placement*='right']) #tip {
-    transform: none;
+    width: var(
+        --mod-popover-pointer-width,
+        var(--spectrum-popover-pointer-width)
+    ) !important;
+    height: var(
+        --mod-popover-pointer-width,
+        var(--spectrum-popover-pointer-width)
+    ) !important;
 }
 
+:host([placement*='top']) #tip,
 :host([placement*='bottom']) #tip {
-    transform: none;
+    width: var(
+        --mod-popover-pointer-width,
+        var(--spectrum-popover-pointer-width)
+    ) !important;
+    height: var(
+        --mod-popover-pointer-width,
+        var(--spectrum-popover-pointer-width)
+    ) !important;
 }
 
-/* orient the tip */
-
-:host([placement*='top']) .tip {
-    top: 100%;
+.block {
+    width: 100%;
+    height: 50%;
+    display: block;
 }
 
-:host([placement*='bottom']) .tip {
-    bottom: 100%;
-    transform: scaleY(-1);
+.inline {
+    width: 50%;
+    height: 100%;
+    display: block;
 }
 
-:host([placement*='left']) .tip {
-    transform-origin: 100% 0%;
-    transform: rotate(-90deg) translateY(-200%);
+:host([placement*='left']) .block,
+:host([placement*='right']) .block {
+    display: none;
 }
 
-:host([placement*='right']) .tip {
-    transform-origin: 0% 0%;
-    transform: rotate(90deg);
+:host([placement*='top']) .inline,
+:host([placement*='bottom']) .inline {
+    display: none;
 }
 
 ::slotted(.visually-hidden) {
@@ -75,3 +93,18 @@ governing permissions and limitations under the License.
     width: 1px;
     white-space: nowrap;
 }
+
+::slotted(sp-menu) {
+    margin: 0;
+}
+
+:host([dialog]) {
+    min-width: var(
+        --mod-popover-dialog-min-width,
+        var(--spectrum-popover-dialog-min-width, 270px)
+    );
+    padding: var(
+        --mod-popover-dialog-padding,
+        var(--spectrum-popover-dialog-padding, 30px 29px)
+    );
+}
diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css
index ffd068c88e..b26e19a194 100644
--- a/packages/popover/src/spectrum-popover.css
+++ b/packages/popover/src/spectrum-popover.css
@@ -12,17 +12,15 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-overlay-animation-distance: var(
-        --spectrum-picker-m-texticon-popover-offset-y,
-        var(--spectrum-global-dimension-size-75)
+    --spectrum-overlay-animation-distance: 6px;
+    --spectrum-overlay-animation-duration: var(
+        --spectrum-animation-duration-100
     );
     opacity: 0;
     pointer-events: none;
-    transition: transform var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-in-out,
-        opacity var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out,
-        visibility 0s linear
-            var(--spectrum-global-animation-duration-100, 0.13s);
+    transition: transform var(--spectrum-overlay-animation-duration) ease-in-out,
+        opacity var(--spectrum-overlay-animation-duration) ease-in-out,
+        visibility 0s linear var(--spectrum-overlay-animation-duration);
     visibility: hidden;
 }
 :host([open]) {
@@ -31,138 +29,502 @@ governing permissions and limitations under the License.
     transition-delay: 0s;
     visibility: visible;
 }
+:host([open]) .spectrum-Popover--bottom-end,
+:host([open]) .spectrum-Popover--bottom-left,
+:host([open]) .spectrum-Popover--bottom-right,
+:host([open]) .spectrum-Popover--bottom-start,
 :host([placement*='bottom'][open]) {
+    --spectrum-overlay-animation-distance: 6px;
     transform: translateY(var(--spectrum-overlay-animation-distance));
 }
+:host([open]) .spectrum-Popover--top-end,
+:host([open]) .spectrum-Popover--top-left,
+:host([open]) .spectrum-Popover--top-right,
+:host([open]) .spectrum-Popover--top-start,
 :host([placement*='top'][open]) {
+    --spectrum-overlay-animation-distance: 6px;
     transform: translateY(
         calc(var(--spectrum-overlay-animation-distance) * -1)
     );
 }
+:host([dir='rtl'][open]) .spectrum-Popover--start,
+:host([dir='rtl'][open]) .spectrum-Popover--start-bottom,
+:host([dir='rtl'][open]) .spectrum-Popover--start-top,
+:host([open]) .spectrum-Popover--end,
+:host([open]) .spectrum-Popover--end-bottom,
+:host([open]) .spectrum-Popover--end-top,
+:host([open]) .spectrum-Popover--right-bottom,
+:host([open]) .spectrum-Popover--right-top,
 :host([placement*='right'][open]) {
+    --spectrum-overlay-animation-distance: 6px;
     transform: translateX(var(--spectrum-overlay-animation-distance));
 }
+:host([dir='rtl'][open]) .spectrum-Popover--end,
+:host([dir='rtl'][open]) .spectrum-Popover--end-bottom,
+:host([dir='rtl'][open]) .spectrum-Popover--end-top,
+:host([open]) .spectrum-Popover--left-bottom,
+:host([open]) .spectrum-Popover--left-top,
+:host([open]) .spectrum-Popover--start,
+:host([open]) .spectrum-Popover--start-bottom,
+:host([open]) .spectrum-Popover--start-top,
 :host([placement*='left'][open]) {
+    --spectrum-overlay-animation-distance: 6px;
     transform: translateX(
         calc(var(--spectrum-overlay-animation-distance) * -1)
     );
 }
 :host {
-    --spectrum-popover-target-offset: 13px;
-    --spectrum-popover-dialog-padding: 30px 29px;
-    --spectrum-popover-dialog-min-width: 270px;
-    --spectrum-popover-min-width: var(--spectrum-global-dimension-size-400);
-    --spectrum-popover-min-height: var(--spectrum-global-dimension-size-400);
+    --spectrum-popover-cross-offset: 0;
+    --spectrum-popover-background-color: var(
+        --spectrum-background-layer-2-color
+    );
+    --spectrum-popover-border-color: var(--spectrum-gray-400);
+    --spectrum-popover-content-area-spacing-vertical: var(
+        --spectrum-popover-top-to-content-area
+    );
+    --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
+    --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
+    --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
+    --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
+    --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
+    --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
+    --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
+    --spectrum-popover-pointer-edge-offset: calc(
+        var(--spectrum-corner-radius-100) + var(--spectrum-popover-tip-width) /
+            2
+    );
+    --spectrum-popover-pointer-edge-spacing: calc(
+        var(--spectrum-popover-pointer-edge-offset) -
+            var(--spectrum-popover-tip-width) / 2
+    );
+}
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-popover-border-color: CanvasText;
+    }
 }
 :host {
+    background-color: var(
+        --mod-popover-background-color,
+        var(--spectrum-popover-background-color)
+    );
+    border-color: var(
+        --highcontrast-popover-border-color,
+        var(--mod-popover-border-color, var(--spectrum-popover-border-color))
+    );
     border-radius: var(
-        --spectrum-popover-border-radius,
-        var(--spectrum-alias-border-radius-regular)
+        --mod-popover-corner-radius,
+        var(--spectrum-popover-corner-radius)
     );
     border-style: solid;
     border-width: var(
-        --spectrum-popover-border-size,
-        var(--spectrum-alias-border-size-thin)
+        --mod-popover-border-width,
+        var(--spectrum-popover-border-width)
     );
     box-sizing: border-box;
     display: inline-flex;
-    flex-direction: column;
-    min-height: var(
-        --spectrum-popover-min-height,
-        var(--spectrum-global-dimension-size-400)
-    );
-    min-width: var(
-        --spectrum-popover-min-width,
-        var(--spectrum-global-dimension-size-400)
+    filter: drop-shadow(
+        var(
+                --mod-popover-shadow-horizontal,
+                var(--spectrum-popover-shadow-horizontal)
+            )
+            var(
+                --mod-popover-shadow-vertical,
+                var(--spectrum-popover-shadow-vertical)
+            )
+            var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur))
+            var(
+                --mod-popover-shadow-color,
+                var(--spectrum-popover-shadow-color)
+            )
     );
+    flex-direction: column;
     outline: none;
+    padding: var(
+            --mod-popover-content-area-spacing-vertical,
+            var(--spectrum-popover-content-area-spacing-vertical)
+        )
+        0;
     position: absolute;
 }
-#tip {
-    position: absolute;
-    -webkit-transform: translate(0);
-}
-#tip .triangle {
+:host([tip]) #tip .triangle {
     stroke-linecap: square;
     stroke-linejoin: miter;
+    fill: var(
+        --mod-popover-background-color,
+        var(--spectrum-popover-background-color)
+    );
+    stroke: var(
+        --mod-popover-border-color,
+        var(--spectrum-popover-border-color)
+    );
     stroke-width: var(
-        --spectrum-popover-border-size,
-        var(--spectrum-alias-border-size-thin)
+        --mod-popover-border-width,
+        var(--spectrum-popover-border-width)
     );
 }
-:host([dialog]) {
-    min-width: var(--spectrum-popover-dialog-min-width);
-    padding: var(--spectrum-popover-dialog-padding);
+.spectrum-Popover--top-end,
+.spectrum-Popover--top-left,
+.spectrum-Popover--top-right,
+.spectrum-Popover--top-start,
+:host([placement*='top']) {
+    margin-bottom: var(--spectrum-popover-cross-offset);
 }
-:host([placement*='left'][tip]) {
-    margin-right: var(--spectrum-popover-target-offset);
+.spectrum-Popover--bottom-end,
+.spectrum-Popover--bottom-left,
+.spectrum-Popover--bottom-right,
+.spectrum-Popover--bottom-start,
+:host([placement*='bottom']) {
+    margin-top: var(--spectrum-popover-cross-offset);
 }
-:host([placement*='left']) #tip {
-    left: 100%;
+.spectrum-Popover--right-bottom,
+.spectrum-Popover--right-top,
+:host([placement*='right']) {
+    margin-left: var(--spectrum-popover-cross-offset);
 }
-:host([placement*='right'][tip]) {
-    margin-left: var(--spectrum-popover-target-offset);
+.spectrum-Popover--left-bottom,
+.spectrum-Popover--left-top,
+:host([placement*='left']) {
+    margin-right: var(--spectrum-popover-cross-offset);
 }
-:host([placement*='right']) #tip {
-    right: 100%;
-    transform: scaleX(-1);
+.spectrum-Popover--start,
+.spectrum-Popover--start-bottom,
+.spectrum-Popover--start-top {
+    margin-inline-end: var(--spectrum-popover-cross-offset);
+}
+.spectrum-Popover--end,
+.spectrum-Popover--end-bottom,
+.spectrum-Popover--end-top {
+    margin-inline-start: var(--spectrum-popover-cross-offset);
 }
-:host([placement*='left']) #tip,
-:host([placement*='right']) #tip {
-    margin-top: calc(var(--spectrum-global-dimension-size-150) * -1);
-    top: 50%;
+:host([tip]) #tip,
+:host([tip]) .spectrum-Popover--bottom-end #tip,
+:host([tip]) .spectrum-Popover--bottom-left #tip,
+:host([tip]) .spectrum-Popover--bottom-right #tip,
+:host([tip]) .spectrum-Popover--bottom-start #tip,
+:host([tip]) .spectrum-Popover--top-end #tip,
+:host([tip]) .spectrum-Popover--top-left #tip,
+:host([tip]) .spectrum-Popover--top-right #tip,
+:host([tip]) .spectrum-Popover--top-start #tip,
+:host([tip][placement*='bottom']) #tip,
+:host([tip][placement*='top']) #tip {
+    height: var(
+        --mod-popover-pointer-height,
+        var(--spectrum-popover-pointer-height)
+    );
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    transform: translate(0);
+    width: var(
+        --mod-popover-pointer-width,
+        var(--spectrum-popover-pointer-width)
+    );
 }
-:host([placement*='bottom'][tip]) {
-    margin-top: var(--spectrum-popover-target-offset);
+:host([tip]) .spectrum-Popover--top-left #tip {
+    left: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
+    right: auto;
 }
-:host([placement*='bottom']) #tip {
+:host([tip]) .spectrum-Popover--top-right #tip {
+    left: auto;
+    right: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
+}
+:host([tip]) .spectrum-Popover--top-start #tip {
+    margin-inline-start: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
+}
+:host([tip]) .spectrum-Popover--top-end #tip {
+    margin-inline-end: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
+}
+:host([tip]) .spectrum-Popover--bottom-end #tip,
+:host([tip]) .spectrum-Popover--bottom-left #tip,
+:host([tip]) .spectrum-Popover--bottom-right #tip,
+:host([tip]) .spectrum-Popover--bottom-start #tip,
+:host([tip][placement*='bottom']) #tip {
     bottom: 100%;
+    top: auto;
     transform: scaleY(-1);
 }
-:host([placement*='top'][tip]) {
-    margin-bottom: var(--spectrum-popover-target-offset);
+:host([tip]) .spectrum-Popover--bottom-left #tip {
+    left: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
+    right: auto;
 }
-:host([placement*='top']) #tip {
-    top: 100%;
+:host([tip]) .spectrum-Popover--bottom-right #tip {
+    left: auto;
+    right: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
 }
-:host([placement*='bottom']) #tip,
-:host([placement*='top']) #tip {
-    left: 50%;
-    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
+:host([tip]) .spectrum-Popover--bottom-start #tip {
+    margin-inline-start: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
+    );
 }
-:host {
-    background-color: var(
-        --spectrum-popover-background-color,
-        var(--spectrum-global-color-gray-50)
+:host([tip]) .spectrum-Popover--bottom-end #tip {
+    margin-inline-end: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
     );
-    border-color: var(
-        --spectrum-popover-border-color,
-        var(--spectrum-alias-border-color-dark)
+}
+:host([tip]) .spectrum-Popover--end #tip,
+:host([tip]) .spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start #tip,
+:host([tip]) .spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top #tip,
+:host([tip][placement*='left']) #tip,
+:host([tip][placement*='right']) #tip {
+    bottom: 0;
+    height: var(
+        --mod-popover-pointer-width,
+        var(--spectrum-popover-pointer-width)
     );
-    clip-path: inset(-30px);
-    filter: drop-shadow(
-        0 1px 4px
-            var(
-                --spectrum-popover-shadow-color,
-                var(--spectrum-alias-dropshadow-color)
-            )
+    top: 0;
+    width: var(
+        --mod-popover-pointer-height,
+        var(--spectrum-popover-pointer-height)
     );
-    -webkit-filter: drop-shadow(
-        0 1px 4px
-            var(
-                --spectrum-popover-shadow-color,
-                var(--spectrum-alias-dropshadow-color)
-            )
+}
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--end #tip,
+:host([tip][placement*='left']) .spectrum-Popover--end-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--end-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--left-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--left-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--right-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--right-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--start #tip,
+:host([tip][placement*='left']) .spectrum-Popover--start-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--start-top #tip,
+:host([tip][placement*='left'][placement*='left']) #tip,
+:host([tip][placement*='right']) .spectrum-Popover--left-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--left-top #tip,
+:host([tip][placement*='right'][placement*='left']) #tip {
+    left: 100%;
+    right: auto;
+}
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-top #tip,
+:host([tip])
+    .spectrum-Popover--right-bottom.spectrum-Popover--right-bottom
+    #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-top #tip,
+:host([tip])
+    .spectrum-Popover--start-bottom.spectrum-Popover--right-bottom
+    #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--right-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--right-top #tip,
+:host([tip][placement*='left'][placement*='right']) #tip,
+:host([tip][placement*='right']) .spectrum-Popover--end #tip,
+:host([tip][placement*='right']) .spectrum-Popover--end-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--end-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--left-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--left-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--right-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--right-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--start #tip,
+:host([tip][placement*='right']) .spectrum-Popover--start-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--start-top #tip,
+:host([tip][placement*='right'][placement*='right']) #tip {
+    left: auto;
+    right: 100%;
+    transform: scaleX(-1);
+}
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--start-top #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--end-top #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-top #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-top #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--start-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--end-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--left-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--right-top #tip,
+:host([tip][placement*='left']) .spectrum-Popover--start-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--end-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--left-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--right-top #tip,
+:host([tip][placement*='right']) .spectrum-Popover--start-top #tip {
+    bottom: auto;
+    top: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
     );
-    will-change: filter;
 }
-#tip .triangle {
-    fill: var(
-        --spectrum-popover-background-color,
-        var(--spectrum-global-color-gray-50)
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--end-bottom.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--end.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--left-bottom.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--left-top.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--right-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip])
+    .spectrum-Popover--right-bottom.spectrum-Popover--right-bottom
+    #tip,
+:host([tip])
+    .spectrum-Popover--right-bottom.spectrum-Popover--start-bottom
+    #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--right-top.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--start-bottom.spectrum-Popover--left-bottom #tip,
+:host([tip])
+    .spectrum-Popover--start-bottom.spectrum-Popover--right-bottom
+    #tip,
+:host([tip])
+    .spectrum-Popover--start-bottom.spectrum-Popover--start-bottom
+    #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top.spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--left-bottom #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--right-bottom #tip,
+:host([tip]) .spectrum-Popover--start.spectrum-Popover--start-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--end-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--left-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--right-bottom #tip,
+:host([tip][placement*='left']) .spectrum-Popover--start-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--end-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--left-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--right-bottom #tip,
+:host([tip][placement*='right']) .spectrum-Popover--start-bottom #tip {
+    bottom: var(
+        --mod-popover-pointer-edge-spacing,
+        var(--spectrum-popover-pointer-edge-spacing)
     );
-    stroke: var(
-        --spectrum-popover-border-color,
-        var(--spectrum-alias-border-color-dark)
+    top: auto;
+}
+:host([tip]) .spectrum-Popover--start #tip,
+:host([tip]) .spectrum-Popover--start-bottom #tip,
+:host([tip]) .spectrum-Popover--start-top #tip {
+    margin-inline-start: 100%;
+}
+:host([dir='rtl'][tip]) .spectrum-Popover--start #tip,
+:host([dir='rtl'][tip]) .spectrum-Popover--start-bottom #tip,
+:host([dir='rtl'][tip]) .spectrum-Popover--start-top #tip {
+    transform: none;
+}
+:host([tip]) .spectrum-Popover--end #tip,
+:host([tip]) .spectrum-Popover--end-bottom #tip,
+:host([tip]) .spectrum-Popover--end-top #tip {
+    margin-inline-end: 100%;
+    transform: scaleX(-1);
+}
+:host([dir='rtl'][tip]) .spectrum-Popover--end #tip,
+:host([dir='rtl'][tip]) .spectrum-Popover--end-bottom #tip,
+:host([dir='rtl'][tip]) .spectrum-Popover--end-top #tip {
+    transform: scaleX(1);
+}
+:host {
+    --spectrum-popover-border-width: var(
+        --system-spectrum-popover-border-width
     );
 }
diff --git a/packages/popover/stories/popover.stories.ts b/packages/popover/stories/popover.stories.ts
index 13e5a870df..52d142c0f5 100644
--- a/packages/popover/stories/popover.stories.ts
+++ b/packages/popover/stories/popover.stories.ts
@@ -10,7 +10,12 @@ governing permissions and limitations under the License.
 */
 import '@spectrum-web-components/popover/sp-popover.js';
 import { html, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/overlay/overlay-trigger.js';
 import { Placement } from '@spectrum-web-components/overlay';
+import '@spectrum-web-components/dialog/sp-dialog.js';
+import '@spectrum-web-components/button/sp-button.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import { overlayTriggerDecorator } from '../../dialog/stories/index.js';
 
 export default {
     component: 'sp-popover',
@@ -97,17 +102,13 @@ const Template = ({ tip, placement, open }: StoryArgs): TemplateResult => {
                 style=" max-width: 320px"
                 .tip="${tip}"
             >
-                <div
-                    style="padding-bottom: 30px; font-size: 18px; font-weight: 700"
-                >
-                    Popover Title
-                </div>
-                <div style="font-size: 14px">
+                <sp-dialog size="s">
+                    <h2 slot="heading">Popover Title</h2>
                     Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly
                     caramels. Icing soufflé chupa chups donut cheesecake.
                     Jelly-o chocolate cake sweet roll cake danish candy biscuit
                     halvah
-                </div>
+                </sp-dialog>
             </sp-popover>
         </div>
     `;
@@ -133,3 +134,77 @@ dialogLeft.args = {
     tip: true,
     placement: 'left',
 };
+
+const overlayStyles = html`
+    <style>
+        html,
+        body,
+        #root,
+        #root-inner,
+        sp-story-decorator {
+            height: 100%;
+            margin: 0;
+        }
+
+        sp-story-decorator > div {
+            display: contents;
+        }
+
+        sp-story-decorator::part(container) {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        overlay-trigger {
+            flex: none;
+            margin: 24px 0;
+        }
+    </style>
+`;
+
+const overlaid = (openPlacement: Placement): TemplateResult => {
+    return html`
+        ${overlayStyles}
+        ${(['bottom', 'left', 'right', 'top'] as Placement[]).map(
+            (placement) => {
+                return html`
+                    <overlay-trigger
+                        placement="${placement}-start"
+                        open=${ifDefined(
+                            openPlacement === placement ? 'click' : undefined
+                        )}
+                    >
+                        <sp-button
+                            label="${placement}-start test"
+                            slot="trigger"
+                        >
+                            Click for ${placement}-start popover
+                        </sp-button>
+                        <sp-popover tip slot="click-content">
+                            <sp-dialog>
+                                <h2 slot="heading">
+                                    Popover ${placement}-start
+                                </h2>
+                                This popover is on the ${placement}-start of its
+                                button.
+                            </sp-dialog>
+                        </sp-popover>
+                    </overlay-trigger>
+                `;
+            }
+        )}
+    `;
+};
+
+export const overlaidTop = (): TemplateResult => overlaid('top');
+overlaidTop.decorators = [overlayTriggerDecorator];
+export const overlaidRight = (): TemplateResult => overlaid('right');
+overlaidRight.decorators = [overlayTriggerDecorator];
+export const overlaidBottom = (): TemplateResult => overlaid('bottom');
+overlaidBottom.decorators = [overlayTriggerDecorator];
+export const overlaidLeft = (): TemplateResult => overlaid('left');
+overlaidLeft.decorators = [overlayTriggerDecorator];
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
index 086a53cc84..ce635219a2 100644
--- a/packages/slider/stories/slider.stories.ts
+++ b/packages/slider/stories/slider.stories.ts
@@ -13,6 +13,8 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '@spectrum-web-components/slider/sp-slider.js';
 import '@spectrum-web-components/slider/sp-slider-handle.js';
+import '@spectrum-web-components/popover/sp-popover.js';
+import '@spectrum-web-components/dialog/sp-dialog.js';
 import {
     Slider,
     SliderHandle,
@@ -464,18 +466,20 @@ export const Quiet = (args: StoryArgs = {}): TemplateResult => {
 
 export const inPopover = (args: StoryArgs = {}): TemplateResult => {
     return html`
-        <sp-popover open dialog style="min-width: 0">
-            <sp-slider
-                editable
-                hide-stepper
-                quiet
-                value="5"
-                step="0.5"
-                min="0"
-                max="20"
-                label="Intensity"
-                ...=${spreadProps(args)}
-            ></sp-slider>
+        <sp-popover open style="min-width: 0">
+            <sp-dialog no-divider>
+                <sp-slider
+                    editable
+                    hide-stepper
+                    quiet
+                    value="5"
+                    step="0.5"
+                    min="0"
+                    max="20"
+                    label="Intensity"
+                    ...=${spreadProps(args)}
+                ></sp-slider>
+            </sp-dialog>
         </sp-popover>
     `;
 };
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
index a9f347d436..736879d931 100644
--- a/scripts/spectrum-tokens.js
+++ b/scripts/spectrum-tokens.js
@@ -62,6 +62,7 @@ const tokenPackages = [
     'colorloupe',
     'illustratedmessage',
     'slider',
+    'popover',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {
diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css
index 2e2d5ec3de..c643b523c7 100644
--- a/tools/styles/tokens/express/global-vars.css
+++ b/tools/styles/tokens/express/global-vars.css
@@ -1561,3 +1561,19 @@ governing permissions and limitations under the License.
         --spectrum-focus-indicator-color
     );
 }
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+:host,
+:root {
+    --system-spectrum-popover-border-width: 0;
+}
diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css
index 3258d4a21e..4f55a0957a 100644
--- a/tools/styles/tokens/spectrum/global-vars.css
+++ b/tools/styles/tokens/spectrum/global-vars.css
@@ -1314,3 +1314,7 @@ governing permissions and limitations under the License.
         --spectrum-focus-indicator-color
     );
 }
+:host,
+:root {
+    --system-spectrum-popover-border-width: var(--spectrum-border-width-100);
+}
diff --git a/yarn.lock b/yarn.lock
index befc3edd93..b03e49e58d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4511,10 +4511,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/pickerbutton/-/pickerbutton-2.0.12.tgz#cba66576d6340c78f898fe163cb884593bbcbf43"
   integrity sha512-GUKSb5NnOmLe1r1V8oV28E+sZh98EDrtkzDnWrr5vHYgzeu6/W0HYFe/4d4FyyZsTyD3yh3tMRXOY9KgJ3rdzQ==
 
-"@spectrum-css/popover@^5.0.18":
-  version "5.0.18"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-5.0.18.tgz#4e8d1b15b0f96ff3c19a6642ebae7937e99723a4"
-  integrity sha512-MpdlGjj6Y03l65UUiww8ulc6t6xImQFsIAqzDIuvtH+8BPEM4IbizJFGa6LEEvkMhHiwRF1s94LDg3d+q3ZmvA==
+"@spectrum-css/popover@^6.0.46":
+  version "6.0.46"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-6.0.46.tgz#cce0613adf732c51853bc5df5c67fe18716bd73c"
+  integrity sha512-M+WaHsb3H1kgasrl3/hJqsvVxC43AA9lS5EJM/j+/AC7SDKkPOc6yfuKReiC6Wu6QpVeUVW3zLDNDtDkoEvALA==
 
 "@spectrum-css/progressbar@^3.0.39":
   version "3.0.39"