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/src/components/hds/app-side-nav/portal/target.ts b/packages/components/src/components/hds/app-side-nav/portal/target.ts
index c6ec46fea37..d3bd7aac162 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,7 +4,7 @@
  */
 
 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';
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..d0eefb7877f 100644
--- a/packages/components/src/components/hds/side-nav/portal/target.ts
+++ b/packages/components/src/components/hds/side-nav/portal/target.ts
@@ -4,7 +4,7 @@
  */
 
 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';
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/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/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.js b/website/app/components/doc/page/header/algolia-search/index.js
index b06c1b25fcd..5dacbdf2634 100644
--- a/website/app/components/doc/page/header/algolia-search/index.js
+++ b/website/app/components/doc/page/header/algolia-search/index.js
@@ -6,7 +6,7 @@
 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 { autocomplete } from '@algolia/autocomplete-js';
 
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/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/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/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}`,
     );
   }