diff --git a/.changeset/moody-cougars-exist.md b/.changeset/moody-cougars-exist.md
new file mode 100644
index 0000000000..c9f452b9a5
--- /dev/null
+++ b/.changeset/moody-cougars-exist.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+Extended the `Hds::SideNav` component to support responsiveness (animation/transition) and content portaling by adapting existing implementation for Cloud UI
diff --git a/packages/components/addon/components/hds/side-nav/home-link.hbs b/packages/components/addon/components/hds/side-nav/header/home-link.hbs
similarity index 100%
rename from packages/components/addon/components/hds/side-nav/home-link.hbs
rename to packages/components/addon/components/hds/side-nav/header/home-link.hbs
diff --git a/packages/components/addon/components/hds/side-nav/home-link.js b/packages/components/addon/components/hds/side-nav/header/home-link.js
similarity index 70%
rename from packages/components/addon/components/hds/side-nav/home-link.js
rename to packages/components/addon/components/hds/side-nav/header/home-link.js
index 965fd75978..ad83974528 100644
--- a/packages/components/addon/components/hds/side-nav/home-link.js
+++ b/packages/components/addon/components/hds/side-nav/header/home-link.js
@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-export default class HdsSideNavHomeLinkComponent extends Component {
+export default class HdsSideNavHeaderHomeLinkComponent extends Component {
   /**
    * @param ariaLabel
    * @type {string}
@@ -16,7 +16,7 @@ export default class HdsSideNavHomeLinkComponent extends Component {
     let { ariaLabel } = this.args;
 
     assert(
-      '@ariaLabel for "Hds::SideNav::HomeLink" must have a valid value',
+      '@ariaLabel for "Hds::SideNav::Header::HomeLink" ("Logo") must have a valid value',
       ariaLabel !== undefined
     );
 
diff --git a/packages/components/addon/components/hds/side-nav/icon-button.hbs b/packages/components/addon/components/hds/side-nav/header/icon-button.hbs
similarity index 100%
rename from packages/components/addon/components/hds/side-nav/icon-button.hbs
rename to packages/components/addon/components/hds/side-nav/header/icon-button.hbs
diff --git a/packages/components/addon/components/hds/side-nav/icon-button.js b/packages/components/addon/components/hds/side-nav/header/icon-button.js
similarity index 71%
rename from packages/components/addon/components/hds/side-nav/icon-button.js
rename to packages/components/addon/components/hds/side-nav/header/icon-button.js
index 8ddde8164a..14395d65f5 100644
--- a/packages/components/addon/components/hds/side-nav/icon-button.js
+++ b/packages/components/addon/components/hds/side-nav/header/icon-button.js
@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-export default class HdsSideNavIconButtonComponent extends Component {
+export default class HdsSideNavHeaderIconButtonComponent extends Component {
   /**
    * @param ariaLabel
    * @type {string}
@@ -16,7 +16,7 @@ export default class HdsSideNavIconButtonComponent extends Component {
     let { ariaLabel } = this.args;
 
     assert(
-      '@ariaLabel for "Hds::SideNav::IconButton" must have a valid value',
+      '@ariaLabel for "Hds::SideNav::Header::IconButton" must have a valid value',
       ariaLabel !== undefined
     );
 
diff --git a/packages/components/addon/components/hds/side-nav/header.hbs b/packages/components/addon/components/hds/side-nav/header/index.hbs
similarity index 58%
rename from packages/components/addon/components/hds/side-nav/header.hbs
rename to packages/components/addon/components/hds/side-nav/header/index.hbs
index 7f4f0b07c4..0f5423050e 100644
--- a/packages/components/addon/components/hds/side-nav/header.hbs
+++ b/packages/components/addon/components/hds/side-nav/header/index.hbs
@@ -4,10 +4,10 @@
 }}
 
 <div class="hds-side-nav-header" ...attributes>
-  <div class="hds-side-nav-header__logo">
+  <div class="hds-side-nav-header__logo-container">
     {{yield to="logo"}}
   </div>
-  <div class="hds-side-nav-header__actions">
+  <div class="hds-side-nav-header__actions-container hds-side-nav-hide-when-minimized">
     {{yield to="actions"}}
   </div>
 </div>
\ No newline at end of file
diff --git a/packages/components/addon/components/hds/side-nav/index.hbs b/packages/components/addon/components/hds/side-nav/index.hbs
new file mode 100644
index 0000000000..7c2f594f43
--- /dev/null
+++ b/packages/components/addon/components/hds/side-nav/index.hbs
@@ -0,0 +1,38 @@
+<div class={{this.classNames}} ...attributes {{focus-trap isActive=this.shouldTrapFocus}}>
+  {{#if this.hasA11yRefocus}}
+    <NavigationNarrator
+      @routeChangeValidator={{@a11yRefocusRouteChangeValidator}}
+      @skipTo="#{{@a11yRefocusSkipTo}}"
+      @skipText={{@a11yRefocusSkipText}}
+      @navigationText={{@a11yRefocusNavigationText}}
+    />
+  {{/if}}
+
+  {{#if this.isResponsive}}
+    {{! template-lint-disable no-invalid-interactive}}
+    <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
+  {{/if}}
+
+  <div class="hds-side-nav__wrapper">
+    {{#if this.isResponsive}}
+      <button
+        class="hds-side-nav__menu-toggle-button"
+        type="button"
+        {{on "click" this.toggleMinimizedStatus}}
+        {{! To be localized - see: https://hashicorp.atlassian.net/browse/HDS-567 }}
+        aria-label={{if this.isMinimized "Open menu" "Close menu"}}
+      >
+        <FlightIcon @name={{if this.isMinimized "menu" "x"}} @size="24" @stretched={{true}} />
+      </button>
+    {{/if}}
+    <div class="hds-side-nav__wrapper-header">
+      {{yield (hash isMinimized=this.isMinimized) to="header"}}
+    </div>
+    <div class="hds-side-nav__wrapper-body">
+      {{yield (hash isMinimized=this.isMinimized) to="body"}}
+    </div>
+    <div class="hds-side-nav__wrapper-footer">
+      {{yield (hash isMinimized=this.isMinimized) to="footer"}}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/packages/components/addon/components/hds/side-nav/index.js b/packages/components/addon/components/hds/side-nav/index.js
new file mode 100644
index 0000000000..567a2ed1fd
--- /dev/null
+++ b/packages/components/addon/components/hds/side-nav/index.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+
+export default class HdsSideNavComponent extends Component {
+  @tracked isResponsive = this.args.isResponsive ?? true;
+  @tracked isMinimized = this.isResponsive; // we set it minimized by default so that if we switch viewport from desktop to mobile its already minimized
+  @tracked isDesktop = true;
+  hasA11yRefocus = this.args.hasA11yRefocus ?? true;
+
+  desktopMQVal = getComputedStyle(document.documentElement).getPropertyValue(
+    '--hds-app-desktop-breakpoint'
+  );
+
+  constructor() {
+    super(...arguments);
+    this.desktopMQ = window.matchMedia(`(min-width:${this.desktopMQVal})`);
+    this.addEventListeners();
+    registerDestructor(this, () => {
+      this.removeEventListeners();
+    });
+
+    if (this.args.hasA11yRefocus) {
+      assert(
+        '@a11yRefocusSkipTo for NavigatorNarrator (a11y-refocus) in "Hds::SideNav" must have a valid value',
+        this.args.a11yRefocusSkipTo !== undefined
+      );
+    }
+  }
+
+  addEventListeners() {
+    document.addEventListener('keydown', this.escapePress, true);
+    this.desktopMQ.addEventListener('change', this.updateDesktopVariable, true);
+    // set initial state based on viewport
+    this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+  }
+
+  removeEventListeners() {
+    document.removeEventListener('keydown', this.escapePress, true);
+    this.desktopMQ.removeEventListener(
+      'change',
+      this.updateDesktopVariable,
+      true
+    );
+  }
+
+  get shouldTrapFocus() {
+    return this.isResponsive && !this.isDesktop && !this.isMinimized;
+  }
+
+  get classNames() {
+    let classes = ['hds-side-nav'];
+
+    // add specific class names for the different possible states
+    if (this.isDesktop) {
+      classes.push('hds-side-nav--is-desktop');
+    } else {
+      classes.push('hds-side-nav--is-mobile');
+    }
+    if (this.isResponsive) {
+      classes.push('hds-side-nav--is-responsive');
+    }
+    if (this.isMinimized) {
+      classes.push('hds-side-nav--is-minimized');
+    } else {
+      classes.push('hds-side-nav--is-not-minimized');
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  escapePress(event) {
+    if (event.key === 'Escape' && !this.isMinimized) {
+      this.isMinimized = true;
+    }
+  }
+
+  @action
+  toggleMinimizedStatus() {
+    this.isMinimized = !this.isMinimized;
+
+    let { onToggleMinimizedStatus } = this.args;
+
+    if (typeof onToggleMinimizedStatus === 'function') {
+      onToggleMinimizedStatus(this.isMinimized);
+    }
+  }
+
+  @action
+  updateDesktopVariable(event) {
+    this.isDesktop = event.matches;
+
+    let { onDesktopViewportChange } = this.args;
+
+    if (typeof onDesktopViewportChange === 'function') {
+      onDesktopViewportChange(this.isDesktop);
+    }
+  }
+}
diff --git a/packages/components/addon/components/hds/side-nav/list/index.hbs b/packages/components/addon/components/hds/side-nav/list/index.hbs
index 7249cfe7d5..1c26baa812 100644
--- a/packages/components/addon/components/hds/side-nav/list/index.hbs
+++ b/packages/components/addon/components/hds/side-nav/list/index.hbs
@@ -4,6 +4,7 @@
 }}
 
 <nav class="hds-side-nav__list-wrapper" ...attributes>
+  {{yield (hash extraBefore=(component "hds/yield"))}}
   <ul class="hds-side-nav__list" role="list">
     {{yield
       (hash
@@ -14,4 +15,5 @@
       )
     }}
   </ul>
+  {{yield (hash extraAfter=(component "hds/yield"))}}
 </nav>
\ No newline at end of file
diff --git a/packages/components/addon/components/hds/side-nav/portal/index.hbs b/packages/components/addon/components/hds/side-nav/portal/index.hbs
new file mode 100644
index 0000000000..2a9934abf0
--- /dev/null
+++ b/packages/components/addon/components/hds/side-nav/portal/index.hbs
@@ -0,0 +1,7 @@
+<Portal @target={{if @targetName @targetName "hds-side-nav-portal-target"}}>
+  <div class="hds-side-nav__content-panel" ...attributes>
+    <Hds::SideNav::List aria-label={{@ariaLabel}} as |ListElements|>
+      {{yield ListElements}}
+    </Hds::SideNav::List>
+  </div>
+</Portal>
\ No newline at end of file
diff --git a/packages/components/addon/components/hds/side-nav/portal/target.hbs b/packages/components/addon/components/hds/side-nav/portal/target.hbs
new file mode 100644
index 0000000000..3354e85e97
--- /dev/null
+++ b/packages/components/addon/components/hds/side-nav/portal/target.hbs
@@ -0,0 +1,9 @@
+<div class="hds-side-nav__content" ...attributes>
+  <PortalTarget
+    @multiple={{true}}
+    @onChange={{this.panelsChanged}}
+    @name={{if @targetName @targetName "hds-side-nav-portal-target"}}
+    class="hds-side-nav__content-panels hds-side-nav-hide-when-minimized"
+    {{did-update this.didUpdateSubnav this.numSubnavs}}
+  />
+</div>
\ No newline at end of file
diff --git a/packages/components/addon/components/hds/side-nav/portal/target.js b/packages/components/addon/components/hds/side-nav/portal/target.js
new file mode 100644
index 0000000000..5c86bd3556
--- /dev/null
+++ b/packages/components/addon/components/hds/side-nav/portal/target.js
@@ -0,0 +1,151 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { DEBUG } from '@glimmer/env';
+import Ember from 'ember';
+import { debounce } from '@ember/runloop';
+
+export default class SidenavPortalTarget extends Component {
+  @service router;
+
+  @tracked numSubnavs = 0;
+
+  static get prefersReducedMotionOverride() {
+    return Ember.testing;
+  }
+
+  prefersReducedMotionMQ = window.matchMedia(
+    '(prefers-reduced-motion: reduce)'
+  );
+
+  get prefersReducedMotion() {
+    return (
+      this.constructor.prefersReducedMotionOverride ||
+      (this.prefersReducedMotionMQ && this.prefersReducedMotionMQ.matches)
+    );
+  }
+
+  @action
+  panelsChanged(portalCount) {
+    this.numSubnavs = portalCount;
+  }
+
+  @action
+  didUpdateSubnav(element, [count]) {
+    debounce(this, 'animateSubnav', element, [count], 100);
+  }
+
+  @action
+  animateSubnav(element, [count]) {
+    /*
+     * Here is what the layout looks like for this setup
+     *
+
+                                    SideNav
+                                    +----------------------+
+                                    | +------------------+ |
+                                    | |    ("header")    | |
+                                    | +------------------+ |
+                                    |                      |
+                                    | +------------------+ |
+                                    | |    ("body")      | |
+        (PortalTarget)              | |                  | |
+        +----------------------------------------------+ | |
+        | +----------+  +----------+  |  +----------+  | | |
+        | | (Portal) |  | (Portal) |     | (Portal) |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |  hidden  |  |  hidden  |     | *active* |  | | |
+        | |   panel  |  |   panel  |  |  |   panel  |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | |          |  |          |  |  |          |  | | |
+        | |          |  |          |     |          |  | | |
+        | +----------+  +----------+  |  +----------+  | | |
+        +----------------------------------------------+ | |
+                                    | |                  | |
+                                    | +------------------+ |
+                                    |                      |
+                                    | +------------------+ |
+                                    | |    ("footer")    | |
+                                    | +------------------+ |
+                                    +----------------------+
+
+     *
+     * every time `HcAppFrame::SideNav::Portal` renders, it contains a portaled "panel"
+     * that is rendered into the `hds-side-nav__content-panels` (inside the PortalTarget).
+     *
+     * Rendering or unrendering other `HcAppFrame::SideNav::Portal`s triggers the number of
+     * subnavs to change (via `numSubnavs`), so this function runs and slides
+     * `hds-side-nav__content-panels` left or right using the `element.animate` api.
+     *
+     * */
+
+    let activeIndex = count - 1;
+    let targetElement = element;
+    let { prefersReducedMotion } = this;
+
+    let styles = getComputedStyle(targetElement);
+    let columnWidth = styles.getPropertyValue(
+      '--hds-app-sidenav-width-expanded'
+    );
+    let slideDuration = prefersReducedMotion ? 0 : 150;
+    let fadeDuration = prefersReducedMotion ? 0 : 175;
+    let fadeDelay = prefersReducedMotion ? 0 : 50;
+
+    // slide entire parent panel
+    let start = styles.transform;
+    let end = `translateX(-${activeIndex * parseInt(columnWidth, 10)}px)`;
+    let anim = targetElement.animate(
+      [{ transform: start }, { transform: end }],
+      {
+        duration: slideDuration,
+        easing: 'cubic-bezier(0.65, 0, 0.35, 1)',
+        fill: 'forwards',
+      }
+    );
+    // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render
+    if (DEBUG) {
+      anim.commitStyles();
+    }
+    anim.finished.then(() => {
+      // uncomment this if we need/want to scroll the element to the top
+      // targetElement.scrollIntoView(true);
+      if (activeIndex > 0) {
+        let allPrev = Array.from(targetElement.children).slice(0, activeIndex);
+        for (let ele of allPrev) {
+          ele.ariaHidden = 'true';
+          ele.style.setProperty('visibility', 'hidden');
+          ele.style.setProperty('opacity', '0');
+        }
+      }
+      // Notice: we don't add the styles by default because it writes a `style` attribute to the element and it causes an additional re-render
+      if (DEBUG) {
+        // Check the visibility of the element before attempting to commitStyles.
+        if (targetElement.offsetParent !== null) {
+          anim.commitStyles();
+        }
+      }
+    });
+
+    // fade in next panel
+    let nextPanelEl = targetElement.children[activeIndex];
+    if (nextPanelEl) {
+      nextPanelEl.ariaHidden = 'false';
+      nextPanelEl.style.setProperty('visibility', 'visible');
+      // this eliminates a flicker if there's only 1 subnav rendering
+      if (activeIndex === 0) {
+        fadeDelay = 0;
+        fadeDuration = 0;
+      }
+      nextPanelEl.animate([{ opacity: '0' }, { opacity: '1' }], {
+        delay: fadeDelay,
+        duration: fadeDuration,
+        fill: 'forwards',
+      });
+    }
+  }
+}
diff --git a/packages/components/addon/components/hds/side-nav/wrapper.hbs b/packages/components/addon/components/hds/side-nav/wrapper.hbs
deleted file mode 100644
index 7a501f5ebf..0000000000
--- a/packages/components/addon/components/hds/side-nav/wrapper.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-side-nav__wrapper" ...attributes>
-  <div class="hds-side-nav__wrapper-header">
-    {{yield to="header"}}
-  </div>
-
-  <div class="hds-side-nav__wrapper-body" aria-label="contents">
-    {{yield to="body"}}
-  </div>
-
-  <div class="hds-side-nav__wrapper-footer">
-    {{yield to="footer"}}
-  </div>
-</div>
\ No newline at end of file
diff --git a/packages/components/app/components/hds/side-nav/header/home-link.js b/packages/components/app/components/hds/side-nav/header/home-link.js
new file mode 100644
index 0000000000..d60ce138e9
--- /dev/null
+++ b/packages/components/app/components/hds/side-nav/header/home-link.js
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/header/home-link';
diff --git a/packages/components/app/components/hds/side-nav/header/icon-button.js b/packages/components/app/components/hds/side-nav/header/icon-button.js
new file mode 100644
index 0000000000..b3fd2ddbf5
--- /dev/null
+++ b/packages/components/app/components/hds/side-nav/header/icon-button.js
@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/header/icon-button';
diff --git a/packages/components/app/components/hds/side-nav/header.js b/packages/components/app/components/hds/side-nav/header/index.js
similarity index 100%
rename from packages/components/app/components/hds/side-nav/header.js
rename to packages/components/app/components/hds/side-nav/header/index.js
diff --git a/packages/components/app/components/hds/side-nav/wrapper.js b/packages/components/app/components/hds/side-nav/index.js
similarity index 82%
rename from packages/components/app/components/hds/side-nav/wrapper.js
rename to packages/components/app/components/hds/side-nav/index.js
index 403573967e..ab12d5752c 100644
--- a/packages/components/app/components/hds/side-nav/wrapper.js
+++ b/packages/components/app/components/hds/side-nav/index.js
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/side-nav/wrapper';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/index';
diff --git a/packages/components/app/components/hds/side-nav/home-link.js b/packages/components/app/components/hds/side-nav/portal/index.js
similarity index 79%
rename from packages/components/app/components/hds/side-nav/home-link.js
rename to packages/components/app/components/hds/side-nav/portal/index.js
index 4e39446ed6..e24265fb26 100644
--- a/packages/components/app/components/hds/side-nav/home-link.js
+++ b/packages/components/app/components/hds/side-nav/portal/index.js
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/side-nav/home-link';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/portal/index';
diff --git a/packages/components/app/components/hds/side-nav/icon-button.js b/packages/components/app/components/hds/side-nav/portal/target.js
similarity index 79%
rename from packages/components/app/components/hds/side-nav/icon-button.js
rename to packages/components/app/components/hds/side-nav/portal/target.js
index 6471294392..88c9597e8e 100644
--- a/packages/components/app/components/hds/side-nav/icon-button.js
+++ b/packages/components/app/components/hds/side-nav/portal/target.js
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-export { default } from '@hashicorp/design-system-components/components/hds/side-nav/icon-button';
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/portal/target';
diff --git a/packages/components/app/styles/components/side-nav.scss b/packages/components/app/styles/components/side-nav.scss
deleted file mode 100644
index 28b171fd1b..0000000000
--- a/packages/components/app/styles/components/side-nav.scss
+++ /dev/null
@@ -1,275 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// SIDE-NAV
-//
-
-@use "../mixins/focus-ring" as *;
-
-// WIP, naming, etc. will be refined... TODO: Add JSON for color tokens, etc.
-:root {
-  // Sizes:
-
-  // header, body, footer "wrappers":
-  --token-side-nav-wrapper-padding-horizontal: 16px;
-  --token-side-nav-wrapper-padding-vertical: 16px;
-  --token-side-nav-wrapper-header-padding-bottom: 8px;
-
-  // header content:
-  --token-side-nav-header-home-link-padding: 4px;
-  --token-side-nav-header-home-link-logo-size: 48px;
-  --token-side-nav-header-actions-spacing: 8px;
-
-  // body content:
-  --token-side-nav-body-list-margin-vertical: 16px;
-  --token-side-nav-body-list-item-padding-horizontal: 8px;
-  --token-side-nav-body-list-item-padding-vertical: 4px;
-  --token-side-nav-body-list-item-spacing-vertical: 2px;
-  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
-  --token-side-nav-body-list-item-border-radius: 5px;
-
-  // Colors:
-
-  // SideNav container:
-  --token-side-nav-foreground-primary: #dedfe3;
-  --token-side-nav-foreground-primary-strong: #fff;
-  --token-side-nav-foreground-faint: #8c909c;
-  --token-side-nav-surface-primary: #0c0c0e;
-
-  // Interactive elements:
-  // base:
-  --token-side-nav-interactive-surface-hover: #3b3d45;
-  --token-side-nav-interactive-surface-active: #656a76;
-}
-
-@mixin hds-side-nav-icon-button($add-visible-border: false) {
-  color: var(--token-side-nav-foreground-primary-strong);
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
-  cursor: pointer;
-
-  @if ($add-visible-border) {
-    border-color: var(--token-color-palette-neutral-500);
-  }
-
-  &:focus,
-  &.mock-focus {
-    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
-  }
-
-  &:hover,
-  &.mock-hover {
-    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
-    background: var(--token-side-nav-interactive-surface-hover);
-  }
-
-  &:active,
-  &.mock-active {
-    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
-    background: var(--token-side-nav-interactive-surface-active);
-
-    @if ($add-visible-border) {
-      border-color: var(--token-color-palette-neutral-400);
-    }
-  }
-}
-
-
-// * SideNav Parent (wrapper) component
-// -------------------------------------------------------------------
-
-.hds-side-nav__wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  color: var(--token-side-nav-foreground-primary); // Default color
-  background: var(--token-side-nav-surface-primary);
-}
-
-.hds-side-nav__wrapper-header {
-  padding-top: var(--token-side-nav-wrapper-padding-vertical);
-  padding-right: var(--token-side-nav-wrapper-padding-horizontal);
-  padding-bottom: var(--token-side-nav-wrapper-header-padding-bottom); // by design
-  padding-left: var(--token-side-nav-wrapper-padding-horizontal);
-}
-
-.hds-side-nav__wrapper-body {
-  flex: 1;
-  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
-  overflow-y: auto;
-}
-
-.hds-side-nav__wrapper-footer {
-  padding: var(--token-side-nav-wrapper-padding-vertical) var(--token-side-nav-wrapper-padding-horizontal);
-}
-
-// * Header child elements
-// ---------------------------------------
-
-.hds-side-nav-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.hds-side-nav-header__logo {
-  display: block;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: var(--token-side-nav-header-home-link-logo-size);
-  height: var(--token-side-nav-header-home-link-logo-size);
-}
-
-.hds-side-nav-header__actions {
-  display: flex;
-
-  > * + * { margin-left: var(--token-side-nav-header-actions-spacing); }
-}
-
-.hds-side-nav__home-link {
-  @include hds-side-nav-icon-button();
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); // by design -  we take in account the transparent border
-}
-
-// Apply class name to Hds::Dropdown component
-.hds-side-nav__dropdown {
-  .hds-dropdown-toggle-icon {
-    @include hds-side-nav-icon-button($add-visible-border: true);
-  }
-}
-
-.hds-side-nav__icon-button {
-  @include hds-side-nav-icon-button($add-visible-border: true);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 5px; // we take in account the transparent border
-}
-
-// * Body child elements
-// ---------------------------------------
-
-.hds-side-nav__list-title {
-  display: flex;
-  align-items: center;
-  min-height: 34px;
-  margin-top: var(--token-side-nav-body-list-margin-vertical);
-  padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
-  color: var(--token-side-nav-foreground-faint);
-
-  // Remove margin from title at top of all list-items & lists
-  .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
-    margin-top: 0;
-  }
-}
-
-.hds-side-nav__list {
-  margin: 0;
-  padding: 0;
-}
-
-.hds-side-nav__list-item {
-  list-style-type: none; // Q: Should ul have role="list" added for accessibility?
-
-  & + & {
-    margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
-  }
-}
-
-.hds-side-nav__list-item-link {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: 36px;
-  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
-  color: var(--token-side-nav-foreground-primary);
-  text-decoration: none;
-  background: var(--token-side-nav-surface-primary);
-  // "Link" could render as an HTML button element so this overrides the default border style in that case:
-  border-color: transparent;
-  border-radius: var(--token-side-nav-body-list-item-border-radius);
-
-  &:focus,
-  &.mock-focus {
-    @include hds-focus-ring-with-pseudo-element();
-  }
-
-  &:hover,
-  &.mock-hover {
-    background: var(--token-side-nav-interactive-surface-hover);
-    border-color: transparent;
-
-    .hds-side-nav__list-item-text,
-    .hds-side-nav__list-item-icon-leading,
-    .hds-side-nav__list-item-icon-trailing {
-      color: var(--token-side-nav-foreground-primary-strong);
-    }
-  }
-
-  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
-  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
-  // otherwise they can use the `@isActive` argument to set this visual state directly
-  &.active,
-  &:active,
-  &.mock-active {
-    background: var(--token-side-nav-interactive-surface-active);
-
-    .hds-side-nav__list-item-text,
-    .hds-side-nav__list-item-icon-leading,
-    .hds-side-nav__list-item-icon-trailing {
-      color: var(--token-side-nav-foreground-primary-strong);
-    }
-
-    .hds-badge,
-    .hds-badge-count {
-      color: var(--token-color-foreground-primary);
-      background: var(--token-color-surface-strong);
-    }
-  }
-
-  .hds-badge,
-  .hds-badge-count {
-    margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-  }
-}
-
-// special override for the "back-link" element (no visible active state, by design)
-.hds-side-nav__list-item-link--back-link {
-  &:active,
-  &.mock-active {
-    background: var(--token-side-nav-surface-primary);
-
-    .hds-side-nav__list-item-text,
-    .hds-side-nav__list-item-icon-leading,
-    .hds-side-nav__list-item-icon-trailing {
-      color: var(--token-side-nav-foreground-primary);
-    }
-  }
-}
-
-.hds-side-nav__list-item-text {
-  color: var(--token-side-nav-foreground-primary);
-  text-align: left;
-}
-
-.hds-side-nav__list-item-icon-leading {
-  flex: none;
-  margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-}
-
-.hds-side-nav__list-item-icon-trailing {
-  flex: none;
-  margin-left: auto;
-  padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
-}
diff --git a/packages/components/app/styles/components/side-nav/a11y-refocus.scss b/packages/components/app/styles/components/side-nav/a11y-refocus.scss
new file mode 100644
index 0000000000..1633c92be4
--- /dev/null
+++ b/packages/components/app/styles/components/side-nav/a11y-refocus.scss
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > A11Y-REFOCUS "SKIP LINK"
+//
+
+.hds-side-nav { // this extra qualifier is needed to increase specificity of the selector, please don't remove it
+  .ember-a11y-refocus-skip-link {
+    top: 10px;
+    left: 10px;
+    z-index: 20;
+    width: max-content;
+    padding: 2px 10px 4px;
+    color: var(--token-color-foreground-action);
+    font-size: var(--token-typography-display-200-font-size);
+    font-family: var(--token-typography-display-200-font-family);
+    line-height: var(--token-typography-display-200-line-height);
+    background-color: var(--token-color-surface-faint);
+    border-radius: 3px;
+    transform: translateY(-200%);
+    transition: 0.6s ease-in-out;
+
+    &:focus {
+      transform: translateY(0);
+    }
+  }
+}
diff --git a/packages/components/app/styles/components/side-nav/content.scss b/packages/components/app/styles/components/side-nav/content.scss
new file mode 100644
index 0000000000..69718bc25d
--- /dev/null
+++ b/packages/components/app/styles/components/side-nav/content.scss
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > CONTENT (PORTALS + LISTS OF ITEMS/LINKS)
+//
+
+@use "../../mixins/focus-ring" as *;
+
+
+// PANELS (wrappers used in conjunction with the portal elements)
+
+.hds-side-nav__content {
+  // we use this trick (increasing the container size here, and reducing it at single panel level)
+  // to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
+  margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1);
+}
+
+.hds-side-nav__content-panels {
+  // see https://codepen.io/didoo/pen/YzOeRPr
+  display: grid;
+  grid-template-columns: repeat(5, 100%);
+  width: 100%;
+}
+
+.hds-side-nav__content-panel {
+  padding: 0 var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+// (LIST) TITLE
+
+.hds-side-nav__list-title {
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+  margin-top: var(--token-side-nav-body-list-margin-vertical);
+  padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-foreground-faint);
+
+  // Remove margin from title at top of all list-items & lists
+  .hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
+    margin-top: 0;
+  }
+}
+
+
+// LIST (root elements)
+
+.hds-side-nav__list-wrapper, // <nav> element
+.hds-side-nav__list {        // <ul> element
+  margin: 0;
+  padding: 0;
+}
+
+
+// ITEM (generic container)
+
+.hds-side-nav__list-item { // <li> element
+  list-style-type: none;
+
+  & + & {
+    margin-top: var(--token-side-nav-body-list-item-spacing-vertical);
+  }
+}
+
+.hds-side-nav__list-item-link { // <a>/<button> element (via Hds::Interactive)
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--token-side-nav-body-list-item-height);
+  padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
+  color: var(--token-side-nav-foreground-primary);
+  text-decoration: none;
+  background: var(--token-side-nav-surface-primary);
+  // "Link" could render as an HTML button element so this overrides the default border style in that case:
+  border-color: transparent;
+  border-radius: var(--token-side-nav-body-list-item-border-radius);
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element();
+  }
+
+  &:hover,
+  &.mock-hover {
+    background: var(--token-side-nav-interactive-surface-hover);
+    border-color: transparent;
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-foreground-primary-strong);
+    }
+  }
+
+  // notice: this ".active" extra class is used to match the corresponding `active` class assigned automatically
+  // by the `<LinkTo>` Ember component (when the link is "current), so that consumers get it for free if they want
+  // otherwise they can use the `@isActive` argument to set this visual state directly
+  &.active,
+  &:active,
+  &.mock-active {
+    background: var(--token-side-nav-interactive-surface-active);
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-foreground-primary-strong);
+    }
+
+    .hds-badge,
+    .hds-badge-count {
+      color: var(--token-color-foreground-primary);
+      background: var(--token-color-surface-strong);
+    }
+  }
+
+  .hds-badge,
+  .hds-badge-count {
+    margin-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+  }
+}
+
+// special override for the "back-link" element (no visible active state, by design)
+.hds-side-nav__list-item-link--back-link {
+  &:active,
+  &.mock-active {
+    background: var(--token-side-nav-surface-primary);
+
+    .hds-side-nav__list-item-text,
+    .hds-side-nav__list-item-icon-leading,
+    .hds-side-nav__list-item-icon-trailing {
+      color: var(--token-side-nav-foreground-primary);
+    }
+  }
+}
+
+
+// LIST ITEM > INNER ELEMENTS
+
+.hds-side-nav__list-item-text {
+  color: var(--token-side-nav-foreground-primary);
+  text-align: left;
+}
+
+.hds-side-nav__list-item-icon-leading {
+  flex: none;
+  margin-right: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+}
+
+.hds-side-nav__list-item-icon-trailing {
+  flex: none;
+  margin-left: auto;
+  padding-left: var(--token-side-nav-body-list-item-content-spacing-horizontal);
+}
diff --git a/packages/components/app/styles/components/side-nav/header.scss b/packages/components/app/styles/components/side-nav/header.scss
new file mode 100644
index 0000000000..732a2f0356
--- /dev/null
+++ b/packages/components/app/styles/components/side-nav/header.scss
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV > HEADER
+//
+
+@use "../../mixins/focus-ring" as *;
+
+@mixin hds-side-nav-icon-button($add-visible-border: false) {
+  color: var(--token-side-nav-foreground-primary-strong);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--token-side-nav-body-list-item-border-radius);
+  cursor: pointer;
+
+  @if ($add-visible-border) {
+    border-color: var(--token-color-palette-neutral-500);
+  }
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px);
+  }
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
+    background: var(--token-side-nav-interactive-surface-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
+    background: var(--token-side-nav-interactive-surface-active);
+
+    @if ($add-visible-border) {
+      border-color: var(--token-color-palette-neutral-400);
+    }
+  }
+}
+
+// HEADER (LAYOUT WRAPPER)
+
+.hds-side-nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+// LOGO
+
+.hds-side-nav-header__logo-container {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-side-nav-header-home-link-logo-size);
+  height: var(--token-side-nav-header-home-link-logo-size);
+}
+
+// "home-link"
+
+.hds-side-nav__home-link {
+  @include hds-side-nav-icon-button();
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--token-side-nav-header-home-link-padding) - 1px); // by design -  we take in account the transparent border
+}
+
+
+// ACTIONS
+
+.hds-side-nav-header__actions-container {
+  display: flex;
+
+  > * + * { margin-left: var(--token-side-nav-header-actions-spacing); }
+}
+
+// dropdown overrides
+
+.hds-side-nav__dropdown { // ⬅︎ add this class name to the `Hds::Dropdown` component to apply the style overrides
+  .hds-dropdown-toggle-icon {
+    @include hds-side-nav-icon-button($add-visible-border: true);
+  }
+}
+
+// generic "icon-button"
+
+.hds-side-nav__icon-button {
+  @include hds-side-nav-icon-button($add-visible-border: true);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px; // same height as the dropdown "toggle"
+  height: 36px;
+  padding: 5px; // we take in account the transparent border
+}
diff --git a/packages/components/app/styles/components/side-nav/index.scss b/packages/components/app/styles/components/side-nav/index.scss
new file mode 100644
index 0000000000..718555d05f
--- /dev/null
+++ b/packages/components/app/styles/components/side-nav/index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use "./vars.scss";
+@use "./main.scss";
+@use "./header.scss";
+@use "./content.scss";
+@use "./a11y-refocus.scss";
diff --git a/packages/components/app/styles/components/side-nav/main.scss b/packages/components/app/styles/components/side-nav/main.scss
new file mode 100644
index 0000000000..02c147e065
--- /dev/null
+++ b/packages/components/app/styles/components/side-nav/main.scss
@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV
+//
+
+.hds-side-nav {
+  position: sticky;
+  top: 0;
+  z-index: 20; // needs to stay above the main content
+  height: 100vh;
+  min-height: 100vh;
+  isolation: isolate; // used to create a new stacking context (so we can set the overlay's z-index to -1)
+
+  // RESPONSIVENESS - This controls the width of the top-level container ("sidebar") in the grid, and impacts the available space for the "main" grid area
+
+  &.hds-side-nav--is-responsive {
+    transition:
+      width var(--hds-app-sidenav-animation-duration)
+      var(--hds-app-sidenav-animation-easing);
+  }
+
+  // mobile
+  &.hds-side-nav--is-mobile {
+    width: var(--hds-app-sidenav-width-minimized);
+  }
+
+  // desktop
+  &.hds-side-nav--is-desktop {
+    width: var(--hds-app-sidenav-width-expanded);
+  }
+}
+
+
+// OVERLAY
+
+.hds-side-nav__overlay {
+  position: fixed;
+  z-index: -1;
+  inset: 0;
+  background-color: var(--token-color-palette-neutral-700);
+  opacity: 0.2;
+  transition:
+    opacity var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing)
+    var(--hds-app-sidenav-animation-delay);
+
+  // when we're minimized (mobile) we don't want the overlay to be visible/interactive
+  .hds-side-nav--is-minimized & {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // when it's desktop we _never_ want the overlay to be visible
+  .hds-side-nav--is-desktop & {
+    display: none;
+  }
+}
+
+
+// MENU/TOGGLE BUTTON
+
+.hds-side-nav__menu-toggle-button {
+  position: absolute;
+  z-index: 1;
+  color: var(--token-color-foreground-high-contrast);
+  background: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition-timing-function: var(--hds-app-sidenav-animation-easing);
+  transition-duration: var(--hds-app-sidenav-animation-duration);
+  transition-property: width, height, padding, border-radius, transform;
+
+  &:hover {
+    background-color: var(--token-color-palette-neutral-600);
+    border-color: transparent;
+  }
+
+  &:active {
+    background-color: var(--token-color-palette-neutral-500);
+    border-color: transparent;
+  }
+
+  &:focus {
+    background-color: var(--token-color-palette-neutral-500);
+    border-color: var(--token-color-focus-action-internal);
+    outline: 3px solid var(--token-color-focus-action-external);
+  }
+
+  // by default it's styled as "close" button
+  .hds-side-nav--is-mobile & {
+    width: 24px;
+    height: 24px;
+    padding: 1px;
+    background-color: var(--token-color-foreground-primary);
+    border-radius: 3px;
+    transform:
+      translateX(calc(var(--hds-app-sidenav-width-expanded) + 8px))
+      translateY(24px);
+    // z-index: 15; // not needed anymore?
+  }
+
+  // when the sidenav is minimized it's styled as "menu" button
+  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+    width: 36px;
+    height: 36px;
+    padding: 5px;
+    border-radius: 5px;
+    transform: translateX(22px) translateY(var(--hds-app-sidenav-menu-button-y-shift));
+  }
+
+  // when it's desktop we _never_ want to show the menu/toggle button
+  .hds-side-nav--is-desktop & {
+    display: none;
+  }
+}
+
+
+// RESPONSIVE WRAPPER
+// this container element is used to control the width of the sidebar at different viewports (desktop/mobile) and states (minimized/expanded)
+
+.hds-side-nav__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: var(--token-side-nav-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
+  background: var(--token-side-nav-surface-primary);
+
+  // RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area
+
+  .hds-side-nav--is-responsive & {
+    transition:
+      width var(--hds-app-sidenav-animation-duration)
+      var(--hds-app-sidenav-animation-easing);
+  }
+
+  // mobile
+  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+    width: var(--hds-app-sidenav-width-minimized);
+  }
+
+  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized & {
+    width: var(--hds-app-sidenav-width-expanded);
+  }
+
+  // desktop
+  .hds-side-nav--is-desktop & {
+    width: var(--hds-app-sidenav-width-expanded);
+  }
+}
+
+// wrapper's child "containers"
+
+.hds-side-nav__wrapper-header {
+  padding-top: var(--token-side-nav-wrapper-padding-vertical);
+  padding-right: var(--token-side-nav-wrapper-padding-horizontal);
+  padding-bottom: var(--token-side-nav-wrapper-header-padding-bottom); // by design
+  padding-left: var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+.hds-side-nav__wrapper-body {
+  flex: 1;
+  padding:
+    var(--token-side-nav-wrapper-padding-vertical)
+    var(--token-side-nav-wrapper-padding-horizontal);
+  overflow-y: auto;
+}
+
+.hds-side-nav__wrapper-footer {
+  padding:
+    var(--token-side-nav-wrapper-padding-vertical)
+    var(--token-side-nav-wrapper-padding-horizontal);
+}
+
+
+// "HIDE-WHEN-MINIMIZED" SPECIAL CLASS
+// this is a special class that is used to control which elements of the sidenav need to be:
+// - hidden (immediately) when the sidenav is "minimized"
+// - shown (transitioning their opacity) when the sidenav is "expanded"
+
+.hds-side-nav-hide-when-minimized {
+  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+    visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
+    opacity: 0;
+    transition: none;
+  }
+
+  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized &,
+  .hds-side-nav--is-desktop & {
+    visibility: visible;
+    opacity: 1;
+    transition:
+      opacity var(--hds-app-sidenav-animation-duration)
+      var(--hds-app-sidenav-animation-easing)
+      var(--hds-app-sidenav-animation-delay);
+  }
+}
+
diff --git a/packages/components/app/styles/components/side-nav/vars.scss b/packages/components/app/styles/components/side-nav/vars.scss
new file mode 100644
index 0000000000..d94c775f52
--- /dev/null
+++ b/packages/components/app/styles/components/side-nav/vars.scss
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// SIDE-NAV - VARS
+//
+
+
+// LOCAL VARIABLES
+// we use `hds-app` as prefix to distinguish them from the normal tokens
+// notice: they may be overwritten at consumer-level side if needed by re-defining the variables in a container element
+
+:root {
+  // breakpoint
+  --hds-app-desktop-breakpoint: 1088px; // this is used only to read its value via JS and set the `hds-side-nav--is-desktop` class
+  // widths
+  --hds-app-sidenav-width-minimized: 80px;
+  --hds-app-sidenav-width-expanded: 280px;
+  // sidebar menu
+  --hds-app-sidenav-menu-button-y-shift: 84px;
+  // animation
+  --hds-app-sidenav-animation-duration: 250ms;
+  --hds-app-sidenav-animation-delay: var(--hds-app-sidenav-animation-duration);
+  --hds-app-sidenav-animation-easing: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+// reduced motion
+
+@media (prefers-reduced-motion) {
+  :root {
+    --hds-app-sidenav-animation-duration: 0;
+  }
+}
+
+
+// DESIGN TOKENS
+// will be converted to JSON format in the future
+// notice: overriding them should be considered an anti-pattern, and not promoted/publicized
+
+:root {
+  // Sizes:
+
+  // header, body, footer "wrappers":
+  --token-side-nav-wrapper-padding-horizontal: 16px;
+  --token-side-nav-wrapper-padding-vertical: 16px;
+  --token-side-nav-wrapper-header-padding-bottom: 8px;
+
+  // header content:
+  --token-side-nav-header-home-link-padding: 4px;
+  --token-side-nav-header-home-link-logo-size: 48px;
+  --token-side-nav-header-actions-spacing: 8px;
+
+  // body content:
+  --token-side-nav-body-list-margin-vertical: 24px;
+  --token-side-nav-body-list-item-height: 36px;
+  --token-side-nav-body-list-item-padding-horizontal: 8px;
+  --token-side-nav-body-list-item-padding-vertical: 4px;
+  --token-side-nav-body-list-item-spacing-vertical: 2px;
+  --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
+  --token-side-nav-body-list-item-border-radius: 5px;
+
+  // Colors:
+
+  // SideNav container:
+  --token-side-nav-foreground-primary: #dedfe3;
+  --token-side-nav-foreground-primary-strong: #fff;
+  --token-side-nav-foreground-faint: #8c909c;
+  --token-side-nav-surface-primary: #0c0c0e;
+
+  // Interactive elements:
+  // base:
+  --token-side-nav-interactive-surface-hover: #3b3d45;
+  --token-side-nav-interactive-surface-active: #656a76;
+}
diff --git a/packages/components/package.json b/packages/components/package.json
index 6cd9feade9..679cae3f99 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -41,6 +41,7 @@
     "@hashicorp/design-system-tokens": "^1.4.1",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
+    "ember-a11y-refocus": "^3.0.2",
     "ember-auto-import": "^2.6.0",
     "ember-cached-decorator-polyfill": "^0.1.4",
     "ember-cli-babel": "^7.26.11",
@@ -50,6 +51,7 @@
     "ember-focus-trap": "^1.0.1",
     "ember-keyboard": "^8.1.0",
     "ember-named-blocks-polyfill": "^0.2.5",
+    "ember-stargate": "^0.4.3",
     "ember-style-modifier": "^0.8.0",
     "ember-truth-helpers": "^3.0.0",
     "sass": "^1.58.3"
diff --git a/packages/components/tests/dummy/app/styles/showcase-pages/side-nav.scss b/packages/components/tests/dummy/app/styles/showcase-pages/side-nav.scss
index a12b3f57ff..9fc8c09e9e 100644
--- a/packages/components/tests/dummy/app/styles/showcase-pages/side-nav.scss
+++ b/packages/components/tests/dummy/app/styles/showcase-pages/side-nav.scss
@@ -10,19 +10,23 @@ body.components-side-nav {
 
   // used to simulate a "root" container for the sidenav
   .shw-component-sim-side-nav-root-container {
-    width: 280px;
     height: 600px;
-    background: $shw-component-side-nav-background;
+
+    .hds-side-nav {
+      position: relative;
+      height: 100% !important;
+      min-height: 100% !important;
+    }
   }
 
-  // used to simulate a "SideNav::Header" container
+  // used to simulate an "header" container for the sidenav
   .shw-component-sim-side-nav-header {
     width: 280px;
     padding: var(--token-side-nav-wrapper-padding-horizontal) var(--token-side-nav-wrapper-padding-vertical);
     background: $shw-component-side-nav-background;
   }
 
-  // used to simulate a "SideNav::Header" container
+  // used to simulate a "body" container for the sidenav
   .shw-component-sim-side-nav-body {
     width: 280px;
     margin: 0;
@@ -47,4 +51,24 @@ body.components-side-nav {
     padding: var(--token-side-nav-wrapper-padding-horizontal) var(--token-side-nav-wrapper-padding-vertical);
     background: $shw-component-side-nav-background;
   }
+
+  // these are used to showcase the non-componentized elements
+
+  .shw-component-sim-other-elements {
+    width: fit-content;
+    padding: var(--token-side-nav-wrapper-padding-horizontal) var(--token-side-nav-wrapper-padding-vertical);
+    background: $shw-component-side-nav-background;
+
+    .hds-side-nav {
+      position: static;
+      height: auto !important;
+      min-height: auto !important;
+    }
+
+    .hds-side-nav__menu-toggle-button,
+    .ember-a11y-refocus-skip-link {
+      position: static !important;
+      transform: none !important;
+    }
+  }
 }
diff --git a/packages/components/tests/dummy/app/templates/components/side-nav.hbs b/packages/components/tests/dummy/app/templates/components/side-nav.hbs
index 75bdfcb82d..271561dfb8 100644
--- a/packages/components/tests/dummy/app/templates/components/side-nav.hbs
+++ b/packages/components/tests/dummy/app/templates/components/side-nav.hbs
@@ -8,146 +8,14 @@
 <Shw::Text::H1>SideNav</Shw::Text::H1>
 
 <section data-test-percy>
-  <Shw::Text::H2>Examples</Shw::Text::H2>
+  <Shw::Text::H2>Content</Shw::Text::H2>
 
-  <Shw::Flex as |SF|>
-    <SF.Item @label="With single 'list' (nav) container">
-      <div class="shw-component-sim-side-nav-root-container">
-        <Hds::SideNav::Wrapper>
-          <:header>
-            <Hds::SideNav::Header>
-              <:logo>
-                <Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
-              </:logo>
-              <:actions>
-                <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
-                  <dd.ToggleIcon @icon="help" @text="settings menu" />
-                  <dd.Title @text="Help & Support" />
-                  <dd.Interactive @text="Documentation" @href="#" />
-                  <dd.Interactive @text="Tutorials" @href="#" />
-                  <dd.Interactive @text="Terraform Provider" @href="#" />
-                  <dd.Interactive @text="Changelog" @href="#" />
-                  <dd.Separator />
-                  <dd.Interactive @text="Create support ticket" @href="#" />
-                  <dd.Interactive @text="Give feedback" @href="#" />
-                </Hds::Dropdown>
-                <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
-                  <dd.ToggleIcon @icon="user" @text="user menu" />
-                  <dd.Title @text="Signed In" />
-                  <dd.Description @text="email@domain.com" />
-                  <dd.Interactive @text="Account Settings" @href="#" />
-                </Hds::Dropdown>
-              </:actions>
-            </Hds::SideNav::Header>
-          </:header>
-
-          <:body>
-            <Hds::SideNav::List as |S|>
-              <S.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-
-              <S.Title>Services</S.Title>
-              <S.Link @text="Boundary" @icon="boundary" @href="#" />
-              <S.Link @text="Consul" @icon="consul" @href="#" />
-              <S.Link @text="Packer" @icon="packer" @href="#" />
-              <S.Link @text="Vault" @icon="vault" @href="#" />
-              <S.Link @text="Vault Secrets" @icon="lock" @href="#" />
-              <S.Link @text="Terraform" @icon="terraform" @href="#" />
-              <S.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-              <S.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
-
-              <S.Title>Default Org</S.Title>
-              <S.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-              <S.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
-              <S.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
-              <S.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
-            </Hds::SideNav::List>
-          </:body>
-
-          <:footer>
-            OrgSelect / ContextSwitcher
-          </:footer>
-        </Hds::SideNav::Wrapper>
-      </div>
-    </SF.Item>
-
-    <SF.Item @label="With multiple 'list' (nav) containers & extra button in header">
-      <div class="shw-component-sim-side-nav-root-container">
-        <Hds::SideNav::Wrapper>
-          <:header>
-            <Hds::SideNav::Header>
-              <:logo>
-                <Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
-              </:logo>
-              <:actions>
-                <Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" />
-                <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
-                  <dd.ToggleIcon @icon="help" @text="settings menu" />
-                  <dd.Title @text="Help & Support" />
-                  <dd.Interactive @text="Documentation" @href="#" />
-                  <dd.Interactive @text="Tutorials" @href="#" />
-                  <dd.Interactive @text="Terraform Provider" @href="#" />
-                  <dd.Interactive @text="Changelog" @href="#" />
-                  <dd.Separator />
-                  <dd.Interactive @text="Create support ticket" @href="#" />
-                  <dd.Interactive @text="Give feedback" @href="#" />
-                </Hds::Dropdown>
-                <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
-                  <dd.ToggleIcon @icon="user" @text="user menu" />
-                  <dd.Title @text="Signed In" />
-                  <dd.Description @text="email@domain.com" />
-                  <dd.Interactive @href="#" @text="Account Settings" />
-                </Hds::Dropdown>
-              </:actions>
-            </Hds::SideNav::Header>
-          </:header>
-
-          <:body>
-            <Hds::SideNav::List as |S|>
-              <S.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-            </Hds::SideNav::List>
-
-            <Hds::SideNav::List as |S|>
-              <S.Title>Services</S.Title>
-
-              <S.Link @text="Boundary" @icon="boundary" @href="#" />
-              <S.Link @text="Consul" @icon="consul" @href="#" />
-              <S.Link @text="Packer" @icon="packer" @href="#" />
-              <S.Link @text="Vault" @icon="vault" @href="#" />
-              <S.Link @text="Vault Secrets" @icon="lock" @href="#" />
-              <S.Link @text="Terraform" @icon="terraform" @href="#" />
-              <S.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-              <S.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
-            </Hds::SideNav::List>
-
-            <Hds::SideNav::List as |S|>
-              <S.Title>Default Org</S.Title>
-
-              <S.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-              <S.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
-              <S.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
-              <S.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
-            </Hds::SideNav::List>
-          </:body>
-
-          <:footer>
-            OrgSelect / ContextSwitcher
-          </:footer>
-        </Hds::SideNav::Wrapper>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-
-</section>
-
-<Shw::Divider />
-
-<section data-test-percy>
-  <Shw::Text::H2>SideNav::Wrapper</Shw::Text::H2>
+  <Shw::Text::H3>With generic content</Shw::Text::H3>
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Header + Body + Footer">
       <div class="shw-component-sim-side-nav-root-container">
-        <Hds::SideNav::Wrapper>
+        <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
           <:header>
             <Shw::Placeholder @height="72px" @text="header" @background="#e4e4e4" />
           </:header>
@@ -157,12 +25,12 @@
           <:footer>
             <Shw::Placeholder @height="36px" @text="footer" @background="#e4e4e4" />
           </:footer>
-        </Hds::SideNav::Wrapper>
+        </Hds::SideNav>
       </div>
     </SF.Item>
     <SF.Item @label="Header (with extra) + Body (with extra) + Footer">
       <div class="shw-component-sim-side-nav-root-container">
-        <Hds::SideNav::Wrapper>
+        <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
           <:header>
             <Shw::Placeholder @height="72px" @text="header" @background="#e4e4e4" />
             <Shw::Placeholder @height="60px" @text="extra content for 'header'" @background="#e4c5f3" />
@@ -174,12 +42,12 @@
           <:footer>
             <Shw::Placeholder @height="36px" @text="footer" @background="#e4e4e4" />
           </:footer>
-        </Hds::SideNav::Wrapper>
+        </Hds::SideNav>
       </div>
     </SF.Item>
     <SF.Item @label="Header + Body (scrollable) + Footer">
       <div class="shw-component-sim-side-nav-root-container">
-        <Hds::SideNav::Wrapper>
+        <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
           <:header>
             <Shw::Placeholder @height="72px" @text="header" @background="#e4e4e4" />
           </:header>
@@ -189,10 +57,37 @@
           <:footer>
             <Shw::Placeholder @height="36px" @text="footer" @background="#e4e4e4" />
           </:footer>
-        </Hds::SideNav::Wrapper>
+        </Hds::SideNav>
       </div>
     </SF.Item>
   </Shw::Flex>
+
+  <Shw::Text::H3>With content injected via "portal"</Shw::Text::H3>
+
+  <Shw::Flex as |SF|>
+    <SF.Item @label="Header + Body with PortalTarget/Portal + Footer">
+      <div class="shw-component-sim-side-nav-root-container">
+        <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
+          <:header>
+            <Shw::Placeholder @height="72px" @text="header" @background="#e4e4e4" />
+          </:header>
+          <:body>
+            <Hds::SideNav::Portal::Target @targetName="sidenav-portal-demo-1" />
+          </:body>
+          <:footer>
+            <Shw::Placeholder @height="36px" @text="footer" @background="#e4e4e4" />
+          </:footer>
+        </Hds::SideNav>
+      </div>
+    </SF.Item>
+  </Shw::Flex>
+
+  <Hds::SideNav::Portal @targetName="sidenav-portal-demo-1" as |Nav|>
+    <Nav.extraBefore><Shw::Placeholder @height="72px" @text="extraBefore" @background="#f3d9c5" /></Nav.extraBefore>
+    <Nav.Item><Shw::Placeholder @height="200px" @text="portaled content" @background="#e4e4e4" /></Nav.Item>
+    <Nav.extraAfter><Shw::Placeholder @height="72px" @text="extraAfter" @background="#f3d9c5" /></Nav.extraAfter>
+  </Hds::SideNav::Portal>
+
 </section>
 
 <Shw::Divider />
@@ -201,11 +96,11 @@
   <Shw::Text::H2>SideNav::Header</Shw::Text::H2>
 
   <Shw::Flex as |SF|>
-    <SF.Item @label="Logo + Actions">
+    <SF.Item @label="Logo (generic) + Actions (generic)">
       <div class="shw-component-sim-side-nav-header">
         <Hds::SideNav::Header>
           <:logo>
-            <Shw::Placeholder @width="100%" @height="100%" @text="logo" @background="#e4e4e4" />
+            <Shw::Placeholder @height="100%" @width="100%" @text="generic" @background="#e4e4e4" />
           </:logo>
           <:actions>
             <Shw::Placeholder @height="36px" @width="60px" @text="action" @background="#e4e4e4" />
@@ -214,15 +109,44 @@
         </Hds::SideNav::Header>
       </div>
     </SF.Item>
-    <SF.Item @label="HomeLink + Dropdowns">
+    <SF.Item @label="Logo (HomeLink) + Actions (Dropdowns)">
       <div class="shw-component-sim-side-nav-header">
         <Hds::SideNav::Header>
           <:logo>
-            <Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+            <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
           </:logo>
           <:actions>
             <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
-              <dd.ToggleIcon @icon="help" @text="settings menu" />
+              <dd.ToggleIcon @icon="help" @text="help menu" />
+              <dd.Title @text="Help & Support" />
+              <dd.Interactive @text="Documentation" @href="#" />
+              <dd.Interactive @text="Tutorials" @href="#" />
+              <dd.Interactive @text="Terraform Provider" @href="#" />
+              <dd.Interactive @text="Changelog" @href="#" />
+              <dd.Separator />
+              <dd.Interactive @text="Create support ticket" @href="#" />
+              <dd.Interactive @text="Give feedback" @href="#" />
+            </Hds::Dropdown>
+            <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
+              <dd.ToggleIcon @icon="user" @text="user menu" />
+              <dd.Title @text="Signed In" />
+              <dd.Description @text="email@domain.com" />
+              <dd.Interactive @href="#" @text="Account Settings" />
+            </Hds::Dropdown>
+          </:actions>
+        </Hds::SideNav::Header>
+      </div>
+    </SF.Item>
+    <SF.Item @label="Logo (HomeLink) + Actions (IconButton + Dropdowns)">
+      <div class="shw-component-sim-side-nav-header">
+        <Hds::SideNav::Header>
+          <:logo>
+            <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+          </:logo>
+          <:actions>
+            <Hds::SideNav::Header::IconButton @icon="terminal-screen" @ariaLabel="Terminal" />
+            <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
+              <dd.ToggleIcon @icon="help" @text="help menu" />
               <dd.Title @text="Help & Support" />
               <dd.Interactive @text="Documentation" @href="#" />
               <dd.Interactive @text="Tutorials" @href="#" />
@@ -245,22 +169,22 @@
   </Shw::Flex>
 </section>
 
-<Shw::Divider />
+<Shw::Divider @level={{2}} />
 
 <section data-test-percy>
-  <Shw::Text::H2>SideNav::HomeLink</Shw::Text::H2>
+  <Shw::Text::H3>SideNav::Header::HomeLink</Shw::Text::H3>
 
-  <Shw::Text::H3>Content</Shw::Text::H3>
+  <Shw::Text::H4>Content</Shw::Text::H4>
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Icon">
       <div class="shw-component-side-nav-home-link-wrapper">
-        <Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+        <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
       </div>
     </SF.Item>
     <SF.Item @label="Icon with custom color">
       <div class="shw-component-side-nav-home-link-wrapper">
-        <Hds::SideNav::HomeLink
+        <Hds::SideNav::Header::HomeLink
           @icon="boundary"
           @ariaLabel="Boundary"
           @color="var(--token-color-boundary-brand)"
@@ -270,14 +194,19 @@
     </SF.Item>
   </Shw::Flex>
 
-  <Shw::Text::H3>States</Shw::Text::H3>
+  <Shw::Text::H4>States</Shw::Text::H4>
 
   <Shw::Flex as |SF|>
     {{#let (array "default" "hover" "active" "focus") as |states|}}
       {{#each states as |state|}}
         <SF.Item @label={{state}}>
           <div class="shw-component-side-nav-home-link-wrapper">
-            <Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" mock-state-value={{state}} />
+            <Hds::SideNav::Header::HomeLink
+              @icon="hashicorp"
+              @ariaLabel="HashiCorp"
+              @href="#"
+              mock-state-value={{state}}
+            />
           </div>
         </SF.Item>
       {{/each}}
@@ -288,7 +217,7 @@
       {{#each states as |state|}}
         <SF.Item>
           <div class="shw-component-side-nav-home-link-wrapper">
-            <Hds::SideNav::HomeLink
+            <Hds::SideNav::Header::HomeLink
               @icon="boundary"
               @ariaLabel="Boundary"
               @color="var(--token-color-boundary-brand)"
@@ -302,18 +231,18 @@
   </Shw::Flex>
 </section>
 
-<Shw::Divider />
+<Shw::Divider @level={{2}} />
 
 <section data-test-percy>
-  <Shw::Text::H2>SideNav::IconButton</Shw::Text::H2>
+  <Shw::Text::H3>SideNav::Header::IconButton</Shw::Text::H3>
 
-  <Shw::Text::H3>States</Shw::Text::H3>
+  <Shw::Text::H4>States</Shw::Text::H4>
   <Shw::Flex as |SF|>
     {{#let (array "default" "hover" "active" "focus") as |states|}}
       {{#each states as |state|}}
         <SF.Item @label={{state}}>
           <div class="shw-component-sim-side-nav-elem-wrapper">
-            <Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" mock-state-value={{state}} />
+            <Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" mock-state-value={{state}} />
           </div>
         </SF.Item>
       {{/each}}
@@ -331,52 +260,52 @@
   <Shw::Flex as |SF|>
     <SF.Item @label="Title with multiple items">
       <div class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List as |S|>
-          <S.Title>Services</S.Title>
-
-          <S.Link @text="Boundary" @icon="boundary" @href="#" />
-          <S.Link @text="Consul" @icon="consul" @href="#" />
-          <S.Link @text="Packer" @icon="packer" @href="#" />
-          <S.Link @text="Vault" @icon="vault" @href="#" />
-          <S.Link @text="Vault Secrets" @icon="lock" @badge="Alpha" @href="#" />
-          <S.Link @text="Terraform" @icon="terraform" @href="#" />
-          <S.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-          <S.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} @href="#" />
-
-          <S.Title>Default Org</S.Title>
-
-          <S.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-          <S.Link @text="Access control (IAM)" @icon="users" @href="#" />
-          <S.Link @text="Billing" @icon="credit-card" @href="#" />
-          <S.Link @text="Settings" @icon="settings" @href="#" />
+        <Hds::SideNav::List as |SNL|>
+          <SNL.Title>Services</SNL.Title>
+
+          <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
+          <SNL.Link @text="Consul" @icon="consul" @href="#" />
+          <SNL.Link @text="Packer" @icon="packer" @href="#" />
+          <SNL.Link @text="Vault" @icon="vault" @href="#" />
+          <SNL.Link @text="Vault Secrets" @icon="lock" @badge="Alpha" @href="#" />
+          <SNL.Link @text="Terraform" @icon="terraform" @href="#" />
+          <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
+          <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} @href="#" />
+
+          <SNL.Title>Default Org</SNL.Title>
+
+          <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
+          <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" />
+          <SNL.Link @text="Billing" @icon="credit-card" @href="#" />
+          <SNL.Link @text="Settings" @icon="settings" @href="#" />
         </Hds::SideNav::List>
       </div>
     </SF.Item>
 
     <SF.Item @label="Multiple groups">
       <div class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List as |S|>
-          <S.Link @text="Dashboard" @icon="dashboard" @href="#" />
+        <Hds::SideNav::List as |SNL|>
+          <SNL.Link @text="Dashboard" @icon="dashboard" @href="#" />
         </Hds::SideNav::List>
-        <Hds::SideNav::List as |S|>
-          <S.Title>Services</S.Title>
-
-          <S.Link @text="Boundary" @icon="boundary" @href="#" />
-          <S.Link @text="Consul" @icon="consul" @href="#" />
-          <S.Link @text="Packer" @icon="packer" @href="#" />
-          <S.Link @text="Vault" @icon="vault" @href="#" />
-          <S.Link @text="Vault Secrets" @icon="lock" @badge="Alpha" @href="#" />
-          <S.Link @text="Terraform" @icon="terraform" @href="#" />
-          <S.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-          <S.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} @href="#" />
+        <Hds::SideNav::List as |SNL|>
+          <SNL.Title>Services</SNL.Title>
+
+          <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
+          <SNL.Link @text="Consul" @icon="consul" @href="#" />
+          <SNL.Link @text="Packer" @icon="packer" @href="#" />
+          <SNL.Link @text="Vault" @icon="vault" @href="#" />
+          <SNL.Link @text="Vault Secrets" @icon="lock" @badge="Alpha" @href="#" />
+          <SNL.Link @text="Terraform" @icon="terraform" @href="#" />
+          <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
+          <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} @href="#" />
         </Hds::SideNav::List>
-        <Hds::SideNav::List as |S|>
-          <S.Title>Default Org</S.Title>
+        <Hds::SideNav::List as |SNL|>
+          <SNL.Title>Default Org</SNL.Title>
 
-          <S.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-          <S.Link @text="Access control (IAM)" @icon="users" @href="#" />
-          <S.Link @text="Billing" @icon="credit-card" @href="#" />
-          <S.Link @text="Settings" @icon="settings" @href="#" />
+          <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
+          <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" />
+          <SNL.Link @text="Billing" @icon="credit-card" @href="#" />
+          <SNL.Link @text="Settings" @icon="settings" @href="#" />
         </Hds::SideNav::List>
       </div>
     </SF.Item>
@@ -589,14 +518,12 @@
       {{/each}}
     {{/let}}
   </Shw::Grid>
-</section>
 
-<Shw::Divider @level={{2}} />
+  <Shw::Divider @level={{2}} />
 
-<section data-test-percy>
-  <Shw::Text::H2>SideNav::List::BackLink</Shw::Text::H2>
+  <Shw::Text::H3>SideNav::List::BackLink</Shw::Text::H3>
 
-  <Shw::Text::H3>Content</Shw::Text::H3>
+  <Shw::Text::H4>Content</Shw::Text::H4>
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Base">
@@ -611,7 +538,7 @@
     </SF.Item>
   </Shw::Flex>
 
-  <Shw::Text::H3>States</Shw::Text::H3>
+  <Shw::Text::H4>States</Shw::Text::H4>
 
   <Shw::Grid @columns={{4}} as |SG|>
     {{#let (array "default" "hover" "active" "focus") as |states|}}
@@ -637,4 +564,192 @@
       {{/each}}
     {{/let}}
   </Shw::Grid>
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+
+  <Shw::Text::H2>Other elements (not componentized)</Shw::Text::H2>
+
+  <Shw::Text::Body>⚠️
+    <strong>Notice</strong>: these elements are not actual HDS components, but we showcase them anyway to make sure that
+    their style is not changed accidentally (unfortunately they're difficult to test in isolation).</Shw::Text::Body>
+
+  <Shw::Text::H3>Menu Toggle Button</Shw::Text::H3>
+  <Shw::Flex as |SF|>
+    <SF.Item @label="Minimized (”menu“)">
+      <div class="shw-component-sim-other-elements">
+        <div class="hds-side-nav--is-mobile hds-side-nav--is-minimized">
+          <button class="hds-side-nav__menu-toggle-button" type="button">
+            <FlightIcon @name="menu" @size="24" @stretched={{true}} />
+          </button>
+        </div>
+      </div>
+    </SF.Item>
+    <SF.Item @label="Expanded (“close”)">
+      <div class="shw-component-sim-other-elements">
+        <div class="hds-side-nav--is-mobile hds-side-nav--is-not-minimized">
+          <button class="hds-side-nav__menu-toggle-button" type="button">
+            <FlightIcon @name="x" @size="24" @stretched={{true}} />
+          </button>
+        </div>
+      </div>
+    </SF.Item>
+  </Shw::Flex>
+
+  <Shw::Text::H3>Skip Link (A11y Refocus)</Shw::Text::H3>
+  <Shw::Flex as |SF|>
+    <SF.Item @label="Skip Link">
+      <div class="shw-component-sim-other-elements">
+        <div class="hds-side-nav">
+          <a href="#" class="ember-a11y-refocus-skip-link">Skip to main content</a>
+        </div>
+      </div>
+    </SF.Item>
+  </Shw::Flex>
+
+</section>
+
+<Shw::Divider />
+
+<section data-test-percy>
+  <Shw::Text::H2>Examples of sidebar navigation</Shw::Text::H2>
+
+  <Shw::Grid @columns={{2}} as |SG|>
+
+    <SG.Item>
+      <Shw::Text::H3>Using content injected via portal</Shw::Text::H3>
+      <Shw::Flex as |SF|>
+        <SF.Item @label="With PortalTarget + Portal with “nav” items">
+          <div class="shw-component-sim-side-nav-root-container" {{style height="auto"}}>
+            <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
+              <:header>
+                <Hds::SideNav::Header>
+                  <:logo>
+                    <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+                  </:logo>
+                  <:actions>
+                    <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
+                      <dd.ToggleIcon @icon="help" @text="help menu" />
+                      <dd.Title @text="Help & Support" />
+                      <dd.Interactive @text="Documentation" @href="#" />
+                      <dd.Interactive @text="Tutorials" @href="#" />
+                      <dd.Interactive @text="Terraform Provider" @href="#" />
+                      <dd.Interactive @text="Changelog" @href="#" />
+                      <dd.Separator />
+                      <dd.Interactive @text="Create support ticket" @href="#" />
+                      <dd.Interactive @text="Give feedback" @href="#" />
+                    </Hds::Dropdown>
+                    <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
+                      <dd.ToggleIcon @icon="user" @text="user menu" />
+                      <dd.Title @text="Signed In" />
+                      <dd.Description @text="email@domain.com" />
+                      <dd.Interactive @href="#" @text="Account Settings" />
+                    </Hds::Dropdown>
+                  </:actions>
+                </Hds::SideNav::Header>
+              </:header>
+              <:body>
+                <Hds::SideNav::Portal::Target @targetName="sidenav-portal-demo-2" />
+              </:body>
+              <:footer>
+                OrgSelect / ContextSwitcher
+              </:footer>
+            </Hds::SideNav>
+          </div>
+        </SF.Item>
+      </Shw::Flex>
+      <Hds::SideNav::Portal @targetName="sidenav-portal-demo-2" as |Nav|>
+        <Nav.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
+        <Nav.Title>Services</Nav.Title>
+        <Nav.Link @text="Boundary" @icon="boundary" @href="#" />
+        <Nav.Link @text="Consul" @icon="consul" @href="#" />
+        <Nav.Link @text="Packer" @icon="packer" @href="#" />
+        <Nav.Link @text="Vault" @icon="vault" @href="#" />
+        <Nav.Link @text="Vault Secrets" @icon="lock" @href="#" />
+        <Nav.Link @text="Terraform" @icon="terraform" @href="#" />
+        <Nav.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
+        <Nav.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
+        <Nav.Title>Default Org</Nav.Title>
+        <Nav.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
+        <Nav.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
+        <Nav.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
+        <Nav.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
+        <Nav.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
+      </Hds::SideNav::Portal>
+
+    </SG.Item>
+    <SG.Item>
+      <Shw::Text::H3>Using yielded content</Shw::Text::H3>
+
+      <Shw::Flex as |SF|>
+        <SF.Item @label="With multiple 'list' (nav) containers & extra button in header">
+          <div class="shw-component-sim-side-nav-root-container" {{style height="auto"}}>
+            <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
+              <:header>
+                <Hds::SideNav::Header>
+                  <:logo>
+                    <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+                  </:logo>
+                  <:actions>
+                    <Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" />
+                    <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
+                      <dd.ToggleIcon @icon="help" @text="help menu" />
+                      <dd.Title @text="Help & Support" />
+                      <dd.Interactive @text="Documentation" @href="#" />
+                      <dd.Interactive @text="Tutorials" @href="#" />
+                      <dd.Interactive @text="Terraform Provider" @href="#" />
+                      <dd.Interactive @text="Changelog" @href="#" />
+                      <dd.Separator />
+                      <dd.Interactive @text="Create support ticket" @href="#" />
+                      <dd.Interactive @text="Give feedback" @href="#" />
+                    </Hds::Dropdown>
+                    <Hds::Dropdown class="hds-side-nav__dropdown" @listPosition="left" as |dd|>
+                      <dd.ToggleIcon @icon="user" @text="user menu" />
+                      <dd.Title @text="Signed In" />
+                      <dd.Description @text="email@domain.com" />
+                      <dd.Interactive @href="#" @text="Account Settings" />
+                    </Hds::Dropdown>
+                  </:actions>
+                </Hds::SideNav::Header>
+              </:header>
+
+              <:body>
+                <Hds::SideNav::List as |SNL|>
+                  <SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
+                </Hds::SideNav::List>
+
+                <Hds::SideNav::List as |SNL|>
+                  <SNL.Title>Services</SNL.Title>
+                  <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
+                  <SNL.Link @text="Consul" @icon="consul" @href="#" />
+                  <SNL.Link @text="Packer" @icon="packer" @href="#" />
+                  <SNL.Link @text="Vault" @icon="vault" @href="#" />
+                  <SNL.Link @text="Vault Secrets" @icon="lock" @href="#" />
+                  <SNL.Link @text="Terraform" @icon="terraform" @href="#" />
+                  <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
+                  <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
+                </Hds::SideNav::List>
+
+                <Hds::SideNav::List as |SNL|>
+                  <SNL.Title>Default Org</SNL.Title>
+                  <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
+                  <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
+                  <SNL.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
+                  <SNL.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
+                  <SNL.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
+                </Hds::SideNav::List>
+              </:body>
+
+              <:footer>
+                OrgSelect / ContextSwitcher
+              </:footer>
+            </Hds::SideNav>
+          </div>
+        </SF.Item>
+      </Shw::Flex>
+    </SG.Item>
+  </Shw::Grid>
+
 </section>
\ No newline at end of file
diff --git a/packages/components/tests/integration/components/hds/side-nav/home-link-test.js b/packages/components/tests/integration/components/hds/side-nav/header/home-link-test.js
similarity index 60%
rename from packages/components/tests/integration/components/hds/side-nav/home-link-test.js
rename to packages/components/tests/integration/components/hds/side-nav/header/home-link-test.js
index 59606e4c56..fa73c624c7 100644
--- a/packages/components/tests/integration/components/hds/side-nav/home-link-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/header/home-link-test.js
@@ -15,30 +15,29 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
     resetOnerror();
   });
 
-  // Basic
-
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-home-link" />`
+      hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-home-link" />`
     );
     assert.dom('#test-home-link').hasClass('hds-side-nav__home-link');
   });
 
-  // Test Content / Args
+  // CONTENT
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" @href="https://www.hashicorp.com/" id="test-home-link" />`
+      hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" @href="https://www.hashicorp.com/" id="test-home-link" />`
     );
     assert.dom('.flight-icon-hashicorp').exists();
     assert
       .dom('#test-home-link')
-      .hasAttribute('href', 'https://www.hashicorp.com/');
+      .hasAttribute('href', 'https://www.hashicorp.com/')
+      .hasAttribute('aria-label', 'Hashicorp');
   });
 
   test('it renders the logo with a custom passed in color', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" />`
+      hbs`<Hds::SideNav::Header::HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" />`
     );
     assert
       .dom('.flight-icon-boundary')
@@ -49,23 +48,23 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it should spread all the attributes passed to the component on the element', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-sidenav-homelink" class="my-class" data-test1 data-test2="test" />`
+      hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-side-nav-homelink" class="my-class" data-test1 data-test2="test" />`
     );
-    assert.dom('#test-sidenav-homelink').hasClass('my-class');
-    assert.dom('#test-sidenav-homelink').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-homelink').hasAttribute('data-test2', 'test');
+    assert.dom('#test-side-nav-homelink').hasClass('my-class');
+    assert.dom('#test-side-nav-homelink').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-homelink').hasAttribute('data-test2', 'test');
   });
 
   // ASSERTIONS
 
   test('it should throw an assertion if @ariaLabel is missing/has no value', async function (assert) {
     const errorMessage =
-      '@ariaLabel for "Hds::SideNav::HomeLink" must have a valid value';
+      '@ariaLabel for "Hds::SideNav::Header::HomeLink" ("Logo") must have a valid value';
     assert.expect(2);
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::SideNav::HomeLink @icon="hashicorp" />`);
+    await render(hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" />`);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/packages/components/tests/integration/components/hds/side-nav/icon-button-test.js b/packages/components/tests/integration/components/hds/side-nav/header/icon-button-test.js
similarity index 60%
rename from packages/components/tests/integration/components/hds/side-nav/icon-button-test.js
rename to packages/components/tests/integration/components/hds/side-nav/header/icon-button-test.js
index 083310f198..616e5dff3d 100644
--- a/packages/components/tests/integration/components/hds/side-nav/icon-button-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/header/icon-button-test.js
@@ -15,22 +15,20 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
     resetOnerror();
   });
 
-  // Basic
-
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-icon-button" />`
+      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-icon-button" />`
     );
     assert
       .dom('#test-side-nav-icon-button')
       .hasClass('hds-side-nav__icon-button');
   });
 
-  // Test Content / Args
+  // CONTENT
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" id="test-sidenav-button" />`
+      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" />`
     );
     assert.dom('.flight-icon-search').exists();
   });
@@ -39,27 +37,27 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" id="test-sidenav-button" />`
+      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" />`
     );
-    assert.dom('#test-sidenav-button').hasTagName('button');
+    assert.dom('#test-side-nav-button').hasTagName('button');
   });
 
   test('it should render a <a> link if @href is passed', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-sidenav-button" />`
+      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-side-nav-button" />`
     );
     assert
-      .dom('#test-sidenav-button')
+      .dom('#test-side-nav-button')
       .hasTagName('a')
       .hasAttribute('href', 'https://www.hashicorp.com/');
   });
 
   test('it should render a <a> link if @route is passed', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" @route="utilities.interactive" id="test-sidenav-button" />`
+      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" @route="utilities.interactive" id="test-side-nav-button" />`
     );
     assert
-      .dom('#test-sidenav-button')
+      .dom('#test-side-nav-button')
       .hasTagName('a')
       .hasAttribute('href', '/utilities/interactive');
   });
@@ -68,23 +66,23 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should spread all the attributes passed to the component on the element', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::IconButton @icon="search" @ariaLabel="Search" id="test-sidenav-button" class="my-class" data-test1 data-test2="test" />`
+      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" class="my-class" data-test1 data-test2="test" />`
     );
-    assert.dom('#test-sidenav-button').hasClass('my-class');
-    assert.dom('#test-sidenav-button').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-button').hasAttribute('data-test2', 'test');
+    assert.dom('#test-side-nav-button').hasClass('my-class');
+    assert.dom('#test-side-nav-button').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-button').hasAttribute('data-test2', 'test');
   });
 
   // ASSERTIONS
 
   test('it should throw an assertion if @ariaLabel is missing/has no value', async function (assert) {
     const errorMessage =
-      '@ariaLabel for "Hds::SideNav::IconButton" must have a valid value';
+      '@ariaLabel for "Hds::SideNav::Header::IconButton" must have a valid value';
     assert.expect(2);
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::SideNav::IconButton @icon="search" />`);
+    await render(hbs`<Hds::SideNav::Header::IconButton @icon="search" />`);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/packages/components/tests/integration/components/hds/side-nav/header-test.js b/packages/components/tests/integration/components/hds/side-nav/header/index-test.js
similarity index 65%
rename from packages/components/tests/integration/components/hds/side-nav/header-test.js
rename to packages/components/tests/integration/components/hds/side-nav/header/index-test.js
index 7b0aa3c79d..b500806661 100644
--- a/packages/components/tests/integration/components/hds/side-nav/header-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/header/index-test.js
@@ -11,38 +11,36 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | hds/side-nav/header', function (hooks) {
   setupRenderingTest(hooks);
 
-  // Basic
-
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(hbs`<Hds::SideNav::Header id="test-side-nav-header"/>`);
     assert.dom('#test-side-nav-header').hasClass('hds-side-nav-header');
   });
 
-  // Test Content / Args
+  // CONTENT
 
   test('it renders passed in content', async function (assert) {
     await render(hbs`
       <Hds::SideNav::Header>
         <:logo>
-          <div id="test-sidenav-logo"></div>
+          <div id="test-side-nav-logo"></div>
         </:logo>
         <:actions>
-          <div id="test-sidenav-actions"></div>
+          <div id="test-side-nav-actions"></div>
         </:actions>
       </Hds::SideNav::Header>
     `);
-    assert.dom('#test-sidenav-logo').exists();
-    assert.dom('#test-sidenav-actions').exists();
+    assert.dom('#test-side-nav-logo').exists();
+    assert.dom('#test-side-nav-actions').exists();
   });
 
   // ATTRIBUTES
 
   test('it should spread all the attributes passed to the component on the element', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header id="test-sidenav-header" class="my-class" data-test1 data-test2="test" />`
+      hbs`<Hds::SideNav::Header id="test-side-nav-header" class="my-class" data-test1 data-test2="test" />`
     );
-    assert.dom('#test-sidenav-header').hasClass('my-class');
-    assert.dom('#test-sidenav-header').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-header').hasAttribute('data-test2', 'test');
+    assert.dom('#test-side-nav-header').hasClass('my-class');
+    assert.dom('#test-side-nav-header').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-header').hasAttribute('data-test2', 'test');
   });
 });
diff --git a/packages/components/tests/integration/components/hds/side-nav/index-test.js b/packages/components/tests/integration/components/hds/side-nav/index-test.js
new file mode 100644
index 0000000000..72178c506e
--- /dev/null
+++ b/packages/components/tests/integration/components/hds/side-nav/index-test.js
@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import {
+  render,
+  click,
+  triggerKeyEvent,
+  resetOnerror,
+  setupOnerror,
+} from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hds/side-nav/index', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.afterEach(() => {
+    resetOnerror();
+  });
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav id="test-side-nav" @hasA11yRefocus={{false}} />`
+    );
+    assert.dom('#test-side-nav').hasClass('hds-side-nav');
+  });
+
+  // CONTENT
+
+  test('it renders content passed to the named blocks', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav @hasA11yRefocus={{false}}>
+        <:header>
+          <span id="test-side-nav-header" />
+        </:header>
+        <:body>
+          <span id="test-side-nav-body" />
+        </:body>
+        <:footer>
+          <span id="test-side-nav-footer" />
+        </:footer>
+      </Hds::SideNav>
+    `);
+    assert.dom('#test-side-nav-header').exists();
+    assert.dom('#test-side-nav-body').exists();
+    assert.dom('#test-side-nav-footer').exists();
+  });
+
+  // A11Y
+
+  test('it renders the `a11y-refocus` elements by default', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav @hasA11yRefocus={{true}} @a11yRefocusSkipTo="foo" />`
+    );
+    assert.dom('#ember-a11y-refocus-nav-message').exists();
+    assert.dom('#ember-a11y-refocus-skip-link').exists();
+  });
+
+  test('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav
+        @hasA11yRefocus={{true}}
+        @a11yRefocusSkipTo="test-skip-to"
+        @a11yRefocusSkipText="test-skip-text"
+        @a11yRefocusNavigationText="test-navigation-text"
+      />
+    `);
+    assert
+      .dom('#ember-a11y-refocus-nav-message')
+      .hasText('test-navigation-text');
+    assert.dom('#ember-a11y-refocus-skip-link').hasText('test-skip-text');
+    assert
+      .dom('#ember-a11y-refocus-skip-link')
+      .hasAttribute('href', '#test-skip-to');
+  });
+
+  test('it does not render the `a11y-refocus` elements if `hasA11yRefocus` is false', async function (assert) {
+    await render(hbs`<Hds::SideNav @hasA11yRefocus={{false}} />`);
+    assert.dom('#ember-a11y-refocus-nav-message').doesNotExist();
+    assert.dom('#ember-a11y-refocus-skip-link').doesNotExist();
+  });
+
+  // RESPONSIVENESS
+  // unfortunately it doesn't seems to exist a way to test using a "mobile" viewport
+  // so we have to test bits and bobs of the whole responsiveness implementation ¯\_(ツ)_/¯
+
+  test('it is "desktop" by default', async function (assert) {
+    await render(hbs`<Hds::SideNav id="test-side-nav" />`);
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-desktop');
+  });
+
+  test('it is "responsive" by default', async function (assert) {
+    await render(hbs`<Hds::SideNav id="test-side-nav" />`);
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-responsive');
+    assert.dom('.hds-side-nav__overlay').exists();
+    assert.dom('.hds-side-nav__menu-toggle-button').exists();
+  });
+
+  test('it is not "responsive" if `isResponsive` is false', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav id="test-side-nav" @isResponsive={{false}} />`
+    );
+    assert
+      .dom('#test-side-nav')
+      .doesNotHaveClass('hds-side-nav--is-responsive');
+    assert.dom('.hds-side-nav__overlay').doesNotExist();
+    assert.dom('.hds-side-nav__menu-toggle-button').doesNotExist();
+  });
+
+  test('it responds to different events to toggle between "minimized" (by default) and "non-mimimized" states', async function (assert) {
+    await render(hbs`<Hds::SideNav id="test-side-nav" />`);
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
+
+    await click('.hds-side-nav__menu-toggle-button');
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
+
+    await click('.hds-side-nav__menu-toggle-button');
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
+
+    await click('.hds-side-nav__menu-toggle-button');
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
+
+    await click('.hds-side-nav__overlay');
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
+
+    await click('.hds-side-nav__menu-toggle-button');
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
+
+    await triggerKeyEvent(document, 'keydown', 'Escape');
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
+  });
+
+  test('the "minimized" and "non-minimized" states have impact on its internal properties', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav id="test-side-nav">
+        <:header as |H|>
+          <span id="test-side-nav-header" data-test-minimized={{H.isMinimized}} />
+        </:header>
+        <:body as |B|>
+          <span id="test-side-nav-body" data-test-minimized={{B.isMinimized}} />
+        </:body>
+        <:footer as |F|>
+          <span id="test-side-nav-footer" data-test-minimized={{F.isMinimized}} />
+        </:footer>
+      </Hds::SideNav>
+    `);
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
+    assert
+      .dom('.hds-side-nav__menu-toggle-button')
+      .hasAttribute('aria-label', 'Open menu');
+    assert
+      .dom('.hds-side-nav__menu-toggle-button .flight-icon')
+      .hasClass('flight-icon-menu');
+    assert.dom('#test-side-nav-header').hasAttribute('data-test-minimized');
+    assert.dom('#test-side-nav-body').hasAttribute('data-test-minimized');
+    assert.dom('#test-side-nav-footer').hasAttribute('data-test-minimized');
+
+    await click('.hds-side-nav__menu-toggle-button');
+
+    assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
+    assert
+      .dom('.hds-side-nav__menu-toggle-button')
+      .hasAttribute('aria-label', 'Close menu');
+    assert
+      .dom('.hds-side-nav__menu-toggle-button .flight-icon')
+      .hasClass('flight-icon-x');
+    assert
+      .dom('#test-side-nav-header')
+      .doesNotHaveAttribute('data-test-minimized');
+    assert
+      .dom('#test-side-nav-body')
+      .doesNotHaveAttribute('data-test-minimized');
+    assert
+      .dom('#test-side-nav-footer')
+      .doesNotHaveAttribute('data-test-minimized');
+  });
+
+  // ATTRIBUTES
+
+  test('it should spread all the attributes passed to the component on the element', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav id="test-side-nav" class="my-class" data-test1 data-test2="test" @hasA11yRefocus={{false}} />`
+    );
+    assert.dom('#test-side-nav').hasClass('my-class');
+    assert.dom('#test-side-nav').hasAttribute('data-test1');
+    assert.dom('#test-side-nav').hasAttribute('data-test2', 'test');
+  });
+
+  // CALLBACKS
+
+  test('it should call `onToggleMinimizedStatus` function if provided', async function (assert) {
+    let toggled = false;
+    this.set('onToggleMinimizedStatus', () => (toggled = true));
+    await render(
+      hbs`<Hds::SideNav @onToggleMinimizedStatus={{this.onToggleMinimizedStatus}} />`
+    );
+    await click('.hds-side-nav__menu-toggle-button');
+    assert.ok(toggled);
+  });
+
+  // ASSERTIONS
+
+  test('it should throw an assertion if an incorrect value for @type is provided', async function (assert) {
+    const errorMessage =
+      '@a11yRefocusSkipTo for NavigatorNarrator (a11y-refocus) in "Hds::SideNav" must have a valid value';
+    assert.expect(2);
+    setupOnerror(function (error) {
+      assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
+    });
+    await render(hbs`<Hds::SideNav @hasA11yRefocus={{true}} />`);
+    assert.throws(function () {
+      throw new Error(errorMessage);
+    });
+  });
+});
diff --git a/packages/components/tests/integration/components/hds/side-nav/list/back-link-test.js b/packages/components/tests/integration/components/hds/side-nav/list/back-link-test.js
index 63905767ed..57c739a2d3 100644
--- a/packages/components/tests/integration/components/hds/side-nav/list/back-link-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/list/back-link-test.js
@@ -69,11 +69,11 @@ module(
 
     test('it should spread all the attributes passed to the component on the element', async function (assert) {
       await render(
-        hbs`<Hds::SideNav::List::BackLink id="test-sidenav-backlink" class="my-class" data-test1 data-test2="test" />`
+        hbs`<Hds::SideNav::List::BackLink id="test-side-nav-backlink" class="my-class" data-test1 data-test2="test" />`
       );
-      assert.dom('#test-sidenav-backlink').hasClass('my-class');
-      assert.dom('#test-sidenav-backlink').hasAttribute('data-test1');
-      assert.dom('#test-sidenav-backlink').hasAttribute('data-test2', 'test');
+      assert.dom('#test-side-nav-backlink').hasClass('my-class');
+      assert.dom('#test-side-nav-backlink').hasAttribute('data-test1');
+      assert.dom('#test-side-nav-backlink').hasAttribute('data-test2', 'test');
     });
   }
 );
diff --git a/packages/components/tests/integration/components/hds/side-nav/list/index-test.js b/packages/components/tests/integration/components/hds/side-nav/list/index-test.js
index fe3e7aa5f2..fee83b544c 100644
--- a/packages/components/tests/integration/components/hds/side-nav/list/index-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/list/index-test.js
@@ -25,16 +25,16 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
   test('it renders passed in yielded content', async function (assert) {
     await render(hbs`
       <Hds::SideNav::List as |L|>
-        <L.Item id="test-sidenav-list-content-item" />
-        <L.BackLink id="test-sidenav-list-content-backlink" />
-        <L.Title id="test-sidenav-list-content-title" />
-        <L.Link id="test-sidenav-list-content-link" />
+        <L.Item id="test-side-nav-list-content-item" />
+        <L.BackLink id="test-side-nav-list-content-backlink" />
+        <L.Title id="test-side-nav-list-content-title" />
+        <L.Link id="test-side-nav-list-content-link" />
       </Hds::SideNav::List>
     `);
-    assert.dom('#test-sidenav-list-content-item').exists();
-    assert.dom('#test-sidenav-list-content-backlink').exists();
-    assert.dom('#test-sidenav-list-content-title').exists();
-    assert.dom('#test-sidenav-list-content-link').exists();
+    assert.dom('#test-side-nav-list-content-item').exists();
+    assert.dom('#test-side-nav-list-content-backlink').exists();
+    assert.dom('#test-side-nav-list-content-title').exists();
+    assert.dom('#test-side-nav-list-content-link').exists();
   });
 
   // Accessibilty feature
@@ -49,12 +49,10 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
 
   test('it should spread all the attributes passed to the component on the element', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List id="test-sidenav-list" class="my-class" data-test1 data-test2="test" />`
+      hbs`<Hds::SideNav::List id="test-side-nav-list" class="my-class" data-test1 data-test2="test" />`
     );
-    assert.dom('#test-sidenav-list').hasClass('my-class');
-    assert.dom('#test-sidenav-list').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-list').hasAttribute('data-test2', 'test');
+    assert.dom('#test-side-nav-list').hasClass('my-class');
+    assert.dom('#test-side-nav-list').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-list').hasAttribute('data-test2', 'test');
   });
-
-  //role="list"
 });
diff --git a/packages/components/tests/integration/components/hds/side-nav/list/item-test.js b/packages/components/tests/integration/components/hds/side-nav/list/item-test.js
index f076529812..9a22c511ec 100644
--- a/packages/components/tests/integration/components/hds/side-nav/list/item-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/list/item-test.js
@@ -35,10 +35,10 @@ module('Integration | Component | hds/side-nav/list/item', function (hooks) {
 
   test('it should spread all the attributes passed to the component on the element', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Item id="test-sidenav-item" class="my-class" data-test1 data-test2="test" />`
+      hbs`<Hds::SideNav::List::Item id="test-side-nav-item" class="my-class" data-test1 data-test2="test" />`
     );
-    assert.dom('#test-sidenav-item').hasClass('my-class');
-    assert.dom('#test-sidenav-item').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-item').hasAttribute('data-test2', 'test');
+    assert.dom('#test-side-nav-item').hasClass('my-class');
+    assert.dom('#test-side-nav-item').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-item').hasAttribute('data-test2', 'test');
   });
 });
diff --git a/packages/components/tests/integration/components/hds/side-nav/list/link-test.js b/packages/components/tests/integration/components/hds/side-nav/list/link-test.js
index 96d47724dd..fa57e68eb3 100644
--- a/packages/components/tests/integration/components/hds/side-nav/list/link-test.js
+++ b/packages/components/tests/integration/components/hds/side-nav/list/link-test.js
@@ -38,9 +38,9 @@ module('Integration | Component | hds/side-nav/list/link', function (hooks) {
 
   test('it renders the link as "active" if @isActive is true', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link @isActive={{true}} id="test-sidenav-link" />`
+      hbs`<Hds::SideNav::List::Link @isActive={{true}} id="test-side-nav-link" />`
     );
-    assert.dom('#test-sidenav-link').hasClass('active');
+    assert.dom('#test-side-nav-link').hasClass('active');
   });
 
   test('it renders the passed in custom content', async function (assert) {
@@ -83,10 +83,10 @@ module('Integration | Component | hds/side-nav/list/link', function (hooks) {
 
   test('it should spread all the attributes passed to the component on the element', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link id="test-sidenav-link" class="my-class" data-test1 data-test2="test" />`
+      hbs`<Hds::SideNav::List::Link id="test-side-nav-link" class="my-class" data-test1 data-test2="test" />`
     );
-    assert.dom('#test-sidenav-link').hasClass('my-class');
-    assert.dom('#test-sidenav-link').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-link').hasAttribute('data-test2', 'test');
+    assert.dom('#test-side-nav-link').hasClass('my-class');
+    assert.dom('#test-side-nav-link').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-link').hasAttribute('data-test2', 'test');
   });
 });
diff --git a/packages/components/tests/integration/components/hds/side-nav/portal/index-test.js b/packages/components/tests/integration/components/hds/side-nav/portal/index-test.js
new file mode 100644
index 0000000000..842e1264d9
--- /dev/null
+++ b/packages/components/tests/integration/components/hds/side-nav/portal/index-test.js
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, waitUntil } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+// NOTICE: we combine the tests for `PortalTarget` and `Portal` in a single file, because the two components are strictly interconnected
+
+module('Integration | Component | hds/side-nav/portal', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(
+      hbs`<Hds::SideNav::Portal::Target id="test-side-nav-portal-target" />`
+    );
+    assert
+      .dom('#test-side-nav-portal-target')
+      .hasClass('hds-side-nav__content');
+  });
+
+  // CONTENT
+
+  test('it renders the content provided via portal', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target />
+      <Hds::SideNav::Portal>
+        <div id="test-side-nav-content-portaled" />
+      </Hds::SideNav::Portal>
+    `);
+    assert.dom('#test-side-nav-content-portaled').exists();
+  });
+
+  test('we can use custom a custom name for the target portal', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target @targetName="test-side-nav-portal-target" />
+      <Hds::SideNav::Portal @targetName="test-side-nav-portal-target">
+        <div id="test-side-nav-content-portaled" />
+      </Hds::SideNav::Portal>
+    `);
+    assert.dom('#test-side-nav-content-portaled').exists();
+  });
+
+  test('it renders the panel items provided via portal, in the right DOM location', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target id="test-side-nav-content" />
+      <Hds::SideNav::Portal as |Nav|>
+        <Nav.BackLink @text="Back-link" @href="#" id="test-side-nav-list-backlink" />
+        <Nav.Title id="test-side-nav-list-title">Title</Nav.Title>
+        <Nav.Item id="test-side-nav-list-item">Item</Nav.Item>
+        <Nav.Link @icon="hexagon" @text="Link" @href="#" id="test-side-nav-list-link" />
+      </Hds::SideNav::Portal>
+    `);
+    assert
+      .dom(
+        '#test-side-nav-content .hds-side-nav__content-panels .hds-side-nav__content-panel'
+      )
+      .exists();
+    assert
+      .dom('#test-side-nav-list-backlink')
+      .hasClass('hds-side-nav__list-item-link--back-link');
+    assert.dom('#test-side-nav-list-backlink').hasText('Back-link');
+    assert
+      .dom('#test-side-nav-list-title')
+      .hasClass('hds-side-nav__list-title');
+    assert.dom('#test-side-nav-list-title').hasText('Title');
+    assert.dom('#test-side-nav-list-item').hasClass('hds-side-nav__list-item');
+    assert.dom('#test-side-nav-list-item').hasText('Item');
+    assert
+      .dom('#test-side-nav-list-link')
+      .hasClass('hds-side-nav__list-item-link');
+    assert.dom('#test-side-nav-list-link').hasText('Link');
+  });
+
+  // ATTRIBUTES
+
+  test('it should spread all the attributes passed to the portals on the rendered elements', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target id="test-side-nav-portal-target" class="my-class" data-test1 data-test2="test" />
+      <Hds::SideNav::Portal id="test-side-nav-portal" class="my-class" data-test1 data-test2="test">
+        <div/>
+      </Hds::SideNav::Portal>
+    `);
+    assert.dom('#test-side-nav-portal-target').exists();
+    assert.dom('#test-side-nav-portal-target').hasClass('my-class');
+    assert.dom('#test-side-nav-portal-target').hasAttribute('data-test1');
+    assert
+      .dom('#test-side-nav-portal-target')
+      .hasAttribute('data-test2', 'test');
+
+    assert.dom('#test-side-nav-portal').exists();
+    assert.dom('#test-side-nav-portal').hasClass('my-class');
+    assert.dom('#test-side-nav-portal').hasAttribute('data-test1');
+    assert.dom('#test-side-nav-portal').hasAttribute('data-test2', 'test');
+  });
+
+  // A11Y
+
+  test('it should render with the correct aria-label attribute passed down to the "list" parent', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target />
+      <Hds::SideNav::Portal @ariaLabel="test">
+        <div/>
+      </Hds::SideNav::Portal>
+    `);
+    assert
+      .dom('.hds-side-nav__list-wrapper')
+      .hasAttribute('aria-label', 'test');
+  });
+
+  // DOM MANIPULATION
+
+  test('it marks inactive subnavs', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target />
+      <Hds::SideNav::Portal data-test-side-nav-panel as |Nav|>
+        <Nav.Link @text="Some link content" @href="#" />
+      </Hds::SideNav::Portal>
+      <Hds::SideNav::Portal data-test-side-nav-panel as |Nav|>
+        <Nav.Link @text="Some other link content" @href="#" />
+      </Hds::SideNav::Portal>
+      <Hds::SideNav::Portal data-test-side-nav-panel as |Nav|>
+        <Nav.Link @text="The last link content" @href="#" />
+      </Hds::SideNav::Portal>
+    `);
+
+    assert.dom('[data-test-side-nav-panel]').exists({ count: 3 });
+    assert
+      .dom('[data-test-side-nav-panel]:nth-child(1)')
+      .hasStyle({ visibility: 'hidden' });
+    assert
+      .dom('[data-test-side-nav-panel]:nth-child(2)')
+      .hasStyle({ visibility: 'hidden' });
+    assert
+      .dom('[data-test-side-nav-panel]:nth-child(3)')
+      .hasStyle({ visibility: 'visible' });
+  });
+
+  test('it sets transform on the container', async function (assert) {
+    await render(hbs`
+      <Hds::SideNav::Portal::Target id="test-side-nav-content" />
+      <Hds::SideNav::Portal as |Nav|>
+        <Nav.Link @text="Some link content" @href="#" id="test-side-nav-list-link-1" data-test-side-nav-link-2 />
+      </Hds::SideNav::Portal>
+      <Hds::SideNav::Portal as |Nav|>
+        <Nav.Link @text="Some other link content" @href="#" id="test-side-nav-list-link-2" data-test-side-nav-link-2 />
+      </Hds::SideNav::Portal>
+      <Hds::SideNav::Portal as |Nav|>
+        <Nav.Link @text="The last link content" @href="#" id="test-side-nav-list-link-3" data-test-side-nav-link-3 />
+      </Hds::SideNav::Portal>
+    `);
+
+    // we need to wait for
+    let animationDone = false;
+    await waitUntil(function () {
+      setTimeout(() => {
+        animationDone = true;
+      }, 1000);
+      return animationDone;
+    });
+
+    // element.animate() API, converts transforms into matricies so
+    // 'matrix(1, 0, 0, 1, -560, 0)' is the same as translateX('-560px')
+    assert
+      .dom('.hds-side-nav__content-panels')
+      .hasStyle({ transform: 'matrix(1, 0, 0, 1, -560, 0)' });
+  });
+});
diff --git a/packages/components/tests/integration/components/hds/side-nav/wrapper-test.js b/packages/components/tests/integration/components/hds/side-nav/wrapper-test.js
deleted file mode 100644
index 089d524d41..0000000000
--- a/packages/components/tests/integration/components/hds/side-nav/wrapper-test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | hds/side-nav/wrapper', function (hooks) {
-  setupRenderingTest(hooks);
-
-  // Basic:
-
-  test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::SideNav::Wrapper id="test-side-nav" />`);
-    assert.dom('#test-side-nav').hasClass('hds-side-nav__wrapper');
-  });
-
-  // Test Content:
-
-  test('it renders content passed to the named blocks', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Wrapper>
-        <:header>
-          <span id="test-sidenav-header" />
-        </:header>
-        <:body>
-          <span id="test-sidenav-body" />
-        </:body>
-        <:footer>
-          <span id="test-sidenav-footer" />
-        </:footer>
-      </Hds::SideNav::Wrapper>
-    `);
-
-    assert.dom('#test-sidenav-header').exists();
-    assert.dom('#test-sidenav-body').exists();
-    assert.dom('#test-sidenav-footer').exists();
-  });
-
-  // ATTRIBUTES
-
-  test('it should spread all the attributes passed to the component on the element', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav::Wrapper id="test-sidenav-wrapper" class="my-class" data-test1 data-test2="test" />`
-    );
-    assert.dom('#test-sidenav-wrapper').hasClass('my-class');
-    assert.dom('#test-sidenav-wrapper').hasAttribute('data-test1');
-    assert.dom('#test-sidenav-wrapper').hasAttribute('data-test2', 'test');
-  });
-});
diff --git a/website/docs/components/side-nav/index.md b/website/docs/components/side-nav/index.md
index 67ae46d23f..084413177a 100644
--- a/website/docs/components/side-nav/index.md
+++ b/website/docs/components/side-nav/index.md
@@ -18,7 +18,7 @@ navigation:
 </section>
 
 <section data-tab="Code">
-  @include "partials/code/how-to-use.md"
+  @include "partials/code/how-to-use_TEMP.md"
   @include "partials/code/component-api.md"
   <!-- @include "partials/code/showcase.md" -->
 </section>
diff --git a/website/docs/components/side-nav/partials/code/component-api.md b/website/docs/components/side-nav/partials/code/component-api.md
index c982280641..47d7c1d6c5 100644
--- a/website/docs/components/side-nav/partials/code/component-api.md
+++ b/website/docs/components/side-nav/partials/code/component-api.md
@@ -1,13 +1,13 @@
 ## Component API
 
-### SideNav::Wrapper
+### SideNav
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="<:header>" @type="named block">
     A named block where the content for the “header” area of the SideNav is rendered. The `SideNav::Header` component should be added here.
   </C.Property>
   <C.Property @name="<:body>" @type="named block">
-    A named block where the content for the “body” or main content of the SideNav is rendered. The `SideNav::List` component, if used, should be added here.
+    A named block where the content for the “body” or main content of the SideNav is rendered. The `SideNav::List` and `SideNav::PortalTarget` components should be added here when used.
   </C.Property>
   <C.Property @name="<:footer>" @type="named block">
     A named block where the content for the “footer” section of the SideNav is rendered.
@@ -31,17 +31,14 @@
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::HomeLink
+### SideNav::Header::HomeLink
 
-The `SideNav::HomeLink` component uses the generic `Hds::Interactive` component. For more details about this utility component please refer to [its documentation page](/utilities/interactive).
+The `SideNav::Header::HomeLink` component uses the generic `Hds::Interactive` component. For more details about this utility component please refer to [its documentation page](/utilities/interactive).
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="icon" @type="string">
     Used to show an icon. Any [icon](/icons/library) name is accepted. Typically you would add the icon name for your product.
   </C.Property>
-  <C.Property @name="ariaLabel" @type="string" @required="true">
-    The value of the aria-label. If no text value is defined an error will be thrown.
-  </C.Property>
   <C.Property @name="color" @type="string">
     Used to specify an optional custom color provided as any valid CSS color. For more details on acceptable values, see the [FlightIcon color argument](/icons/usage-guidelines?tab=code#fill). If unspecified, it will use the SideNav’s default white text color.
   </C.Property>
@@ -57,22 +54,22 @@ The `SideNav::HomeLink` component uses the generic `Hds::Interactive` component.
   <C.Property @name="isRouteExternal" @type="boolean" @values={{array "false" "true" }} @default="false">
     This controls if the “LinkTo” is external to the Ember engine, in which case it will use a `<LinkToExternal>` for the `@route`.
   </C.Property>
+  <C.Property @name="ariaLabel" @type="string" @required="true">
+    The value of the aria-label. If no text value is defined an error will be thrown.
+  </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::IconButton
+### SideNav::Header::IconButton
 
-The `SideNav::IconButton` component uses the generic `Hds::Interactive` component. For more details about this utility component please refer to [its documentation page](/utilities/interactive).
+The `SideNav::Header::IconButton` component uses the generic `Hds::Interactive` component. For more details about this utility component please refer to [its documentation page](/utilities/interactive).
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="icon" @type="string">
     Used to show an icon. Any [icon](/icons/library) name is accepted.
   </C.Property>
-  <C.Property @name="ariaLabel" @type="string" @required="true">
-    The value of the `aria-label`. If no text value is defined an error will be thrown.
-  </C.Property>
   <C.Property @name="href">
     URL parameter that’s passed down to the `<a>` element.
   </C.Property>
@@ -85,65 +82,90 @@ The `SideNav::IconButton` component uses the generic `Hds::Interactive` componen
   <C.Property @name="isRouteExternal" @type="boolean" @values={{array "false" "true" }} @default="false">
     This controls if the “LinkTo” is external to the Ember engine, in which case it will use a `<LinkToExternal>` for the `@route`.
   </C.Property>
+  <C.Property @name="ariaLabel" @type="string" @required="true">
+    The value of the `aria-label`. If no text value is defined an error will be thrown.
+  </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::List
+### SideNav::PortalTarget
 
-The `SideNav::List` component is used to wrap and contain the `SideNav::List::Title`, `SideNav::List::Link`, `SideNav::List::BackLink` and `SideNav::List::Item` components.
+The `SideNav::PortalTarget` component is used to receive some content "transported" through the portal and inject it into its position in the DOM tree. For details about how portals work refer to the [`ember-stargate` documentation](https://github.com/simonihmig/ember-stargate).
+
+!!! Info
+
+The component is implemented to support [multiple portals](https://github.com/simonihmig/ember-stargate#portaltarget).
+
+!!!
 
 <Doc::ComponentApi as |C|>
+  <C.Property @name="targetName" @type="string" @values={{array "hds-side-nav-portal-target" "string" }} @default="hds-side-nav-portal-target">
+    The unique name used by [`ember-stargate`](https://github.com/simonihmig/ember-stargate#usage) to identify the portal. If provided, the same name must be used in the `SideNav::Portal` to point to the correct target.
+  </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::List::Title
+### SideNav::Portal
 
-The `SideNav::List::Title` component is used to display a title for related `SideNav::List::Link` components.
+The `SideNav::Portal` component is used to "transport" some content through the portal into the target element. For details about how portals work refer to the [`ember-stargate` documentation](https://github.com/simonihmig/ember-stargate).
+
+The content yielded in the component is injected inside a `Hds::SideNav::List` element (hence all its sub-components available as yielded components).
 
 <Doc::ComponentApi as |C|>
+  <C.Property @name="<[P].extraBefore/Item/BackLink/Title/Link/extraAfter>" @type="yielded component">
+    Sub-components yielded from `Hds::SideNav::List` (see below).
+  </C.Property>
+  <C.Property @name="targetName" @type="string" @values={{array "hds-side-nav-portal-target" "string" }} @default="hds-side-nav-portal-target">
+    The unique name used by [`ember-stargate`](https://github.com/simonihmig/ember-stargate#usage) to identify the target portal. If provided, the same name must be used in the `SideNav::PortalTarget` to identify it.
+  </C.Property>
+  <C.Property @name="ariaLabel" @type="string">
+    The value of the `aria-label` that is applied to the `<nav>` element in the `Hds::SideNav::List` component.
+  </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::List::Link
 
-The `SideNav::List::Link` component uses the generic `Hds::Interactive` component. For more details about this utility component please refer to [its documentation page](/utilities/interactive).
+### SideNav::List
+
+The `SideNav::List` component is used to wrap and contain the `SideNav::List::Title`, `SideNav::List::Link`, `SideNav::List::BackLink` and `SideNav::List::Item` components.
 
 <Doc::ComponentApi as |C|>
-  <C.Property @name="icon" @type="string">
-    Used to show an icon. Any [icon](/icons/library) name is accepted.
+  <C.Property @name="<[L].extraBefore>" @type="yielded component">
+    Container that yields its content before the `<ul>` list of items (but inside the `<nav>` wrapper)
   </C.Property>
-  <C.Property @name="text" @type="string">
-    The text content for the `SideNav::List::Link` component.
+  <C.Property @name="<[L].Item>" @type="yielded component">
+    The generic `SideNav::List::Item` component (see below).
   </C.Property>
-  <C.Property @name="badge" @type="string">
-    Displays an optional `Badge`. Accepts the text value that should go in [Badge](/components/badge).
-  </C.Property>
-  <C.Property @name="count" @type="string">
-    Displays an optional `BadgeCount` indicator. Accepts the text value that should go in [Badge Count](/components/badge-count).
-  </C.Property>
-  <C.Property @name="hasSubItems" @type="boolean" @values={{array "false" "true" }} @default="false">
-    Indicates the existence of sub-item links. If set to `true`, displays a right aligned `chevron-right` icon.
+  <C.Property @name="<[L].BackLink>" @type="yielded component">
+    The `SideNav::List::BackLink` component (see below).
   </C.Property>
-  <C.Property @name="isActive" @values={{array "false" "true" }} @default="false">
-    If set to `true`, adds the class name of “active” to the rendered interactive element. Used to indicate the currently active page Link.
+  <C.Property @name="<[L].Title>" @type="yielded component">
+    The `SideNav::List::Title` component (see below).
   </C.Property>
-  <C.Property @name="href">
-    URL parameter that’s passed down to the `<a>` element.
+  <C.Property @name="<[L].Link>" @type="yielded component">
+    The `SideNav::List::Link` component (see below).
   </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean" @values={{array "false" "true" }} @default="false">
-    This controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. If set to `true`, displays a right aligned “external-link” icon.
+  <C.Property @name="<[L].extraAfter>" @type="yielded component">
+    Container that yields its content after the `<ul>` list of items (but inside the `<nav>` wrapper)
   </C.Property>
-  <C.Property @name="route/models/model/query/current-when/replace">
-    Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.
+  <C.Property @name="...attributes">
+    This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
-  <C.Property @name="isRouteExternal" @type="boolean" @values={{array "false" "true" }} @default="false">
-    This controls if the “LinkTo” is external to the Ember engine, in which case it will use a `<LinkToExternal>` for the `@route`.
+</Doc::ComponentApi>
+
+### SideNav::List::Item
+
+The `SideNav::List::Item` component can be used to contain generic content.
+
+<Doc::ComponentApi as |C|>
+  <C.Property @name="yield">
+    Elements passed as children of this component are yielded inside the `<li>` element.
   </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
@@ -175,12 +197,59 @@ The `SideNav::List::BackLink` component uses the generic `Hds::Interactive` comp
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::List::Item
+### SideNav::List::Title
+
+The `SideNav::List::Title` component is used to display a title for related `SideNav::List::Link` components.
+
+<Doc::ComponentApi as |C|>
+  <C.Property @name="yield">
+    Elements passed as children of this component are yielded inside the element.
+  </C.Property>
+  <C.Property @name="...attributes">
+    This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
+  </C.Property>
+</Doc::ComponentApi>
 
-The `SideNav::List::Item` component can be used to contain non-interactive generic content.
+### SideNav::List::Link
+
+The `SideNav::List::Link` component uses the generic `Hds::Interactive` component. For more details about this utility component please refer to [its documentation page](/utilities/interactive).
 
 <Doc::ComponentApi as |C|>
+  <C.Property @name="icon" @type="string">
+    Used to show an icon. Any [icon](/icons/library) name is accepted.
+  </C.Property>
+  <C.Property @name="text" @type="string">
+    The text content for the `SideNav::List::Link` component.
+  </C.Property>
+  <C.Property @name="badge" @type="string">
+    Displays an optional `Badge`. Accepts the text value that should go in [Badge](/components/badge).
+  </C.Property>
+  <C.Property @name="count" @type="string">
+    Displays an optional `BadgeCount` indicator. Accepts the text value that should go in [Badge Count](/components/badge-count).
+  </C.Property>
+  <C.Property @name="hasSubItems" @type="boolean" @values={{array "false" "true" }} @default="false">
+    Indicates the existence of sub-item links. If set to `true`, displays a right aligned `chevron-right` icon.
+  </C.Property>
+  <C.Property @name="isActive" @values={{array "false" "true" }} @default="false">
+    If set to `true`, adds the class name of “active” to the rendered interactive element. Used to indicate the currently active page Link.
+  </C.Property>
+  <C.Property @name="href">
+    URL parameter that’s passed down to the `<a>` element.
+  </C.Property>
+  <C.Property @name="isHrefExternal" @type="boolean" @values={{array "false" "true" }} @default="false">
+    This controls if the `<a>` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. If set to `true`, displays a right aligned “external-link” icon.
+  </C.Property>
+  <C.Property @name="route/models/model/query/current-when/replace">
+    Parameters that are passed down as arguments to the `<LinkTo>`/`<LinkToExternal>` components.
+  </C.Property>
+  <C.Property @name="isRouteExternal" @type="boolean" @values={{array "false" "true" }} @default="false">
+    This controls if the “LinkTo” is external to the Ember engine, in which case it will use a `<LinkToExternal>` for the `@route`.
+  </C.Property>
+  <C.Property @name="yield">
+    Elements passed as children of this component are yielded inside the element (after the leading icon/text/badge/count block, before the trailing icon).
+  </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
 </Doc::ComponentApi>
+
diff --git a/website/docs/components/side-nav/partials/code/how-to-use.md b/website/docs/components/side-nav/partials/code/how-to-use_OLD.md
similarity index 88%
rename from website/docs/components/side-nav/partials/code/how-to-use.md
rename to website/docs/components/side-nav/partials/code/how-to-use_OLD.md
index d64aa5529b..f1d36550fe 100644
--- a/website/docs/components/side-nav/partials/code/how-to-use.md
+++ b/website/docs/components/side-nav/partials/code/how-to-use_OLD.md
@@ -2,17 +2,17 @@
 
 SideNav does not exist as a single out of the box HDS component. Instead, it consists of a number of lower-level building block components consumers can use to assemble their own SideNav implementation.
 
-**Note:** The `Hds::SideNav::Wrapper` component, which contains the child components, doesn't have an intrinsic width (it's 100% of the parent). This responsibility is delegated to the wrapping element in the consumer's codebase.
+**Note:** The `Hds::SideNav` component, which contains the child components, doesn’t have an intrinsic width (it’s 100% of the parent). This responsibility is delegated to the wrapping element in the consumer’s codebase.
 
 ### Basic example using typical SideNav components
 
 ```handlebars
   <div class="doc-sidenav-demo">
-    <Hds::SideNav::Wrapper>
+    <Hds::SideNav>
       <:header>
         <Hds::SideNav::Header>
           <:logo>
-            <Hds::SideNav::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+            <Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
           </:logo>
 
           <:actions>
@@ -62,6 +62,6 @@ SideNav does not exist as a single out of the box HDS component. Instead, it con
       <:footer>
         <Doc::Placeholder @height="30px" @text="footer content (eg: OrgSelect/ContextSwitcher)" @background="#e4e4e4" />
       </:footer>
-    </Hds::SideNav::Wrapper>
+    </Hds::SideNav>
   </div>
 ```
\ No newline at end of file
diff --git a/website/docs/components/side-nav/partials/code/how-to-use_TEMP.md b/website/docs/components/side-nav/partials/code/how-to-use_TEMP.md
new file mode 100644
index 0000000000..970fafc33d
--- /dev/null
+++ b/website/docs/components/side-nav/partials/code/how-to-use_TEMP.md
@@ -0,0 +1,11 @@
+## How to use this component
+
+!!! Critical
+
+**Documentation update in progress**
+
+The documentation for the `SideNav` component is being updated, following a recent refactoring.
+
+For the time being, if you need to adopt this component refer to the [Component API](#component-api) documentation below (which is up-to-date) or contact the HDS team—specifically Cristiano Rastelli—to get help.
+
+!!!
diff --git a/website/docs/layouts/app-frame/partials/code/how-to-use.md b/website/docs/layouts/app-frame/partials/code/how-to-use.md
index d9cf81756d..16e928d1d6 100644
--- a/website/docs/layouts/app-frame/partials/code/how-to-use.md
+++ b/website/docs/layouts/app-frame/partials/code/how-to-use.md
@@ -124,3 +124,20 @@ If the “modal“ container is empty, a `display: none` style is applied to it.
   </Hds::AppFrame>
 </div>
 ```
+
+If the content is injected dynamically—eg. via JavaScript or via Ember "portals"—you can assign an ID to the HTML element so that it can be targeted in the DOM by the code:
+
+```handlebars{data-execute=false}
+<div class="doc-app-frame-mock-viewport">
+  <Hds::AppFrame as |Frame|>
+    <Frame.Sidebar>
+      ...
+    </Frame.Sidebar>
+    <Frame.Main>
+      ...
+    </Frame.Main>
+    {{! assign an ID to the element to target it in the DOM }}
+    <Frame.Modals id="app-frame-modals" data-test-modals-container />
+  </Hds::AppFrame>
+</div>
+```
diff --git a/yarn.lock b/yarn.lock
index 6d48520548..893fb22d01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1337,7 +1337,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.14.0, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -2193,6 +2193,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@embroider/addon-shim@npm:^1.2.0":
+  version: 1.8.4
+  resolution: "@embroider/addon-shim@npm:1.8.4"
+  dependencies:
+    "@embroider/shared-internals": ^2.0.0
+    broccoli-funnel: ^3.0.8
+    semver: ^7.3.8
+  checksum: 107220e97bbd46ead81dfbbfc6cf7daa61731096a6e81b989659a9a0b29b48b3c97ebdd446b6dc0636c4be369f3744e514b7f5e5c0fdc54c1c0e026f54404cc2
+  languageName: node
+  linkType: hard
+
 "@embroider/macros@npm:^0.50.0 || ^1.0.0, @embroider/macros@npm:^1.0.0, @embroider/macros@npm:^1.10.0, @embroider/macros@npm:^1.2.0, @embroider/macros@npm:^1.8.1":
   version: 1.10.0
   resolution: "@embroider/macros@npm:1.10.0"
@@ -2461,7 +2472,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@glimmer/tracking@npm:^1.0.4, @glimmer/tracking@npm:^1.1.2":
+"@glimmer/tracking@npm:^1.0.0, @glimmer/tracking@npm:^1.0.4, @glimmer/tracking@npm:^1.1.2":
   version: 1.1.2
   resolution: "@glimmer/tracking@npm:1.1.2"
   dependencies:
@@ -2551,6 +2562,7 @@ __metadata:
     babel-eslint: ^10.1.0
     broccoli-asset-rev: ^3.0.0
     dialog-polyfill: ^0.5.6
+    ember-a11y-refocus: ^3.0.2
     ember-a11y-testing: ^5.2.0
     ember-auto-import: ^2.6.0
     ember-body-class: ^3.0.0
@@ -2578,6 +2590,7 @@ __metadata:
     ember-resolver: ^10.0.0
     ember-source: ~4.10.0
     ember-source-channel-url: ^3.0.0
+    ember-stargate: ^0.4.3
     ember-style-modifier: ^0.8.0
     ember-template-lint: ^4.18.2
     ember-template-lint-plugin-prettier: ^4.1.0
@@ -10148,6 +10161,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ember-resources@npm:^5.0.1":
+  version: 5.6.4
+  resolution: "ember-resources@npm:5.6.4"
+  dependencies:
+    "@babel/runtime": ^7.17.8
+    "@embroider/addon-shim": ^1.2.0
+    "@embroider/macros": ^1.2.0
+  peerDependencies:
+    "@ember/test-waiters": ^3.0.0
+    "@glimmer/component": ^1.1.2
+    "@glimmer/tracking": ^1.1.2
+    "@glint/template": ">= 0.8.3"
+    ember-concurrency: ^2.0.0
+    ember-source: ">= 3.28.0"
+  peerDependenciesMeta:
+    "@ember/test-waiters":
+      optional: true
+    "@glimmer/component":
+      optional: true
+    ember-concurrency:
+      optional: true
+  checksum: 9edb126ee307251080380d421aba42f330f76c6e295046ae59b48c3162d27e83223732e398f8373f933d120f38831e791e0fd31e63c70315982166db399d2b33
+  languageName: node
+  linkType: hard
+
 "ember-rfc176-data@npm:^0.3.13, ember-rfc176-data@npm:^0.3.15, ember-rfc176-data@npm:^0.3.17":
   version: 0.3.17
   resolution: "ember-rfc176-data@npm:0.3.17"
@@ -10260,6 +10298,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ember-stargate@npm:^0.4.3":
+  version: 0.4.3
+  resolution: "ember-stargate@npm:0.4.3"
+  dependencies:
+    "@ember/render-modifiers": ^2.0.0
+    "@embroider/addon-shim": ^1.0.0
+    "@glimmer/component": ^1.1.2
+    ember-resources: ^5.0.1
+    tracked-maps-and-sets: ^3.0.1
+  checksum: b41c0dd65c59e298d0a9f9b31fd5035b7824d8ebc0a92b47d52dc559b553ade3e9126bc4f647521138f09b34f80ed297300b6d428583b9a294de5071d5890bf6
+  languageName: node
+  linkType: hard
+
 "ember-style-modifier@npm:^0.8.0":
   version: 0.8.0
   resolution: "ember-style-modifier@npm:0.8.0"
@@ -10368,6 +10419,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ember-tracked-storage-polyfill@npm:1.0.0":
+  version: 1.0.0
+  resolution: "ember-tracked-storage-polyfill@npm:1.0.0"
+  dependencies:
+    ember-cli-babel: ^7.26.3
+    ember-cli-htmlbars: ^5.7.1
+  checksum: f0e1df126b17cd58a78e81cf73e6a3fa8b7052e3e7058537cce9f658463b0e7f5c3fa1baebff85e19617f5eab1fa762a9dd1f17738b7baca50ef5481dc20d672
+  languageName: node
+  linkType: hard
+
 "ember-truth-helpers@npm:^2.1.0 || ^3.0.0, ember-truth-helpers@npm:^3.0.0, ember-truth-helpers@npm:^3.1.1":
   version: 3.1.1
   resolution: "ember-truth-helpers@npm:3.1.1"
@@ -19927,6 +19988,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tracked-maps-and-sets@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "tracked-maps-and-sets@npm:3.0.2"
+  dependencies:
+    "@glimmer/tracking": ^1.0.0
+    ember-cli-babel: ^7.26.6
+    ember-cli-typescript: ^4.2.1
+    ember-tracked-storage-polyfill: 1.0.0
+  checksum: 3bcd53d27c751d4d7355457d7639fb6c9cf93f8d3b9a955b04805809b628b2fdb62b1899313c2bc7a92b64817a26d2fc648452d5f662de967767351439b70f11
+  languageName: node
+  linkType: hard
+
 "tree-sync@npm:^1.2.2":
   version: 1.4.0
   resolution: "tree-sync@npm:1.4.0"