diff --git a/src/dev/pages/app-bar/app-bar.ejs b/src/dev/pages/app-bar/app-bar.ejs
index da46d51e2..5ee4617d0 100644
--- a/src/dev/pages/app-bar/app-bar.ejs
+++ b/src/dev/pages/app-bar/app-bar.ejs
@@ -15,7 +15,6 @@
   
   <forge-app-bar-profile-button
     slot="end"
-    avatar-text="First Last"
     full-name="First Last"
     email="first.last@tylerforge.io"
     profile-button
diff --git a/src/dev/pages/overlay/overlay.ejs b/src/dev/pages/overlay/overlay.ejs
index 5c0a2c734..7f2c411ad 100644
--- a/src/dev/pages/overlay/overlay.ejs
+++ b/src/dev/pages/overlay/overlay.ejs
@@ -1,13 +1,14 @@
-<div class="clipping-container">
+<div class="clipping-container" id="clipping-container">
   <div class="scroll-container">
-    <forge-button variant="raised" slot="trigger" id="my-btn">Show overlay</forge-button>
+    <forge-button variant="raised" aria-controls="my-overlay" id="my-btn">Show overlay</forge-button>
 
-    <forge-overlay target="my-btn" id="my-overlay">
-      <div class="overlay-content">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea labore tenetur illum aliquam corporis veritatis quos accusamus. Laborum ullam autem fugiat eligendi ratione beatae consequuntur provident earum, nemo neque itaque!
-        <forge-button variant="raised" id="child-btn">Show child overlay</forge-button>
-        <forge-overlay target="child-btn" id="my-child-overlay" placement="right">
-          <p class="overlay-content">Nested overlay test</p>
+    <forge-overlay anchor="my-btn" id="my-overlay">
+      <div class="overlay-content" role="dialog" aria-labelledby="dialog-title" id="my-dialog">
+        <div id="dialog-title">Overlay content</div>
+
+        <forge-button variant="filled" id="nested-btn" autofocus>Show nested overlay</forge-button>
+        <forge-overlay anchor="nested-btn" id="my-nested-overlay" placement="right" flip="main" hide="off" boundary="clipping-container">
+          <div class="overlay-content">Nested overlay test</div>
         </forge-overlay>
       </div>
     </forge-overlay>
diff --git a/src/dev/pages/overlay/overlay.html b/src/dev/pages/overlay/overlay.html
index 9be8dd647..9b3a71345 100644
--- a/src/dev/pages/overlay/overlay.html
+++ b/src/dev/pages/overlay/overlay.html
@@ -34,14 +34,34 @@
           { label: 'Absolute', value: 'absolute' }
         ]
       },
+      {
+        type: 'select',
+        label: 'Flip',
+        id: 'opt-flip',
+        defaultValue: 'auto',
+        options: [
+          { label: 'Auto', value: 'auto' },
+          { label: 'Main', value: 'main' },
+          { label: 'Cross', value: 'cross' },
+          { label: 'Off', value: 'off' },
+        ]
+      },
+      {
+        type: 'select',
+        label: 'Hide',
+        id: 'opt-hide',
+        defaultValue: 'auto',
+        options: [
+          { label: 'Auto', value: 'auto' },
+          { label: 'Off', value: 'off' },
+        ]
+      },
       { type: 'switch', label: 'Inline', id: 'opt-inline' },
       { type: 'switch', label: 'Static', id: 'opt-static' },
-      { type: 'switch', label: 'Dialog', id: 'opt-dialog'},
-      { type: 'switch', label: 'Modal', id: 'opt-modal'},
-      { type: 'switch', label: 'Hide', id: 'opt-hide', defaultValue: true },
       { type: 'switch', label: 'Shift', id: 'opt-shift' },
-      { type: 'switch', label: 'Flip', id: 'opt-flip', defaultValue: true },
       { type: 'switch', label: 'Auto', id: 'opt-auto' },
+      { type: 'switch', label: 'Show arrow', id: 'opt-show-arrow' },
+      { type: 'switch', label: 'Set boundary', id: 'opt-set-boundary' },
       { type: 'switch', label: 'Use small container', id: 'opt-use-small-container' },
       { type: 'switch', label: 'Force containment', id: 'opt-force-containment' },
       { type: 'switch', label: 'Use offset', id: 'opt-use-offset' },
diff --git a/src/dev/pages/overlay/overlay.scss b/src/dev/pages/overlay/overlay.scss
index 55c6e3b72..55a38e5c7 100644
--- a/src/dev/pages/overlay/overlay.scss
+++ b/src/dev/pages/overlay/overlay.scss
@@ -17,6 +17,7 @@
   width: 300px;
   padding: 8px;
   border: 1px dashed var(--forge-theme-primary);
+  background-color: var(--forge-theme-surface);
 }
 
 .scroll-container {
@@ -26,3 +27,12 @@
   align-items: center;
   justify-content: center;
 }
+
+.arrow {
+  position: absolute;
+  background-color: var(--forge-theme-error);
+  height: 24px;
+  width: 24px;
+  rotate: 45deg;
+  z-index: -1;
+}
diff --git a/src/dev/pages/overlay/overlay.ts b/src/dev/pages/overlay/overlay.ts
index 78d22ae0f..0ecbbe819 100644
--- a/src/dev/pages/overlay/overlay.ts
+++ b/src/dev/pages/overlay/overlay.ts
@@ -1,5 +1,5 @@
 import '$src/shared';
-import { ISelectComponent, ISwitchComponent } from '@tylertech/forge';
+import { ISelectComponent, ISwitchComponent, OverlayFlipState, OverlayHideState } from '@tylertech/forge';
 import type { IOverlayComponent } from '@tylertech/forge';
 import { toggleClass } from '@tylertech/forge-core';
 import '@tylertech/forge/button';
@@ -7,21 +7,28 @@ import '@tylertech/forge/overlay';
 import './overlay.scss';
 
 const overlay = document.querySelector('#my-overlay') as IOverlayComponent;
-const childOverlay = overlay.querySelector('#my-child-overlay') as IOverlayComponent;
+const nestedOverlay = overlay.querySelector('#my-nested-overlay') as IOverlayComponent;
 const showOverlayButton = document.querySelector('#my-btn') as HTMLButtonElement;
-const showChildOverlayButton = document.querySelector('#child-btn') as HTMLButtonElement;
+const showNestedOverlayButton = document.querySelector('#nested-btn') as HTMLButtonElement;
 const clippingContainer = document.querySelector('.clipping-container') as HTMLElement;
 
-overlay.addEventListener('forge-overlay-light-dismiss', ({ detail }: CustomEvent) => {
-  console.log('forge-overlay-beforetoggle', detail);
+overlay.addEventListener('forge-overlay-light-dismiss', (evt: CustomEvent) => {
+  console.log(evt.type);
+  showOverlayButton.setAttribute('aria-expanded', 'false');
 });
 
-overlay.addEventListener('forge-overlay-toggle', ({ detail }: CustomEvent) => {
-  console.log('forge-overlay-toggle', detail);
-});
+showOverlayButton.addEventListener('click', () => {
+  overlay.open = !overlay.open;
+
+  showOverlayButton.setAttribute('aria-expanded', String(overlay.open));
 
-showOverlayButton.addEventListener('click', () => overlay.open = !overlay.open);
-showChildOverlayButton.addEventListener('click', () => childOverlay.open = !childOverlay.open);
+  const arrowEl = overlay.querySelector('.arrow') as HTMLElement;
+  if (arrowEl) {
+    const offset = Math.sqrt(2 * arrowEl.offsetWidth ** 2) / 2;
+    overlay.arrowElementOffset = offset;
+  }
+});
+showNestedOverlayButton.addEventListener('click', () => nestedOverlay.open = !nestedOverlay.open);
 centerDemoButton();
 
 const placementSelect = document.getElementById('opt-placement') as ISelectComponent;
@@ -30,31 +37,43 @@ placementSelect.addEventListener('change', ({ detail: selected }) => overlay.pla
 const positionStrategySelect = document.getElementById('opt-position-strategy') as ISelectComponent;
 positionStrategySelect.addEventListener('change', ({ detail: selected }) => overlay.positionStrategy = selected);
 
+const flipSelect = document.getElementById('opt-flip') as ISelectComponent;
+flipSelect.addEventListener('change', ({ detail: selected }) => overlay.flip = selected as OverlayFlipState);
+
+const hideSelect = document.getElementById('opt-hide') as ISelectComponent;
+hideSelect.addEventListener('change', ({ detail: selected }) => overlay.hide = selected as OverlayHideState);
+
 const inlineToggle = document.getElementById('opt-inline') as ISwitchComponent;
 inlineToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.inline = selected);
 
 const staticToggle = document.getElementById('opt-static') as ISwitchComponent;
 staticToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.static = selected);
 
-const dialogToggle = document.getElementById('opt-dialog') as ISwitchComponent;
-dialogToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.dialog = selected);
-
-const modalToggle = document.getElementById('opt-modal') as ISwitchComponent;
-modalToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.modal = selected);
-
-const hideToggle = document.getElementById('opt-hide') as ISwitchComponent;
-hideToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.hide = selected);
-
 const shiftToggle = document.getElementById('opt-shift') as ISwitchComponent;
 shiftToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.shift = selected);
 
-const flipToggle = document.getElementById('opt-flip') as ISwitchComponent;
-flipToggle.addEventListener('forge-switch-change', ({ detail: selected }) => overlay.flip = selected);
-
 const autoToggle = document.getElementById('opt-auto') as ISwitchComponent;
 autoToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
   overlay.auto = selected;
-  flipToggle.disabled = selected;
+  flipSelect.disabled = selected;
+});
+
+const showArrowToggle = document.getElementById('opt-show-arrow') as ISwitchComponent;
+showArrowToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  if (selected) {
+    const arrowEl = document.createElement('div');
+    arrowEl.classList.add('arrow');
+    overlay.appendChild(arrowEl);
+    overlay.arrowElement = arrowEl;
+  } else {
+    overlay.querySelector('.arrow')?.remove();
+    overlay.arrowElement = null;
+  }
+});
+
+const setBoundaryToggle = document.getElementById('opt-set-boundary') as ISwitchComponent;
+setBoundaryToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  overlay.boundaryElement = selected ? clippingContainer : null;
 });
 
 const useSmallContainerToggle = document.getElementById('opt-use-small-container') as ISwitchComponent;
diff --git a/src/dev/pages/popover/popover.ejs b/src/dev/pages/popover/popover.ejs
index 539dd6bc6..a88b83636 100644
--- a/src/dev/pages/popover/popover.ejs
+++ b/src/dev/pages/popover/popover.ejs
@@ -7,7 +7,7 @@
         <div slot="body" id="my-popover" role="dialog" class="popover-content" style="padding: 16px;">
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus sit in placeat aliquam expedita quis, totam impedit atque, delectus quaerat dolorum labore, eaque cumque nobis a porro quia iste ex?</p>
 
-          <forge-button variant="raised" id="my-child-btn">Show child popover</forge-button>
+          <forge-button autofocus variant="raised" id="my-child-btn">Show child popover</forge-button>
           <forge-popover placement="right" arrow>
             <p style="padding: 50px;">Nested popover test</p>
           </forge-popover>
diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
index ad9ba5b50..01f6b56eb 100644
--- a/src/dev/pages/theme/theme.ts
+++ b/src/dev/pages/theme/theme.ts
@@ -43,65 +43,44 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
     header: 'Key colors',
     swatches: [
       { text: 'Primary', background: 'primary', foreground: 'on-primary' },
-      { text: 'Primary container (minimum)', background: 'primary-container-minimum', foreground: 'on-primary-container-minimum' },
-      { text: 'Primary container (low)', background: 'primary-container-low', foreground: 'on-primary-container-low' },
-      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' },
-      { text: 'Primary container (high)', background: 'primary-container-high', foreground: 'on-primary-container-high' }
+      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' }
     ]
   },
   {
     swatches: [
       { text: 'Secondary', background: 'secondary', foreground: 'on-secondary' },
-      { text: 'Secondary container (minimum)', background: 'secondary-container-minimum', foreground: 'on-secondary-container-minimum' },
-      { text: 'Secondary container (low)', background: 'secondary-container-low', foreground: 'on-secondary-container-low'},
-      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' },
-      { text: 'Secondary container (high)', background: 'secondary-container-high', foreground: 'on-secondary-container-high' }
+      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' }
     ]
   },
   {
     swatches: [
       { text: 'Tertiary', background: 'tertiary', foreground: 'on-tertiary' },
-      { text: 'Tertiary container (minimum)', background: 'tertiary-container-minimum', foreground: 'on-tertiary-container-minimum' },
-      { text: 'Tertiary container (low)', background: 'tertiary-container-low', foreground: 'on-tertiary-container-low' },
-      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' },
-      { text: 'Tertiary container (high)', background: 'tertiary-container-high', foreground: 'on-tertiary-container-high' }
+      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' }
     ]
   },
   {
     header: 'Status',
     swatches: [
       { text: 'Success', background: 'success', foreground: 'on-success' },
-      { text: 'Success container (minimum)', background: 'success-container-minimum', foreground: 'on-success-container-minimum' },
-      { text: 'Success container (low)', background: 'success-container-low', foreground: 'on-success-container-low' },
-      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' },
-      { text: 'Success container (high)', background: 'success-container-high', foreground: 'on-success-container-high' }
+      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' }
     ]
   },
   {
     swatches: [
       { text: 'Error ', background: 'error', foreground: 'on-error' },
-      { text: 'Error container (minimum)', background: 'error-container-minimum', foreground: 'on-error-container-minimum' },
-      { text: 'Error container (low)', background: 'error-container-low', foreground: 'on-error-container-low' },
-      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' },
-      { text: 'Error container (high)', background: 'error-container-high', foreground: 'on-error-container-high' }
+      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' }
     ]
   },
   {
     swatches: [
       { text: 'Warning', background: 'warning', foreground: 'on-warning' },
-      { text: 'Warning container (minimum)', background: 'warning-container-minimum', foreground: 'on-warning-container-minimum' },
-      { text: 'Warning container (low)', background: 'warning-container-low', foreground: 'on-warning-container-low' },
-      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' },
-      { text: 'Warning container (high)', background: 'warning-container-high', foreground: 'on-warning-container-high' }
+      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' }
     ]
   },
   {
     swatches: [
       { text: 'Info', background: 'info', foreground: 'on-info' },
-      { text: 'Info container (minimum)', background: 'info-container-minimum', foreground: 'on-info-container-minimum' },
-      { text: 'Info container (low)', background: 'info-container-low', foreground: 'on-info-container-low' },
-      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' },
-      { text: 'Info container (high)', background: 'info-container-high', foreground: 'on-info-container-high' }
+      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' }
     ]
   },
   {
@@ -114,7 +93,7 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
     ]
   },
   {
-    header: 'Utilities',
+    header: 'Outline',
     swatches: [
       { text: 'Outline (high)', border: 'outline-high' },
       { text: 'Outline (medium)', border: 'outline-medium' },
diff --git a/src/lib/app-bar/profile-button/app-bar-profile-button-foundation.ts b/src/lib/app-bar/profile-button/app-bar-profile-button-foundation.ts
index b71b74e0a..ef9149722 100644
--- a/src/lib/app-bar/profile-button/app-bar-profile-button-foundation.ts
+++ b/src/lib/app-bar/profile-button/app-bar-profile-button-foundation.ts
@@ -150,6 +150,7 @@ export class AppBarProfileButtonFoundation implements IAppBarProfileButtonFounda
   public set fullName(value: string) {
     if (this._fullName !== value) {
       this._fullName = value;
+      this.avatarText = this._fullName;
       this._adapter.setHostAttribute(APP_BAR_PROFILE_BUTTON_CONSTANTS.attributes.FULL_NAME, this._fullName);
     }
   }
diff --git a/src/lib/button-toggle/button-toggle-group/button-toggle-group.scss b/src/lib/button-toggle/button-toggle-group/button-toggle-group.scss
index 30dc3f828..3c513963c 100644
--- a/src/lib/button-toggle/button-toggle-group/button-toggle-group.scss
+++ b/src/lib/button-toggle/button-toggle-group/button-toggle-group.scss
@@ -115,8 +115,8 @@ $_host-tokens: [display];
   :host([theme=#{$theme}]) {
     ::slotted(forge-button-toggle) {
       @include button-toggle.provide-theme((
-        selected-background: #{theme.variable(#{$theme}-container-low)},
-        selected-color: #{theme.variable(on-#{$theme}-container-low)},
+        selected-background: #{theme.variable(#{$theme}-container)},
+        selected-color: #{theme.variable(on-#{$theme}-container)},
         focus-indicator-color: #{theme.variable($theme)}
       ));
     }
diff --git a/src/lib/button/base/base-button-foundation.ts b/src/lib/button/base/base-button-foundation.ts
index ecab8f769..ddaa2fa0a 100644
--- a/src/lib/button/base/base-button-foundation.ts
+++ b/src/lib/button/base/base-button-foundation.ts
@@ -75,7 +75,7 @@ export abstract class BaseButtonFoundation<T extends IBaseButtonAdapter> impleme
   public focus(options?: ExperimentalFocusOptions): void {
     this._adapter.focusHost(options);
 
-    if (options?.focusVisible) {
+    if (options?.focusVisible !== false) {
       this._adapter.forceFocusVisible();
     }
   }
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index bb2b96010..26ebfd935 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -63,6 +63,12 @@ forge-focus-indicator {
       @include override(primary-color, theme.variable($theme), value);
     }
   }
+
+  :host([theme=#{$theme}]:is([variant=filled],[variant=raised])) {
+    .forge-button {
+      @include override(filled-color, theme.variable(on-#{$theme}), value);
+    }
+  }
   
   :host([theme=#{$theme}][variant=tonal]) {
     .forge-button {
diff --git a/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss b/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss
index 8bb8d745d..3c2bc9820 100644
--- a/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss
+++ b/src/lib/core/styles/tokens/button-toggle/button-toggle/_tokens.scss
@@ -36,8 +36,8 @@ $tokens: (
   shape-end-end: utils.module-ref(button-toggle, shape-end-end, shape),
 
   // Selected
-  selected-background: utils.module-val(button-toggle, selected-background, theme.variable(tertiary-container-low)),
-  selected-color: utils.module-val(button-toggle, selected-color, theme.variable(on-tertiary-container-low)),
+  selected-background: utils.module-val(button-toggle, selected-background, theme.variable(tertiary-container)),
+  selected-color: utils.module-val(button-toggle, selected-color, theme.variable(on-tertiary-container)),
   selected-disabled-background: utils.module-val(button-toggle, selected-disabled-background, theme.variable(surface-container)),
 
   // Dense
diff --git a/src/lib/core/styles/tokens/icon-button/_tokens.scss b/src/lib/core/styles/tokens/icon-button/_tokens.scss
index 3cf4daccd..268b18c73 100644
--- a/src/lib/core/styles/tokens/icon-button/_tokens.scss
+++ b/src/lib/core/styles/tokens/icon-button/_tokens.scss
@@ -67,7 +67,7 @@ $tokens: (
   toggle-on-icon-color: utils.module-val(icon-button, toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle (on) outlined
-  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container-low)),
+  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container)),
   outlined-toggle-on-icon-color: utils.module-val(icon-button, outlined-toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle tonal
diff --git a/src/lib/core/styles/tokens/theme/_token-utils.scss b/src/lib/core/styles/tokens/theme/_token-utils.scss
index e5fb2bf50..217338423 100644
--- a/src/lib/core/styles/tokens/theme/_token-utils.scss
+++ b/src/lib/core/styles/tokens/theme/_token-utils.scss
@@ -18,21 +18,21 @@
   $surface-tone: color-utils.tone($surface);
 
   // The container colors are the provided color mixed with the surface color at lower emphasis levels
-  $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(medium-low));
   $container: theme-utils.hexify($color, $surface, color-emphasis.value(low));
-  $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(lower));
-  $container-minimum: theme-utils.hexify($color, $surface, color-emphasis.value(minimum));
+  // $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(medium-low));
+  // $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(lower));
+  // $container-minimum: theme-utils.hexify($color, $surface, color-emphasis.value(minimum));
 
   // The on-color is the contrast color against the provided color
   $on-color: theme-utils.contrast($color);
 
   // The on-container colors are the contrast color for the provided color mixed with the
   // container color at a lower emphasis to let the contrast color bleed through for
-  // increased contrast against the lower emphasis container color 
-  $on-container-high: theme-utils.contrast($container-high);
+  // increased contrast against the lower emphasis container color
   $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium));
-  $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium));
-  $on-container-minimum: theme-utils.hexify($color, theme-utils.contrast($container-minimum), color-emphasis.value(medium));
+  // $on-container-high: theme-utils.contrast($container-high);
+  // $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium));
+  // $on-container-minimum: theme-utils.hexify($color, theme-utils.contrast($container-minimum), color-emphasis.value(medium));
 
   // Compute contrast ratio for foreground colors against their corresponding background
   $minimum-ratio: 4.5;
@@ -42,26 +42,26 @@
   @if color-utils.contrast-ratio($container, $on-container) < $minimum-ratio {
     @warn 'The contrast ratio  between "#{$name}-container" and "on-#{$name}-container" is less than 4.5:1.';
   }
-  @if color-utils.contrast-ratio($container-high, $on-container-high) < $minimum-ratio {
-    @warn 'The contrast ratio  between "#{$name}-container-high" and "on-#{$name}-container-high" is less than 4.5:1.';
-  }
-  @if color-utils.contrast-ratio($container-low, $on-container-low) < $minimum-ratio {
-    @warn 'The contrast ratio  between "#{$name}-container-low" and "on-#{$name}-container-low" is less than 4.5:1.';
-  }
-  @if color-utils.contrast-ratio($container-minimum, $on-container-minimum) < $minimum-ratio {
-    @warn 'The contrast ratio  between "#{$name}-container-minimum" and "on-#{$name}-container-minimum" is less than 4.5:1.';
-  }
+  // @if color-utils.contrast-ratio($container-high, $on-container-high) < $minimum-ratio {
+  //   @warn 'The contrast ratio  between "#{$name}-container-high" and "on-#{$name}-container-high" is less than 4.5:1.';
+  // }
+  // @if color-utils.contrast-ratio($container-low, $on-container-low) < $minimum-ratio {
+  //   @warn 'The contrast ratio  between "#{$name}-container-low" and "on-#{$name}-container-low" is less than 4.5:1.';
+  // }
+  // @if color-utils.contrast-ratio($container-minimum, $on-container-minimum) < $minimum-ratio {
+  //   @warn 'The contrast ratio  between "#{$name}-container-minimum" and "on-#{$name}-container-minimum" is less than 4.5:1.';
+  // }
 
   @return (
     #{$name}: $color,
-    #{$name}-container-minimum: $container-minimum,
-    #{$name}-container-low: $container-low,
+    // #{$name}-container-minimum: $container-minimum,
+    // #{$name}-container-low: $container-low,
     #{$name}-container: $container,
-    #{$name}-container-high: $container-high,
+    // #{$name}-container-high: $container-high,
     on-#{$name}: $on-color,
-    on-#{$name}-container-minimum: $on-container-minimum,
-    on-#{$name}-container-low: $on-container-low,
+    // on-#{$name}-container-minimum: $on-container-minimum,
+    // on-#{$name}-container-low: $on-container-low,
     on-#{$name}-container: $on-container,
-    on-#{$name}-container-high: $on-container-high
+    // on-#{$name}-container-high: $on-container-high
   );
 }
diff --git a/src/lib/core/utils/position-utils.ts b/src/lib/core/utils/position-utils.ts
index 073e3558b..f5e4a96c0 100644
--- a/src/lib/core/utils/position-utils.ts
+++ b/src/lib/core/utils/position-utils.ts
@@ -23,6 +23,8 @@ import { getContainingBlock, isContainingBlock, getWindow } from '@floating-ui/u
 export type PositionPlacement = Placement;
 export type PositionStrategy = Strategy;
 
+export const DEFAULT_FALLBACK_PLACEMENTS: PositionPlacement[] = ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'];
+
 export interface IPositionElementResult {
   x: number;
   y: number;
@@ -82,14 +84,14 @@ export interface IPositionElementConfig {
 export async function positionElementAsync({
   element,
   targetElement,
-  placement = 'bottom-start',
+  placement = 'bottom',
   offset = false,
   offsetOptions,
   strategy = 'absolute',
   apply = true,
   flip = true,
   flipOptions = {
-    fallbackPlacements: ['top-start', 'top', 'top-end', 'left-start', 'left', 'left-end', 'right-start', 'right', 'right-end'],
+    fallbackPlacements: DEFAULT_FALLBACK_PLACEMENTS,
     fallbackStrategy: 'initialPlacement'
   },
   auto = false,
diff --git a/src/lib/core/utils/utils.ts b/src/lib/core/utils/utils.ts
index a338d6457..aae2902a0 100644
--- a/src/lib/core/utils/utils.ts
+++ b/src/lib/core/utils/utils.ts
@@ -217,3 +217,13 @@ export function replaceElement<T extends HTMLElement>(oldElement: HTMLElement, n
   oldElement.remove();
   return newElement;
 }
+
+/**
+ * Coerces a string separated by `separator` into an array of strings. 
+ * @param value The string to coerce.
+ * @params [separator=','] The separator to use when splitting the string.
+ * @returns An array of strings.
+ */
+export function coerceStringToArray<T extends string>(value: string, separator = ','): T[] {
+  return value.split(separator).map(p => p.trim()) as T[];
+}
diff --git a/src/lib/exp/list-dropdown/list-dropdown-adapter.ts b/src/lib/exp/list-dropdown/list-dropdown-adapter.ts
index 7ed054937..3c66f9076 100644
--- a/src/lib/exp/list-dropdown/list-dropdown-adapter.ts
+++ b/src/lib/exp/list-dropdown/list-dropdown-adapter.ts
@@ -16,6 +16,6 @@ export class ListDropdownAdapter extends BaseAdapter<IListDropdownComponent> imp
   }
   
   public setTargetElement(element: HTMLElement): void {
-    this._popoverElement.targetElement = element;
+    this._popoverElement.anchorElement = element;
   }
 }
diff --git a/src/lib/icon-button/icon-button.scss b/src/lib/icon-button/icon-button.scss
index 7d214bb59..00ed5bc98 100644
--- a/src/lib/icon-button/icon-button.scss
+++ b/src/lib/icon-button/icon-button.scss
@@ -273,7 +273,7 @@ forge-state-layer {
   :host([toggle][theme=#{$theme}][variant=outlined]) {
     .forge-icon-button {
       @include override(icon-color, theme.variable($theme), value);
-      @include override(outlined-toggle-on-background-color, theme.variable(#{$theme}-container-low), value);
+      @include override(outlined-toggle-on-background-color, theme.variable(#{$theme}-container), value);
       @include override(outlined-toggle-on-icon-color, theme.variable($theme), value);
     }
   }
@@ -291,7 +291,7 @@ forge-state-layer {
     // Toggle + tonal variant
     :host([toggle]:not([on])[theme=#{$theme}][variant=tonal]) {
       .forge-icon-button {
-        @include override(background-color, theme.variable(#{$theme}-container-low), value);
+        @include override(background-color, theme.variable(#{$theme}-container), value);
       }
     }
 
@@ -315,7 +315,7 @@ forge-state-layer {
     :host([toggle]:not([on])[theme=#{$theme}]:is([variant=filled],[variant=raised])) {
       .forge-icon-button {
         @include override(icon-color, theme.variable($theme), value);
-        @include override(background-color, theme.variable(#{$theme}-container-low), value);
+        @include override(background-color, theme.variable(#{$theme}-container), value);
       }
     }
 
diff --git a/src/lib/overlay/_core.scss b/src/lib/overlay/_core.scss
index 491973f6f..10b22ef03 100644
--- a/src/lib/overlay/_core.scss
+++ b/src/lib/overlay/_core.scss
@@ -30,7 +30,3 @@
   overflow: visible;
   inset: unset;
 }
-
-@mixin dialog-backdrop {
-  background-color: transparent;
-}
diff --git a/src/lib/overlay/base/base-overlay-foundation.ts b/src/lib/overlay/base/base-overlay-foundation.ts
index 2ecd9ec88..0ad1df70d 100644
--- a/src/lib/overlay/base/base-overlay-foundation.ts
+++ b/src/lib/overlay/base/base-overlay-foundation.ts
@@ -1,46 +1,48 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IBaseAdapter } from '../../core';
-import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy } from '../overlay-constants';
 
 export interface IBaseOverlayFoundation extends ICustomElementFoundation {
   initialize(): void;
-  disconnect(): void;
+  destroy(): void;
   position(): void;
-  targetElement: HTMLElement;
-  target: string | null;
+  anchorElement: HTMLElement;
+  anchor: string | null;
   open: boolean;
   inline: boolean;
   placement: OverlayPlacement;
   positionStrategy: OverlayPositionStrategy;
   offset: IOverlayOffset;
-  hide: boolean;
+  hide: OverlayHideState;
   static: boolean;
   shift: boolean;
-  flip: boolean;
+  flip: OverlayFlipState;
+  boundary: string | null;
+  boundaryElement: HTMLElement | null;
+  fallbackPlacements: OverlayPlacement[] | null;
   auto: boolean;
-  dialog: boolean;
-  modal: boolean;
 }
 
 export abstract class BaseOverlayFoundation<T extends IBaseAdapter> implements IBaseOverlayFoundation {
   constructor(protected _adapter: T) {}
 
   public initialize(): void {}
-  public abstract disconnect(): void;
+  public abstract destroy(): void;
   public abstract position(): void;
 
-  public abstract targetElement: HTMLElement;
-  public abstract target: string | null;
+  public abstract anchorElement: HTMLElement;
+  public abstract anchor: string | null;
   public abstract open: boolean;
   public abstract inline: boolean;
   public abstract placement: OverlayPlacement;
   public abstract positionStrategy: OverlayPositionStrategy;
   public abstract offset: IOverlayOffset;
-  public abstract hide: boolean;
+  public abstract hide: OverlayHideState;
   public abstract static: boolean;
   public abstract shift: boolean;
-  public abstract flip: boolean;
+  public abstract flip: OverlayFlipState;
+  public abstract boundary: string | null;
+  public abstract boundaryElement: HTMLElement | null;
+  public abstract fallbackPlacements: OverlayPlacement[] | null;
   public abstract auto: boolean;
-  public abstract dialog: boolean;
-  public abstract modal: boolean;
 }
diff --git a/src/lib/overlay/base/base-overlay.ts b/src/lib/overlay/base/base-overlay.ts
index e5bd96b06..c1d380635 100644
--- a/src/lib/overlay/base/base-overlay.ts
+++ b/src/lib/overlay/base/base-overlay.ts
@@ -1,23 +1,25 @@
 import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { IBaseOverlayFoundation } from './base-overlay-foundation';
-import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
+import { coerceStringToArray } from '../../core/utils';
 
 export interface IBaseOverlay extends IBaseComponent {
-  targetElement: HTMLElement;
-  target: string | null;
+  anchorElement: HTMLElement;
+  anchor: string | null;
   open: boolean;
   inline: boolean;
   placement: OverlayPlacement;
   positionStrategy: OverlayPositionStrategy;
   offset: IOverlayOffset;
   shift: boolean;
-  hide: boolean;
+  hide: OverlayHideState;
   static: boolean;
-  flip: boolean;
+  flip: OverlayFlipState;
+  boundary: string | null;
+  boundaryElement: HTMLElement | null;
+  fallbackPlacements: OverlayPlacement[] | null;
   auto: boolean;
-  dialog: boolean;
-  modal: boolean;
   position(): void;
 }
 
@@ -34,8 +36,8 @@ export abstract class BaseOverlay<T extends IBaseOverlayFoundation> extends Base
 
   public attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
     switch (name) {
-      case OVERLAY_CONSTANTS.observedAttributes.TARGET:
-        this.target = newValue;
+      case OVERLAY_CONSTANTS.observedAttributes.ANCHOR:
+        this.anchor = newValue;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.OPEN:
         this.open = coerceBoolean(newValue);
@@ -50,7 +52,7 @@ export abstract class BaseOverlay<T extends IBaseOverlayFoundation> extends Base
         this.positionStrategy = newValue as OverlayPositionStrategy;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.HIDE:
-        this.hide = coerceBoolean(newValue);
+        this.hide = newValue as OverlayHideState;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.STATIC:
         this.static = coerceBoolean(newValue);
@@ -58,26 +60,26 @@ export abstract class BaseOverlay<T extends IBaseOverlayFoundation> extends Base
       case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
         this.shift = coerceBoolean(newValue);
         break;
-      case OVERLAY_CONSTANTS.observedAttributes.NO_FLIP:
-        this.flip = !coerceBoolean(newValue);
+      case OVERLAY_CONSTANTS.observedAttributes.FLIP:
+        this.flip = newValue as OverlayFlipState;
         break;
-      case OVERLAY_CONSTANTS.observedAttributes.AUTO:
-        this.auto = coerceBoolean(newValue);
+      case OVERLAY_CONSTANTS.observedAttributes.BOUNDARY:
+        this.boundary = newValue;
         break;
-      case OVERLAY_CONSTANTS.observedAttributes.DIALOG:
-        this.dialog = coerceBoolean(newValue);
+      case OVERLAY_CONSTANTS.observedAttributes.FALLBACK_PLACEMENTS:
+        this.fallbackPlacements = newValue?.trim() ? coerceStringToArray<OverlayPlacement>(newValue) : null;
         break;
-      case OVERLAY_CONSTANTS.observedAttributes.MODAL:
-        this.modal = coerceBoolean(newValue);
+      case OVERLAY_CONSTANTS.observedAttributes.AUTO:
+        this.auto = coerceBoolean(newValue);
         break;
     }
   }
 
   @FoundationProperty()
-  public declare targetElement: HTMLElement;
+  public declare anchorElement: HTMLElement;
 
   @FoundationProperty()
-  public declare target: string | null;
+  public declare anchor: string | null;
 
   @FoundationProperty()
   public declare open: boolean;
@@ -98,20 +100,23 @@ export abstract class BaseOverlay<T extends IBaseOverlayFoundation> extends Base
   public declare shift: boolean;
 
   @FoundationProperty()
-  public declare hide: boolean;
+  public declare hide: OverlayHideState;
 
   @FoundationProperty()
   public declare static: boolean;
 
   @FoundationProperty()
-  public declare flip: boolean;
+  public declare flip: OverlayFlipState;
 
   @FoundationProperty()
-  public declare auto: boolean;
+  public declare boundary: string | null;
+
+  @FoundationProperty()
+  public declare boundaryElement: HTMLElement | null;
 
   @FoundationProperty()
-  public declare dialog: boolean;
+  public declare fallbackPlacements: OverlayPlacement[] | null;
 
   @FoundationProperty()
-  public declare modal: boolean;
+  public declare auto: boolean;
 }
diff --git a/src/lib/overlay/base/overlay-aware-foundation.ts b/src/lib/overlay/base/overlay-aware-foundation.ts
index b85354a7b..aa4499ca2 100644
--- a/src/lib/overlay/base/overlay-aware-foundation.ts
+++ b/src/lib/overlay/base/overlay-aware-foundation.ts
@@ -1,7 +1,7 @@
 import { IBaseOverlayFoundation } from './base-overlay-foundation';
 import { IOverlayComponent } from '../overlay';
 import { IOverlayAwareAdapter } from './overlay-aware-adapter';
-import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
 
 export interface IOverlayAwareFoundation extends IBaseOverlayFoundation {
   readonly overlayElement: IOverlayComponent;
@@ -22,7 +22,7 @@ export abstract class OverlayAwareFoundation<T extends IOverlayAwareAdapter> imp
     }
   }
 
-  public disconnect(): void {
+  public destroy(): void {
     this._adapter.overlayElement.removeEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, this._lightDismissListener);
   }
 
@@ -30,18 +30,18 @@ export abstract class OverlayAwareFoundation<T extends IOverlayAwareAdapter> imp
     return this._adapter.overlayElement;
   }
 
-  public get targetElement(): HTMLElement {
-    return this._adapter.overlayElement.targetElement;
+  public get anchorElement(): HTMLElement {
+    return this._adapter.overlayElement.anchorElement;
   }
-  public set targetElement(value: HTMLElement) {
-    this._adapter.overlayElement.targetElement = value;
+  public set anchorElement(value: HTMLElement) {
+    this._adapter.overlayElement.anchorElement = value;
   }
 
-  public get target(): string | null {
-    return this._adapter.overlayElement.target;
+  public get anchor(): string | null {
+    return this._adapter.overlayElement.anchor;
   }
-  public set target(value: string | null) {
-    this._adapter.overlayElement.target = value;
+  public set anchor(value: string | null) {
+    this._adapter.overlayElement.anchor = value;
   }
 
   public get open(): boolean {
@@ -89,13 +89,13 @@ export abstract class OverlayAwareFoundation<T extends IOverlayAwareAdapter> imp
     }
   }
 
-  public get hide(): boolean {
+  public get hide(): OverlayHideState {
     return this._adapter.overlayElement.hide;
   }
-  public set hide(value: boolean) {
+  public set hide(value: OverlayHideState) {
     if (this._adapter.overlayElement.hide !== value) {
       this._adapter.overlayElement.hide = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.HIDE, this._adapter.overlayElement.hide);
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.HIDE, this._adapter.overlayElement.hide !== OVERLAY_CONSTANTS.defaults.HIDE, String(this._adapter.overlayElement.hide));
     }
   }
 
@@ -126,13 +126,13 @@ export abstract class OverlayAwareFoundation<T extends IOverlayAwareAdapter> imp
     }
   }
 
-  public get flip(): boolean {
+  public get flip(): OverlayFlipState {
     return this._adapter.overlayElement.flip;
   }
-  public set flip(value: boolean) {
+  public set flip(value: OverlayFlipState) {
     if (this._adapter.overlayElement.flip !== value) {
       this._adapter.overlayElement.flip = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.NO_FLIP, !this._adapter.overlayElement.flip);
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.FLIP, this._adapter.overlayElement.flip !== OVERLAY_CONSTANTS.defaults.FLIP, String(this._adapter.overlayElement.flip));
     }
   }
 
@@ -145,27 +145,35 @@ export abstract class OverlayAwareFoundation<T extends IOverlayAwareAdapter> imp
       this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.AUTO, this._adapter.overlayElement.auto);
     }
   }
+  
+  public get boundary(): string | null {
+    return this._adapter.overlayElement.boundary;
+  }
+  public set boundary(value: string | null) {
+    if (this._adapter.overlayElement.boundary !== value) {
+      this._adapter.overlayElement.boundary = value;
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.BOUNDARY, !!this._adapter.overlayElement.boundary, this._adapter.overlayElement.boundary as string);
+    }
+  }
 
-  public get dialog(): boolean {
-    return this._adapter.overlayElement.dialog;
+  public get boundaryElement(): HTMLElement | null {
+    return this._adapter.overlayElement.boundaryElement;
   }
-  public set dialog(value: boolean) {
-    if (this._adapter.overlayElement.dialog !== value) {
-      this._adapter.overlayElement.dialog = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.DIALOG, this._adapter.overlayElement.dialog);
+  public set boundaryElement(value: HTMLElement | null) {
+    if (this._adapter.overlayElement.boundaryElement !== value) {
+      this._adapter.overlayElement.boundaryElement = value;
     }
   }
 
-  public get modal(): boolean {
-    return this._adapter.overlayElement.modal;
+  public get fallbackPlacements(): OverlayPlacement[] | null {
+    return this._adapter.overlayElement.fallbackPlacements;
   }
-  public set modal(value: boolean) {
-    if (this._adapter.overlayElement.modal !== value) {
-      this._adapter.overlayElement.modal = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.MODAL, this._adapter.overlayElement.modal);
+  public set fallbackPlacements(value: OverlayPlacement[] | null) {
+    if (this._adapter.overlayElement.fallbackPlacements !== value) {
+      this._adapter.overlayElement.fallbackPlacements = value;
     }
   }
-  
+
   public position(): void {
     this._adapter.overlayElement.position();
   }
diff --git a/src/lib/overlay/base/overlay-aware.ts b/src/lib/overlay/base/overlay-aware.ts
index 98ec4808c..711b18742 100644
--- a/src/lib/overlay/base/overlay-aware.ts
+++ b/src/lib/overlay/base/overlay-aware.ts
@@ -2,23 +2,21 @@ import { coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { IOverlayComponent } from '../overlay';
 import { IOverlayAwareFoundation } from './overlay-aware-foundation';
-import { IOverlayOffset, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
 
 export interface IOverlayAware extends IBaseComponent {
-  targetElement: HTMLElement;
-  target: string | null;
+  anchorElement: HTMLElement;
+  anchor: string | null;
   open: boolean;
   inline: boolean;
   placement: OverlayPlacement;
   positionStrategy: OverlayPositionStrategy;
   offset: IOverlayOffset;
   shift: boolean;
-  hide: boolean;
+  hide: OverlayHideState;
   static: boolean;
-  flip: boolean;
+  flip: OverlayFlipState;
   auto: boolean;
-  dialog: boolean;
-  modal: boolean;
   position(): void;
   overlay: IOverlayComponent;
 }
@@ -36,8 +34,8 @@ export abstract class OverlayAware<T extends IOverlayAwareFoundation> extends Ba
 
   public attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
     switch (name) {
-      case OVERLAY_CONSTANTS.observedAttributes.TARGET:
-        this.target = newValue;
+      case OVERLAY_CONSTANTS.observedAttributes.ANCHOR:
+        this.anchor = newValue;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.OPEN:
         this.open = coerceBoolean(newValue);
@@ -52,7 +50,7 @@ export abstract class OverlayAware<T extends IOverlayAwareFoundation> extends Ba
         this.positionStrategy = newValue as OverlayPositionStrategy;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.HIDE:
-        this.hide = coerceBoolean(newValue);
+        this.hide = newValue as OverlayHideState;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.STATIC:
         this.static = coerceBoolean(newValue);
@@ -60,18 +58,12 @@ export abstract class OverlayAware<T extends IOverlayAwareFoundation> extends Ba
       case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
         this.shift = coerceBoolean(newValue);
         break;
-      case OVERLAY_CONSTANTS.observedAttributes.NO_FLIP:
-        this.flip = !coerceBoolean(newValue);
+      case OVERLAY_CONSTANTS.observedAttributes.FLIP:
+        this.flip = newValue as OverlayFlipState;
         break;
       case OVERLAY_CONSTANTS.observedAttributes.AUTO:
         this.auto = coerceBoolean(newValue);
         break;
-      case OVERLAY_CONSTANTS.observedAttributes.DIALOG:
-        this.dialog = coerceBoolean(newValue);
-        break;
-      case OVERLAY_CONSTANTS.observedAttributes.MODAL:
-        this.modal = coerceBoolean(newValue);
-        break;
     }
   }
 
@@ -80,10 +72,10 @@ export abstract class OverlayAware<T extends IOverlayAwareFoundation> extends Ba
   }
 
   @FoundationProperty()
-  public targetElement: HTMLElement;
+  public anchorElement: HTMLElement;
 
   @FoundationProperty()
-  public declare target: string | null;
+  public declare anchor: string | null;
 
   @FoundationProperty()
   public open: boolean;
@@ -104,20 +96,14 @@ export abstract class OverlayAware<T extends IOverlayAwareFoundation> extends Ba
   public shift: boolean;
 
   @FoundationProperty()
-  public hide: boolean;
+  public hide: OverlayHideState;
 
   @FoundationProperty()
   public static: boolean;
 
   @FoundationProperty()
-  public flip: boolean;
+  public flip: OverlayFlipState;
 
   @FoundationProperty()
   public auto: boolean;
-
-  @FoundationProperty()
-  public dialog: boolean;
-
-  @FoundationProperty()
-  public modal: boolean;
 }
diff --git a/src/lib/overlay/mixins/with-overlay-aware.ts b/src/lib/overlay/mixins/with-overlay-aware.ts
new file mode 100644
index 000000000..d74feb083
--- /dev/null
+++ b/src/lib/overlay/mixins/with-overlay-aware.ts
@@ -0,0 +1,298 @@
+import { coerceBoolean } from '@tylertech/forge-core';
+import { AbstractConstructor, MixinBase } from '../../constants';
+import { coerceStringToArray } from '../../core/utils/utils';
+import { IBaseComponent } from '../../core/base/base-component';
+import { IOverlayComponent } from '../overlay';
+import { IOverlayOffset, OverlayFlipState, OverlayHideState, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS } from '../overlay-constants';
+
+/**
+ * An element that exposes a common API to its underlying `<forge-overlay>`.
+ */
+export interface IWithOverlayAware extends IBaseComponent {
+  /**
+   * The underlying `<forge-overlay>` element.
+   */
+  readonly overlayElement: IOverlayComponent;
+
+  /**
+   * The element to which the overlay is anchored.
+   */
+  anchorElement: HTMLElement;
+
+  /**
+   * The CSS selector of the element to which the overlay is anchored.
+   */
+  anchor: string | null;
+
+  /**
+   * Whether the overlay is open.
+   */
+  open: boolean;
+
+  /**
+   * Whether the overlay is inline.
+   */
+  inline: boolean;
+
+  /**
+   * The placement of the overlay.
+   */
+  placement: OverlayPlacement;
+
+  /**
+   * The position strategy of the overlay.
+   */
+  positionStrategy: OverlayPositionStrategy;
+
+  /**
+   * The offset of the overlay.
+   */
+  offset: IOverlayOffset;
+
+  /**
+   * Whether the overlay shifts to avoid being cut off.
+   */
+  shift: boolean;
+
+  /**
+   * Whether the overlay hides when the anchor is clicked.
+   */
+  hide: boolean;
+
+  /**
+   * Whether the overlay is static.
+   */
+  static: boolean;
+
+  /**
+   * Whether the overlay flips when it would be cut off.
+   */
+  flip: boolean;
+
+  /**
+   * Whether the overlay automatically positions itself.
+   */
+  auto: boolean;
+
+  /**
+   * The id for the position boundary element that is an ancestor of the overlay.
+   */
+  boundary: string | null;
+
+  /**
+   * The position boundary element that is an ancestor of the overlay.
+   */
+  boundaryElement: HTMLElement | null;
+
+  /**
+   * The fallback placements of the overlay.
+   */
+  fallbackPlacements: OverlayPlacement[] | null;
+
+  /**
+   * Positions the overlay.
+   */
+  position(): void;
+}
+
+export declare abstract class WithOverlayAwareContract {
+  public get overlayElement(): IOverlayComponent;
+
+  public anchorElement: HTMLElement;
+  public anchor: string | null;
+  public open: boolean;
+  public inline: boolean;
+  public placement: OverlayPlacement;
+  public positionStrategy: OverlayPositionStrategy;
+  public offset: IOverlayOffset;
+  public shift: boolean;
+  public hide: OverlayHideState;
+  public static: boolean;
+  public flip: OverlayFlipState;
+  public auto: boolean;
+  public boundary: string | null;
+  public boundaryElement: HTMLElement | null;
+  public fallbackPlacements: OverlayPlacement[] | null;
+
+  public position(): void;
+  public attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+
+/**
+ * 
+ * 
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithOverlayAware<TBase extends MixinBase>(base: TBase) {
+  abstract class OverlayAware extends base implements WithOverlayAwareContract {
+    //
+    // Abstract members
+    //
+
+    public abstract readonly overlayElement: IOverlayComponent;
+
+    //
+    // Public members
+    //
+
+    public get anchorElement(): HTMLElement {
+      return this.overlayElement.anchorElement;
+    }
+    public set anchorElement(value: HTMLElement) {
+      this.overlayElement.anchorElement = value;
+    }
+
+    public get anchor(): string | null {
+      return this.overlayElement.anchor;
+    }
+    public set anchor(value: string | null) {
+      this.overlayElement.anchor = value;
+    }
+
+    public get open(): boolean {
+      return this.overlayElement.open;
+    }
+    public set open(value: boolean) {
+      this.overlayElement.open = value;
+    }
+
+    public get inline(): boolean {
+      return this.overlayElement.inline;
+    }
+    public set inline(value: boolean) {
+      this.overlayElement.inline = value;
+    }
+
+    public get placement(): OverlayPlacement {
+      return this.overlayElement.placement;
+    }
+    public set placement(value: OverlayPlacement) {
+      this.overlayElement.placement = value;
+    }
+
+    public get positionStrategy(): OverlayPositionStrategy {
+      return this.overlayElement.positionStrategy;
+    }
+    public set positionStrategy(value: OverlayPositionStrategy) {
+      this.overlayElement.positionStrategy = value;
+    }
+
+    public get offset(): IOverlayOffset {
+      return this.overlayElement.offset;
+    }
+    public set offset(value: IOverlayOffset) {
+      this.overlayElement.offset = value;
+    }
+
+    public get shift(): boolean {
+      return this.overlayElement.shift;
+    }
+    public set shift(value: boolean) {
+      this.overlayElement.shift = value;
+    }
+
+    public get hide(): OverlayHideState {
+      return this.overlayElement.hide;
+    }
+    public set hide(value: OverlayHideState) {
+      this.overlayElement.hide = value;
+    }
+
+    public get static(): boolean {
+      return this.overlayElement.static;
+    }
+    public set static(value: boolean) {
+      this.overlayElement.static = value;
+    }
+
+    public get flip(): OverlayFlipState {
+      return this.overlayElement.flip;
+    }
+    public set flip(value: OverlayFlipState) {
+      this.overlayElement.flip = value;
+    }
+
+    public get auto(): boolean {
+      return this.overlayElement.auto;
+    }
+    public set auto(value: boolean) {
+      this.overlayElement.auto = value;
+    }
+
+    public get boundary(): string | null {
+      return this.overlayElement.boundary;
+    }
+    public set boundary(value: string | null) {
+      this.overlayElement.boundary = value;
+    }
+
+    public get boundaryElement(): HTMLElement | null {
+      return this.overlayElement.boundaryElement;
+    }
+    public set boundaryElement(value: HTMLElement | null) {
+      this.overlayElement.boundaryElement = value;
+    }
+
+    public get fallbackPlacements(): OverlayPlacement[] | null {
+      return this.overlayElement.fallbackPlacements;
+    }
+    public set fallbackPlacements(value: OverlayPlacement[] | null) {
+      this.overlayElement.fallbackPlacements = value;
+    }
+
+    //
+    // Public methods
+    //
+
+    public position(): void {
+      this.overlayElement.position();
+    }
+
+    public attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
+      super.attributeChangedCallback?.(name, _oldValue, newValue);
+
+      switch (name) {
+        case OVERLAY_CONSTANTS.observedAttributes.ANCHOR:
+          this.anchor = newValue;
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.OPEN:
+          this.open = coerceBoolean(newValue);
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.INLINE:
+          this.inline = coerceBoolean(newValue);
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.PLACEMENT:
+          this.placement = newValue as OverlayPlacement;
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.POSITION_STRATEGY:
+          this.positionStrategy = newValue as OverlayPositionStrategy;
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.HIDE:
+          this.hide = newValue as OverlayHideState;
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.STATIC:
+          this.static = coerceBoolean(newValue);
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.SHIFT:
+          this.shift = coerceBoolean(newValue);
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.FLIP:
+          this.flip = newValue as OverlayFlipState;
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.AUTO:
+          this.auto = coerceBoolean(newValue);
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.BOUNDARY:
+          this.boundary = newValue;
+          break;
+        case OVERLAY_CONSTANTS.observedAttributes.FALLBACK_PLACEMENTS:
+          this.fallbackPlacements = newValue?.trim() ? coerceStringToArray<OverlayPlacement>(newValue) : null;
+          break;
+      }
+    }
+  }
+
+  return OverlayAware as AbstractConstructor<WithOverlayAwareContract> & TBase;
+}
diff --git a/src/lib/overlay/overlay-adapter.ts b/src/lib/overlay/overlay-adapter.ts
index 604e45388..74053d20b 100644
--- a/src/lib/overlay/overlay-adapter.ts
+++ b/src/lib/overlay/overlay-adapter.ts
@@ -1,93 +1,97 @@
-import { autoUpdate } from '@floating-ui/dom';
-import { deepQuerySelectorAll, getShadowElement } from '@tylertech/forge-core';
+import { autoUpdate, Boundary } from '@floating-ui/dom';
+import { getShadowElement } from '@tylertech/forge-core';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { locateTargetHeuristic, replaceElement } from '../core/utils/utils';
 import { positionElementAsync } from '../core/utils/position-utils';
-import { IOverlayComponent } from './overlay';
+import { locateTargetHeuristic } from '../core/utils/utils';
+import { IOverlayComponent, OverlayComponent } from './overlay';
 import {
-  CAN_USE_POPOVER,
   IOverlayOffset,
+  OverlayFlipState,
+  OverlayHideState,
+  OverlayLightDismissReason,
   OverlayPlacement,
   OverlayPositionStrategy,
-  OverlayToggleEvent,
-  OVERLAY_CONSTANTS
+  overlayStack,
+  OVERLAY_CONSTANTS,
+  SUPPORTS_POPOVER
 } from './overlay-constants';
 
 export interface IOverlayAdapter extends IBaseAdapter {
-  setOpen(value: boolean): void;
-  locateTargetElement(id: string | null): HTMLElement | null;
+  show(): void;
+  hide(): void;
+  locateAnchorElement(id: string | null): HTMLElement | null;
+  isMostRecentOpenOverlay(): boolean;
   positionElement(config: IPositionElementConfig): void;
   tryCleanupAutoUpdate(): void;
-  addPopoverLightDismissListener(listener: EventListener): void;
-  removePopoverLightDismissListener(listener: EventListener): void;
-  addDialogLightDismissListener(listener: EventListener | (() => void)): void;
-  removeDialogLightDismissListener(listener: EventListener): void;
-  addCustomLightDismissListener(listener: () => void): void;
-  removeCustomLightDismissListener(): void;
-  setDialog(value: boolean): void;
-  isMostRecentOpenOverlay(): boolean;
+  addLightDismissListener(listener: (reason: OverlayLightDismissReason) => void): void;
+  removeLightDismissListener(): void;
 }
 
 export interface IPositionElementConfig {
-  targetElement: HTMLElement;
+  anchorElement: HTMLElement;
   strategy: OverlayPositionStrategy;
   placement: OverlayPlacement;
-  hide: boolean;
+  hide: OverlayHideState;
   offset: IOverlayOffset;
   shift: boolean;
   auto: boolean;
-  flip: boolean;
+  flip: OverlayFlipState;
+  boundary: string | null;
+  boundaryElement: HTMLElement | null;
+  fallbackPlacements: OverlayPlacement[] | undefined;
 }
 
 export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IOverlayAdapter {
   private _rootElement: HTMLElement | HTMLDialogElement;
   private _autoUpdateCleanup?: () => void;
-  private _lightDismissCleanup?: () => void;
-  private _dialogLightDismissCleanup?: () => void;
+  private _lightDismissController = new AbortController();
 
   constructor(component: IOverlayComponent) {
     super(component);
     this._rootElement = getShadowElement(component, OVERLAY_CONSTANTS.selectors.ROOT);
   }
 
-  public setOpen(value: boolean): void {
-    if (value) {
-      if (!this._component.inline && CAN_USE_POPOVER) {
-        if (this._component.modal && this._rootElement.tagName === 'DIALOG') {
-          this._rootElement.removeAttribute('popover');
-          (this._rootElement as HTMLDialogElement).showModal();
-        } else {
-          this._rootElement.popover = this._component.static ? 'manual' : 'auto';
-          this._rootElement.showPopover();
-        }
-      } else {
-        this._rootElement.removeAttribute('popover');
-      }
+  public show(): void {
+    if (!this._component.inline && SUPPORTS_POPOVER) {
+      this._rootElement.popover = 'manual';
+      this._rootElement.showPopover();
     } else {
-      this.tryCleanupAutoUpdate();
+      this._rootElement.removeAttribute('popover');
+    }
 
-      if (this._rootElement.tagName === 'DIALOG') {
-        (this._rootElement as HTMLDialogElement).close();
-      } else if (CAN_USE_POPOVER && this._rootElement.matches(':popover-open')) {
-        this._rootElement.hidePopover();
-      }
+    OverlayComponent[overlayStack].add(this._component);
+  }
 
-      this._rootElement.style.removeProperty('top');
-      this._rootElement.style.removeProperty('left');
-      this._rootElement.style.removeProperty('display');
-      this._component.removeAttribute(OVERLAY_CONSTANTS.attributes.POSITION_PLACEMENT);
+  public hide(): void {
+    this.tryCleanupAutoUpdate();
+
+    if (SUPPORTS_POPOVER && this._rootElement.matches(':popover-open')) {
+      this._rootElement.hidePopover();
+      this._rootElement.removeAttribute('popover');
     }
+
+    // Remove inline positioning styles
+    this._rootElement.style.removeProperty('top');
+    this._rootElement.style.removeProperty('left');
+    this._rootElement.style.removeProperty('display');
+
+    // Remove dynamic position attribute
+    this._component.removeAttribute(OVERLAY_CONSTANTS.attributes.POSITION_PLACEMENT);
+
+    OverlayComponent[overlayStack].delete(this._component);
   }
 
-  public locateTargetElement(id: string | null): HTMLElement | null {
+  public locateAnchorElement(id: string | null): HTMLElement | null {
     return locateTargetHeuristic(this._component, id);
   }
 
-  public positionElement({ targetElement, strategy, placement, hide, offset, shift, auto, flip }: IPositionElementConfig): void {
+  public positionElement({ anchorElement, strategy, placement, hide, offset, shift, auto, flip, boundary, boundaryElement, fallbackPlacements }: IPositionElementConfig): void {
     this.tryCleanupAutoUpdate();
+  
     const originalOffset = { ...offset };
+    const boundaryEl: Boundary = (boundaryElement ? boundaryElement : boundary ? this._component.closest(`#${boundary}`) : null) ?? 'clippingAncestors';
     
-    this._autoUpdateCleanup = autoUpdate(targetElement, this._rootElement, async () => {
+    this._autoUpdateCleanup = autoUpdate(anchorElement, this._rootElement, async () => {
       const offsetOptions = { ...originalOffset };
 
       // If we have an arrow element and an offset, we need to adjust the current offset to account for the arrow
@@ -100,18 +104,28 @@ export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IO
 
       const result = await positionElementAsync({
         element: this._rootElement,
-        targetElement,
+        targetElement: anchorElement,
         strategy,
         placement,
-        hide,
+        hide: hide !== 'off',
         shift,
+        shiftOptions: {
+          boundary: boundaryEl
+        },
         auto,
-        flip: !auto && flip,
+        autoOptions: {
+          boundary: boundaryEl
+        },
+        flip: !auto && flip !== 'off',
         flipOptions: {
-          fallbackAxisSideDirection: 'start'
+          boundary: boundaryEl,
+          fallbackAxisSideDirection: flip === 'auto' ? 'start' : undefined,
+          fallbackPlacements,
+          crossAxis: flip === 'cross' || flip === 'auto',
+          mainAxis: flip === 'main' || flip === 'auto'
         },
         arrowElement: this._component.arrowElement,
-        topLayer: !this._component.inline && CAN_USE_POPOVER,
+        topLayer: !this._component.inline && SUPPORTS_POPOVER,
         offset: Boolean(offsetOptions),
         offsetOptions,
         transform: false
@@ -144,101 +158,37 @@ export class OverlayAdapter extends BaseAdapter<IOverlayComponent> implements IO
     this._autoUpdateCleanup = undefined;
   }
 
-  public addPopoverLightDismissListener(listener: EventListener): void {
-    this._rootElement.addEventListener('toggle', listener);
-  }
-
-  public removePopoverLightDismissListener(listener: EventListener): void {
-    this._rootElement.removeEventListener('toggle', listener);
-  }
-
-  public addDialogLightDismissListener(listener: EventListener | (() => void)): void {
-    this.removeDialogLightDismissListener?.();
-    this._rootElement.addEventListener('cancel', listener);
-
-    const backdropClickListener = ({ clientX, clientY }: PointerEvent): void => {
-      const rect = this._rootElement.getBoundingClientRect();
-      if (clientY < rect.top || clientY > rect.bottom || clientX < rect.left || clientX > rect.right) {
-        (listener as () => void)();
-      }
-    };
-    this._rootElement.addEventListener('click', backdropClickListener);
-    this._dialogLightDismissCleanup = () => {
-      this._rootElement.removeEventListener('cancel', listener);
-      this._rootElement.removeEventListener('pointerup', backdropClickListener);
-    };
-  }
-
-  public removeDialogLightDismissListener(): void {
-    this._dialogLightDismissCleanup?.();
-    this._dialogLightDismissCleanup = undefined;
-  }
-
-  public addCustomLightDismissListener(listener: () => void): void {
-    this.removeCustomLightDismissListener?.();
-    this._initializeLightDismiss(listener);
-  }
-
-  public removeCustomLightDismissListener(): void {
-    this._lightDismissCleanup?.();
-    this._lightDismissCleanup = undefined;
-  }
-
-  public setDialog(value: boolean): void {
-    const newElement = value ? this._createDialogElement() : this._createDefaultElement();
-    replaceElement(this._rootElement, newElement);
-    this._rootElement = newElement;
-  }
-
-  private _createDialogElement(): HTMLDialogElement {
-    const dialogEl = document.createElement('dialog');
-    dialogEl.classList.add(OVERLAY_CONSTANTS.classes.OVERLAY);
-    dialogEl.setAttribute('part', 'container');
-    return dialogEl;
-  }
-
-  private _createDefaultElement(): HTMLElement {
-    const divEl = document.createElement('div');
-    divEl.classList.add(OVERLAY_CONSTANTS.classes.OVERLAY);
-    divEl.setAttribute('part', 'container');
-    return divEl;
-  }
-
-  /**
-   * Finds all open overlays in the document and returns `true` if our overlay is the most recently opened instance.
-   */
   public isMostRecentOpenOverlay(): boolean {
-    const allOpenOverlays = deepQuerySelectorAll(this._component.ownerDocument.body, OVERLAY_CONSTANTS.selectors.OPEN_OVERLAYS);
-    return allOpenOverlays[allOpenOverlays.length - 1] === this._component;
+    return Array.from(OverlayComponent[overlayStack]).at(-1) === this._component;
   }
 
-  /**
-   * Custom light dismiss. This attempts to mimic the default behavior of popover=auto for non-:top-layer elements.
-   * 
-   * @param listener The event listener to call when the overlay should be closed.
-   */
-  private _initializeLightDismiss(listener: EventListener): void {
+  public addLightDismissListener(listener: (reason: OverlayLightDismissReason) => void): void {
+    this.removeLightDismissListener();
+
+    // Listen for escape key globally
     const escapeListener = ({ key }: KeyboardEvent): void => {
       if (key === 'Escape') {
         if (this.isMostRecentOpenOverlay()) {
-          listener({ newState: 'closed' } as OverlayToggleEvent);
+          listener('escape');
         }
       }
     };
-    this._component.ownerDocument.addEventListener('keydown', escapeListener);
-
+    this._component.ownerDocument.addEventListener('keydown', escapeListener, { signal: this._lightDismissController.signal });
+  
+    // Listen for click-outside (any clicks not within our overlay surface or the anchor element)
     const pointerupListener = (evt: PointerEvent): void => {
       const composedPath = evt.composedPath();
-      const isExternal = !composedPath.includes(this._component.targetElement) && !composedPath.includes(this._rootElement);
+      const isExternal = !composedPath.includes(this._component.anchorElement) &&
+                         !composedPath.includes(this._rootElement);
       if (isExternal) {
-        listener({ newState: 'closed' } as OverlayToggleEvent);
+        listener('click');
       }
     };
-    this._component.ownerDocument.addEventListener('pointerup', pointerupListener, { capture: true });
+    this._component.ownerDocument.addEventListener('pointerup', pointerupListener, { capture: true, signal: this._lightDismissController.signal });
+  }
 
-    this._lightDismissCleanup = () => {
-      this._component.ownerDocument.removeEventListener('keydown', escapeListener);
-      this._component.ownerDocument.removeEventListener('pointerup', pointerupListener, { capture: true });
-    };
+  public removeLightDismissListener(): void {
+    this._lightDismissController.abort();
+    this._lightDismissController = new AbortController();
   }
 }
diff --git a/src/lib/overlay/overlay-constants.ts b/src/lib/overlay/overlay-constants.ts
index 35796e53a..0b0abe984 100644
--- a/src/lib/overlay/overlay-constants.ts
+++ b/src/lib/overlay/overlay-constants.ts
@@ -5,7 +5,7 @@ import { supportsPopover } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}overlay`;
 
 const observedAttributes = {
-  TARGET: 'target',
+  ANCHOR: 'anchor',
   OPEN: 'open',
   INLINE: 'inline',
   PLACEMENT: 'placement',
@@ -13,29 +13,33 @@ const observedAttributes = {
   HIDE: 'hide',
   STATIC: 'static',
   SHIFT: 'shift',
-  NO_FLIP: 'no-flip',
-  AUTO: 'auto',
-  DIALOG: 'dialog',
-  MODAL: 'modal'
-};
+  FLIP: 'flip',
+  BOUNDARY: 'boundary',
+  FALLBACK_PLACEMENTS: 'fallback-placements',
+  AUTO: 'auto'
+} as const;
 
 const attributes = {
   ...observedAttributes,
   POSITION_PLACEMENT: 'position-placement'
-};
+} as const;
 
 const classes = {
   OVERLAY: 'forge-overlay'
-};
+} as const;
 
 const selectors = {
-  ROOT: `.${classes.OVERLAY}`,
-  OPEN_OVERLAYS: `${elementName}[${attributes.OPEN}]`
-};
+  ROOT: `.${classes.OVERLAY}`
+} as const;
 
 const events = {
   LIGHT_DISMISS: `${elementName}-light-dismiss`
-};
+} as const;
+
+const defaults = {
+  HIDE: 'auto',
+  FLIP: 'auto'
+} as const;
 
 export const OVERLAY_CONSTANTS = {
   elementName,
@@ -43,22 +47,26 @@ export const OVERLAY_CONSTANTS = {
   attributes,
   classes,
   selectors,
-  events
+  events,
+  defaults
 };
 
-export const CAN_USE_POPOVER = supportsPopover();
+export const SUPPORTS_POPOVER = supportsPopover();
 
 export interface IOverlayOffset { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }
 
 export type OverlayPositionStrategy = 'absolute' | 'fixed';
 export type OverlayPlacement = PositionPlacement;
+export type OverlayHideState = 'auto' | 'off';
+export type OverlayFlipState = 'auto' | 'main' | 'cross' | 'off';
+export type OverlayLightDismissReason = 'click' | 'escape';
 
-export interface IOverlayToggleEventData {
+export interface IOverlayToggleEvent extends Event {
   newState: 'closed' | 'open';
   oldState: 'closed' | 'open';
 }
-
-export interface OverlayToggleEvent extends Event, IOverlayToggleEventData {}
 export interface OverlayLightDismissEventData {
-  type: 'modal' | 'modeless';
+  reason: OverlayLightDismissReason;
 }
+
+export const overlayStack = Symbol('overlayStack');
diff --git a/src/lib/overlay/overlay-foundation.ts b/src/lib/overlay/overlay-foundation.ts
index b3d160f06..c4ebf9e45 100644
--- a/src/lib/overlay/overlay-foundation.ts
+++ b/src/lib/overlay/overlay-foundation.ts
@@ -1,7 +1,7 @@
 
 import { IBaseOverlayFoundation, BaseOverlayFoundation } from './base/base-overlay-foundation';
 import { IOverlayAdapter } from './overlay-adapter';
-import { CAN_USE_POPOVER, IOverlayOffset, IOverlayToggleEventData, OverlayLightDismissEventData, OverlayPlacement, OverlayPositionStrategy, OverlayToggleEvent, OVERLAY_CONSTANTS } from './overlay-constants';
+import { SUPPORTS_POPOVER, IOverlayOffset, OverlayLightDismissEventData, OverlayPlacement, OverlayPositionStrategy, OVERLAY_CONSTANTS, OverlayFlipState, OverlayHideState, OverlayLightDismissReason } from './overlay-constants';
 
 export interface IOverlayFoundation extends IBaseOverlayFoundation {
   arrowElement: HTMLElement;
@@ -9,144 +9,139 @@ export interface IOverlayFoundation extends IBaseOverlayFoundation {
 }
 
 export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> implements IOverlayFoundation {
-  private _targetElement: HTMLElement;
-  private _target: string | null;
+  private _anchorElement: HTMLElement;
+  private _anchor: string | null;
   private _open = false;
   private _inline = false;
   private _placement: OverlayPlacement = 'bottom';
   private _positionStrategy: OverlayPositionStrategy = 'fixed';
   private _offset: IOverlayOffset = {};
   private _shift = false;
-  private _hide = true;
-  private _flip = true;
+  private _hide = OVERLAY_CONSTANTS.defaults.HIDE as OverlayHideState;
+  private _flip = OVERLAY_CONSTANTS.defaults.FLIP as OverlayFlipState;
+  private _boundary: string | null;
+  private _boundaryElement: HTMLElement | null;
+  private _fallbackPlacements: OverlayPlacement[] | null = null;
   private _auto = false;
   private _static = false;
-  private _dialog = false;
-  private _modal = false;
   private _arrowElement: HTMLElement;
   private _arrowElementOffset = 0;
-
-  private _lightDismissPopoverListener: EventListener;
-  private _lightDismissDialogListener: EventListener | (() => void);
-  private _lightDismissCustomListener: () => void;
+  private _lightDismissListener = this._onLightDismiss.bind(this);
 
   constructor(adapter: IOverlayAdapter) {
     super(adapter);
-    this._lightDismissPopoverListener = (evt: OverlayToggleEvent) => {
-      if (evt.newState === 'closed') {
-        this._onLightDismiss({ type: 'modeless' });
-      }
-    };
-    this._lightDismissDialogListener = (evt: Event | undefined) => {
-      evt?.preventDefault();
-      if (!evt || this._adapter.isMostRecentOpenOverlay()) {
-        this._onLightDismiss({ type: 'modal' });
-      }
-    };
-    this._lightDismissCustomListener = () => this._onLightDismiss({ type: 'modeless' });
   }
 
   public initialize(): void {
-    if (!this._targetElement && this._target) {
-      const target = this._adapter.locateTargetElement(this._target);
-      if (target) {
-        this._targetElement = target;
+    if (!this._anchorElement && this._anchor) {
+      const anchor = this._adapter.locateAnchorElement(this._anchor);
+      if (anchor) {
+        this._anchorElement = anchor;
       }
     }
+
+    if (!SUPPORTS_POPOVER) {
+      this.inline = true;
+    }
+
+    if (this._adapter.hasHostAttribute(OVERLAY_CONSTANTS.attributes.OPEN)) {
+      this._applyOpen(true);
+    }
   }
 
-  public disconnect(): void {
-    this._adapter.tryCleanupAutoUpdate();
-    this._removeLightDismissListener();
+  public destroy(): void {
+    if (this._open) {
+      this._hideOverlay();
+    }
   }
 
   public position(): void {
-    if (!this._open || !this._targetElement) {
+    if (!this._open || !this._anchorElement) {
       return;
     }
 
     this._adapter.positionElement({
-      targetElement: this._targetElement,
+      anchorElement: this._anchorElement,
       strategy: this._positionStrategy,
       placement: this._placement,
       hide: this._hide,
       offset: this._offset,
       shift: this._shift,
       flip: this._flip,
-      auto: this._auto
+      auto: this._auto,
+      boundary: this._boundary,
+      boundaryElement: this._boundaryElement,
+      fallbackPlacements: this._fallbackPlacements ?? undefined
     });
   }
 
-  private _onLightDismiss({ type }: OverlayLightDismissEventData): void {
-    const evt = new CustomEvent<OverlayLightDismissEventData>(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, { bubbles: false, cancelable: true, detail: { type } });
-    const isCancelled = this._adapter.dispatchHostEvent(evt);
-    if (isCancelled) {
+  private _onLightDismiss(reason: OverlayLightDismissReason): void {
+    const detail: OverlayLightDismissEventData = { reason };
+    const evt = new CustomEvent<OverlayLightDismissEventData>(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, { bubbles: false, cancelable: true, detail });
+    this._adapter.dispatchHostEvent(evt);
+    if (evt.defaultPrevented) {
       return;
     }
     this._applyOpen(false);
   }
 
-  protected _applyOpen(newState: boolean): void {
-    if (this._open === newState || !this._adapter.isConnected) {
+  protected _applyOpen(value: boolean): void {
+    if (!this._adapter.isConnected) {
       return;
     }
 
-    this._open = newState;
-    this._adapter.setOpen(this._open);
+    this._open = value;
 
     if (this._open) {
-      if (!this._static) {
-        this._applyLightDismissListener();
-      }
+      this._showOverlay();
     } else {
-      this._removeLightDismissListener();
+      this._hideOverlay();
     }
 
-    if (this._open && this._targetElement) {
-      this.position();
-    }
-    
     this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.OPEN, this._open);
   }
 
-  private _applyLightDismissListener(): void {
-    if (this._dialog && this._modal) {
-      this._adapter.addDialogLightDismissListener(this._lightDismissDialogListener);
-    } else {
-      if (this._inline && CAN_USE_POPOVER) {
-        this._adapter.addCustomLightDismissListener(this._lightDismissCustomListener);
-      } else {
-        this._adapter.addPopoverLightDismissListener(this._lightDismissPopoverListener);
-      }
+  private _showOverlay(): void {
+    this._adapter.show();
+      
+    if (!this._static) {
+      this._applyLightDismissListener();
     }
+
+    if (this._anchorElement) {
+      this.position();
+    }
+  }
+
+  private _hideOverlay(): void {
+    this._adapter.hide();
+    this._adapter.removeLightDismissListener();
   }
 
-  private _removeLightDismissListener(): void {
-    this._adapter.removePopoverLightDismissListener(this._lightDismissPopoverListener);
-    this._adapter.removeDialogLightDismissListener(this._lightDismissDialogListener);
-    this._adapter.removeCustomLightDismissListener();
+  private _applyLightDismissListener(): void {
+    this._adapter.addLightDismissListener(this._lightDismissListener);
   }
 
-  public get targetElement(): HTMLElement {
-    return this._targetElement;
+  public get anchorElement(): HTMLElement {
+    return this._anchorElement;
   }
-  public set targetElement(value: HTMLElement) {
-    this._targetElement = value;
+  public set anchorElement(value: HTMLElement) {
+    this._anchorElement = value;
   }
 
-  public get target(): string | null {
-    return this._target;
+  public get anchor(): string | null {
+    return this._anchor;
   }
-  public set target(value: string | null) {
-    if (this._target !== value) {
-      this._target = value;
-      if (this._adapter.isConnected && this._target) {
-        const target = this._adapter.locateTargetElement(this._target);
-        if (target) {
-          this._targetElement = target;
+  public set anchor(value: string | null) {
+    if (this._anchor !== value) {
+      this._anchor = value;
+      if (this._adapter.isConnected && this._anchor) {
+        const anchor = this._adapter.locateAnchorElement(this._anchor);
+        if (anchor) {
+          this._anchorElement = anchor;
         }
       }
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.TARGET, !!this._target, this._target as string);
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.ANCHOR, !!this._anchor, this._anchor as string);
     }
   }
 
@@ -165,6 +160,9 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
   }
   public set arrowElement(value: HTMLElement) {
     this._arrowElement = value;
+    if (this._open) {
+      this.position();
+    }
   }
 
   public get arrowElementOffset(): number {
@@ -172,13 +170,17 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
   }
   public set arrowElementOffset(value: number) {
     this._arrowElementOffset = value;
+    if (this._open) {
+      this.position();
+    }
   }
 
   public get inline(): boolean {
     return this._inline;
   }
   public set inline(value: boolean) {
-    value = Boolean(value);
+    // We force inline mode to true when the native Popover API isn't supported
+    value = SUPPORTS_POPOVER ? Boolean(value) : true;
     if (this._inline !== value) {
       this._inline = value;
       this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.INLINE, this._inline);
@@ -191,6 +193,9 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
   public set placement(value: OverlayPlacement) {
     if (this._placement !== value) {
       this._placement = value;
+      if (this._open) {
+        this.position();
+      }
       this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.PLACEMENT, this._placement);
     }
   }
@@ -201,6 +206,9 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
   public set positionStrategy(value: OverlayPositionStrategy) {
     if (this._positionStrategy !== value) {
       this._positionStrategy = value;
+      if (this._open) {
+        this.position();
+      }
       this._adapter.setHostAttribute(OVERLAY_CONSTANTS.attributes.POSITION_STRATEGY, this._positionStrategy);
     }
   }
@@ -210,6 +218,9 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
   }
   public set offset(value: IOverlayOffset) {
     this._offset = value;
+    if (this._open) {
+      this.position();
+    }
   }
 
   public get shift(): boolean {
@@ -219,18 +230,23 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
     value = Boolean(value);
     if (this._shift !== value) {
       this._shift = value;
+      if (this._open) {
+        this.position();
+      }
       this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.SHIFT, this._shift);
     }
   }
 
-  public get hide(): boolean {
+  public get hide(): OverlayHideState {
     return this._hide;
   }
-  public set hide(value: boolean) {
-    value = Boolean(value);
+  public set hide(value: OverlayHideState) {
     if (this._hide !== value) {
-      this._hide = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.HIDE, this._hide);
+      this._hide = value ?? OVERLAY_CONSTANTS.defaults.HIDE;
+      if (this._open) {
+        this.position();
+      }
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.HIDE, this._hide !== OVERLAY_CONSTANTS.defaults.HIDE, String(this._hide));
     }
   }
 
@@ -241,55 +257,74 @@ export class OverlayFoundation extends BaseOverlayFoundation<IOverlayAdapter> im
     value = Boolean(value);
     if (this._static !== value) {
       this._static = value;
-      
+  
       if (this._static) {
-        this._removeLightDismissListener();
+        this._adapter.removeLightDismissListener();
+      } else if (this._open) {
+        this._applyLightDismissListener();
       }
 
       this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.STATIC, this._static);
     }
   }
 
-  public get flip(): boolean {
+  public get flip(): OverlayFlipState {
     return this._flip;
   }
-  public set flip(value: boolean) {
-    value = Boolean(value);
+  public set flip(value: OverlayFlipState) {
     if (this._flip !== value) {
-      this._flip = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.NO_FLIP, !this._flip);
+      this._flip = value ?? OVERLAY_CONSTANTS.defaults.FLIP;
+      if (this._open) {
+        this.position();
+      }
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.FLIP, this._flip !== OVERLAY_CONSTANTS.defaults.FLIP, String(this._flip));
     }
   }
 
-  public get auto(): boolean {
-    return this._auto;
+  public get boundary(): string | null {
+    return this._boundary;
   }
-  public set auto(value: boolean) {
-    value = Boolean(value);
-    if (this._auto !== value) {
-      this._auto = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.AUTO, this._auto);
+  public set boundary(value: string | null) {
+    if (this._boundary !== value) {
+      this._boundary = value;
+      if (this._open) {
+        this.position();
+      }
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.BOUNDARY, !!this._boundary, this._boundary as string);
     }
   }
 
-  public get dialog(): boolean {
-    return this._dialog;
+  public get boundaryElement(): HTMLElement | null {
+    return this._boundaryElement;
   }
-  public set dialog(value: boolean) {
-    if (this._dialog !== value) {
-      this._dialog = value;
-      this._adapter.setDialog(this._dialog);
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.DIALOG, this._dialog);
+  public set boundaryElement(value: HTMLElement | null) {
+    this._boundaryElement = value;
+    if (this._open) {
+      this.position();
+    }
+  }
+
+  public get fallbackPlacements(): OverlayPlacement[] | null {
+    return this._fallbackPlacements;
+  }
+  public set fallbackPlacements(value: OverlayPlacement[] | null) {
+    this._fallbackPlacements = value;
+    if (this._open) {
+      this.position();
     }
   }
 
-  public get modal(): boolean {
-    return this._modal;
+  public get auto(): boolean {
+    return this._auto;
   }
-  public set modal(value: boolean) {
-    if (this._modal !== value) {
-      this._modal = value;
-      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.MODAL, this._modal);
+  public set auto(value: boolean) {
+    value = Boolean(value);
+    if (this._auto !== value) {
+      this._auto = value;
+      if (this._open) {
+        this.position();
+      }
+      this._adapter.toggleHostAttribute(OVERLAY_CONSTANTS.attributes.AUTO, this._auto);
     }
   }
 }
diff --git a/src/lib/overlay/overlay.scss b/src/lib/overlay/overlay.scss
index 8c69ebf02..fc8a32877 100644
--- a/src/lib/overlay/overlay.scss
+++ b/src/lib/overlay/overlay.scss
@@ -38,18 +38,15 @@
 // Open
 //
 
-:host([open]) {
-  .forge-overlay:is(:popover-open,:open,:modal) {
+:host([open][inline]) {
+  .forge-overlay {
     @include open;
   }
 }
 
-//
-// <dialog>
-//
-
-:host([dialog]) {
-  dialog.forge-overlay::backdrop {
-    @include dialog-backdrop;
+:host([open]) {
+  .forge-overlay:popover-open {
+    @include open;
   }
 }
+
diff --git a/src/lib/overlay/overlay.test.ts b/src/lib/overlay/overlay.test.ts
new file mode 100644
index 000000000..fb7e75b9e
--- /dev/null
+++ b/src/lib/overlay/overlay.test.ts
@@ -0,0 +1,622 @@
+import { nothing } from 'lit';
+import { expect } from '@esm-bundle/chai';
+import { spy } from 'sinon';
+import { sendMouse, sendKeys } from '@web/test-runner-commands';
+import { elementUpdated, fixture, html } from '@open-wc/testing';
+import { IOverlayComponent, OverlayComponent } from './overlay';
+import { OverlayFlipState, OverlayHideState, overlayStack, OVERLAY_CONSTANTS } from './overlay-constants';
+
+import './overlay';
+
+describe('Overlay', () => {
+  describe('defaults', () => {
+    it('should be accessible', async () => {
+      const harness = await createFixture();
+
+      await expect(harness.overlayElement).to.be.accessible();
+    });
+
+    it('should not be open by default', async () => {
+      const harness = await createFixture();
+
+      expect(harness.isOpen).to.be.false;
+    });
+
+    it('should have expected default state', async () => {
+      const harness = await createFixture();
+
+      expect(harness.overlayElement.anchorElement).to.equal(harness.anchorElement);
+      expect(harness.overlayElement.anchor).to.equal('test-anchor');
+      expect(harness.overlayElement.open).to.be.false;
+      expect(harness.overlayElement.inline).to.be.false;
+      expect(harness.overlayElement.placement).to.equal('bottom');
+      expect(harness.overlayElement.positionStrategy).to.equal('fixed');
+      expect(harness.overlayElement.offset).to.deep.equal({});
+      expect(harness.overlayElement.shift).to.be.false;
+      expect(harness.overlayElement.hide).to.equal('auto' as OverlayHideState);
+      expect(harness.overlayElement.static).to.be.false;
+      expect(harness.overlayElement.flip).to.equal('auto' as OverlayFlipState);
+      expect(harness.overlayElement.auto).to.be.false;
+    });
+  });
+
+  describe('overlay stack', () => {
+    it('should update overlay stack when open', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.open = true;
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([harness.overlayElement]);
+
+      harness.overlayElement.open = false;
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([]);
+    });
+
+    it('should remove from overlay stack when removed from DOM', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.open = true;
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([harness.overlayElement]);
+
+      harness.overlayElement.remove();
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([]);
+    });
+
+    it('should remove from overlay stack when light dismissed', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.open = true;
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([harness.overlayElement]);
+
+      await harness.clickOutside();
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([]);
+    });
+
+    it('should update overlay stack with nested overlays', async () => {
+      const { parentHarness, nestedHarness } = await createNestedFixture();
+
+      parentHarness.overlayElement.open = true;
+      await elementUpdated(parentHarness.overlayElement);
+
+      nestedHarness.overlayElement.open = true;
+      await elementUpdated(nestedHarness.overlayElement);
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([parentHarness.overlayElement, nestedHarness.overlayElement]);
+
+      nestedHarness.pressEscapeKey();
+      await elementUpdated(nestedHarness.overlayElement);
+
+      expect(Array.from(OverlayComponent[overlayStack])).to.deep.equal([parentHarness.overlayElement]);
+    });
+  });
+
+  describe('opened by default', () => {
+    it('should set open by default when set statically', async () => {
+      const harness = await createFixture({ open: true });
+
+      expect(harness.isOpen).to.be.true;
+      expect(harness.rootElement.hasAttribute('popover')).to.be.true;
+      expect(harness.rootElement.getAttribute('popover')).to.equal('manual');
+      expect(harness.isPopoverOpen).to.be.true;
+    });
+
+    it('should set open by default when set statically with inline', async () => {
+      const harness = await createFixture({ open: true, inline: true });
+
+      expect(harness.isOpen).to.be.true;
+      expect(harness.overlayElement.inline).to.be.true;
+      expect(harness.overlayElement.hasAttribute(OVERLAY_CONSTANTS.attributes.INLINE)).to.be.true;
+      expect(harness.isInlineOpen).to.be.true;
+    });
+  });
+  
+  describe('show/hide', () => {
+    it('should set open', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+    });
+
+    it('should hide after being open', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+      await elementUpdated(harness.overlayElement);
+
+      harness.overlayElement.open = false;
+
+      expect(harness.isOpen).to.be.false;
+    });
+
+    it('should set open via attribute', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.setAttribute('open', '');
+
+      expect(harness.isOpen).to.be.true;
+    });
+
+    it('should use native popover API by default', async () => {
+      const harness = await createFixture();
+
+      expect(harness.isPopoverOpen).to.be.false;
+
+      harness.overlayElement.open = true;
+
+      expect(harness.rootElement.hasAttribute('popover')).to.be.true;
+      expect(harness.rootElement.getAttribute('popover')).to.equal('manual');
+      expect(harness.isPopoverOpen).to.be.true;
+    });
+
+    it('should open inline', async () => {
+      const harness = await createFixture({ inline: true });
+
+      harness.overlayElement.open = true;
+
+      expect(harness.overlayElement.inline).to.be.true;
+      expect(harness.overlayElement.hasAttribute(OVERLAY_CONSTANTS.attributes.INLINE)).to.be.true;
+      expect(harness.isInlineOpen).to.be.true;
+    });
+  });
+
+  describe('light dismiss', () => {
+    it('should light dismiss when clicking outside of the overlay', async () => {
+      const harness = await createFixture();
+      const lightDismissSpy = spy();
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+
+      await harness.clickOutside();
+
+      expect(harness.isOpen).to.be.false;
+      expect(lightDismissSpy).to.have.been.calledOnce;
+    });
+
+    it('should not light dismiss when clicking inside of the overlay', async () => {
+      const harness = await createFixture();
+      const lightDismissSpy = spy();
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+      
+      expect(harness.isOpen).to.be.true;
+      
+      await elementUpdated(harness.overlayElement);
+      await harness.clickOverlay();
+
+      expect(harness.isOpen).to.be.true;
+      expect(lightDismissSpy).to.not.have.been.called;
+    });
+
+    it('should light dismiss when clicking outside of the overlay with inline', async () => {
+      const harness = await createFixture({ inline: true });
+      const lightDismissSpy = spy();
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+
+      await harness.clickOutside();
+
+      expect(harness.isOpen).to.be.false;
+      expect(lightDismissSpy).to.have.been.calledOnce;
+    });
+
+    it('should light dismiss when pressing escape key', async () => {
+      const harness = await createFixture();
+      const lightDismissSpy = spy();
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+
+      await harness.pressEscapeKey();
+
+      expect(harness.isOpen).to.be.false;
+      expect(lightDismissSpy).to.have.been.calledOnce;
+    });
+
+    it('should light dismiss when pressing escape key with inline', async () => {
+      const harness = await createFixture({ inline: true });
+      const lightDismissSpy = spy();
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+
+      await harness.pressEscapeKey();
+
+      expect(harness.isOpen).to.be.false;
+      expect(lightDismissSpy).to.have.been.calledOnce;
+    });
+
+    it('should not light dismiss when static', async () => {
+      const harness = await createFixture({ inline: true, isStatic: true });
+      const lightDismissSpy = spy();
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+
+      await harness.clickOutside();
+
+      expect(harness.isOpen).to.be.true;
+      expect(lightDismissSpy).to.not.have.been.called;
+    });
+
+    it('should cancel light dismiss event', async () => {
+      const harness = await createFixture();
+      const lightDismissSpy = spy(evt => evt.preventDefault());
+      harness.overlayElement.addEventListener(OVERLAY_CONSTANTS.events.LIGHT_DISMISS, lightDismissSpy);
+
+      harness.overlayElement.open = true;
+
+      expect(harness.isOpen).to.be.true;
+
+      await harness.clickOutside();
+
+      expect(harness.isOpen).to.be.true;
+      expect(lightDismissSpy).to.have.been.calledOnce;
+    });
+
+    it('should hide top-most overlay via click outside on parent overlay when nested overlays are open', async () => {
+      const { parentHarness, nestedHarness } = await createNestedFixture();
+
+      parentHarness.overlayElement.open = true;
+      nestedHarness.overlayElement.open = true;
+
+      expect(parentHarness.isOpen).to.be.true;
+      expect(nestedHarness.isOpen).to.be.true;
+
+      await elementUpdated(parentHarness.overlayElement);
+      await parentHarness.clickOverlay();
+
+      expect(parentHarness.isOpen).to.be.true;
+      expect(nestedHarness.isOpen).to.be.false;
+    });
+
+    it('should hide top-most overlay via escape key when nested overlays are open', async () => {
+      const { parentHarness, nestedHarness } = await createNestedFixture();
+
+      parentHarness.overlayElement.open = true;
+      nestedHarness.overlayElement.open = true;
+
+      expect(parentHarness.isOpen).to.be.true;
+      expect(nestedHarness.isOpen).to.be.true;
+
+      await nestedHarness.pressEscapeKey();
+
+      expect(parentHarness.isOpen).to.be.true;
+      expect(nestedHarness.isOpen).to.be.false;
+    });
+  });
+
+  describe('positioning', () => {
+    it('should position the overlay to default side', async () => {
+      const harness = await createFixture({ open: true });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('bottom');
+    });
+
+    it('should position the overlay to the top side', async () => {
+      const harness = await createFixture({ open: true, placement: 'top' });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('top');
+    });
+
+    it('should position the overlay to the right side', async () => {
+      const harness = await createFixture({ open: true, placement: 'right' });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('right');
+    });
+
+    it('should position the overlay to the left side', async () => {
+      const harness = await createFixture({ open: true, placement: 'left' });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('left');
+    });
+
+    it('should set shift', async () => {
+      const harness = await createFixture({ open: true, shift: true });
+
+      expect(harness.overlayElement.shift).to.be.true;
+      expect(harness.overlayElement.hasAttribute(OVERLAY_CONSTANTS.attributes.SHIFT)).to.be.true;
+    });
+
+    it('should set position strategy', async () => {
+      const harness = await createFixture({ open: true, positionStrategy: 'absolute' });
+
+      expect(harness.overlayElement.positionStrategy).to.equal('absolute');
+      expect(harness.overlayElement.hasAttribute(OVERLAY_CONSTANTS.attributes.POSITION_STRATEGY)).to.be.true;
+    });
+
+    it('should set boundary', async () => {
+      const harness = await createFixture({ open: true, boundary: 'test-boundary' });
+
+      expect(harness.overlayElement.boundary).to.equal('test-boundary');
+      expect(harness.overlayElement.hasAttribute(OVERLAY_CONSTANTS.attributes.BOUNDARY)).to.be.true;
+    });
+
+    it('should set boundary element', async () => {
+      const harness = await createFixture();
+      harness.overlayElement.boundaryElement = document.body;
+
+      expect(harness.overlayElement.boundaryElement).to.equal(document.body);
+    });
+
+    it('should set fallback placements via attribute', async () => {
+      const harness = await createFixture();
+        harness.overlayElement.setAttribute(OVERLAY_CONSTANTS.attributes.FALLBACK_PLACEMENTS, 'top,bottom');
+
+      expect(harness.overlayElement.fallbackPlacements).to.deep.equal(['top', 'bottom']);
+      expect(harness.overlayElement.getAttribute(OVERLAY_CONSTANTS.attributes.FALLBACK_PLACEMENTS)).to.equal('top,bottom');
+    });
+
+    it('should set fallback placements via property', async () => {
+      const harness = await createFixture();
+      harness.overlayElement.fallbackPlacements = ['top', 'bottom'];
+
+      expect(harness.overlayElement.fallbackPlacements).to.deep.equal(['top', 'bottom']);
+    });
+
+    it('should set fallback placements to null when removing attribute', async () => {
+      const harness = await createFixture({ fallbackPlacements: 'top,bottom' });
+
+      expect(harness.overlayElement.fallbackPlacements).to.deep.equal(['top', 'bottom']);
+
+      harness.overlayElement.removeAttribute(OVERLAY_CONSTANTS.attributes.FALLBACK_PLACEMENTS);
+
+      expect(harness.overlayElement.fallbackPlacements).to.be.null;
+    });
+
+    it('should set auto', async () => {
+      const harness = await createFixture({ open: true, auto: true });
+
+      expect(harness.overlayElement.auto).to.be.true;
+      expect(harness.overlayElement.hasAttribute(OVERLAY_CONSTANTS.attributes.AUTO)).to.be.true;
+    });
+
+    it('should call position() manually', async () => {
+      const harness = await createFixture({ open: true });
+      const adapterPositionSpy = spy(harness.overlayElement['_foundation']['_adapter'], 'positionElement');
+
+      harness.overlayElement.position();
+
+      expect(harness.actualPositionPlacement).to.equal('bottom');
+      expect(adapterPositionSpy).to.have.been.calledOnce;
+    });
+
+    it('should not position element if not open', async () => {
+      const harness = await createFixture();
+
+      harness.overlayElement.position();
+
+      expect(harness.actualPositionPlacement).to.equal('');
+    });
+  });
+
+  describe('flip', () => {
+    it('should flip the overlay to the opposite side when not enough room', async () => {
+      const harness = await createFixture({ open: true, placement: 'left', content: 'This is a really long string that should cause the overlay to flip to the right side.' });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('right');
+    });
+
+    it('should not flip the overlay to the opposite side when not enough room and flip is false', async () => {
+      const harness = await createFixture({ open: true, placement: 'left', flip: 'off', content: 'This is a really long string that should cause the overlay to flip to the right side.' });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('left');
+    });
+
+    it('should only flip on main axis', async () => {
+      const harness = await createFixture({ open: true, placement: 'left', flip: 'main', content: 'This is a really long string that should cause the overlay to flip to the right side.' });
+
+      await harness.positionUpdated();
+
+      expect(harness.actualPositionPlacement).to.equal('right');
+    });
+  });
+
+  describe('hide', () => {
+    it('should hide when anchor element is not visible', async () => {
+      const harness = await createFixture({ open: true });
+
+      expect(harness.isOpen).to.be.true;
+
+      harness.anchorElement.style.marginRight = '9999px';
+
+      await harness.positionUpdated();
+
+      expect(harness.rootElement.style.display).to.equal('none');
+    });
+
+    it('should not hide when anchor element is not visible and hide is false', async () => {
+      const harness = await createFixture({ open: true, hide: 'off' });
+
+      expect(harness.overlayElement.hide).to.equal('off');
+      expect(harness.overlayElement.getAttribute(OVERLAY_CONSTANTS.attributes.HIDE)).to.equal('off');
+      expect(harness.isOpen).to.be.true;
+
+      harness.anchorElement.style.marginRight = '9999px';
+
+      await harness.positionUpdated();
+
+      expect(harness.rootElement.style.display).to.not.equal('none');
+    });
+  });
+
+  describe('arrow', () => {
+    it('should position arrow element', async () => {
+      const harness = await createFixture();
+      const arrowEl = document.createElement('div');
+      harness.overlayElement.arrowElement = arrowEl;
+
+      harness.overlayElement.open = true;
+      harness.overlayElement.arrowElementOffset = arrowEl.offsetWidth / 2;
+
+      await harness.positionUpdated();
+
+      expect(arrowEl.style.left).not.to.equal('');
+      expect(arrowEl.style.top).to.equal('');
+    });
+  });
+});
+
+class OverlayHarness {
+  constructor(public overlayElement: IOverlayComponent, public anchorElement: HTMLButtonElement) {}
+
+  public get rootElement(): HTMLElement {
+    return this.overlayElement.shadowRoot?.querySelector(OVERLAY_CONSTANTS.selectors.ROOT) as HTMLElement;
+  }
+
+  public get actualPositionPlacement(): string {
+    return this.overlayElement.getAttribute(OVERLAY_CONSTANTS.attributes.POSITION_PLACEMENT) ?? '';
+  }
+
+  public get isOpen(): boolean {
+    return this.isPopoverOpen || this.isInlineOpen;
+  }
+
+  public get isPopoverOpen(): boolean {
+    return this.overlayElement.open && this.rootElement.hasAttribute('popover') && this.rootElement.matches(':popover-open');
+  }
+
+  public get isInlineOpen(): boolean {
+    const { display } = getComputedStyle(this.rootElement);
+    return this.overlayElement.open && !this.isPopoverOpen && display !== 'none';
+  }
+
+  public positionUpdated(): Promise<IOverlayComponent> {
+    return elementUpdated(this.overlayElement);
+  }
+
+  public async clickOutside(): Promise<void> {
+    const { x, y, height, width } = this.rootElement.getBoundingClientRect();
+    const mouseX = Math.round(x + width * 2);
+    const mouseY = Math.round(y + height * 2);
+    await sendMouse({ type: 'click', position: [mouseX, mouseY], button: 'left' });
+  }
+
+  public async clickOverlay(): Promise<void> {
+    const { x, y } = this.rootElement.getBoundingClientRect();
+    const mouseX = Math.round(x);
+    const mouseY = Math.round(y);
+    await sendMouse({ type: 'click', position: [mouseX, mouseY], button: 'left' });
+  }
+
+  public async pressEscapeKey(): Promise<void> {
+    await sendKeys({ press: 'Escape' });
+  }
+}
+
+interface IOverlayFixtureConfig {
+  open?: boolean;
+  inline?: boolean;
+  isStatic?: boolean;
+  flip?: OverlayFlipState | null;
+  hide?: OverlayHideState | null;
+  placement?: string | null;
+  content?: string;
+  boundary?: string | null;
+  fallbackPlacements?: string | null;
+  positionStrategy?: string | null;
+  shift?: boolean;
+  auto?: boolean;
+}
+
+async function createFixture({
+  open = false,
+  inline = false,
+  isStatic = false,
+  flip = null,
+  hide = null,
+  placement = null,
+  content = 'Test',
+  boundary = null,
+  fallbackPlacements = null,
+  positionStrategy = null,
+  shift = false,
+  auto = false
+}: IOverlayFixtureConfig = {}): Promise<OverlayHarness> {
+  const container = await fixture(html`
+    <div style="display: flex; justify-content: center; align-items: center; height: 300px; width: 300px;" id="test-boundary">
+      <button type="button" id="test-anchor">Overlay Anchor</button>
+      <forge-overlay
+        anchor="test-anchor"
+        ?open=${open}
+        ?inline=${inline}
+        ?static=${isStatic}
+        flip=${flip ?? nothing}
+        hide=${hide ?? nothing}
+        ?shift=${shift}
+        ?auto=${auto}
+        placement=${placement ?? nothing}
+        boundary=${boundary ?? nothing}
+        fallback-placements=${fallbackPlacements ?? nothing}
+        position-strategy=${positionStrategy ?? nothing}>
+        <div style="white-space: nowrap;">${content}</div>
+      </forge-overlay>
+    </div>
+  `);
+
+  const button = container.querySelector('button') as HTMLButtonElement;
+  const overlay = container.querySelector('forge-overlay') as IOverlayComponent;
+
+  return new OverlayHarness(overlay, button);
+}
+
+async function createNestedFixture({ inline = false } = {}): Promise<{ parentHarness: OverlayHarness, nestedHarness: OverlayHarness }> {
+  const container = await fixture(html`
+    <div style="display: flex; justify-content: center; align-items: center; height: 300px; width: 300px;" id="test-boundary">
+      <button type="button" id="test-anchor">Overlay Anchor</button>
+
+      <forge-overlay anchor="test-anchor" ?inline=${inline}>
+        <div style="white-space: nowrap; border: 1px solid black;">
+          <span>Parent</span>
+          <button type="button" id="test-nested-anchor">Nested overlay anchor</button>
+          <forge-overlay anchor="test-nested-anchor" ?inline=${inline}>
+            <div style="border: 1px solid black;">Nested</div>
+          </forge-overlay>
+        </div>
+      </forge-overlay>
+    </div>
+  `);
+
+  const parentAnchor = container.querySelector('#test-anchor') as HTMLButtonElement;
+  const nestedAnchor = container.querySelector('#test-nested-anchor') as HTMLButtonElement;
+  const parentOverlay = container.querySelector('forge-overlay') as IOverlayComponent;
+  const nestedOverlay = parentOverlay.querySelector('forge-overlay') as IOverlayComponent;
+
+  return {
+    parentHarness: new OverlayHarness(parentOverlay, parentAnchor),
+    nestedHarness: new OverlayHarness(nestedOverlay, nestedAnchor)
+  };
+}
diff --git a/src/lib/overlay/overlay.ts b/src/lib/overlay/overlay.ts
index f2092e211..9ed4cdfcd 100644
--- a/src/lib/overlay/overlay.ts
+++ b/src/lib/overlay/overlay.ts
@@ -1,6 +1,6 @@
 import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
 import { OverlayAdapter } from './overlay-adapter';
-import { OverlayLightDismissEventData, OVERLAY_CONSTANTS } from './overlay-constants';
+import { OverlayLightDismissEventData, overlayStack, OVERLAY_CONSTANTS } from './overlay-constants';
 import { OverlayFoundation } from './overlay-foundation';
 import { BaseOverlay, IBaseOverlay } from './base/base-overlay';
 
@@ -25,45 +25,40 @@ declare global {
 /**
  * @tag forge-overlay
  * 
- * @summary Overlays are used to render content in a floating element that is anchored around a target element.
+ * @summary Overlays are used to render content in a floating element that is anchored around a anchor element.
  * 
  * @description
  * An overlay is a primitive component that does not provide any visual styles. Its only
  * purpose is to render slotted content in a floating element. The element can be positioned
- * manually, or configured to anchor itself with smart positioning around a target element.
+ * manually, or configured to anchor itself with smart positioning around an anchor element.
  * 
  * @property {boolean} open - Whether or not the overlay is open.
  * @property {boolean} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
- * @property {HTMLElement} targetElement - The element to anchor the overlay to.
- * @property {HTMLElement} target - The id of the element to anchor the overlay to.
+ * @property {HTMLElement} anchorElement - The element to anchor the overlay to.
+ * @property {HTMLElement} anchor - The id of the element to anchor the overlay to.
  * @property {HTMLElement} arrowElement - The element to use as the arrow for the overlay.
  * @property {number} arrowElementOffset - The offset to apply to the arrow element.
- * @property {OverlayPlacement} placement - The placement of the overlay relative to the target element.
+ * @property {OverlayPlacement} placement - The placement of the overlay relative to the anchor element.
  * @property {OverlayPositionStrategy} positionStrategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
- * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the target element.
- * @property {boolean} shift - Whether or not the target element should shift along the side of the overlay when scrolling.
- * @property {boolean} hide - Whether or not the overlay should hide itself when the target element is out of view.
+ * @property {IOverlayPosition} offset - The offset to apply to the overlay position relative to the anchor element.
+ * @property {boolean} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
+ * @property {boolean} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
  * @property {boolean} static - Whether or not the overlay handles light dismiss itself or not.
  * @property {boolean} flip - Whether or not the overlay should flip to the opposite placement when not enough room.
  * @property {boolean} auto - Whether or not the overlay should automatically attempt to locate the best placement.
- * @property {boolean} dialog - Whether or not the overlay is intended to be a dialog semantically. Default is `false`.
- * @property {boolean} modal - Only applies when `dialog` is `true`. Whether or not the dialog is modal. Default is `false`.
  * 
  * @attribute {boolean} open - Whether or not the overlay is open.
  * @attribute {boolean} inline - Whether or not the overlay should be rendered inline (not in the :top-layer).
- * @attribute {OverlayPlacement} placement - The placement of the overlay relative to the target element.
+ * @attribute {OverlayPlacement} placement - The placement of the overlay relative to the anchor element.
  * @attribute {OverlayPositionStrategy} position-strategy - The positioning strategy to use for the overlay. Valid values are `'fixed'` and `'absolute'`.
- * @attribute {boolean} hide - Whether or not the overlay should hide itself when the target element is out of view.
+ * @attribute {boolean} hide - Whether or not the overlay should hide itself when the anchor element is out of view.
  * @attribute {boolean} static - Whether or not the overlay handles light dismiss itself or not.
- * @attribute {boolean} shift - Whether or not the target element should shift along the side of the overlay when scrolling.
+ * @attribute {boolean} shift - Whether or not the anchor element should shift along the side of the overlay when scrolling.
  * @attribute {boolean} no-flip - Tells the overlay not to flip to the opposite placement when not enough room.
  * @attribute {boolean} auto - Whether or not the overlay should automatically attempt to locate the best placement.
- * @attribute {string} position-placement - The placement of the overlay around the target element **after** dynamic positioning. This is a read-only attribute that is only available when open.
- * @attribute {boolean} dialog - Whether or not the overlay is intended to be a dialog semantically. Default is `false`.
- * @attribute {boolean} modal - Only applies when `dialog` is `true`. Whether or not the dialog is modal. Default is `false`.
+ * @attribute {string} position-placement - The placement of the overlay around the anchor element **after** dynamic positioning. This is a read-only attribute that is only available when open.
  * 
- * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-toggle - Fires when the overlay is toggled.
- * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-beforetoggle - Fires before the overlay is toggled.
+ * @event {CustomEvent<OverlayToggleEventData>} forge-overlay-light-dismiss - Dispatches when the overlay is light dismissed via the escape key or clicking outside the overlay.
  * 
  * @cssproperty --forge-overlay-position - The `position` of the overlay.
  * @cssproperty --forge-overlay-z-index - The `z-index` of the overlay. Defaults to the `popup` range.
@@ -78,9 +73,12 @@ declare global {
   name: OVERLAY_CONSTANTS.elementName
 })
 export class OverlayComponent extends BaseOverlay<OverlayFoundation> implements IOverlayComponent {
-  public static get observedAttributes(): string[] {
-    return Object.values(OVERLAY_CONSTANTS.observedAttributes);
-  }
+  public static readonly observedAttributes = Object.values(OVERLAY_CONSTANTS.observedAttributes);
+
+  /**
+   * Contains all the overlays that are currently open.
+   */
+  public static readonly [overlayStack]: Set<IOverlayComponent> = new Set();
 
   constructor() {
     super();
@@ -93,7 +91,7 @@ export class OverlayComponent extends BaseOverlay<OverlayFoundation> implements
   }
 
   public disconnectedCallback(): void {
-    this._foundation.disconnect();
+    this._foundation.destroy();
   }
 
   @FoundationProperty()
diff --git a/src/lib/popover/popover-adapter.ts b/src/lib/popover/popover-adapter.ts
index 9f366042d..76414d292 100644
--- a/src/lib/popover/popover-adapter.ts
+++ b/src/lib/popover/popover-adapter.ts
@@ -33,22 +33,22 @@ export class PopoverAdapter extends OverlayAwareAdapter<IPopoverComponent> imple
   }
 
   public initializeTargetElement(): void {
-    if (this._component.targetElement) {
-      this._overlayElement.targetElement = this._component.targetElement;
+    if (this._component.anchorElement) {
+      this._overlayElement.anchorElement = this._component.anchorElement;
     } else {
-      const targetEl = this._getTargetElement(this._component.target);
+      const targetEl = this._getTargetElement(this._component.anchor);
       if (targetEl) {
-        this._overlayElement.targetElement = targetEl;
+        this._overlayElement.anchorElement = targetEl;
       }
     }
   }
 
   public addTargetListener(type: string, listener: EventListener): void {
-    this._overlayElement.targetElement?.addEventListener(type, listener);
+    this._overlayElement.anchorElement?.addEventListener(type, listener);
   }
 
   public removeTargetListener(type: string, listener: EventListener): void {
-    this._overlayElement.targetElement?.removeEventListener(type, listener);
+    this._overlayElement.anchorElement?.removeEventListener(type, listener);
   }
 
   public addSurfaceListener(type: string, listener: EventListener): void {
diff --git a/src/lib/popover/popover-constants.ts b/src/lib/popover/popover-constants.ts
index 23ee6ac13..e11b52ed4 100644
--- a/src/lib/popover/popover-constants.ts
+++ b/src/lib/popover/popover-constants.ts
@@ -1,5 +1,4 @@
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { IOverlayToggleEventData } from '../overlay';
 
 const elementName = `${COMPONENT_NAME_PREFIX}popover`;
 
@@ -39,4 +38,7 @@ export const POPOVER_CONSTANTS = {
 export type PopoverAnimationType = 'none' | 'zoom' | 'slide' | 'fade';
 export type PopoverTriggerType = 'click' | 'hover' | 'focus';
 
-export interface PopoverToggleEventData extends IOverlayToggleEventData {}
+export interface IPopoverToggleEventData {
+  newState: 'closed' | 'open';
+  oldState: 'closed' | 'open';
+}
diff --git a/src/lib/popover/popover-foundation.ts b/src/lib/popover/popover-foundation.ts
index 2ba434881..074575456 100644
--- a/src/lib/popover/popover-foundation.ts
+++ b/src/lib/popover/popover-foundation.ts
@@ -1,7 +1,7 @@
 import { IOverlayAwareFoundation, OverlayAwareFoundation } from '../overlay/base/overlay-aware-foundation';
 import { OverlayLightDismissEventData } from '../overlay/overlay-constants';
 import { IPopoverAdapter } from './popover-adapter';
-import { PopoverAnimationType, PopoverToggleEventData, PopoverTriggerType, POPOVER_CONSTANTS } from './popover-constants';
+import { PopoverAnimationType, IPopoverToggleEventData, PopoverTriggerType, POPOVER_CONSTANTS } from './popover-constants';
 
 export interface IPopoverFoundation extends IOverlayAwareFoundation {
   arrow: boolean;
@@ -55,21 +55,21 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
   public override initialize(): void {
     super.initialize();
 
-    if (!this._adapter.overlayElement.targetElement) {
+    if (!this._adapter.overlayElement.anchorElement) {
       this._adapter.initializeTargetElement();
       this._initializeTriggerListeners();
     }
   }
 
-  public override disconnect(): void {
-    super.disconnect();
+  public override destroy(): void {
+    super.destroy();
     this._removeTriggerListeners();
   }
 
   protected _onOverlayLightDismiss(evt: CustomEvent<OverlayLightDismissEventData>): void {
     evt.preventDefault();
 
-    const isCancelled = this._dispatchBeforetoggleEvent({ cancelable: evt.detail.type === 'modal' });
+    const isCancelled = this._dispatchBeforetoggleEvent();
     if (isCancelled) {
       return;
     }
@@ -78,7 +78,7 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
     // this._adapter.toggleHostAttribute(POPOVER_CONSTANTS.attributes.OPEN, this.open);
     this._dispatchToggleEvent();
 
-    if (this._previouslyFocusedElement && this._adapter.hasFocus()) {
+    if (evt.detail.reason === 'escape' && this._previouslyFocusedElement && this._adapter.hasFocus()) {
       this._previouslyFocusedElement.focus();
     }
   }
@@ -122,19 +122,19 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
     }
   }
 
-  private _dispatchBeforetoggleEvent({ cancelable = false } = {}): boolean {
-    return this._adapter.dispatchHostEvent(new CustomEvent<PopoverToggleEventData>(POPOVER_CONSTANTS.events.BEFORETOGGLE, {
+  private _dispatchBeforetoggleEvent(): boolean {
+    return this._adapter.dispatchHostEvent(new CustomEvent<IPopoverToggleEventData>(POPOVER_CONSTANTS.events.BEFORETOGGLE, {
       detail: {
         oldState: this.open ? 'open' : 'closed',
         newState: this.open ? 'closed' : 'open'
       },
       bubbles: false,
-      cancelable
+      cancelable: true
     }));
   }
 
   private _dispatchToggleEvent(): void {
-    this._adapter.dispatchHostEvent(new CustomEvent<PopoverToggleEventData>(POPOVER_CONSTANTS.events.TOGGLE, {
+    this._adapter.dispatchHostEvent(new CustomEvent<IPopoverToggleEventData>(POPOVER_CONSTANTS.events.TOGGLE, {
       detail: {
         oldState: this.open ? 'closed' : 'open',
         newState: this.open ? 'open' : 'closed'
@@ -239,7 +239,7 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
       }
       if (this._currentHoverCoords) {
         const mouseElement = document.elementFromPoint(this._currentHoverCoords.x, this._currentHoverCoords.y) as HTMLElement;
-        const isOwnElement = mouseElement && (this._adapter.isChildElement(mouseElement) || this._adapter.overlayElement.targetElement.contains(mouseElement));
+        const isOwnElement = mouseElement && (this._adapter.isChildElement(mouseElement) || this._adapter.overlayElement.anchorElement.contains(mouseElement));
         if (isOwnElement) {
           return;
         }
@@ -275,7 +275,7 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
 
       if (this._currentHoverCoords) {
         const mouseElement = document.elementFromPoint(this._currentHoverCoords.x, this._currentHoverCoords.y) as HTMLElement;
-        const isOwnElement = mouseElement && (this._adapter.isChildElement(mouseElement) || this._adapter.overlayElement.targetElement.contains(mouseElement));
+        const isOwnElement = mouseElement && (this._adapter.isChildElement(mouseElement) || this._adapter.overlayElement.anchorElement.contains(mouseElement));
         if (isOwnElement) {
           return;
         }
@@ -321,8 +321,8 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
 
   private _onPopoverBlur({ relatedTarget }: FocusEvent): void {
     const popoverHasFocus = this._adapter.hasFocus();
-    const targetHasFocus = this._adapter.overlayElement.targetElement.matches(':focus-within') ||
-                           this._adapter.overlayElement.targetElement.contains(relatedTarget as HTMLElement);
+    const targetHasFocus = this._adapter.overlayElement.anchorElement.matches(':focus-within') ||
+                           this._adapter.overlayElement.anchorElement.contains(relatedTarget as HTMLElement);
     if (!popoverHasFocus && !targetHasFocus) {
       this._closePopover();
     }
@@ -341,10 +341,10 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
     }
   }
 
-  public override get targetElement(): HTMLElement {
-    return this._targetElement ?? this._adapter.overlayElement.targetElement;
+  public override get anchorElement(): HTMLElement {
+    return this._targetElement ?? this._adapter.overlayElement.anchorElement;
   }
-  public override set targetElement(value: HTMLElement) {
+  public override set anchorElement(value: HTMLElement) {
     if (this._targetElement !== value) {
       this._targetElement = value;
       if (this._adapter.isConnected) {
@@ -357,10 +357,10 @@ export class PopoverFoundation extends OverlayAwareFoundation<IPopoverAdapter> i
     }
   }
 
-  public override get target(): string | null {
+  public override get anchor(): string | null {
     return this._target;
   }
-  public override set target(value: string | null) {
+  public override set anchor(value: string | null) {
     if (this._target !== value) {
       this._target = value;
       if (this._adapter.isConnected) {
diff --git a/src/lib/popover/popover.ts b/src/lib/popover/popover.ts
index 3ff843967..7c41409d6 100644
--- a/src/lib/popover/popover.ts
+++ b/src/lib/popover/popover.ts
@@ -53,7 +53,7 @@ export class PopoverComponent extends OverlayAware<IPopoverFoundation> implement
   }
 
   public disconnectedCallback(): void {
-    this._foundation.disconnect();
+    this._foundation.destroy();
   }
 
   public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {