diff --git a/.changeset/bitter-baboons-tease.md b/.changeset/bitter-baboons-tease.md
new file mode 100644
index 00000000000..fe7f31e6d73
--- /dev/null
+++ b/.changeset/bitter-baboons-tease.md
@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/flyout -->
+`Flyout` - Removed deprecated `HdsFlyoutHeader`, `HdsFlyoutBody`, `HdsFlyoutDescription`, and `HdsFlyoutFooter` subcomponents.
+<!-- END -->
+
+<!-- START components/modal -->
+`Modal` - Removed deprecated `HdsModalHeader`, `HdsModalBody`, and `HdsModalFooter` subcomponents.
+<!-- END -->
diff --git a/.changeset/cold-worlds-notice.md b/.changeset/cold-worlds-notice.md
new file mode 100644
index 00000000000..26319a386e3
--- /dev/null
+++ b/.changeset/cold-worlds-notice.md
@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/dropdown -->
+
+`Dropdown` - Removed the deprecated `@text` argument from the `HdsDropdownListItemInteractive` component.
+
+To migrate run the codemod `v4/dropdown-list-item-interactive` (see [readme file](https://github.com/hashicorp/design-system/tree/main/packages/codemods/transforms/v4/dropdown-list-item-interactive))
+
+<!-- END -->
diff --git a/.changeset/fluffy-places-ask.md b/.changeset/fluffy-places-ask.md
new file mode 100644
index 00000000000..b11a17ba1c9
--- /dev/null
+++ b/.changeset/fluffy-places-ask.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed support for Ember 3.28. New minimum support target is Ember 4.12.
diff --git a/.changeset/full-showers-kiss.md b/.changeset/full-showers-kiss.md
new file mode 100644
index 00000000000..d5426a68e97
--- /dev/null
+++ b/.changeset/full-showers-kiss.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+- Removed `sass` and `ember-cli-sass` dependencies. Consumers using `sass` in their projects should make sure it's added as a direct dependency to their project.
diff --git a/.changeset/hot-owls-rescue.md b/.changeset/hot-owls-rescue.md
new file mode 100644
index 00000000000..582a7dff51a
--- /dev/null
+++ b/.changeset/hot-owls-rescue.md
@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/table/advanced-table -->
+`AdvancedTable` - Removed the `@isVisuallyHidden` argument from `HdsAdvancedTableTh` component. This setting is supported via setting `isVisuallyHidden` in the corresponding `@columns` item's configuration.
+<!-- END -->
diff --git a/.changeset/legal-swans-occur.md b/.changeset/legal-swans-occur.md
new file mode 100644
index 00000000000..6b641130ada
--- /dev/null
+++ b/.changeset/legal-swans-occur.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed the deprecated `MenuPrimitive` component
diff --git a/.changeset/spicy-ads-roll.md b/.changeset/spicy-ads-roll.md
new file mode 100644
index 00000000000..b0af1b042a1
--- /dev/null
+++ b/.changeset/spicy-ads-roll.md
@@ -0,0 +1,10 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+<!-- START components/side-nav -->
+`SideNav` - Removed deprecated features
+- Removed the `@ariaLabel` argument
+- Removed the `HdsSideNavHeaderIconButton` component
+- Updated the deprecation removal version from `5.0.0` to `6.0.0`
+<!-- END -->
diff --git a/.changeset/young-meals-knock.md b/.changeset/young-meals-knock.md
new file mode 100644
index 00000000000..b46136cbbb0
--- /dev/null
+++ b/.changeset/young-meals-knock.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": major
+---
+
+Removed support for deprecated `ember-flight-icons` `lazyEmbed` config
diff --git a/.github/workflows/ci-components.yml b/.github/workflows/ci-components.yml
index 4a12cf5a824..a148994dea9 100644
--- a/.github/workflows/ci-components.yml
+++ b/.github/workflows/ci-components.yml
@@ -7,7 +7,7 @@ on:
   pull_request: {}
 
 env:
-  NODE_VERSION: '22.x'
+  NODE_VERSION: "22.x"
 
 concurrency:
   group: ci-components-${{ github.head_ref || github.ref }}
@@ -28,7 +28,7 @@ jobs:
         run: ./.github/scripts/filter_changed_files.sh "packages/components" "packages/flight-icons/catalog.json" "showcase" ".github/workflows/ci-components.yml" "packages/tokens"
 
   test:
-    name: 'Tests'
+    name: "Tests"
     runs-on: ubuntu-latest
     needs: [conditional-skip]
     if: needs.conditional-skip.outputs.trigger-ci == 'true'
@@ -63,13 +63,12 @@ jobs:
   try-scenarios:
     name: ${{ matrix.try-scenario }}
     runs-on: ubuntu-latest
-    needs: 'test'
+    needs: "test"
 
     strategy:
       fail-fast: false
       matrix:
         try-scenario:
-          - ember-lts-3.28
           - ember-lts-4.12
           # - ember-release
           - ember-beta
diff --git a/README.md b/README.md
index 4f98f324b50..609e335cfb0 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+<!-- TEMPORARY ADDITION SO BRANCH DIVERGES FROM MAIN -->
+
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://github.com/hashicorp/design-system/assets/788096/5d6969b7-f8b4-4ad3-9ece-b16b4527522e" width="300">
   <source media="(prefers-color-scheme: light)" srcset="https://github.com/hashicorp/design-system/assets/788096/8e278094-427f-40cc-912f-9ccd3a0ff879" width="300">
diff --git a/packages/components/README.md b/packages/components/README.md
index 8f6899d81a5..c414d5a1df4 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -8,9 +8,9 @@ A package containing the components for the Helios Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.28 or above
-* Ember CLI v3.28 or above
-* Node.js v16 or above
+* Ember.js v4.12 or above
+* Ember CLI v4.12 or above
+* Node.js v18 or above
 
 Installation
 ------------------------------------------------------------------------------
diff --git a/packages/components/addon-main.cjs b/packages/components/addon-main.cjs
index 7c2c6ad22d6..797c851c5f9 100644
--- a/packages/components/addon-main.cjs
+++ b/packages/components/addon-main.cjs
@@ -9,11 +9,8 @@ const flightIconSprite = require('@hashicorp/flight-icons/svg-sprite/svg-sprite-
 module.exports = {
   ...addonV1Shim(__dirname),
   contentFor(type, config) {
-    const legacyLazyEmbed = config?.emberFlightIcons?.lazyEmbed;
-
     if (
       !config.flightIconsSpriteLazyEmbed &&
-      !legacyLazyEmbed &&
       !config.__flightIconsSpriteLoaded &&
       type === 'body-footer'
     ) {
diff --git a/packages/components/package.json b/packages/components/package.json
index 6112a99e819..857ae38cb8d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -59,7 +59,6 @@
     "codemirror-lang-hcl": "^0.0.0-beta.2",
     "decorator-transforms": "^2.3.0",
     "ember-a11y-refocus": "^4.1.4",
-    "ember-cli-sass": "^11.0.1",
     "ember-concurrency": "^4.0.4",
     "ember-element-helper": "^0.8.6",
     "ember-focus-trap": "^1.1.1",
@@ -71,10 +70,9 @@
     "ember-truth-helpers": "^4.0.3",
     "luxon": "^3.4.2",
     "prismjs": "^1.30.0",
-    "sass": "^1.83.0",
-    "tracked-built-ins": "^4.0.0",
     "tabbable": "^6.2.0",
-    "tippy.js": "^6.3.7"
+    "tippy.js": "^6.3.7",
+    "tracked-built-ins": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
@@ -113,6 +111,7 @@
     "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.89.2",
     "stylelint": "^16.17.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^14.0.0",
@@ -236,10 +235,6 @@
       "./components/hds/dropdown/toggle/button.js": "./dist/_app_/components/hds/dropdown/toggle/button.js",
       "./components/hds/dropdown/toggle/chevron.js": "./dist/_app_/components/hds/dropdown/toggle/chevron.js",
       "./components/hds/dropdown/toggle/icon.js": "./dist/_app_/components/hds/dropdown/toggle/icon.js",
-      "./components/hds/flyout/body.js": "./dist/_app_/components/hds/flyout/body.js",
-      "./components/hds/flyout/description.js": "./dist/_app_/components/hds/flyout/description.js",
-      "./components/hds/flyout/footer.js": "./dist/_app_/components/hds/flyout/footer.js",
-      "./components/hds/flyout/header.js": "./dist/_app_/components/hds/flyout/header.js",
       "./components/hds/flyout.js": "./dist/_app_/components/hds/flyout.js",
       "./components/hds/form/character-count.js": "./dist/_app_/components/hds/form/character-count.js",
       "./components/hds/form/checkbox/base.js": "./dist/_app_/components/hds/form/checkbox/base.js",
@@ -305,10 +300,6 @@
       "./components/hds/layout/grid/item.js": "./dist/_app_/components/hds/layout/grid/item.js",
       "./components/hds/link/inline.js": "./dist/_app_/components/hds/link/inline.js",
       "./components/hds/link/standalone.js": "./dist/_app_/components/hds/link/standalone.js",
-      "./components/hds/menu-primitive.js": "./dist/_app_/components/hds/menu-primitive.js",
-      "./components/hds/modal/body.js": "./dist/_app_/components/hds/modal/body.js",
-      "./components/hds/modal/footer.js": "./dist/_app_/components/hds/modal/footer.js",
-      "./components/hds/modal/header.js": "./dist/_app_/components/hds/modal/header.js",
       "./components/hds/modal.js": "./dist/_app_/components/hds/modal.js",
       "./components/hds/page-header/actions.js": "./dist/_app_/components/hds/page-header/actions.js",
       "./components/hds/page-header/badges.js": "./dist/_app_/components/hds/page-header/badges.js",
@@ -333,7 +324,6 @@
       "./components/hds/separator.js": "./dist/_app_/components/hds/separator.js",
       "./components/hds/side-nav/base.js": "./dist/_app_/components/hds/side-nav/base.js",
       "./components/hds/side-nav/header/home-link.js": "./dist/_app_/components/hds/side-nav/header/home-link.js",
-      "./components/hds/side-nav/header/icon-button.js": "./dist/_app_/components/hds/side-nav/header/icon-button.js",
       "./components/hds/side-nav/header.js": "./dist/_app_/components/hds/side-nav/header.js",
       "./components/hds/side-nav.js": "./dist/_app_/components/hds/side-nav.js",
       "./components/hds/side-nav/list/back-link.js": "./dist/_app_/components/hds/side-nav/list/back-link.js",
@@ -392,6 +382,8 @@
       "./modifiers/hds-code-editor/palettes/hds-dark-palette.js": "./dist/_app_/modifiers/hds-code-editor/palettes/hds-dark-palette.js",
       "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
+      "./modifiers/hds-lifecycle.js": "./dist/_app_/modifiers/hds-lifecycle.js",
+      "./modifiers/hds-register-element.js": "./dist/_app_/modifiers/hds-register-element.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts
index 400dc061324..fb1b5c4d9b8 100644
--- a/packages/components/src/components.ts
+++ b/packages/components/src/components.ts
@@ -279,7 +279,6 @@ export { default as HdsSideNav } from './components/hds/side-nav/index.ts';
 export { default as HdsSideNavBase } from './components/hds/side-nav/base.ts';
 export { default as HdsSideNavHeader } from './components/hds/side-nav/header/index.ts';
 export { default as HdsSideNavHeaderHomeLink } from './components/hds/side-nav/header/home-link.ts';
-export { default as HdsSideNavHeaderIconButton } from './components/hds/side-nav/header/icon-button.ts';
 export { default as HdsSideNavList } from './components/hds/side-nav/list/index.ts';
 export { default as HdsSideNavListBackLink } from './components/hds/side-nav/list/back-link.ts';
 export { default as HdsSideNavListItem } from './components/hds/side-nav/list/item.ts';
@@ -390,8 +389,5 @@ export { default as HdsDismissButton } from './components/hds/dismiss-button/ind
 // Interactive
 export { default as HdsInteractive } from './components/hds/interactive/index.ts';
 
-// MenuPrimitive
-export { default as HdsMenuPrimitive } from './components/hds/menu-primitive/index.ts';
-
 // PopoverPrimitive
 export { default as HdsPopoverPrimitive } from './components/hds/popover-primitive/index.ts';
diff --git a/packages/components/src/components/hds/advanced-table/index.hbs b/packages/components/src/components/hds/advanced-table/index.hbs
index 8f8bae33e58..2c6e876c204 100644
--- a/packages/components/src/components/hds/advanced-table/index.hbs
+++ b/packages/components/src/components/hds/advanced-table/index.hbs
@@ -6,8 +6,8 @@
 <div
   class="hds-advanced-table__container
     {{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
-  {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}
-  {{did-update this.updateTableModelColumnOrder @columnOrder}}
+  {{this._syncTableData columns=@columns model=@model sortBy=@sortBy sortOrder=@sortOrder}}
+  {{this._syncColumnOrder columnOrder=@columnOrder}}
   ...attributes
 >
   {{! Caption }}
@@ -84,7 +84,6 @@
               @isExpandable={{column.isExpandable}}
               @isStickyColumn={{this._isStickyColumn column}}
               @isStickyColumnPinned={{this.isStickyColumnPinned}}
-              @isVisuallyHidden={{column.isVisuallyHidden}}
               @tableHeight={{this._tableHeight}}
               @tooltip={{column.tooltip}}
               @onClickToggle={{this._tableModel.toggleAll}}
diff --git a/packages/components/src/components/hds/advanced-table/index.ts b/packages/components/src/components/hds/advanced-table/index.ts
index a5bfae87784..372f45a3ec6 100644
--- a/packages/components/src/components/hds/advanced-table/index.ts
+++ b/packages/components/src/components/hds/advanced-table/index.ts
@@ -10,6 +10,7 @@ import { tracked } from '@glimmer/tracking';
 import { guidFor } from '@ember/object/internals';
 import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
+import { schedule } from '@ember/runloop';
 import HdsAdvancedTableTableModel from './models/table.ts';
 
 import type Owner from '@ember/owner';
@@ -196,6 +197,25 @@ export interface HdsAdvancedTableSignature {
   Element: HTMLDivElement;
 }
 
+interface HdsAdvancedTableSyncTableDataModifierSignature {
+  Element: HdsAdvancedTableSignature['Element'];
+  Args: {
+    Named: Pick<
+      HdsAdvancedTableSignature['Args'],
+      'columns' | 'model' | 'sortBy' | 'sortOrder'
+    >;
+  };
+}
+
+interface HdsAdvancedTableSyncColumnOrderModifierSignature {
+  Element: HdsAdvancedTableSignature['Element'];
+  Args: {
+    Named: {
+      columnOrder?: HdsAdvancedTableSignature['Args']['columnOrder'];
+    };
+  };
+}
+
 export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignature> {
   @service hdsIntl!: HdsIntlService;
 
@@ -426,6 +446,50 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     return classes.join(' ');
   }
 
+  private _syncTableData = (() => {
+    let isFirstRun = true;
+
+    return modifier<HdsAdvancedTableSyncTableDataModifierSignature>(
+      (_element, _positional, { columns, model, sortBy, sortOrder }) => {
+        // eslint-disable-next-line ember/no-runloop
+        schedule('afterRender', (): void => {
+          if (isFirstRun) {
+            isFirstRun = false;
+            return;
+          }
+          this._tableModel.setupData({
+            columns,
+            model,
+            sortBy,
+            sortOrder,
+          });
+        });
+      }
+    );
+  })();
+
+  private _syncColumnOrder = (() => {
+    let isFirstRun = true;
+
+    return modifier<HdsAdvancedTableSyncColumnOrderModifierSignature>(
+      (_element, _positional, { columnOrder }) => {
+        // eslint-disable-next-line ember/no-runloop
+        schedule('afterRender', (): void => {
+          if (isFirstRun) {
+            isFirstRun = false;
+            return;
+          }
+
+          if (columnOrder === undefined) {
+            return;
+          }
+
+          this._tableModel.columnOrder = columnOrder;
+        });
+      }
+    );
+  })();
+
   private _registerGridElement = modifier((element: HTMLDivElement) => {
     this._tableModel.gridElement = element;
   });
@@ -613,27 +677,6 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     });
   }
 
-  @action
-  setupTableModelData(): void {
-    const { columns, model, sortBy, sortOrder } = this.args;
-
-    this._tableModel.setupData({
-      columns,
-      model,
-      sortBy,
-      sortOrder,
-    });
-  }
-
-  @action
-  updateTableModelColumnOrder(): void {
-    if (this.args.columnOrder === undefined) {
-      return;
-    }
-
-    this._tableModel.columnOrder = this.args.columnOrder;
-  }
-
   @action
   onSelectionAllChange(): void {
     this._selectableRows.forEach((row) => {
diff --git a/packages/components/src/components/hds/advanced-table/th.ts b/packages/components/src/components/hds/advanced-table/th.ts
index 04e2d84f436..d3531a443cb 100644
--- a/packages/components/src/components/hds/advanced-table/th.ts
+++ b/packages/components/src/components/hds/advanced-table/th.ts
@@ -44,7 +44,6 @@ export interface HdsAdvancedTableThSignature {
     isExpandable?: boolean;
     isStickyColumn?: boolean;
     isStickyColumnPinned?: boolean;
-    isVisuallyHidden?: boolean;
     newLabel?: string;
     parentId?: string;
     rowspan?: number;
diff --git a/packages/components/src/components/hds/alert/description.hbs b/packages/components/src/components/hds/alert/description.hbs
index fc97c4e9d04..a8433cfedd8 100644
--- a/packages/components/src/components/hds/alert/description.hbs
+++ b/packages/components/src/components/hds/alert/description.hbs
@@ -2,4 +2,8 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-alert__description hds-font-weight-regular hds-foreground-primary" ...attributes>{{yield}}</div>
\ No newline at end of file
+<div
+  class="hds-alert__description hds-font-weight-regular hds-foreground-primary"
+  {{this._registerElement}}
+  ...attributes
+>{{yield}}</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/alert/description.ts b/packages/components/src/components/hds/alert/description.ts
index 7767669d206..e9f8b8d72fe 100644
--- a/packages/components/src/components/hds/alert/description.ts
+++ b/packages/components/src/components/hds/alert/description.ts
@@ -3,16 +3,23 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import TemplateOnlyComponent from '@ember/component/template-only';
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 
 export interface HdsAlertDescriptionSignature {
+  Args: {
+    onInsert: (element: HdsAlertDescriptionSignature['Element']) => void;
+  };
   Blocks: {
     default: [];
   };
   Element: HTMLDivElement;
 }
 
-const HdsAlertDescription =
-  TemplateOnlyComponent<HdsAlertDescriptionSignature>();
-
-export default HdsAlertDescription;
+export default class HdsAlertDescription extends Component<HdsAlertDescriptionSignature> {
+  private _registerElement = modifier(
+    (element: HdsAlertDescriptionSignature['Element']) => {
+      this.args.onInsert(element);
+    }
+  );
+}
diff --git a/packages/components/src/components/hds/alert/index.hbs b/packages/components/src/components/hds/alert/index.hbs
index e00894d8ebc..1adfb0c12e6 100644
--- a/packages/components/src/components/hds/alert/index.hbs
+++ b/packages/components/src/components/hds/alert/index.hbs
@@ -4,10 +4,9 @@
 }}
 <div
   class={{this.classNames}}
-  role={{this._role}}
-  aria-live={{if this._role "polite"}}
+  role={{this.role}}
+  aria-live={{if this.role "polite"}}
   aria-labelledby={{this._ariaLabelledBy}}
-  {{did-insert this.didInsert}}
   ...attributes
 >
   {{#if this.icon}}
@@ -16,10 +15,10 @@
     </div>
   {{/if}}
 
-  <div class="hds-alert__content">
+  <div class="hds-alert__content" {{this._registerActions}}>
     <div class="hds-alert__text {{if (eq @type 'compact') 'hds-typography-body-100' 'hds-typography-body-200'}}">
-      {{yield (hash Title=(component "hds/alert/title"))}}
-      {{yield (hash Description=(component "hds/alert/description"))}}
+      {{yield (hash Title=(component "hds/alert/title" onInsert=this._registerTitle))}}
+      {{yield (hash Description=(component "hds/alert/description" onInsert=this._registerDescription))}}
     </div>
 
     <div class="hds-alert__actions">
diff --git a/packages/components/src/components/hds/alert/index.ts b/packages/components/src/components/hds/alert/index.ts
index b147b911f19..5e58aed7dfb 100644
--- a/packages/components/src/components/hds/alert/index.ts
+++ b/packages/components/src/components/hds/alert/index.ts
@@ -8,6 +8,7 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
 
 import { HdsAlertColorValues, HdsAlertTypeValues } from './types.ts';
 
@@ -16,6 +17,8 @@ import type HdsButtonComponent from '../button';
 import type HdsLinkStandaloneComponent from '../link/standalone';
 import type { HdsYieldSignature } from '../yield';
 import type { HdsAlertColors, HdsAlertTypes } from './types.ts';
+import type HdsAlertTitleComponent from './title.ts';
+import type HdsAlertDescriptionComponent from './description.ts';
 import type { HdsAlertTitleSignature } from './title.ts';
 import type { HdsAlertDescriptionSignature } from './description.ts';
 import type { HdsIconSignature } from '../icon';
@@ -25,6 +28,12 @@ export const TYPES: HdsAlertTypes[] = Object.values(HdsAlertTypeValues);
 export const DEFAULT_COLOR: HdsAlertColors = HdsAlertColorValues.Neutral;
 export const COLORS: HdsAlertColors[] = Object.values(HdsAlertColorValues);
 
+const SEMANTIC_COLORS: HdsAlertColors[] = [
+  HdsAlertColorValues.Warning,
+  HdsAlertColorValues.Critical,
+  HdsAlertColorValues.Success,
+];
+
 export const MAPPING_COLORS_TO_ICONS = {
   [HdsAlertColorValues.Neutral]: 'info',
   [HdsAlertColorValues.Highlight]: 'info',
@@ -33,10 +42,6 @@ export const MAPPING_COLORS_TO_ICONS = {
   [HdsAlertColorValues.Critical]: 'alert-diamond',
 } as const;
 
-const CONTENT_ELEMENT_SELECTOR = '.hds-alert__content';
-const TITLE_ELEMENT_SELECTOR = '.hds-alert__title';
-const DESCRIPTION_ELEMENT_SELECTOR = '.hds-alert__description';
-
 export interface HdsAlertSignature {
   Args: {
     type: HdsAlertTypes;
@@ -48,8 +53,11 @@ export interface HdsAlertSignature {
   Blocks: {
     default: [
       {
-        Title?: ComponentLike<HdsAlertTitleSignature>;
-        Description?: ComponentLike<HdsAlertDescriptionSignature>;
+        Title?: WithBoundArgs<typeof HdsAlertTitleComponent, 'onInsert'>;
+        Description?: WithBoundArgs<
+          typeof HdsAlertDescriptionComponent,
+          'onInsert'
+        >;
         Generic?: ComponentLike<HdsYieldSignature>;
         LinkStandalone?: WithBoundArgs<
           typeof HdsLinkStandaloneComponent,
@@ -65,6 +73,10 @@ export interface HdsAlertSignature {
 export default class HdsAlert extends Component<HdsAlertSignature> {
   @tracked private _role?: string;
   @tracked private _ariaLabelledBy?: string;
+  @tracked private _actions: NodeListOf<Element> | null = null;
+  @tracked private _titleElement?: HdsAlertTitleSignature['Element'];
+  @tracked
+  private _descriptionElement?: HdsAlertDescriptionSignature['Element'];
 
   constructor(owner: Owner, args: HdsAlertSignature['Args']) {
     super(owner, args);
@@ -91,6 +103,11 @@ export default class HdsAlert extends Component<HdsAlertSignature> {
     return color;
   }
 
+  // an Alert which actually alerts users (has role="alert" & aria-live="polite") as opposed to an informational or promo "alert"
+  get isSemantic(): boolean {
+    return SEMANTIC_COLORS.includes(this.color);
+  }
+
   // The name of the icon to be used.
   get icon(): HdsIconSignature['Args']['name'] | false {
     const { icon } = this.args;
@@ -150,33 +167,46 @@ export default class HdsAlert extends Component<HdsAlertSignature> {
     return classes.join(' ');
   }
 
-  @action
-  didInsert(element: HTMLDivElement): void {
-    const actions = element.querySelectorAll(
-      `${CONTENT_ELEMENT_SELECTOR} button, ${CONTENT_ELEMENT_SELECTOR} a`
-    );
+  get role(): 'alertdialog' | 'alert' | undefined {
+    if (this.isSemantic && this._actions && this._actions.length > 0) {
+      return 'alertdialog';
+    } else if (this.isSemantic) {
+      return 'alert';
+    } else {
+      return undefined;
+    }
+  }
 
-    // an Alert which actually alerts users (has role="alert" & aria-live="polite") as opposed to an informational or promo "alert"
-    const isSemanticAlert: boolean =
-      this.color === 'warning' ||
-      this.color === 'critical' ||
-      this.color === 'success';
+  get labelElement(): HdsAlertTitleSignature['Element'] | undefined {
+    return this._titleElement ?? this._descriptionElement;
+  }
 
-    if (isSemanticAlert && actions.length) {
-      this._role = 'alertdialog';
-    } else if (isSemanticAlert) {
-      this._role = 'alert';
-    }
+  private _registerActions = modifier((element: HTMLDivElement) => {
+    this._actions = element.querySelectorAll('button, a');
+  });
 
-    // `alertdialog` must have an accessible name so we use either the
-    // title or the description as label for the alert
-    const label =
-      element.querySelector(TITLE_ELEMENT_SELECTOR) ||
-      element.querySelector(DESCRIPTION_ELEMENT_SELECTOR);
-    if (label) {
-      const labelId = label.getAttribute('id') || guidFor(element);
-      label.setAttribute('id', labelId);
-      this._ariaLabelledBy = labelId;
+  private _setLabelElementId() {
+    if (this.labelElement === undefined) {
+      return;
     }
+
+    const labelId =
+      this.labelElement.getAttribute('id') ?? guidFor(this.labelElement);
+
+    this.labelElement.setAttribute('id', labelId);
+
+    this._ariaLabelledBy = labelId;
+  }
+
+  @action
+  _registerTitle(element: HdsAlertTitleSignature['Element']): void {
+    this._titleElement = element;
+    this._setLabelElementId();
+  }
+
+  @action
+  _registerDescription(element: HdsAlertDescriptionSignature['Element']): void {
+    this._descriptionElement = element;
+    this._setLabelElementId();
   }
 }
diff --git a/packages/components/src/components/hds/alert/title.hbs b/packages/components/src/components/hds/alert/title.hbs
index 6096883f60b..27f2032e02a 100644
--- a/packages/components/src/components/hds/alert/title.hbs
+++ b/packages/components/src/components/hds/alert/title.hbs
@@ -5,5 +5,6 @@
 {{! IMPORTANT: we removed any extra newlines before/after the `let` to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/1652) }}
 {{#let (element this.componentTag) as |Tag|}}<Tag
     class="hds-alert__title hds-typography-body-200 hds-font-weight-semibold"
+    {{this._registerElement}}
     ...attributes
   >{{yield}}</Tag>{{/let}}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/alert/title.ts b/packages/components/src/components/hds/alert/title.ts
index 4e04c2694ec..6f620dac05f 100644
--- a/packages/components/src/components/hds/alert/title.ts
+++ b/packages/components/src/components/hds/alert/title.ts
@@ -4,11 +4,15 @@
  */
 
 import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 import { HdsAlertTitleTagValues } from './types.ts';
+
 import type { HdsAlertTitleTags } from './types';
+
 export interface HdsAlertTitleSignature {
   Args: {
     tag?: HdsAlertTitleTags;
+    onInsert: (element: HdsAlertTitleSignature['Element']) => void;
   };
   Blocks: {
     default: [];
@@ -20,4 +24,14 @@ export default class HdsAlertTitle extends Component<HdsAlertTitleSignature> {
   get componentTag(): HdsAlertTitleTags {
     return this.args.tag ?? HdsAlertTitleTagValues.Div;
   }
+
+  private _registerElement = modifier(
+    (element: HdsAlertTitleSignature['Element']) => {
+      const { onInsert } = this.args;
+
+      if (typeof onInsert === 'function') {
+        onInsert(element);
+      }
+    }
+  );
 }
diff --git a/packages/components/src/components/hds/app-side-nav/list/index.hbs b/packages/components/src/components/hds/app-side-nav/list/index.hbs
index adb1c30f885..1184cf605c7 100644
--- a/packages/components/src/components/hds/app-side-nav/list/index.hbs
+++ b/packages/components/src/components/hds/app-side-nav/list/index.hbs
@@ -14,7 +14,7 @@
       (hash
         Item=(component "hds/app-side-nav/list/item")
         BackLink=(component "hds/app-side-nav/list/back-link")
-        Title=(component "hds/app-side-nav/list/title" didInsertTitle=this.didInsertTitle)
+        Title=(component "hds/app-side-nav/list/title" registerTitleId=this._registerTitleId)
         Link=(component "hds/app-side-nav/list/link")
       )
     }}
diff --git a/packages/components/src/components/hds/app-side-nav/list/index.ts b/packages/components/src/components/hds/app-side-nav/list/index.ts
index a67d6084748..d01df698dfd 100644
--- a/packages/components/src/components/hds/app-side-nav/list/index.ts
+++ b/packages/components/src/components/hds/app-side-nav/list/index.ts
@@ -4,8 +4,10 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+import { schedule } from '@ember/runloop';
+
 import type { ComponentLike } from '@glint/template';
 import type { HdsYieldSignature } from '../../yield';
 import type { HdsAppSideNavListItemSignature } from './item';
@@ -29,6 +31,10 @@ export interface HdsAppSideNavListSignature {
   Element: HTMLElement;
 }
 
+export interface HdsAppSideNavListRegisterTitleIdModifierSignature {
+  Element: HdsAppSideNavListSignature['Element'];
+}
+
 export default class HdsAppSideNavList extends Component<HdsAppSideNavListSignature> {
   @tracked private _titleIds: string[] = [];
 
@@ -36,8 +42,12 @@ export default class HdsAppSideNavList extends Component<HdsAppSideNavListSignat
     return this._titleIds.join(' ');
   }
 
-  @action
-  didInsertTitle(titleId: string): void {
-    this._titleIds = [...this._titleIds, titleId];
-  }
+  private _registerTitleId =
+    modifier<HdsAppSideNavListRegisterTitleIdModifierSignature>((element) => {
+      // eslint-disable-next-line ember/no-runloop
+      schedule(
+        'afterRender',
+        () => (this._titleIds = [...this._titleIds, element.id])
+      );
+    });
 }
diff --git a/packages/components/src/components/hds/app-side-nav/list/title.hbs b/packages/components/src/components/hds/app-side-nav/list/title.hbs
index c588194b66a..4498ab843d6 100644
--- a/packages/components/src/components/hds/app-side-nav/list/title.hbs
+++ b/packages/components/src/components/hds/app-side-nav/list/title.hbs
@@ -7,7 +7,7 @@
   <div
     class="hds-app-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold"
     id={{this._titleId}}
-    {{did-insert this.didInsertTitle}}
+    {{@registerTitleId}}
     ...attributes
   >{{~yield~}}</div>
 </Hds::AppSideNav::List::Item>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/app-side-nav/list/title.ts b/packages/components/src/components/hds/app-side-nav/list/title.ts
index 75b013a9fad..1529c0a6c40 100644
--- a/packages/components/src/components/hds/app-side-nav/list/title.ts
+++ b/packages/components/src/components/hds/app-side-nav/list/title.ts
@@ -4,12 +4,14 @@
  */
 
 import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
+import type { ModifierLike } from '@glint/template';
+import type { HdsAppSideNavListRegisterTitleIdModifierSignature } from './index.ts';
+
 export interface HdsAppSideNavListTitleSignature {
   Args: {
-    didInsertTitle?: (titleId: string) => void;
+    registerTitleId?: ModifierLike<HdsAppSideNavListRegisterTitleIdModifierSignature>;
   };
   Blocks: {
     default: [];
@@ -20,13 +22,4 @@ export interface HdsAppSideNavListTitleSignature {
 export default class HdsAppSideNavListTitle extends Component<HdsAppSideNavListTitleSignature> {
   /*  Generate a unique ID for each Title */
   private _titleId = 'title-' + guidFor(this);
-
-  @action
-  didInsertTitle(element: HTMLElement): void {
-    const { didInsertTitle } = this.args;
-
-    if (typeof didInsertTitle === 'function') {
-      didInsertTitle(element.id);
-    }
-  }
 }
diff --git a/packages/components/src/components/hds/app-side-nav/portal/target.hbs b/packages/components/src/components/hds/app-side-nav/portal/target.hbs
index 1e55cc26865..397590447e8 100644
--- a/packages/components/src/components/hds/app-side-nav/portal/target.hbs
+++ b/packages/components/src/components/hds/app-side-nav/portal/target.hbs
@@ -9,6 +9,6 @@
     @onChange={{this.panelsChanged}}
     @name={{if @targetName @targetName "hds-app-side-nav-portal-target"}}
     class="hds-app-side-nav__content-panels"
-    {{did-update this.didUpdateSubnav this._numSubnavs}}
+    {{this._animateSubnav this._numSubnavs}}
   />
 </div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/app-side-nav/portal/target.ts b/packages/components/src/components/hds/app-side-nav/portal/target.ts
index c6ec46fea37..2a17f570c3c 100644
--- a/packages/components/src/components/hds/app-side-nav/portal/target.ts
+++ b/packages/components/src/components/hds/app-side-nav/portal/target.ts
@@ -4,10 +4,12 @@
  */
 
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { macroCondition, isTesting } from '@embroider/macros';
+import { modifier } from 'ember-modifier';
+import { next } from '@ember/runloop';
 
 import type { HdsAppSideNavPortalSignature } from './index';
 import type { Registry as Services } from '@ember/service';
@@ -40,16 +42,18 @@ export default class HdsAppSideNavPortalTarget extends Component<HdsAppSideNavPo
     );
   }
 
+  private _animateSubnav = modifier(
+    (element: HTMLElement, [count]: [number]) => {
+      // eslint-disable-next-line ember/no-runloop
+      next(() => this.animateSubnav(element, [count]));
+    }
+  );
+
   @action
   panelsChanged(portalCount: number): void {
     this._numSubnavs = portalCount;
   }
 
-  @action
-  didUpdateSubnav(element: HTMLElement, [count]: [number]): void {
-    this.animateSubnav(element, [count]);
-  }
-
   @action
   animateSubnav(element: HTMLElement, [count]: [number]): void {
     /*
diff --git a/packages/components/src/components/hds/breadcrumb/index.hbs b/packages/components/src/components/hds/breadcrumb/index.hbs
index a52f892205b..5207c02c768 100644
--- a/packages/components/src/components/hds/breadcrumb/index.hbs
+++ b/packages/components/src/components/hds/breadcrumb/index.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 <nav class={{this.classNames}} aria-label={{this.ariaLabel}} ...attributes>
-  <ol class="hds-breadcrumb__list" {{did-insert this.didInsert}}>
+  <ol class="hds-breadcrumb__list" {{this._callDidInsert}}>
     {{yield}}
   </ol>
 </nav>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/breadcrumb/index.ts b/packages/components/src/components/hds/breadcrumb/index.ts
index 66ff86ba41e..cb2543a2618 100644
--- a/packages/components/src/components/hds/breadcrumb/index.ts
+++ b/packages/components/src/components/hds/breadcrumb/index.ts
@@ -4,6 +4,7 @@
  */
 
 import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 
 export interface HdsBreadcrumbSignature {
   Args: {
@@ -17,47 +18,15 @@ export interface HdsBreadcrumbSignature {
   Element: HTMLElement;
 }
 
-const NOOP = () => {};
-
 export default class HdsBreadcrumb extends Component<HdsBreadcrumbSignature> {
-  /**
-   * @param onDidInsert
-   * @type {function}
-   * @default () => {}
-   */
-  get didInsert(): () => void {
-    const { didInsert } = this.args;
-
-    if (typeof didInsert === 'function') {
-      return didInsert;
-    } else {
-      return NOOP;
-    }
-  }
-
-  /**
-   * @param itemsCanWrap
-   * @type {boolean}
-   * @default true
-   */
   get itemsCanWrap(): boolean {
     return this.args.itemsCanWrap ?? true;
   }
 
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'breadcrumbs'
-   */
   get ariaLabel(): string {
     return this.args.ariaLabel ?? 'breadcrumbs';
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method Breadcrumb#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-breadcrumb'];
 
@@ -68,4 +37,12 @@ export default class HdsBreadcrumb extends Component<HdsBreadcrumbSignature> {
 
     return classes.join(' ');
   }
+
+  private _callDidInsert = modifier(() => {
+    const { didInsert } = this.args;
+
+    if (typeof didInsert === 'function') {
+      didInsert();
+    }
+  });
 }
diff --git a/packages/components/src/components/hds/code-editor/description.hbs b/packages/components/src/components/hds/code-editor/description.hbs
index a1a817352ac..5ab05b0a563 100644
--- a/packages/components/src/components/hds/code-editor/description.hbs
+++ b/packages/components/src/components/hds/code-editor/description.hbs
@@ -8,7 +8,7 @@
   class="hds-code-editor__description"
   @tag="p"
   @size="100"
-  {{did-insert @onInsert}}
+  {{this._callOnInsert}}
   ...attributes
 >
   {{yield}}
diff --git a/packages/components/src/components/hds/code-editor/description.ts b/packages/components/src/components/hds/code-editor/description.ts
index cd83383f1d9..cce44c962d6 100644
--- a/packages/components/src/components/hds/code-editor/description.ts
+++ b/packages/components/src/components/hds/code-editor/description.ts
@@ -4,6 +4,7 @@
  */
 
 import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
 
 import type { HdsTextBodySignature } from '../text/body';
 
@@ -21,4 +22,14 @@ export interface HdsCodeEditorDescriptionSignature {
 
 export default class HdsCodeEditorDescription extends Component<HdsCodeEditorDescriptionSignature> {
   private _id = `${this.args.editorId}-description`;
+
+  private _callOnInsert = modifier(
+    (element: HdsCodeEditorDescriptionElement) => {
+      const { onInsert } = this.args;
+
+      if (typeof onInsert === 'function') {
+        onInsert(element);
+      }
+    }
+  );
 }
diff --git a/packages/components/src/components/hds/code-editor/title.hbs b/packages/components/src/components/hds/code-editor/title.hbs
index 38e83ecc0dc..4b06b60521a 100644
--- a/packages/components/src/components/hds/code-editor/title.hbs
+++ b/packages/components/src/components/hds/code-editor/title.hbs
@@ -9,7 +9,7 @@
   @tag={{this.tag}}
   @size="200"
   @weight="semibold"
-  {{did-insert @onInsert}}
+  {{hds-lifecycle didInsert=@onInsert}}
   ...attributes
 >
   {{yield}}
diff --git a/packages/components/src/components/hds/disclosure-primitive/index.hbs b/packages/components/src/components/hds/disclosure-primitive/index.hbs
index 0867c02a868..c90a73e00d3 100644
--- a/packages/components/src/components/hds/disclosure-primitive/index.hbs
+++ b/packages/components/src/components/hds/disclosure-primitive/index.hbs
@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-disclosure-primitive" {{did-update this.onStateChange @isOpen}} ...attributes>
+<div class="hds-disclosure-primitive" {{this._toggleControlled @isOpen}} ...attributes>
   <div class="hds-disclosure-primitive__toggle">
     {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen contentId=this._contentId) to="toggle"}}
   </div>
diff --git a/packages/components/src/components/hds/disclosure-primitive/index.ts b/packages/components/src/components/hds/disclosure-primitive/index.ts
index d475d664d12..f5ac2a64459 100644
--- a/packages/components/src/components/hds/disclosure-primitive/index.ts
+++ b/packages/components/src/components/hds/disclosure-primitive/index.ts
@@ -8,6 +8,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { schedule } from '@ember/runloop';
 import { guidFor } from '@ember/object/internals';
+import { modifier } from 'ember-modifier';
 
 export interface HdsDisclosurePrimitiveSignature {
   Args: {
@@ -55,6 +56,23 @@ export default class HdsDisclosurePrimitive extends Component<HdsDisclosurePrimi
     this._isOpen = value || false;
   }
 
+  private _toggleControlled = (() => {
+    let isFirstRun = true;
+
+    return modifier((_element, [isOpen]: [boolean | undefined]) => {
+      if (isFirstRun) {
+        isFirstRun = false;
+        return;
+      }
+
+      if (isOpen !== undefined) {
+        this.isOpen = isOpen;
+      }
+
+      this._isControlled = true;
+    });
+  })();
+
   @action
   onClickToggle(): void {
     this.isOpen = !this.isOpen;
@@ -68,14 +86,6 @@ export default class HdsDisclosurePrimitive extends Component<HdsDisclosurePrimi
     }
   }
 
-  @action
-  onStateChange(): void {
-    if (this.args.isOpen !== undefined) {
-      this.isOpen = this.args.isOpen;
-    }
-    this._isControlled = true;
-  }
-
   @action
   close(): void {
     // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
diff --git a/packages/components/src/components/hds/dropdown/index.hbs b/packages/components/src/components/hds/dropdown/index.hbs
index 8958126a74d..b7f45acfb7c 100644
--- a/packages/components/src/components/hds/dropdown/index.hbs
+++ b/packages/components/src/components/hds/dropdown/index.hbs
@@ -21,7 +21,7 @@
     >
       {{#if (or PP.isOpen @preserveContentInDom)}}
         {{yield (hash Header=(component "hds/dropdown/header") close=PP.hidePopover)}}
-        <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
+        <ul class="hds-dropdown__list" {{this._setupCheckmarkList}}>
           {{yield
             (hash
               close=PP.hidePopover
diff --git a/packages/components/src/components/hds/dropdown/index.ts b/packages/components/src/components/hds/dropdown/index.ts
index 12bccfcd4ce..4b08275fbd0 100644
--- a/packages/components/src/components/hds/dropdown/index.ts
+++ b/packages/components/src/components/hds/dropdown/index.ts
@@ -4,8 +4,8 @@
  */
 
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { modifier } from 'ember-modifier';
 
 import {
   // map Dropdown's `listPosition` values to PopoverPrimitive's `placement` values
@@ -15,7 +15,7 @@ import {
 } from './types.ts';
 
 import type { ComponentLike } from '@glint/template';
-import type { MenuPrimitiveSignature } from '../menu-primitive';
+import type { HdsPopoverPrimitiveSignature } from '../popover-primitive/index.ts';
 import type { HdsDropdownFooterSignature } from './footer';
 import type { HdsDropdownHeaderSignature } from './header';
 import type { HdsDropdownListItemCheckboxSignature } from './list-item/checkbox';
@@ -39,15 +39,16 @@ export const POSITIONS: HdsDropdownPositions[] = Object.values(
 );
 
 export interface HdsDropdownSignature {
-  Args: MenuPrimitiveSignature['Args'] & {
+  Args: {
     height?: string;
     isInline?: boolean;
-    isOpen?: boolean;
+    isOpen?: HdsPopoverPrimitiveSignature['Args']['isOpen'];
     listPosition?: HdsDropdownPositions;
     width?: string;
     enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];
     preserveContentInDom?: boolean;
     matchToggleWidth?: boolean;
+    onClose?: HdsPopoverPrimitiveSignature['Args']['onClose'];
   };
   Blocks: {
     default: [
@@ -69,7 +70,7 @@ export interface HdsDropdownSignature {
       },
     ];
   };
-  Element: MenuPrimitiveSignature['Element'];
+  Element: HTMLDivElement;
 }
 
 export default class HdsDropdown extends Component<HdsDropdownSignature> {
@@ -153,9 +154,9 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
     return classes.join(' ');
   }
 
-  @action
-  didInsertList(element: HTMLUListElement): void {
+  private _setupCheckmarkList = modifier((element: HTMLUListElement) => {
     const checkmarkItems = element.querySelectorAll(`[role="option"]`);
+
     if (checkmarkItems.length) {
       const toggleButtonId = element
         .closest('.hds-dropdown')
@@ -168,5 +169,5 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
         element.setAttribute('aria-labelledby', toggleButtonId);
       }
     }
-  }
+  });
 }
diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.hbs b/packages/components/src/components/hds/dropdown/list-item/interactive.hbs
index 53fc34e1b9f..f62914dc95f 100644
--- a/packages/components/src/components/hds/dropdown/list-item/interactive.hbs
+++ b/packages/components/src/components/hds/dropdown/list-item/interactive.hbs
@@ -9,11 +9,7 @@
         <Hds::Icon @name="loading" />
       </div>
       <Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
-        {{#if (has-block)}}
-          {{yield (hash Badge=(component "hds/badge" size="small"))}}
-        {{else}}
-          {{this.text}}
-        {{/if}}
+        {{yield (hash Badge=(component "hds/badge" size="small"))}}
       </Hds::Text::Body>
     </div>
   {{else}}
@@ -34,11 +30,7 @@
         </span>
       {{/if}}
       <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
-        {{#if (has-block)}}
-          {{yield (hash Badge=(component "hds/badge" size="small"))}}
-        {{else}}
-          {{this.text}}
-        {{/if}}
+        {{yield (hash Badge=(component "hds/badge" size="small"))}}
       </Hds::Text::Body>
       {{#if @trailingIcon}}
         <span class="hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--trailing">
diff --git a/packages/components/src/components/hds/dropdown/list-item/interactive.ts b/packages/components/src/components/hds/dropdown/list-item/interactive.ts
index 323942938b0..722866f4bc0 100644
--- a/packages/components/src/components/hds/dropdown/list-item/interactive.ts
+++ b/packages/components/src/components/hds/dropdown/list-item/interactive.ts
@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { assert, deprecate } from '@ember/debug';
+import { assert } from '@ember/debug';
 
 import { HdsDropdownListItemInteractiveColorValues } from './types.ts';
 
@@ -13,7 +13,6 @@ import type { HdsInteractiveSignature } from '../../interactive';
 import type { HdsDropdownListItemInteractiveColors } from './types.ts';
 import type { ComponentLike } from '@glint/template';
 import type { HdsBadgeSignature } from '../../badge/index.ts';
-import type Owner from '@ember/owner';
 
 export const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action;
 export const COLORS: HdsDropdownListItemInteractiveColors[] = Object.values(
@@ -25,10 +24,6 @@ export interface HdsDropdownListItemInteractiveSignature {
     color?: HdsDropdownListItemInteractiveColors;
     icon?: HdsIconSignature['Args']['name'];
     isLoading?: boolean;
-    /**
-     * @deprecated The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block. See: https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100
-     */
-    text?: string;
     trailingIcon?: HdsIconSignature['Args']['name'];
   };
   Blocks: {
@@ -42,41 +37,6 @@ export interface HdsDropdownListItemInteractiveSignature {
 }
 
 export default class HdsDropdownListItemInteractive extends Component<HdsDropdownListItemInteractiveSignature> {
-  constructor(
-    owner: Owner,
-    args: HdsDropdownListItemInteractiveSignature['Args']
-  ) {
-    super(owner, args);
-
-    if (args.text !== undefined) {
-      deprecate(
-        'The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block.',
-        false,
-        {
-          id: 'hds.dropdown.list-item.interactive',
-          until: '5.0.0',
-          url: 'https://helios.hashicorp.design/components/dropdown?tab=version%20history#4100',
-          for: '@hashicorp/design-system-components',
-          since: {
-            available: '4.10.0',
-            enabled: '5.0.0',
-          },
-        }
-      );
-    }
-  }
-
-  get text(): string {
-    const { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
   get color(): HdsDropdownListItemInteractiveColors {
     const { color = DEFAULT_COLOR } = this.args;
 
diff --git a/packages/components/src/components/hds/dropdown/toggle/icon.hbs b/packages/components/src/components/hds/dropdown/toggle/icon.hbs
index 4b894a5ea09..a27e7ff2660 100644
--- a/packages/components/src/components/hds/dropdown/toggle/icon.hbs
+++ b/packages/components/src/components/hds/dropdown/toggle/icon.hbs
@@ -8,7 +8,7 @@
   ...attributes
   aria-expanded={{if @isOpen "true" "false"}}
   {{@setupPrimitiveToggle}}
-  {{did-update this.onDidUpdateImageSrc @imageSrc}}
+  {{this._updateImagePresence @imageSrc}}
   type="button"
 >
   <div class="hds-dropdown-toggle-icon__wrapper">
diff --git a/packages/components/src/components/hds/dropdown/toggle/icon.ts b/packages/components/src/components/hds/dropdown/toggle/icon.ts
index b1e0d69e85e..c47e915d9ab 100644
--- a/packages/components/src/components/hds/dropdown/toggle/icon.ts
+++ b/packages/components/src/components/hds/dropdown/toggle/icon.ts
@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
 import { HdsDropdownToggleIconSizeValues } from './types.ts';
 
 import type { HdsIconSignature } from '../../icon';
@@ -45,21 +46,17 @@ export default class HdsDropdownToggleIcon extends Component<HdsDropdownToggleIc
     }
   }
 
-  @action
-  onDidUpdateImageSrc(): void {
-    this._hasImage = true;
-  }
+  private _updateImagePresence = modifier(
+    (_element, [_imageSrc]: [string | undefined]) => {
+      this._hasImage = !!_imageSrc;
+    }
+  );
 
   @action
   onImageLoadError(): void {
     this._hasImage = false;
   }
 
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the `aria-label` applied to the toggle
-   */
   get text(): string {
     const { text } = this.args;
 
@@ -71,12 +68,6 @@ export default class HdsDropdownToggleIcon extends Component<HdsDropdownToggleIc
     return text;
   }
 
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the button; acceptable values are `small` and `medium`
-   */
   get size(): HdsDropdownToggleIconSizes {
     const { size = DEFAULT_SIZE } = this.args;
 
@@ -90,12 +81,6 @@ export default class HdsDropdownToggleIcon extends Component<HdsDropdownToggleIc
     return size;
   }
 
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 24
-   * @description ensures that the correct icon size is used
-   */
   get iconSize(): HdsIconSignature['Args']['size'] {
     if (this.args.size === 'medium' && !this.hasChevron) {
       // in this special case we use a larger SVG
@@ -106,22 +91,11 @@ export default class HdsDropdownToggleIcon extends Component<HdsDropdownToggleIc
     }
   }
 
-  /**
-   * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
-   *
-   * @param hasChevron
-   * @type {boolean}
-   * @default true
-   */
+  // Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
   get hasChevron(): boolean {
     return this.args.hasChevron ?? true;
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method ToggleIcon#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-dropdown-toggle-icon'];
 
diff --git a/packages/components/src/components/hds/flyout/body.hbs b/packages/components/src/components/hds/flyout/body.hbs
deleted file mode 100644
index b64fb3b9af7..00000000000
--- a/packages/components/src/components/hds/flyout/body.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<div class="hds-flyout__body" ...attributes>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/flyout/body.ts b/packages/components/src/components/hds/flyout/body.ts
deleted file mode 100644
index 72f070a5ed5..00000000000
--- a/packages/components/src/components/hds/flyout/body.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-
-import type Owner from '@ember/owner';
-
-export interface HdsFlyoutBodySignature {
-  // when component has no args, but constructor still needs to be defined, use `never`
-  // see: https://github.com/hashicorp/design-system/pull/2511/files/f2146e5243d0431892a62d2fbf2889f1cbd3e525#r1815255004
-  Args: never;
-  Blocks: {
-    default: [];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class HdsFlyoutBody extends Component<HdsFlyoutBodySignature> {
-  constructor(owner: Owner, args: HdsFlyoutBodySignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Flyout::Body` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Body` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.flyout.body',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          enabled: '4.6.0',
-          available: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/flyout/description.hbs b/packages/components/src/components/hds/flyout/description.hbs
deleted file mode 100644
index 92ce65b7b43..00000000000
--- a/packages/components/src/components/hds/flyout/description.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<Hds::Text::Body class="hds-flyout__description" @tag="div" @size="200" @color="primary" ...attributes>
-  {{yield}}
-</Hds::Text::Body>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/flyout/description.ts b/packages/components/src/components/hds/flyout/description.ts
deleted file mode 100644
index e04a663fe82..00000000000
--- a/packages/components/src/components/hds/flyout/description.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import type { HdsTextBodySignature } from '../text/body';
-import type Owner from '@ember/owner';
-
-export interface HdsFlyoutDescriptionSignature {
-  Args: never;
-  Blocks: {
-    default: [];
-  };
-  Element: HdsTextBodySignature['Element'];
-}
-
-export default class HdsFlyoutDescription extends Component<HdsFlyoutDescriptionSignature> {
-  constructor(owner: Owner, args: HdsFlyoutDescriptionSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Flyout::Description` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Description` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.flyout.description',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          available: '4.6.0',
-          enabled: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/flyout/footer.hbs b/packages/components/src/components/hds/flyout/footer.hbs
deleted file mode 100644
index 448b9041755..00000000000
--- a/packages/components/src/components/hds/flyout/footer.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<div class="hds-flyout__footer" ...attributes>
-  {{yield (hash close=@onDismiss)}}
-</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/flyout/footer.ts b/packages/components/src/components/hds/flyout/footer.ts
deleted file mode 100644
index 98e237553e9..00000000000
--- a/packages/components/src/components/hds/flyout/footer.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import type Owner from '@ember/owner';
-
-export interface HdsFlyoutFooterSignature {
-  Args: {
-    onDismiss?: (event: MouseEvent) => void;
-  };
-  Blocks: {
-    default: [{ close?: (event: MouseEvent) => void }];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class HdsFlyoutFooter extends Component<HdsFlyoutFooterSignature> {
-  constructor(owner: Owner, args: HdsFlyoutFooterSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Flyout::Footer` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Footer` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.flyout.footer',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          enabled: '4.6.0',
-          available: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/flyout/header.hbs b/packages/components/src/components/hds/flyout/header.hbs
deleted file mode 100644
index e46e9e2c03e..00000000000
--- a/packages/components/src/components/hds/flyout/header.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<div class="hds-flyout__header" ...attributes>
-  {{#if @icon}}
-    <Hds::Icon class="hds-flyout__icon" @name={{@icon}} @size="24" />
-  {{/if}}
-  <Hds::Text::Display class="hds-flyout__title" @tag="div" @size="300" @weight="semibold" id={{@id}}>
-    {{#if @tagline}}
-      <Hds::Text::Body class="hds-flyout__tagline" @tag="div" @size="100" @weight="regular" @color="faint">
-        {{@tagline}}
-      </Hds::Text::Body>
-    {{/if}}
-    {{yield}}
-  </Hds::Text::Display>
-  <Hds::DismissButton class="hds-flyout__dismiss" {{on "click" @onDismiss}} />
-</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/flyout/header.ts b/packages/components/src/components/hds/flyout/header.ts
deleted file mode 100644
index 7ff4f297fdf..00000000000
--- a/packages/components/src/components/hds/flyout/header.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import type { HdsIconSignature } from '../icon';
-import type Owner from '@ember/owner';
-
-export interface HdsFlyoutHeaderSignature {
-  Args: {
-    id?: string;
-    tagline?: string;
-    onDismiss: (event: MouseEvent) => void;
-    icon?: HdsIconSignature['Args']['name'];
-  };
-  Blocks: {
-    default: [];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class HdsFlyoutHeader extends Component<HdsFlyoutHeaderSignature> {
-  constructor(owner: Owner, args: HdsFlyoutHeaderSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Flyout::Header` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Header` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.flyout.header',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          enabled: '4.6.0',
-          available: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/flyout/index.hbs b/packages/components/src/components/hds/flyout/index.hbs
index 949ca208a42..99b42eaeb67 100644
--- a/packages/components/src/components/hds/flyout/index.hbs
+++ b/packages/components/src/components/hds/flyout/index.hbs
@@ -6,8 +6,7 @@
   class={{this.classNames}}
   ...attributes
   aria-labelledby={{this.id}}
-  {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyNode}}
+  {{this._initElement}}
   {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
   {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
 >
diff --git a/packages/components/src/components/hds/flyout/index.ts b/packages/components/src/components/hds/flyout/index.ts
index 4861fe385c6..7e4a1f76ba1 100644
--- a/packages/components/src/components/hds/flyout/index.ts
+++ b/packages/components/src/components/hds/flyout/index.ts
@@ -9,8 +9,10 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '../../../utils/hds-get-element-id.ts';
 import { buildWaiter } from '@ember/test-waiters';
-import type { WithBoundArgs } from '@glint/template';
+import { modifier } from 'ember-modifier';
 
+import type { WithBoundArgs } from '@glint/template';
+import type Owner from '@ember/owner';
 import type { HdsFlyoutSizes } from './types.ts';
 
 import { HdsFlyoutSizesValues } from './types.ts';
@@ -62,17 +64,8 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
   // TODO: make this property private; currently blocked by our consumers relying on it despite not being part of the public API: https://github.com/hashicorp/cloud-ui/blob/main/engines/waypoint/addon/components/preview-pane.ts#L15
   // private _element!: HTMLDialogElement;
   _element!: HTMLDialogElement;
-  private _body!: HTMLElement;
   private _bodyInitialOverflowValue = '';
 
-  /**
-   * Sets the size of the flyout
-   * Accepted values: medium, large
-   *
-   * @param size
-   * @type {string}
-   * @default 'medium'
-   */
   get size(): HdsFlyoutSizes {
     const { size = DEFAULT_SIZE } = this.args;
 
@@ -93,11 +86,6 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     return getElementId(this);
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-flyout'];
 
@@ -107,6 +95,13 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     return classes.join(' ');
   }
 
+  constructor(owner: Owner, args: HdsFlyoutSignature['Args']) {
+    super(owner, args);
+
+    this._bodyInitialOverflowValue =
+      document.body.style.getPropertyValue('overflow');
+  }
+
   @action registerOnCloseCallback(event: Event) {
     if (this.args.onClose && typeof this.args.onClose === 'function') {
       this.args.onClose(event);
@@ -115,17 +110,8 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     this._isOpen = false;
   }
 
-  @action
-  didInsert(element: HTMLDialogElement): void {
-    // Store references of `<dialog>` and `<body>` elements
+  private _initElement = modifier((element: HdsFlyoutSignature['Element']) => {
     this._element = element;
-    this._body = document.body;
-
-    if (this._body) {
-      // Store the initial `overflow` value of `<body>` so we can reset to it
-      this._bodyInitialOverflowValue =
-        this._body.style.getPropertyValue('overflow');
-    }
 
     // Register "onClose" callback function to be called when a native 'close' event is dispatched
     // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -135,19 +121,16 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     if (!this._element.open) {
       this.open();
     }
-  }
 
-  @action
-  willDestroyNode(): void {
-    if (this._element) {
+    return () => {
       this._element.removeEventListener(
         'close',
         // eslint-disable-next-line @typescript-eslint/unbound-method
         this.registerOnCloseCallback,
         true
       );
-    }
-  }
+    };
+  });
 
   @action
   open(): void {
@@ -156,7 +139,7 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     this._isOpen = true;
 
     // Prevent page from scrolling when the dialog is open
-    if (this._body) this._body.style.setProperty('overflow', 'hidden');
+    document.body.style.setProperty('overflow', 'hidden');
 
     // Call "onOpen" callback function
     if (this.args.onOpen && typeof this.args.onOpen === 'function') {
@@ -183,18 +166,17 @@ export default class HdsFlyout extends Component<HdsFlyoutSignature> {
     this._element.close();
 
     // Reset page `overflow` property
-    if (this._body) {
-      this._body.style.removeProperty('overflow');
-      if (this._bodyInitialOverflowValue === '') {
-        if (this._body.style.length === 0) {
-          this._body.removeAttribute('style');
-        }
-      } else {
-        this._body.style.setProperty(
-          'overflow',
-          this._bodyInitialOverflowValue
-        );
+    document.body.style.removeProperty('overflow');
+
+    if (this._bodyInitialOverflowValue === '') {
+      if (document.body.style.length === 0) {
+        document.body.removeAttribute('style');
       }
+    } else {
+      document.body.style.setProperty(
+        'overflow',
+        this._bodyInitialOverflowValue
+      );
     }
 
     // Return focus to a specific element (if provided)
diff --git a/packages/components/src/components/hds/form/character-count/index.hbs b/packages/components/src/components/hds/form/character-count/index.hbs
index 71a0d37efae..2da562321f1 100644
--- a/packages/components/src/components/hds/form/character-count/index.hbs
+++ b/packages/components/src/components/hds/form/character-count/index.hbs
@@ -7,7 +7,7 @@
   @size="100"
   class={{this.classNames}}
   id={{this.id}}
-  {{did-insert this.onInsert}}
+  {{hds-lifecycle didInsert=@onInsert}}
   ...attributes
   aria-live="polite"
 >
diff --git a/packages/components/src/components/hds/form/character-count/index.ts b/packages/components/src/components/hds/form/character-count/index.ts
index cd7769d0f5b..1beaecda630 100644
--- a/packages/components/src/components/hds/form/character-count/index.ts
+++ b/packages/components/src/components/hds/form/character-count/index.ts
@@ -4,10 +4,10 @@
  */
 
 import Component from '@glimmer/component';
+
 import type { HdsTextBodySignature } from '../../text/body';
 
 const ID_PREFIX = 'character-count-';
-const NOOP = (): void => {};
 
 export interface HdsFormCharacterCountSignature {
   Args: {
@@ -52,12 +52,6 @@ export default class HdsFormCharacterCount extends Component<HdsFormCharacterCou
     }`;
   }
 
-  /**
-   * @param maxLength
-   * @type {number}
-   * @default null
-   * @description The maximum number of characters allowed.
-   */
   get maxLength(): number | undefined {
     const { maxLength } = this.args;
     if (maxLength) {
@@ -65,12 +59,6 @@ export default class HdsFormCharacterCount extends Component<HdsFormCharacterCou
     }
   }
 
-  /**
-   * @param minLength
-   * @type {number}
-   * @default null
-   * @description The minimum number of characters allowed.
-   */
   get minLength(): number | undefined {
     const { minLength } = this.args;
     if (minLength) {
@@ -78,32 +66,14 @@ export default class HdsFormCharacterCount extends Component<HdsFormCharacterCou
     }
   }
 
-  /**
-   * @param remaining
-   * @type {number}
-   * @default null
-   * @description The remaining number of characters.
-   */
   get remaining(): number | undefined {
     return this.maxLength ? this.maxLength - this.currentLength : undefined;
   }
 
-  /**
-   * @param shortfall
-   * @type {number}
-   * @default null
-   * @description The number of characters the content is falling short of.
-   */
   get shortfall(): number | undefined {
     return this.minLength ? this.minLength - this.currentLength : undefined;
   }
 
-  /**
-   * @param message
-   * @type {string}
-   * @default null
-   * @description The character count message presented to users
-   */
   get message(): string {
     let messageText = '';
     if (this.minLength && this.currentLength === 0) {
@@ -126,11 +96,6 @@ export default class HdsFormCharacterCount extends Component<HdsFormCharacterCou
     return messageText;
   }
 
-  /**
-   * Determines the unique ID to assign to the element
-   * @method id
-   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
-   */
   get id(): string | null {
     const { controlId } = this.args;
     if (controlId) {
@@ -139,26 +104,6 @@ export default class HdsFormCharacterCount extends Component<HdsFormCharacterCou
     return null;
   }
 
-  /**
-   * @param onInsert
-   * @type {function}
-   * @default () => {}
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  get onInsert(): (element: HTMLElement, ...args: any[]) => void {
-    const { onInsert } = this.args;
-    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
-    if (typeof onInsert === 'function') {
-      return onInsert;
-    } else {
-      return NOOP;
-    }
-  }
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-form-character-count'];
 
diff --git a/packages/components/src/components/hds/form/error/index.hbs b/packages/components/src/components/hds/form/error/index.hbs
index d00d5fd1657..18f81ad1504 100644
--- a/packages/components/src/components/hds/form/error/index.hbs
+++ b/packages/components/src/components/hds/form/error/index.hbs
@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class={{this.classNames}} id={{this.id}} {{did-insert this.onInsert}} {{will-destroy this.onRemove}} ...attributes>
+<div class={{this.classNames}} id={{this.id}} {{hds-lifecycle didInsert=@onInsert willDestroy=@onRemove}} ...attributes>
   <Hds::Icon class="hds-form-error__icon" @name="alert-diamond-fill" />
   <Hds::Text::Body class="hds-form-error__content" @tag="div" @size="100" @weight="medium">
     {{yield (hash Message=(component "hds/form/error/message"))}}
diff --git a/packages/components/src/components/hds/form/error/index.ts b/packages/components/src/components/hds/form/error/index.ts
index c6400a1a046..94b3a79b939 100644
--- a/packages/components/src/components/hds/form/error/index.ts
+++ b/packages/components/src/components/hds/form/error/index.ts
@@ -9,16 +9,12 @@ import type { HdsFormErrorMessageSignature } from './message';
 
 export const ID_PREFIX = 'error-';
 
-const NOOP = (): void => {};
-
 export interface HdsFormErrorSignature {
   Args: {
     contextualClass?: string;
     controlId?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onInsert?: (element: HTMLElement, ...args: any[]) => void;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onRemove?: (element: HTMLElement, ...args: any[]) => void;
+    onInsert?: (element: HTMLElement, ...args: unknown[]) => void;
+    onRemove?: (element: HTMLElement, ...args: unknown[]) => void;
   };
   Blocks: {
     default: [
@@ -31,57 +27,16 @@ export interface HdsFormErrorSignature {
 }
 
 export default class HdsFormError extends Component<HdsFormErrorSignature> {
-  /**
-   * Determines the unique ID to assign to the element
-   * @method id
-   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
-   */
   get id(): string | null {
     const { controlId } = this.args;
+
     if (controlId) {
       return `${ID_PREFIX}${controlId}`;
     }
-    return null;
-  }
-
-  /**
-   * @param onInsert
-   * @type {function}
-   * @default () => {}
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  get onInsert(): (element: HTMLElement, ...args: any[]) => void {
-    const { onInsert } = this.args;
 
-    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
-    if (typeof onInsert === 'function') {
-      return onInsert;
-    } else {
-      return NOOP;
-    }
+    return null;
   }
 
-  /**
-   * @param onRemove
-   * @type {function}
-   * @default () => {}
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  get onRemove(): (element: HTMLElement, ...args: any[]) => void {
-    const { onRemove } = this.args;
-
-    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
-    if (typeof onRemove === 'function') {
-      return onRemove;
-    } else {
-      return NOOP;
-    }
-  }
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-form-error'];
 
diff --git a/packages/components/src/components/hds/form/helper-text/index.hbs b/packages/components/src/components/hds/form/helper-text/index.hbs
index a20c74000d9..29bc12ff411 100644
--- a/packages/components/src/components/hds/form/helper-text/index.hbs
+++ b/packages/components/src/components/hds/form/helper-text/index.hbs
@@ -8,7 +8,7 @@
   @size="100"
   @weight="regular"
   id={{this.id}}
-  {{did-insert this.onInsert}}
+  {{hds-lifecycle didInsert=@onInsert}}
   ...attributes
 >
   {{yield}}
diff --git a/packages/components/src/components/hds/menu-primitive/index.hbs b/packages/components/src/components/hds/menu-primitive/index.hbs
deleted file mode 100644
index 29a6c04850b..00000000000
--- a/packages/components/src/components/hds/menu-primitive/index.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS COMPONENT IS NOW DEPRECATED
-}}
-{{! template-lint-disable no-invalid-interactive }}
-<div
-  class="hds-menu-primitive"
-  ...attributes
-  {{did-insert this.didInsert}}
-  {{on "focusout" this.onFocusOut}}
-  {{on "keyup" this.onKeyUp}}
->
-  <div class="hds-menu-primitive__toggle" tabindex="-1">
-    {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
-  </div>
-  {{#if this.isOpen}}
-    <div class="hds-menu-primitive__content" tabindex="-1">
-      {{yield (hash close=this.close) to="content"}}
-    </div>
-  {{/if}}
-</div>
-{{! template-lint-enable no-invalid-interactive }}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/menu-primitive/index.ts b/packages/components/src/components/hds/menu-primitive/index.ts
deleted file mode 100644
index db655a604da..00000000000
--- a/packages/components/src/components/hds/menu-primitive/index.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { schedule } from '@ember/runloop';
-import type Owner from '@ember/owner';
-
-export interface MenuPrimitiveSignature {
-  Args: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onClose?: (...args: any[]) => void;
-  };
-  Blocks: {
-    toggle?: [
-      {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onClickToggle: (event: MouseEvent, ...args: any[]) => void;
-        isOpen?: boolean;
-      },
-    ];
-    content?: [
-      {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        close: (...args: any[]) => void;
-      },
-    ];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class MenuPrimitive extends Component<MenuPrimitiveSignature> {
-  @tracked isOpen: boolean | undefined; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the MenuPrimitive opened on render) just add  "this.args.isOpen" here to initalize the variable
-  @tracked toggleRef: HTMLElement | undefined;
-  @tracked _element!: HTMLElement;
-
-  constructor(owner: Owner, args: MenuPrimitiveSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::MenuPrimitive` component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`.',
-      false,
-      {
-        id: 'hds.components.menu-primitive',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/menu-primitive?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          enabled: '4.10.0',
-          available: '4.10.0',
-        },
-      }
-    );
-  }
-
-  @action
-  didInsert(element: HTMLElement): void {
-    this._element = element;
-  }
-
-  @action
-  onClickToggle(event: MouseEvent): void {
-    // we store a reference to the DOM node that has the "onClickToggle" event associated with it
-    if (!this.toggleRef) {
-      this.toggleRef = event.currentTarget as HTMLElement;
-    }
-    this.isOpen = !this.isOpen;
-    // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see https://github.com/hashicorp/design-system/commit/40cd7f6b3cb15c45f9a1235fafd0fb3ed58e6e62)
-    this.toggleRef?.focus();
-  }
-
-  @action
-  onFocusOut(event: FocusEvent): void {
-    // due to inconsistent implementation of relatedTarget across browsers we use the activeElement as a fallback
-    // if the related target is not part of the disclosed content we close the disclosed container
-    if (
-      !this._element.contains(
-        (event.relatedTarget as Node) || (document.activeElement as Node)
-      )
-    ) {
-      this.close();
-    }
-  }
-
-  @action
-  onKeyUp(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      this.close();
-      this.toggleRef?.focus();
-    }
-  }
-
-  @action
-  close(): void {
-    // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
-    // eslint-disable-next-line ember/no-runloop
-    schedule('afterRender', (): void => {
-      this.isOpen = false;
-      // we call the "onClose" callback if it exists (and is a function)
-      if (this.args.onClose && typeof this.args.onClose === 'function') {
-        this.args.onClose();
-      }
-    });
-  }
-}
diff --git a/packages/components/src/components/hds/modal/body.hbs b/packages/components/src/components/hds/modal/body.hbs
deleted file mode 100644
index 5cffdb61039..00000000000
--- a/packages/components/src/components/hds/modal/body.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<div class="hds-modal__body" ...attributes>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/modal/body.ts b/packages/components/src/components/hds/modal/body.ts
deleted file mode 100644
index 325268fafa2..00000000000
--- a/packages/components/src/components/hds/modal/body.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import type Owner from '@ember/owner';
-
-export interface HdsModalBodySignature {
-  // when component has no args, but constructor still needs to be defined, use `never`
-  // see: https://github.com/hashicorp/design-system/pull/2511/files/f2146e5243d0431892a62d2fbf2889f1cbd3e525#r1815255004
-  Args: never;
-  Blocks: {
-    default: [];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class HdsModalBody extends Component<HdsModalBodySignature> {
-  constructor(owner: Owner, args: HdsModalBodySignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Modal::Body` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Body` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.modal.body',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          available: '4.6.0',
-          enabled: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/modal/footer.hbs b/packages/components/src/components/hds/modal/footer.hbs
deleted file mode 100644
index ee3d71f9d53..00000000000
--- a/packages/components/src/components/hds/modal/footer.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<div class="hds-modal__footer" ...attributes>
-  {{yield (hash close=@onDismiss)}}
-</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/modal/footer.ts b/packages/components/src/components/hds/modal/footer.ts
deleted file mode 100644
index f78ed43686a..00000000000
--- a/packages/components/src/components/hds/modal/footer.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import type Owner from '@ember/owner';
-
-export interface HdsModalFooterSignature {
-  Args: {
-    onDismiss?: (event: MouseEvent) => void;
-  };
-  Blocks: {
-    default: [{ close?: (event: MouseEvent) => void }];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class HdsModalFooter extends Component<HdsModalFooterSignature> {
-  constructor(owner: Owner, args: HdsModalFooterSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Modal::Footer` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Footer` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.modal.footer',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          enabled: '4.6.0',
-          available: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/modal/header.hbs b/packages/components/src/components/hds/modal/header.hbs
deleted file mode 100644
index 4426455cd6c..00000000000
--- a/packages/components/src/components/hds/modal/header.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<div class="hds-modal__header" ...attributes>
-  {{#if @icon}}
-    <Hds::Icon class="hds-modal__icon" @name={{@icon}} @size="24" />
-  {{/if}}
-  <Hds::Text::Display class="hds-modal__title" @tag="div" @size="300" @weight="semibold" id={{@id}}>
-    {{#if @tagline}}
-      <Hds::Text::Body class="hds-modal__tagline" @tag="div" @size="100" @weight="regular">
-        {{@tagline}}
-      </Hds::Text::Body>
-    {{/if}}
-    {{yield}}
-  </Hds::Text::Display>
-  <Hds::DismissButton class="hds-modal__dismiss" {{on "click" @onDismiss}} />
-</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/modal/header.ts b/packages/components/src/components/hds/modal/header.ts
deleted file mode 100644
index f0d5df59b3c..00000000000
--- a/packages/components/src/components/hds/modal/header.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { deprecate } from '@ember/debug';
-import type { HdsIconSignature } from '../icon';
-import type Owner from '@ember/owner';
-
-export interface HdsModalHeaderSignature {
-  Args: {
-    id?: string;
-    tagline?: string;
-    onDismiss: (event: MouseEvent) => void;
-    icon?: HdsIconSignature['Args']['name'];
-  };
-  Blocks: {
-    default: [];
-  };
-  Element: HTMLDivElement;
-}
-
-export default class HdsModalHeader extends Component<HdsModalHeaderSignature> {
-  constructor(owner: Owner, args: HdsModalHeaderSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::Modal::Header` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::DialogPrimitive::Header` as one-to-one replacement.',
-      false,
-      {
-        id: 'hds.components.modal.header',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/flyout?tab=version%20history#460',
-        for: '@hashicorp/design-system-components',
-        since: {
-          available: '4.6.0',
-          enabled: '4.6.0',
-        },
-      }
-    );
-  }
-}
diff --git a/packages/components/src/components/hds/modal/index.hbs b/packages/components/src/components/hds/modal/index.hbs
index ea32f64eb5b..94b25cf3bd8 100644
--- a/packages/components/src/components/hds/modal/index.hbs
+++ b/packages/components/src/components/hds/modal/index.hbs
@@ -6,8 +6,7 @@
   class={{this.classNames}}
   ...attributes
   aria-labelledby={{this.id}}
-  {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyNode}}
+  {{this._initElement}}
   {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
   {{focus-trap isActive=this._isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
 >
diff --git a/packages/components/src/components/hds/modal/index.ts b/packages/components/src/components/hds/modal/index.ts
index 33d3e27ee63..faf49931f8e 100644
--- a/packages/components/src/components/hds/modal/index.ts
+++ b/packages/components/src/components/hds/modal/index.ts
@@ -9,8 +9,10 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getElementId } from '../../../utils/hds-get-element-id.ts';
 import { buildWaiter } from '@ember/test-waiters';
+import { modifier } from 'ember-modifier';
 
 import type { WithBoundArgs } from '@glint/template';
+import type Owner from '@ember/owner';
 import type { HdsModalSizes, HdsModalColors } from './types.ts';
 
 import HdsDialogPrimitiveHeaderComponent from '../dialog-primitive/header.ts';
@@ -59,7 +61,6 @@ export interface HdsModalSignature {
 export default class HdsModal extends Component<HdsModalSignature> {
   @tracked private _isOpen = false;
   private _element!: HTMLDialogElement;
-  private _body!: HTMLElement;
   private _bodyInitialOverflowValue = '';
 
   get isDismissDisabled(): boolean {
@@ -108,40 +109,15 @@ export default class HdsModal extends Component<HdsModalSignature> {
     return classes.join(' ');
   }
 
-  @action registerOnCloseCallback(event: Event): void {
-    if (
-      !this.isDismissDisabled &&
-      this.args.onClose &&
-      typeof this.args.onClose === 'function'
-    ) {
-      this.args.onClose(event);
-    }
+  constructor(owner: Owner, args: HdsModalSignature['Args']) {
+    super(owner, args);
 
-    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
-    if (this.isDismissDisabled) {
-      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
-      // so we add this safeguard condition that checks for the `<dialog>` to have a parent
-      if (this._element.parentElement) {
-        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
-        // preserving the state of the modal dialog
-        this._element.showModal();
-      }
-    } else {
-      this._isOpen = false;
-    }
+    this._bodyInitialOverflowValue =
+      document.body.style.getPropertyValue('overflow');
   }
 
-  @action
-  didInsert(element: HTMLDialogElement): void {
-    // Store references of `<dialog>` and `<body>` elements
+  private _initElement = modifier((element: HdsModalSignature['Element']) => {
     this._element = element;
-    this._body = document.body;
-
-    if (this._body) {
-      // Store the initial `overflow` value of `<body>` so we can reset to it
-      this._bodyInitialOverflowValue =
-        this._body.style.getPropertyValue('overflow');
-    }
 
     // Register "onClose" callback function to be called when a native 'close' event is dispatched
     // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -151,17 +127,37 @@ export default class HdsModal extends Component<HdsModalSignature> {
     if (!this._element.open) {
       this.open();
     }
-  }
 
-  @action
-  willDestroyNode(): void {
-    if (this._element) {
+    return () => {
       this._element.removeEventListener(
         'close',
         // eslint-disable-next-line @typescript-eslint/unbound-method
         this.registerOnCloseCallback,
         true
       );
+    };
+  });
+
+  @action registerOnCloseCallback(event: Event): void {
+    if (
+      !this.isDismissDisabled &&
+      this.args.onClose &&
+      typeof this.args.onClose === 'function'
+    ) {
+      this.args.onClose(event);
+    }
+
+    // If the dismissal of the modal is disabled, we keep the modal open/visible otherwise we mark it as closed
+    if (this.isDismissDisabled) {
+      // If, in a chain of events, the element is not attached to the DOM, the `showModal` would fail
+      // so we add this safeguard condition that checks for the `<dialog>` to have a parent
+      if (this._element.parentElement) {
+        // As there is no way to `preventDefault` on `close` events, we call the `showModal` function
+        // preserving the state of the modal dialog
+        this._element.showModal();
+      }
+    } else {
+      this._isOpen = false;
     }
   }
 
@@ -172,7 +168,7 @@ export default class HdsModal extends Component<HdsModalSignature> {
     this._isOpen = true;
 
     // Prevent page from scrolling when the dialog is open
-    if (this._body) this._body.style.setProperty('overflow', 'hidden');
+    document.body.style.setProperty('overflow', 'hidden');
 
     // Call "onOpen" callback function
     if (this.args.onOpen && typeof this.args.onOpen === 'function') {
@@ -199,18 +195,17 @@ export default class HdsModal extends Component<HdsModalSignature> {
     this._element.close();
 
     // Reset page `overflow` property
-    if (this._body) {
-      this._body.style.removeProperty('overflow');
-      if (this._bodyInitialOverflowValue === '') {
-        if (this._body.style.length === 0) {
-          this._body.removeAttribute('style');
-        }
-      } else {
-        this._body.style.setProperty(
-          'overflow',
-          this._bodyInitialOverflowValue
-        );
+    document.body.style.removeProperty('overflow');
+
+    if (this._bodyInitialOverflowValue === '') {
+      if (document.body.style.length === 0) {
+        document.body.removeAttribute('style');
       }
+    } else {
+      document.body.style.setProperty(
+        'overflow',
+        this._bodyInitialOverflowValue
+      );
     }
 
     // Return focus to a specific element (if provided)
diff --git a/packages/components/src/components/hds/side-nav/header/icon-button.hbs b/packages/components/src/components/hds/side-nav/header/icon-button.hbs
deleted file mode 100644
index 0a53016f1cd..00000000000
--- a/packages/components/src/components/hds/side-nav/header/icon-button.hbs
+++ /dev/null
@@ -1,22 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{!
-  THIS SUBCOMPONENT IS NOW DEPRECATED
-}}
-<Hds::Interactive
-  class="hds-side-nav__icon-button"
-  @current-when={{@current-when}}
-  @models={{hds-link-to-models @model @models}}
-  @query={{hds-link-to-query @query}}
-  @replace={{@replace}}
-  @route={{@route}}
-  @isRouteExternal={{@isRouteExternal}}
-  @href={{@href}}
-  @isHrefExternal={{@isHrefExternal}}
-  ...attributes
-  aria-label={{this.ariaLabel}}
->
-  <Hds::Icon @name={{@icon}} @stretched={{true}} @size="24" />
-</Hds::Interactive>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/header/icon-button.ts b/packages/components/src/components/hds/side-nav/header/icon-button.ts
deleted file mode 100644
index 7645e31be45..00000000000
--- a/packages/components/src/components/hds/side-nav/header/icon-button.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert, deprecate } from '@ember/debug';
-
-import type { HdsIconSignature } from '../../icon';
-import type { HdsInteractiveSignature } from '../../interactive/';
-import type Owner from '@ember/owner';
-
-export interface HdsSideNavHeaderIconButtonSignature {
-  Args: HdsInteractiveSignature['Args'] & {
-    icon: HdsIconSignature['Args']['name'];
-    ariaLabel: string;
-  };
-  Element: HdsInteractiveSignature['Element'];
-}
-
-export default class HdsSideNavHeaderIconButton extends Component<HdsSideNavHeaderIconButtonSignature> {
-  constructor(owner: Owner, args: HdsSideNavHeaderIconButtonSignature['Args']) {
-    super(owner, args);
-
-    deprecate(
-      'The `Hds::SideNav::Header::IconButton` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::Button` with the `isIconOnly` variant instead.',
-      false,
-      {
-        id: 'hds.components.sidenav.header.iconbutton',
-        until: '5.0.0',
-        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4100',
-        for: '@hashicorp/design-system-components',
-        since: {
-          available: '4.10.0',
-          enabled: '4.10.0',
-        },
-      }
-    );
-  }
-
-  get ariaLabel(): string {
-    const { ariaLabel } = this.args;
-
-    assert(
-      '@ariaLabel for "Hds::SideNav::Header::IconButton" must have a valid value',
-      ariaLabel !== undefined
-    );
-
-    return ariaLabel;
-  }
-}
diff --git a/packages/components/src/components/hds/side-nav/index.hbs b/packages/components/src/components/hds/side-nav/index.hbs
index 56c8550dfd1..997acde7818 100644
--- a/packages/components/src/components/hds/side-nav/index.hbs
+++ b/packages/components/src/components/hds/side-nav/index.hbs
@@ -16,7 +16,7 @@
   {{on "transitionend" (fn this.setTransition "end")}}
   {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
   {{focus-trap isActive=this.shouldTrapFocus}}
-  {{did-insert this.didInsert}}
+  {{this._registerContainersToHide}}
 >
   <:root>
     {{#if this.hasA11yRefocus}}
@@ -34,8 +34,7 @@
       <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
       {{! template-lint-enable no-invalid-interactive}}
       <Hds::SideNav::ToggleButton
-        aria-label={{this.ariaLabel}}
-        aria-labelledby={{unless this.ariaLabel "hds-side-nav-header"}}
+        aria-labelledby="hds-side-nav-header"
         aria-expanded={{if this.isMinimized "false" "true"}}
         @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
         {{on "click" this.toggleMinimizedStatus}}
diff --git a/packages/components/src/components/hds/side-nav/index.ts b/packages/components/src/components/hds/side-nav/index.ts
index fb043283916..d515828950d 100644
--- a/packages/components/src/components/hds/side-nav/index.ts
+++ b/packages/components/src/components/hds/side-nav/index.ts
@@ -8,6 +8,7 @@ import { deprecate } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { registerDestructor } from '@ember/destroyable';
+import { modifier } from 'ember-modifier';
 
 import type { HdsSideNavBaseSignature } from './base';
 import type Owner from '@ember/owner';
@@ -23,10 +24,6 @@ export interface HdsSideNavSignature {
     a11yRefocusNavigationText?: string;
     a11yRefocusRouteChangeValidator?: string;
     a11yRefocusExcludeAllQueryParams?: boolean;
-    /**
-     * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button
-     */
-    ariaLabel?: string | undefined;
 
     onToggleMinimizedStatus?: (arg: boolean) => void;
 
@@ -84,7 +81,7 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
       false,
       {
         id: 'hds.components.sidenav',
-        until: '5.0.0',
+        until: '6.0.0',
         url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
         for: '@hashicorp/design-system-components',
         since: {
@@ -93,23 +90,6 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
         },
       }
     );
-
-    if (args.ariaLabel !== undefined) {
-      deprecate(
-        'The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button',
-        false,
-        {
-          id: 'hds.sidenav',
-          until: '5.0.0',
-          url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
-          for: '@hashicorp/design-system-components',
-          since: {
-            available: '4.14.0',
-            enabled: '5.0.0',
-          },
-        }
-      );
-    }
   }
 
   addEventListeners(): void {
@@ -157,13 +137,6 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
     return (this.isResponsive && !this.isDesktop) || this.isCollapsible;
   }
 
-  /**
-   * @deprecated The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button
-   */
-  get ariaLabel(): string | undefined {
-    return this.args.ariaLabel;
-  }
-
   get classNames(): string {
     const classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
 
@@ -198,6 +171,14 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
     });
   }
 
+  private _registerContainersToHide = modifier(
+    (element: HdsSideNavSignature['Element']): void => {
+      this.containersToHide = element.querySelectorAll(
+        '.hds-side-nav-hide-when-minimized'
+      );
+    }
+  );
+
   @action
   escapePress(event: KeyboardEvent): void {
     if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {
@@ -219,13 +200,6 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
     }
   }
 
-  @action
-  didInsert(element: HTMLElement): void {
-    this.containersToHide = element.querySelectorAll(
-      '.hds-side-nav-hide-when-minimized'
-    );
-  }
-
   @action
   setTransition(phase: string, event: TransitionEvent): void {
     // we only want to respond to `width` animation/transitions
diff --git a/packages/components/src/components/hds/side-nav/list/index.hbs b/packages/components/src/components/hds/side-nav/list/index.hbs
index 9b547bf8f87..7fe9d1eca06 100644
--- a/packages/components/src/components/hds/side-nav/list/index.hbs
+++ b/packages/components/src/components/hds/side-nav/list/index.hbs
@@ -10,7 +10,7 @@
       (hash
         Item=(component "hds/side-nav/list/item")
         BackLink=(component "hds/side-nav/list/back-link")
-        Title=(component "hds/side-nav/list/title" didInsertTitle=this.didInsertTitle)
+        Title=(component "hds/side-nav/list/title" registerTitleId=this._registerTitleId)
         Link=(component "hds/side-nav/list/link")
       )
     }}
diff --git a/packages/components/src/components/hds/side-nav/list/index.ts b/packages/components/src/components/hds/side-nav/list/index.ts
index a24e97f0b55..b8d481971ff 100644
--- a/packages/components/src/components/hds/side-nav/list/index.ts
+++ b/packages/components/src/components/hds/side-nav/list/index.ts
@@ -6,6 +6,9 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+import { schedule } from '@ember/runloop';
+
 import type { ComponentLike } from '@glint/template';
 import type { HdsYieldSignature } from '../../yield';
 import type { HdsSideNavListItemSignature } from './item';
@@ -29,6 +32,10 @@ export interface HdsSideNavListSignature {
   Element: HTMLElement;
 }
 
+export interface HdsSideNavListRegisterTitleIdModifierSignature {
+  Element: HdsSideNavListSignature['Element'];
+}
+
 export default class HdsSideNavList extends Component<HdsSideNavListSignature> {
   @tracked _titleIds: string[] = [];
 
@@ -40,4 +47,13 @@ export default class HdsSideNavList extends Component<HdsSideNavListSignature> {
   didInsertTitle(titleId: string): void {
     this._titleIds = [...this._titleIds, titleId];
   }
+
+  private _registerTitleId =
+    modifier<HdsSideNavListRegisterTitleIdModifierSignature>((element) => {
+      // eslint-disable-next-line ember/no-runloop
+      schedule(
+        'afterRender',
+        () => (this._titleIds = [...this._titleIds, element.id])
+      );
+    });
 }
diff --git a/packages/components/src/components/hds/side-nav/list/title.hbs b/packages/components/src/components/hds/side-nav/list/title.hbs
index 53c7a8a6fde..4a8a7f3dbbc 100644
--- a/packages/components/src/components/hds/side-nav/list/title.hbs
+++ b/packages/components/src/components/hds/side-nav/list/title.hbs
@@ -7,7 +7,7 @@
   <div
     class="hds-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold"
     id={{this.titleId}}
-    {{did-insert this.didInsertTitle}}
+    {{@registerTitleId}}
     ...attributes
   >{{~yield~}}</div>
 </Hds::SideNav::List::Item>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/list/title.ts b/packages/components/src/components/hds/side-nav/list/title.ts
index 205df3fe043..a1b6217a9d6 100644
--- a/packages/components/src/components/hds/side-nav/list/title.ts
+++ b/packages/components/src/components/hds/side-nav/list/title.ts
@@ -4,12 +4,14 @@
  */
 
 import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
+import type { ModifierLike } from '@glint/template';
+import type { HdsSideNavListRegisterTitleIdModifierSignature } from './index.ts';
+
 export interface HdsSideNavListTitleSignature {
   Args: {
-    didInsertTitle?: (titleId: string) => void;
+    registerTitleId?: ModifierLike<HdsSideNavListRegisterTitleIdModifierSignature>;
   };
   Blocks: {
     default: [];
@@ -20,13 +22,4 @@ export interface HdsSideNavListTitleSignature {
 export default class HdsSideNavListTitle extends Component<HdsSideNavListTitleSignature> {
   /*  Generate a unique ID for each Title */
   titleId = 'title-' + guidFor(this);
-
-  @action
-  didInsertTitle(element: HTMLElement): void {
-    const { didInsertTitle } = this.args;
-
-    if (typeof didInsertTitle === 'function') {
-      didInsertTitle(element.id);
-    }
-  }
 }
diff --git a/packages/components/src/components/hds/side-nav/portal/target.hbs b/packages/components/src/components/hds/side-nav/portal/target.hbs
index 000fa99b686..5a5725875e8 100644
--- a/packages/components/src/components/hds/side-nav/portal/target.hbs
+++ b/packages/components/src/components/hds/side-nav/portal/target.hbs
@@ -9,6 +9,6 @@
     @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}}
+    {{this._animateSubnav this.numSubnavs}}
   />
 </div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/portal/target.ts b/packages/components/src/components/hds/side-nav/portal/target.ts
index 076fb5e9eab..96ccf567b18 100644
--- a/packages/components/src/components/hds/side-nav/portal/target.ts
+++ b/packages/components/src/components/hds/side-nav/portal/target.ts
@@ -4,9 +4,11 @@
  */
 
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { next } from '@ember/runloop';
 import { macroCondition, isTesting } from '@embroider/macros';
 
 import type { HdsSideNavPortalSignature } from './index';
@@ -41,16 +43,18 @@ export default class HdsSideNavPortalTarget extends Component<HdsSideNavPortalTa
     );
   }
 
+  private _animateSubnav = modifier(
+    (element: HTMLElement, [count]: [number]) => {
+      // eslint-disable-next-line ember/no-runloop
+      next(() => this.animateSubnav(element, [count]));
+    }
+  );
+
   @action
   panelsChanged(portalCount: number): void {
     this.numSubnavs = portalCount;
   }
 
-  @action
-  didUpdateSubnav(element: HTMLElement, [count]: [number]): void {
-    this.animateSubnav(element, [count]);
-  }
-
   @action
   animateSubnav(element: HTMLElement, [count]: [number]): void {
     /*
diff --git a/packages/components/src/components/hds/table/th-selectable.hbs b/packages/components/src/components/hds/table/th-selectable.hbs
index 1e57c3eab94..daddaefe789 100644
--- a/packages/components/src/components/hds/table/th-selectable.hbs
+++ b/packages/components/src/components/hds/table/th-selectable.hbs
@@ -15,8 +15,7 @@
       class="hds-table__checkbox"
       checked={{@isSelected}}
       aria-label={{this.ariaLabel}}
-      {{did-insert this.didInsert}}
-      {{will-destroy this.willDestroyNode}}
+      {{this._registerCheckbox}}
       {{on "change" this.onSelectionChange}}
     />
     {{#if this.isSortable}}
diff --git a/packages/components/src/components/hds/table/th-selectable.ts b/packages/components/src/components/hds/table/th-selectable.ts
index 1b7681f1e9d..2ef15297408 100644
--- a/packages/components/src/components/hds/table/th-selectable.ts
+++ b/packages/components/src/components/hds/table/th-selectable.ts
@@ -7,6 +7,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
 import {
   HdsTableThSortOrderValues,
   HdsTableThSortOrderLabelValues,
@@ -74,22 +75,23 @@ export default class HdsTableThSelectable extends Component<HdsTableThSelectable
     }
   }
 
-  @action
-  didInsert(checkbox: HdsFormCheckboxBaseSignature['Element']): void {
-    const { didInsert } = this.args;
-    if (typeof didInsert === 'function') {
-      didInsert(checkbox, this.args.selectionKey);
-    }
-  }
+  private _registerCheckbox = modifier(
+    (element: HdsFormCheckboxBaseSignature['Element']) => {
+      const { didInsert } = this.args;
 
-  @action
-  willDestroyNode(): void {
-    super.willDestroy();
-    const { willDestroy } = this.args;
-    if (typeof willDestroy === 'function') {
-      willDestroy(this.args.selectionKey);
+      if (typeof didInsert === 'function') {
+        didInsert(element, this.args.selectionKey);
+      }
+
+      return () => {
+        const { willDestroy } = this.args;
+
+        if (typeof willDestroy === 'function') {
+          willDestroy(this.args.selectionKey);
+        }
+      };
     }
-  }
+  );
 
   @action
   onSelectionChange(event: Event): void {
diff --git a/packages/components/src/components/hds/tabs/index.hbs b/packages/components/src/components/hds/tabs/index.hbs
index 8077c541385..07fb8702f6b 100644
--- a/packages/components/src/components/hds/tabs/index.hbs
+++ b/packages/components/src/components/hds/tabs/index.hbs
@@ -5,10 +5,10 @@
 {{! template-lint-disable no-invalid-role }}
 <div
   class={{this.classNames}}
-  {{did-insert this.didInsert}}
-  {{did-update this.didUpdateSelectedTabIndex this.selectedTabIndex}}
-  {{did-update this.didUpdateSelectedTabId this._selectedTabId}}
-  {{did-update this.didUpdateParentVisibility @isParentVisible}}
+  {{this._handleInsert}}
+  {{this._updateSelectedTabIndex this.selectedTabIndex}}
+  {{this._updateSelectedTabId this._selectedTabId}}
+  {{this._updateParentVisibility @isParentVisible}}
   ...attributes
 >
   <div class="hds-tabs__tablist-wrapper">
diff --git a/packages/components/src/components/hds/tabs/index.ts b/packages/components/src/components/hds/tabs/index.ts
index 30cf6a0c6d7..a08c4aea221 100644
--- a/packages/components/src/components/hds/tabs/index.ts
+++ b/packages/components/src/components/hds/tabs/index.ts
@@ -9,6 +9,8 @@ import { action } from '@ember/object';
 import { assert, warn } from '@ember/debug';
 import { next, schedule } from '@ember/runloop';
 import { HdsTabsSizeValues } from './types.ts';
+import { modifier } from 'ember-modifier';
+
 import type { ComponentLike } from '@glint/template';
 import type { HdsTabsTabSignature } from './tab';
 import type { HdsTabsPanelSignature } from './panel';
@@ -89,11 +91,6 @@ export default class HdsTabs extends Component<HdsTabsSignature> {
     }
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-tabs'];
 
@@ -103,50 +100,58 @@ export default class HdsTabs extends Component<HdsTabsSignature> {
     return classes.join(' ');
   }
 
-  @action
-  didInsert(): void {
-    assert(
-      'The number of Tabs must be equal to the number of Panels',
-      this._tabNodes.length === this._panelNodes.length
-    );
-
-    if (this._selectedTabId) {
-      this.selectedTabIndex = this._tabIds.indexOf(this._selectedTabId);
-    }
-
+  private _handleInsert = modifier(() => {
     // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', (): void => {
-      this.setTabIndicator();
-    });
-  }
+      assert(
+        'The number of Tabs must be equal to the number of Panels',
+        this._tabNodes.length === this._panelNodes.length
+      );
 
-  @action
-  didUpdateSelectedTabIndex(): void {
-    // eslint-disable-next-line ember/no-runloop
-    schedule('afterRender', (): void => {
-      this.setTabIndicator();
-    });
-  }
-
-  @action
-  didUpdateSelectedTabId(): void {
-    // if the selected tab is set dynamically (eg. in a `each` loop)
-    // the `Tab` nodes will be re-inserted/rendered, which means the `this.selectedTabId` variable changes
-    // but the parent `Tabs` component has already been rendered/inserted but doesn't re-render
-    // so the value of the `selectedTabIndex` is not updated, unless we trigger a recalculation
-    // using the `did-update` modifier that checks for changes in the `this.selectedTabId` variable
-    if (this._selectedTabId) {
-      this.selectedTabIndex = this._tabIds.indexOf(this._selectedTabId);
-    }
-  }
+      if (this._selectedTabId) {
+        this.selectedTabIndex = this._tabIds.indexOf(this._selectedTabId);
+      }
 
-  @action
-  didUpdateParentVisibility(): void {
-    // eslint-disable-next-line ember/no-runloop
-    schedule('afterRender', (): void => {
       this.setTabIndicator();
     });
-  }
+  });
+
+  private _updateSelectedTabIndex = modifier(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_element, [_selectedTabIndex]): void => {
+      // eslint-disable-next-line ember/no-runloop
+      schedule('afterRender', (): void => {
+        this.setTabIndicator();
+      });
+    }
+  );
+
+  private _updateSelectedTabId = modifier(
+    (_element, [_selectedTabId]: [string | undefined]): void => {
+      // if the selected tab is set dynamically (eg. in a `each` loop)
+      // the `Tab` nodes will be re-inserted/rendered, which means the `this.selectedTabId` variable changes
+      // but the parent `Tabs` component has already been rendered/inserted but doesn't re-render
+      // so the value of the `selectedTabIndex` is not updated, unless we trigger a recalculation
+      // using the `did-update` modifier that checks for changes in the `this.selectedTabId` variable
+      if (_selectedTabId !== undefined) {
+        this.selectedTabIndex = this._tabIds.indexOf(_selectedTabId);
+      }
+    }
+  );
+
+  private _updateParentVisibility = modifier(
+    (
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _element,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      [_isParentVisible]: [HdsTabsSignature['Args']['isParentVisible']]
+    ): void => {
+      // eslint-disable-next-line ember/no-runloop
+      schedule('afterRender', (): void => {
+        this.setTabIndicator();
+      });
+    }
+  );
 
   @action
   didInsertTab(element: HTMLButtonElement, isSelected?: boolean): void {
diff --git a/packages/components/src/components/hds/tabs/panel.hbs b/packages/components/src/components/hds/tabs/panel.hbs
index 5d49c7e38ac..3c7231db95d 100644
--- a/packages/components/src/components/hds/tabs/panel.hbs
+++ b/packages/components/src/components/hds/tabs/panel.hbs
@@ -9,8 +9,7 @@
   id={{this._panelId}}
   hidden={{not this.isVisible}}
   aria-labelledby={{this.coupledTabId}}
-  {{did-insert this.didInsertNode}}
-  {{will-destroy this.willDestroyNode}}
+  {{this._handleLifecycle}}
 >
   {{yield (hash isVisible=this.isVisible)}}
 </section>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/tabs/panel.ts b/packages/components/src/components/hds/tabs/panel.ts
index 4328d72efc7..44eb263afa6 100644
--- a/packages/components/src/components/hds/tabs/panel.ts
+++ b/packages/components/src/components/hds/tabs/panel.ts
@@ -5,9 +5,11 @@
 
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+
 import type { HdsTabsTabSignature } from './tab';
 import type { HdsTabsPanelIds, HdsTabsTabIds } from './types';
+import { schedule } from '@ember/runloop';
 
 export interface HdsTabsPanelSignature {
   Args: {
@@ -61,22 +63,24 @@ export default class HdsTabsPanel extends Component<HdsTabsPanelSignature> {
       : undefined;
   }
 
-  @action
-  didInsertNode(element: HTMLElement): void {
-    const { didInsertNode } = this.args;
+  private _handleLifecycle = modifier((element: HTMLElement) => {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      const { didInsertNode } = this.args;
 
-    if (typeof didInsertNode === 'function') {
-      this._elementId = element.id;
-      didInsertNode(element, this._elementId);
-    }
-  }
+      if (typeof didInsertNode === 'function') {
+        this._elementId = element.id;
 
-  @action
-  willDestroyNode(element: HTMLElement): void {
-    const { willDestroyNode } = this.args;
+        didInsertNode(element, this._elementId);
+      }
+    });
 
-    if (typeof willDestroyNode === 'function') {
-      willDestroyNode(element);
-    }
-  }
+    return () => {
+      const { willDestroyNode } = this.args;
+
+      if (typeof willDestroyNode === 'function') {
+        willDestroyNode(element);
+      }
+    };
+  });
 }
diff --git a/packages/components/src/components/hds/tabs/tab.hbs b/packages/components/src/components/hds/tabs/tab.hbs
index 4fe78914232..59df6ad845e 100644
--- a/packages/components/src/components/hds/tabs/tab.hbs
+++ b/packages/components/src/components/hds/tabs/tab.hbs
@@ -12,9 +12,8 @@
     aria-controls={{this.coupledPanelId}}
     aria-selected={{if this.isSelected "true" "false"}}
     tabindex={{unless this.isSelected "-1"}}
-    {{did-insert this.didInsertNode @isSelected}}
-    {{did-update this.didUpdateNode @count @isSelected}}
-    {{will-destroy this.willDestroyNode}}
+    {{this._handleLifecycle}}
+    {{this._handleUpdates @count @isSelected}}
     {{on "click" this.onClick}}
     {{on "keyup" this.onKeyUp}}
   >
diff --git a/packages/components/src/components/hds/tabs/tab.ts b/packages/components/src/components/hds/tabs/tab.ts
index 25a302f7a69..2e20438b7d3 100644
--- a/packages/components/src/components/hds/tabs/tab.ts
+++ b/packages/components/src/components/hds/tabs/tab.ts
@@ -6,6 +6,9 @@
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+import { schedule } from '@ember/runloop';
+
 import type { IconName } from '@hashicorp/flight-icons/svg';
 import type { HdsTabsTabIds, HdsTabsPanelIds } from './types';
 
@@ -63,34 +66,41 @@ export default class HdsTabsTab extends Component<HdsTabsTabSignature> {
       : undefined;
   }
 
-  @action
-  didInsertNode(element: HTMLButtonElement, positional: [boolean?]): void {
-    const { didInsertNode } = this.args;
-
-    const isSelected = positional[0];
-
-    if (typeof didInsertNode === 'function') {
-      didInsertNode(element, isSelected);
+  private _handleLifecycle = modifier((element: HTMLButtonElement) => {
+    // eslint-disable-next-line ember/no-runloop
+    schedule('afterRender', () => {
+      const { isSelected, didInsertNode } = this.args;
+
+      if (typeof didInsertNode === 'function') {
+        didInsertNode(element, isSelected);
+      }
+    });
+
+    return () => {
+      const { willDestroyNode } = this.args;
+
+      if (typeof willDestroyNode === 'function') {
+        willDestroyNode(element);
+      }
+    };
+  });
+
+  private _handleUpdates = modifier(
+    (
+      _element,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      [_count, isSelected]: [
+        HdsTabsTabSignature['Args']['count'],
+        HdsTabsTabSignature['Args']['isSelected'],
+      ]
+    ): void => {
+      const { didUpdateNode } = this.args;
+
+      if (typeof didUpdateNode === 'function' && this.nodeIndex !== undefined) {
+        didUpdateNode(this.nodeIndex, isSelected);
+      }
     }
-  }
-
-  @action
-  didUpdateNode(): void {
-    const { didUpdateNode } = this.args;
-
-    if (typeof didUpdateNode === 'function' && this.nodeIndex !== undefined) {
-      didUpdateNode(this.nodeIndex, this.args.isSelected);
-    }
-  }
-
-  @action
-  willDestroyNode(element: HTMLButtonElement): void {
-    const { willDestroyNode } = this.args;
-
-    if (typeof willDestroyNode === 'function') {
-      willDestroyNode(element);
-    }
-  }
+  );
 
   @action
   onClick(event: MouseEvent): false | undefined {
diff --git a/packages/components/src/components/hds/time/index.ts b/packages/components/src/components/hds/time/index.ts
index 3f35278fe0e..8a54306f9c3 100644
--- a/packages/components/src/components/hds/time/index.ts
+++ b/packages/components/src/components/hds/time/index.ts
@@ -5,7 +5,7 @@
 
 import Component from '@glimmer/component';
 import { typeOf } from '@ember/utils';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { action } from '@ember/object';
 import type { DisplayType } from '../../../services/hds-time-types.ts';
 
diff --git a/packages/components/src/components/hds/time/range.ts b/packages/components/src/components/hds/time/range.ts
index 1a0081f5efd..7198e56713e 100644
--- a/packages/components/src/components/hds/time/range.ts
+++ b/packages/components/src/components/hds/time/range.ts
@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import type TimeService from '../../../services/hds-time';
 
 export interface HdsTimeRangeSignature {
diff --git a/packages/components/src/components/hds/time/single.hbs b/packages/components/src/components/hds/time/single.hbs
index 1484eaa202e..b1de49dab98 100644
--- a/packages/components/src/components/hds/time/single.hbs
+++ b/packages/components/src/components/hds/time/single.hbs
@@ -7,8 +7,7 @@
   class="hds-time hds-time--single"
   datetime={{@isoUtcString}}
   ...attributes
-  {{did-insert @register}}
-  {{will-destroy @unregister}}
+  {{hds-lifecycle didInsert=@register willDestroy=@unregister passElement=false}}
 >
   {{~#if @display.options.showFriendly~}}
     {{~#if @display.options.displayFormat~}}
diff --git a/packages/components/src/instance-initializers/load-sprite.ts b/packages/components/src/instance-initializers/load-sprite.ts
index 8d5cf982217..a88ecd9eccb 100644
--- a/packages/components/src/instance-initializers/load-sprite.ts
+++ b/packages/components/src/instance-initializers/load-sprite.ts
@@ -6,11 +6,8 @@
 import config from 'ember-get-config';
 
 export async function initialize() {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
-  const legacyLazyEmbed = config?.emberFlightIcons?.lazyEmbed;
-
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  if (config?.flightIconsSpriteLazyEmbed || legacyLazyEmbed) {
+  if (config?.flightIconsSpriteLazyEmbed) {
     const { default: svgSprite } = await import(
       '@hashicorp/flight-icons/svg-sprite/svg-sprite-module'
     );
diff --git a/packages/components/src/modifiers/hds-lifecycle.ts b/packages/components/src/modifiers/hds-lifecycle.ts
new file mode 100644
index 00000000000..cf6d0734836
--- /dev/null
+++ b/packages/components/src/modifiers/hds-lifecycle.ts
@@ -0,0 +1,38 @@
+import { modifier } from 'ember-modifier';
+
+type HdsLifecycleCallback = ((element: HTMLElement) => void) | (() => void);
+
+export interface HdsLifecycleModifierSignature {
+  Element: HTMLElement;
+  Args: {
+    Named: {
+      didInsert?: HdsLifecycleCallback;
+      willDestroy?: HdsLifecycleCallback;
+      passElement?: boolean;
+    };
+  };
+}
+
+const hdsLifecycleModifier = modifier<HdsLifecycleModifierSignature>(
+  (element, _positional, { didInsert, willDestroy, passElement = true }) => {
+    if (typeof didInsert === 'function') {
+      if (passElement) {
+        (didInsert as (element: HTMLElement) => void)(element);
+      } else {
+        (didInsert as () => void)();
+      }
+    }
+
+    return () => {
+      if (typeof willDestroy === 'function') {
+        if (passElement) {
+          (willDestroy as (element: HTMLElement) => void)(element);
+        } else {
+          (willDestroy as () => void)();
+        }
+      }
+    };
+  }
+);
+
+export default hdsLifecycleModifier;
diff --git a/packages/components/src/modifiers/hds-register-element.ts b/packages/components/src/modifiers/hds-register-element.ts
new file mode 100644
index 00000000000..812065f09b2
--- /dev/null
+++ b/packages/components/src/modifiers/hds-register-element.ts
@@ -0,0 +1,34 @@
+import { modifier } from 'ember-modifier';
+import { assert } from '@ember/debug';
+
+type HdsRegisterElementCallback = (element: HTMLElement) => void;
+
+export interface HdsRegisterElementModifierSignature {
+  Element: HTMLElement;
+  Args: {
+    Positional: [
+      onInsert: HdsRegisterElementCallback,
+      onDestroy?: HdsRegisterElementCallback,
+    ];
+  };
+}
+
+const hdsRegisterElementModifier =
+  modifier<HdsRegisterElementModifierSignature>(
+    (element, [onInsert, onDestroy]) => {
+      assert(
+        'The `onInsert` argument for "hds-register-element" must be a function.',
+        typeof onInsert === 'function'
+      );
+
+      onInsert(element);
+
+      return () => {
+        if (typeof onDestroy === 'function') {
+          onDestroy(element);
+        }
+      };
+    }
+  );
+
+export default hdsRegisterElementModifier;
diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss
index 00c6008b820..c74eaa36f4b 100644
--- a/packages/components/src/styles/@hashicorp/design-system-components.scss
+++ b/packages/components/src/styles/@hashicorp/design-system-components.scss
@@ -39,7 +39,6 @@
 @use "../components/icon-tile";
 @use "../components/layout"; // multiple components
 @use "../components/link"; // multiple components
-@use "../components/menu-primitive";
 @use "../components/modal";
 @use "../components/page-header";
 @use "../components/pagination";
diff --git a/packages/components/src/styles/components/dropdown.scss b/packages/components/src/styles/components/dropdown.scss
index 0c35374cd8b..014c6146f74 100644
--- a/packages/components/src/styles/components/dropdown.scss
+++ b/packages/components/src/styles/components/dropdown.scss
@@ -207,7 +207,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
 
 // LIST
 // UL ELEMENT
-// GOES INSIDE HDS::MenuPrimitive's :content block
+// GOES INSIDE HDS::PopoverPrimitive's popover element
 
 .hds-dropdown__content {
   position: relative;
diff --git a/packages/components/src/styles/components/menu-primitive.scss b/packages/components/src/styles/components/menu-primitive.scss
deleted file mode 100644
index 0ed5a234395..00000000000
--- a/packages/components/src/styles/components/menu-primitive.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-//
-// MenuPrimitive COMPONENT
-//
-
-.hds-menu-primitive {
-  position: relative;
-  width: fit-content;
-}
diff --git a/packages/components/src/styles/components/side-nav/header.scss b/packages/components/src/styles/components/side-nav/header.scss
index e79eb3d3add..a20703abd02 100644
--- a/packages/components/src/styles/components/side-nav/header.scss
+++ b/packages/components/src/styles/components/side-nav/header.scss
@@ -94,29 +94,3 @@
     }
   }
 }
-
-// generic "icon-button"
-
-// TODO: Replace this component with Hds::Button
-.hds-side-nav__icon-button {
-  @include hds-interactive-dark-theme();
-  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
-
-  // disabled state:
-  &:disabled,
-  &[disabled],
-  &.mock-disabled,
-  &:disabled:focus,
-  &[disabled]:focus,
-  &.mock-disabled:focus,
-  &:disabled:hover,
-  &[disabled]:hover,
-  &.mock-disabled:hover {
-    @include hds-interactive-dark-theme-state-disabled();
-  }
-}
diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts
index 66183aa31c6..8f066b17b6d 100644
--- a/packages/components/src/template-registry.ts
+++ b/packages/components/src/template-registry.ts
@@ -97,10 +97,6 @@ import type HdsDropdownListItemTitleComponent from './components/hds/dropdown/li
 import type HdsDropdownToggleButtonComponent from './components/hds/dropdown/toggle/button';
 import type HdsDropdownToggleChevronComponent from './components/hds/dropdown/toggle/chevron';
 import type HdsDropdownToggleIconComponent from './components/hds/dropdown/toggle/icon';
-import type HdsFlyoutBodyComponent from './components/hds/flyout/body';
-import type HdsFlyoutDescriptionComponent from './components/hds/flyout/description';
-import type HdsFlyoutFooterComponent from './components/hds/flyout/footer';
-import type HdsFlyoutHeaderComponent from './components/hds/flyout/header';
 import type HdsFlyoutComponent from './components/hds/flyout';
 
 import type HdsFormComponent from './components/hds/form';
@@ -168,10 +164,6 @@ import type HdsLayoutGridComponent from './components/hds/layout/grid';
 import type HdsLayoutGridItemComponent from './components/hds/layout/grid/item';
 import type HdsLinkInlineComponent from './components/hds/link/inline';
 import type HdsLinkStandaloneComponent from './components/hds/link/standalone';
-import type HdsMenuPrimitiveComponent from './components/hds/menu-primitive';
-import type HdsModalBodyComponent from './components/hds/modal/body';
-import type HdsModalFooterComponent from './components/hds/modal/footer';
-import type HdsModalHeaderComponent from './components/hds/modal/header';
 import type HdsModalComponent from './components/hds/modal/';
 import type HdsPageHeaderComponent from './components/hds/page-header';
 import type HdsPageHeaderActionsComponent from './components/hds/page-header/actions';
@@ -201,7 +193,6 @@ import type HdsSideNavPortalComponent from './components/hds/side-nav/portal';
 import type HdsSideNavPortalTargetComponent from './components/hds/side-nav/portal/target';
 import type HdsSideNavHeaderComponent from './components/hds/side-nav/header';
 import type HdsSideNavHeaderHomeLinkComponent from './components/hds/side-nav/header/home-link';
-import type HdsSideNavHeaderIconButtonComponent from './components/hds/side-nav/header/icon-button';
 import type HdsSideNavListComponent from './components/hds/side-nav/list';
 import type HdsSideNavListBackLinkComponent from './components/hds/side-nav/list/back-link';
 import type HdsSideNavListItemComponent from './components/hds/side-nav/list/item';
@@ -251,6 +242,8 @@ import type HdsClipboardModifier from './modifiers/hds-clipboard.ts';
 import type HdsRegisterEventModifier from './modifiers/hds-register-event.ts';
 import type HdsTooltipModifier from './modifiers/hds-tooltip.ts';
 import type HdsAdvancedTableCellModifier from './modifiers/hds-advanced-table-cell.ts';
+import type HdsLifecycleModifier from './modifiers/hds-lifecycle.ts';
+import type HdsRegisterElementModifier from './modifiers/hds-register-element.ts';
 
 export default interface HdsComponentsRegistry {
   // ----- COMPONENTS ---------------------------------------------------
@@ -570,18 +563,6 @@ export default interface HdsComponentsRegistry {
   'Hds::Flyout': typeof HdsFlyoutComponent;
   'hds/flyout': typeof HdsFlyoutComponent;
 
-  'Hds::Flyout::Body': typeof HdsFlyoutBodyComponent;
-  'hds/flyout/body': typeof HdsFlyoutBodyComponent;
-
-  'Hds::Flyout::Description': typeof HdsFlyoutDescriptionComponent;
-  'hds/flyout/description': typeof HdsFlyoutDescriptionComponent;
-
-  'Hds::Flyout::Footer': typeof HdsFlyoutFooterComponent;
-  'hds/flyout/footer': typeof HdsFlyoutFooterComponent;
-
-  'Hds::Flyout::Header': typeof HdsFlyoutHeaderComponent;
-  'hds/flyout/header': typeof HdsFlyoutHeaderComponent;
-
   // FORM
   'Hds::Form': typeof HdsFormComponent;
   'hds/form': typeof HdsFormComponent;
@@ -806,23 +787,10 @@ export default interface HdsComponentsRegistry {
   'Hds::Link::Standalone': typeof HdsLinkStandaloneComponent;
   'hds/link/standalone': typeof HdsLinkStandaloneComponent;
 
-  // MenuPrimitive
-  'Hds::MenuPrimitive': typeof HdsMenuPrimitiveComponent;
-  'hds/menu-primitive': typeof HdsMenuPrimitiveComponent;
-
   // Modal
   'Hds::Modal': typeof HdsModalComponent;
   'hds/modal': typeof HdsModalComponent;
 
-  'Hds::ModalBody': typeof HdsModalBodyComponent;
-  'hds/modal/body': typeof HdsModalBodyComponent;
-
-  'Hds::ModalFooter': typeof HdsModalFooterComponent;
-  'hds/modal/footer': typeof HdsModalFooterComponent;
-
-  'Hds::ModalHeader': typeof HdsModalHeaderComponent;
-  'hds/modal/header': typeof HdsModalHeaderComponent;
-
   // PageHeader
   'Hds::PageHeader': typeof HdsPageHeaderComponent;
   'hds/page-header': typeof HdsPageHeaderComponent;
@@ -925,10 +893,6 @@ export default interface HdsComponentsRegistry {
   'hds/side-nav/header/home-link': typeof HdsSideNavHeaderHomeLinkComponent;
   HdsSideNavHeaderHomeLink: typeof HdsSideNavHeaderHomeLinkComponent;
 
-  'Hds::SideNav::Header::IconButton': typeof HdsSideNavHeaderIconButtonComponent;
-  'hds/side-nav/header/icon-button': typeof HdsSideNavHeaderIconButtonComponent;
-  HdsSideNavHeaderIconButton: typeof HdsSideNavHeaderIconButtonComponent;
-
   'Hds::SideNav::List': typeof HdsSideNavListComponent;
   'hds/side-nav/list': typeof HdsSideNavListComponent;
   HdsSideNavList: typeof HdsSideNavListComponent;
@@ -1071,4 +1035,10 @@ export default interface HdsComponentsRegistry {
 
   // hds-advanced-table-cell
   'hds-advanced-table-cell': typeof HdsAdvancedTableCellModifier;
+
+  // hds-register-element
+  'hds-register-element': typeof HdsRegisterElementModifier;
+
+  // hds-lifecycle
+  'hds-lifecycle': typeof HdsLifecycleModifier;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86152a1465d..ebf5c722479 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -141,9 +141,6 @@ importers:
       ember-a11y-refocus:
         specifier: ^4.1.4
         version: 4.1.4
-      ember-cli-sass:
-        specifier: ^11.0.1
-        version: 11.0.1
       ember-concurrency:
         specifier: ^4.0.4
         version: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2)
@@ -177,9 +174,6 @@ importers:
       prismjs:
         specifier: ^1.30.0
         version: 1.30.0
-      sass:
-        specifier: ^1.83.0
-        version: 1.89.2
       tabbable:
         specifier: ^6.2.0
         version: 6.2.0
@@ -298,6 +292,9 @@ importers:
       rollup-plugin-scss:
         specifier: ^4.0.1
         version: 4.0.1
+      sass:
+        specifier: ^1.89.2
+        version: 1.89.2
       stylelint:
         specifier: ^16.17.0
         version: 16.23.0(typescript@5.9.2)
@@ -14200,7 +14197,6 @@ snapshots:
       codemirror-lang-hcl: 0.0.0-beta.2
       decorator-transforms: 2.3.0(@babel/core@7.28.0)
       ember-a11y-refocus: 4.1.4
-      ember-cli-sass: 11.0.1
       ember-concurrency: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2)
       ember-element-helper: 0.8.8
       ember-focus-trap: 1.1.1(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5))
@@ -14212,7 +14208,6 @@ snapshots:
       ember-truth-helpers: 4.0.3(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5))
       luxon: 3.7.1
       prismjs: 1.30.0
-      sass: 1.89.2
       tabbable: 6.2.0
       tippy.js: 6.3.7
       tracked-built-ins: 4.0.0(@babel/core@7.28.0)
@@ -14258,7 +14253,6 @@ snapshots:
       codemirror-lang-hcl: 0.0.0-beta.2
       decorator-transforms: 2.3.0(@babel/core@7.28.0)
       ember-a11y-refocus: 4.1.4
-      ember-cli-sass: 11.0.1
       ember-concurrency: 4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2)
       ember-element-helper: 0.8.8
       ember-focus-trap: 1.1.1(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5))
@@ -14270,7 +14264,6 @@ snapshots:
       ember-truth-helpers: 4.0.3(ember-source@6.4.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5))
       luxon: 3.7.1
       prismjs: 1.30.0
-      sass: 1.89.2
       tabbable: 6.2.0
       tippy.js: 6.3.7
       tracked-built-ins: 4.0.0(@babel/core@7.28.0)
diff --git a/showcase/app/components/mock/app/header/app-header.gts b/showcase/app/components/mock/app/header/app-header.gts
index 8f9d9f66ad4..226e101691b 100644
--- a/showcase/app/components/mock/app/header/app-header.gts
+++ b/showcase/app/components/mock/app/header/app-header.gts
@@ -96,7 +96,9 @@ export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHe
           <dd.ToggleIcon @icon="user" @text="user menu" />
           <dd.Title @text="Signed In" />
           <dd.Description @text="email@domain.com" />
-          <dd.Interactive @href="#" @text="Account Settings" />
+          <dd.Interactive @href="#">
+            Account Settings
+          </dd.Interactive>
         </HdsDropdown>
       </:utilityActions>
     </HdsAppHeader>
diff --git a/showcase/app/components/page-components/accordion/sub-sections/base-elements.gts b/showcase/app/components/page-components/accordion/sub-sections/base-elements.gts
index ab9b61a50d9..bf5dd33492d 100644
--- a/showcase/app/components/page-components/accordion/sub-sections/base-elements.gts
+++ b/showcase/app/components/page-components/accordion/sub-sections/base-elements.gts
@@ -161,6 +161,7 @@ const SubSectionBaseElements: TemplateOnlyComponent = <template>
 
   <ShwTextH4>States</ShwTextH4>
 
+  {{! This one is broken }}
   {{#each TYPES as |type|}}
     {{#let (array false true) as |booleans|}}
       <ShwTextBody>{{capitalize type}}</ShwTextBody>
diff --git a/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts b/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts
index 9c1734f77e5..a2414a80a74 100644
--- a/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts
+++ b/showcase/app/components/page-components/dropdown/sub-sections/list-items/not-interactive.gts
@@ -43,10 +43,10 @@ const SubSectionListItemNotInteractive: TemplateOnlyComponent = <template>
             @text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
           />
           <HdsDropdownListItemSeparator />
-          <HdsDropdownListItemInteractive
-            @route="index"
-            @text="A longer item that could span multiple lines if the characters surpass a certain length"
-          />
+          <HdsDropdownListItemInteractive @route="index">
+            A longer item that could span multiple lines if the characters
+            surpass a certain length
+          </HdsDropdownListItemInteractive>
         </ul>
       </div>
     </SF.Item>
@@ -60,10 +60,10 @@ const SubSectionListItemNotInteractive: TemplateOnlyComponent = <template>
             @text="A longer description that could span on multiple lines if the number of characters require more width than the dropdown provides by default."
           />
           <HdsDropdownListItemSeparator />
-          <HdsDropdownListItemInteractive
-            @route="index"
-            @text="A longer item that could span multiple lines if the characters surpass a certain length"
-          />
+          <HdsDropdownListItemInteractive @route="index">
+            A longer item that could span multiple lines if the characters
+            surpass a certain length
+          </HdsDropdownListItemInteractive>
         </ul>
       </div>
     </SF.Item>
diff --git a/showcase/app/components/shw/text/index.gts b/showcase/app/components/shw/text/index.gts
index 2a1a5874a50..cf2cbc103d4 100644
--- a/showcase/app/components/shw/text/index.gts
+++ b/showcase/app/components/shw/text/index.gts
@@ -6,8 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { eq } from 'ember-truth-helpers';
-// eslint-disable-next-line ember/no-at-ember-render-modifiers
-import didInsert from '@ember/render-modifiers/modifiers/did-insert';
+import { modifier } from 'ember-modifier';
 
 import { TextTagValues, TextAlignValues, TextWeightValues } from './types';
 
@@ -147,7 +146,7 @@ export default class ShwText extends Component<ShwTextSignature> {
     return classes.join(' ');
   }
 
-  addHeadingLink = (element: HTMLHeadingElement) => {
+  addHeadingLink = modifier((element: HTMLHeadingElement) => {
     const innerText = element.innerText;
     const sanitizedId = innerText
       .trim()
@@ -173,7 +172,7 @@ export default class ShwText extends Component<ShwTextSignature> {
     anchor.className = 'shw-page-heading-link';
     anchor.setAttribute('aria-labelledby', uniqueId);
     element.prepend(anchor);
-  };
+  });
 
   <template>
     {{#if (eq this.tag "h1")}}
@@ -181,31 +180,31 @@ export default class ShwText extends Component<ShwTextSignature> {
     {{else if (eq this.tag "h2")}}
       <h2
         class={{this.classNames}}
-        {{didInsert this.addHeadingLink}}
+        {{this.addHeadingLink}}
         ...attributes
       >{{yield}}</h2>
     {{else if (eq this.tag "h3")}}
       <h3
         class={{this.classNames}}
-        {{didInsert this.addHeadingLink}}
+        {{this.addHeadingLink}}
         ...attributes
       >{{yield}}</h3>
     {{else if (eq this.tag "h4")}}
       <h4
         class={{this.classNames}}
-        {{didInsert this.addHeadingLink}}
+        {{this.addHeadingLink}}
         ...attributes
       >{{yield}}</h4>
     {{else if (eq this.tag "h5")}}
       <h5
         class={{this.classNames}}
-        {{didInsert this.addHeadingLink}}
+        {{this.addHeadingLink}}
         ...attributes
       >{{yield}}</h5>
     {{else if (eq this.tag "h6")}}
       <h6
         class={{this.classNames}}
-        {{didInsert this.addHeadingLink}}
+        {{this.addHeadingLink}}
         ...attributes
       >{{yield}}</h6>
     {{else if (eq this.tag "p")}}
diff --git a/showcase/app/controllers/application.ts b/showcase/app/controllers/application.ts
index 79d6ff8ac42..6ddbb4220eb 100644
--- a/showcase/app/controllers/application.ts
+++ b/showcase/app/controllers/application.ts
@@ -4,7 +4,7 @@
  */
 
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
 import type RouterService from '@ember/routing/router-service';
diff --git a/showcase/app/controllers/page-components.ts b/showcase/app/controllers/page-components.ts
index 926db1879b8..ef49ecebe1f 100644
--- a/showcase/app/controllers/page-components.ts
+++ b/showcase/app/controllers/page-components.ts
@@ -4,7 +4,7 @@
  */
 
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { scheduleOnce } from '@ember/runloop';
 
 import type RouterService from '@ember/routing/router-service';
diff --git a/showcase/app/controllers/page-components/code-block.ts b/showcase/app/controllers/page-components/code-block.ts
index 69c6f4a9e2b..97c83ca5080 100644
--- a/showcase/app/controllers/page-components/code-block.ts
+++ b/showcase/app/controllers/page-components/code-block.ts
@@ -6,7 +6,7 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { scheduleOnce } from '@ember/runloop';
 import type Owner from '@ember/owner';
 import type RouterService from '@ember/routing/router-service';
diff --git a/showcase/app/controllers/page-components/pagination/index.ts b/showcase/app/controllers/page-components/pagination/index.ts
index c8abb38262d..337271b85df 100644
--- a/showcase/app/controllers/page-components/pagination/index.ts
+++ b/showcase/app/controllers/page-components/pagination/index.ts
@@ -6,7 +6,7 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 import type RouterService from '@ember/routing/router-service';
 
diff --git a/showcase/app/controllers/page-components/tabs.ts b/showcase/app/controllers/page-components/tabs.ts
index f37902bf9aa..198b4c863b6 100644
--- a/showcase/app/controllers/page-components/tabs.ts
+++ b/showcase/app/controllers/page-components/tabs.ts
@@ -6,7 +6,7 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 import type RouterService from '@ember/routing/router-service';
 import type { PageComponentsTabsModel } from 'showcase/routes/page-components/tabs';
diff --git a/showcase/app/controllers/page-components/time.ts b/showcase/app/controllers/page-components/time.ts
index 5b43fa619bc..2bc7af3a687 100644
--- a/showcase/app/controllers/page-components/time.ts
+++ b/showcase/app/controllers/page-components/time.ts
@@ -4,7 +4,7 @@
  */
 
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 import type TimeService from '@hashicorp/design-system-components/services/hds-time';
 import type { PageComponentsTimeModel } from 'showcase/routes/page-components/time';
diff --git a/showcase/app/controllers/page-utilities.ts b/showcase/app/controllers/page-utilities.ts
index b9a2b81dd0f..060d3ceddc6 100644
--- a/showcase/app/controllers/page-utilities.ts
+++ b/showcase/app/controllers/page-utilities.ts
@@ -4,7 +4,7 @@
  */
 
 import Controller from '@ember/controller';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { scheduleOnce } from '@ember/runloop';
 
 import type Owner from '@ember/owner';
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index 3defc276327..9c93eafb5eb 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -137,7 +137,6 @@ Router.map(function () {
     this.route('disclosure-primitive');
     this.route('dismiss-button');
     this.route('interactive');
-    this.route('menu-primitive');
     this.route('popover-primitive');
   });
   this.route('page-overrides', { path: 'overrides' }, function () {
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index fb06fee50bd..f4205a7f1bf 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -66,7 +66,6 @@
 @use "./showcase-pages/layout/flex" as showcase-layout-flex;
 @use "./showcase-pages/layout/grid" as showcase-layout-grid;
 @use "./showcase-pages/link-inline" as showcase-link-inline;
-@use "./showcase-pages/menu-primitive" as showcase-menu-primitive;
 @use "./showcase-pages/modal" as showcase-modal;
 @use "./showcase-pages/page-header" as showcase-page-header;
 @use "./showcase-pages/pagination" as showcase-pagination;
diff --git a/showcase/app/styles/showcase-pages/menu-primitive.scss b/showcase/app/styles/showcase-pages/menu-primitive.scss
deleted file mode 100644
index 02f0eea3691..00000000000
--- a/showcase/app/styles/showcase-pages/menu-primitive.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-// MenuPrimitive
-
-body.page-utilities-menu-primitive {
-  .shw-utility-menu-primitive-container {
-    min-height: 120px;
-    padding: 20px;
-    outline: 1px dotted var(--shw-color-gray-400);
-  }
-
-  .shw-utility-menu-primitive-content-list-of-links {
-    width: fit-content;
-    margin: 4px 0 0 0;
-    padding: 10px;
-    list-style: none;
-    border: 1px solid #ccc;
-
-    li {
-      margin: 0;
-      padding: 0;
-
-      & + li {
-        border-top: 1px dotted #ccc;
-      }
-    }
-
-    a {
-      display: block;
-      padding: 5px;
-    }
-  }
-
-  .shw-utility-menu-primitive-button-wrapper {
-    padding: 20px;
-    outline: 1px dotted #ccc;
-  }
-}
diff --git a/showcase/app/templates/index.hbs b/showcase/app/templates/index.hbs
index e54ca02ab7e..151c12a3c52 100644
--- a/showcase/app/templates/index.hbs
+++ b/showcase/app/templates/index.hbs
@@ -369,11 +369,6 @@
           Interactive
         </LinkTo>
       </li>
-      <li>
-        <LinkTo @route="page-utilities.menu-primitive">
-          MenuPrimitive
-        </LinkTo>
-      </li>
       <li>
         <LinkTo @route="page-utilities.popover-primitive">
           PopoverPrimitive
diff --git a/showcase/app/templates/page-components/side-nav.hbs b/showcase/app/templates/page-components/side-nav.hbs
index 4fae1e980ff..31b38fe78a5 100644
--- a/showcase/app/templates/page-components/side-nav.hbs
+++ b/showcase/app/templates/page-components/side-nav.hbs
@@ -513,7 +513,7 @@
         </Hds::SideNav::Header>
       </div>
     </SF.Item>
-    <SF.Item @label="Logo (HomeLink) + Actions (IconButton + Dropdown)">
+    <SF.Item @label="Logo (HomeLink) + Actions (Button + Dropdown)">
       <div class="shw-component-sim-side-nav-header">
         <Hds::SideNav::Header>
           <:logo>
@@ -601,26 +601,6 @@
   </Shw::Flex>
 </section>
 
-<Shw::Divider @level={{2}} />
-
-<section data-test-percy>
-  {{! TODO: Once IconButton is fully deprecated, remove from examples }}
-  <Shw::Text::H3>SideNav::Header::IconButton (deprecated)</Shw::Text::H3>
-
-  <Shw::Text::H4>States</Shw::Text::H4>
-  <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
-      {{#each states as |state|}}
-        <SF.Item @label={{state}}>
-          <div class="shw-component-sim-side-nav-elem-wrapper">
-            <Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" mock-state-value={{state}} />
-          </div>
-        </SF.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Flex>
-</section>
-
 <Shw::Divider />
 
 <section data-test-percy>
diff --git a/showcase/app/templates/page-utilities/menu-primitive.hbs b/showcase/app/templates/page-utilities/menu-primitive.hbs
deleted file mode 100644
index ac2456e9fc2..00000000000
--- a/showcase/app/templates/page-utilities/menu-primitive.hbs
+++ /dev/null
@@ -1,141 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-{{page-title "MenuPrimitive Component"}}
-
-<Shw::Text::H1>MenuPrimitive</Shw::Text::H1>
-
-<section data-test-percy>
-
-  <Shw::Flex as |SF|>
-    <SF.Label>With generic HTML <code>&lt;button&gt;</code> and generic content (placeholder)</SF.Label>
-    <SF.Item @grow={{true}}>
-      <div class="shw-utility-menu-primitive-container">
-        <Hds::MenuPrimitive>
-          <:toggle as |t|>
-            <button type="button" {{on "click" t.onClickToggle}}>
-              Click me
-              <Hds::Icon @name={{if t.isOpen "chevron-up" "chevron-down"}} />
-            </button>
-          </:toggle>
-          <:content>
-            <Shw::Placeholder @text="some generic content here" @width="200" @height="90" @background="#e1f5fe" />
-          </:content>
-        </Hds::MenuPrimitive>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex as |SF|>
-    <SF.Label>With generic HTML <code>&lt;button&gt;</code> and generic list of <code>&lt;a&gt;</code> links</SF.Label>
-    <SF.Item @grow={{true}}>
-      <div class="shw-utility-menu-primitive-container">
-        <Hds::MenuPrimitive>
-          <:toggle as |t|>
-            <button type="button" {{on "click" t.onClickToggle}}>Click me</button>
-          </:toggle>
-          <:content as |c|>
-            <ul class="shw-utility-menu-primitive-content-list-of-links">
-              <li>
-                <a href="https://google.com">Link to Google</a>
-              </li>
-              <li>
-                <button type="button" {{on "click" c.close}}>Button that closes the disclosed content on click</button>
-              </li>
-            </ul>
-          </:content>
-        </Hds::MenuPrimitive>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex as |SF|>
-    <SF.Label>With generic HTML
-      <code>&lt;button&gt;</code>
-      and generic
-      <code>&lt;input type="date"&gt;</code>
-    </SF.Label>
-    <SF.Item @grow={{true}}>
-      <div class="shw-utility-menu-primitive-container">
-        <Hds::MenuPrimitive>
-          <:toggle as |t|>
-            <button type="button" {{on "click" t.onClickToggle}}>Click me</button>
-          </:toggle>
-          <:content>
-            <ul class="shw-utility-menu-primitive-content-list-of-links">
-              <li>
-                <label for="date-input">Select date</label>
-                <input id="date-input" type="date" />
-              </li>
-            </ul>
-          </:content>
-        </Hds::MenuPrimitive>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex as |SF|>
-    <SF.Label>With <code>&lt;Hds::Button&gt;</code> and generic list of <code>&lt;a&gt;</code> links</SF.Label>
-    <SF.Item @grow={{true}}>
-      <div class="shw-utility-menu-primitive-container">
-        <Hds::MenuPrimitive>
-          <:toggle as |t|>
-            <Hds::Button
-              @icon="chevron-down"
-              @iconPosition="trailing"
-              @text="Click me"
-              {{on "click" t.onClickToggle}}
-            />
-          </:toggle>
-          <:content as |c|>
-            <ul class="shw-utility-menu-primitive-content-list-of-links">
-              <li>
-                <a href="https://google.com">Link to Google</a>
-              </li>
-              <li>
-                <button type="button" {{on "click" c.close}}>Button that closes the disclosed content on click</button>
-              </li>
-            </ul>
-          </:content>
-        </Hds::MenuPrimitive>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex as |SF|>
-    <SF.Label>With
-      <code>&lt;Hds::Button&gt;</code>
-      inside a larger container and generic list of
-      <code>&lt;a&gt;</code>
-      links</SF.Label>
-    <SF.Item @grow={{true}}>
-      <div class="shw-utility-menu-primitive-container">
-        <Hds::MenuPrimitive>
-          <:toggle as |t|>
-            <div class="shw-utility-menu-primitive-button-wrapper">
-              <Hds::Button
-                @icon="chevron-down"
-                @iconPosition="trailing"
-                @text="Click me"
-                {{on "click" t.onClickToggle}}
-              />
-            </div>
-          </:toggle>
-          <:content as |c|>
-            <ul class="shw-utility-menu-primitive-content-list-of-links">
-              <li>
-                <a href="https://google.com">Link to Google</a>
-              </li>
-              <li>
-                <button type="button" {{on "click" c.close}}>Button that closes the disclosed content on click</button>
-              </li>
-            </ul>
-          </:content>
-        </Hds::MenuPrimitive>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-
-</section>
\ No newline at end of file
diff --git a/showcase/config/ember-try.js b/showcase/config/ember-try.js
index 4f73ee52469..3825bfbc0a9 100644
--- a/showcase/config/ember-try.js
+++ b/showcase/config/ember-try.js
@@ -13,20 +13,6 @@ module.exports = async function () {
     command: 'ember test --filter="integration" --reporter xunit',
     packageManager: 'pnpm',
     scenarios: [
-      {
-        name: 'ember-lts-3.28',
-        allowedToFail: true,
-        npm: {
-          devDependencies: {
-            '@ember/test-helpers': '^2.0.0',
-            'ember-a11y-testing': '^5.2.1',
-            'ember-cli': '~3.28.0',
-            'ember-qunit': '^6.0.0',
-            'ember-resolver': '^8.1.0',
-            'ember-source': '~3.28.11',
-          },
-        },
-      },
       {
         name: 'ember-lts-4.12',
         npm: {
@@ -59,24 +45,6 @@ module.exports = async function () {
           },
         },
       },
-      {
-        name: 'ember-classic',
-        env: {
-          EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'application-template-wrapper': true,
-            'default-async-observers': false,
-            'template-only-glimmer-components': false,
-          }),
-        },
-        npm: {
-          devDependencies: {
-            'ember-source': '~3.28.0',
-          },
-          ember: {
-            edition: 'classic',
-          },
-        },
-      },
       embroiderSafe(),
       embroiderOptimized(),
     ],
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
index 0a3873660f4..97ae809fa0c 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
@@ -23,7 +23,7 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive>interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -35,19 +35,19 @@ module(
 
     test('it should render the "list-item" with a button by default"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive>interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-dropdown-list-item > button').exists();
     });
     test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" @route="index" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @route="index">interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-dropdown-list-item > a').exists();
     });
     test('it should render the "list-item" with a link if it has a @href argument"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" @href="#" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @href="#">interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-dropdown-list-item > a').exists();
     });
@@ -56,7 +56,7 @@ module(
 
     test('it should render the "action" color as the default if no color is declared"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive>interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -64,7 +64,7 @@ module(
     });
     test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @color="critical" @text="interactive" @icon="trash" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @color="critical" @icon="trash">interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -75,19 +75,19 @@ module(
 
     test('if an `@icon` is declared a leading icon should be rendered', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @text="interactive" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy">interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
     });
     test('if an `@trailingIcon` is declared a trailing icon should be rendered', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link" @text="interactive" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link">interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-icon.hds-icon-external-link').exists();
     });
     test('if both an `@icon` and an `@trailingIcon` are declared both the leading and trailing icons should be rendered', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link" @text="interactive" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link">interactive</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
       assert.dom('.hds-icon.hds-icon-external-link').exists();
@@ -95,12 +95,6 @@ module(
 
     // CONTENT
 
-    test('it should render the text passed as @text prop', async function (assert) {
-      await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive text" />`,
-      );
-      assert.dom('.hds-dropdown-list-item').hasText('interactive text');
-    });
     test('it should render the yielded content', async function (assert) {
       await render(hbs`
         <Hds::Dropdown::ListItem::Interactive>
@@ -109,29 +103,9 @@ module(
       `);
       assert.dom('.hds-dropdown-list-item').hasText('interactive');
     });
-    test('it should render the text passed as @text prop if content is yielded', async function (assert) {
-      await render(hbs`
-        <Hds::Dropdown::ListItem::Interactive @text="erroneous">
-          interactive
-        </Hds::Dropdown::ListItem::Interactive>
-      `);
-      assert.dom('.hds-dropdown-list-item').doesNotContainText('erroneous');
-    });
 
     // ASSERTIONS
 
-    test('it should throw an assertion if @text is missing/has no value and the component does not yield content', async function (assert) {
-      const errorMessage =
-        '@text for "Hds::Dropdown::ListItem::Interactive" must have a valid value';
-      assert.expect(2);
-      setupOnerror(function (error) {
-        assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
-      });
-      await render(hbs`<Hds::Dropdown::ListItem::Interactive />`);
-      assert.throws(function () {
-        throw new Error(errorMessage);
-      });
-    });
     test('it should throw an assertion if an incorrect value for @color is provided', async function (assert) {
       const errorMessage =
         '@color for "Hds::Dropdown::ListItem::Interactive" must be one of the following: action, critical; received: foo';
@@ -140,7 +114,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @color="foo" @text="interactive text" />`,
+        hbs`<Hds::Dropdown::ListItem::Interactive @color="foo">interactive text</Hds::Dropdown::ListItem::Interactive>`,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/menu-primitive/index-test.js b/showcase/tests/integration/components/hds/menu-primitive/index-test.js
deleted file mode 100644
index d284b683bb4..00000000000
--- a/showcase/tests/integration/components/hds/menu-primitive/index-test.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  click,
-  triggerEvent,
-  triggerKeyEvent,
-  render,
-  resetOnerror,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | hds/menu-primitive/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::MenuPrimitive id="test-menu-primitive" />`);
-    assert.dom('div#test-menu-primitive').hasClass('hds-menu-primitive');
-  });
-
-  // TOGGLE + CONTENT
-
-  test('it should render the "toggle" block but not the "content', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive>
-        <:toggle>
-          <button type="button" id="test-menu-primitive-button" />
-        </:toggle>
-      </Hds::MenuPrimitive>
-    `);
-    assert.dom('.hds-menu-primitive__toggle').exists();
-    assert.dom('button#test-menu-primitive-button').exists();
-    assert.dom('.hds-menu-primitive__content').doesNotExist();
-  });
-  test('it should render the "content" when the "toggle" is clicked', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive>
-        <:toggle as |t|>
-          <button type="button" id="test-menu-primitive-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-menu-primitive-link" href="#">test</a>
-        </:content>
-      </Hds::MenuPrimitive>
-    `);
-    await click('button#test-menu-primitive-button');
-    assert.dom('.hds-menu-primitive__content').exists();
-    assert.dom('a#test-menu-primitive-link').exists();
-  });
-
-  // ESCAPE KEY
-
-  test('it should hide the "content" when the "toggle" is deactivated via "Escape"', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive id="test-menu-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-menu-primitive-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-menu-primitive-link" href="#">test</a>
-        </:content>
-      </Hds::MenuPrimitive>
-    `);
-    await click('button#test-menu-primitive-button');
-    assert.dom('.hds-menu-primitive__content').exists();
-    assert.dom('a#test-menu-primitive-link').exists();
-    await triggerKeyEvent('#test-menu-primitive', 'keyup', 'Escape');
-    assert.dom('.hds-menu-primitive__content').doesNotExist();
-    assert.dom('a#test-menu-primitive-link').doesNotExist();
-  });
-
-  // FOCUS OUT
-
-  test('it should hide the "content" when the focus is moved outside', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive id="test-menu-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-menu-primitive-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-menu-primitive-link" href="#">test</a>
-        </:content>
-      </Hds::MenuPrimitive>
-    `);
-    await click('button#test-menu-primitive-button');
-    assert.dom('.hds-menu-primitive__content').exists();
-    assert.dom('a#test-menu-primitive-link').exists();
-    // simulating the focus moves to the body element
-    await triggerEvent('#test-menu-primitive', 'focusout', {
-      relatedTarget: document.body,
-    });
-    assert.dom('.hds-menu-primitive__content').doesNotExist();
-    assert.dom('a#test-menu-primitive-link').doesNotExist();
-  });
-
-  // CLOSE DISCLOSED CONTENT ON CLICK
-
-  test('it should hide the "content" when an interactive element triggers `close`', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive id="test-menu-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content as |c|>
-          <button id="test-content-button" {{on "click" c.close}}>test</button>
-        </:content>
-      </Hds::MenuPrimitive>
-    `);
-    await click('button#test-toggle-button');
-    assert.dom('.hds-menu-primitive__content').exists();
-    assert.dom('button#test-content-button').exists();
-    await click('button#test-content-button');
-    assert.dom('.hds-menu-primitive__content').doesNotExist();
-    assert.dom('button#test-content-button').doesNotExist();
-  });
-});
diff --git a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js b/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js
deleted file mode 100644
index 6e28172e449..00000000000
--- a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | hds/side-nav/icon-button', 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::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');
-  });
-
-  // CONTENT
-
-  test('it renders the passed in args', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" />`,
-    );
-    assert.dom('.hds-icon-search').exists();
-  });
-
-  // GENERATED ELEMENTS
-
-  test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-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::Header::IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-side-nav-button" />`,
-    );
-    assert
-      .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::Header::IconButton @icon="search" @ariaLabel="Search" @route="page-utilities.interactive" id="test-side-nav-button" />`,
-    );
-    assert
-      .dom('#test-side-nav-button')
-      .hasTagName('a')
-      .hasAttribute('href', '/utilities/interactive');
-  });
-
-  // ASSERTIONS
-
-  test('it should throw an assertion if @ariaLabel is missing/has no value', async function (assert) {
-    const errorMessage =
-      '@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::Header::IconButton @icon="search" />`);
-    assert.throws(function () {
-      throw new Error(errorMessage);
-    });
-  });
-});
diff --git a/showcase/tests/integration/components/hds/side-nav/index-test.js b/showcase/tests/integration/components/hds/side-nav/index-test.js
index c1defb86260..16c39c3beb5 100644
--- a/showcase/tests/integration/components/hds/side-nav/index-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/index-test.js
@@ -211,28 +211,6 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   // COLLAPSIBLE
 
-  test('if the @ariaLabel argument is not provided the default aria-labelledby value is set on the toggle button', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`,
-    );
-    assert
-      .dom('.hds-side-nav__toggle-button')
-      .hasAttribute('aria-labelledby', 'hds-side-nav-header');
-    assert.dom('.hds-side-nav__toggle-button').hasNoAttribute('aria-label');
-  });
-
-  test('if the @ariaLabel argument is provided the label value is set on the toggle button', async function (assert) {
-    await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" @ariaLabel="Test"/>`,
-    );
-    assert
-      .dom('.hds-side-nav__toggle-button')
-      .hasNoAttribute('aria-labelledby');
-    assert
-      .dom('.hds-side-nav__toggle-button')
-      .hasAttribute('aria-label', 'Test');
-  });
-
   test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) {
     await render(
       hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`,
diff --git a/website/app/components/doc/page/banner.js b/website/app/components/doc/page/banner.js
index 9b3585a69b6..07e27019ec2 100644
--- a/website/app/components/doc/page/banner.js
+++ b/website/app/components/doc/page/banner.js
@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 const COOKIE_NAME = 'hide-banner';
 
diff --git a/website/app/components/doc/page/header/algolia-search/index.hbs b/website/app/components/doc/page/header/algolia-search/index.hbs
index 95e2b198aee..be74cef1541 100644
--- a/website/app/components/doc/page/header/algolia-search/index.hbs
+++ b/website/app/components/doc/page/header/algolia-search/index.hbs
@@ -3,4 +3,4 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<div class="doc-algolia-search__autocomplete-container" {{did-insert this.didInsertSearchContainer}}></div>
\ No newline at end of file
+<div class="doc-algolia-search__autocomplete-container" {{this._setupSearchContainer}}></div>
\ No newline at end of file
diff --git a/website/app/components/doc/page/header/algolia-search/index.js b/website/app/components/doc/page/header/algolia-search/index.js
index b06c1b25fcd..784432763a6 100644
--- a/website/app/components/doc/page/header/algolia-search/index.js
+++ b/website/app/components/doc/page/header/algolia-search/index.js
@@ -5,8 +5,8 @@
 
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
 
 import { autocomplete } from '@algolia/autocomplete-js';
 
@@ -22,8 +22,7 @@ export default class DocAlgoliaSearchComponent extends Component {
 
   @service router;
 
-  @action
-  didInsertSearchContainer(element) {
+  _setupSearchContainer = modifier((element) => {
     // define the function to execute to transition to a search result `itemUrl` value
     const emberRouterTransitionTo = (itemUrl) => {
       // TODO leaving it here for some time until we test more thoroughly that simply using the URL works in every condition
@@ -273,5 +272,5 @@ export default class DocAlgoliaSearchComponent extends Component {
       },
       true,
     );
-  }
+  });
 }
diff --git a/website/app/components/doc/page/sidebar.js b/website/app/components/doc/page/sidebar.js
index 11bbecf28a3..3e19a71add2 100644
--- a/website/app/components/doc/page/sidebar.js
+++ b/website/app/components/doc/page/sidebar.js
@@ -7,7 +7,7 @@ import Component from '@glimmer/component';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 const DEBOUNCE_MS = 250;
 
diff --git a/website/app/components/doc/scroll-to-top/index.js b/website/app/components/doc/scroll-to-top/index.js
index 76f6472f24b..83743018981 100644
--- a/website/app/components/doc/scroll-to-top/index.js
+++ b/website/app/components/doc/scroll-to-top/index.js
@@ -5,7 +5,7 @@
 
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
 export default class DocScrollToTopComponent extends Component {
diff --git a/website/app/controllers/application.js b/website/app/controllers/application.js
index 75371a37580..35a77dbea76 100644
--- a/website/app/controllers/application.js
+++ b/website/app/controllers/application.js
@@ -7,7 +7,7 @@ import Controller from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { scheduleOnce } from '@ember/runloop';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { next, later, cancel } from '@ember/runloop';
 import { defaultValidator } from 'ember-a11y-refocus';
 
diff --git a/website/app/controllers/show.js b/website/app/controllers/show.js
index 6a3aa626824..9cc91fe5ef3 100644
--- a/website/app/controllers/show.js
+++ b/website/app/controllers/show.js
@@ -4,7 +4,7 @@ import { set, action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { A } from '@ember/array';
 import { schedule } from '@ember/runloop';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 import { showdownConfig } from '../shared/showdown-config';
 
diff --git a/website/app/deprecation-workflow.js b/website/app/deprecation-workflow.js
index 059ffaefcb2..2993f8b9bdd 100644
--- a/website/app/deprecation-workflow.js
+++ b/website/app/deprecation-workflow.js
@@ -37,6 +37,5 @@ setupDeprecationWorkflow({
     { handler: 'throw', matchId: 'hds.components.modal.body' },
     { handler: 'throw', matchId: 'hds.components.modal.footer' },
     { handler: 'throw', matchId: 'hds.components.modal.header' },
-    { handler: 'throw', matchId: 'hds.components.sidenav.header.iconbutton' },
   ],
 });
diff --git a/website/app/modifiers/doc-track-event.js b/website/app/modifiers/doc-track-event.js
index 0907dc832e6..358d16110c5 100644
--- a/website/app/modifiers/doc-track-event.js
+++ b/website/app/modifiers/doc-track-event.js
@@ -5,7 +5,7 @@
 
 import Modifier from 'ember-modifier';
 import { registerDestructor } from '@ember/destroyable';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { assert } from '@ember/debug';
 
 export default class DocTrackEvent extends Modifier {
diff --git a/website/app/routes/show.js b/website/app/routes/show.js
index 5efb9cef5b2..b5f5155e4e7 100644
--- a/website/app/routes/show.js
+++ b/website/app/routes/show.js
@@ -7,7 +7,7 @@ import {
   isNotFoundResponse,
 } from 'ember-fetch/errors';
 import config from 'ember-get-config';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { action } from '@ember/object';
 import { reject } from 'rsvp';
 
diff --git a/website/app/services/event-tracking.js b/website/app/services/event-tracking.js
index cdec3198227..29fa5a61582 100644
--- a/website/app/services/event-tracking.js
+++ b/website/app/services/event-tracking.js
@@ -4,7 +4,7 @@
  */
 
 import Service from '@ember/service';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class EventService extends Service {
diff --git a/website/app/services/head-data.js b/website/app/services/head-data.js
index 4be4aa80618..c885741b65c 100644
--- a/website/app/services/head-data.js
+++ b/website/app/services/head-data.js
@@ -5,7 +5,7 @@
 
 import HeadDataService from 'ember-meta/services/head-data';
 import config from 'ember-get-config';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class CustomHeadDataService extends HeadDataService {
   @service router;
diff --git a/website/docs/components/breadcrumb/partials/code/component-api.md b/website/docs/components/breadcrumb/partials/code/component-api.md
index c8414ae4ad0..e7a55f262d3 100644
--- a/website/docs/components/breadcrumb/partials/code/component-api.md
+++ b/website/docs/components/breadcrumb/partials/code/component-api.md
@@ -53,7 +53,7 @@ The Breadcrumb component is composed of three different parts, each with their o
     Set on the truncation toggle button. Accepts a string.
   </C.Property>
   <C.Property @name="yield">
-    Elements passed as children are yielded to the content of the [MenuPrimitive](/utilities/menu-primitive) component (used to show/hide the yielded Breadcrumb Items via a "toggle" button).
+    Elements passed as children are yielded to the content of the [PopoverPrimitive](/utilities/popover-primitive) component (used to show/hide the yielded Breadcrumb Items via a "toggle" button).
   </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).
diff --git a/website/docs/components/dropdown/partials/code/component-api.md b/website/docs/components/dropdown/partials/code/component-api.md
index 4eb658a8d10..79eb1a3e1d4 100644
--- a/website/docs/components/dropdown/partials/code/component-api.md
+++ b/website/docs/components/dropdown/partials/code/component-api.md
@@ -209,9 +209,6 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
   <C.Property @name="<[I].Badge>" @type="yielded component">
     The `Badge` component, yielded as contextual component inside `interactive` blocks of the `Dropdown`. It exposes the same API as the [`Badge` component](/components/badge).
   </C.Property>
-  <C.Property @name="text" @required={{true}} @deprecated={{true}} @type="string">
-    Text to be used in the item. If no text value is defined and no content is yielded, an error will be thrown.
-  </C.Property>
   <C.Property @name="color" @type="enum" @values={{array "action" "critical" }} @default="action">
     Color applied to the text and (optional) icons.
   </C.Property>
diff --git a/website/docs/components/flyout/partials/code/component-api.md b/website/docs/components/flyout/partials/code/component-api.md
index 497c161800d..c0611e0a2f8 100644
--- a/website/docs/components/flyout/partials/code/component-api.md
+++ b/website/docs/components/flyout/partials/code/component-api.md
@@ -34,12 +34,6 @@
 
 ### Contextual components
 
-!!! Warning
-
-The previous `Flyout::Header`, `Flyout::Description`, `Flyout::Body`, and `Flyout::Footer` subcomponents are now deprecated. View details in the [version history](/components/flyout?tab=version%20history) on how to migrate to the equivalent [DialogPrimitive](/utilities/dialog-primitive?tab=code#component-api) subcomponents.
-
-!!!
-
 #### [F].Header
 
 The `DialogPrimitive::Header` component, yielded as contextual component.
@@ -78,4 +72,4 @@ The `DialogPrimitive::Footer` component, yielded as contextual component.
   <C.Property>
     It exposes the same API as the [`DialogPrimitive::Footer`](/utilities/dialog-primitive?tab=code#dialogprimitivefooter) component.
   </C.Property>
-</Doc::ComponentApi>
+</Doc::ComponentApi>
\ No newline at end of file
diff --git a/website/docs/components/modal/partials/code/component-api.md b/website/docs/components/modal/partials/code/component-api.md
index 6187800c4bd..ce4e6b21859 100644
--- a/website/docs/components/modal/partials/code/component-api.md
+++ b/website/docs/components/modal/partials/code/component-api.md
@@ -37,12 +37,6 @@
 
 ### Contextual components
 
-!!! Warning
-
-The previous `Modal::Header`, `Modal::Body`, and `Modal::Footer` subcomponents are now deprecated. View details in the [version history](/components/modal?tab=version%20history) on how to migrate to the equivalent [DialogPrimitive](/utilities/dialog-primitive?tab=code#component-api) subcomponents.
-
-!!!
-
 #### [M].Header
 
 The `DialogPrimitive::Header` component, yielded as contextual component.
diff --git a/website/docs/components/modal/partials/code/how-to-use.md b/website/docs/components/modal/partials/code/how-to-use.md
index 42b09bb8cbe..e8e7b2d3c4d 100644
--- a/website/docs/components/modal/partials/code/how-to-use.md
+++ b/website/docs/components/modal/partials/code/how-to-use.md
@@ -56,7 +56,7 @@ When the Modal has been closed, the browser automatically returns the focus to t
 
 If a Modal dialog presents a form, the initial focus should be set on the first input, as the first focusable element in the form. This can be achieved by setting the `autofocus` property on the first form input.
 
-The `<form>` element should be placed in the `Hds::Modal::Body` subcomponent. We also recommend to associate it to the submit button using the `form` attribute, as shown below.
+The `<form>` element should be placed in the yielded `Body` subcomponent. We also recommend associating it with the submit button using the `form` attribute, as shown below.
 
 When the Modal dialog contains information that might be lost on close, use a confirmation message before discarding it.
 
diff --git a/website/docs/components/pagination/index.js b/website/docs/components/pagination/index.js
index 8023fb906e3..b87714c7830 100644
--- a/website/docs/components/pagination/index.js
+++ b/website/docs/components/pagination/index.js
@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 const getCursorParts = (cursor, records) => {
   const token = atob(cursor);
@@ -14,7 +14,7 @@ const getCursorParts = (cursor, records) => {
   const direction = tokenParts[0];
   const cursorID = parseInt(tokenParts[1]);
   const cursorIndex = records.findIndex(
-    (element) => element.id === parseInt(cursorID)
+    (element) => element.id === parseInt(cursorID),
   );
   return { direction, cursorID, cursorIndex };
 };
@@ -63,13 +63,13 @@ export default class Index extends Component {
 
   get demoCurrentPage() {
     return parseInt(
-      this.router?.currentRoute?.queryParams?.demoCurrentPage ?? 1
+      this.router?.currentRoute?.queryParams?.demoCurrentPage ?? 1,
     );
   }
 
   get demoCurrentPageSize() {
     return parseInt(
-      this.router?.currentRoute?.queryParams?.demoCurrentPageSize ?? 5
+      this.router?.currentRoute?.queryParams?.demoCurrentPageSize ?? 5,
     );
   }
 
@@ -372,7 +372,7 @@ export default class Index extends Component {
     let { newPrevCursor, newNextCursor } = getNewPrevNextCursors(
       this.demoCurrentCursor,
       this.demoCurrentPageSize,
-      this.model.records
+      this.model.records,
     );
     return {
       newPrevCursor,
@@ -413,7 +413,7 @@ export default class Index extends Component {
   get demoPaginatedDataCompact() {
     const { direction, cursorIndex } = getCursorParts(
       this.demoCurrentCursor,
-      this.model.records
+      this.model.records,
     );
 
     let start;
@@ -440,7 +440,7 @@ export default class Index extends Component {
     console.log(
       pageSize !== undefined
         ? `Page changed to "${page}" with page size equal to "${pageSize}"!`
-        : `Page changed to "${page}"!`
+        : `Page changed to "${page}"!`,
     );
   }
 
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 da97f62fcf1..cb0b22a53dd 100644
--- a/website/docs/components/side-nav/partials/code/component-api.md
+++ b/website/docs/components/side-nav/partials/code/component-api.md
@@ -49,9 +49,6 @@ This is the full-fledged component (responsive and animated).
       </C.Property>
     </Doc::ComponentApi>
   </C.Property>
-  <C.Property @name="ariaLabel" @type="string" @deprecated={{true}}>
-    Accepts a string; the fallback is set to `Open menu` if the menu is closed, and `Close menu` if the menu is open.<br /><br />Note: The purpose of this argument has been replaced by an `aria-labelledby` attribute referencing the "hds-side-nav-header" `h2` combined with the use of `aria-expanded` on the Toggle button tab.
-  </C.Property>
   <C.Property @name="onToggleMinimizedStatus" @type="function">
     Callback function invoked when the `SideNav` is collapsed or expanded. The function receives a boolean argument stating if the `SideNav` is minimized or not.
   </C.Property>
@@ -132,46 +129,6 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp
   </C.Property>
 </Doc::ComponentApi>
 
-### SideNav::Header::IconButton
-
-!!! Warning
-
-**Deprecation notice**
-
-The `SideNav::Header::IconButton` subcomponent is now deprecated. Use the `Hds::Button` component with the `isIconOnly` variant instead.
-
-* [Example usage of an Icon-only Button](/components/side-nav?tab=code#actions) within the Side Nav `:actions` block.
-* [Icon-only Button documentation](/components/button?tab=code#icon-only-button)
-!!!
-
-The `SideNav::Header::IconButton` component.
-
-It internally uses the [`Hds::Interactive`](/utilities/interactive) utility component. For more details about this component API, please refer to [its documentation page](/utilities/interactive?tab=code#component-api).
-
-<Doc::ComponentApi as |C|>
-  <C.Property @name="icon" @type="string" @required={{true}}>
-    Used to show an icon. Any [icon](/icons/library) name is accepted.
-  </C.Property>
-  <C.Property @name="href">
-    URL parameter that’s passed down to the `<a>` element.
-  </C.Property>
-  <C.Property @name="isHrefExternal" @type="boolean">
-    Controls whether or not the `<a>` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `<a>` tag (for security reasons).
-  </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" @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::PortalTarget
 
 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).
diff --git a/website/docs/components/table/advanced-table/partials/code/component-api.md b/website/docs/components/table/advanced-table/partials/code/component-api.md
index 74ace46c2fc..d9f99b3a979 100644
--- a/website/docs/components/table/advanced-table/partials/code/component-api.md
+++ b/website/docs/components/table/advanced-table/partials/code/component-api.md
@@ -222,9 +222,6 @@ If the `Th` component is passed as the first cell of a body row, `role="rowheade
   <C.Property @name="tooltip" @type="string">
     Text string which will appear in the [`Tooltip`](/components/tooltip). May contain basic HTML tags for formatting text such as `strong` and `em` tags. Not intended for multi-paragraph text or other more complex content. May not contain interactive content such as links or buttons. The `placement` and `offset` are automatically set and can’t be overwritten.
   </C.Property>
-  <C.Property @name="isVisuallyHidden" @type="boolean" @default="false">
-    If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).
-  </C.Property>
   <C.Property @name="colspan" @type="string">
     The number of columns the cell spans. Used to apply the correct grid styles and the aria-rowspan attribute for accessibility.
   </C.Property>
diff --git a/website/docs/components/tabs/index.js b/website/docs/components/tabs/index.js
index 30901207154..39243ff0b7e 100644
--- a/website/docs/components/tabs/index.js
+++ b/website/docs/components/tabs/index.js
@@ -5,7 +5,7 @@
 
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 export default class Index extends Component {
   @service router;
@@ -19,7 +19,7 @@ export default class Index extends Component {
 
   get demoSelectedTab() {
     return parseInt(
-      this.router?.currentRoute?.queryParams?.demoSelectedTab ?? 0
+      this.router?.currentRoute?.queryParams?.demoSelectedTab ?? 0,
     );
   }
 
diff --git a/website/docs/foundations/tokens/index.js b/website/docs/foundations/tokens/index.js
index 3fd55673657..67aa9bcbda8 100644
--- a/website/docs/foundations/tokens/index.js
+++ b/website/docs/foundations/tokens/index.js
@@ -5,7 +5,7 @@
 
 import Component from '@glimmer/component';
 import { restartableTask, timeout } from 'ember-concurrency';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 
 import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json';
 
@@ -16,7 +16,7 @@ const getAliases = (token, TOKENS_RAW) => {
   const path = token.path.join('.');
   return TOKENS_RAW.filter(
     // note: also the original value is prefixed with `$`
-    (item) => item.original.$value === `{${path}.value}`
+    (item) => item.original.$value === `{${path}.value}`,
   ).map((alias) => `{${alias.path.join('.')}}`);
 };
 
@@ -54,7 +54,7 @@ export default class Index extends Component {
             t.name.indexOf(this.searchQuery) !== -1 ||
             // note: we prefix `value` with `$` because we're using the DTCG format
             // we also convert it to string, because in some cases it's a number
-            String(t.$value).indexOf(this.searchQuery) !== -1
+            String(t.$value).indexOf(this.searchQuery) !== -1,
         );
 
         if (filteredTokens.length > 0) {
diff --git a/website/docs/icons/library/index.js b/website/docs/icons/library/index.js
index 84ab50ba60e..8dd0c418df1 100644
--- a/website/docs/icons/library/index.js
+++ b/website/docs/icons/library/index.js
@@ -6,7 +6,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { NAMES } from '@hashicorp/design-system-components/components/hds/icon/index';
 
 import catalog from '@hashicorp/flight-icons/catalog.json';
@@ -73,12 +73,12 @@ export default class Index extends Component {
         filteredIcons = this.allIcons.filter(
           (i) =>
             i.size === this.selectedIconSize &&
-            i.searchable.indexOf(this.searchQuery.toLowerCase()) !== -1
+            i.searchable.indexOf(this.searchQuery.toLowerCase()) !== -1,
         );
       }
     } else {
       filteredIcons = this.allIcons.filter(
-        (i) => i.size === this.selectedIconSize
+        (i) => i.size === this.selectedIconSize,
       );
     }
 
@@ -130,7 +130,7 @@ export default class Index extends Component {
     });
 
     this.eventTracking.trackEvent(
-      `Icon Library - Group by Selector - ${selectedGroupType}`
+      `Icon Library - Group by Selector - ${selectedGroupType}`,
     );
   }
 
@@ -147,7 +147,7 @@ export default class Index extends Component {
     });
 
     this.eventTracking.trackEvent(
-      `Icon Library - Size Selector - ${selectedIconSize}`
+      `Icon Library - Size Selector - ${selectedIconSize}`,
     );
   }
 
diff --git a/website/docs/utilities/disclosure-primitive/index.md b/website/docs/utilities/disclosure-primitive/index.md
index 12e84933c37..20d84d180a9 100644
--- a/website/docs/utilities/disclosure-primitive/index.md
+++ b/website/docs/utilities/disclosure-primitive/index.md
@@ -5,7 +5,6 @@ caption: An internal utility component that provides show/hide functionality.
 related:
   - components/accordion
   - components/reveal
-  - utilities/menu-primitive
 previewImage: assets/illustrations/utilities/disclosure-primitive.jpg
 navigation:
   keywords:
diff --git a/website/docs/utilities/disclosure-primitive/partials/code/how-to-use.md b/website/docs/utilities/disclosure-primitive/partials/code/how-to-use.md
index 1aa2eec1bc9..b4fe3882bdf 100644
--- a/website/docs/utilities/disclosure-primitive/partials/code/how-to-use.md
+++ b/website/docs/utilities/disclosure-primitive/partials/code/how-to-use.md
@@ -9,8 +9,6 @@ The `DisclosurePrimitive` component renders an interactive element that triggers
 
 When the content is disclosed, the container can be closed by toggling the button (`click` or `enter/return`).
 
-The [MenuPrimitive](/utilities/menu-primitive), another variant of this primitive, includes extra functionality to close the content panel by either clicking outside of the content, or via the `esc` key.
-
 ```handlebars
 <Hds::DisclosurePrimitive>
   <:toggle as |t|>
diff --git a/website/docs/utilities/menu-primitive/index.md b/website/docs/utilities/menu-primitive/index.md
deleted file mode 100644
index bea8e07e917..00000000000
--- a/website/docs/utilities/menu-primitive/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: MenuPrimitive
-description: An internal utility component that provides show/hide functionality.
-caption: An internal utility component that provides show/hide functionality.
-related:
-  - components/breadcrumb
-  - components/dropdown
-  - utilities/disclosure-primitive
-previewImage: assets/illustrations/utilities/menu-primitive.jpg
-navigation:
-  keywords:
-    - show
-    - hide
-    - accordion
-    - dropdown
-    - reveal
-status:
-  deprecated: 4.10.0
----
-
-<section data-tab="Code">
-  @include "partials/code/how-to-use.md"
-  @include "partials/code/component-api.md"
-</section>
-
-<section data-tab="Version history">
-  @include "partials/version-history/version-history.md"
-</section>
diff --git a/website/docs/utilities/menu-primitive/partials/code/component-api.md b/website/docs/utilities/menu-primitive/partials/code/component-api.md
deleted file mode 100644
index 1c78fc5c4d5..00000000000
--- a/website/docs/utilities/menu-primitive/partials/code/component-api.md
+++ /dev/null
@@ -1,31 +0,0 @@
-## Component API
-
-### MenuPrimitive
-
-<Doc::ComponentApi as |C|>
-  <C.Property @name="<:toggle>" @type="named block">
-    A named block that works as "toggle" for the MenuPrimitive.
-    <Doc::ComponentApi as |C|>
-      <C.Property @name="[T].onClickToggle" @type="function">
-        A function to be called by the interactive element to toggle visibility of the content.
-      </C.Property>
-      <C.Property @name="[T].isOpen" @type="boolean">
-        Hook into this tracked property to access the state of `isOpen`.
-      </C.Property>
-    </Doc::ComponentApi>
-  </C.Property>
-  <C.Property @name="<:content>" @type="named block">
-    A named block for the content that is shown/hidden upon toggling.
-    <Doc::ComponentApi as |C|>
-      <C.Property @name="[C].close" @type="function">
-        A function to programmatically close the MenuPrimitive.
-      </C.Property>
-    </Doc::ComponentApi>
-  </C.Property>
-  <C.Property @name="onClose" @type="function">
-    A callback function invoked when the MenuPrimitive is closed (if provided).
-  </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/utilities/menu-primitive/partials/code/how-to-use.md b/website/docs/utilities/menu-primitive/partials/code/how-to-use.md
deleted file mode 100644
index c83c97af526..00000000000
--- a/website/docs/utilities/menu-primitive/partials/code/how-to-use.md
+++ /dev/null
@@ -1,29 +0,0 @@
-!!! Warning
-
-**Deprecation notice**
-
-The `MenuPrimitive` component is deprecated and will be removed in a future major release. It has been replaced internally with the [`PopoverPrimitive`](/utilities/popover-primitive).
-!!!
-
-## How to use this component
-
-The `MenuPrimitive` component renders an interactive element that triggers a custom event handler provided by the `:toggle` block (passed via `hash` by Ember). To comply with accessibility best practices, this element is usually a button or a component that renders a button.
-
-When the content is disclosed, the container can be closed in various way; toggling via the button (`click` or `enter/return`), clicking outside of the content, or via the `esc` key.
-
-**Note:** [DisclosurePrimitive](/utilities/disclosure-primitive), another variant of this primitive, excludes the functionality to close the content panel by either clicking outside of the content, or via the `esc` key.
-
-```handlebars
-<Hds::MenuPrimitive>
-  <:toggle as |t|>
-    <button type="button" {{on "click" t.onClickToggle}}>Click me</button>
-  </:toggle>
-  <:content>
-    your content here
-  </:content>
-</Hds::MenuPrimitive>
-```
-
-### Content positioning
-
-The `:content` block is **not** positioned in relation to the `:toggle` block. We recommend applying `position: absolute` to a wrapper around the content that is then passed to the `:content` block.
diff --git a/website/docs/utilities/menu-primitive/partials/version-history/version-history.md b/website/docs/utilities/menu-primitive/partials/version-history/version-history.md
deleted file mode 100644
index 08695b741ad..00000000000
--- a/website/docs/utilities/menu-primitive/partials/version-history/version-history.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## 4.10.0
-
-In this version we replaced all `MenuPrimitive` instances with `PopoverPrimitive`. For this reason we now consider the MenuPrimitive deprecated and we plan to removed in a future major release.
-
-### How to migrate
-
-Consider migrating the existing `MenuPrimitive` instances to [`PopoverPrimitive`](/utilities/popover-primitive).
diff --git a/website/docs/utilities/popover-primitive/index.md b/website/docs/utilities/popover-primitive/index.md
index 1b76ed364ae..223386226c1 100644
--- a/website/docs/utilities/popover-primitive/index.md
+++ b/website/docs/utilities/popover-primitive/index.md
@@ -11,7 +11,6 @@ links:
     https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/popover-primitive
 related:
   - utilities/disclosure-primitive
-  - utilities/menu-primitive
 previewImage: assets/illustrations/utilities/popover-primitive.jpg
 navigation:
   keywords:
diff --git a/website/public/assets/illustrations/utilities/menu-primitive.jpg b/website/public/assets/illustrations/utilities/menu-primitive.jpg
deleted file mode 100644
index b8e01345214..00000000000
Binary files a/website/public/assets/illustrations/utilities/menu-primitive.jpg and /dev/null differ
diff --git a/website/tests/acceptance/utilities/menu-primitive-test.js b/website/tests/acceptance/utilities/menu-primitive-test.js
deleted file mode 100644
index 5f049a46561..00000000000
--- a/website/tests/acceptance/utilities/menu-primitive-test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { visit, currentURL } from '@ember/test-helpers';
-import { setupApplicationTest } from 'website/tests/helpers';
-import { a11yAudit } from 'ember-a11y-testing/test-support';
-
-module('Acceptance | utilities/menu-primitive', function (hooks) {
-  setupApplicationTest(hooks);
-
-  test('visiting /utilities/menu-primitive', async function (assert) {
-    await visit('/utilities/menu-primitive');
-
-    assert.strictEqual(currentURL(), '/utilities/menu-primitive');
-  });
-
-  test('utilities/menu-primitive passes a11y automated checks', async function (assert) {
-    await visit('/utilities/menu-primitive');
-    await a11yAudit();
-    assert.ok(true, 'a11y automation audit passed');
-  });
-});