From ce20204658aa9608f1b180f061bd7cd3850d975e Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patrick.pircher@ibm.com>
Date: Mon, 11 Mar 2024 09:33:28 +0100
Subject: [PATCH] convert to gts

---
 .../src/components/accordion/index.gts        |   11 +-
 .../src/components/breadcrumbs/index.gts      |   32 +-
 .../src/components/button/index.gts           |  120 +-
 .../-components/axis/{index.ts => index.gts}  |   34 +-
 .../charts/-components/axis/index.hbs         |   16 -
 .../-components/chart/{index.ts => index.gts} |   37 +-
 .../charts/-components/chart/index.hbs        |   25 -
 .../-components/color/pairing/index.gts       |   56 +
 .../-components/color/pairing/index.hbs       |   13 -
 .../charts/-components/color/pairing/index.ts |   40 -
 .../charts/-components/color/scale/index.gts  |   49 +
 .../charts/-components/color/scale/index.hbs  |    6 -
 .../charts/-components/color/scale/index.ts   |   40 -
 .../tabular-data/{index.ts => index.gts}      |   47 +-
 .../charts/-components/tabular-data/index.hbs |    6 -
 .../charts/bar/{index.ts => index.gts}        |   52 +-
 .../src/components/charts/bar/index.hbs       |   13 -
 .../charts/line/{index.ts => index.gts}       |   51 +-
 .../src/components/charts/line/index.hbs      |   13 -
 .../charts/pie/{index.ts => index.gts}        |   52 +-
 .../src/components/charts/pie/index.hbs       |   13 -
 .../src/components/checkbox/index.gts         |   10 +-
 .../src/components/code-snippet/index.gts     |   14 +-
 .../src/components/copy-button/index.gts      |   23 +-
 .../src/components/data-table/-body/index.gts |   50 +
 .../src/components/data-table/-body/index.hbs |   18 -
 .../src/components/data-table/-body/index.ts  |   25 -
 .../-column/{index.ts => index.gts}           |    5 +
 .../components/data-table/-column/index.hbs   |    3 -
 .../components/data-table/-header/index.gts   |  111 +
 .../components/data-table/-header/index.hbs   |   70 -
 .../components/data-table/-header/index.ts    |   39 -
 .../data-table/-menu/{index.ts => index.gts}  |    9 +-
 .../src/components/data-table/-menu/index.hbs |    7 -
 .../src/components/data-table/-row/index.gts  |   81 +
 .../src/components/data-table/-row/index.hbs  |   54 -
 .../src/components/data-table/-row/index.ts   |   23 -
 .../data-table/-search-input/index.gts        |   55 +
 .../data-table/-search-input/index.hbs        |   17 -
 .../data-table/-search-input/index.ts         |   39 -
 .../components/data-table/-skeleton/index.gts |   23 +
 .../components/data-table/-skeleton/index.hbs |   13 -
 .../components/data-table/-skeleton/index.ts  |    9 -
 .../data-table/-table/{index.ts => index.gts} |   15 +-
 .../components/data-table/-table/index.hbs    |   10 -
 .../data-table/-toolbar/-actions/index.gts    |   49 +
 .../data-table/-toolbar/-actions/index.hbs    |   29 -
 .../data-table/-toolbar/-actions/index.ts     |   19 -
 .../-toolbar/-content/{index.ts => index.gts} |   15 +-
 .../data-table/-toolbar/-content/index.hbs    |    3 -
 .../-toolbar/{index.ts => index.gts}          |   24 +-
 .../components/data-table/-toolbar/index.hbs  |    7 -
 .../data-table/{index.ts => index.gts}        |  143 +-
 .../src/components/data-table/index.hbs       |   59 -
 .../src/components/dialogs/confirm/index.gts  |    5 +-
 .../src/components/form-input/index.gts       |   59 +
 .../src/components/form-input/index.hbs       |   28 -
 .../src/components/form-input/index.ts        |   32 -
 .../src/components/icon/index.gts             | 2652 +++++++++--------
 .../src/components/list/-body/index.gts       |   41 +
 .../src/components/list/-body/index.hbs       |   11 -
 .../src/components/list/-body/index.ts        |   23 -
 .../list/-column/{index.ts => index.gts}      |   10 +-
 .../src/components/list/-column/index.hbs     |    7 -
 .../src/components/list/-header/index.gts     |   21 +
 .../src/components/list/-header/index.hbs     |    9 -
 .../src/components/list/-header/index.ts      |    9 -
 .../src/components/list/-row/index.gts        |   56 +
 .../src/components/list/-row/index.hbs        |   23 -
 .../src/components/list/-row/index.ts         |   26 -
 .../src/components/list/-skeleton/index.gts   |   34 +
 .../src/components/list/-skeleton/index.hbs   |   22 -
 .../src/components/list/-skeleton/index.ts    |    5 -
 .../src/components/list/index.gts             |  129 +
 .../src/components/list/index.hbs             |   43 -
 .../src/components/list/index.ts              |   70 -
 .../src/components/loading/index.gts          |   13 +-
 .../src/components/menu/-item/index.gts       |   10 +-
 .../src/components/menu/index.gts             |   10 +-
 .../src/components/modal/index.gts            |  112 +
 .../src/components/modal/index.hbs            |   59 -
 .../src/components/modal/index.ts             |   49 -
 .../src/components/notification/index.gts     |  185 ++
 .../src/components/notification/index.hbs     |  120 -
 .../src/components/notification/index.ts      |   52 -
 .../src/components/pagination/index.gts       |  211 ++
 .../src/components/pagination/index.hbs       |   93 -
 .../src/components/pagination/index.ts        |  104 -
 .../src/components/progress-bar/index.gts     |   51 +-
 .../src/components/radio/group.gts            |    3 +-
 .../src/components/radio/index.gts            |    1 -
 .../src/components/search-input/index.gts     |   14 +-
 .../src/components/select/index.gts           |  100 +-
 .../src/components/tabs/index.gts             |    7 +-
 .../src/components/tag/index.gts              |   25 +-
 .../src/components/tile/index.gts             |    7 +-
 .../src/components/toggle/index.gts           |    9 +-
 .../src/components/ui-shell/-header/index.gts |   54 +
 .../src/components/ui-shell/-header/index.hbs |   36 -
 .../src/components/ui-shell/-header/index.ts  |   19 -
 .../components/ui-shell/-nav/-item/index.gts  |   20 +
 .../components/ui-shell/-nav/-item/index.hbs  |    7 -
 .../components/ui-shell/-nav/-item/index.ts   |   13 -
 .../src/components/ui-shell/-nav/index.gts    |   21 +
 .../src/components/ui-shell/-nav/index.hbs    |    7 -
 .../src/components/ui-shell/-nav/index.ts     |   15 -
 .../ui-shell/-sidenav/-menu/index.gts         |   96 +
 .../ui-shell/-sidenav/-menu/index.hbs         |   66 -
 .../ui-shell/-sidenav/-menu/index.ts          |   29 -
 .../ui-shell/-sidenav/-sub-menu/index.gts     |   40 +
 .../ui-shell/-sidenav/-sub-menu/index.hbs     |   21 -
 .../ui-shell/-sidenav/-sub-menu/index.ts      |   18 -
 .../components/ui-shell/-sidenav/index.gts    |   67 +
 .../components/ui-shell/-sidenav/index.hbs    |   40 -
 .../src/components/ui-shell/-sidenav/index.ts |   28 -
 .../src/components/ui-shell/index.gts         |   21 +
 .../src/components/ui-shell/index.hbs         |    8 -
 .../src/components/ui-shell/index.ts          |   16 -
 118 files changed, 3594 insertions(+), 3395 deletions(-)
 rename carbon-components-ember/src/components/charts/-components/axis/{index.ts => index.gts} (58%)
 delete mode 100644 carbon-components-ember/src/components/charts/-components/axis/index.hbs
 rename carbon-components-ember/src/components/charts/-components/chart/{index.ts => index.gts} (80%)
 delete mode 100644 carbon-components-ember/src/components/charts/-components/chart/index.hbs
 create mode 100644 carbon-components-ember/src/components/charts/-components/color/pairing/index.gts
 delete mode 100644 carbon-components-ember/src/components/charts/-components/color/pairing/index.hbs
 delete mode 100644 carbon-components-ember/src/components/charts/-components/color/pairing/index.ts
 create mode 100644 carbon-components-ember/src/components/charts/-components/color/scale/index.gts
 delete mode 100644 carbon-components-ember/src/components/charts/-components/color/scale/index.hbs
 delete mode 100644 carbon-components-ember/src/components/charts/-components/color/scale/index.ts
 rename carbon-components-ember/src/components/charts/-components/tabular-data/{index.ts => index.gts} (71%)
 delete mode 100644 carbon-components-ember/src/components/charts/-components/tabular-data/index.hbs
 rename carbon-components-ember/src/components/charts/bar/{index.ts => index.gts} (70%)
 delete mode 100644 carbon-components-ember/src/components/charts/bar/index.hbs
 rename carbon-components-ember/src/components/charts/line/{index.ts => index.gts} (68%)
 delete mode 100644 carbon-components-ember/src/components/charts/line/index.hbs
 rename carbon-components-ember/src/components/charts/pie/{index.ts => index.gts} (70%)
 delete mode 100644 carbon-components-ember/src/components/charts/pie/index.hbs
 create mode 100644 carbon-components-ember/src/components/data-table/-body/index.gts
 delete mode 100644 carbon-components-ember/src/components/data-table/-body/index.hbs
 delete mode 100644 carbon-components-ember/src/components/data-table/-body/index.ts
 rename carbon-components-ember/src/components/data-table/-column/{index.ts => index.gts} (75%)
 delete mode 100644 carbon-components-ember/src/components/data-table/-column/index.hbs
 create mode 100644 carbon-components-ember/src/components/data-table/-header/index.gts
 delete mode 100644 carbon-components-ember/src/components/data-table/-header/index.hbs
 delete mode 100644 carbon-components-ember/src/components/data-table/-header/index.ts
 rename carbon-components-ember/src/components/data-table/-menu/{index.ts => index.gts} (55%)
 delete mode 100644 carbon-components-ember/src/components/data-table/-menu/index.hbs
 create mode 100644 carbon-components-ember/src/components/data-table/-row/index.gts
 delete mode 100644 carbon-components-ember/src/components/data-table/-row/index.hbs
 delete mode 100644 carbon-components-ember/src/components/data-table/-row/index.ts
 create mode 100644 carbon-components-ember/src/components/data-table/-search-input/index.gts
 delete mode 100644 carbon-components-ember/src/components/data-table/-search-input/index.hbs
 delete mode 100644 carbon-components-ember/src/components/data-table/-search-input/index.ts
 create mode 100644 carbon-components-ember/src/components/data-table/-skeleton/index.gts
 delete mode 100644 carbon-components-ember/src/components/data-table/-skeleton/index.hbs
 delete mode 100644 carbon-components-ember/src/components/data-table/-skeleton/index.ts
 rename carbon-components-ember/src/components/data-table/-table/{index.ts => index.gts} (50%)
 delete mode 100644 carbon-components-ember/src/components/data-table/-table/index.hbs
 create mode 100644 carbon-components-ember/src/components/data-table/-toolbar/-actions/index.gts
 delete mode 100644 carbon-components-ember/src/components/data-table/-toolbar/-actions/index.hbs
 delete mode 100644 carbon-components-ember/src/components/data-table/-toolbar/-actions/index.ts
 rename carbon-components-ember/src/components/data-table/-toolbar/-content/{index.ts => index.gts} (60%)
 delete mode 100644 carbon-components-ember/src/components/data-table/-toolbar/-content/index.hbs
 rename carbon-components-ember/src/components/data-table/-toolbar/{index.ts => index.gts} (52%)
 delete mode 100644 carbon-components-ember/src/components/data-table/-toolbar/index.hbs
 rename carbon-components-ember/src/components/data-table/{index.ts => index.gts} (55%)
 delete mode 100644 carbon-components-ember/src/components/data-table/index.hbs
 create mode 100644 carbon-components-ember/src/components/form-input/index.gts
 delete mode 100644 carbon-components-ember/src/components/form-input/index.hbs
 delete mode 100644 carbon-components-ember/src/components/form-input/index.ts
 create mode 100644 carbon-components-ember/src/components/list/-body/index.gts
 delete mode 100644 carbon-components-ember/src/components/list/-body/index.hbs
 delete mode 100644 carbon-components-ember/src/components/list/-body/index.ts
 rename carbon-components-ember/src/components/list/-column/{index.ts => index.gts} (60%)
 delete mode 100644 carbon-components-ember/src/components/list/-column/index.hbs
 create mode 100644 carbon-components-ember/src/components/list/-header/index.gts
 delete mode 100644 carbon-components-ember/src/components/list/-header/index.hbs
 delete mode 100644 carbon-components-ember/src/components/list/-header/index.ts
 create mode 100644 carbon-components-ember/src/components/list/-row/index.gts
 delete mode 100644 carbon-components-ember/src/components/list/-row/index.hbs
 delete mode 100644 carbon-components-ember/src/components/list/-row/index.ts
 create mode 100644 carbon-components-ember/src/components/list/-skeleton/index.gts
 delete mode 100644 carbon-components-ember/src/components/list/-skeleton/index.hbs
 delete mode 100644 carbon-components-ember/src/components/list/-skeleton/index.ts
 create mode 100644 carbon-components-ember/src/components/list/index.gts
 delete mode 100644 carbon-components-ember/src/components/list/index.hbs
 delete mode 100644 carbon-components-ember/src/components/list/index.ts
 create mode 100644 carbon-components-ember/src/components/modal/index.gts
 delete mode 100644 carbon-components-ember/src/components/modal/index.hbs
 delete mode 100644 carbon-components-ember/src/components/modal/index.ts
 create mode 100644 carbon-components-ember/src/components/notification/index.gts
 delete mode 100644 carbon-components-ember/src/components/notification/index.hbs
 delete mode 100644 carbon-components-ember/src/components/notification/index.ts
 create mode 100644 carbon-components-ember/src/components/pagination/index.gts
 delete mode 100644 carbon-components-ember/src/components/pagination/index.hbs
 delete mode 100644 carbon-components-ember/src/components/pagination/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/-header/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-header/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-header/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/-nav/-item/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-nav/-item/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-nav/-item/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/-nav/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-nav/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-nav/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/-sidenav/index.ts
 create mode 100644 carbon-components-ember/src/components/ui-shell/index.gts
 delete mode 100644 carbon-components-ember/src/components/ui-shell/index.hbs
 delete mode 100644 carbon-components-ember/src/components/ui-shell/index.ts

diff --git a/carbon-components-ember/src/components/accordion/index.gts b/carbon-components-ember/src/components/accordion/index.gts
index ff704ebe..46930b41 100644
--- a/carbon-components-ember/src/components/accordion/index.gts
+++ b/carbon-components-ember/src/components/accordion/index.gts
@@ -11,7 +11,7 @@ interface AccordionSignature {
   Args: {
     disabled?: boolean;
     open?: boolean;
-    align?: 'start'|'end';
+    align?: 'start' | 'end';
   };
   Element: null;
   Blocks: {
@@ -33,9 +33,8 @@ interface ItemSignature {
 }
 
 class Item extends Component<ItemSignature> {
-
   get itemId() {
-    return guidFor(this)
+    return guidFor(this);
   }
 
   get isActive() {
@@ -45,7 +44,6 @@ class Item extends Component<ItemSignature> {
     return this.args.isOpen ?? this.args.accordion.isActive(this);
   }
 
-
   <template>
     <li
       class='cds--accordion__item
@@ -84,7 +82,6 @@ class Item extends Component<ItemSignature> {
   </template>
 }
 
-
 export default class Accordion extends Component<AccordionSignature> {
   @tracked currentItem?: Item;
 
@@ -96,9 +93,9 @@ export default class Accordion extends Component<AccordionSignature> {
   setActiveItem(item: Item) {
     if (this.currentItem === item) {
       this.currentItem = undefined;
-      return
+      return;
     }
-    this.currentItem = item
+    this.currentItem = item;
   }
 
   <template>
diff --git a/carbon-components-ember/src/components/breadcrumbs/index.gts b/carbon-components-ember/src/components/breadcrumbs/index.gts
index 87f21f59..5dffcc8e 100644
--- a/carbon-components-ember/src/components/breadcrumbs/index.gts
+++ b/carbon-components-ember/src/components/breadcrumbs/index.gts
@@ -8,17 +8,16 @@ import { on } from '@ember/modifier';
 /** @documenter yuidoc */
 
 type Args = {
-  /**
-   @argument crumbs
-   @type String[]
+  /**
+   @argument crumbs
+   @type String[]
    */
   crumbs: string[];
 
   current?: string;
 
   onSelect?(crumb: string): void;
-}
-
+};
 
 export interface BreadcrumbSignature {
   // We have a `<table>` as our root element
@@ -33,21 +32,20 @@ export interface BreadcrumbSignature {
   };
 }
 
-/**
- The Carbon Breadcrumb
-
- ```handlebars
- {{import Breadcrumbs from 'carbon-components-ember/components/breadcrumbs'}}
-
- <Button @onClick={{fn this.onclick}} @danger={{false}} > Button Text </Button>
- ```
- @class CarbonBreadcrumb
- @public
+/**
+ The Carbon Breadcrumb
+
+ ```handlebars
+ {{import Breadcrumbs from 'carbon-components-ember/components/breadcrumbs'}}
+
+ <Button @onClick={{fn this.onclick}} @danger={{false}} > Button Text </Button>
+ ```
+ @class CarbonBreadcrumb
+ @public
  **/
 class CarbonBreadcrumb extends Component<BreadcrumbSignature> {
-
   args: Args = defaultArgs(this, {
-    crumbs: []
+    crumbs: [],
   });
 
   @action
diff --git a/carbon-components-ember/src/components/button/index.gts b/carbon-components-ember/src/components/button/index.gts
index 113870ca..ccc93dc9 100644
--- a/carbon-components-ember/src/components/button/index.gts
+++ b/carbon-components-ember/src/components/button/index.gts
@@ -1,5 +1,9 @@
 import Component from '@glimmer/component';
-import { bxClassNames, classPrefix, defaultArgs } from 'carbon-components-ember/decorators';
+import {
+  bxClassNames,
+  classPrefix,
+  defaultArgs,
+} from 'carbon-components-ember/decorators';
 import DialogManagerService from 'carbon-components-ember/services/dialog-manager';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
@@ -13,63 +17,63 @@ import Loading from 'carbon-components-ember/components/loading';
 /** @documenter yuidoc */
 
 type Args = {
-  /**
-   * Will display a spinning Wheel inside the button
-   @argument loading
-   @type boolean
+  /**
+   * Will display a spinning Wheel inside the button
+   @argument loading
+   @type boolean
    */
   loading?: boolean;
-  /**
-   @argument disabled
-   @type boolean
+  /**
+   @argument disabled
+   @type boolean
    */
   disabled?: boolean;
-  /**
-   @argument bubbles
-   @type boolean
+  /**
+   @argument bubbles
+   @type boolean
    */
   bubbles?: boolean;
-  /**
-   @argument onClick
-   @type function
+  /**
+   @argument onClick
+   @type function
    */
-  onClick?: Function|null;
+  onClick?: Function | null;
 
-  /**
-   * Indicates the type of the button
-   @argument type
-   @type string
+  /**
+   * Indicates the type of the button
+   @argument type
+   @type string
    */
-  type?: 'primary'|'secondary'|'danger';
+  type?: 'primary' | 'secondary' | 'danger';
 
-  /**
-   * If the action is dangerous, this text message will be shown in the dialog
-   @argument confirmText
-   @type String
+  /**
+   * If the action is dangerous, this text message will be shown in the dialog
+   @argument confirmText
+   @type String
    */
   confirmText?: string;
-  /**
-   * Use this component as dialog
-   @argument confirmDialog
-   @type ConfirmDialogComponent
+  /**
+   * Use this component as dialog
+   @argument confirmDialog
+   @type ConfirmDialogComponent
    */
   confirmDialog?: typeof ConfirmDialogComponent;
-  /**
-   * If the button is tertiary
-   @argument tertiary
-   @type boolean
+  /**
+   * If the button is tertiary
+   @argument tertiary
+   @type boolean
    */
   tertiary?: boolean;
-  /**
-   * the button size
-   @argument small
-   @type 'sm' | 'md' | 'lg' | 'xl'
+  /**
+   * the button size
+   @argument small
+   @type 'sm' | 'md' | 'lg' | 'xl'
    */
   size?: 'sm' | 'md' | 'lg' | 'xl';
-  /**
-   * If the button is a ghost button
-   @argument ghost
-   @type boolean
+  /**
+   * If the button is a ghost button
+   @argument ghost
+   @type boolean
    */
   ghost?: boolean;
 
@@ -91,16 +95,16 @@ export interface ButtonSignature {
   };
 }
 
-/**
- The Carbon Button
-
- ```handlebars
- {{import Button from 'carbon-components-ember/components/button'}}
-
- <Button @onClick={{fn this.onclick}} @danger={{false}} > Button Text </Button>
- ```
- @class CarbonButton
- @public
+/**
+ The Carbon Button
+
+ ```handlebars
+ {{import Button from 'carbon-components-ember/components/button'}}
+
+ <Button @onClick={{fn this.onclick}} @danger={{false}} > Button Text </Button>
+ ```
+ @class CarbonButton
+ @public
  **/
 @classPrefix('cds--btn--')
 class CarbonButton extends Component<ButtonSignature> {
@@ -120,7 +124,7 @@ class CarbonButton extends Component<ButtonSignature> {
     confirmDialog: undefined,
     tertiary: false,
     size: 'md',
-    ghost: false
+    ghost: false,
   };
 
   <template>
@@ -177,7 +181,17 @@ class CarbonButton extends Component<ButtonSignature> {
     return `cds--layout--size-${this.args.size}`;
   }
 
-  @bxClassNames('primary', 'secondary', 'danger', 'tertiary', 'ghost', 'size', 'disabled', 'iconOnly:icon-only') bxClassNames;
+  @bxClassNames(
+    'primary',
+    'secondary',
+    'danger',
+    'tertiary',
+    'ghost',
+    'size',
+    'disabled',
+    'iconOnly:icon-only',
+  )
+  bxClassNames;
 
   @action
   runButtonClick() {
@@ -191,7 +205,7 @@ class CarbonButton extends Component<ButtonSignature> {
           this.disabled = false;
           this.loading = false;
           this.showDialog = false;
-        } ;
+        };
         ret.then(end, end);
       }
     }
diff --git a/carbon-components-ember/src/components/charts/-components/axis/index.ts b/carbon-components-ember/src/components/charts/-components/axis/index.gts
similarity index 58%
rename from carbon-components-ember/src/components/charts/-components/axis/index.ts
rename to carbon-components-ember/src/components/charts/-components/axis/index.gts
index 48194a1d..a23f34d6 100644
--- a/carbon-components-ember/src/components/charts/-components/axis/index.ts
+++ b/carbon-components-ember/src/components/charts/-components/axis/index.gts
@@ -1,3 +1,6 @@
+import { default as onUpdate } from '../../-helpers/on-update';
+import { default as toBool } from '../../-helpers/to-bool';
+import { default as newObj } from 'carbon-components-ember/helpers/new-obj';
 import Component from '@glimmer/component';
 import CarbonChart from '../../../charts/-components/chart';
 import { ScaleTypes } from '@carbon/charts';
@@ -36,14 +39,29 @@ type Args = {
 };
 
 /** @documenter yuidoc */
-/**
- The ChartAxis
-
- ```handlebars
- ```
- @class ChartAxis
- @public
+/**
+ The ChartAxis
+
+ ```handlebars
+ ```
+ @class ChartAxis
+ @public
  **/
-class ChartAxis extends Component<Args> {}
+class ChartAxis extends Component<Args> {
+  <template>
+    {{#if @chart.setAxis}}
+      {{onUpdate
+        (fn
+          @chart.setAxis
+          @axis
+          (newObj title=@title stacked=(toBool @stacked) scaleType=@scaleType)
+        )
+        @axis
+        @title
+        @stacked
+      }}
+    {{/if}}
+  </template>
+}
 
 export default ChartAxis;
diff --git a/carbon-components-ember/src/components/charts/-components/axis/index.hbs b/carbon-components-ember/src/components/charts/-components/axis/index.hbs
deleted file mode 100644
index d8bf6ef5..00000000
--- a/carbon-components-ember/src/components/charts/-components/axis/index.hbs
+++ /dev/null
@@ -1,16 +0,0 @@
-{{import onUpdate from '../../-helpers/on-update'}}
-{{import toBool from '../../-helpers/to-bool'}}
-{{import newObj from 'carbon-components-ember/helpers/new-obj'}}
-
-{{#if @chart.setAxis}}
-  {{onUpdate
-    (fn
-      @chart.setAxis
-      @axis
-      (newObj title=@title stacked=(toBool @stacked) scaleType=@scaleType)
-    )
-    @axis
-    @title
-    @stacked
-  }}
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/-components/chart/index.ts b/carbon-components-ember/src/components/charts/-components/chart/index.gts
similarity index 80%
rename from carbon-components-ember/src/components/charts/-components/chart/index.ts
rename to carbon-components-ember/src/components/charts/-components/chart/index.gts
index 0c0e4209..3cb431cb 100644
--- a/carbon-components-ember/src/components/charts/-components/chart/index.ts
+++ b/carbon-components-ember/src/components/charts/-components/chart/index.gts
@@ -1,4 +1,11 @@
-import Component from '@glimmer/component';
+import { default as TabularData } from '../tabular-data';
+import { default as Axis } from '../axis';
+import { default as ColorPairing } from '../color/pairing';
+import { default as ColorScale } from '../color/scale';
+import { default as set } from 'carbon-components-ember/helpers/set';
+import { default as didInsert } from '@ember/render-modifiers/modifiers/did-insert';
+import { default as didUpdate } from '@ember/render-modifiers/modifiers/did-update';
+import { default as willDestroy } from '@ember/render-modifiers/modifiers/will-destroy';import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { throttle } from '@ember/runloop';
 import { defaultArgs } from 'carbon-components-ember/decorators';
@@ -188,6 +195,34 @@ class CarbonChart extends Component<CarbonChartSignature> {
 
     this.updateChart();
   }
+
+  <template>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    <div
+      ...attributes
+      {{didInsert this.loadChart}}
+      {{didUpdate this.updateChart @legendClickable @resizable}}
+      {{willDestroy this.destroyChart}}
+    >
+    </div>
+    
+    {{yield
+      (hash
+        TabularData=(component TabularData chart=this)
+        Axis=(component Axis chart=this)
+        ColorPairing=(component ColorPairing chart=this)
+        ColorScale=(component ColorScale chart=this)
+      )
+    }}
+  </template>
 }
 
 export default CarbonChart;
diff --git a/carbon-components-ember/src/components/charts/-components/chart/index.hbs b/carbon-components-ember/src/components/charts/-components/chart/index.hbs
deleted file mode 100644
index 9dd1caff..00000000
--- a/carbon-components-ember/src/components/charts/-components/chart/index.hbs
+++ /dev/null
@@ -1,25 +0,0 @@
-{{import TabularData from '../tabular-data'}}
-{{import Axis from '../axis'}}
-{{import ColorPairing from '../color/pairing'}}
-{{import ColorScale from '../color/scale'}}
-{{import set from 'carbon-components-ember/helpers/set'}}
-{{import didInsert from '@ember/render-modifiers/modifiers/did-insert'}}
-{{import didUpdate from '@ember/render-modifiers/modifiers/did-update'}}
-{{import willDestroy from '@ember/render-modifiers/modifiers/will-destroy'}}
-
-<div
-  ...attributes
-  {{didInsert this.loadChart}}
-  {{didUpdate this.updateChart @legendClickable @resizable}}
-  {{willDestroy this.destroyChart}}
->
-</div>
-
-{{yield
-  (hash
-    TabularData=(component TabularData chart=this)
-    Axis=(component Axis chart=this)
-    ColorPairing=(component ColorPairing chart=this)
-    ColorScale=(component ColorScale chart=this)
-  )
-}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/-components/color/pairing/index.gts b/carbon-components-ember/src/components/charts/-components/color/pairing/index.gts
new file mode 100644
index 00000000..d839213d
--- /dev/null
+++ b/carbon-components-ember/src/components/charts/-components/color/pairing/index.gts
@@ -0,0 +1,56 @@
+import { default as onUpdate } from '../../../-helpers/on-update';
+import { fn } from '@ember/helper';import Component from '@glimmer/component';
+import { defaultArgs } from 'carbon-components-ember/decorators/index';
+import CarbonChart from 'carbon-components-ember/components/charts/-components/chart';
+
+type Args = {
+  numberOfVariants?: number;
+  option: number;
+  chart: CarbonChart;
+}
+
+/** @documenter yuidoc */
+/**
+ The ColorPairing
+
+ ```handlebars
+ ```
+ @class ColorPairing
+ @public
+ **/
+class ColorPairing extends Component<Args> {
+ @defaultArgs
+ args: Args = {
+   /**
+    * define palette with {numberOfVariants} color variants
+    * @argument numberOfVariants
+    * @type Number
+    */
+   numberOfVariants: undefined,
+   /**
+    * the option number of the color paring
+    * @argument option
+    * @type Number
+    */
+   option: 1,
+   chart: null as any
+ }
+
+  <template>
+    
+    
+    
+    {{#if @chart.setColorPairing}}
+      {{onUpdate
+        (fn
+          @chart.setColorPairing
+          (hash option=@option numberOfVariants=@numberOfVariants)
+        )
+        @numberOfVariants
+        @option
+      }}
+    {{/if}}
+  </template>
+}
+
+export default ColorPairing;
diff --git a/carbon-components-ember/src/components/charts/-components/color/pairing/index.hbs b/carbon-components-ember/src/components/charts/-components/color/pairing/index.hbs
deleted file mode 100644
index e2bf958f..00000000
--- a/carbon-components-ember/src/components/charts/-components/color/pairing/index.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{import onUpdate from '../../../-helpers/on-update'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-{{#if @chart.setColorPairing}}
-  {{onUpdate
-    (fn
-      @chart.setColorPairing
-      (hash option=@option numberOfVariants=@numberOfVariants)
-    )
-    @numberOfVariants
-    @option
-  }}
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/-components/color/pairing/index.ts b/carbon-components-ember/src/components/charts/-components/color/pairing/index.ts
deleted file mode 100644
index 1fd9f504..00000000
--- a/carbon-components-ember/src/components/charts/-components/color/pairing/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import Component from '@glimmer/component';
-import { defaultArgs } from 'carbon-components-ember/decorators/index';
-import CarbonChart from 'carbon-components-ember/components/charts/-components/chart';
-
-type Args = {
-  numberOfVariants?: number;
-  option: number;
-  chart: CarbonChart;
-}
-
-/** @documenter yuidoc */
-/**
- The ColorPairing
-
- ```handlebars
- ```
- @class ColorPairing
- @public
- **/
-class ColorPairing extends Component<Args> {
-
-  @defaultArgs
-  args: Args = {
-    /**
-     * define palette with {numberOfVariants} color variants
-     * @argument numberOfVariants
-     * @type Number
-     */
-    numberOfVariants: undefined,
-    /**
-     * the option number of the color paring
-     * @argument option
-     * @type Number
-     */
-    option: 1,
-    chart: null as any
-  }
-}
-
-export default ColorPairing;
diff --git a/carbon-components-ember/src/components/charts/-components/color/scale/index.gts b/carbon-components-ember/src/components/charts/-components/color/scale/index.gts
new file mode 100644
index 00000000..4a8d0dc4
--- /dev/null
+++ b/carbon-components-ember/src/components/charts/-components/color/scale/index.gts
@@ -0,0 +1,49 @@
+import { default as onUpdate } from '../../../-helpers/on-update';
+import { fn } from '@ember/helper';import Component from '@glimmer/component';
+import { defaultArgs } from 'carbon-components-ember/decorators';
+import CarbonChart from 'carbon-components-ember/components/charts/-components/chart';
+
+type Args = {
+  name: string;
+  color: string;
+  chart: CarbonChart;
+}
+
+/** @documenter yuidoc */
+/**
+ The ColorScale
+
+ ```handlebars
+ ```
+ @class ColorScale
+ @public
+ **/
+class ColorScale extends Component<Args> {
+ @defaultArgs
+ args: Args = {
+   /**
+    * The Axis Title
+    * @argument title
+    * @type String
+    */
+   name: '',
+   /**
+    * @argument color
+    * @type String
+    */
+   color: '',
+
+   chart: null as any
+ }
+
+  <template>
+    
+    
+    
+    {{#if @chart.setColorScale}}
+      {{onUpdate (fn @chart.setColorScale @name @color) @name @color}}
+    {{/if}}
+  </template>
+}
+
+export default ColorScale;
diff --git a/carbon-components-ember/src/components/charts/-components/color/scale/index.hbs b/carbon-components-ember/src/components/charts/-components/color/scale/index.hbs
deleted file mode 100644
index 84dbc4fd..00000000
--- a/carbon-components-ember/src/components/charts/-components/color/scale/index.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-{{import onUpdate from '../../../-helpers/on-update'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-{{#if @chart.setColorScale}}
-  {{onUpdate (fn @chart.setColorScale @name @color) @name @color}}
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/-components/color/scale/index.ts b/carbon-components-ember/src/components/charts/-components/color/scale/index.ts
deleted file mode 100644
index 436607f8..00000000
--- a/carbon-components-ember/src/components/charts/-components/color/scale/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import Component from '@glimmer/component';
-import { defaultArgs } from 'carbon-components-ember/decorators';
-import CarbonChart from 'carbon-components-ember/components/charts/-components/chart';
-
-type Args = {
-  name: string;
-  color: string;
-  chart: CarbonChart;
-}
-
-/** @documenter yuidoc */
-/**
- The ColorScale
-
- ```handlebars
- ```
- @class ColorScale
- @public
- **/
-class ColorScale extends Component<Args> {
-
-  @defaultArgs
-  args: Args = {
-    /**
-     * The Axis Title
-     * @argument title
-     * @type String
-     */
-    name: '',
-    /**
-     * @argument color
-     * @type String
-     */
-    color: '',
-
-    chart: null as any
-  }
-}
-
-export default ColorScale;
diff --git a/carbon-components-ember/src/components/charts/-components/tabular-data/index.ts b/carbon-components-ember/src/components/charts/-components/tabular-data/index.gts
similarity index 71%
rename from carbon-components-ember/src/components/charts/-components/tabular-data/index.ts
rename to carbon-components-ember/src/components/charts/-components/tabular-data/index.gts
index 434df95e..eec2b10f 100644
--- a/carbon-components-ember/src/components/charts/-components/tabular-data/index.ts
+++ b/carbon-components-ember/src/components/charts/-components/tabular-data/index.gts
@@ -1,7 +1,11 @@
+import { default as onUpdate } from '../../-helpers/on-update';
+import { default as defaultTo } from 'carbon-components-ember/helpers/default-to';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { defaultArgs } from 'carbon-components-ember/decorators';
-import CarbonChart, { ChartData } from 'carbon-components-ember/components/charts/-components/chart/index';
+import CarbonChart, {
+  ChartData,
+} from 'carbon-components-ember/components/charts/-components/chart/index';
 
 type Args = {
   backgroundColors?: string[];
@@ -11,16 +15,16 @@ type Args = {
   dates?: Date[];
   keys?: string[];
   data?: ChartData[];
-}
+};
 
 /** @documenter yuidoc */
-/**
- The CarbonChartDataSet
-
- ```handlebars
- ```
- @class CarbonChartDataSet
- @public
+/**
+ The CarbonChartDataSet
+
+ ```handlebars
+ ```
+ @class CarbonChartDataSet
+ @public
  **/
 class CarbonChartTabularData extends Component<Args> {
   @defaultArgs
@@ -53,21 +57,23 @@ class CarbonChartTabularData extends Component<Args> {
     }
     let data: ChartData[] = [];
     if (this.args.data?.length) {
-      data = this.args.data.slice().map(x => Object.assign(x, { group: this.args.group }));
+      data = this.args.data
+        .slice()
+        .map((x) => Object.assign(x, { group: this.args.group }));
     } else if (this.args.values) {
       this.args.values.forEach((v, i) => {
         data.push({
           date: this.args.dates?.[i] || undefined,
           key: this.args.keys?.[i] || undefined,
           value: this.args.values!![i],
-          group: this.args.group
-        })
-      })
+          group: this.args.group,
+        });
+      });
     }
     this.args.chart?.updateDataset(
       this.args.group,
       this.args.backgroundColors || this.defaultColor,
-      data
+      data,
     );
   }
 
@@ -75,6 +81,19 @@ class CarbonChartTabularData extends Component<Args> {
     super.willDestroy();
     this.args.chart && this.args.chart.removeDataset(this.oldGroup);
   }
+
+  <template>
+    {{#if @chart.updateDataset}}
+      {{onUpdate
+        this.didUpdateArgs
+        @values
+        @keys
+        @group
+        @backgroundColors
+        @data
+      }}
+    {{/if}}
+  </template>
 }
 
 export default CarbonChartTabularData;
diff --git a/carbon-components-ember/src/components/charts/-components/tabular-data/index.hbs b/carbon-components-ember/src/components/charts/-components/tabular-data/index.hbs
deleted file mode 100644
index 76136125..00000000
--- a/carbon-components-ember/src/components/charts/-components/tabular-data/index.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-{{import onUpdate from '../../-helpers/on-update'}}
-{{import defaultTo from 'carbon-components-ember/helpers/default-to'}}
-
-{{#if @chart.updateDataset}}
-  {{onUpdate this.didUpdateArgs @values @keys @group @backgroundColors @data}}
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/bar/index.ts b/carbon-components-ember/src/components/charts/bar/index.gts
similarity index 70%
rename from carbon-components-ember/src/components/charts/bar/index.ts
rename to carbon-components-ember/src/components/charts/bar/index.gts
index 3ca18c4e..83f3695a 100644
--- a/carbon-components-ember/src/components/charts/bar/index.ts
+++ b/carbon-components-ember/src/components/charts/bar/index.gts
@@ -1,3 +1,5 @@
+import { default as Chart } from '../-components/chart';
+import { default as set } from 'carbon-components-ember/helpers/set';
 import { SimpleBarChart } from '@carbon/charts';
 import Component from '@glimmer/component';
 import { defaultArgs } from 'carbon-components-ember/decorators/index';
@@ -8,7 +10,7 @@ import { CarbonChartSignature } from 'carbon-components-ember/components/charts/
 type Args = {
   resizable?: boolean;
   legendClickable?: boolean;
-}
+};
 
 export interface CarbonBarChartSignature {
   Args: Args;
@@ -18,35 +20,47 @@ export interface CarbonBarChartSignature {
   };
 }
 
-/**
- The CarbonBarChart
-
- @class CarbonBarChart
- @public
- @yield {Object} api
- @yield {Component} api.DataSet <a href='-components/dataset' >Dataset</a>
- @yield {Component} api.Axis <a href='-components/axis' >ChartAxis</a>
+/**
+ The CarbonBarChart
+
+ @class CarbonBarChart
+ @public
+ @yield {Object} api
+ @yield {Component} api.DataSet <a href='-components/dataset' >Dataset</a>
+ @yield {Component} api.Axis <a href='-components/axis' >ChartAxis</a>
  **/
 class CarbonBarChart extends Component<CarbonBarChartSignature> {
   ChartClass = SimpleBarChart;
 
   @defaultArgs
   args: Args = {
-    /**
-     * Is resizable
-     @argument resizable
-     @type boolean
+    /**
+     * Is resizable
+     @argument resizable
+     @type boolean
      */
     resizable: true,
 
-    /**
-     * Is legendClickable
-     @argument legendClickable
-     @type boolean
+    /**
+     * Is legendClickable
+     @argument legendClickable
+     @type boolean
      */
-    legendClickable: true
+    legendClickable: true,
   };
+
+  <template>
+    <Chart
+      {{! template-lint-disable  no-capital-arguments }}
+      @ChartClass={{this.ChartClass}}
+      @resizable={{@resizable}}
+      @legendClickable={{@legendClickable}}
+      ...attributes
+      as |chart|
+    >
+      {{yield chart}}
+    </Chart>
+  </template>
 }
 
 export default CarbonBarChart;
-
diff --git a/carbon-components-ember/src/components/charts/bar/index.hbs b/carbon-components-ember/src/components/charts/bar/index.hbs
deleted file mode 100644
index 5782e00f..00000000
--- a/carbon-components-ember/src/components/charts/bar/index.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{import Chart from '../-components/chart'}}
-{{import set from 'carbon-components-ember/helpers/set'}}
-
-<Chart
-  {{! template-lint-disable  no-capital-arguments }}
-  @ChartClass={{this.ChartClass}}
-  @resizable={{@resizable}}
-  @legendClickable={{@legendClickable}}
-  ...attributes
-  as |chart|
->
-  {{yield chart}}
-</Chart>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/line/index.ts b/carbon-components-ember/src/components/charts/line/index.gts
similarity index 68%
rename from carbon-components-ember/src/components/charts/line/index.ts
rename to carbon-components-ember/src/components/charts/line/index.gts
index 8c544b17..e62f21b1 100644
--- a/carbon-components-ember/src/components/charts/line/index.ts
+++ b/carbon-components-ember/src/components/charts/line/index.gts
@@ -1,3 +1,5 @@
+import { default as Chart } from '../-components/chart';
+import { default as set } from 'carbon-components-ember/helpers/set';
 import { LineChart } from '@carbon/charts';
 import Component from '@glimmer/component';
 import { CarbonChartSignature } from 'carbon-components-ember/components/charts/-components/chart/index';
@@ -5,7 +7,7 @@ import { CarbonChartSignature } from 'carbon-components-ember/components/charts/
 type Args = {
   resizable?: boolean;
   legendClickable?: boolean;
-}
+};
 
 export interface CarbonLineChartSignature {
   Args: Args;
@@ -15,32 +17,45 @@ export interface CarbonLineChartSignature {
   };
 }
 
-/**
- The CarbonLineChart
-
- @class CarbonLineChart
- @public
- @yield {Object} api
- @yield {Component} api.DataSet <a href='-components/dataset' >Dataset</a>
- @yield {Component} api.Axis <a href='-components/axis' >ChartAxis</a>
+/**
+ The CarbonLineChart
+
+ @class CarbonLineChart
+ @public
+ @yield {Object} api
+ @yield {Component} api.DataSet <a href='-components/dataset' >Dataset</a>
+ @yield {Component} api.Axis <a href='-components/axis' >ChartAxis</a>
  **/
 class CarbonLineChart extends Component<CarbonLineChartSignature> {
   ChartClass = LineChart;
   args: Args = {
-    /**
-     * Is resizable
-     @argument resizable
-     @type boolean
+    /**
+     * Is resizable
+     @argument resizable
+     @type boolean
      */
     resizable: true,
 
-    /**
-     * Is legendClickable
-     @argument legendClickable
-     @type boolean
+    /**
+     * Is legendClickable
+     @argument legendClickable
+     @type boolean
      */
-    legendClickable: true
+    legendClickable: true,
   };
+
+  <template>
+    <Chart
+      {{! template-lint-disable  no-capital-arguments }}
+      @ChartClass={{this.ChartClass}}
+      @resizable={{@resizable}}
+      @legendClickable={{@legendClickable}}
+      ...attributes
+      as |chart|
+    >
+      {{yield chart}}
+    </Chart>
+  </template>
 }
 
 export default CarbonLineChart;
diff --git a/carbon-components-ember/src/components/charts/line/index.hbs b/carbon-components-ember/src/components/charts/line/index.hbs
deleted file mode 100644
index 5782e00f..00000000
--- a/carbon-components-ember/src/components/charts/line/index.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{import Chart from '../-components/chart'}}
-{{import set from 'carbon-components-ember/helpers/set'}}
-
-<Chart
-  {{! template-lint-disable  no-capital-arguments }}
-  @ChartClass={{this.ChartClass}}
-  @resizable={{@resizable}}
-  @legendClickable={{@legendClickable}}
-  ...attributes
-  as |chart|
->
-  {{yield chart}}
-</Chart>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/charts/pie/index.ts b/carbon-components-ember/src/components/charts/pie/index.gts
similarity index 70%
rename from carbon-components-ember/src/components/charts/pie/index.ts
rename to carbon-components-ember/src/components/charts/pie/index.gts
index 26fab9a5..8d013eb2 100644
--- a/carbon-components-ember/src/components/charts/pie/index.ts
+++ b/carbon-components-ember/src/components/charts/pie/index.gts
@@ -1,3 +1,5 @@
+import { default as Chart } from '../-components/chart';
+import { default as set } from 'carbon-components-ember/helpers/set';
 import { PieChart } from '@carbon/charts';
 import Component from '@glimmer/component';
 import { defaultArgs } from 'carbon-components-ember/decorators';
@@ -6,7 +8,7 @@ import { CarbonChartSignature } from 'carbon-components-ember/components/charts/
 type Args = {
   resizable?: boolean;
   legendClickable?: boolean;
-}
+};
 
 export interface CarbonPieChartSignature {
   Args: Args;
@@ -16,35 +18,47 @@ export interface CarbonPieChartSignature {
   };
 }
 
-/**
- The CarbonPieChart
-
- @class CarbonPieChart
- @public
- @yield {Object} api
- @yield {Component} api.DataSet <a href='-components/dataset' >Dataset</a>
- @yield {Component} api.Axis <a href='-components/axis' >ChartAxis</a>
+/**
+ The CarbonPieChart
+
+ @class CarbonPieChart
+ @public
+ @yield {Object} api
+ @yield {Component} api.DataSet <a href='-components/dataset' >Dataset</a>
+ @yield {Component} api.Axis <a href='-components/axis' >ChartAxis</a>
  **/
 class CarbonPieChart extends Component<CarbonPieChartSignature> {
   ChartClass = PieChart;
 
   @defaultArgs
   args: Args = {
-
-    /**
-     * Is resizable
-     @argument resizable
-     @type boolean
+    /**
+     * Is resizable
+     @argument resizable
+     @type boolean
      */
     resizable: true,
 
-    /**
-     * Is legendClickable
-     @argument legendClickable
-     @type boolean
+    /**
+     * Is legendClickable
+     @argument legendClickable
+     @type boolean
      */
-    legendClickable: true
+    legendClickable: true,
   };
+
+  <template>
+    <Chart
+      {{! template-lint-disable  no-capital-arguments }}
+      @ChartClass={{this.ChartClass}}
+      @resizable={{@resizable}}
+      @legendClickable={{@legendClickable}}
+      ...attributes
+      as |chart|
+    >
+      {{yield chart}}
+    </Chart>
+  </template>
 }
 
 export default CarbonPieChart;
diff --git a/carbon-components-ember/src/components/charts/pie/index.hbs b/carbon-components-ember/src/components/charts/pie/index.hbs
deleted file mode 100644
index 5782e00f..00000000
--- a/carbon-components-ember/src/components/charts/pie/index.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{import Chart from '../-components/chart'}}
-{{import set from 'carbon-components-ember/helpers/set'}}
-
-<Chart
-  {{! template-lint-disable  no-capital-arguments }}
-  @ChartClass={{this.ChartClass}}
-  @resizable={{@resizable}}
-  @legendClickable={{@legendClickable}}
-  ...attributes
-  as |chart|
->
-  {{yield chart}}
-</Chart>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/checkbox/index.gts b/carbon-components-ember/src/components/checkbox/index.gts
index 1671f8dd..ea925ddc 100644
--- a/carbon-components-ember/src/components/checkbox/index.gts
+++ b/carbon-components-ember/src/components/checkbox/index.gts
@@ -17,7 +17,7 @@ type Args = {
   onChange?: (checked: boolean) => void;
   state?: object;
   label?: string;
-}
+};
 
 export interface CarbonCheckboxSignature {
   Args: Args;
@@ -34,8 +34,8 @@ export default class CarbonCheckbox extends Component<CarbonCheckboxSignature> {
   args: Args = defaultArgs(this, {
     disabled: false,
     onChange: () => null,
-    state: null
-  })
+    state: null,
+  });
 
   @action
   setup() {
@@ -88,7 +88,3 @@ export default class CarbonCheckbox extends Component<CarbonCheckboxSignature> {
     </div>
   </template>
 }
-
-
-
-
diff --git a/carbon-components-ember/src/components/code-snippet/index.gts b/carbon-components-ember/src/components/code-snippet/index.gts
index 2198353c..0a030192 100644
--- a/carbon-components-ember/src/components/code-snippet/index.gts
+++ b/carbon-components-ember/src/components/code-snippet/index.gts
@@ -12,8 +12,8 @@ import htmlSafe from 'carbon-components-ember/helpers/html-safe';
 import { TemplateOnlyComponent } from '@ember/component/template-only';
 
 type Args = {
-  type: 'default'|'multiline'|'inline';
-}
+  type: 'default' | 'multiline' | 'inline';
+};
 
 export interface CarbonCodeSnippetSignature {
   Args: Args;
@@ -24,7 +24,10 @@ export interface CarbonCodeSnippetSignature {
 
 const noop = () => '';
 
-const PreCode: TemplateOnlyComponent<{Element: HTMLElement; Blocks: { default: [] }}> = <template>
+const PreCode: TemplateOnlyComponent<{
+  Element: HTMLElement;
+  Blocks: { default: [] };
+}> = <template>
   <pre>
     {{~noop~}}
     <code ...attributes>
@@ -32,7 +35,7 @@ const PreCode: TemplateOnlyComponent<{Element: HTMLElement; Blocks: { default: [
     </code>
     {{~noop~}}
   </pre>
-</template>
+</template>;
 
 export default class CarbonCodeSnippet extends Component<CarbonCodeSnippetSignature> {
   @tracked expanded = false;
@@ -41,7 +44,7 @@ export default class CarbonCodeSnippet extends Component<CarbonCodeSnippetSignat
 
   @defaultArgs
   args: Args = {
-    type: 'default'
+    type: 'default',
   };
 
   <template>
@@ -121,5 +124,4 @@ export default class CarbonCodeSnippet extends Component<CarbonCodeSnippetSignat
       </CopyButton>
     {{/if}}
   </template>
-
 }
diff --git a/carbon-components-ember/src/components/copy-button/index.gts b/carbon-components-ember/src/components/copy-button/index.gts
index cff3d08f..f8e4ff8b 100644
--- a/carbon-components-ember/src/components/copy-button/index.gts
+++ b/carbon-components-ember/src/components/copy-button/index.gts
@@ -115,7 +115,7 @@ export default class CarbonCopyButton extends Component<CarbonCopyButtonSignatur
   get options() {
     return {
       targetElement: this.args.targetElement,
-      targetElementId: this.args.targetElementId
+      targetElementId: this.args.targetElementId,
     };
   }
 
@@ -133,27 +133,30 @@ export default class CarbonCopyButton extends Component<CarbonCopyButtonSignatur
     targetElement = targetElement || this.carbonElement;
     const el = document.createElement('textarea'); // Create a <textarea> element
     // Set its value to the string that you want copied
-    el.value = targetElement.textContent.trim().split('\n').map(x => x.trim()).join('\n');
+    el.value = targetElement.textContent
+      .trim()
+      .split('\n')
+      .map((x) => x.trim())
+      .join('\n');
     el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
     el.style.position = 'absolute';
     el.style.left = '-9999px'; // Move outside the screen to make it invisible
     document.body.appendChild(el); // Append the <textarea> element to the HTML document
-    const selected = document.getSelection()!.rangeCount > 0 // Check if there is any content selected previously
-      ? document.getSelection()!.getRangeAt(0) // Store selection if found
-      : false; // Mark as false to know no selection existed before
+    const selected =
+      document.getSelection()!.rangeCount > 0 // Check if there is any content selected previously
+        ? document.getSelection()!.getRangeAt(0) // Store selection if found
+        : false; // Mark as false to know no selection existed before
     el.select(); // Select the <textarea> content
     document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
     document.body.removeChild(el); // Remove the <textarea> element
-    if (selected) { // If a selection existed before copying
+    if (selected) {
+      // If a selection existed before copying
       document.getSelection()!.removeAllRanges(); // Unselect everything on the HTML document
       document.getSelection()!.addRange(selected); // Restore the original selection
     }
     this.didCopy = true;
     setTimeout(() => {
-      this.didCopy = false
+      this.didCopy = false;
     }, 3000);
   }
 }
-
-
-
diff --git a/carbon-components-ember/src/components/data-table/-body/index.gts b/carbon-components-ember/src/components/data-table/-body/index.gts
new file mode 100644
index 00000000..caaf0c1a
--- /dev/null
+++ b/carbon-components-ember/src/components/data-table/-body/index.gts
@@ -0,0 +1,50 @@
+import { default as ListRow } from '../-row';
+import Component from '@glimmer/component';
+import DataTableComponent from 'carbon-components-ember/components/data-table';
+import { WithBoundArgs } from '@glint/template';
+import DataTableRow from 'carbon-components-ember/components/data-table/-row';
+
+type Args<T> = {
+  isExpandable: boolean;
+  isCheckable: boolean;
+  table: DataTableComponent<any>;
+  items: T[];
+};
+
+export interface DataTableBodySignature<T> {
+  Args: Args<T>;
+  Blocks: {
+    default: [
+      {
+        Row: WithBoundArgs<
+          typeof DataTableRow<any>,
+          'table' | 'isCheckable' | 'item' | 'isExpandable'
+        >;
+        item: T;
+      },
+    ];
+  };
+}
+
+export default class DataTableBody<T> extends Component<
+  DataTableBodySignature<T>
+> {
+  <template>
+    <tbody>
+      {{#each @items as |item|}}
+        {{yield
+          (hash
+            Row=(component
+              ListRow
+              isExpandable=@isExpandable
+              isCheckable=@isCheckable
+              table=@table
+              item=item
+            )
+            item=item
+          )
+        }}
+      {{/each}}
+    </tbody>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-body/index.hbs b/carbon-components-ember/src/components/data-table/-body/index.hbs
deleted file mode 100644
index 38d6de8a..00000000
--- a/carbon-components-ember/src/components/data-table/-body/index.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-{{import ListRow from '../-row'}}
-
-<tbody>
-  {{#each @items as |item|}}
-    {{yield
-      (hash
-        Row=(component
-          ListRow
-          isExpandable=@isExpandable
-          isCheckable=@isCheckable
-          table=@table
-          item=item
-        )
-        item=item
-      )
-    }}
-  {{/each}}
-</tbody>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-body/index.ts b/carbon-components-ember/src/components/data-table/-body/index.ts
deleted file mode 100644
index 45a694d1..00000000
--- a/carbon-components-ember/src/components/data-table/-body/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import Component from '@glimmer/component';
-import DataTableComponent from 'carbon-components-ember/components/data-table';
-import { WithBoundArgs } from '@glint/template';
-import DataTableRow from 'carbon-components-ember/components/data-table/-row';
-
-type Args<T> = {
-  isExpandable: boolean;
-  isCheckable: boolean;
-  table: DataTableComponent<any>;
-  items: T[];
-}
-
-export interface DataTableBodySignature<T> {
-  Args: Args<T>;
-  Blocks: {
-    default: [{
-      Row: WithBoundArgs<typeof DataTableRow<any>, 'table'|'isCheckable'|'item'|'isExpandable'>;
-      item: T;
-    }];
-  };
-}
-
-export default class DataTableBody<T> extends Component<DataTableBodySignature<T>> {
-
-}
diff --git a/carbon-components-ember/src/components/data-table/-column/index.ts b/carbon-components-ember/src/components/data-table/-column/index.gts
similarity index 75%
rename from carbon-components-ember/src/components/data-table/-column/index.ts
rename to carbon-components-ember/src/components/data-table/-column/index.gts
index 33558083..22cec7b3 100644
--- a/carbon-components-ember/src/components/data-table/-column/index.ts
+++ b/carbon-components-ember/src/components/data-table/-column/index.gts
@@ -9,4 +9,9 @@ export interface TableColumnSignature {
 }
 
 export default class TableColumn extends Component<TableColumnSignature> {
+  <template>
+    <td ...attributes>
+      {{yield}}
+    </td>
+  </template>
 }
diff --git a/carbon-components-ember/src/components/data-table/-column/index.hbs b/carbon-components-ember/src/components/data-table/-column/index.hbs
deleted file mode 100644
index 7e347971..00000000
--- a/carbon-components-ember/src/components/data-table/-column/index.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<td ...attributes>
-  {{yield}}
-</td>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-header/index.gts b/carbon-components-ember/src/components/data-table/-header/index.gts
new file mode 100644
index 00000000..a08772fa
--- /dev/null
+++ b/carbon-components-ember/src/components/data-table/-header/index.gts
@@ -0,0 +1,111 @@
+import { default as Button } from 'carbon-components-ember/components/button';
+import { default as Checkbox } from 'carbon-components-ember/components/checkbox';
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import { default as set } from 'carbon-components-ember/helpers/set';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import DataTableComponent from 'carbon-components-ember/components/data-table/index';
+
+export type Header = {
+  sortable?: boolean;
+  label?: string;
+};
+
+type Args = {
+  table: DataTableComponent<any>;
+  headers: (Header | undefined | null)[];
+  isExpandable?: boolean;
+  isCheckable?: boolean;
+};
+
+export default class ListHeaderComponent extends Component<Args> {
+  didSetup = false;
+  table: DataTableComponent<any>;
+
+  constructor(...args: ConstructorParameters<typeof Component<Args>>) {
+    super(...args);
+    if (this.args.table) {
+      this.table = this.args.table;
+      this.didSetup = true;
+      Object.defineProperty(this.args.table, 'headers', {
+        configurable: true,
+        get: () => this.args.headers,
+      });
+      Object.defineProperty(this.args.table, 'isExpandable', {
+        configurable: true,
+        get: () => this.args.isExpandable,
+      });
+      Object.defineProperty(this.args.table, 'isCheckable', {
+        configurable: true,
+        get: () => this.args.isCheckable,
+      });
+    }
+  }
+
+  <template>
+    <thead>
+      <tr>
+        {{#if @isExpandable}}
+          <th class='cds--table-expand'>
+            {{! checkbox th }}
+            {{! sortable th  }}
+            <span class='cds--table-header-label'></span>
+          </th>
+        {{/if}}
+        {{#if @isCheckable}}
+          <th class='cds--table-column-checkbox'>
+            <Checkbox
+              @checked={{@table.allChecked}}
+              @onChange={{@table.toggleSelectAllItems}}
+            />
+          </th>
+        {{/if}}
+        {{#each @headers as |h|}}
+          <th>
+            {{#if h.sortable}}
+              <Button @type='primary' class='cds--table-sort' title={{h.label}}>
+                <span class='cds--table-header-label'>
+                  {{h.label}}
+                </span>
+                <svg
+                  focusable='false'
+                  preserveAspectRatio='xMidYMid meet'
+                  style='will-change: transform;'
+                  xmlns='http://www.w3.org/2000/svg'
+                  class='cds--table-sort__icon'
+                  width='16'
+                  height='16'
+                  viewBox='0 0 16 16'
+                  aria-hidden='true'
+                >
+                  <path
+                    d='M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z'
+                  ></path>
+                </svg>
+                <svg
+                  focusable='false'
+                  preserveAspectRatio='xMidYMid meet'
+                  style='will-change: transform;'
+                  xmlns='http://www.w3.org/2000/svg'
+                  class='cds--table-sort__icon-unsorted'
+                  width='16'
+                  height='16'
+                  viewBox='0 0 16 16'
+                  aria-hidden='true'
+                >
+                  <path
+                    d='M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z'
+                  ></path>
+                </svg>
+              </Button>
+            {{else}}
+              <span class='cds--table-header-label'>
+                {{h.label}}
+              </span>
+            {{/if}}
+          </th>
+        {{/each}}
+      </tr>
+    </thead>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-header/index.hbs b/carbon-components-ember/src/components/data-table/-header/index.hbs
deleted file mode 100644
index 9576c04e..00000000
--- a/carbon-components-ember/src/components/data-table/-header/index.hbs
+++ /dev/null
@@ -1,70 +0,0 @@
-{{import Button from 'carbon-components-ember/components/button'}}
-{{import Checkbox from 'carbon-components-ember/components/checkbox'}}
-{{import Icon from 'carbon-components-ember/components/icon'}}
-{{import set from 'carbon-components-ember/helpers/set'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-<thead>
-  <tr>
-    {{#if @isExpandable}}
-      <th class='cds--table-expand'>
-        {{! checkbox th }}
-        {{! sortable th  }}
-        <span class='cds--table-header-label'></span>
-      </th>
-    {{/if}}
-    {{#if @isCheckable}}
-      <th class='cds--table-column-checkbox'>
-        <Checkbox
-          @checked={{@table.allChecked}}
-          @onChange={{@table.toggleSelectAllItems}}
-        />
-      </th>
-    {{/if}}
-    {{#each @headers as |h|}}
-      <th>
-        {{#if h.sortable}}
-          <Button @type='primary' class='cds--table-sort' title={{h.label}}>
-            <span class='cds--table-header-label'>
-              {{h.label}}
-            </span>
-            <svg
-              focusable='false'
-              preserveAspectRatio='xMidYMid meet'
-              style='will-change: transform;'
-              xmlns='http://www.w3.org/2000/svg'
-              class='cds--table-sort__icon'
-              width='16'
-              height='16'
-              viewBox='0 0 16 16'
-              aria-hidden='true'
-            >
-              <path
-                d='M12.3 9.3L8.5 13.1 8.5 1 7.5 1 7.5 13.1 3.7 9.3 3 10 8 15 13 10z'
-              ></path>
-            </svg>
-            <svg
-              focusable='false'
-              preserveAspectRatio='xMidYMid meet'
-              style='will-change: transform;'
-              xmlns='http://www.w3.org/2000/svg'
-              class='cds--table-sort__icon-unsorted'
-              width='16'
-              height='16'
-              viewBox='0 0 16 16'
-              aria-hidden='true'
-            >
-              <path
-                d='M13.8 10.3L12 12.1 12 2 11 2 11 12.1 9.2 10.3 8.5 11 11.5 14 14.5 11zM4.5 2L1.5 5 2.2 5.7 4 3.9 4 14 5 14 5 3.9 6.8 5.7 7.5 5z'
-              ></path>
-            </svg>
-          </Button>
-        {{else}}
-          <span class='cds--table-header-label'>
-            {{h.label}}
-          </span>
-        {{/if}}
-      </th>
-    {{/each}}
-  </tr>
-</thead>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-header/index.ts b/carbon-components-ember/src/components/data-table/-header/index.ts
deleted file mode 100644
index 95af5077..00000000
--- a/carbon-components-ember/src/components/data-table/-header/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import Component from '@glimmer/component';
-import DataTableComponent from 'carbon-components-ember/components/data-table/index';
-
-export type Header = {
-  sortable?: boolean;
-  label?: string;
-}
-
-type Args = {
-  table: DataTableComponent<any>;
-  headers: (Header|undefined|null)[];
-  isExpandable?: boolean;
-  isCheckable?: boolean;
-}
-
-export default class ListHeaderComponent extends Component<Args> {
-  didSetup = false;
-  table: DataTableComponent<any>;
-
-  constructor(...args: ConstructorParameters<typeof Component<Args>>) {
-    super(...args);
-    if (this.args.table) {
-      this.table = this.args.table;
-      this.didSetup = true;
-      Object.defineProperty(this.args.table, 'headers', {
-        configurable: true,
-        get: () => this.args.headers
-      });
-      Object.defineProperty(this.args.table, 'isExpandable', {
-        configurable: true,
-        get: () => this.args.isExpandable
-      });
-      Object.defineProperty(this.args.table, 'isCheckable', {
-        configurable: true,
-        get: () => this.args.isCheckable
-      });
-    }
-  }
-}
diff --git a/carbon-components-ember/src/components/data-table/-menu/index.ts b/carbon-components-ember/src/components/data-table/-menu/index.gts
similarity index 55%
rename from carbon-components-ember/src/components/data-table/-menu/index.ts
rename to carbon-components-ember/src/components/data-table/-menu/index.gts
index 761ccdb5..72978910 100644
--- a/carbon-components-ember/src/components/data-table/-menu/index.ts
+++ b/carbon-components-ember/src/components/data-table/-menu/index.gts
@@ -1,3 +1,4 @@
+import { default as Menu } from 'carbon-components-ember/components/menu';
 import Component from '@glimmer/component';
 import MenuItemComponent from 'carbon-components-ember/components/menu/-item';
 
@@ -8,5 +9,11 @@ export interface TableMenuComponentSignature {
 }
 
 export default class TableMenuComponent extends Component<TableMenuComponentSignature> {
-
+  <template>
+    <td class='cds--table-column-menu'>
+      <Menu @icon='overflow-menu--vertical' @direction='top' as |Item|>
+        {{yield Item}}
+      </Menu>
+    </td>
+  </template>
 }
diff --git a/carbon-components-ember/src/components/data-table/-menu/index.hbs b/carbon-components-ember/src/components/data-table/-menu/index.hbs
deleted file mode 100644
index 053ad331..00000000
--- a/carbon-components-ember/src/components/data-table/-menu/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-{{import Menu from 'carbon-components-ember/components/menu'}}
-
-<td class='cds--table-column-menu'>
-  <Menu @icon='overflow-menu--vertical' @direction='top' as |Item|>
-    {{yield Item}}
-  </Menu>
-</td>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-row/index.gts b/carbon-components-ember/src/components/data-table/-row/index.gts
new file mode 100644
index 00000000..2b17ab31
--- /dev/null
+++ b/carbon-components-ember/src/components/data-table/-row/index.gts
@@ -0,0 +1,81 @@
+import { default as Button } from 'carbon-components-ember/components/button';
+import { default as Checkbox } from 'carbon-components-ember/components/checkbox';
+import { default as set } from 'carbon-components-ember/helpers/set';
+import { default as has } from 'carbon-components-ember/helpers/has';
+import { fn } from '@ember/helper';
+import { default as not } from 'ember-truth-helpers/helpers/not';
+import Component from '@glimmer/component';
+import DataTableComponent from 'carbon-components-ember/components/data-table';
+import { tracked } from '@glimmer/tracking';
+
+type Args<T> = {
+  table: DataTableComponent<any>;
+  isExpandable?: boolean;
+  isExpanded?: boolean;
+  isCheckable?: boolean;
+  length?: number;
+  item: T;
+};
+
+export interface DataTableRowSignature<T> {
+  Args: Args<T>;
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class DataTableRow<T> extends Component<
+  DataTableRowSignature<T>
+> {
+  @tracked isExpanded: boolean;
+
+  <template>
+    <tr
+      class='{{if
+          (has @table.state.selectedItems @item)
+          "cds--data-table--selected"
+        }}'
+    >
+      {{#if @isExpandable}}
+        <td class='cds--table-expand' data-event='expand'>
+          <Button
+            class='cds--table-expand__button'
+            @onClick={{fn (set this 'isExpanded') (not this.isExpanded)}}
+          >
+            <svg
+              focusable='false'
+              preserveAspectRatio='xMidYMid meet'
+              style='will-change: transform;'
+              xmlns='http://www.w3.org/2000/svg'
+              class='cds--table-expand__svg'
+              width='16'
+              height='16'
+              viewBox='0 0 16 16'
+              aria-hidden='true'
+            >
+              <path d='M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z'></path>
+            </svg>
+          </Button>
+        </td>
+      {{/if}}
+      {{#if @isCheckable}}
+        <td class='cds--table-column-checkbox'>
+          <Checkbox
+            @checked={{has @table.state.selectedItems @item}}
+            @onChange={{fn @table.toggleItemSelection @item}}
+          />
+        </td>
+      {{/if}}
+      {{yield}}
+    </tr>
+    {{#if @isExpanded}}
+      <tr class='cds--expandable-row' data-child-row>
+        <td colspan='{{@table.headers.length}}'>
+          <div class='cds--child-row-inner-container'>
+            {{yield}}
+          </div>
+        </td>
+      </tr>
+    {{/if}}
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-row/index.hbs b/carbon-components-ember/src/components/data-table/-row/index.hbs
deleted file mode 100644
index bba27527..00000000
--- a/carbon-components-ember/src/components/data-table/-row/index.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-{{import Button from 'carbon-components-ember/components/button'}}
-{{import Checkbox from 'carbon-components-ember/components/checkbox'}}
-{{import set from 'carbon-components-ember/helpers/set'}}
-{{import has from 'carbon-components-ember/helpers/has'}}
-{{import '{ fn }' from '@ember/helper'}}
-{{import not from 'ember-truth-helpers/helpers/not'}}
-
-<tr
-  class='{{if
-      (has @table.state.selectedItems @item)
-      "cds--data-table--selected"
-    }}'
->
-  {{#if @isExpandable}}
-    <td class='cds--table-expand' data-event='expand'>
-      <Button
-        class='cds--table-expand__button'
-        @onClick={{fn (set this 'isExpanded') (not this.isExpanded)}}
-      >
-        <svg
-          focusable='false'
-          preserveAspectRatio='xMidYMid meet'
-          style='will-change: transform;'
-          xmlns='http://www.w3.org/2000/svg'
-          class='cds--table-expand__svg'
-          width='16'
-          height='16'
-          viewBox='0 0 16 16'
-          aria-hidden='true'
-        >
-          <path d='M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z'></path>
-        </svg>
-      </Button>
-    </td>
-  {{/if}}
-  {{#if @isCheckable}}
-    <td class='cds--table-column-checkbox'>
-      <Checkbox
-        @checked={{has @table.state.selectedItems @item}}
-        @onChange={{fn @table.toggleItemSelection @item}}
-      />
-    </td>
-  {{/if}}
-  {{yield}}
-</tr>
-{{#if @isExpanded}}
-  <tr class='cds--expandable-row' data-child-row>
-    <td colspan='{{@table.headers.length}}'>
-      <div class='cds--child-row-inner-container'>
-        {{yield}}
-      </div>
-    </td>
-  </tr>
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-row/index.ts b/carbon-components-ember/src/components/data-table/-row/index.ts
deleted file mode 100644
index 31a252c5..00000000
--- a/carbon-components-ember/src/components/data-table/-row/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import Component from '@glimmer/component';
-import DataTableComponent from 'carbon-components-ember/components/data-table';
-import { tracked } from '@glimmer/tracking';
-
-type Args<T> = {
-  table: DataTableComponent<any>;
-  isExpandable?: boolean;
-  isExpanded?: boolean;
-  isCheckable?: boolean;
-  length?: number;
-  item: T;
-}
-
-export interface DataTableRowSignature<T> {
-  Args: Args<T>;
-  Blocks: {
-    default: [];
-  };
-}
-
-export default class DataTableRow<T> extends Component<DataTableRowSignature<T>> {
-  @tracked isExpanded: boolean;
-}
diff --git a/carbon-components-ember/src/components/data-table/-search-input/index.gts b/carbon-components-ember/src/components/data-table/-search-input/index.gts
new file mode 100644
index 00000000..69543901
--- /dev/null
+++ b/carbon-components-ember/src/components/data-table/-search-input/index.gts
@@ -0,0 +1,55 @@
+import { default as SearchInput } from 'carbon-components-ember/components/search-input';
+import { default as Loading } from 'carbon-components-ember/components/loading';
+import { default as styles } from './styles.scoped.scss';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import { TaskInstance } from 'ember-concurrency';
+
+type Args = {
+  onChange: (value: string) => TaskInstance<any> | undefined;
+  isLoading: boolean;
+  expandable?: boolean;
+  value: string;
+};
+
+export default class TableSearchComponent extends Component<Args> {
+  @tracked isSearching;
+  lastTerm = null;
+
+  runSearch = task({ restartable: true }, async (term) => {
+    this.isSearching = true;
+    const task = this.args.onChange(term);
+    try {
+      return task;
+    } finally {
+      this.isSearching = false;
+      task?.cancel?.();
+    }
+  });
+
+  @action
+  doSearch(term) {
+    if (this.lastTerm === term) return;
+    this.lastTerm = term;
+    this.runSearch.cancelAll();
+    return this.runSearch.perform(term);
+  }
+
+  <template>
+    <SearchInput
+      @isLoading={{@isLoading}}
+      @value={{@value}}
+      @expandable={{@expandable}}
+      @onChange={{this.doSearch}}
+      class='{{if this.isSearching styles.is-searching}}'
+    />
+    <Loading
+      style='position: relative; top: -41px; right: 7px'
+      @inline={{true}}
+      @active={{this.isSearching}}
+    />
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-search-input/index.hbs b/carbon-components-ember/src/components/data-table/-search-input/index.hbs
deleted file mode 100644
index 993aa04c..00000000
--- a/carbon-components-ember/src/components/data-table/-search-input/index.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-{{import SearchInput from 'carbon-components-ember/components/search-input'}}
-{{import Loading from 'carbon-components-ember/components/loading'}}
-{{import styles from './styles.scoped.scss'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-<SearchInput
-  @isLoading={{@isLoading}}
-  @value={{@value}}
-  @expandable={{@expandable}}
-  @onChange={{this.doSearch}}
-  class='{{if this.isSearching styles.is-searching}}'
-/>
-<Loading
-  style='position: relative; top: -41px; right: 7px'
-  @inline={{true}}
-  @active={{this.isSearching}}
-/>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-search-input/index.ts b/carbon-components-ember/src/components/data-table/-search-input/index.ts
deleted file mode 100644
index 8c560cb1..00000000
--- a/carbon-components-ember/src/components/data-table/-search-input/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { task } from 'ember-concurrency'
-import { TaskInstance } from 'ember-concurrency';
-
-
-type Args = {
-  onChange: (value: string) => TaskInstance<any>|undefined;
-  isLoading: boolean;
-  expandable?: boolean;
-  value: string;
-}
-
-
-export default class TableSearchComponent extends Component<Args> {
-
-  @tracked isSearching;
-  lastTerm = null;
-
-  runSearch = task({ restartable: true }, async(term) => {
-    this.isSearching = true;
-    const task = this.args.onChange(term);
-    try {
-      return task;
-    } finally {
-      this.isSearching = false;
-      task?.cancel?.();
-    }
-  })
-
-  @action
-  doSearch(term) {
-    if (this.lastTerm === term) return;
-    this.lastTerm = term;
-    this.runSearch.cancelAll()
-    return this.runSearch.perform(term);
-  }
-}
diff --git a/carbon-components-ember/src/components/data-table/-skeleton/index.gts b/carbon-components-ember/src/components/data-table/-skeleton/index.gts
new file mode 100644
index 00000000..d1c9d7ca
--- /dev/null
+++ b/carbon-components-ember/src/components/data-table/-skeleton/index.gts
@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+type Args = {
+  headers: string[];
+};
+
+export default class ListSkeletonComponent extends Component<Args> {
+  <template>
+    <section class='cds--structured-list cds--skeleton'>
+      <div class='cds--structured-list-tbody'>
+        <div class='cds--structured-list-row'>
+          {{#each @headers}}
+            <div
+              class='cds--structured-list-td cds--structured-list-content--nowrap'
+            >
+              <div class='cds--skeleton__text'></div>
+            </div>
+          {{/each}}
+        </div>
+      </div>
+    </section>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-skeleton/index.hbs b/carbon-components-ember/src/components/data-table/-skeleton/index.hbs
deleted file mode 100644
index 8fcc5f74..00000000
--- a/carbon-components-ember/src/components/data-table/-skeleton/index.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<section class='cds--structured-list cds--skeleton'>
-  <div class='cds--structured-list-tbody'>
-    <div class='cds--structured-list-row'>
-      {{#each @headers}}
-        <div
-          class='cds--structured-list-td cds--structured-list-content--nowrap'
-        >
-          <div class='cds--skeleton__text'></div>
-        </div>
-      {{/each}}
-    </div>
-  </div>
-</section>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-skeleton/index.ts b/carbon-components-ember/src/components/data-table/-skeleton/index.ts
deleted file mode 100644
index 5cd47bb4..00000000
--- a/carbon-components-ember/src/components/data-table/-skeleton/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from '@glimmer/component';
-
-type Args = {
-  headers: string[];
-}
-
-export default class ListSkeletonComponent extends Component<Args> {
-
-}
diff --git a/carbon-components-ember/src/components/data-table/-table/index.ts b/carbon-components-ember/src/components/data-table/-table/index.gts
similarity index 50%
rename from carbon-components-ember/src/components/data-table/-table/index.ts
rename to carbon-components-ember/src/components/data-table/-table/index.gts
index 3302932a..e8484eb7 100644
--- a/carbon-components-ember/src/components/data-table/-table/index.ts
+++ b/carbon-components-ember/src/components/data-table/-table/index.gts
@@ -1,3 +1,4 @@
+import { concat } from '@ember/helper';
 import Component from '@glimmer/component';
 
 type Args = {
@@ -5,7 +6,7 @@ type Args = {
   isSortable?: boolean;
   useZebraStyles?: boolean;
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-}
+};
 
 export interface TableComponentSignature {
   Args: Args;
@@ -15,5 +16,15 @@ export interface TableComponentSignature {
 }
 
 export default class TableComponent extends Component<TableComponentSignature> {
-
+  <template>
+    <table
+      class='cds--data-table
+        {{if @size (concat "cds--data-table--" @size)}}
+        {{if @useZebraStyles "cds--data-table--zebra"}}
+        {{if @isSortable "cds--data-table--sort"}}
+        {{if @isLoading "cds--skeleton"}}'
+    >
+      {{yield}}
+    </table>
+  </template>
 }
diff --git a/carbon-components-ember/src/components/data-table/-table/index.hbs b/carbon-components-ember/src/components/data-table/-table/index.hbs
deleted file mode 100644
index 82bbf3cc..00000000
--- a/carbon-components-ember/src/components/data-table/-table/index.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-{{import '{ concat }' from '@ember/helper'}}
-<table
-  class='cds--data-table
-    {{if @size (concat "cds--data-table--" @size)}}
-    {{if @useZebraStyles "cds--data-table--zebra"}}
-    {{if @isSortable "cds--data-table--sort"}}
-    {{if @isLoading "cds--skeleton"}}'
->
-  {{yield}}
-</table>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.gts b/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.gts
new file mode 100644
index 00000000..cf00a999
--- /dev/null
+++ b/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.gts
@@ -0,0 +1,49 @@
+import { default as set } from 'carbon-components-ember/helpers/set';
+import { default as getFn } from 'carbon-components-ember/helpers/get-fn';
+import { default as Button } from 'carbon-components-ember/components/button';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import Table from '../../index';
+
+export interface Signature {
+  Args: {
+    table: Table<any>;
+  };
+  Element: null;
+  Blocks: {
+    default: [
+      {
+        close: () => void;
+      },
+    ];
+  };
+}
+
+export default class TableActionsComponent extends Component<Signature> {
+  <template>
+    {{#if @table.state.selectedItems.size}}
+      <div
+        class='cds--batch-actions cds--batch-actions--active'
+        aria-label='Table Action Bar'
+      >
+        <div class='cds--action-list'>
+          {{yield (hash close=(fn (getFn @table.state.selectedItems 'clear')))}}
+          <Button
+            @type='primary'
+            @onClick={{fn (getFn @table.state.selectedItems 'clear')}}
+          >
+            Cancel
+          </Button>
+        </div>
+        <div class='cds--batch-summary'>
+          <p class='cds--batch-summary__para'>
+            <span data-items-selected>
+              {{@table.state.selectedItems.size}}
+            </span>
+            items selected
+          </p>
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.hbs b/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.hbs
deleted file mode 100644
index 4fed7205..00000000
--- a/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.hbs
+++ /dev/null
@@ -1,29 +0,0 @@
-{{import set from 'carbon-components-ember/helpers/set'}}
-{{import getFn from 'carbon-components-ember/helpers/get-fn'}}
-{{import Button from 'carbon-components-ember/components/button'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-{{#if @table.state.selectedItems.size}}
-  <div
-    class='cds--batch-actions cds--batch-actions--active'
-    aria-label='Table Action Bar'
-  >
-    <div class='cds--action-list'>
-      {{yield (hash close=(fn (getFn @table.state.selectedItems 'clear')))}}
-      <Button
-        @type='primary'
-        @onClick={{fn (getFn @table.state.selectedItems 'clear')}}
-      >
-        Cancel
-      </Button>
-    </div>
-    <div class='cds--batch-summary'>
-      <p class='cds--batch-summary__para'>
-        <span data-items-selected>
-          {{@table.state.selectedItems.size}}
-        </span>
-        items selected
-      </p>
-    </div>
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.ts b/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.ts
deleted file mode 100644
index 4ed0ce1f..00000000
--- a/carbon-components-ember/src/components/data-table/-toolbar/-actions/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from '@glimmer/component';
-import Table from '../../index'
-
-export interface Signature {
-  Args: {
-    table: Table<any>;
-  };
-  Element: null;
-  Blocks: {
-    default: [{
-      close: () => void;
-    }];
-  };
-}
-
-export default class TableActionsComponent extends Component<Signature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/-content/index.ts b/carbon-components-ember/src/components/data-table/-toolbar/-content/index.gts
similarity index 60%
rename from carbon-components-ember/src/components/data-table/-toolbar/-content/index.ts
rename to carbon-components-ember/src/components/data-table/-toolbar/-content/index.gts
index 12c4e6bb..85e32b1a 100644
--- a/carbon-components-ember/src/components/data-table/-toolbar/-content/index.ts
+++ b/carbon-components-ember/src/components/data-table/-toolbar/-content/index.gts
@@ -1,16 +1,17 @@
 import Component from '@glimmer/component';
 
 export interface Signature {
-  Args: {
-
-  };
+  Args: {};
   Element: null;
   Blocks: {
     default: [];
   };
 }
 
-export default class TableToolbarContentComponent extends Component<Signature> {}
-
-
-
+export default class TableToolbarContentComponent extends Component<Signature> {
+  <template>
+    <div class='cds--toolbar-content'>
+      {{yield}}
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/-content/index.hbs b/carbon-components-ember/src/components/data-table/-toolbar/-content/index.hbs
deleted file mode 100644
index c9815e3a..00000000
--- a/carbon-components-ember/src/components/data-table/-toolbar/-content/index.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class='cds--toolbar-content'>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/index.ts b/carbon-components-ember/src/components/data-table/-toolbar/index.gts
similarity index 52%
rename from carbon-components-ember/src/components/data-table/-toolbar/index.ts
rename to carbon-components-ember/src/components/data-table/-toolbar/index.gts
index 077b056b..23de986d 100644
--- a/carbon-components-ember/src/components/data-table/-toolbar/index.ts
+++ b/carbon-components-ember/src/components/data-table/-toolbar/index.gts
@@ -1,3 +1,6 @@
+import { default as set } from 'carbon-components-ember/helpers/set';
+import { default as Actions } from './-actions';
+import { default as Content } from './-content';
 import Component from '@glimmer/component';
 import TableToolbarContentComponent from 'carbon-components-ember/components/data-table/-toolbar/-content';
 import TableActionsComponent from 'carbon-components-ember/components/data-table/-toolbar/-actions';
@@ -10,14 +13,19 @@ export interface Signature {
   };
   Element: null;
   Blocks: {
-    default: [{
-      Content: typeof TableToolbarContentComponent;
-      Actions: WithBoundArgs<typeof TableActionsComponent, 'table'>;
-    }];
+    default: [
+      {
+        Content: typeof TableToolbarContentComponent;
+        Actions: WithBoundArgs<typeof TableActionsComponent, 'table'>;
+      },
+    ];
   };
 }
 
-export default class TableToolbarComponent extends Component<Signature> {}
-
-
-
+export default class TableToolbarComponent extends Component<Signature> {
+  <template>
+    <section class='cds--table-toolbar'>
+      {{yield (hash Content=Content Actions=(component Actions table=@table))}}
+    </section>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/data-table/-toolbar/index.hbs b/carbon-components-ember/src/components/data-table/-toolbar/index.hbs
deleted file mode 100644
index 752b6bb0..00000000
--- a/carbon-components-ember/src/components/data-table/-toolbar/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-{{import set from 'carbon-components-ember/helpers/set'}}
-{{import Actions from './-actions'}}
-{{import Content from './-content'}}
-
-<section class='cds--table-toolbar'>
-  {{yield (hash Content=Content Actions=(component Actions table=@table))}}
-</section>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/data-table/index.ts b/carbon-components-ember/src/components/data-table/index.gts
similarity index 55%
rename from carbon-components-ember/src/components/data-table/index.ts
rename to carbon-components-ember/src/components/data-table/index.gts
index ee6056bc..a4d6c220 100644
--- a/carbon-components-ember/src/components/data-table/index.ts
+++ b/carbon-components-ember/src/components/data-table/index.gts
@@ -1,3 +1,18 @@
+import { default as ListColumn } from './-column';
+import { default as ListHeader } from './-header';
+import { default as ListBody } from './-body';
+import { default as Skeleton } from './-skeleton';
+import { default as Toolbar } from './-toolbar';
+import { default as Table } from './-table';
+import { default as Pagination } from '../pagination';
+import { default as SearchInput } from './-search-input';
+import { default as Menu } from './-menu';
+import { fn } from '@ember/helper';
+import { default as call } from 'ember-composable-helpers/helpers/call';
+import { default as getFn } from 'carbon-components-ember/helpers/get-fn';
+import { default as generic } from 'carbon-components-ember/helpers/generic';
+import { default as newObj } from 'carbon-components-ember/helpers/new-obj';
+import { default as didInsert } from '@ember/render-modifiers/modifiers/did-insert';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
@@ -14,7 +29,9 @@ import DataTableBody from 'carbon-components-ember/components/data-table/-body';
 import TableMenuComponent from 'carbon-components-ember/components/data-table/-menu';
 import TableColumn from 'carbon-components-ember/components/data-table/-column';
 import { WithBoundArgs } from '@glint/template';
-import ListHeaderComponent, { Header } from 'carbon-components-ember/components/data-table/-header';
+import ListHeaderComponent, {
+  Header,
+} from 'carbon-components-ember/components/data-table/-header';
 
 class TrackedSet {
   @tracked counter = 0;
@@ -50,7 +67,7 @@ class TrackedSet {
 
   hasAll(a) {
     if (!this.counter) return false;
-    return a.every(i => this.set.has(i));
+    return a.every((i) => this.set.has(i));
   }
 
   has(v) {
@@ -65,11 +82,15 @@ class TrackedSet {
 }
 
 class State {
-  @tracked currentItemsSlice?: {start: number; end?: number; itemsPerPage: number; page: number} = undefined;
+  @tracked currentItemsSlice?: {
+    start: number;
+    end?: number;
+    itemsPerPage: number;
+    page: number;
+  } = undefined;
   @tracked currentSearchTerm?: string = undefined;
   @tracked currentSearch?: MutableArray<any> = undefined;
   @tracked selectedItems = new TrackedSet();
-
 }
 
 type Args<T> = {
@@ -81,29 +102,42 @@ type Args<T> = {
   isLoading?: boolean;
   title?: string;
   description?: string;
-}
+};
 
 export interface DataTableComponentSignature<T> {
   Args: Args<T>;
   Blocks: {
-    default: [{
-      Toolbar: WithBoundArgs<typeof TableToolbarComponent, 'table'>;
-      SearchInput: WithBoundArgs<typeof TableSearchComponent, 'isLoading'|'value'|'onChange'>;
-      Pagination: WithBoundArgs<typeof CarbonPagination, 'isLoading'|'length'|'state'|'onPageChanged'>;
-      Table: WithBoundArgs<typeof TableComponent, 'isLoading'>;
-      EachBodyRows: WithBoundArgs<typeof DataTableBody<T>, 'table'|'isExpandable'|'isCheckable'|'items'>;
-      Column: typeof TableColumn;
-      Menu: typeof TableMenuComponent;
-      Header: WithBoundArgs<typeof ListHeaderComponent, 'table'>;
-    }];
+    default: [
+      {
+        Toolbar: WithBoundArgs<typeof TableToolbarComponent, 'table'>;
+        SearchInput: WithBoundArgs<
+          typeof TableSearchComponent,
+          'isLoading' | 'value' | 'onChange'
+        >;
+        Pagination: WithBoundArgs<
+          typeof CarbonPagination,
+          'isLoading' | 'length' | 'state' | 'onPageChanged'
+        >;
+        Table: WithBoundArgs<typeof TableComponent, 'isLoading'>;
+        EachBodyRows: WithBoundArgs<
+          typeof DataTableBody<T>,
+          'table' | 'isExpandable' | 'isCheckable' | 'items'
+        >;
+        Column: typeof TableColumn;
+        Menu: typeof TableMenuComponent;
+        Header: WithBoundArgs<typeof ListHeaderComponent, 'table'>;
+      },
+    ];
   };
 }
 
-export default class DataTableComponent<T> extends Component<DataTableComponentSignature<T>> {
+export default class DataTableComponent<T> extends Component<
+  DataTableComponentSignature<T>
+> {
   // this is set by the Header Component
-  declare isExpandable: boolean
-  declare isCheckable: boolean
-  declare headers: Header[]
+  declare isExpandable: boolean;
+  declare isCheckable: boolean;
+  declare headers: Header[];
 
   @defaultArgs
   args: Args<T> = {
@@ -114,20 +148,21 @@ export default class DataTableComponent<T> extends Component<DataTableComponentS
     items: undefined as any,
     isLoading: false,
     title: '',
-    description: ''
+    description: '',
   };
 
   @tracked internalState: State;
 
   get searchFunction() {
     if (this.args.search) return this.args.search;
-    const ensureString = v => (typeof v === 'string' ? v.toLowerCase() : JSON.stringify(v).toLowerCase());
+    const ensureString = (v) =>
+      typeof v === 'string' ? v.toLowerCase() : JSON.stringify(v).toLowerCase();
     const f = (t, term) => {
       if (!term || term === '') return true;
       if (t.id && t.id.toLowerCase().includes(term)) return true;
       return Object.values(t.toJSON ? t.toJSON() : t)
         .filter((v: any) => v && !v.defaultAdapter)
-        .some(v => (v && ensureString(v).includes(term)));
+        .some((v) => v && ensureString(v).includes(term));
     };
     return f;
   }
@@ -136,7 +171,12 @@ export default class DataTableComponent<T> extends Component<DataTableComponentS
     super(...args);
     next(() => {
       if (!this.state.currentItemsSlice) {
-        this.state.currentItemsSlice = { start: 0, end: undefined, itemsPerPage: 0, page: 0 };
+        this.state.currentItemsSlice = {
+          start: 0,
+          end: undefined,
+          itemsPerPage: 0,
+          page: 0,
+        };
       }
     });
 
@@ -158,7 +198,7 @@ export default class DataTableComponent<T> extends Component<DataTableComponentS
     return this.args.items;
   }
 
-  applySearch = task({ restartable: true }, async(items, term) => {
+  applySearch = task({ restartable: true }, async (items, term) => {
     this.state.currentSearch = A([]);
     term = term && term.toLowerCase();
     const f = this.searchFunction;
@@ -167,11 +207,14 @@ export default class DataTableComponent<T> extends Component<DataTableComponentS
         this.state.currentSearch!!.pushObject(t);
       }
     }
-  })
+  });
 
   get currentItems() {
     if (!this.items || !this.state.currentItemsSlice) return [];
-    return this.items.slice(this.state.currentItemsSlice.start, this.state.currentItemsSlice.end);
+    return this.items.slice(
+      this.state.currentItemsSlice.start,
+      this.state.currentItemsSlice.end,
+    );
   }
 
   get allChecked() {
@@ -189,7 +232,7 @@ export default class DataTableComponent<T> extends Component<DataTableComponentS
     if (!term) {
       this.state.currentSearch = undefined;
       this.applySearch.cancelAll();
-      return
+      return;
     }
     return this.applySearch.perform(this.args.items || [], term);
   }
@@ -221,4 +264,50 @@ export default class DataTableComponent<T> extends Component<DataTableComponentS
   changePage(slice) {
     this.state.currentItemsSlice = slice;
   }
+
+  <template>
+    <div
+      class='cds--data-table-container {{if @isLoading "bx-skeleton"}}'
+      data-table
+    >
+      <div class='cds--data-table-header' {{didInsert this.didInsert}}>
+        <h4 class='cds--data-table-header__title'>
+          {{@title}}
+        </h4>
+        <p class='cds--data-table-header__description'>
+          {{@description}}
+        </p>
+      </div>
+
+      {{yield
+        (hash
+          SearchInput=(component
+            SearchInput
+            isLoading=@isLoading
+            value=@state.currentSearchTerm
+            onChange=this.search
+          )
+          Pagination=(component
+            Pagination
+            isLoading=@isLoading
+            length=this.items.length
+            state=this.state.currentItemsSlice
+            onPageChanged=this.changePage
+          )
+          Menu=Menu
+          Table=(component Table isLoading=@isLoading)
+          Column=ListColumn
+          EachBodyRows=(component
+            ListBody
+            isExpandable=this.isExpandable
+            isCheckable=this.isCheckable
+            table=this
+            items=this.currentItems
+          )
+          Header=(component ListHeader table=this)
+          Toolbar=(component Toolbar table=this)
+        )
+      }}
+    </div>
+  </template>
 }
diff --git a/carbon-components-ember/src/components/data-table/index.hbs b/carbon-components-ember/src/components/data-table/index.hbs
deleted file mode 100644
index 245cba82..00000000
--- a/carbon-components-ember/src/components/data-table/index.hbs
+++ /dev/null
@@ -1,59 +0,0 @@
-{{import ListColumn from './-column'}}
-{{import ListHeader from './-header'}}
-{{import ListBody from './-body'}}
-{{import Skeleton from './-skeleton'}}
-{{import Toolbar from './-toolbar'}}
-{{import Table from './-table'}}
-{{import Pagination from '../pagination'}}
-{{import SearchInput from './-search-input'}}
-{{import Menu from './-menu'}}
-{{import '{ fn }' from '@ember/helper'}}
-{{import call from 'ember-composable-helpers/helpers/call'}}
-{{import getFn from 'carbon-components-ember/helpers/get-fn'}}
-{{import generic from 'carbon-components-ember/helpers/generic'}}
-{{import newObj from 'carbon-components-ember/helpers/new-obj'}}
-{{import didInsert from '@ember/render-modifiers/modifiers/did-insert'}}
-
-<div
-  class='cds--data-table-container {{if @isLoading "bx-skeleton"}}'
-  data-table
->
-  <div class='cds--data-table-header' {{didInsert this.didInsert}}>
-    <h4 class='cds--data-table-header__title'>
-      {{@title}}
-    </h4>
-    <p class='cds--data-table-header__description'>
-      {{@description}}
-    </p>
-  </div>
-
-  {{yield
-    (hash
-      SearchInput=(component
-        SearchInput
-        isLoading=@isLoading
-        value=@state.currentSearchTerm
-        onChange=this.search
-      )
-      Pagination=(component
-        Pagination
-        isLoading=@isLoading
-        length=this.items.length
-        state=this.state.currentItemsSlice
-        onPageChanged=this.changePage
-      )
-      Menu=Menu
-      Table=(component Table isLoading=@isLoading)
-      Column=ListColumn
-      EachBodyRows=(component
-        ListBody
-        isExpandable=this.isExpandable
-        isCheckable=this.isCheckable
-        table=this
-        items=this.currentItems
-      )
-      Header=(component ListHeader table=this)
-      Toolbar=(component Toolbar table=this)
-    )
-  }}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/dialogs/confirm/index.gts b/carbon-components-ember/src/components/dialogs/confirm/index.gts
index 428db1ad..52a985c6 100644
--- a/carbon-components-ember/src/components/dialogs/confirm/index.gts
+++ b/carbon-components-ember/src/components/dialogs/confirm/index.gts
@@ -13,7 +13,7 @@ type Args = {
   type: string;
   cancelText?: string;
   label?: string;
-}
+};
 
 export interface DialogConfirmInterface {
   Args: Args;
@@ -72,6 +72,3 @@ export default class ConfirmDialogComponent extends Component<DialogConfirmInter
     </Modal>
   </template>
 }
-
-
-
diff --git a/carbon-components-ember/src/components/form-input/index.gts b/carbon-components-ember/src/components/form-input/index.gts
new file mode 100644
index 00000000..bed778d6
--- /dev/null
+++ b/carbon-components-ember/src/components/form-input/index.gts
@@ -0,0 +1,59 @@
+import { default as defaultTo } from 'carbon-components-ember/helpers/default-to';
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+
+type Args = {
+  label?: string;
+  help?: string;
+  errors?: string;
+  type?: string;
+  value?: string;
+  placeholder?: string;
+  onChange: (value) => void;
+};
+
+export interface FormInputSignature {
+  Args: Args;
+  Element: HTMLDivElement;
+}
+
+export default class FormInput extends Component<FormInputSignature> {
+  get guid() {
+    return guidFor(this);
+  }
+
+  @action
+  onInputChange(evt) {
+    this.args.onChange?.(evt.target.value);
+  }
+
+  <template>
+    <div class='cds--form-item' style='margin-bottom: 1.5rem;' ...attributes>
+      {{#if @label}}
+        <label for='text-input-{{this.guid}}' class='cds--label'>
+          {{@label}}
+        </label>
+      {{/if}}
+      <input
+        {{on 'change' this.onInputChange}}
+        id='text-input-{{this.guid}}'
+        type='{{defaultTo @type "text"}}'
+        value={{@value}}
+        class='cds--text-input'
+        placeholder='{{@placeholder}}'
+      />
+      {{#if @help}}
+        <div class='cds--form__helper-text'>
+          {{@help}}
+        </div>
+      {{/if}}
+      {{#if @errors}}
+        <div class='cds--form-requirement'>
+          {{@errors}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/form-input/index.hbs b/carbon-components-ember/src/components/form-input/index.hbs
deleted file mode 100644
index 3463dff1..00000000
--- a/carbon-components-ember/src/components/form-input/index.hbs
+++ /dev/null
@@ -1,28 +0,0 @@
-{{import defaultTo from 'carbon-components-ember/helpers/default-to'}}
-{{import '{ on }' from '@ember/modifier'}}
-
-<div class='cds--form-item' style='margin-bottom: 1.5rem;' ...attributes>
-  {{#if @label}}
-    <label for='text-input-{{this.guid}}' class='cds--label'>
-      {{@label}}
-    </label>
-  {{/if}}
-  <input
-    {{on 'change' this.onInputChange}}
-    id='text-input-{{this.guid}}'
-    type='{{defaultTo @type "text"}}'
-    value={{@value}}
-    class='cds--text-input'
-    placeholder='{{@placeholder}}'
-  />
-  {{#if @help}}
-    <div class='cds--form__helper-text'>
-      {{@help}}
-    </div>
-  {{/if}}
-  {{#if @errors}}
-    <div class='cds--form-requirement'>
-      {{@errors}}
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/form-input/index.ts b/carbon-components-ember/src/components/form-input/index.ts
deleted file mode 100644
index 07294cdc..00000000
--- a/carbon-components-ember/src/components/form-input/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
-
-type Args = {
-  label?: string;
-  help?: string;
-  errors?: string;
-  type?: string;
-  value?: string;
-  placeholder?: string;
-  onChange: (value) => void;
-}
-
-export interface FormInputSignature {
-  Args: Args;
-  Element: HTMLDivElement;
-}
-
-export default class FormInput extends Component<FormInputSignature> {
-  get guid() {
-    return guidFor(this);
-  }
-
-  @action
-  onInputChange(evt) {
-    this.args.onChange?.(evt.target.value);
-  }
-}
-
-
-
diff --git a/carbon-components-ember/src/components/icon/index.gts b/carbon-components-ember/src/components/icon/index.gts
index 844712f7..b903df9e 100644
--- a/carbon-components-ember/src/components/icon/index.gts
+++ b/carbon-components-ember/src/components/icon/index.gts
@@ -12,1352 +12,1351 @@ import renderSvgPart from 'carbon-components-ember/icon/render-svg-part';
 import { array } from '@ember/helper';
 import htmlSafe from 'carbon-components-ember/helpers/html-safe';
 
-
 const IconMap = {};
 Object.values(icons).forEach((i: any) => {
   IconMap[i.name] = IconMap[i.name] || {};
   IconMap[i.name][i.size] = i;
-})
+});
 
 // eslint-disable-next-line max-len
 export type IconNames =
-  '3D-Cursor'
-  |  '3D-cursor--alt'
-  |  '3D-curve--auto-colon'
-  |  '3D-curve--auto-vessels'
-  |  '3D-curve--manual'
-  |  '3D-iCa'
-  |  '3D-MPR-Toggle'
-  |  '3D-print-mesh'
-  |  '3D-software'
-  |  '3rd-party-connected'
-  |  '4K'
-  |  '4K--filled'
-  |  'accessibility'
-  |  'accessibility--alt'
-  |  'accessibility--color'
-  |  'accessibility--color--filled'
-  |  'account'
-  |  'activity'
-  |  'add'
-  |  'add--alt'
-  |  'add--filled'
-  |  'add-comment'
-  |  'ai-results'
-  |  'ai-results--high'
-  |  'ai-results--low'
-  |  'ai-results--medium'
-  |  'ai-results--urgent'
-  |  'ai-results--very-high'
-  |  'ai-status'
-  |  'ai-status--complete'
-  |  'ai-status--failed'
-  |  'ai-status--in-progress'
-  |  'ai-status--queued'
-  |  'ai-status--rejected'
-  |  'alarm'
-  |  'alarm--add'
-  |  'alarm--subtract'
-  |  'align--horizontal-center'
-  |  'align--horizontal-left'
-  |  'align--horizontal-right'
-  |  'align--vertical-bottom'
-  |  'align--vertical-center'
-  |  'align--vertical-top'
-  |  'analytics'
-  |  'analytics--reference'
-  |  'angle'
-  |  'annotation-visibility'
-  |  'aperture'
-  |  'api'
-  |  'API--1'
-  |  'app'
-  |  'app-connectivity'
-  |  'app-switcher'
-  |  'apple'
-  |  'application'
-  |  'apps'
-  |  'archive'
-  |  'arrival'
-  |  'arrow--annotation'
-  |  'arrow--down'
-  |  'arrow--down-left'
-  |  'arrow--down-right'
-  |  'arrow--left'
-  |  'arrow--right'
-  |  'arrow--up'
-  |  'arrow--up-left'
-  |  'arrow--up-right'
-  |  'arrow-shift-down'
-  |  'arrows'
-  |  'arrows--horizontal'
-  |  'arrows--vertical'
-  |  'asleep'
-  |  'asleep--filled'
-  |  'asset'
-  |  'at'
-  |  'attachment'
-  |  'audio-console'
-  |  'augmented-reality'
-  |  'auto-scroll'
-  |  'automatic'
-  |  'awake'
-  |  'back-to-top'
-  |  'badge'
-  |  'bar'
-  |  'barrier'
-  |  'basketball'
-  |  'battery--charging'
-  |  'battery--empty'
-  |  'battery--full'
-  |  'battery--half'
-  |  'battery--low'
-  |  'battery--quarter'
-  |  'bee'
-  |  'bicycle'
-  |  'binoculars'
-  |  'bloch-sphere'
-  |  'blockchain'
-  |  'blog'
-  |  'bluetooth'
-  |  'bluetooth--off'
-  |  'bookmark'
-  |  'bookmark--filled'
-  |  'bot'
-  |  'box'
-  |  'box-plot'
-  |  'branch'
-  |  'brightness-contrast'
-  |  'brush-freehand'
-  |  'brush-polygon'
-  |  'building'
-  |  'building--insights-1'
-  |  'building--insights-2'
-  |  'building--insights-3'
-  |  'bullhorn'
-  |  'bus'
-  |  'CAD'
-  |  'cafe'
-  |  'calculator'
-  |  'calculator--check'
-  |  'calendar'
-  |  'calendar--heat-map'
-  |  'calendar--settings'
-  |  'calibrate'
-  |  'camera'
-  |  'camera--action'
-  |  'campsite'
-  |  'car'
-  |  'car--front'
-  |  'carbon'
-  |  'caret--down'
-  |  'caret--left'
-  |  'caret--right'
-  |  'caret--sort'
-  |  'caret--sort--down'
-  |  'caret--sort--up'
-  |  'caret--up'
-  |  'carousel--horizontal'
-  |  'carousel--vertical'
-  |  'catalog'
-  |  'categories'
-  |  'category'
-  |  'category--add'
-  |  'category--and'
-  |  'category--new'
-  |  'category--new-each'
-  |  'ccX'
-  |  'cd--archive'
-  |  'cd--create-archive'
-  |  'cd--create-exchange'
-  |  'CDA'
-  |  'center--circle'
-  |  'center--square'
-  |  'certificate'
-  |  'certificate--check'
-  |  'change-catalog'
-  |  'character-patterns'
-  |  'charging-station'
-  |  'charging-station--filled'
-  |  'chart--3D'
-  |  'chart--area'
-  |  'chart--area-smooth'
-  |  'chart--area-stepper'
-  |  'chart--bar'
-  |  'chart--bar-floating'
-  |  'chart--bar-overlay'
-  |  'chart--bar-stacked'
-  |  'chart--bar-target'
-  |  'chart--bubble'
-  |  'chart--bullet'
-  |  'chart--candlestick'
-  |  'chart--cluster-bar'
-  |  'chart--column'
-  |  'chart--column-floating'
-  |  'chart--column-target'
-  |  'chart--combo'
-  |  'chart--combo-stacked'
-  |  'chart--custom'
-  |  'chart--error-bar'
-  |  'chart--error-bar--alt'
-  |  'chart--evaluation'
-  |  'chart--high-low'
-  |  'chart--histogram'
-  |  'chart--line'
-  |  'chart--line--data'
-  |  'chart--line-smooth'
-  |  'chart--marimekko'
-  |  'chart--multi-line'
-  |  'chart--multitype'
-  |  'chart--network'
-  |  'chart--parallel'
-  |  'chart--pie'
-  |  'chart--point'
-  |  'chart--population'
-  |  'chart--radar'
-  |  'chart--radial'
-  |  'chart--relationship'
-  |  'chart--ring'
-  |  'chart--river'
-  |  'chart--rose'
-  |  'chart--scatter'
-  |  'chart--stacked'
-  |  'chart--stepper'
-  |  'chart--sunburst'
-  |  'chart--t-sne'
-  |  'chart--treemap'
-  |  'chart--venn-diagram'
-  |  'chart--waterfall'
-  |  'chat'
-  |  'chat-bot'
-  |  'checkbox'
-  |  'checkbox--checked'
-  |  'checkbox--checked--filled'
-  |  'checkbox--indeterminate'
-  |  'checkbox--indeterminate--filled'
-  |  'checkbox--undeterminate'
-  |  'checkbox--undeterminate--filled'
-  |  'checkmark'
-  |  'checkmark--filled'
-  |  'checkmark--filled--error'
-  |  'checkmark--filled--warning'
-  |  'checkmark--outline'
-  |  'checkmark--outline--error'
-  |  'checkmark--outline--warning'
-  |  'chemistry'
-  |  'chemistry--reference'
-  |  'chevron--down'
-  |  'chevron--left'
-  |  'chevron--mini'
-  |  'chevron--right'
-  |  'chevron--sort'
-  |  'chevron--sort--down'
-  |  'chevron--sort--up'
-  |  'chevron--up'
-  |  'chip'
-  |  'choices'
-  |  'circle--filled'
-  |  'circle-dash'
-  |  'circle-measurement'
-  |  'circle-packing'
-  |  'circuit-composer'
-  |  'classification'
-  |  'classifier--language'
-  |  'clean'
-  |  'close'
-  |  'close--filled'
-  |  'close--outline'
-  |  'closed-caption'
-  |  'closed-caption--alt'
-  |  'closed-caption--filled'
-  |  'cloud'
-  |  'cloud--data-ops'
-  |  'cloud--download'
-  |  'cloud--lightning'
-  |  'cloud--rain'
-  |  'cloud--snow'
-  |  'cloud--upload'
-  |  'cloud-app'
-  |  'cloud-foundry--1'
-  |  'cloud-foundry--2'
-  |  'cloud-satellite'
-  |  'cloudy'
-  |  'cobb-angle'
-  |  'code'
-  |  'code--reference'
-  |  'cognitive'
-  |  'collaborate'
-  |  'collapse-all'
-  |  'collapse-categories'
-  |  'color-palette'
-  |  'color-switch'
-  |  'column'
-  |  'compare'
-  |  'compass'
-  |  'composer-edit'
-  |  'concept'
-  |  'connect'
-  |  'connection-signal'
-  |  'container-software'
-  |  'content-view'
-  |  'contour-finding'
-  |  'contrast'
-  |  'copy'
-  |  'copy--file'
-  |  'corn'
-  |  'corner'
-  |  'coronavirus'
-  |  'course'
-  |  'covariate'
-  |  'credentials'
-  |  'crop'
-  |  'cross-reference'
-  |  'cross-tab'
-  |  'CSV'
-  |  'cU1'
-  |  'cU3'
-  |  'cube-view'
-  |  'cursor--1'
-  |  'cursor--2'
-  |  'cut'
-  |  'cut-in-half'
-  |  'cY'
-  |  'cyclist'
-  |  'cZ'
-  |  'dashboard'
-  |  'dashboard--reference'
-  |  'data--1'
-  |  'data--2'
-  |  'data--base'
-  |  'data--base--alt'
-  |  'data--check'
-  |  'data--connected'
-  |  'data--error'
-  |  'data--reference'
-  |  'data--set'
-  |  'data--structured'
-  |  'data--unstructured'
-  |  'data-class'
-  |  'data-player'
-  |  'data-refinery'
-  |  'data-refinery--reference'
-  |  'data-share'
-  |  'data-table'
-  |  'data-table--reference'
-  |  'data-vis--1'
-  |  'data-vis--2'
-  |  'data-vis--3'
-  |  'data-vis--4'
-  |  'datastore'
-  |  'debug'
-  |  'decision-tree'
-  |  'delete'
-  |  'delivery-truck'
-  |  'denominate'
-  |  'departure'
-  |  'deploy'
-  |  'deploy-rules'
-  |  'deployment-pattern'
-  |  'deployment-policy'
-  |  'development'
-  |  'devices'
-  |  'dew-point'
-  |  'dew-point--filled'
-  |  'diagram'
-  |  'diagram--reference'
-  |  'dicom--6000'
-  |  'dicom--overlay'
-  |  'direction--bear-right--01'
-  |  'direction--bear-right--01--filled'
-  |  'direction--bear-right--02'
-  |  'direction--bear-right--02--filled'
-  |  'direction--curve'
-  |  'direction--curve--filled'
-  |  'direction--merge'
-  |  'direction--merge--filled'
-  |  'direction--right--01'
-  |  'direction--right--01--filled'
-  |  'direction--right--02'
-  |  'direction--right--02--filled'
-  |  'direction--rotary--first-right'
-  |  'direction--rotary--first-right--filled'
-  |  'direction--rotary--right'
-  |  'direction--rotary--right--filled'
-  |  'direction--rotary--straight'
-  |  'direction--rotary--straight--filled'
-  |  'direction--sharp-turn'
-  |  'direction--sharp-turn--filled'
-  |  'direction--straight'
-  |  'direction--straight--filled'
-  |  'direction--straight--right'
-  |  'direction--straight--right--filled'
-  |  'direction--u-turn'
-  |  'direction--u-turn--filled'
-  |  'distribute--horizontal-center'
-  |  'distribute--horizontal-left'
-  |  'distribute--horizontal-right'
-  |  'distribute--vertical-bottom'
-  |  'distribute--vertical-center'
-  |  'distribute--vertical-top'
-  |  'dna'
-  |  'DOC'
-  |  'document'
-  |  'document--add'
-  |  'document--blank'
-  |  'document--download'
-  |  'document--export'
-  |  'document--import'
-  |  'document--pdf'
-  |  'document--subtract'
-  |  'document--tasks'
-  |  'document--unknown'
-  |  'document--view'
-  |  'document--word-processor'
-  |  'document--word-processor--reference'
-  |  'document-sentiment'
-  |  'dot-mark'
-  |  'double-integer'
-  |  'down-to-bottom'
-  |  'download'
-  |  'download-study'
-  |  'drag--horizontal'
-  |  'drag--vertical'
-  |  'draggable'
-  |  'draw'
-  |  'driver-analysis'
-  |  'drop-photo'
-  |  'drop-photo--filled'
-  |  'DVR'
-  |  'earth'
-  |  'earth--americas'
-  |  'earth--americas--filled'
-  |  'earth--europe-africa'
-  |  'earth--europe-africa--filled'
-  |  'earth--filled'
-  |  'earth--southeast-asia'
-  |  'earth--southeast-asia--filled'
-  |  'edge-cluster'
-  |  'edge-device'
-  |  'edge-enhancement'
-  |  'edge-enhancement--01'
-  |  'edge-enhancement--02'
-  |  'edge-enhancement--03'
-  |  'edge-node'
-  |  'edge-service'
-  |  'edit'
-  |  'edit--off'
-  |  'edit-filter'
-  |  'edt-loop'
-  |  'education'
-  |  'email'
-  |  'email--new'
-  |  'enterprise'
-  |  'erase'
-  |  'erase--3D'
-  |  'error'
-  |  'error--filled'
-  |  'error--outline'
-  |  'event'
-  |  'event--schedule'
-  |  'events'
-  |  'events--alt'
-  |  'exam-mode'
-  |  'exit'
-  |  'expand-all'
-  |  'expand-categories'
-  |  'export'
-  |  'eyedropper'
-  |  'face--activated'
-  |  'face--activated--add'
-  |  'face--activated--filled'
-  |  'face--add'
-  |  'face--cool'
-  |  'face--dissatisfied'
-  |  'face--dissatisfied--filled'
-  |  'face--dizzy'
-  |  'face--dizzy--filled'
-  |  'face--mask'
-  |  'face--neutral'
-  |  'face--neutral--filled'
-  |  'face--pending'
-  |  'face--pending--filled'
-  |  'face--satisfied'
-  |  'face--satisfied--filled'
-  |  'face--wink'
-  |  'face--wink--filled'
-  |  'factor'
-  |  'fade'
-  |  'favorite'
-  |  'favorite--filled'
-  |  'fetch-upload'
-  |  'fetch-upload--cloud'
-  |  'filter'
-  |  'filter--edit'
-  |  'filter--remove'
-  |  'filter--reset'
-  |  'finance'
-  |  'fingerprint-recognition'
-  |  'fire'
-  |  'fish'
-  |  'fish--multiple'
-  |  'fit-to-screen'
-  |  'flag'
-  |  'flag--filled'
-  |  'flagging-taxi'
-  |  'flash'
-  |  'flash--filled'
-  |  'flash--off'
-  |  'flash--off--filled'
-  |  'flow'
-  |  'flow--connection'
-  |  'flow--data'
-  |  'flow--stream'
-  |  'flow--stream--reference'
-  |  'fog'
-  |  'folder'
-  |  'folder--add'
-  |  'folder--details'
-  |  'folder--details--reference'
-  |  'folder--off'
-  |  'folder--shared'
-  |  'folders'
-  |  'fork'
-  |  'forum'
-  |  'forward--10'
-  |  'forward--30'
-  |  'forward--5'
-  |  'fragile'
-  |  'fruit-bowl'
-  |  'function'
-  |  'function-math'
-  |  'fusion-blender'
-  |  'game--console'
-  |  'game--wireless'
-  |  'gamification'
-  |  'gas-station'
-  |  'gender--female'
-  |  'gender--male'
-  |  'generate-pdf'
-  |  'GIF'
-  |  'gift'
-  |  'globe'
-  |  'gradient'
-  |  'graphical-data-flow'
-  |  'grid'
-  |  'group'
-  |  'H'
-  |  'hail'
-  |  'hanging-protocol'
-  |  'harbor'
-  |  'hashtag'
-  |  'haze'
-  |  'haze--night'
-  |  'HD'
-  |  'HD--filled'
-  |  'HDR'
-  |  'headphones'
-  |  'headset'
-  |  'health-cross'
-  |  'hearing'
-  |  'heat-map'
-  |  'heat-map--02'
-  |  'heat-map--03'
-  |  'heat-map--stocks'
-  |  'helicopter'
-  |  'help'
-  |  'help--filled'
-  |  'help-desk'
-  |  'hinton-plot'
-  |  'hole-filling'
-  |  'hole-filling--cursor'
-  |  'home'
-  |  'hospital'
-  |  'hospital-bed'
-  |  'hotel'
-  |  'hourglass'
-  |  'HTML'
-  |  'HTML--reference'
-  |  'HTTP'
-  |  'humidity'
-  |  'humidity--alt'
-  |  'hurricane'
-  |  'hybrid-networking'
-  |  'ibm-cloud'
-  |  'ibm-security'
-  |  'iCA-2D'
-  |  'iD'
-  |  'idea'
-  |  'identification'
-  |  'image'
-  |  'image--medical'
-  |  'image--reference'
-  |  'image--search'
-  |  'improve-relevance'
-  |  'in-progress'
-  |  'in-progress--error'
-  |  'in-progress--warning'
-  |  'incomplete'
-  |  'incomplete--cancel'
-  |  'incomplete--error'
-  |  'incomplete--warning'
-  |  'increase-level'
-  |  'industry'
-  |  'information'
-  |  'information--filled'
-  |  'information--square'
-  |  'information--square--filled'
-  |  'insert'
-  |  'insert--page'
-  |  'integration'
-  |  'interactions'
-  |  'interactive-segmentation-cursor'
-  |  'inventory-management'
-  |  'iot--connect'
-  |  'iot--platform'
-  |  'ISO'
-  |  'ISO--filled'
-  |  'ISO--outline'
-  |  'join--inner'
-  |  'join--left'
-  |  'join--outer'
-  |  'join--right'
-  |  'JPG'
-  |  'JSON'
-  |  'JSON--reference'
-  |  'jump-link'
-  |  'keep-dry'
-  |  'keyboard'
-  |  'language'
-  |  'laptop'
-  |  'lasso'
-  |  'launch'
-  |  'launch-study--1'
-  |  'launch-study--2'
-  |  'launch-study--3'
-  |  'legend'
-  |  'letter--Aa'
-  |  'letter--Bb'
-  |  'letter--Cc'
-  |  'letter--Dd'
-  |  'letter--Ee'
-  |  'letter--Ff'
-  |  'letter--Gg'
-  |  'letter--Hh'
-  |  'letter--Ii'
-  |  'letter--Jj'
-  |  'letter--Kk'
-  |  'letter--Ll'
-  |  'letter--Mm'
-  |  'letter--Nn'
-  |  'letter--Oo'
-  |  'letter--Pp'
-  |  'letter--Qq'
-  |  'letter--Rr'
-  |  'letter--Ss'
-  |  'letter--Tt'
-  |  'letter--Uu'
-  |  'letter--Vv'
-  |  'letter--Ww'
-  |  'letter--Xx'
-  |  'letter--Yy'
-  |  'letter--Zz'
-  |  'light'
-  |  'light--filled'
-  |  'lightning'
-  |  'link'
-  |  'list'
-  |  'list--boxes'
-  |  'list--bulleted'
-  |  'list--checked'
-  |  'list--dropdown'
-  |  'list--numbered'
-  |  'location'
-  |  'locked'
-  |  'login'
-  |  'logo--digg'
-  |  'logo--facebook'
-  |  'logo--flickr'
-  |  'logo--github'
-  |  'logo--glassdoor'
-  |  'logo--instagram'
-  |  'logo--jupyter'
-  |  'logo--keybase'
-  |  'logo--linkedin'
-  |  'logo--livestream'
-  |  'logo--medium'
-  |  'logo--openshift'
-  |  'logo--pinterest'
-  |  'logo--python'
-  |  'logo--quora'
-  |  'logo--r-script'
-  |  'logo--skype'
-  |  'logo--slack'
-  |  'logo--snapchat'
-  |  'logo--tumblr'
-  |  'logo--twitter'
-  |  'logo--vmware'
-  |  'logo--xing'
-  |  'logo--yelp'
-  |  'logo--youtube'
-  |  'logout'
-  |  'loop'
-  |  'mac--command'
-  |  'mac--option'
-  |  'mac--shift'
-  |  'machine-learning'
-  |  'machine-learning-model'
-  |  'magic-wand'
-  |  'magic-wand--filled'
-  |  'magnify'
-  |  'mail--all'
-  |  'mail--reply'
-  |  'mammogram'
-  |  'manage-protection'
-  |  'managed-solutions'
-  |  'map'
-  |  'math-curve'
-  |  'matrix'
-  |  'maximize'
-  |  'medication'
-  |  'medication--alert'
-  |  'medication--reminder'
-  |  'menu'
-  |  'meter'
-  |  'meter--alt'
-  |  'microphone'
-  |  'microphone--filled'
-  |  'microphone--off'
-  |  'microphone--off--filled'
-  |  'microscope'
-  |  'migrate'
-  |  'migrate--alt'
-  |  'milestone'
-  |  'minimize'
-  |  'misuse'
-  |  'misuse--alt'
-  |  'misuse--outline'
-  |  'mixed-rain-hail'
-  |  'mobile'
-  |  'mobile--add'
-  |  'mobile--audio'
-  |  'mobile--check'
-  |  'mobile--download'
-  |  'mobile--landscape'
-  |  'model'
-  |  'model--alt'
-  |  'model--reference'
-  |  'model-builder'
-  |  'model-builder--reference'
-  |  'money'
-  |  'monument'
-  |  'moon'
-  |  'mostly-cloudy'
-  |  'mostly-cloudy--night'
-  |  'mountain'
-  |  'MOV'
-  |  'move'
-  |  'movement'
-  |  'MP3'
-  |  'MP4'
-  |  'MPEG'
-  |  'MPG2'
-  |  'music'
-  |  'network--1'
-  |  'network--2'
-  |  'network--3'
-  |  'network--3--reference'
-  |  'network--4'
-  |  'new-tab'
-  |  'next--filled'
-  |  'next--outline'
-  |  'no-image'
-  |  'no-ticket'
-  |  'nominal'
-  |  'nominate'
-  |  'noodle-bowl'
-  |  'not-available'
-  |  'not-sent'
-  |  'not-sent--filled'
-  |  'notebook'
-  |  'notebook--reference'
-  |  'notification'
-  |  'notification--filled'
-  |  'notification--new'
-  |  'notification--off'
-  |  'notification--off--filled'
-  |  'number--0'
-  |  'number--1'
-  |  'number--2'
-  |  'number--3'
-  |  'number--4'
-  |  'number--5'
-  |  'number--6'
-  |  'number--7'
-  |  'number--8'
-  |  'number--9'
-  |  'number--small--0'
-  |  'number--small--1'
-  |  'number--small--2'
-  |  'number--small--3'
-  |  'number--small--4'
-  |  'number--small--5'
-  |  'number--small--6'
-  |  'number--small--7'
-  |  'number--small--8'
-  |  'number--small--9'
-  |  'object-storage'
-  |  'omega'
-  |  'opacity'
-  |  'open-panel--bottom'
-  |  'open-panel--filled--bottom'
-  |  'open-panel--filled--left'
-  |  'open-panel--filled--right'
-  |  'open-panel--filled--top'
-  |  'open-panel--left'
-  |  'open-panel--right'
-  |  'open-panel--top'
-  |  'operation'
-  |  'operation--gauge'
-  |  'operation--if'
-  |  'operations--field'
-  |  'operations--record'
-  |  'ordinal'
-  |  'overflow-menu--horizontal'
-  |  'overflow-menu--vertical'
-  |  'package'
-  |  'page--first'
-  |  'page--last'
-  |  'page-scroll'
-  |  'paint-brush'
-  |  'paint-brush--alt'
-  |  'pan--horizontal'
-  |  'pan--vertical'
-  |  'panel-expansion'
-  |  'paragraph'
-  |  'parent-child'
-  |  'partly-cloudy'
-  |  'partly-cloudy--night'
-  |  'partnership'
-  |  'password'
-  |  'paste'
-  |  'pause'
-  |  'pause--filled'
-  |  'pause--outline'
-  |  'pause--outline--filled'
-  |  'PDF'
-  |  'PDF--reference'
-  |  'pedestrian'
-  |  'pedestrian-child'
-  |  'pending'
-  |  'pending--filled'
-  |  'percentage'
-  |  'percentage--filled'
-  |  'person'
-  |  'person--favorite'
-  |  'pet-image--B'
-  |  'pet-image--O'
-  |  'phone'
-  |  'phone--filled'
-  |  'phone--off'
-  |  'phone--off--filled'
-  |  'phrase-sentiment'
-  |  'picnic-area'
-  |  'pills'
-  |  'pills--add'
-  |  'pills--subtract'
-  |  'pin'
-  |  'pin--filled'
-  |  'plane'
-  |  'play'
-  |  'play--filled'
-  |  'play--filled--alt'
-  |  'play--outline'
-  |  'play--outline--filled'
-  |  'playlist'
-  |  'plug'
-  |  'plug--filled'
-  |  'PNG'
-  |  'pointer-text'
-  |  'police'
-  |  'policy'
-  |  'popup'
-  |  'portfolio'
-  |  'power'
-  |  'PPT'
-  |  'presentation-file'
-  |  'pressure'
-  |  'pressure--filled'
-  |  'previous--filled'
-  |  'previous--outline'
-  |  'printer'
-  |  'product'
-  |  'purchase'
-  |  'qq-plot'
-  |  'qr-code'
-  |  'quadrant-plot'
-  |  'query-queue'
-  |  'queued'
-  |  'quotes'
-  |  'radio'
-  |  'radio-button'
-  |  'radio-button--checked'
-  |  'rain'
-  |  'rain--drizzle'
-  |  'rain--heavy'
-  |  'rain--scattered'
-  |  'rain--scattered--night'
-  |  'rain-drop'
-  |  'RAW'
-  |  'receipt'
-  |  'recently-viewed'
-  |  'recommend'
-  |  'recording'
-  |  'recording--filled'
-  |  'recording--filled--alt'
-  |  'redo'
-  |  'reflect--horizontal'
-  |  'reflect--vertical'
-  |  'region-analysis--area'
-  |  'region-analysis--volume'
-  |  'registration'
-  |  'reminder'
-  |  'reminder--medical'
-  |  'renew'
-  |  'repeat'
-  |  'repeat--one'
-  |  'reply'
-  |  'report'
-  |  'report--data'
-  |  'request-quote'
-  |  'research--bloch-sphere'
-  |  'research--hinton-plot'
-  |  'research--matrix'
-  |  'reset'
-  |  'reset--alt'
-  |  'restart'
-  |  'restaurant'
-  |  'restaurant--fine'
-  |  'rewind--10'
-  |  'rewind--30'
-  |  'rewind--5'
-  |  'roadmap'
-  |  'rocket'
-  |  'rotate'
-  |  'rotate--180'
-  |  'rotate--360'
-  |  'rotate--clockwise'
-  |  'rotate--clockwise--alt'
-  |  'rotate--clockwise--alt--filled'
-  |  'rotate--clockwise--filled'
-  |  'rotate--counterclockwise'
-  |  'rotate--counterclockwise--alt'
-  |  'rotate--counterclockwise--alt--filled'
-  |  'rotate--counterclockwise--filled'
-  |  'row'
-  |  'row--collapse'
-  |  'row--expand'
-  |  'rss'
-  |  'rule'
-  |  'ruler'
-  |  'ruler--alt'
-  |  'run'
-  |  'S'
-  |  'S--alt'
-  |  'sankey-diagram'
-  |  'save'
-  |  'save--annotation'
-  |  'save--image'
-  |  'save--model'
-  |  'save--series'
-  |  'scale'
-  |  'scalpel'
-  |  'scalpel--cursor'
-  |  'scalpel--lasso'
-  |  'scalpel--select'
-  |  'scan'
-  |  'scatter-matrix'
-  |  'schematics'
-  |  'scooter'
-  |  'scooter--front'
-  |  'screen'
-  |  'screen--off'
-  |  'script'
-  |  'script--reference'
-  |  'SDK'
-  |  'search'
-  |  'security'
-  |  'select--01'
-  |  'select--02'
-  |  'send'
-  |  'send--alt'
-  |  'send--alt--filled'
-  |  'send--filled'
-  |  'service-desk'
-  |  'settings'
-  |  'settings--adjust'
-  |  'share'
-  |  'share-knowledge'
-  |  'shopping--bag'
-  |  'shopping--cart'
-  |  'shopping--catalog'
-  |  'shrink-screen'
-  |  'shrink-screen--filled'
-  |  'shuffle'
-  |  'shuttle'
-  |  'sigma'
-  |  'signal-strength'
-  |  'skill-level'
-  |  'skill-level--advanced'
-  |  'skill-level--basic'
-  |  'skill-level--intermediate'
-  |  'skip--back'
-  |  'skip--back--filled'
-  |  'skip--back--outline'
-  |  'skip--back--outline--filled'
-  |  'skip--back--outline--solid'
-  |  'skip--back--solid--filled'
-  |  'skip--forward'
-  |  'skip--forward--filled'
-  |  'skip--forward--outline'
-  |  'skip--forward--outline--filled'
-  |  'skip--forward--outline--solid'
-  |  'skip--forward--solid--filled'
-  |  'sleet'
-  |  'smell'
-  |  'smoke'
-  |  'smoothing'
-  |  'smoothing--cursor'
-  |  'snooze'
-  |  'snow'
-  |  'snow--blizzard'
-  |  'snow--heavy'
-  |  'snow--scattered'
-  |  'snow--scattered--night'
-  |  'snowflake'
-  |  'soccer'
-  |  'spell-check'
-  |  'spine-label'
-  |  'split'
-  |  'split--discard'
-  |  'split-screen'
-  |  'spray-paint'
-  |  'sprout'
-  |  'SQL'
-  |  'stack-limitation'
-  |  'stacked-move'
-  |  'stacked-scrolling--1'
-  |  'stacked-scrolling--2'
-  |  'stamp'
-  |  'star'
-  |  'star--filled'
-  |  'star--half'
-  |  'star--review'
-  |  'stem-leaf-plot'
-  |  'stethoscope'
-  |  'stop'
-  |  'stop--filled'
-  |  'stop--filled--alt'
-  |  'stop--outline'
-  |  'stop--outline--filled'
-  |  'store'
-  |  'strawberry'
-  |  'stress-breath-editor'
-  |  'string-integer'
-  |  'string-text'
-  |  'study--next'
-  |  'study--previous'
-  |  'study--skip'
-  |  'sub-volume'
-  |  'subtract'
-  |  'subtract--alt'
-  |  'summary--KPI'
-  |  'sun'
-  |  'sunny'
-  |  'sunrise'
-  |  'sunset'
-  |  'SVG'
-  |  'swim'
-  |  'switcher'
-  |  'sys-provision'
-  |  'T'
-  |  'T--alt'
-  |  'table'
-  |  'table--split'
-  |  'table-of-contents'
-  |  'tablet'
-  |  'tablet--landscape'
-  |  'tag'
-  |  'tag--edit'
-  |  'tag--group'
-  |  'task'
-  |  'task--view'
-  |  'taste'
-  |  'taxi'
-  |  'temperature'
-  |  'temperature--frigid'
-  |  'temperature--hot'
-  |  'template'
-  |  'tennis'
-  |  'tennis-ball'
-  |  'term'
-  |  'terminal'
-  |  'text--align--center'
-  |  'text--align--justify'
-  |  'text--align--left'
-  |  'text--align--right'
-  |  'text--all-caps'
-  |  'text--bold'
-  |  'text--color'
-  |  'text--creation'
-  |  'text--fill'
-  |  'text--highlight'
-  |  'text--indent'
-  |  'text--indent--less'
-  |  'text--indent--more'
-  |  'text--italic'
-  |  'text--kerning'
-  |  'text--leading'
-  |  'text--line-spacing'
-  |  'text--new-line'
-  |  'text--scale'
-  |  'text--selection'
-  |  'text--small-caps'
-  |  'text--strikethrough'
-  |  'text--subscript'
-  |  'text--superscript'
-  |  'text--tracking'
-  |  'text--underline'
-  |  'text--vertical-alignment'
-  |  'text--wrap'
-  |  'text-annotation-toggle'
-  |  'text-link'
-  |  'text-link--analysis'
-  |  'text-mining'
-  |  'text-mining--applier'
-  |  'theater'
-  |  'this-side-up'
-  |  'threshold'
-  |  'thumbnail--1'
-  |  'thumbnail--2'
-  |  'thumbnail-preview'
-  |  'thumbs-down'
-  |  'thumbs-up'
-  |  'thunderstorm'
-  |  'thunderstorm--scattered'
-  |  'thunderstorm--scattered--night'
-  |  'thunderstorm--severe'
-  |  'thunderstorm--strong'
-  |  'ticket'
-  |  'TIF'
-  |  'time'
-  |  'time-plot'
-  |  'timer'
-  |  'tool-box'
-  |  'tools'
-  |  'tornado'
-  |  'touch--1'
-  |  'touch--2'
-  |  'touch--interaction'
-  |  'train'
-  |  'tram'
-  |  'transgender'
-  |  'translate'
-  |  'trash-can'
-  |  'tree'
-  |  'tree-view'
-  |  'tree-view--alt'
-  |  'trophy'
-  |  'trophy--filled'
-  |  'tropical-storm'
-  |  'TSV'
-  |  'two-person-lift'
-  |  'TXT'
-  |  'TXT--reference'
-  |  'type-pattern'
-  |  'types'
-  |  'U1'
-  |  'U2'
-  |  'U3'
-  |  'umbrella'
-  |  'undefined'
-  |  'undefined--filled'
-  |  'undo'
-  |  'unknown'
-  |  'unknown--filled'
-  |  'unlink'
-  |  'unlocked'
-  |  'up-to-top'
-  |  'upgrade'
-  |  'upload'
-  |  'USB'
-  |  'user'
-  |  'user--activity'
-  |  'user--admin'
-  |  'user--avatar'
-  |  'user--avatar--filled'
-  |  'user--avatar--filled--alt'
-  |  'user--certification'
-  |  'user--data'
-  |  'user--favorite'
-  |  'user--favorite--alt'
-  |  'user--favorite--alt--filled'
-  |  'user--filled'
-  |  'user--follow'
-  |  'user--identification'
-  |  'user--multiple'
-  |  'user--online'
-  |  'user--profile'
-  |  'user--role'
-  |  'user--simulation'
-  |  'user--speaker'
-  |  'user--x-ray'
-  |  'user-profile--alt'
-  |  'uv-index'
-  |  'uv-index--filled'
-  |  'van'
-  |  'video'
-  |  'video--add'
-  |  'video--chat'
-  |  'video--filled'
-  |  'video--off'
-  |  'video--off--filled'
-  |  'view'
-  |  'view--filled'
-  |  'view--mode-1'
-  |  'view--mode-2'
-  |  'view--off'
-  |  'view--off--filled'
-  |  'virtual-column'
-  |  'virtual-column--key'
-  |  'virtual-machine'
-  |  'virtual-private-cloud'
-  |  'virtual-private-cloud--alt'
-  |  'visual-recognition'
-  |  'vmdk-disk'
-  |  'voicemail'
-  |  'volume--down'
-  |  'volume--down--filled'
-  |  'volume--mute'
-  |  'volume--mute--filled'
-  |  'volume--up'
-  |  'volume--up--filled'
-  |  'VPN'
-  |  'wallet'
-  |  'warning'
-  |  'warning--alt'
-  |  'warning--alt--filled'
-  |  'warning--alt-inverted'
-  |  'warning--alt-inverted--filled'
-  |  'warning--filled'
-  |  'warning-square'
-  |  'warning-square--filled'
-  |  'watch'
-  |  'watson'
-  |  'watson--machine-learning'
-  |  'websheet'
-  |  'wheat'
-  |  'wifi'
-  |  'wifi--off'
-  |  'wikis'
-  |  'window--auto'
-  |  'window--base'
-  |  'window--overlay'
-  |  'window--preset'
-  |  'windy'
-  |  'windy--dust'
-  |  'windy--snow'
-  |  'windy--strong'
-  |  'wintry-mix'
-  |  'wireless-checkout'
-  |  'WMV'
-  |  'word-cloud'
-  |  'workspace'
-  |  'workspace--import'
-  |  'worship'
-  |  'worship--christian'
-  |  'worship--jewish'
-  |  'worship--muslim'
-  |  'X'
-  |  'x-axis'
-  |  'XLS'
-  |  'XML'
-  |  'Y'
-  |  'y-axis'
-  |  'Z'
-  |  'z-axis'
-  |  'ZIP'
-  |  'ZIP--reference'
-  |  'zoom--in'
-  |  'zoom--out'
-  |  'zoom--reset'
-  |  'zoom-pan';
+  | '3D-Cursor'
+  | '3D-cursor--alt'
+  | '3D-curve--auto-colon'
+  | '3D-curve--auto-vessels'
+  | '3D-curve--manual'
+  | '3D-iCa'
+  | '3D-MPR-Toggle'
+  | '3D-print-mesh'
+  | '3D-software'
+  | '3rd-party-connected'
+  | '4K'
+  | '4K--filled'
+  | 'accessibility'
+  | 'accessibility--alt'
+  | 'accessibility--color'
+  | 'accessibility--color--filled'
+  | 'account'
+  | 'activity'
+  | 'add'
+  | 'add--alt'
+  | 'add--filled'
+  | 'add-comment'
+  | 'ai-results'
+  | 'ai-results--high'
+  | 'ai-results--low'
+  | 'ai-results--medium'
+  | 'ai-results--urgent'
+  | 'ai-results--very-high'
+  | 'ai-status'
+  | 'ai-status--complete'
+  | 'ai-status--failed'
+  | 'ai-status--in-progress'
+  | 'ai-status--queued'
+  | 'ai-status--rejected'
+  | 'alarm'
+  | 'alarm--add'
+  | 'alarm--subtract'
+  | 'align--horizontal-center'
+  | 'align--horizontal-left'
+  | 'align--horizontal-right'
+  | 'align--vertical-bottom'
+  | 'align--vertical-center'
+  | 'align--vertical-top'
+  | 'analytics'
+  | 'analytics--reference'
+  | 'angle'
+  | 'annotation-visibility'
+  | 'aperture'
+  | 'api'
+  | 'API--1'
+  | 'app'
+  | 'app-connectivity'
+  | 'app-switcher'
+  | 'apple'
+  | 'application'
+  | 'apps'
+  | 'archive'
+  | 'arrival'
+  | 'arrow--annotation'
+  | 'arrow--down'
+  | 'arrow--down-left'
+  | 'arrow--down-right'
+  | 'arrow--left'
+  | 'arrow--right'
+  | 'arrow--up'
+  | 'arrow--up-left'
+  | 'arrow--up-right'
+  | 'arrow-shift-down'
+  | 'arrows'
+  | 'arrows--horizontal'
+  | 'arrows--vertical'
+  | 'asleep'
+  | 'asleep--filled'
+  | 'asset'
+  | 'at'
+  | 'attachment'
+  | 'audio-console'
+  | 'augmented-reality'
+  | 'auto-scroll'
+  | 'automatic'
+  | 'awake'
+  | 'back-to-top'
+  | 'badge'
+  | 'bar'
+  | 'barrier'
+  | 'basketball'
+  | 'battery--charging'
+  | 'battery--empty'
+  | 'battery--full'
+  | 'battery--half'
+  | 'battery--low'
+  | 'battery--quarter'
+  | 'bee'
+  | 'bicycle'
+  | 'binoculars'
+  | 'bloch-sphere'
+  | 'blockchain'
+  | 'blog'
+  | 'bluetooth'
+  | 'bluetooth--off'
+  | 'bookmark'
+  | 'bookmark--filled'
+  | 'bot'
+  | 'box'
+  | 'box-plot'
+  | 'branch'
+  | 'brightness-contrast'
+  | 'brush-freehand'
+  | 'brush-polygon'
+  | 'building'
+  | 'building--insights-1'
+  | 'building--insights-2'
+  | 'building--insights-3'
+  | 'bullhorn'
+  | 'bus'
+  | 'CAD'
+  | 'cafe'
+  | 'calculator'
+  | 'calculator--check'
+  | 'calendar'
+  | 'calendar--heat-map'
+  | 'calendar--settings'
+  | 'calibrate'
+  | 'camera'
+  | 'camera--action'
+  | 'campsite'
+  | 'car'
+  | 'car--front'
+  | 'carbon'
+  | 'caret--down'
+  | 'caret--left'
+  | 'caret--right'
+  | 'caret--sort'
+  | 'caret--sort--down'
+  | 'caret--sort--up'
+  | 'caret--up'
+  | 'carousel--horizontal'
+  | 'carousel--vertical'
+  | 'catalog'
+  | 'categories'
+  | 'category'
+  | 'category--add'
+  | 'category--and'
+  | 'category--new'
+  | 'category--new-each'
+  | 'ccX'
+  | 'cd--archive'
+  | 'cd--create-archive'
+  | 'cd--create-exchange'
+  | 'CDA'
+  | 'center--circle'
+  | 'center--square'
+  | 'certificate'
+  | 'certificate--check'
+  | 'change-catalog'
+  | 'character-patterns'
+  | 'charging-station'
+  | 'charging-station--filled'
+  | 'chart--3D'
+  | 'chart--area'
+  | 'chart--area-smooth'
+  | 'chart--area-stepper'
+  | 'chart--bar'
+  | 'chart--bar-floating'
+  | 'chart--bar-overlay'
+  | 'chart--bar-stacked'
+  | 'chart--bar-target'
+  | 'chart--bubble'
+  | 'chart--bullet'
+  | 'chart--candlestick'
+  | 'chart--cluster-bar'
+  | 'chart--column'
+  | 'chart--column-floating'
+  | 'chart--column-target'
+  | 'chart--combo'
+  | 'chart--combo-stacked'
+  | 'chart--custom'
+  | 'chart--error-bar'
+  | 'chart--error-bar--alt'
+  | 'chart--evaluation'
+  | 'chart--high-low'
+  | 'chart--histogram'
+  | 'chart--line'
+  | 'chart--line--data'
+  | 'chart--line-smooth'
+  | 'chart--marimekko'
+  | 'chart--multi-line'
+  | 'chart--multitype'
+  | 'chart--network'
+  | 'chart--parallel'
+  | 'chart--pie'
+  | 'chart--point'
+  | 'chart--population'
+  | 'chart--radar'
+  | 'chart--radial'
+  | 'chart--relationship'
+  | 'chart--ring'
+  | 'chart--river'
+  | 'chart--rose'
+  | 'chart--scatter'
+  | 'chart--stacked'
+  | 'chart--stepper'
+  | 'chart--sunburst'
+  | 'chart--t-sne'
+  | 'chart--treemap'
+  | 'chart--venn-diagram'
+  | 'chart--waterfall'
+  | 'chat'
+  | 'chat-bot'
+  | 'checkbox'
+  | 'checkbox--checked'
+  | 'checkbox--checked--filled'
+  | 'checkbox--indeterminate'
+  | 'checkbox--indeterminate--filled'
+  | 'checkbox--undeterminate'
+  | 'checkbox--undeterminate--filled'
+  | 'checkmark'
+  | 'checkmark--filled'
+  | 'checkmark--filled--error'
+  | 'checkmark--filled--warning'
+  | 'checkmark--outline'
+  | 'checkmark--outline--error'
+  | 'checkmark--outline--warning'
+  | 'chemistry'
+  | 'chemistry--reference'
+  | 'chevron--down'
+  | 'chevron--left'
+  | 'chevron--mini'
+  | 'chevron--right'
+  | 'chevron--sort'
+  | 'chevron--sort--down'
+  | 'chevron--sort--up'
+  | 'chevron--up'
+  | 'chip'
+  | 'choices'
+  | 'circle--filled'
+  | 'circle-dash'
+  | 'circle-measurement'
+  | 'circle-packing'
+  | 'circuit-composer'
+  | 'classification'
+  | 'classifier--language'
+  | 'clean'
+  | 'close'
+  | 'close--filled'
+  | 'close--outline'
+  | 'closed-caption'
+  | 'closed-caption--alt'
+  | 'closed-caption--filled'
+  | 'cloud'
+  | 'cloud--data-ops'
+  | 'cloud--download'
+  | 'cloud--lightning'
+  | 'cloud--rain'
+  | 'cloud--snow'
+  | 'cloud--upload'
+  | 'cloud-app'
+  | 'cloud-foundry--1'
+  | 'cloud-foundry--2'
+  | 'cloud-satellite'
+  | 'cloudy'
+  | 'cobb-angle'
+  | 'code'
+  | 'code--reference'
+  | 'cognitive'
+  | 'collaborate'
+  | 'collapse-all'
+  | 'collapse-categories'
+  | 'color-palette'
+  | 'color-switch'
+  | 'column'
+  | 'compare'
+  | 'compass'
+  | 'composer-edit'
+  | 'concept'
+  | 'connect'
+  | 'connection-signal'
+  | 'container-software'
+  | 'content-view'
+  | 'contour-finding'
+  | 'contrast'
+  | 'copy'
+  | 'copy--file'
+  | 'corn'
+  | 'corner'
+  | 'coronavirus'
+  | 'course'
+  | 'covariate'
+  | 'credentials'
+  | 'crop'
+  | 'cross-reference'
+  | 'cross-tab'
+  | 'CSV'
+  | 'cU1'
+  | 'cU3'
+  | 'cube-view'
+  | 'cursor--1'
+  | 'cursor--2'
+  | 'cut'
+  | 'cut-in-half'
+  | 'cY'
+  | 'cyclist'
+  | 'cZ'
+  | 'dashboard'
+  | 'dashboard--reference'
+  | 'data--1'
+  | 'data--2'
+  | 'data--base'
+  | 'data--base--alt'
+  | 'data--check'
+  | 'data--connected'
+  | 'data--error'
+  | 'data--reference'
+  | 'data--set'
+  | 'data--structured'
+  | 'data--unstructured'
+  | 'data-class'
+  | 'data-player'
+  | 'data-refinery'
+  | 'data-refinery--reference'
+  | 'data-share'
+  | 'data-table'
+  | 'data-table--reference'
+  | 'data-vis--1'
+  | 'data-vis--2'
+  | 'data-vis--3'
+  | 'data-vis--4'
+  | 'datastore'
+  | 'debug'
+  | 'decision-tree'
+  | 'delete'
+  | 'delivery-truck'
+  | 'denominate'
+  | 'departure'
+  | 'deploy'
+  | 'deploy-rules'
+  | 'deployment-pattern'
+  | 'deployment-policy'
+  | 'development'
+  | 'devices'
+  | 'dew-point'
+  | 'dew-point--filled'
+  | 'diagram'
+  | 'diagram--reference'
+  | 'dicom--6000'
+  | 'dicom--overlay'
+  | 'direction--bear-right--01'
+  | 'direction--bear-right--01--filled'
+  | 'direction--bear-right--02'
+  | 'direction--bear-right--02--filled'
+  | 'direction--curve'
+  | 'direction--curve--filled'
+  | 'direction--merge'
+  | 'direction--merge--filled'
+  | 'direction--right--01'
+  | 'direction--right--01--filled'
+  | 'direction--right--02'
+  | 'direction--right--02--filled'
+  | 'direction--rotary--first-right'
+  | 'direction--rotary--first-right--filled'
+  | 'direction--rotary--right'
+  | 'direction--rotary--right--filled'
+  | 'direction--rotary--straight'
+  | 'direction--rotary--straight--filled'
+  | 'direction--sharp-turn'
+  | 'direction--sharp-turn--filled'
+  | 'direction--straight'
+  | 'direction--straight--filled'
+  | 'direction--straight--right'
+  | 'direction--straight--right--filled'
+  | 'direction--u-turn'
+  | 'direction--u-turn--filled'
+  | 'distribute--horizontal-center'
+  | 'distribute--horizontal-left'
+  | 'distribute--horizontal-right'
+  | 'distribute--vertical-bottom'
+  | 'distribute--vertical-center'
+  | 'distribute--vertical-top'
+  | 'dna'
+  | 'DOC'
+  | 'document'
+  | 'document--add'
+  | 'document--blank'
+  | 'document--download'
+  | 'document--export'
+  | 'document--import'
+  | 'document--pdf'
+  | 'document--subtract'
+  | 'document--tasks'
+  | 'document--unknown'
+  | 'document--view'
+  | 'document--word-processor'
+  | 'document--word-processor--reference'
+  | 'document-sentiment'
+  | 'dot-mark'
+  | 'double-integer'
+  | 'down-to-bottom'
+  | 'download'
+  | 'download-study'
+  | 'drag--horizontal'
+  | 'drag--vertical'
+  | 'draggable'
+  | 'draw'
+  | 'driver-analysis'
+  | 'drop-photo'
+  | 'drop-photo--filled'
+  | 'DVR'
+  | 'earth'
+  | 'earth--americas'
+  | 'earth--americas--filled'
+  | 'earth--europe-africa'
+  | 'earth--europe-africa--filled'
+  | 'earth--filled'
+  | 'earth--southeast-asia'
+  | 'earth--southeast-asia--filled'
+  | 'edge-cluster'
+  | 'edge-device'
+  | 'edge-enhancement'
+  | 'edge-enhancement--01'
+  | 'edge-enhancement--02'
+  | 'edge-enhancement--03'
+  | 'edge-node'
+  | 'edge-service'
+  | 'edit'
+  | 'edit--off'
+  | 'edit-filter'
+  | 'edt-loop'
+  | 'education'
+  | 'email'
+  | 'email--new'
+  | 'enterprise'
+  | 'erase'
+  | 'erase--3D'
+  | 'error'
+  | 'error--filled'
+  | 'error--outline'
+  | 'event'
+  | 'event--schedule'
+  | 'events'
+  | 'events--alt'
+  | 'exam-mode'
+  | 'exit'
+  | 'expand-all'
+  | 'expand-categories'
+  | 'export'
+  | 'eyedropper'
+  | 'face--activated'
+  | 'face--activated--add'
+  | 'face--activated--filled'
+  | 'face--add'
+  | 'face--cool'
+  | 'face--dissatisfied'
+  | 'face--dissatisfied--filled'
+  | 'face--dizzy'
+  | 'face--dizzy--filled'
+  | 'face--mask'
+  | 'face--neutral'
+  | 'face--neutral--filled'
+  | 'face--pending'
+  | 'face--pending--filled'
+  | 'face--satisfied'
+  | 'face--satisfied--filled'
+  | 'face--wink'
+  | 'face--wink--filled'
+  | 'factor'
+  | 'fade'
+  | 'favorite'
+  | 'favorite--filled'
+  | 'fetch-upload'
+  | 'fetch-upload--cloud'
+  | 'filter'
+  | 'filter--edit'
+  | 'filter--remove'
+  | 'filter--reset'
+  | 'finance'
+  | 'fingerprint-recognition'
+  | 'fire'
+  | 'fish'
+  | 'fish--multiple'
+  | 'fit-to-screen'
+  | 'flag'
+  | 'flag--filled'
+  | 'flagging-taxi'
+  | 'flash'
+  | 'flash--filled'
+  | 'flash--off'
+  | 'flash--off--filled'
+  | 'flow'
+  | 'flow--connection'
+  | 'flow--data'
+  | 'flow--stream'
+  | 'flow--stream--reference'
+  | 'fog'
+  | 'folder'
+  | 'folder--add'
+  | 'folder--details'
+  | 'folder--details--reference'
+  | 'folder--off'
+  | 'folder--shared'
+  | 'folders'
+  | 'fork'
+  | 'forum'
+  | 'forward--10'
+  | 'forward--30'
+  | 'forward--5'
+  | 'fragile'
+  | 'fruit-bowl'
+  | 'function'
+  | 'function-math'
+  | 'fusion-blender'
+  | 'game--console'
+  | 'game--wireless'
+  | 'gamification'
+  | 'gas-station'
+  | 'gender--female'
+  | 'gender--male'
+  | 'generate-pdf'
+  | 'GIF'
+  | 'gift'
+  | 'globe'
+  | 'gradient'
+  | 'graphical-data-flow'
+  | 'grid'
+  | 'group'
+  | 'H'
+  | 'hail'
+  | 'hanging-protocol'
+  | 'harbor'
+  | 'hashtag'
+  | 'haze'
+  | 'haze--night'
+  | 'HD'
+  | 'HD--filled'
+  | 'HDR'
+  | 'headphones'
+  | 'headset'
+  | 'health-cross'
+  | 'hearing'
+  | 'heat-map'
+  | 'heat-map--02'
+  | 'heat-map--03'
+  | 'heat-map--stocks'
+  | 'helicopter'
+  | 'help'
+  | 'help--filled'
+  | 'help-desk'
+  | 'hinton-plot'
+  | 'hole-filling'
+  | 'hole-filling--cursor'
+  | 'home'
+  | 'hospital'
+  | 'hospital-bed'
+  | 'hotel'
+  | 'hourglass'
+  | 'HTML'
+  | 'HTML--reference'
+  | 'HTTP'
+  | 'humidity'
+  | 'humidity--alt'
+  | 'hurricane'
+  | 'hybrid-networking'
+  | 'ibm-cloud'
+  | 'ibm-security'
+  | 'iCA-2D'
+  | 'iD'
+  | 'idea'
+  | 'identification'
+  | 'image'
+  | 'image--medical'
+  | 'image--reference'
+  | 'image--search'
+  | 'improve-relevance'
+  | 'in-progress'
+  | 'in-progress--error'
+  | 'in-progress--warning'
+  | 'incomplete'
+  | 'incomplete--cancel'
+  | 'incomplete--error'
+  | 'incomplete--warning'
+  | 'increase-level'
+  | 'industry'
+  | 'information'
+  | 'information--filled'
+  | 'information--square'
+  | 'information--square--filled'
+  | 'insert'
+  | 'insert--page'
+  | 'integration'
+  | 'interactions'
+  | 'interactive-segmentation-cursor'
+  | 'inventory-management'
+  | 'iot--connect'
+  | 'iot--platform'
+  | 'ISO'
+  | 'ISO--filled'
+  | 'ISO--outline'
+  | 'join--inner'
+  | 'join--left'
+  | 'join--outer'
+  | 'join--right'
+  | 'JPG'
+  | 'JSON'
+  | 'JSON--reference'
+  | 'jump-link'
+  | 'keep-dry'
+  | 'keyboard'
+  | 'language'
+  | 'laptop'
+  | 'lasso'
+  | 'launch'
+  | 'launch-study--1'
+  | 'launch-study--2'
+  | 'launch-study--3'
+  | 'legend'
+  | 'letter--Aa'
+  | 'letter--Bb'
+  | 'letter--Cc'
+  | 'letter--Dd'
+  | 'letter--Ee'
+  | 'letter--Ff'
+  | 'letter--Gg'
+  | 'letter--Hh'
+  | 'letter--Ii'
+  | 'letter--Jj'
+  | 'letter--Kk'
+  | 'letter--Ll'
+  | 'letter--Mm'
+  | 'letter--Nn'
+  | 'letter--Oo'
+  | 'letter--Pp'
+  | 'letter--Qq'
+  | 'letter--Rr'
+  | 'letter--Ss'
+  | 'letter--Tt'
+  | 'letter--Uu'
+  | 'letter--Vv'
+  | 'letter--Ww'
+  | 'letter--Xx'
+  | 'letter--Yy'
+  | 'letter--Zz'
+  | 'light'
+  | 'light--filled'
+  | 'lightning'
+  | 'link'
+  | 'list'
+  | 'list--boxes'
+  | 'list--bulleted'
+  | 'list--checked'
+  | 'list--dropdown'
+  | 'list--numbered'
+  | 'location'
+  | 'locked'
+  | 'login'
+  | 'logo--digg'
+  | 'logo--facebook'
+  | 'logo--flickr'
+  | 'logo--github'
+  | 'logo--glassdoor'
+  | 'logo--instagram'
+  | 'logo--jupyter'
+  | 'logo--keybase'
+  | 'logo--linkedin'
+  | 'logo--livestream'
+  | 'logo--medium'
+  | 'logo--openshift'
+  | 'logo--pinterest'
+  | 'logo--python'
+  | 'logo--quora'
+  | 'logo--r-script'
+  | 'logo--skype'
+  | 'logo--slack'
+  | 'logo--snapchat'
+  | 'logo--tumblr'
+  | 'logo--twitter'
+  | 'logo--vmware'
+  | 'logo--xing'
+  | 'logo--yelp'
+  | 'logo--youtube'
+  | 'logout'
+  | 'loop'
+  | 'mac--command'
+  | 'mac--option'
+  | 'mac--shift'
+  | 'machine-learning'
+  | 'machine-learning-model'
+  | 'magic-wand'
+  | 'magic-wand--filled'
+  | 'magnify'
+  | 'mail--all'
+  | 'mail--reply'
+  | 'mammogram'
+  | 'manage-protection'
+  | 'managed-solutions'
+  | 'map'
+  | 'math-curve'
+  | 'matrix'
+  | 'maximize'
+  | 'medication'
+  | 'medication--alert'
+  | 'medication--reminder'
+  | 'menu'
+  | 'meter'
+  | 'meter--alt'
+  | 'microphone'
+  | 'microphone--filled'
+  | 'microphone--off'
+  | 'microphone--off--filled'
+  | 'microscope'
+  | 'migrate'
+  | 'migrate--alt'
+  | 'milestone'
+  | 'minimize'
+  | 'misuse'
+  | 'misuse--alt'
+  | 'misuse--outline'
+  | 'mixed-rain-hail'
+  | 'mobile'
+  | 'mobile--add'
+  | 'mobile--audio'
+  | 'mobile--check'
+  | 'mobile--download'
+  | 'mobile--landscape'
+  | 'model'
+  | 'model--alt'
+  | 'model--reference'
+  | 'model-builder'
+  | 'model-builder--reference'
+  | 'money'
+  | 'monument'
+  | 'moon'
+  | 'mostly-cloudy'
+  | 'mostly-cloudy--night'
+  | 'mountain'
+  | 'MOV'
+  | 'move'
+  | 'movement'
+  | 'MP3'
+  | 'MP4'
+  | 'MPEG'
+  | 'MPG2'
+  | 'music'
+  | 'network--1'
+  | 'network--2'
+  | 'network--3'
+  | 'network--3--reference'
+  | 'network--4'
+  | 'new-tab'
+  | 'next--filled'
+  | 'next--outline'
+  | 'no-image'
+  | 'no-ticket'
+  | 'nominal'
+  | 'nominate'
+  | 'noodle-bowl'
+  | 'not-available'
+  | 'not-sent'
+  | 'not-sent--filled'
+  | 'notebook'
+  | 'notebook--reference'
+  | 'notification'
+  | 'notification--filled'
+  | 'notification--new'
+  | 'notification--off'
+  | 'notification--off--filled'
+  | 'number--0'
+  | 'number--1'
+  | 'number--2'
+  | 'number--3'
+  | 'number--4'
+  | 'number--5'
+  | 'number--6'
+  | 'number--7'
+  | 'number--8'
+  | 'number--9'
+  | 'number--small--0'
+  | 'number--small--1'
+  | 'number--small--2'
+  | 'number--small--3'
+  | 'number--small--4'
+  | 'number--small--5'
+  | 'number--small--6'
+  | 'number--small--7'
+  | 'number--small--8'
+  | 'number--small--9'
+  | 'object-storage'
+  | 'omega'
+  | 'opacity'
+  | 'open-panel--bottom'
+  | 'open-panel--filled--bottom'
+  | 'open-panel--filled--left'
+  | 'open-panel--filled--right'
+  | 'open-panel--filled--top'
+  | 'open-panel--left'
+  | 'open-panel--right'
+  | 'open-panel--top'
+  | 'operation'
+  | 'operation--gauge'
+  | 'operation--if'
+  | 'operations--field'
+  | 'operations--record'
+  | 'ordinal'
+  | 'overflow-menu--horizontal'
+  | 'overflow-menu--vertical'
+  | 'package'
+  | 'page--first'
+  | 'page--last'
+  | 'page-scroll'
+  | 'paint-brush'
+  | 'paint-brush--alt'
+  | 'pan--horizontal'
+  | 'pan--vertical'
+  | 'panel-expansion'
+  | 'paragraph'
+  | 'parent-child'
+  | 'partly-cloudy'
+  | 'partly-cloudy--night'
+  | 'partnership'
+  | 'password'
+  | 'paste'
+  | 'pause'
+  | 'pause--filled'
+  | 'pause--outline'
+  | 'pause--outline--filled'
+  | 'PDF'
+  | 'PDF--reference'
+  | 'pedestrian'
+  | 'pedestrian-child'
+  | 'pending'
+  | 'pending--filled'
+  | 'percentage'
+  | 'percentage--filled'
+  | 'person'
+  | 'person--favorite'
+  | 'pet-image--B'
+  | 'pet-image--O'
+  | 'phone'
+  | 'phone--filled'
+  | 'phone--off'
+  | 'phone--off--filled'
+  | 'phrase-sentiment'
+  | 'picnic-area'
+  | 'pills'
+  | 'pills--add'
+  | 'pills--subtract'
+  | 'pin'
+  | 'pin--filled'
+  | 'plane'
+  | 'play'
+  | 'play--filled'
+  | 'play--filled--alt'
+  | 'play--outline'
+  | 'play--outline--filled'
+  | 'playlist'
+  | 'plug'
+  | 'plug--filled'
+  | 'PNG'
+  | 'pointer-text'
+  | 'police'
+  | 'policy'
+  | 'popup'
+  | 'portfolio'
+  | 'power'
+  | 'PPT'
+  | 'presentation-file'
+  | 'pressure'
+  | 'pressure--filled'
+  | 'previous--filled'
+  | 'previous--outline'
+  | 'printer'
+  | 'product'
+  | 'purchase'
+  | 'qq-plot'
+  | 'qr-code'
+  | 'quadrant-plot'
+  | 'query-queue'
+  | 'queued'
+  | 'quotes'
+  | 'radio'
+  | 'radio-button'
+  | 'radio-button--checked'
+  | 'rain'
+  | 'rain--drizzle'
+  | 'rain--heavy'
+  | 'rain--scattered'
+  | 'rain--scattered--night'
+  | 'rain-drop'
+  | 'RAW'
+  | 'receipt'
+  | 'recently-viewed'
+  | 'recommend'
+  | 'recording'
+  | 'recording--filled'
+  | 'recording--filled--alt'
+  | 'redo'
+  | 'reflect--horizontal'
+  | 'reflect--vertical'
+  | 'region-analysis--area'
+  | 'region-analysis--volume'
+  | 'registration'
+  | 'reminder'
+  | 'reminder--medical'
+  | 'renew'
+  | 'repeat'
+  | 'repeat--one'
+  | 'reply'
+  | 'report'
+  | 'report--data'
+  | 'request-quote'
+  | 'research--bloch-sphere'
+  | 'research--hinton-plot'
+  | 'research--matrix'
+  | 'reset'
+  | 'reset--alt'
+  | 'restart'
+  | 'restaurant'
+  | 'restaurant--fine'
+  | 'rewind--10'
+  | 'rewind--30'
+  | 'rewind--5'
+  | 'roadmap'
+  | 'rocket'
+  | 'rotate'
+  | 'rotate--180'
+  | 'rotate--360'
+  | 'rotate--clockwise'
+  | 'rotate--clockwise--alt'
+  | 'rotate--clockwise--alt--filled'
+  | 'rotate--clockwise--filled'
+  | 'rotate--counterclockwise'
+  | 'rotate--counterclockwise--alt'
+  | 'rotate--counterclockwise--alt--filled'
+  | 'rotate--counterclockwise--filled'
+  | 'row'
+  | 'row--collapse'
+  | 'row--expand'
+  | 'rss'
+  | 'rule'
+  | 'ruler'
+  | 'ruler--alt'
+  | 'run'
+  | 'S'
+  | 'S--alt'
+  | 'sankey-diagram'
+  | 'save'
+  | 'save--annotation'
+  | 'save--image'
+  | 'save--model'
+  | 'save--series'
+  | 'scale'
+  | 'scalpel'
+  | 'scalpel--cursor'
+  | 'scalpel--lasso'
+  | 'scalpel--select'
+  | 'scan'
+  | 'scatter-matrix'
+  | 'schematics'
+  | 'scooter'
+  | 'scooter--front'
+  | 'screen'
+  | 'screen--off'
+  | 'script'
+  | 'script--reference'
+  | 'SDK'
+  | 'search'
+  | 'security'
+  | 'select--01'
+  | 'select--02'
+  | 'send'
+  | 'send--alt'
+  | 'send--alt--filled'
+  | 'send--filled'
+  | 'service-desk'
+  | 'settings'
+  | 'settings--adjust'
+  | 'share'
+  | 'share-knowledge'
+  | 'shopping--bag'
+  | 'shopping--cart'
+  | 'shopping--catalog'
+  | 'shrink-screen'
+  | 'shrink-screen--filled'
+  | 'shuffle'
+  | 'shuttle'
+  | 'sigma'
+  | 'signal-strength'
+  | 'skill-level'
+  | 'skill-level--advanced'
+  | 'skill-level--basic'
+  | 'skill-level--intermediate'
+  | 'skip--back'
+  | 'skip--back--filled'
+  | 'skip--back--outline'
+  | 'skip--back--outline--filled'
+  | 'skip--back--outline--solid'
+  | 'skip--back--solid--filled'
+  | 'skip--forward'
+  | 'skip--forward--filled'
+  | 'skip--forward--outline'
+  | 'skip--forward--outline--filled'
+  | 'skip--forward--outline--solid'
+  | 'skip--forward--solid--filled'
+  | 'sleet'
+  | 'smell'
+  | 'smoke'
+  | 'smoothing'
+  | 'smoothing--cursor'
+  | 'snooze'
+  | 'snow'
+  | 'snow--blizzard'
+  | 'snow--heavy'
+  | 'snow--scattered'
+  | 'snow--scattered--night'
+  | 'snowflake'
+  | 'soccer'
+  | 'spell-check'
+  | 'spine-label'
+  | 'split'
+  | 'split--discard'
+  | 'split-screen'
+  | 'spray-paint'
+  | 'sprout'
+  | 'SQL'
+  | 'stack-limitation'
+  | 'stacked-move'
+  | 'stacked-scrolling--1'
+  | 'stacked-scrolling--2'
+  | 'stamp'
+  | 'star'
+  | 'star--filled'
+  | 'star--half'
+  | 'star--review'
+  | 'stem-leaf-plot'
+  | 'stethoscope'
+  | 'stop'
+  | 'stop--filled'
+  | 'stop--filled--alt'
+  | 'stop--outline'
+  | 'stop--outline--filled'
+  | 'store'
+  | 'strawberry'
+  | 'stress-breath-editor'
+  | 'string-integer'
+  | 'string-text'
+  | 'study--next'
+  | 'study--previous'
+  | 'study--skip'
+  | 'sub-volume'
+  | 'subtract'
+  | 'subtract--alt'
+  | 'summary--KPI'
+  | 'sun'
+  | 'sunny'
+  | 'sunrise'
+  | 'sunset'
+  | 'SVG'
+  | 'swim'
+  | 'switcher'
+  | 'sys-provision'
+  | 'T'
+  | 'T--alt'
+  | 'table'
+  | 'table--split'
+  | 'table-of-contents'
+  | 'tablet'
+  | 'tablet--landscape'
+  | 'tag'
+  | 'tag--edit'
+  | 'tag--group'
+  | 'task'
+  | 'task--view'
+  | 'taste'
+  | 'taxi'
+  | 'temperature'
+  | 'temperature--frigid'
+  | 'temperature--hot'
+  | 'template'
+  | 'tennis'
+  | 'tennis-ball'
+  | 'term'
+  | 'terminal'
+  | 'text--align--center'
+  | 'text--align--justify'
+  | 'text--align--left'
+  | 'text--align--right'
+  | 'text--all-caps'
+  | 'text--bold'
+  | 'text--color'
+  | 'text--creation'
+  | 'text--fill'
+  | 'text--highlight'
+  | 'text--indent'
+  | 'text--indent--less'
+  | 'text--indent--more'
+  | 'text--italic'
+  | 'text--kerning'
+  | 'text--leading'
+  | 'text--line-spacing'
+  | 'text--new-line'
+  | 'text--scale'
+  | 'text--selection'
+  | 'text--small-caps'
+  | 'text--strikethrough'
+  | 'text--subscript'
+  | 'text--superscript'
+  | 'text--tracking'
+  | 'text--underline'
+  | 'text--vertical-alignment'
+  | 'text--wrap'
+  | 'text-annotation-toggle'
+  | 'text-link'
+  | 'text-link--analysis'
+  | 'text-mining'
+  | 'text-mining--applier'
+  | 'theater'
+  | 'this-side-up'
+  | 'threshold'
+  | 'thumbnail--1'
+  | 'thumbnail--2'
+  | 'thumbnail-preview'
+  | 'thumbs-down'
+  | 'thumbs-up'
+  | 'thunderstorm'
+  | 'thunderstorm--scattered'
+  | 'thunderstorm--scattered--night'
+  | 'thunderstorm--severe'
+  | 'thunderstorm--strong'
+  | 'ticket'
+  | 'TIF'
+  | 'time'
+  | 'time-plot'
+  | 'timer'
+  | 'tool-box'
+  | 'tools'
+  | 'tornado'
+  | 'touch--1'
+  | 'touch--2'
+  | 'touch--interaction'
+  | 'train'
+  | 'tram'
+  | 'transgender'
+  | 'translate'
+  | 'trash-can'
+  | 'tree'
+  | 'tree-view'
+  | 'tree-view--alt'
+  | 'trophy'
+  | 'trophy--filled'
+  | 'tropical-storm'
+  | 'TSV'
+  | 'two-person-lift'
+  | 'TXT'
+  | 'TXT--reference'
+  | 'type-pattern'
+  | 'types'
+  | 'U1'
+  | 'U2'
+  | 'U3'
+  | 'umbrella'
+  | 'undefined'
+  | 'undefined--filled'
+  | 'undo'
+  | 'unknown'
+  | 'unknown--filled'
+  | 'unlink'
+  | 'unlocked'
+  | 'up-to-top'
+  | 'upgrade'
+  | 'upload'
+  | 'USB'
+  | 'user'
+  | 'user--activity'
+  | 'user--admin'
+  | 'user--avatar'
+  | 'user--avatar--filled'
+  | 'user--avatar--filled--alt'
+  | 'user--certification'
+  | 'user--data'
+  | 'user--favorite'
+  | 'user--favorite--alt'
+  | 'user--favorite--alt--filled'
+  | 'user--filled'
+  | 'user--follow'
+  | 'user--identification'
+  | 'user--multiple'
+  | 'user--online'
+  | 'user--profile'
+  | 'user--role'
+  | 'user--simulation'
+  | 'user--speaker'
+  | 'user--x-ray'
+  | 'user-profile--alt'
+  | 'uv-index'
+  | 'uv-index--filled'
+  | 'van'
+  | 'video'
+  | 'video--add'
+  | 'video--chat'
+  | 'video--filled'
+  | 'video--off'
+  | 'video--off--filled'
+  | 'view'
+  | 'view--filled'
+  | 'view--mode-1'
+  | 'view--mode-2'
+  | 'view--off'
+  | 'view--off--filled'
+  | 'virtual-column'
+  | 'virtual-column--key'
+  | 'virtual-machine'
+  | 'virtual-private-cloud'
+  | 'virtual-private-cloud--alt'
+  | 'visual-recognition'
+  | 'vmdk-disk'
+  | 'voicemail'
+  | 'volume--down'
+  | 'volume--down--filled'
+  | 'volume--mute'
+  | 'volume--mute--filled'
+  | 'volume--up'
+  | 'volume--up--filled'
+  | 'VPN'
+  | 'wallet'
+  | 'warning'
+  | 'warning--alt'
+  | 'warning--alt--filled'
+  | 'warning--alt-inverted'
+  | 'warning--alt-inverted--filled'
+  | 'warning--filled'
+  | 'warning-square'
+  | 'warning-square--filled'
+  | 'watch'
+  | 'watson'
+  | 'watson--machine-learning'
+  | 'websheet'
+  | 'wheat'
+  | 'wifi'
+  | 'wifi--off'
+  | 'wikis'
+  | 'window--auto'
+  | 'window--base'
+  | 'window--overlay'
+  | 'window--preset'
+  | 'windy'
+  | 'windy--dust'
+  | 'windy--snow'
+  | 'windy--strong'
+  | 'wintry-mix'
+  | 'wireless-checkout'
+  | 'WMV'
+  | 'word-cloud'
+  | 'workspace'
+  | 'workspace--import'
+  | 'worship'
+  | 'worship--christian'
+  | 'worship--jewish'
+  | 'worship--muslim'
+  | 'X'
+  | 'x-axis'
+  | 'XLS'
+  | 'XML'
+  | 'Y'
+  | 'y-axis'
+  | 'Z'
+  | 'z-axis'
+  | 'ZIP'
+  | 'ZIP--reference'
+  | 'zoom--in'
+  | 'zoom--out'
+  | 'zoom--reset'
+  | 'zoom-pan';
 
 type Args = {
-  /**
-   * Indicates if the icon is in loading state
-   @argument loading
-   @type boolean
+  /**
+   * Indicates if the icon is in loading state
+   @argument loading
+   @type boolean
    */
   loading?: boolean;
-  /**
-   * Indicates if the icon is informative
-   @argument info
-   @type boolean
+  /**
+   * Indicates if the icon is informative
+   @argument info
+   @type boolean
    */
   info?: boolean;
-  /**
-   * Indicates if the action is dangerous, showing a confirmation dialog before calling `onClick`
-   @argument danger
-   @type boolean
+  /**
+   * Indicates if the action is dangerous, showing a confirmation dialog before calling `onClick`
+   @argument danger
+   @type boolean
    */
   danger?: boolean;
-  /**
-   * If the action is dangerous, this text message will be shown in the dialog
-   @argument confirmText
-   @type String
+  /**
+   * If the action is dangerous, this text message will be shown in the dialog
+   @argument confirmText
+   @type String
    */
   confirmText?: string;
-  /**
-   * Use this component as dialog
-   @argument confirmDialog
-   @type String
+  /**
+   * Use this component as dialog
+   @argument confirmDialog
+   @type String
    */
   confirmDialog?: string;
-  /**
-   * Use this icon to display
-   @argument icon
-   @type String
+  /**
+   * Use this icon to display
+   @argument icon
+   @type String
    */
   icon: IconNames;
-  /**
-   * Size of icon
-   @argument size
-   @type number
+  /**
+   * Size of icon
+   @argument size
+   @type number
    */
-  size?: 16|20|24|32;
-  /**
-   * action to trigger on click
-   @argument onClick
-   @type function
+  size?: 16 | 20 | 24 | 32;
+  /**
+   * action to trigger on click
+   @argument onClick
+   @type function
    */
-  onClick?: () => void|Promise<any>;
+  onClick?: () => void | Promise<any>;
 
-  /**
-   * button style
-   @argument btnStyle
-   @type string
+  /**
+   * button style
+   @argument btnStyle
+   @type string
    */
   btnStyle?: string;
 
-  /**
-   * button classes
-   @argument btnClass
-   @type string
+  /**
+   * button classes
+   @argument btnClass
+   @type string
    */
   btnClass?: string;
   svgClass?: string;
   fill?: string;
-}
+};
 
 @classPrefix('cds--icon--')
 class CarbonIcon extends Component<Args> {
@@ -1368,7 +1367,9 @@ class CarbonIcon extends Component<Args> {
   @tracked disabled;
 
   get svg() {
-    return IconMap[this.args.icon] && IconMap[this.args.icon][this.args.size || 16];
+    return (
+      IconMap[this.args.icon] && IconMap[this.args.icon][this.args.size || 16]
+    );
   }
 
   @action
@@ -1392,12 +1393,16 @@ class CarbonIcon extends Component<Args> {
       }
     };
     if (this.args.danger) {
-      this.dialogManager.open(this.args.confirmDialog || 'carbon-components-ember/components/dialogs/confirm', {
-        type: 'danger',
-        header: 'Danger',
-        body: this.args.confirmText || 'Confirm this operation',
-        onAccept: run
-      });
+      this.dialogManager.open(
+        this.args.confirmDialog ||
+          'carbon-components-ember/components/dialogs/confirm',
+        {
+          type: 'danger',
+          header: 'Danger',
+          body: this.args.confirmText || 'Confirm this operation',
+          onAccept: run,
+        },
+      );
     } else {
       run();
     }
@@ -1437,6 +1442,3 @@ class CarbonIcon extends Component<Args> {
 }
 
 export default CarbonIcon;
-
-
-
diff --git a/carbon-components-ember/src/components/list/-body/index.gts b/carbon-components-ember/src/components/list/-body/index.gts
new file mode 100644
index 00000000..ca8a3154
--- /dev/null
+++ b/carbon-components-ember/src/components/list/-body/index.gts
@@ -0,0 +1,41 @@
+import { default as ListRow } from '../-row';
+import Component from '@glimmer/component';
+import { WithBoundArgs } from '@glint/template';
+import ListRowComponent from 'carbon-components-ember/components/list/-row';
+
+type Args = {
+  items: any[];
+  list: any;
+};
+
+export interface ListBodyComponentSignature<T> {
+  Args: Args;
+  Blocks: {
+    default: [
+      {
+        Row: WithBoundArgs<
+          typeof ListRowComponent<any>,
+          'list' | 'isHeader' | 'item'
+        >;
+        item: T;
+      },
+    ];
+  };
+}
+
+export default class ListBodyComponent<T> extends Component<
+  ListBodyComponentSignature<T>
+> {
+  <template>
+    <div class='cds--structured-list-tbody'>
+      {{#each @items as |item|}}
+        {{yield
+          (hash
+            Row=(component ListRow item=item isHeader=false list=@list)
+            item=item
+          )
+        }}
+      {{/each}}
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/list/-body/index.hbs b/carbon-components-ember/src/components/list/-body/index.hbs
deleted file mode 100644
index 1646b6bc..00000000
--- a/carbon-components-ember/src/components/list/-body/index.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-{{import ListRow from '../-row'}}
-
-<div class='cds--structured-list-tbody'>
-  {{#each @items as |item|}}
-    {{yield
-      (hash
-        Row=(component ListRow item=item isHeader=false list=@list) item=item
-      )
-    }}
-  {{/each}}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/list/-body/index.ts b/carbon-components-ember/src/components/list/-body/index.ts
deleted file mode 100644
index f288717c..00000000
--- a/carbon-components-ember/src/components/list/-body/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import Component from '@glimmer/component';
-import { WithBoundArgs } from '@glint/template';
-import ListRowComponent from 'carbon-components-ember/components/list/-row';
-
-type Args = {
-  items: any[];
-  list: any;
-}
-
-export interface ListBodyComponentSignature<T> {
-  Args: Args;
-  Blocks: {
-    default: [{
-      Row: WithBoundArgs<typeof ListRowComponent<any>, 'list'|'isHeader'|'item'>;
-      item: T;
-    }];
-  };
-}
-
-
-export default class ListBodyComponent<T> extends Component<ListBodyComponentSignature<T>> {
-
-}
diff --git a/carbon-components-ember/src/components/list/-column/index.ts b/carbon-components-ember/src/components/list/-column/index.gts
similarity index 60%
rename from carbon-components-ember/src/components/list/-column/index.ts
rename to carbon-components-ember/src/components/list/-column/index.gts
index f4d13bba..3aff6121 100644
--- a/carbon-components-ember/src/components/list/-column/index.ts
+++ b/carbon-components-ember/src/components/list/-column/index.gts
@@ -11,5 +11,13 @@ export interface ListColumnComponentSignature {
 }
 
 export default class ListColumnComponent extends Component<ListColumnComponentSignature> {
-
+  <template>
+    <div
+      class='cds--structured-list-td
+        {{if @nowrap "cds--structured-list-content--nowrap"}}'
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
 }
diff --git a/carbon-components-ember/src/components/list/-column/index.hbs b/carbon-components-ember/src/components/list/-column/index.hbs
deleted file mode 100644
index 775bb223..00000000
--- a/carbon-components-ember/src/components/list/-column/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div
-  class='cds--structured-list-td
-    {{if @nowrap "cds--structured-list-content--nowrap"}}'
-  ...attributes
->
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/list/-header/index.gts b/carbon-components-ember/src/components/list/-header/index.gts
new file mode 100644
index 00000000..01f5aa24
--- /dev/null
+++ b/carbon-components-ember/src/components/list/-header/index.gts
@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+
+type Args = {
+  headers: string[];
+};
+
+export default class ListHeaderComponent extends Component<Args> {
+  <template>
+    <div class='cds--structured-list-thead'>
+      <div
+        class='cds--structured-list-row cds--structured-list-row--header-row'
+      >
+        {{#each @headers as |h|}}
+          <div class='cds--structured-list-th'>
+            {{h}}
+          </div>
+        {{/each}}
+      </div>
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/list/-header/index.hbs b/carbon-components-ember/src/components/list/-header/index.hbs
deleted file mode 100644
index b59b1ea0..00000000
--- a/carbon-components-ember/src/components/list/-header/index.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class='cds--structured-list-thead'>
-  <div class='cds--structured-list-row cds--structured-list-row--header-row'>
-    {{#each @headers as |h|}}
-      <div class='cds--structured-list-th'>
-        {{h}}
-      </div>
-    {{/each}}
-  </div>
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/list/-header/index.ts b/carbon-components-ember/src/components/list/-header/index.ts
deleted file mode 100644
index 33413033..00000000
--- a/carbon-components-ember/src/components/list/-header/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import Component from '@glimmer/component';
-
-type Args = {
-  headers: string[];
-}
-
-export default class ListHeaderComponent extends Component<Args> {
-
-}
diff --git a/carbon-components-ember/src/components/list/-row/index.gts b/carbon-components-ember/src/components/list/-row/index.gts
new file mode 100644
index 00000000..f6ae0d53
--- /dev/null
+++ b/carbon-components-ember/src/components/list/-row/index.gts
@@ -0,0 +1,56 @@
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { default as eq } from 'ember-truth-helpers/helpers/eq';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import ListComponent from 'carbon-components-ember/components/list';
+
+type Args<T> = {
+  onSelect?(item: any): void;
+  list: ListComponent<T>;
+  isHeader: boolean;
+  item: T;
+};
+
+export interface ListRowComponentSignature<T> {
+  Args: Args<T>;
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class ListRowComponent<T> extends Component<
+  ListRowComponentSignature<T>
+> {
+  @action
+  onSelect(item: T) {
+    this.args.onSelect?.(item);
+  }
+
+  <template>
+    <div
+      class='cds--structured-list-row
+        {{if @isHeader "cds--structured-list-row--header-row"}}'
+      ...attributes
+    >
+      {{yield}}
+      {{#if @list.args.selectable}}
+        <input
+          aria-label='none'
+          type='radio'
+          checked={{eq @list.currentItem @item}}
+          class='cds--structured-list-input cds--visually-hidden'
+          {{on 'click' (fn this.onSelect @item)}}
+        />
+        <div class='cds--structured-list-td'>
+          <Icon
+            @icon='checkmark--filled'
+            @btnClass='cds--structured-list-svg'
+          />
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/list/-row/index.hbs b/carbon-components-ember/src/components/list/-row/index.hbs
deleted file mode 100644
index b0d4ec4e..00000000
--- a/carbon-components-ember/src/components/list/-row/index.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-{{import Icon from 'carbon-components-ember/components/icon'}}
-{{import '{ on }' from '@ember/modifier'}}
-{{import '{ fn }' from '@ember/helper'}}
-{{import eq from 'ember-truth-helpers/helpers/eq'}}
-<div
-  class='cds--structured-list-row
-    {{if @isHeader "cds--structured-list-row--header-row"}}'
-  ...attributes
->
-  {{yield}}
-  {{#if @list.args.selectable}}
-    <input
-      aria-label='none'
-      type='radio'
-      checked={{eq @list.currentItem @item}}
-      class='cds--structured-list-input cds--visually-hidden'
-      {{on 'click' (fn this.onSelect @item)}}
-    />
-    <div class='cds--structured-list-td'>
-      <Icon @icon='checkmark--filled' @btnClass='cds--structured-list-svg' />
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/list/-row/index.ts b/carbon-components-ember/src/components/list/-row/index.ts
deleted file mode 100644
index b772dcce..00000000
--- a/carbon-components-ember/src/components/list/-row/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import ListComponent from 'carbon-components-ember/components/list';
-
-type Args<T> = {
-  onSelect?(item: any): void;
-  list: ListComponent<T>;
-  isHeader: boolean;
-  item: T;
-}
-
-export interface ListRowComponentSignature<T> {
-  Args: Args<T>;
-  Element: HTMLDivElement;
-  Blocks: {
-    default: [];
-  };
-}
-
-export default class ListRowComponent<T> extends Component<ListRowComponentSignature<T>> {
-
-  @action
-  onSelect(item: T) {
-    this.args.onSelect?.(item);
-  }
-}
diff --git a/carbon-components-ember/src/components/list/-skeleton/index.gts b/carbon-components-ember/src/components/list/-skeleton/index.gts
new file mode 100644
index 00000000..658d6130
--- /dev/null
+++ b/carbon-components-ember/src/components/list/-skeleton/index.gts
@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+
+export default class ListSkeletonComponent extends Component {
+  <template>
+    <section class='cds--structured-list cds--skeleton'>
+      <div class='cds--structured-list-thead'>
+        <div
+          class='cds--structured-list-row cds--structured-list-row--header-row'
+        >
+          <div class='cds--structured-list-th'>
+            Item
+          </div>
+          <div class='cds--structured-list-th'>
+            Details
+          </div>
+        </div>
+      </div>
+      <div class='cds--structured-list-tbody'>
+        <div class='cds--structured-list-row'>
+          <div
+            class='cds--structured-list-td cds--structured-list-content--nowrap'
+          >
+            <div class='cds--skeleton__text'></div>
+          </div>
+          <div
+            class='cds--structured-list-td cds--structured-list-content--nowrap'
+          >
+            <div class='cds--skeleton__text'></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/list/-skeleton/index.hbs b/carbon-components-ember/src/components/list/-skeleton/index.hbs
deleted file mode 100644
index 808c267f..00000000
--- a/carbon-components-ember/src/components/list/-skeleton/index.hbs
+++ /dev/null
@@ -1,22 +0,0 @@
-<section class='cds--structured-list cds--skeleton'>
-  <div class='cds--structured-list-thead'>
-    <div class='cds--structured-list-row cds--structured-list-row--header-row'>
-      <div class='cds--structured-list-th'>
-        Item
-      </div>
-      <div class='cds--structured-list-th'>
-        Details
-      </div>
-    </div>
-  </div>
-  <div class='cds--structured-list-tbody'>
-    <div class='cds--structured-list-row'>
-      <div class='cds--structured-list-td cds--structured-list-content--nowrap'>
-        <div class='cds--skeleton__text'></div>
-      </div>
-      <div class='cds--structured-list-td cds--structured-list-content--nowrap'>
-        <div class='cds--skeleton__text'></div>
-      </div>
-    </div>
-  </div>
-</section>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/list/-skeleton/index.ts b/carbon-components-ember/src/components/list/-skeleton/index.ts
deleted file mode 100644
index 32300206..00000000
--- a/carbon-components-ember/src/components/list/-skeleton/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class ListSkeletonComponent extends Component {
-
-}
diff --git a/carbon-components-ember/src/components/list/index.gts b/carbon-components-ember/src/components/list/index.gts
new file mode 100644
index 00000000..9001dcb6
--- /dev/null
+++ b/carbon-components-ember/src/components/list/index.gts
@@ -0,0 +1,129 @@
+import { default as ListRow } from './-row';
+import { default as ListColumn } from './-column';
+import { default as ListHeader } from './-header';
+import { default as ListBody } from './-body';
+import { default as Skeleton } from './-skeleton';
+import { default as Pagination } from '../pagination';
+import { default as SearchInput } from '../search-input';
+import { default as styles } from './styles.scoped.scss';
+import { fn } from '@ember/helper';
+import { default as didInsert } from '@ember/render-modifiers/modifiers/did-insert';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import SearchComponent from 'carbon-components-ember/components/search-input';
+import { WithBoundArgs } from '@glint/template';
+import CarbonPagination from 'carbon-components-ember/components/pagination';
+import ListColumnComponent from 'carbon-components-ember/components/list/-column';
+import ListBodyComponent from 'carbon-components-ember/components/list/-body';
+import ListHeaderComponent from 'carbon-components-ember/components/list/-header';
+
+type Args<T> = {
+  items?: T[];
+  loading?: boolean;
+  onSelect?(item: any): void;
+  selectable?: boolean;
+};
+
+export interface ListComponentSignature<T> {
+  Args: Args<T>;
+  Blocks: {
+    default: [
+      {
+        items: T[];
+        SearchInput: WithBoundArgs<
+          typeof SearchComponent,
+          'value' | 'onChange' | 'light' | 'size'
+        >;
+        Pagination: WithBoundArgs<
+          typeof CarbonPagination,
+          'length' | 'onPageChanged'
+        >;
+        Column: typeof ListColumnComponent;
+        BodyRows: WithBoundArgs<typeof ListBodyComponent, 'list' | 'items'>;
+        Header: typeof ListHeaderComponent;
+      },
+    ];
+  };
+}
+
+export default class ListComponent<T> extends Component<
+  ListComponentSignature<T>
+> {
+  @tracked currentSearch: string;
+  @tracked currentItemsSlice: any = null;
+  @tracked currentItem?: T;
+
+  filter(items, term) {
+    term = term && term.toLowerCase();
+    const ensureString = (v) =>
+      typeof v === 'string' ? v.toLowerCase() : JSON.stringify(v).toLowerCase();
+    return items.filter((t) => {
+      if (!term || term === '') return true;
+      return Object.values(t.toJSON ? t.toJSON() : t)
+        .filter((v: any) => v && !v.defaultAdapter)
+        .some((v) => v && ensureString(v).includes(term));
+    });
+  }
+
+  get currentItems() {
+    if (this.currentSearch) {
+      return this.filter(this.args.items || [], this.currentSearch);
+    }
+    if (!this.args.items || !this.currentItemsSlice) return [];
+    return this.args.items.slice(
+      this.currentItemsSlice.start,
+      this.currentItemsSlice.end,
+    );
+  }
+
+  @action
+  delayItems() {
+    setTimeout(() => {
+      if (!this.currentItemsSlice) {
+        this.currentItemsSlice = { start: 0, end: undefined };
+      }
+    }, 200);
+  }
+
+  @action
+  onSelect(item: T) {
+    this.currentItem = item;
+    this.args.onSelect?.(item);
+  }
+
+  <template>
+    {{#if @loading}}
+      <Skeleton />
+    {{else}}
+      <section
+        class='cds--structured-list
+          {{styles.namespace}}
+          {{if @selectable "cds--structured-list--selection"}}'
+        style='position: relative;'
+        {{didInsert this.delayItems}}
+      >
+        {{yield
+          (hash
+            items=this.currentItems
+            SearchInput=(component
+              SearchInput
+              value=this.currentSearch
+              onChange=(fn (mut this.currentSearch))
+              light=true
+              size='sm'
+            )
+            Pagination=(component
+              Pagination
+              length=@items.length
+              onPageChanged=(fn (mut this.currentItemsSlice))
+            )
+            Column=ListColumn
+            BodyRows=(component ListBody list=this items=this.currentItems)
+            Header=ListHeader
+          )
+        }}
+      </section>
+    {{/if}}
+  </template>
+}
diff --git a/carbon-components-ember/src/components/list/index.hbs b/carbon-components-ember/src/components/list/index.hbs
deleted file mode 100644
index 7930cf60..00000000
--- a/carbon-components-ember/src/components/list/index.hbs
+++ /dev/null
@@ -1,43 +0,0 @@
-{{import ListRow from './-row'}}
-{{import ListColumn from './-column'}}
-{{import ListHeader from './-header'}}
-{{import ListBody from './-body'}}
-{{import Skeleton from './-skeleton'}}
-{{import Pagination from '../pagination'}}
-{{import SearchInput from '../search-input'}}
-{{import styles from './styles.scoped.scss'}}
-{{import '{ fn }' from '@ember/helper'}}
-{{import didInsert from '@ember/render-modifiers/modifiers/did-insert'}}
-
-{{#if @loading}}
-  <Skeleton />
-{{else}}
-  <section
-    class='cds--structured-list
-      {{styles.namespace}}
-      {{if @selectable "cds--structured-list--selection"}}'
-    style='position: relative;'
-    {{didInsert this.delayItems}}
-  >
-    {{yield
-      (hash
-        items=this.currentItems
-        SearchInput=(component
-          SearchInput
-          value=this.currentSearch
-          onChange=(fn (mut this.currentSearch))
-          light=true
-          size='sm'
-        )
-        Pagination=(component
-          Pagination
-          length=@items.length
-          onPageChanged=(fn (mut this.currentItemsSlice))
-        )
-        Column=ListColumn
-        BodyRows=(component ListBody list=this items=this.currentItems)
-        Header=ListHeader
-      )
-    }}
-  </section>
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/list/index.ts b/carbon-components-ember/src/components/list/index.ts
deleted file mode 100644
index d4b15ba0..00000000
--- a/carbon-components-ember/src/components/list/index.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import SearchComponent from 'carbon-components-ember/components/search-input';
-import { WithBoundArgs } from '@glint/template';
-import CarbonPagination from 'carbon-components-ember/components/pagination';
-import ListColumnComponent from 'carbon-components-ember/components/list/-column';
-import ListBodyComponent from 'carbon-components-ember/components/list/-body';
-import ListHeaderComponent from 'carbon-components-ember/components/list/-header';
-
-type Args<T> = {
-  items?: T[];
-  loading?: boolean;
-  onSelect?(item: any): void;
-  selectable?: boolean;
-}
-
-export interface ListComponentSignature<T> {
-  Args: Args<T>;
-  Blocks: {
-    default: [{
-      items: T[];
-      SearchInput: WithBoundArgs<typeof SearchComponent, 'value'|'onChange'|'light'|'size'>;
-      Pagination: WithBoundArgs<typeof CarbonPagination, 'length'|'onPageChanged'>;
-      Column: typeof ListColumnComponent;
-      BodyRows: WithBoundArgs<typeof ListBodyComponent, 'list'|'items'>;
-      Header: typeof ListHeaderComponent;
-    }];
-  };
-}
-
-export default class ListComponent<T> extends Component<ListComponentSignature<T>> {
-  @tracked currentSearch: string;
-  @tracked currentItemsSlice:any = null;
-  @tracked currentItem?: T;
-
-  filter(items, term) {
-    term = term && term.toLowerCase();
-    const ensureString = v => (typeof v === 'string' ? v.toLowerCase() : JSON.stringify(v).toLowerCase());
-    return items.filter((t) => {
-      if (!term || term === '') return true;
-      return Object.values(t.toJSON ? t.toJSON() : t)
-        .filter((v: any) => v && !v.defaultAdapter)
-        .some(v => (v && ensureString(v).includes(term)));
-    });
-  }
-
-  get currentItems() {
-    if (this.currentSearch) {
-      return this.filter(this.args.items || [], this.currentSearch);
-    }
-    if (!this.args.items || !this.currentItemsSlice) return [];
-    return this.args.items.slice(this.currentItemsSlice.start, this.currentItemsSlice.end);
-  }
-
-  @action
-  delayItems() {
-    setTimeout(() => {
-      if (!this.currentItemsSlice) {
-        this.currentItemsSlice = { start: 0, end: undefined };
-      }
-    }, 200);
-  }
-
-  @action
-  onSelect(item: T) {
-    this.currentItem = item;
-    this.args.onSelect?.(item);
-  }
-}
diff --git a/carbon-components-ember/src/components/loading/index.gts b/carbon-components-ember/src/components/loading/index.gts
index 33f5098b..5e8e0175 100644
--- a/carbon-components-ember/src/components/loading/index.gts
+++ b/carbon-components-ember/src/components/loading/index.gts
@@ -8,7 +8,7 @@ type Args = {
   title?: boolean;
   inline?: boolean;
   classNames?: string;
-}
+};
 
 export interface LoadingComponentSignature {
   Args: Args;
@@ -21,7 +21,7 @@ export default class LoadingComponent extends Component<LoadingComponentSignatur
     small: false,
     overlay: false,
     title: null,
-    inline: false
+    inline: false,
   });
 
   get defaultArgs() {
@@ -44,7 +44,12 @@ export default class LoadingComponent extends Component<LoadingComponentSignatur
                 Loading
               </title>
               {{#if @small}}
-                <circle class='cds--loading__background' cx='0' cy='0' r='37.5' />
+                <circle
+                  class='cds--loading__background'
+                  cx='0'
+                  cy='0'
+                  r='37.5'
+                />
               {{/if}}
               <circle class='cds--loading__stroke' cx='0' cy='0' r='37.5' />
             </svg>
@@ -103,5 +108,3 @@ export default class LoadingComponent extends Component<LoadingComponentSignatur
     {{/if}}
   </template>
 }
-
-
diff --git a/carbon-components-ember/src/components/menu/-item/index.gts b/carbon-components-ember/src/components/menu/-item/index.gts
index 1b6ba14d..7c0fabbc 100644
--- a/carbon-components-ember/src/components/menu/-item/index.gts
+++ b/carbon-components-ember/src/components/menu/-item/index.gts
@@ -17,11 +17,11 @@ export interface MenuItemComponentSignature {
 
 export default class Item extends Component<MenuItemComponentSignature> {
   <template>
-    <li class='
-      cds--overflow-menu-options__option
-      {{if @isDisabled "cds--overflow-menu-options__option--disabled"}}
-      {{if @isDanger "cds--overflow-menu-options__option--danger"}}
-      {{if @isDivider 'cds--overflow-menu--divider'}}'
+    <li
+      class='cds--overflow-menu-options__option
+        {{if @isDisabled "cds--overflow-menu-options__option--disabled"}}
+        {{if @isDanger "cds--overflow-menu-options__option--danger"}}
+        {{if @isDivider "cds--overflow-menu--divider"}}'
     >
       <button
         class='cds--overflow-menu-options__btn'
diff --git a/carbon-components-ember/src/components/menu/index.gts b/carbon-components-ember/src/components/menu/index.gts
index 071ab7e0..f0e1833e 100644
--- a/carbon-components-ember/src/components/menu/index.gts
+++ b/carbon-components-ember/src/components/menu/index.gts
@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import Icon,  { IconNames } from 'carbon-components-ember/components/icon';
+import Icon, { IconNames } from 'carbon-components-ember/components/icon';
 import MenuItemComponent from 'carbon-components-ember/components/menu/-item';
 import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
 import defaultTo from 'carbon-components-ember/helpers/default-to';
@@ -9,7 +9,7 @@ import EmberTooltip from 'ember-tooltips/components/ember-tooltip';
 export interface MenuComponentSignature {
   Args: {
     icon?: IconNames;
-    direction: 'bottom'|'top';
+    direction: 'bottom' | 'top';
     tooltip?: string;
     disabled?: boolean;
     danger?: boolean;
@@ -19,7 +19,6 @@ export interface MenuComponentSignature {
   };
 }
 
-
 export default class MenuComponent extends Component<MenuComponentSignature> {
   <template>
     <BasicDropdown as |dd|>
@@ -46,10 +45,11 @@ export default class MenuComponent extends Component<MenuComponentSignature> {
           tabindex='-1'
           data-floating-menu-direction={{defaultTo @direction 'buttom'}}
         >
-          {{yield (component MenuItemComponent isDisabled=@disabled isDanger=@danger)}}
+          {{yield
+            (component MenuItemComponent isDisabled=@disabled isDanger=@danger)
+          }}
         </ul>
       </dd.Content>
     </BasicDropdown>
   </template>
 }
-
diff --git a/carbon-components-ember/src/components/modal/index.gts b/carbon-components-ember/src/components/modal/index.gts
new file mode 100644
index 00000000..17d7abc9
--- /dev/null
+++ b/carbon-components-ember/src/components/modal/index.gts
@@ -0,0 +1,112 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
+import { defaultArgs, autoComputed } from 'carbon-components-ember/decorators';
+
+/** @documenter yuidoc */
+
+type Args = {
+  /**
+   * @argument onClose
+   * @type function
+   */
+  onClose?: Function;
+  type?: 'danger' | 'default' | 'passive';
+};
+
+export interface ModalComponentSignature {
+  Args: Args;
+  Blocks: {
+    label: [];
+    header: [];
+    body: [];
+    footer: [];
+  };
+}
+
+/**
+ * @class Modal
+ */
+export default class Modal extends Component<ModalComponentSignature> {
+  @tracked isVisible = true;
+
+  args = defaultArgs(this, {
+    onClose: null,
+  });
+
+  @autoComputed()
+  get guid() {
+    return guidFor(this);
+  }
+
+  @action
+  closeModal() {
+    this.isVisible = false;
+    this.args.onClose && this.args.onClose();
+    return false;
+  }
+
+  <template>
+    <div
+      data-modal
+      id='modal-{{this.guid}}'
+      class='cds--modal cds--modal--{{@type}}
+        {{if this.isVisible "is-visible"}}'
+      role='dialog'
+      aria-modal='true'
+      aria-labelledby='modal-{{this.guid}}-label'
+      aria-describedby='modal-{{this.guid}}-heading'
+      tabindex='-1'
+    >
+      <div class='cds--modal-container'>
+        <div class='cds--modal-header'>
+          <p
+            class='cds--modal-header__label cds--type-delta'
+            id='modal-{{this.guid}}-label'
+          >
+            {{yield to='label'}}
+          </p>
+          <p
+            class='cds--modal-header__heading cds--type-beta'
+            id='modal-{{this.guid}}-heading'
+          >
+            {{yield to='header'}}
+          </p>
+          <button
+            class='cds--modal-close'
+            type='button'
+            data-modal-close
+            aria-label='close modal'
+            data-modal-primary-focus
+            {{on 'click' this.closeModal}}
+          >
+            <svg
+              class='cds--modal-close__icon'
+              width='10'
+              height='10'
+              viewBox='0 0 10 10'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <title>
+                Close Modal
+              </title>
+              <path
+                d='M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z'
+                fill-rule='nonzero'
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div class='cds--modal-content'>
+          {{yield to='body'}}
+        </div>
+
+        <div class='cds--modal-footer'>
+          {{yield to='footer'}}
+        </div>
+      </div>
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/modal/index.hbs b/carbon-components-ember/src/components/modal/index.hbs
deleted file mode 100644
index 8cd6525f..00000000
--- a/carbon-components-ember/src/components/modal/index.hbs
+++ /dev/null
@@ -1,59 +0,0 @@
-<div
-  data-modal
-  id='modal-{{this.guid}}'
-  class='cds--modal cds--modal--{{@type}} {{if this.isVisible "is-visible"}}'
-  role='dialog'
-  aria-modal='true'
-  aria-labelledby='modal-{{this.guid}}-label'
-  aria-describedby='modal-{{this.guid}}-heading'
-  tabindex='-1'
->
-  <div class='cds--modal-container'>
-    <div class='cds--modal-header'>
-      <p
-        class='cds--modal-header__label cds--type-delta'
-        id='modal-{{this.guid}}-label'
-      >
-        {{yield to='label'}}
-      </p>
-      <p
-        class='cds--modal-header__heading cds--type-beta'
-        id='modal-{{this.guid}}-heading'
-      >
-        {{yield to='header'}}
-      </p>
-      <button
-        class='cds--modal-close'
-        type='button'
-        data-modal-close
-        aria-label='close modal'
-        data-modal-primary-focus
-        {{on 'click' this.closeModal}}
-      >
-        <svg
-          class='cds--modal-close__icon'
-          width='10'
-          height='10'
-          viewBox='0 0 10 10'
-          xmlns='http://www.w3.org/2000/svg'
-        >
-          <title>
-            Close Modal
-          </title>
-          <path
-            d='M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z'
-            fill-rule='nonzero'
-          />
-        </svg>
-      </button>
-    </div>
-
-    <div class='cds--modal-content'>
-      {{yield to='body'}}
-    </div>
-
-    <div class='cds--modal-footer'>
-      {{yield to='footer'}}
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/modal/index.ts b/carbon-components-ember/src/components/modal/index.ts
deleted file mode 100644
index 480164b3..00000000
--- a/carbon-components-ember/src/components/modal/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { guidFor } from '@ember/object/internals';
-import { tracked } from '@glimmer/tracking';
-import { defaultArgs, autoComputed } from 'carbon-components-ember/decorators';
-
-/** @documenter yuidoc */
-
-type Args = {
-  /**
-   * @argument onClose
-   * @type function
-   */
-  onClose?: Function;
-  type?: 'danger'|'default'|'passive';
-}
-
-export interface ModalComponentSignature {
-  Args: Args;
-  Blocks: {
-    label: [];
-    header: [];
-    body: [];
-    footer: [];
-  };
-}
-
-/**
- * @class Modal
- */
-export default class Modal extends Component<ModalComponentSignature> {
-  @tracked isVisible = true;
-
-  args = defaultArgs(this, {
-    onClose: null
-  });
-
-  @autoComputed()
-  get guid() {
-    return guidFor(this);
-  }
-
-  @action
-  closeModal() {
-    this.isVisible = false;
-    this.args.onClose && this.args.onClose();
-    return false;
-  }
-}
diff --git a/carbon-components-ember/src/components/notification/index.gts b/carbon-components-ember/src/components/notification/index.gts
new file mode 100644
index 00000000..4da8ca34
--- /dev/null
+++ b/carbon-components-ember/src/components/notification/index.gts
@@ -0,0 +1,185 @@
+import { default as or } from 'ember-truth-helpers/helpers/or';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { default as eq } from 'ember-truth-helpers/helpers/eq';
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import NotificationService, {
+  NotificationOptions,
+} from 'carbon-components-ember/services/notifications';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { IconNames } from 'carbon-components-ember/components/icon';
+
+type Args = {
+  onClick: null | Function;
+  notification?: NotificationOptions;
+} & NotificationOptions;
+
+export interface NotificationComponentSignature {
+  Args: Args;
+  Element: HTMLDivElement;
+}
+
+export default class NotificationComponent extends Component<NotificationComponentSignature> {
+  @tracked show = true;
+  @service('carbon.notifications') notifications: NotificationService;
+
+  get icon(): IconNames {
+    const mapping: Record<Required<NotificationOptions>['kind'], IconNames> = {
+      info: 'information',
+      error: 'error--filled',
+      'info-square': 'information--square--filled',
+      success: 'checkmark--filled',
+      warning: 'warning',
+      'warning-alt': 'warning--alt--filled',
+    };
+    return mapping[this.defaultArgs.kind];
+  }
+
+  get defaultArgs(): WithRequired<Args, 'display' | 'kind'> {
+    const type = this.args.type || 'error';
+    return Object.assign(
+      {},
+      this.args.notification || {},
+      {
+        display: 'toast',
+        kind: this.args.kind || type,
+      },
+      this.args,
+    );
+  }
+
+  @action
+  onNotificationClick(notification) {
+    if (this.notifications.has(notification)) {
+      this.notifications.remove(notification);
+    } else {
+      this.show = false;
+    }
+  }
+
+  <template>
+    {{#if this.show}}
+      {{#if (eq this.defaultArgs.display 'toast')}}
+        <div
+          data-notification
+          class='cds--toast-notification cds--toast-notification--{{this.defaultArgs.type}}'
+          role='alert'
+          ...attributes
+        >
+          <Icon
+            @icon={{this.icon}}
+            @svgClass='cds--toast-notification__icon'
+            @fill='currentColor'
+          />
+          <div class='cds--toast-notification__details'>
+            <h3 class='cds--toast-notification__title'>
+              {{this.defaultArgs.title}}
+            </h3>
+            <p class='cds--toast-notification__subtitle'>
+              {{this.defaultArgs.text}}
+            </p>
+            <p class='cds--toast-notification__caption'>
+              {{this.defaultArgs.caption}}
+            </p>
+          </div>
+          <button
+            {{on 'click' (fn this.onNotificationClick this.defaultArgs)}}
+            data-notification-btn
+            class='cds--toast-notification__close-button'
+            type='button'
+            aria-label='close'
+          >
+            <Icon
+              @icon='close'
+              @svgClass='cds--inline-notification__close-icon'
+            />
+          </button>
+        </div>
+      {{/if}}
+      {{#if (eq this.defaultArgs.display 'inline')}}
+        <div
+          role='status'
+          class='cds--inline-notification cds--inline-notification--error'
+        >
+          <div class='cds--inline-notification__details'>
+            <Icon
+              @icon={{this.icon}}
+              @svgClass='cds--inline-notification__icon'
+              @fill='currentColor'
+            />
+            <div class='cds--inline-notification__text-wrapper'>
+              <div class='cds--inline-notification__title'>
+                {{this.defaultArgs.title}}
+              </div>
+              <div class='cds--inline-notification__subtitle'>
+                {{this.defaultArgs.text}}
+              </div>
+            </div>
+          </div>
+          <button
+            aria-hidden='true'
+            tabindex='-1'
+            type='button'
+            aria-label='close notification'
+            title='close notification'
+            class='cds--inline-notification__close-button'
+          >
+            <Icon
+              @icon='close'
+              @svgClass='cds--inline-notification__close-icon'
+            />
+          </button>
+        </div>
+      {{/if}}
+
+      {{#if (eq this.defaultArgs.display 'actionable')}}
+        <div
+          role='alertdialog'
+          class='cds--actionable-notification cds--actionable-notification--toast cds--actionable-notification--{{@type}}'
+          aria-labelledby='actionable-notification-3'
+        >
+          <div class='cds--actionable-notification__details'>
+            <Icon
+              @icon={{this.icon}}
+              @svgClass='cds--toast-notification__icon'
+              @fill='currentColor'
+            />
+            <div class='cds--actionable-notification__text-wrapper'>
+              <div class='cds--actionable-notification__content'>
+                <div
+                  class='cds--actionable-notification__title'
+                  id='actionable-notification-3'
+                >
+                  {{this.defaultArgs.title}}
+                </div>
+                <div class='cds--actionable-notification__subtitle'>
+                  {{this.defaultArgs.text}}
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class='cds--actionable-notification__action-button cds--btn cds--btn--sm cds--layout--size-sm cds--btn--tertiary'
+            type='button'
+          >
+            {{this.defaultArgs.actionTitle}}
+          </button>
+          <button
+            aria-label='close notification'
+            type='button'
+            title='close notification'
+            class='cds--actionable-notification__close-button'
+          >
+            <Icon
+              @icon='close'
+              @svgClass='cds--actionable-notification__close-icon'
+            />
+          </button>
+        </div>
+      {{/if}}
+    {{/if}}
+  </template>
+}
diff --git a/carbon-components-ember/src/components/notification/index.hbs b/carbon-components-ember/src/components/notification/index.hbs
deleted file mode 100644
index e2093781..00000000
--- a/carbon-components-ember/src/components/notification/index.hbs
+++ /dev/null
@@ -1,120 +0,0 @@
-{{import or from 'ember-truth-helpers/helpers/or'}}
-{{import '{ on }' from '@ember/modifier'}}
-{{import '{ fn }' from '@ember/helper'}}
-{{import eq from 'ember-truth-helpers/helpers/eq'}}
-{{import Icon from 'carbon-components-ember/components/icon'}}
-
-{{#if this.show}}
-  {{#if (eq this.defaultArgs.display 'toast')}}
-    <div
-      data-notification
-      class='cds--toast-notification cds--toast-notification--{{this.defaultArgs.type}}'
-      role='alert'
-      ...attributes
-    >
-      <Icon
-        @icon={{this.icon}}
-        @svgClass='cds--toast-notification__icon'
-        @fill='currentColor'
-      />
-      <div class='cds--toast-notification__details'>
-        <h3 class='cds--toast-notification__title'>
-          {{this.defaultArgs.title}}
-        </h3>
-        <p class='cds--toast-notification__subtitle'>
-          {{this.defaultArgs.text}}
-        </p>
-        <p class='cds--toast-notification__caption'>
-          {{this.defaultArgs.caption}}
-        </p>
-      </div>
-      <button
-        {{on 'click' (fn this.onNotificationClick this.defaultArgs)}}
-        data-notification-btn
-        class='cds--toast-notification__close-button'
-        type='button'
-        aria-label='close'
-      >
-        <Icon @icon='close' @svgClass='cds--inline-notification__close-icon' />
-      </button>
-    </div>
-  {{/if}}
-  {{#if (eq this.defaultArgs.display 'inline')}}
-    <div
-      role='status'
-      class='cds--inline-notification cds--inline-notification--error'
-    >
-      <div class='cds--inline-notification__details'>
-        <Icon
-          @icon={{this.icon}}
-          @svgClass='cds--inline-notification__icon'
-          @fill='currentColor'
-        />
-        <div class='cds--inline-notification__text-wrapper'>
-          <div class='cds--inline-notification__title'>
-            {{this.defaultArgs.title}}
-          </div>
-          <div class='cds--inline-notification__subtitle'>
-            {{this.defaultArgs.text}}
-          </div>
-        </div>
-      </div>
-      <button
-        aria-hidden='true'
-        tabindex='-1'
-        type='button'
-        aria-label='close notification'
-        title='close notification'
-        class='cds--inline-notification__close-button'
-      >
-        <Icon @icon='close' @svgClass='cds--inline-notification__close-icon' />
-      </button>
-    </div>
-  {{/if}}
-
-  {{#if (eq this.defaultArgs.display 'actionable')}}
-    <div
-      role='alertdialog'
-      class='cds--actionable-notification cds--actionable-notification--toast cds--actionable-notification--{{@type}}'
-      aria-labelledby='actionable-notification-3'
-    >
-      <div class='cds--actionable-notification__details'>
-        <Icon
-          @icon={{this.icon}}
-          @svgClass='cds--toast-notification__icon'
-          @fill='currentColor'
-        />
-        <div class='cds--actionable-notification__text-wrapper'>
-          <div class='cds--actionable-notification__content'>
-            <div
-              class='cds--actionable-notification__title'
-              id='actionable-notification-3'
-            >
-              {{this.defaultArgs.title}}
-            </div>
-            <div class='cds--actionable-notification__subtitle'>
-              {{this.defaultArgs.text}}
-            </div>
-          </div>
-        </div>
-      </div>
-      <button
-        class='cds--actionable-notification__action-button cds--btn cds--btn--sm cds--layout--size-sm cds--btn--tertiary'
-        type='button'
-      >
-        {{this.defaultArgs.actionTitle}}
-      </button>
-      <button
-        aria-label='close notification'
-        type='button'
-        title='close notification'
-        class='cds--actionable-notification__close-button'
-      >
-        <Icon
-          @icon='close'
-          @svgClass='cds--actionable-notification__close-icon'
-        />
-      </button>
-    </div>
-  {{/if}}
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/notification/index.ts b/carbon-components-ember/src/components/notification/index.ts
deleted file mode 100644
index 35703fe3..00000000
--- a/carbon-components-ember/src/components/notification/index.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import NotificationService, { NotificationOptions } from 'carbon-components-ember/services/notifications';
-import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
-import { IconNames } from 'carbon-components-ember/components/icon';
-
-
-type Args = {
-  onClick: null|Function;
-  notification?: NotificationOptions;
-} & NotificationOptions
-
-export interface NotificationComponentSignature {
-  Args: Args;
-  Element: HTMLDivElement;
-}
-
-export default class NotificationComponent extends Component<NotificationComponentSignature> {
-  @tracked show = true;
-  @service('carbon.notifications') notifications: NotificationService;
-
-  get icon(): IconNames {
-    const mapping: Record<Required<NotificationOptions>['kind'], IconNames> = {
-      'info': 'information',
-      error: 'error--filled',
-      'info-square': 'information--square--filled',
-      success: 'checkmark--filled',
-      warning: 'warning',
-      'warning-alt': 'warning--alt--filled'
-    };
-    return mapping[this.defaultArgs.kind];
-  }
-
-  get defaultArgs(): WithRequired<Args, 'display'|'kind'> {
-    const type = this.args.type || 'error';
-    return Object.assign({},
-      this.args.notification || {},{
-      display: 'toast',
-      kind: this.args.kind || type,
-    }, this.args);
-  }
-
-  @action
-  onNotificationClick(notification) {
-    if (this.notifications.has(notification)) {
-      this.notifications.remove(notification);
-    } else {
-      this.show = false;
-    }
-  }
-}
diff --git a/carbon-components-ember/src/components/pagination/index.gts b/carbon-components-ember/src/components/pagination/index.gts
new file mode 100644
index 00000000..3131ef59
--- /dev/null
+++ b/carbon-components-ember/src/components/pagination/index.gts
@@ -0,0 +1,211 @@
+import { default as Select } from '../select';
+import { default as Icon } from '../icon';
+import { default as defaultTo } from 'carbon-components-ember/helpers/default-to';
+import { default as range } from 'ember-composable-helpers/helpers/range';
+import { default as eq } from 'ember-truth-helpers/helpers/eq';
+import { default as styles } from './styles.scoped.scss';
+import { default as didInsert } from '@ember/render-modifiers/modifiers/did-insert';
+import { default as didUpdate } from '@ember/render-modifiers/modifiers/did-update';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { default as or } from 'ember-truth-helpers/helpers/or';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { defaultArgs } from 'carbon-components-ember/decorators';
+import { next } from '@ember/runloop';
+/** @documenter yuidoc */
+
+type Slice = {
+  page: number;
+  itemsPerPage: number;
+  start: number;
+  end: number;
+};
+
+type Args = {
+  disabled?: boolean;
+  isLoading?: boolean;
+  length: number;
+  onPageChanged: (currentSlice: Slice) => void;
+  state?: {
+    page: number;
+    itemsPerPage: number;
+  };
+  itemsPerPageOptions?: (number | string)[];
+};
+
+export default class CarbonPagination extends Component<Args> {
+  @tracked currentPage = 1;
+  @tracked itemsPerPage = 10;
+
+  args: Args = defaultArgs(this, {
+    disabled: false,
+    length: 1,
+    onPageChanged: () => null,
+    state: null,
+    itemsPerPageOptions: null,
+  });
+
+  get defaultArgs() {
+    return this.args;
+  }
+
+  get pages() {
+    return parseInt((this.args.length / this.itemsPerPage).toString()) + 1;
+  }
+
+  get currentSlice(): Slice {
+    const ipp = this.itemsPerPage;
+    return {
+      page: this.currentPage,
+      itemsPerPage: this.itemsPerPage,
+      start: (this.currentPage - 1) * ipp,
+      end: (this.currentPage - 1) * ipp + ipp,
+    };
+  }
+
+  @action
+  setState(state) {
+    if (!state) return;
+    this.currentPage = state.page;
+    this.itemsPerPage = state.itemsPerPage;
+    this.lengthChanged();
+  }
+
+  @action
+  setItemsPerPage(items) {
+    this.itemsPerPage = items;
+    this.pageChanged();
+  }
+
+  @action
+  setCurrentPage(p) {
+    this.currentPage = p;
+    this.pageChanged();
+  }
+
+  @action
+  pageBack() {
+    this.currentPage -= 1;
+    this.pageChanged();
+  }
+
+  @action
+  pageForward() {
+    this.currentPage += 1;
+    this.pageChanged();
+  }
+
+  @action
+  pageChanged() {
+    next(() => {
+      this.args.onPageChanged(this.currentSlice);
+    });
+  }
+
+  @action
+  lengthChanged() {
+    if (this.currentPage > this.pages) {
+      this.currentPage = this.pages;
+      this.pageChanged();
+    }
+  }
+
+  <template>
+    <div
+      class='cds--pagination
+        {{styles.namespace}}
+        {{if @isLoading "cds--skeleton"}}'
+      data-pagination
+      {{didInsert this.pageChanged}}
+      {{didUpdate (fn this.setState @state) @state}}
+    >
+      {{#if @isLoading}}
+        <div class='cds--skeleton__text'></div>
+      {{else}}
+        <div class='cds--pagination__left'>
+          <label
+            id='select-id-pagination-count-label'
+            class='cds--pagination__text'
+            for='select-id-pagination-count'
+          >
+            Items per page:
+          </label>
+          <div class='cds--select cds--select--inline cds--select__item-count'>
+            <Select
+              @disabled={{@disabled}}
+              @searchEnabled={{false}}
+              @options={{defaultTo
+                this.defaultArgs.itemsPerPageOptions
+                (array 10 20 30 40 50 100)
+              }}
+              @onSelect={{this.setItemsPerPage}}
+              @selected={{this.itemsPerPage}}
+            />
+          </div>
+          <span class='cds--pagination__text'>
+            <span data-displayed-item-range>
+              {{this.currentSlice.start}}
+              -
+              {{this.currentSlice.end}}
+            </span>
+            of
+            <span data-total-items>
+              {{this.defaultArgs.length}}
+            </span>
+            items
+          </span>
+        </div>
+        <div class='cds--pagination__right'>
+          <Select
+            @multiple={{false}}
+            @disabled={{@disabled}}
+            @searchEnabled={{false}}
+            @options={{range 1 this.pages true}}
+            @onSelect={{this.setCurrentPage}}
+            @selected={{this.currentPage}}
+          />
+          <label
+            id='select-id-pagination-page-label'
+            class='cds--pagination__text'
+            for='select-id-pagination-page'
+          >
+            {{this.currentPage}}
+            of
+            {{this.pages}}
+            pages
+          </label>
+          <button
+            disabled={{or (eq this.currentPage 1) @disabled}}
+            class='cds--btn--icon-only cds--pagination__button cds--pagination__button--backward cds--btn cds--btn--md cds--btn--ghost'
+            tabindex='0'
+            data-page-backward
+            aria-label='previous page'
+            type='button'
+            {{on 'click' this.pageBack}}
+          >
+            <Icon
+              @btnClass='cds--pagination__nav-arrow'
+              @icon='chevron--left'
+            />
+          </button>
+          <button
+            disabled={{or (eq this.currentPage this.pages) @disabled}}
+            class='cds--btn--icon-only cds--pagination__button cds--pagination__button--forward cds--btn cds--btn--md cds--btn--ghost'
+            tabindex='0'
+            data-page-forward
+            aria-label='next page'
+            type='button'
+            {{on 'click' this.pageForward}}
+          >
+            <Icon
+              @btnClass='cds--pagination__nav-arrow'
+              @icon='chevron--right'
+            />
+          </button>
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/pagination/index.hbs b/carbon-components-ember/src/components/pagination/index.hbs
deleted file mode 100644
index 02380b5a..00000000
--- a/carbon-components-ember/src/components/pagination/index.hbs
+++ /dev/null
@@ -1,93 +0,0 @@
-{{import Select from '../select'}}
-{{import Icon from '../icon'}}
-{{import defaultTo from 'carbon-components-ember/helpers/default-to'}}
-{{import range from 'ember-composable-helpers/helpers/range'}}
-{{import eq from 'ember-truth-helpers/helpers/eq'}}
-{{import styles from './styles.scoped.scss'}}
-{{import didInsert from '@ember/render-modifiers/modifiers/did-insert'}}
-{{import didUpdate from '@ember/render-modifiers/modifiers/did-update'}}
-{{import '{ fn }' from '@ember/helper'}}
-{{import '{ on }' from '@ember/modifier'}}
-{{import or from 'ember-truth-helpers/helpers/or'}}
-
-<div
-  class='cds--pagination {{styles.namespace}} {{if @isLoading "cds--skeleton"}}'
-  data-pagination
-  {{didInsert this.pageChanged}}
-  {{didUpdate (fn this.setState @state) @state}}
->
-  {{#if @isLoading}}
-    <div class='cds--skeleton__text'></div>
-  {{else}}
-    <div class='cds--pagination__left'>
-      <label
-        id='select-id-pagination-count-label'
-        class='cds--pagination__text'
-        for='select-id-pagination-count'
-      >
-        Items per page:
-      </label>
-      <div class='cds--select cds--select--inline cds--select__item-count'>
-        <Select
-          @disabled={{@disabled}}
-          @searchEnabled={{false}}
-          @options={{defaultTo
-            this.defaultArgs.itemsPerPageOptions
-            (array 10 20 30 40 50 100)
-          }}
-          @onSelect={{this.setItemsPerPage}}
-          @selected={{this.itemsPerPage}}
-        />
-      </div>
-      <span class='cds--pagination__text'>
-        <span data-displayed-item-range>
-          {{this.currentSlice.start}} - {{this.currentSlice.end}}
-        </span>
-        of
-        <span data-total-items>
-          {{this.defaultArgs.length}}
-        </span>
-        items
-      </span>
-    </div>
-    <div class='cds--pagination__right'>
-      <Select
-        @multiple={{false}}
-        @disabled={{@disabled}}
-        @searchEnabled={{false}}
-        @options={{range 1 this.pages true}}
-        @onSelect={{this.setCurrentPage}}
-        @selected={{this.currentPage}}
-      />
-      <label
-        id='select-id-pagination-page-label'
-        class='cds--pagination__text'
-        for='select-id-pagination-page'
-      >
-        {{this.currentPage}} of {{this.pages}} pages
-      </label>
-      <button
-        disabled={{or (eq this.currentPage 1) @disabled}}
-        class='cds--btn--icon-only cds--pagination__button cds--pagination__button--backward cds--btn cds--btn--md cds--btn--ghost'
-        tabindex='0'
-        data-page-backward
-        aria-label='previous page'
-        type='button'
-        {{on 'click' this.pageBack}}
-      >
-        <Icon @btnClass='cds--pagination__nav-arrow' @icon='chevron--left' />
-      </button>
-      <button
-        disabled={{or (eq this.currentPage this.pages) @disabled}}
-        class='cds--btn--icon-only cds--pagination__button cds--pagination__button--forward cds--btn cds--btn--md cds--btn--ghost'
-        tabindex='0'
-        data-page-forward
-        aria-label='next page'
-        type='button'
-        {{on 'click' this.pageForward}}
-      >
-        <Icon @btnClass='cds--pagination__nav-arrow' @icon='chevron--right' />
-      </button>
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/pagination/index.ts b/carbon-components-ember/src/components/pagination/index.ts
deleted file mode 100644
index fd643359..00000000
--- a/carbon-components-ember/src/components/pagination/index.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { defaultArgs } from 'carbon-components-ember/decorators';
-import { next } from '@ember/runloop';
-/** @documenter yuidoc */
-
-type Slice = {
-  page: number;
-  itemsPerPage: number;
-  start: number;
-  end: number;
-}
-
-type Args = {
-  disabled?: boolean;
-  isLoading?: boolean;
-  length: number;
-  onPageChanged : (currentSlice: Slice) => void;
-  state?: {
-    page: number;
-    itemsPerPage: number;
-  };
-  itemsPerPageOptions?: (number|string)[];
-};
-
-export default class CarbonPagination extends Component<Args> {
-  @tracked currentPage = 1;
-  @tracked itemsPerPage = 10;
-
-  args: Args = defaultArgs(this, {
-    disabled: false,
-    length: 1,
-    onPageChanged : () => null,
-    state: null,
-    itemsPerPageOptions: null
-  });
-
-  get defaultArgs() {
-    return this.args;
-  }
-
-
-  get pages() {
-    return parseInt((this.args.length / this.itemsPerPage).toString()) + 1;
-  }
-
-  get currentSlice(): Slice {
-    const ipp = this.itemsPerPage;
-    return {
-      page: this.currentPage,
-      itemsPerPage: this.itemsPerPage,
-      start: (this.currentPage - 1) * ipp,
-      end: (this.currentPage - 1) * ipp + ipp
-    };
-  }
-
-  @action
-  setState(state) {
-    if (!state) return;
-    this.currentPage = state.page;
-    this.itemsPerPage = state.itemsPerPage;
-    this.lengthChanged();
-  }
-
-  @action
-  setItemsPerPage(items) {
-    this.itemsPerPage = items;
-    this.pageChanged();
-  }
-
-  @action
-  setCurrentPage(p) {
-    this.currentPage = p;
-    this.pageChanged();
-  }
-
-  @action
-  pageBack() {
-    this.currentPage -= 1;
-    this.pageChanged();
-  }
-
-  @action
-  pageForward() {
-    this.currentPage += 1;
-    this.pageChanged();
-  }
-
-  @action
-  pageChanged() {
-    next(() => {
-      this.args.onPageChanged(this.currentSlice);
-    });
-  }
-
-  @action
-  lengthChanged() {
-    if (this.currentPage > this.pages) {
-      this.currentPage = this.pages;
-      this.pageChanged();
-    }
-  }
-}
diff --git a/carbon-components-ember/src/components/progress-bar/index.gts b/carbon-components-ember/src/components/progress-bar/index.gts
index 05bbbe99..9217b910 100644
--- a/carbon-components-ember/src/components/progress-bar/index.gts
+++ b/carbon-components-ember/src/components/progress-bar/index.gts
@@ -7,14 +7,14 @@ import { concat } from '@ember/helper';
 import { default as d } from '@ascua/maths/helpers/div';
 
 type Args = {
-  status?: 'active'|'finished'|'error'|'indeterminate';
-  size?: 'small'|'big';
-  type?: 'default'|'inline'|'indented';
+  status?: 'active' | 'finished' | 'error' | 'indeterminate';
+  size?: 'small' | 'big';
+  type?: 'default' | 'inline' | 'indented';
   value?: number;
   max?: number;
   label?: string;
   helperText?: string;
-}
+};
 
 export interface ProgressBarInterface {
   Args: Args;
@@ -24,15 +24,15 @@ export interface ProgressBarInterface {
   };
 }
 
-/**
- The Carbon ProgressBar
-
- ```handlebars
-
- <Carbon::ProgressBar />
- ```
- @class CarbonButton
- @public
+/**
+ The Carbon ProgressBar
+
+ ```handlebars
+
+ <Carbon::ProgressBar />
+ ```
+ @class CarbonButton
+ @public
  **/
 export default class ProgressBar extends Component<ProgressBarInterface> {
   get guid() {
@@ -40,15 +40,19 @@ export default class ProgressBar extends Component<ProgressBarInterface> {
   }
 
   get defaultArgs(): WithRequired<Args, 'max'> {
-    return Object.assign({}, {
-      status: 'active',
-      value: undefined,
-      max: 100,
-      size: undefined,
-      type: 'default',
-      helperText: '',
-      label: '',
-    }, this.args)
+    return Object.assign(
+      {},
+      {
+        status: 'active',
+        value: undefined,
+        max: 100,
+        size: undefined,
+        type: 'default',
+        helperText: '',
+        label: '',
+      },
+      this.args,
+    );
   }
 
   <template>
@@ -108,6 +112,3 @@ export default class ProgressBar extends Component<ProgressBarInterface> {
     </div>
   </template>
 }
-
-
-
diff --git a/carbon-components-ember/src/components/radio/group.gts b/carbon-components-ember/src/components/radio/group.gts
index 24ef0d62..15b8536c 100644
--- a/carbon-components-ember/src/components/radio/group.gts
+++ b/carbon-components-ember/src/components/radio/group.gts
@@ -14,12 +14,11 @@ interface Signature {
   Element: null;
   Blocks: {
     heading: [];
-    default: [WithBoundArgs<typeof RadioButton, 'group'|'onChange'>];
+    default: [WithBoundArgs<typeof RadioButton, 'group' | 'onChange'>];
   };
 }
 
 export default class RadioButtonGroup extends Component<Signature> {
-
   args: Signature['Args'] = defaultArgs(this, {
     orientation: 'horizontal',
     labelPosition: 'left',
diff --git a/carbon-components-ember/src/components/radio/index.gts b/carbon-components-ember/src/components/radio/index.gts
index 04f4b74b..a5daeeca 100644
--- a/carbon-components-ember/src/components/radio/index.gts
+++ b/carbon-components-ember/src/components/radio/index.gts
@@ -22,7 +22,6 @@ interface Signature {
 }
 
 export default class RadioButton extends Component<Signature> {
-
   get guid() {
     return guidFor(this);
   }
diff --git a/carbon-components-ember/src/components/search-input/index.gts b/carbon-components-ember/src/components/search-input/index.gts
index e77beb8d..f83832a5 100644
--- a/carbon-components-ember/src/components/search-input/index.gts
+++ b/carbon-components-ember/src/components/search-input/index.gts
@@ -2,8 +2,8 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
-import { task } from 'ember-concurrency'
-import { timeout, TaskInstance } from 'ember-concurrency'
+import { task } from 'ember-concurrency';
+import { timeout, TaskInstance } from 'ember-concurrency';
 import { autoComputed } from 'carbon-components-ember/decorators';
 import didUpdate from '@ember/render-modifiers/modifiers/did-update';
 import { fn } from '@ember/helper';
@@ -14,11 +14,11 @@ import { next } from '@ember/runloop';
 type Args = {
   onChange(value: any): TaskInstance<any> | undefined | void;
   value: string;
-  size?: 'lg'|'md'|'sm';
+  size?: 'lg' | 'md' | 'sm';
   isLoading?: boolean;
   expandable?: boolean;
   light?: boolean;
-}
+};
 
 export interface SearchComponentSignature {
   Args: Args;
@@ -39,7 +39,7 @@ export default class SearchComponent extends Component<SearchComponentSignature>
     return guidFor(this);
   }
 
-  runSearch = task({ restartable: true }, async() => {
+  runSearch = task({ restartable: true }, async () => {
     this.isSearching = true;
     await timeout(200);
     const task = this.args.onChange(this.value);
@@ -49,7 +49,7 @@ export default class SearchComponent extends Component<SearchComponentSignature>
       this.isSearching = false;
       task && task.cancel && task.cancel();
     }
-  })
+  });
   @action
   onSearchChange() {
     this.runSearch.perform();
@@ -72,7 +72,7 @@ export default class SearchComponent extends Component<SearchComponentSignature>
   @action
   activate(mouseEvent: Event) {
     if (this.isActive) {
-      return
+      return;
     }
     const element = mouseEvent.target as HTMLDivElement;
     this.isActive = true;
diff --git a/carbon-components-ember/src/components/select/index.gts b/carbon-components-ember/src/components/select/index.gts
index 74d6ca8c..efc3819b 100644
--- a/carbon-components-ember/src/components/select/index.gts
+++ b/carbon-components-ember/src/components/select/index.gts
@@ -3,37 +3,43 @@ import { set, action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { defaultArgs } from 'carbon-components-ember/decorators';
 import jQuery from 'jquery';
-import PowerSelect,  { PowerSelectArgs } from 'ember-power-select/components/power-select';
-import { ContentValue } from '@glint/template'
-import PowerSelectMultiple,  { PowerSelectMultipleSignature } from 'ember-power-select/components/power-select-multiple';
+import PowerSelect, {
+  PowerSelectArgs,
+} from 'ember-power-select/components/power-select';
+import { ContentValue } from '@glint/template';
+import PowerSelectMultiple, {
+  PowerSelectMultipleSignature,
+} from 'ember-power-select/components/power-select-multiple';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import defaultTo from 'carbon-components-ember/helpers/default-to';
 import Checkbox from 'carbon-components-ember/components/checkbox';
 import isSelected from 'ember-power-select/helpers/ember-power-select-is-selected';
 
 type Args<T extends ContentValue> = {
-    options: T[];
-    searchField?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    searchEnabled?: boolean;
-    onSelect?: (item) => void;
-    addItem?: (item) => void;
-    removeItem?: (item) => void;
-  }
-  & ({
-  selected: T[];
-  multiple: true;
-  onOpen?: PowerSelectMultipleSignature<T>['Args']['onOpen'];
-  search?: PowerSelectMultipleSignature<T>['Args']['search'];
-  selectFocused?: PowerSelectMultipleSignature<T>['Args']['onFocus'];
-} | {
-  selected: T;
-  multiple?: false;
-  onOpen?: PowerSelectArgs<T>['onOpen'];
-  search?: PowerSelectArgs<T>['search'];
-  selectFocused?: PowerSelectArgs<T>['onFocus'];
-})
+  options: T[];
+  searchField?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  searchEnabled?: boolean;
+  onSelect?: (item) => void;
+  addItem?: (item) => void;
+  removeItem?: (item) => void;
+} & (
+  | {
+      selected: T[];
+      multiple: true;
+      onOpen?: PowerSelectMultipleSignature<T>['Args']['onOpen'];
+      search?: PowerSelectMultipleSignature<T>['Args']['search'];
+      selectFocused?: PowerSelectMultipleSignature<T>['Args']['onFocus'];
+    }
+  | {
+      selected: T;
+      multiple?: false;
+      onOpen?: PowerSelectArgs<T>['onOpen'];
+      search?: PowerSelectArgs<T>['search'];
+      selectFocused?: PowerSelectArgs<T>['onFocus'];
+    }
+);
 
 export interface SelectComponentSignature<T extends ContentValue> {
   Args: Args<T>;
@@ -43,8 +49,9 @@ export interface SelectComponentSignature<T extends ContentValue> {
   };
 }
 
-export default class SelectComponent<T extends ContentValue> extends Component<SelectComponentSignature<T>> {
-
+export default class SelectComponent<T extends ContentValue> extends Component<
+  SelectComponentSignature<T>
+> {
   args: Args<T> = defaultArgs(this, {
     selected: [],
     multiple: false,
@@ -52,13 +59,17 @@ export default class SelectComponent<T extends ContentValue> extends Component<S
     onSelect: () => null,
     addItem: () => null,
     removeItem: () => null,
-  })
+  });
 
   searchMatcher(item, term) {
     if (!term || term === '') return 1;
     const pass = Object.values(item.toJSON ? item.toJSON() : item)
-      .filter(v => v && !(v as any).defaultAdapter)
-      .some(v => (typeof v === 'string' ? v.includes(term) : JSON.stringify(v).includes(term)));
+      .filter((v) => v && !(v as any).defaultAdapter)
+      .some((v) =>
+        typeof v === 'string'
+          ? v.includes(term)
+          : JSON.stringify(v).includes(term),
+      );
     if (pass) return 1;
     return -1;
   }
@@ -72,7 +83,10 @@ export default class SelectComponent<T extends ContentValue> extends Component<S
   onChange(choice) {
     if (this.args.multiple) {
       choice.forEach((item) => {
-        if (!this.args.selected || !(this.args.selected as T[]).includes(item)) {
+        if (
+          !this.args.selected ||
+          !(this.args.selected as T[]).includes(item)
+        ) {
           if (this.args.addItem) this.args.addItem(item);
         }
       });
@@ -96,11 +110,11 @@ export default class SelectComponent<T extends ContentValue> extends Component<S
   handleKeydown(select, event) {
     const selected = this.args.selected || [];
 
-
     let backspaceHandled = false;
 
     // Delete the entire last tag if backspacing into the tags area.
-    if (event.keyCode === 8 && isBlank(event.target.value)) { // BACKSPACE === 8
+    if (event.keyCode === 8 && isBlank(event.target.value)) {
+      // BACKSPACE === 8
       if (Array.isArray(selected)) {
         if (this.args.removeItem) this.args.removeItem(selected.slice(-1)[0]);
       }
@@ -109,7 +123,8 @@ export default class SelectComponent<T extends ContentValue> extends Component<S
       return false;
     }
 
-    if (event.keyCode === 13) { // enter === 8
+    if (event.keyCode === 13) {
+      // enter === 8
       set(select, 'searchText', '');
       backspaceHandled = true;
     }
@@ -123,11 +138,15 @@ export default class SelectComponent<T extends ContentValue> extends Component<S
   @action
   didInsert(element) {
     // eslint-disable-next-line ember/no-jquery
-    jQuery(element).find('.ember-power-select-status-icon').replaceWith(''
-      + '<svg class="cds--dropdown__arrow" '
-      + 'width="10" height="6" viewBox="0 0 10 6">\n'
-      + '    <path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path>\n'
-      + '  </svg>');
+    jQuery(element)
+      .find('.ember-power-select-status-icon')
+      .replaceWith(
+        '' +
+          '<svg class="cds--dropdown__arrow" ' +
+          'width="10" height="6" viewBox="0 0 10 6">\n' +
+          '    <path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path>\n' +
+          '  </svg>',
+      );
   }
 
   <template>
@@ -191,6 +210,3 @@ export default class SelectComponent<T extends ContentValue> extends Component<S
     {{/if}}
   </template>
 }
-
-
-
diff --git a/carbon-components-ember/src/components/tabs/index.gts b/carbon-components-ember/src/components/tabs/index.gts
index 26d626cb..9a87eeab 100644
--- a/carbon-components-ember/src/components/tabs/index.gts
+++ b/carbon-components-ember/src/components/tabs/index.gts
@@ -21,7 +21,12 @@ type Args = {
 };
 
 class TabPane extends Component<{
-  Args: { tab: TabsComponent; title: string; disabled?: boolean; isDefault?: boolean };
+  Args: {
+    tab: TabsComponent;
+    title: string;
+    disabled?: boolean;
+    isDefault?: boolean;
+  };
   Blocks: {
     default: [];
   };
diff --git a/carbon-components-ember/src/components/tag/index.gts b/carbon-components-ember/src/components/tag/index.gts
index 11679a9b..2bedc7e0 100644
--- a/carbon-components-ember/src/components/tag/index.gts
+++ b/carbon-components-ember/src/components/tag/index.gts
@@ -1,8 +1,18 @@
 import Component from '@glimmer/component';
 
 type Args = {
-  type: 'red'|'magenta'|'purple'|'blue'|'cyan'|'teal'|'green'|'gray'|'cool-gray'|'warm-gray';
-}
+  type:
+    | 'red'
+    | 'magenta'
+    | 'purple'
+    | 'blue'
+    | 'cyan'
+    | 'teal'
+    | 'green'
+    | 'gray'
+    | 'cool-gray'
+    | 'warm-gray';
+};
 
 export interface TagInterface {
   Args: Args;
@@ -14,9 +24,16 @@ export interface TagInterface {
 
 export default class TagComponent extends Component<TagInterface> {
   get type() {
-    const types = 'red magenta purple blue cyan teal green gray cool-gray warm-gray'.split(' ');
+    const types =
+      'red magenta purple blue cyan teal green gray cool-gray warm-gray'.split(
+        ' ',
+      );
     if (!types.includes(this.args.type)) {
-      console.error(`${this.args.type} not supported type for Carbon::Tag, supported are:${types.join(',')}`);
+      console.error(
+        `${
+          this.args.type
+        } not supported type for Carbon::Tag, supported are:${types.join(',')}`,
+      );
     }
     return this.args.type;
   }
diff --git a/carbon-components-ember/src/components/tile/index.gts b/carbon-components-ember/src/components/tile/index.gts
index f0b19673..4db2f15d 100644
--- a/carbon-components-ember/src/components/tile/index.gts
+++ b/carbon-components-ember/src/components/tile/index.gts
@@ -16,7 +16,7 @@ type Args = {
   onClick?: () => null;
   onSelect?: () => null;
   tabindex?: string;
-}
+};
 
 export interface TileComponentSignature {
   Args: Args;
@@ -28,7 +28,6 @@ export interface TileComponentSignature {
 }
 
 export default class TileComponent extends Component<TileComponentSignature> {
-
   @tracked selected = null;
   @tracked expanded: boolean = false;
 
@@ -38,7 +37,9 @@ export default class TileComponent extends Component<TileComponentSignature> {
   }
 
   get default() {
-    return !this.args.selectable && !this.args.expandable && !this.args.clickable;
+    return (
+      !this.args.selectable && !this.args.expandable && !this.args.clickable
+    );
   }
 
   @action
diff --git a/carbon-components-ember/src/components/toggle/index.gts b/carbon-components-ember/src/components/toggle/index.gts
index 903b41c3..9c86b94e 100644
--- a/carbon-components-ember/src/components/toggle/index.gts
+++ b/carbon-components-ember/src/components/toggle/index.gts
@@ -10,12 +10,13 @@ type Args = {
   readonly?: boolean;
   disabled?: boolean;
   name?: string;
-  size?: 'sm'|'md';
-}
+  size?: 'sm' | 'md';
+};
 
 export default class ToggleComponent extends Component<Args> {
-
-  get guid() { return guidFor(this); }
+  get guid() {
+    return guidFor(this);
+  }
 
   @action
   onToggleChange() {
diff --git a/carbon-components-ember/src/components/ui-shell/-header/index.gts b/carbon-components-ember/src/components/ui-shell/-header/index.gts
new file mode 100644
index 00000000..8b96ed9c
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/-header/index.gts
@@ -0,0 +1,54 @@
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import { default as eq } from 'ember-truth-helpers/helpers/eq';
+import { default as not } from 'ember-truth-helpers/helpers/not';
+import { default as and } from 'ember-truth-helpers/helpers/and';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+
+export interface UiShellHeaderSignature {
+  Args: {
+    title: string;
+    subtitle: string;
+    open?: boolean;
+    onToggle?: (value: boolean) => void;
+  };
+  Blocks: {
+    header: [];
+    headerGlobal: [];
+  };
+}
+
+export default class UiShellHeader extends Component<UiShellHeaderSignature> {
+  <template>
+    <header aria-label='IBM Platform Name' class='cds--header'>
+      <a class='cds--skip-to-content' href='#main-content' tabindex='0'>
+        Skip to main content
+      </a>
+      {{#if @onToggle}}
+        <button
+          aria-label='Open menu'
+          class='cds--header__action cds--header__menu-trigger cds--header__menu-toggle
+            {{if @open "" "cds--header__menu-toggle"}}'
+          title='Open menu'
+          type='button'
+          {{on 'click' (fn @onToggle (not @open))}}
+        >
+          <Icon @icon={{if @open 'close' 'menu'}} />
+        </button>
+      {{/if}}
+      <a class='cds--header__name' href='#'>
+        <span class='cds--header__name--prefix'>
+          {{@title}}
+          <small>
+            {{@subtitle}}
+          </small>
+        </span>
+      </a>
+      {{yield to='header'}}
+      <div class='cds--header__global'>
+        {{yield to='headerGlobal'}}
+      </div>
+    </header>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/ui-shell/-header/index.hbs b/carbon-components-ember/src/components/ui-shell/-header/index.hbs
deleted file mode 100644
index dd7d7d6f..00000000
--- a/carbon-components-ember/src/components/ui-shell/-header/index.hbs
+++ /dev/null
@@ -1,36 +0,0 @@
-{{import Icon from 'carbon-components-ember/components/icon'}}
-{{import eq from 'ember-truth-helpers/helpers/eq'}}
-{{import not from 'ember-truth-helpers/helpers/not'}}
-{{import and from 'ember-truth-helpers/helpers/and'}}
-{{import '{ on }' from '@ember/modifier'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-<header aria-label='IBM Platform Name' class='cds--header'>
-  <a class='cds--skip-to-content' href='#main-content' tabindex='0'>
-    Skip to main content
-  </a>
-  {{#if @onToggle}}
-    <button
-      aria-label='Open menu'
-      class='cds--header__action cds--header__menu-trigger cds--header__menu-toggle
-        {{if @open "" "cds--header__menu-toggle"}}'
-      title='Open menu'
-      type='button'
-      {{on 'click' (fn @onToggle (not @open))}}
-    >
-      <Icon @icon={{if @open 'close' 'menu'}} />
-    </button>
-  {{/if}}
-  <a class='cds--header__name' href='#'>
-    <span class='cds--header__name--prefix'>
-      {{@title}}
-      <small>
-        {{@subtitle}}
-      </small>
-    </span>
-  </a>
-  {{yield to='header'}}
-  <div class='cds--header__global'>
-    {{yield to='headerGlobal'}}
-  </div>
-</header>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/-header/index.ts b/carbon-components-ember/src/components/ui-shell/-header/index.ts
deleted file mode 100644
index b9c2457c..00000000
--- a/carbon-components-ember/src/components/ui-shell/-header/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from '@glimmer/component';
-
-export interface UiShellHeaderSignature {
-  Args: {
-    title: string;
-    subtitle: string;
-    open?: boolean;
-    onToggle?: (value: boolean) => void;
-  };
-  Blocks: {
-    header: [];
-    headerGlobal: [];
-  };
-}
-
-export default class UiShellHeader extends Component<UiShellHeaderSignature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/ui-shell/-nav/-item/index.gts b/carbon-components-ember/src/components/ui-shell/-nav/-item/index.gts
new file mode 100644
index 00000000..91cb35e6
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/-nav/-item/index.gts
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+
+export interface Signature {
+  Args: {};
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class UiShellNavItem extends Component<Signature> {
+  <template>
+    <li>
+      <a href='#' class='cds--header__menu-item' tabindex='0'>
+        <span class='cds--text-truncate--end'>
+          {{yield}}
+        </span>
+      </a>
+    </li>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/ui-shell/-nav/-item/index.hbs b/carbon-components-ember/src/components/ui-shell/-nav/-item/index.hbs
deleted file mode 100644
index c297a206..00000000
--- a/carbon-components-ember/src/components/ui-shell/-nav/-item/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<li>
-  <a href='#' class='cds--header__menu-item' tabindex='0'>
-    <span class='cds--text-truncate--end'>
-      {{yield}}
-    </span>
-  </a>
-</li>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/-nav/-item/index.ts b/carbon-components-ember/src/components/ui-shell/-nav/-item/index.ts
deleted file mode 100644
index 62532f9e..00000000
--- a/carbon-components-ember/src/components/ui-shell/-nav/-item/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from '@glimmer/component';
-
-export interface Signature {
-  Args: {};
-  Blocks: {
-    default: [];
-  };
-}
-
-export default class UiShellNavItem extends Component<Signature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/ui-shell/-nav/index.gts b/carbon-components-ember/src/components/ui-shell/-nav/index.gts
new file mode 100644
index 00000000..00e2d42e
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/-nav/index.gts
@@ -0,0 +1,21 @@
+import { default as Item } from './-item';
+import Component from '@glimmer/component';
+import UiShellNavItem from 'carbon-components-ember/components/ui-shell/-nav/-item';
+
+export interface Signature {
+  Args: {};
+  Element: null;
+  Blocks: {
+    default: [typeof UiShellNavItem];
+  };
+}
+
+export default class InnerClass extends Component<Signature> {
+  <template>
+    <nav aria-label='IBM [Platform]' class='cds--header__nav'>
+      <ul class='cds--header__menu-bar'>
+        {{yield Item}}
+      </ul>
+    </nav>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/ui-shell/-nav/index.hbs b/carbon-components-ember/src/components/ui-shell/-nav/index.hbs
deleted file mode 100644
index b183c6d4..00000000
--- a/carbon-components-ember/src/components/ui-shell/-nav/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-{{import Item from './-item'}}
-
-<nav aria-label='IBM [Platform]' class='cds--header__nav'>
-  <ul class='cds--header__menu-bar'>
-    {{yield Item}}
-  </ul>
-</nav>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/-nav/index.ts b/carbon-components-ember/src/components/ui-shell/-nav/index.ts
deleted file mode 100644
index c9195e67..00000000
--- a/carbon-components-ember/src/components/ui-shell/-nav/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import Component from '@glimmer/component';
-import UiShellNavItem from 'carbon-components-ember/components/ui-shell/-nav/-item';
-
-export interface Signature {
-  Args: {};
-  Element: null;
-  Blocks: {
-    default: [typeof UiShellNavItem];
-  };
-}
-
-export default class InnerClass extends Component<Signature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.gts b/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.gts
new file mode 100644
index 00000000..3b52186c
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.gts
@@ -0,0 +1,96 @@
+import { default as SubMenu } from '../-sub-menu';
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import { default as newObj } from 'carbon-components-ember/helpers/new-obj';
+import { on } from '@ember/modifier';
+import { get, concat, fn } from '@ember/helper';
+import { default as toggle } from 'ember-composable-helpers/helpers/toggle';
+import { default as or } from 'ember-truth-helpers/helpers/or';
+import Component from '@glimmer/component';
+import { IconNames } from 'carbon-components-ember/components/icon';
+import SubMenuComponent from 'carbon-components-ember/components/ui-shell/-sidenav/-sub-menu';
+
+export type SubMenu = {
+  icon: IconNames;
+  title: string;
+};
+
+export interface Signature {
+  Args: {
+    transitionTo: () => void;
+    hidden?: boolean;
+    open?: boolean;
+    isCurrent: boolean;
+    icon: IconNames;
+    title: string;
+    submenus: SubMenu[];
+  };
+  Element: null;
+  Blocks: {
+    default: [typeof SubMenuComponent];
+  };
+}
+
+export default class NavMenuComponent extends Component<Signature> {
+  <template>
+    {{#if @submenus}}
+      {{#let (newObj) as |obj|}}
+        <li
+          class='cds--side-nav__item {{if @icon "cds--side-nav__item--icon"}}'
+        >
+          <button
+            class='cds--side-nav__submenu'
+            aria-haspopup='true'
+            aria-expanded='{{or @open (get obj (concat @title "-expanded"))}}'
+            type='button'
+            {{on 'click' (fn (toggle (concat @title '-expanded') obj))}}
+          >
+            {{#if @icon}}
+              <div class='cds--side-nav__icon'>
+                <Icon @icon='{{@icon}}' />
+              </div>
+            {{/if}}
+            <span class='cds--side-nav__submenu-title'>
+              {{@title}}
+            </span>
+            <div
+              class='cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron'
+            >
+              <Icon @icon='chevron--down' />
+            </div>
+          </button>
+          {{#if (or @open (get obj (concat @title '-expanded')))}}
+            <ul
+              role='menu'
+              class='cds--side-nav__menu'
+              style='    max-height: 93.75rem; visibility: inherit;'
+            >
+              {{yield SubMenu}}
+            </ul>
+          {{/if}}
+        </li>
+      {{/let}}
+    {{else}}
+      {{#unless @hidden}}
+        <li class='cds--side-nav__item'>
+          {{! template-lint-disable require-presentational-children }}
+          <a
+            href='#'
+            class='cds--side-nav__link'
+            aria-current='{{if @isCurrent "page"}}'
+            role='button'
+            {{on 'click' @transitionTo}}
+          >
+            {{#if @icon}}
+              <div class='cds--side-nav__icon cds--side-nav__icon--small'>
+                <Icon @icon='{{@icon}}' />
+              </div>
+            {{/if}}
+            <span class='cds--side-nav__link-text'>
+              {{@title}}
+            </span>
+          </a>
+        </li>
+      {{/unless}}
+    {{/if}}
+  </template>
+}
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.hbs b/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.hbs
deleted file mode 100644
index a861dc7b..00000000
--- a/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.hbs
+++ /dev/null
@@ -1,66 +0,0 @@
-{{import SubMenu from "../-sub-menu"}}
-{{import Icon from "carbon-components-ember/components/icon"}}
-{{import newObj from "carbon-components-ember/helpers/new-obj"}}
-{{import "{ on }" from "@ember/modifier"}}
-{{import "{ get, concat, fn }" from "@ember/helper"}}
-{{import toggle from "ember-composable-helpers/helpers/toggle"}}
-{{import or from "ember-truth-helpers/helpers/or"}}
-
-{{#if @submenus}}
-  {{#let (newObj) as |obj|}}
-    <li class="cds--side-nav__item {{if @icon 'cds--side-nav__item--icon'}}">
-      <button
-        class="cds--side-nav__submenu"
-        aria-haspopup="true"
-        aria-expanded="{{or @open (get obj (concat @title '-expanded'))}}"
-        type="button"
-        {{on "click" (fn (toggle (concat @title "-expanded") obj))}}
-      >
-        {{#if @icon}}
-          <div class="cds--side-nav__icon">
-            <Icon @icon="{{@icon}}" />
-          </div>
-        {{/if}}
-        <span class="cds--side-nav__submenu-title">
-          {{@title}}
-        </span>
-        <div
-          class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
-        >
-          <Icon @icon="chevron--down" />
-        </div>
-      </button>
-      {{#if (or @open (get obj (concat @title "-expanded")))}}
-        <ul
-          role="menu"
-          class="cds--side-nav__menu"
-          style="    max-height: 93.75rem; visibility: inherit;"
-        >
-          {{yield SubMenu}}
-        </ul>
-      {{/if}}
-    </li>
-  {{/let}}
-{{else}}
-  {{#unless @hidden}}
-    <li class="cds--side-nav__item">
-      {{! template-lint-disable require-presentational-children }}
-      <a
-        href="#"
-        class="cds--side-nav__link"
-        aria-current="{{if @isCurrent 'page'}}"
-        role="button"
-        {{on "click" @transitionTo}}
-      >
-        {{#if @icon}}
-          <div class="cds--side-nav__icon cds--side-nav__icon--small">
-            <Icon @icon="{{@icon}}" />
-          </div>
-        {{/if}}
-        <span class="cds--side-nav__link-text">
-          {{@title}}
-        </span>
-      </a>
-    </li>
-  {{/unless}}
-{{/if}}
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.ts b/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.ts
deleted file mode 100644
index 9a86b5ad..00000000
--- a/carbon-components-ember/src/components/ui-shell/-sidenav/-menu/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import Component from '@glimmer/component';
-import { IconNames } from 'carbon-components-ember/components/icon';
-import SubMenuComponent from 'carbon-components-ember/components/ui-shell/-sidenav/-sub-menu';
-
-export type SubMenu = {
-  icon: IconNames;
-  title: string;
-};
-
-export interface Signature {
-  Args: {
-    transitionTo: () => void;
-    hidden?: boolean;
-    open?: boolean;
-    isCurrent: boolean;
-    icon: IconNames;
-    title: string;
-    submenus: SubMenu[];
-  };
-  Element: null;
-  Blocks: {
-    default: [typeof SubMenuComponent];
-  };
-}
-
-export default class NavMenuComponent extends Component<Signature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.gts b/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.gts
new file mode 100644
index 00000000..5dc631dd
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.gts
@@ -0,0 +1,40 @@
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import Component from '@glimmer/component';
+import Icon from 'carbon-components-ember/components/icon';
+
+export interface Signature {
+  Args: {
+    isCurrent: boolean;
+    transitionTo: () => void;
+    icon: Icon['args']['icon'];
+    title: string;
+  };
+  Element: null;
+  Blocks: {};
+}
+
+export default class SubMenuComponent extends Component<Signature> {
+  <template>
+    <li class='cds--side-nav__menu-item' role='menu'>
+      <a
+        href='#'
+        role='menuitem'
+        aria-current='{{if @isCurrent "page"}}'
+        class='cds--side-nav__link'
+        {{on 'click' @transitionTo}}
+      >
+        {{#if @icon}}
+          <div class='cds--side-nav__icon'>
+            <Icon @icon='{{@icon}}' />
+          </div>
+        {{/if}}
+        <span class='cds--side-nav__link-text'>
+          {{@title}}
+        </span>
+      </a>
+    </li>
+  </template>
+}
+
+
+
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.hbs b/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.hbs
deleted file mode 100644
index 50fdfb65..00000000
--- a/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-{{import Icon from 'carbon-components-ember/components/icon'}}
-{{import '{ on }' from '@ember/modifier'}}
-
-<li class='cds--side-nav__menu-item' role='menu'>
-  <a
-    href='#'
-    role='menuitem'
-    aria-current='{{if @isCurrent "page"}}'
-    class='cds--side-nav__link'
-    {{on 'click' @transitionTo}}
-  >
-    {{#if @icon}}
-      <div class='cds--side-nav__icon'>
-        <Icon @icon='{{@icon}}' />
-      </div>
-    {{/if}}
-    <span class='cds--side-nav__link-text'>
-      {{@title}}
-    </span>
-  </a>
-</li>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.ts b/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.ts
deleted file mode 100644
index 90bfd9e8..00000000
--- a/carbon-components-ember/src/components/ui-shell/-sidenav/-sub-menu/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Component from '@glimmer/component';
-import Icon from 'carbon-components-ember/components/icon';
-
-export interface Signature {
-  Args: {
-    isCurrent: boolean;
-    transitionTo: () => void;
-    icon: Icon['args']['icon'];
-    title: string;
-  };
-  Element: null;
-  Blocks: {};
-}
-
-export default class SubMenuComponent extends Component<Signature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/index.gts b/carbon-components-ember/src/components/ui-shell/-sidenav/index.gts
new file mode 100644
index 00000000..2182d3aa
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/-sidenav/index.gts
@@ -0,0 +1,67 @@
+import { default as Icon } from 'carbon-components-ember/components/icon';
+import { default as eq } from 'ember-truth-helpers/helpers/eq';
+import { default as toggle } from 'ember-composable-helpers/helpers/toggle';
+import { default as styles } from './styles.scoped.scss';
+import { default as Menu } from './-menu';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import NavMenuComponent, { SubMenu } from './-menu';
+import { IconNames } from 'carbon-components-ember/components/icon';
+
+export type MenuItem = {
+  submenus: SubMenu[];
+  icon: IconNames;
+  title: string;
+};
+
+export interface UiShellNavSignature {
+  Args: {
+    open: boolean;
+    menuItems: MenuItem[];
+    currentMenu: MenuItem;
+    transitionTo: (menu: MenuItem) => void;
+  };
+  Blocks: {
+    default: [typeof NavMenuComponent];
+    shell: [{ Header; Sidenav; Nav }];
+    content: [];
+  };
+}
+
+export default class UiShellNav extends Component<UiShellNavSignature> {
+  <template>
+    <nav
+      class='cds--side-nav__navigation cds--side-nav cds--side-nav--ux
+        {{if @open "cds--side-nav--expanded"}}
+        {{styles.namespace}}'
+      role='navigation'
+      aria-label='Page Navigation'
+    >
+      <ul class='cds--side-nav__items'>
+        {{#unless @menuItems}}
+          {{yield Menu}}
+        {{/unless}}
+        {{#each @menuItems as |menu|}}
+          <Menu
+            @submenus={{menu.submenus}}
+            @icon={{menu.icon}}
+            @title={{menu.title}}
+            @open={{@open}}
+            @isCurrent={{eq menu @currentMenu}}
+            @transitionTo={{fn @transitionTo menu}}
+            as |Sub|
+          >
+            {{#each menu.submenus as |submenu|}}
+              <Sub
+                @isCurrent={{eq submenu @currentMenu}}
+                @transitionTo={{fn @transitionTo submenu}}
+                @icon={{submenu.icon}}
+                @title={{submenu.title}}
+              />
+            {{/each}}
+          </Menu>
+        {{/each}}
+      </ul>
+    </nav>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/index.hbs b/carbon-components-ember/src/components/ui-shell/-sidenav/index.hbs
deleted file mode 100644
index 62de2198..00000000
--- a/carbon-components-ember/src/components/ui-shell/-sidenav/index.hbs
+++ /dev/null
@@ -1,40 +0,0 @@
-{{import Icon from 'carbon-components-ember/components/icon'}}
-{{import eq from 'ember-truth-helpers/helpers/eq'}}
-{{import toggle from 'ember-composable-helpers/helpers/toggle'}}
-{{import styles from './styles.scoped.scss'}}
-{{import Menu from './-menu'}}
-{{import '{ fn }' from '@ember/helper'}}
-
-<nav
-  class='cds--side-nav__navigation cds--side-nav cds--side-nav--ux
-    {{if @open "cds--side-nav--expanded"}}
-    {{styles.namespace}}'
-  role='navigation'
-  aria-label='Page Navigation'
->
-  <ul class='cds--side-nav__items'>
-    {{#unless @menuItems}}
-      {{yield Menu}}
-    {{/unless}}
-    {{#each @menuItems as |menu|}}
-      <Menu
-        @submenus={{menu.submenus}}
-        @icon={{menu.icon}}
-        @title={{menu.title}}
-        @open={{@open}}
-        @isCurrent={{eq menu @currentMenu}}
-        @transitionTo={{fn @transitionTo menu}}
-        as |Sub|
-      >
-        {{#each menu.submenus as |submenu|}}
-          <Sub
-            @isCurrent={{eq submenu @currentMenu}}
-            @transitionTo={{fn @transitionTo submenu}}
-            @icon={{submenu.icon}}
-            @title={{submenu.title}}
-          />
-        {{/each}}
-      </Menu>
-    {{/each}}
-  </ul>
-</nav>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/-sidenav/index.ts b/carbon-components-ember/src/components/ui-shell/-sidenav/index.ts
deleted file mode 100644
index 1e49a087..00000000
--- a/carbon-components-ember/src/components/ui-shell/-sidenav/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Component from '@glimmer/component';
-import NavMenuComponent, { SubMenu } from './-menu';
-import { IconNames } from 'carbon-components-ember/components/icon';
-
-export type MenuItem = {
-  submenus: SubMenu[];
-  icon: IconNames;
-  title: string;
-}
-
-export interface UiShellNavSignature {
-  Args: {
-    open: boolean;
-    menuItems: MenuItem[];
-    currentMenu: MenuItem;
-    transitionTo: (menu: MenuItem) => void;
-  };
-  Blocks: {
-    default: [typeof NavMenuComponent];
-    shell: [{Header; Sidenav; Nav}];
-    content: [];
-  };
-}
-
-export default class UiShellNav extends Component<UiShellNavSignature> {}
-
-
-
diff --git a/carbon-components-ember/src/components/ui-shell/index.gts b/carbon-components-ember/src/components/ui-shell/index.gts
new file mode 100644
index 00000000..e354c4d1
--- /dev/null
+++ b/carbon-components-ember/src/components/ui-shell/index.gts
@@ -0,0 +1,21 @@
+import { default as Header } from './-header';
+import { default as Sidenav } from './-sidenav';
+import { default as Nav } from './-nav';
+import Component from '@glimmer/component';
+import UiShellHeader from './-header';
+
+export interface UiShellSignature {
+  Blocks: {
+    shell: [{ Header: typeof UiShellHeader; Sidenav; Nav }];
+    content: [];
+  };
+}
+
+export default class UiShell extends Component<UiShellSignature> {
+  <template>
+    {{yield (hash Header=Header Sidenav=Sidenav Nav=Nav) to='shell'}}
+    <main id='main-content' class='cds--content'>
+      {{yield to='content'}}
+    </main>
+  </template>
+}
diff --git a/carbon-components-ember/src/components/ui-shell/index.hbs b/carbon-components-ember/src/components/ui-shell/index.hbs
deleted file mode 100644
index 3a77df55..00000000
--- a/carbon-components-ember/src/components/ui-shell/index.hbs
+++ /dev/null
@@ -1,8 +0,0 @@
-{{import Header from './-header'}}
-{{import Sidenav from './-sidenav'}}
-{{import Nav from './-nav'}}
-
-{{yield (hash Header=Header Sidenav=Sidenav Nav=Nav) to='shell'}}
-<main id='main-content' class='cds--content'>
-  {{yield to='content'}}
-</main>
\ No newline at end of file
diff --git a/carbon-components-ember/src/components/ui-shell/index.ts b/carbon-components-ember/src/components/ui-shell/index.ts
deleted file mode 100644
index ceb1b9a9..00000000
--- a/carbon-components-ember/src/components/ui-shell/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from '@glimmer/component';
-import UiShellHeader from './-header';
-
-
-
-export interface UiShellSignature {
-  Blocks: {
-    shell: [{Header: typeof UiShellHeader; Sidenav; Nav}];
-    content: [];
-  };
-}
-
-export default class UiShell extends Component<UiShellSignature> {}
-
-
-