From af586fe7545ed1bd280ac3a77c27a7fa5a6b3930 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 15:13:26 -0400
Subject: [PATCH 01/43] feat: run codemod to convert tests to gjs

---
 showcase/package.json                         |   6 +-
 .../{index-test.js => index-test.gjs}         | 235 ++++++++++--------
 .../{td-test.js => td-test.gjs}               |  18 +-
 .../{th-sort-test.js => th-sort-test.gjs}     |  46 ++--
 .../{th-test.js => th-test.gjs}               |  88 ++-----
 .../{tr-test.js => tr-test.gjs}               |  57 ++---
 .../alert/{index-test.js => index-test.gjs}   | 124 ++++-----
 .../{copyright-test.js => copyright-test.gjs} |   8 +-
 .../{index-test.js => index-test.gjs}         |  18 +-
 .../{item-test.js => item-test.gjs}           |   6 +-
 ...gal-links-test.js => legal-links-test.gjs} |  19 +-
 .../{link-test.js => link-test.gjs}           |  18 +-
 ...atus-link-test.js => status-link-test.gjs} |  36 ++-
 .../{index-test.js => index-test.gjs}         |  60 ++---
 .../{home-link-test.js => home-link-test.gjs} |  32 +--
 .../{index-test.js => index-test.gjs}         |  80 +++---
 .../{index-test.js => index-test.gjs}         |  99 +++-----
 .../{back-link-test.js => back-link-test.gjs} |  14 +-
 .../list/{index-test.js => index-test.gjs}    |  18 +-
 .../list/{item-test.js => item-test.gjs}      |  10 +-
 .../list/{link-test.js => link-test.gjs}      |  27 +-
 .../portal/{index-test.js => index-test.gjs}  |  91 +++----
 .../{body-test.js => body-test.gjs}           |  14 +-
 .../{footer-test.js => footer-test.gjs}       |  20 +-
 .../{header-test.js => header-test.gjs}       |  12 +-
 .../{index-test.js => index-test.gjs}         |  48 ++--
 .../{media-test.js => media-test.gjs}         |   8 +-
 .../{index-test.js => index-test.gjs}         |  16 +-
 .../badge/{index-test.js => index-test.gjs}   |  20 +-
 .../{index-test.js => index-test.gjs}         |  14 +-
 .../{item-test.js => item-test.gjs}           |  14 +-
 ...truncation-test.js => truncation-test.gjs} |  14 +-
 .../{index-test.js => index-test.gjs}         |  15 +-
 .../button/{index-test.js => index-test.gjs}  |  50 ++--
 .../{container-test.js => container-test.gjs} |  30 +--
 .../{index-test.js => index-test.gjs}         | 210 ++++++++--------
 ...scription-test.js => description-test.gjs} |   6 +-
 ...on-test.js => full-screen-button-test.gjs} |   8 +-
 .../{title-test.js => title-test.gjs}         |  10 +-
 .../button/{index-test.js => index-test.gjs}  |  35 ++-
 .../snippet/{index-test.js => index-test.gjs} |  23 +-
 .../{body-test.js => body-test.gjs}           |  18 +-
 ...scription-test.js => description-test.gjs} |  18 +-
 .../{footer-test.js => footer-test.gjs}       |  32 +--
 .../{header-test.js => header-test.gjs}       |  64 ++---
 .../{overlay-test.js => overlay-test.gjs}     |   4 +-
 .../{wrapper-test.js => wrapper-test.gjs}     |  30 ++-
 .../{index-test.js => index-test.gjs}         |  85 +++----
 .../{index-test.js => index-test.gjs}         |   6 +-
 .../{index-test.js => index-test.gjs}         | 143 +++++------
 .../{checkbox-test.js => checkbox-test.gjs}   |  20 +-
 .../{checkmark-test.js => checkmark-test.gjs} |  22 +-
 .../{copy-item-test.js => copy-item-test.gjs} |   6 +-
 ...scription-test.js => description-test.gjs} |   6 +-
 .../{generic-test.js => generic-test.gjs}     |   6 +-
 ...teractive-test.js => interactive-test.gjs} |  50 ++--
 .../{radio-test.js => radio-test.gjs}         |  20 +-
 .../{separator-test.js => separator-test.gjs} |   8 +-
 .../{title-test.js => title-test.gjs}         |   6 +-
 .../{button-test.js => button-test.gjs}       |  32 +--
 .../toggle/{icon-test.js => icon-test.gjs}    |  37 ++-
 .../flyout/{index-test.js => index-test.gjs}  | 134 +++++-----
 .../{index-test.js => index-test.gjs}         |  37 +--
 .../checkbox/{base-test.js => base-test.gjs}  |   6 +-
 .../{field-test.js => field-test.gjs}         |  18 +-
 .../{group-test.js => group-test.gjs}         |  30 +--
 .../divider/{index-test.js => index-test.gjs} |   8 +-
 .../error/{index-test.js => index-test.gjs}   |  14 +-
 .../field/{index-test.js => index-test.gjs}   |  40 +--
 .../{index-test.js => index-test.gjs}         |  24 +-
 .../{base-test.js => base-test.gjs}           |   6 +-
 .../{field-test.js => field-test.gjs}         |  32 +--
 .../footer/{index-test.js => index-test.gjs}  |  10 +-
 .../{index-test.js => index-test.gjs}         |   6 +-
 .../header/{index-test.js => index-test.gjs}  |  10 +-
 .../title/{index-test.js => index-test.gjs}   |  16 +-
 .../{index-test.js => index-test.gjs}         |  12 +-
 .../form/{index-test.js => index-test.gjs}    |  18 +-
 ...button-test.js => add-row-button-test.gjs} |  12 +-
 ...ton-test.js => delete-row-button-test.gjs} |  28 +--
 .../{field-test.js => field-test.gjs}         |  78 +++---
 .../{generic-test.js => generic-test.gjs}     |  20 +-
 .../{index-test.js => index-test.gjs}         |  71 ++----
 .../label/{index-test.js => index-test.gjs}   |  26 +-
 .../legend/{index-test.js => index-test.gjs}  |  18 +-
 .../{base-test.js => base-test.gjs}           |  22 +-
 .../{field-test.js => field-test.gjs}         |  56 ++---
 .../{group-test.js => group-test.gjs}         |  52 ++--
 .../{index-test.js => index-test.gjs}         |  28 +--
 .../radio/{base-test.js => base-test.gjs}     |   4 +-
 .../radio/{field-test.js => field-test.gjs}   |  22 +-
 .../radio/{group-test.js => group-test.gjs}   |  34 +--
 .../header/{index-test.js => index-test.gjs}  |  12 +-
 .../section/{index-test.js => index-test.gjs} |  12 +-
 .../{index-test.js => index-test.gjs}         |  14 +-
 .../item/{index-test.js => index-test.gjs}    |  10 +-
 .../select/{base-test.js => base-test.gjs}    |  12 +-
 .../select/{field-test.js => field-test.gjs}  |  38 +--
 .../multiple/{base-test.js => base-test.gjs}  |  33 +--
 .../{field-test.js => field-test.gjs}         |  31 ++-
 .../single/{base-test.js => base-test.gjs}    |  23 +-
 .../single/{field-test.js => field-test.gjs}  |  31 ++-
 .../{base-test.js => base-test.gjs}           |  20 +-
 .../{field-test.js => field-test.gjs}         |  56 ++---
 .../textarea/{base-test.js => base-test.gjs}  |  14 +-
 .../{field-test.js => field-test.gjs}         |  54 ++--
 .../toggle/{base-test.js => base-test.gjs}    |   6 +-
 .../toggle/{field-test.js => field-test.gjs}  |  22 +-
 .../toggle/{group-test.js => group-test.gjs}  |  22 +-
 .../{index-test.js => index-test.gjs}         |  10 +-
 .../{index-test.js => index-test.gjs}         |  30 +--
 .../icon/{index-test.js => index-test.gjs}    |  42 ++--
 .../{index-test.js => index-test.gjs}         |  29 +--
 .../flex/{index-test.js => index-test.gjs}    |  35 +--
 .../flex/{item-test.js => item-test.gjs}      |  35 +--
 .../grid/{index-test.js => index-test.gjs}    |  39 +--
 .../grid/{item-test.js => item-test.gjs}      |  21 +-
 .../link/{inline-test.js => inline-test.gjs}  |  24 +-
 ...standalone-test.js => standalone-test.gjs} |  36 +--
 .../{index-test.js => index-test.gjs}         |  53 ++--
 .../modal/{index-test.js => index-test.gjs}   | 143 +++++------
 .../{index-test.js => index-test.gjs}         |  20 +-
 .../{compact-test.js => compact-test.gjs}     |  65 ++---
 .../{info-test.js => info-test.gjs}           |  20 +-
 .../nav/{arrow-test.js => arrow-test.gjs}     |  46 ++--
 .../{ellipsis-test.js => ellipsis-test.gjs}   |   8 +-
 .../nav/{number-test.js => number-test.gjs}   |  30 +--
 .../{numbered-test.js => numbered-test.gjs}   | 162 ++++++------
 ...elector-test.js => size-selector-test.gjs} |  56 ++---
 .../{index-test.js => index-test.gjs}         | 121 +++++----
 .../reveal/{index-test.js => index-test.gjs}  |  50 ++--
 .../{bubble-test.js => bubble-test.gjs}       |  56 ++---
 .../{index-test.js => index-test.gjs}         |  53 ++--
 .../{toggle-test.js => toggle-test.gjs}       |  46 ++--
 .../{index-test.js => index-test.gjs}         |  10 +-
 .../{index-test.js => index-test.gjs}         |  10 +-
 .../side-nav/{base-test.js => base-test.gjs}  |  12 +-
 .../{home-link-test.js => home-link-test.gjs} |  10 +-
 ...on-button-test.js => icon-button-test.gjs} |  14 +-
 .../header/{index-test.js => index-test.gjs}  |  12 +-
 .../{index-test.js => index-test.gjs}         | 116 ++++-----
 .../{back-link-test.js => back-link-test.gjs} |  12 +-
 .../list/{index-test.js => index-test.gjs}    |  18 +-
 .../list/{item-test.js => item-test.gjs}      |  12 +-
 .../list/{link-test.js => link-test.gjs}      |  22 +-
 .../portal/{index-test.js => index-test.gjs}  |  84 +++----
 .../{list-step-test.js => list-step-test.gjs} |  89 +++----
 .../stepper/{list-test.js => list-test.gjs}   |  22 +-
 .../{nav-panel-test.js => nav-panel-test.gjs} |  14 +-
 .../{nav-step-test.js => nav-step-test.gjs}   |  37 ++-
 .../hds/stepper/{nav-test.js => nav-test.gjs} |  80 ++----
 ...icator-test.js => step-indicator-test.gjs} |  16 +-
 ...icator-test.js => task-indicator-test.gjs} |  14 +-
 .../hds/table/{td-test.js => td-test.gjs}     |   8 +-
 .../{th-sort-test.js => th-sort-test.gjs}     |  36 +--
 .../hds/table/{th-test.js => th-test.gjs}     |  25 +-
 .../hds/table/{tr-test.js => tr-test.gjs}     |  26 +-
 .../tabs/{index-test.js => index-test.gjs}    |  87 +++----
 .../hds/tag/{index-test.js => index-test.gjs} |  37 ++-
 .../hds/text/{body-test.js => body-test.gjs}  |  14 +-
 .../hds/text/{code-test.js => code-test.gjs}  |  14 +-
 .../{display-test.js => display-test.gjs}     |  18 +-
 .../text/{index-test.js => index-test.gjs}    |  30 +--
 .../time/{index-test.js => index-test.gjs}    | 147 ++++++-----
 .../toast/{index-test.js => index-test.gjs}   |   6 +-
 ...button-test.js => tooltip-button-test.gjs} |  41 ++-
 ...fier-test.js => tooltip-modifier-test.gjs} |   4 +-
 .../helpers/{hds-t-test.js => hds-t-test.gjs} |  10 +-
 ...test.js => hds-anchored-position-test.gjs} |  19 +-
 ...ipboard-test.js => hds-clipboard-test.gjs} | 101 ++------
 ...nt-test.js => hds-register-event-test.gjs} |   6 +-
 171 files changed, 2831 insertions(+), 3224 deletions(-)
 rename showcase/tests/integration/components/hds/accordion/{index-test.js => index-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/advanced-table/{td-test.js => td-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/advanced-table/{th-sort-test.js => th-sort-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/advanced-table/{th-test.js => th-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/advanced-table/{tr-test.js => tr-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/alert/{index-test.js => index-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/app-footer/{copyright-test.js => copyright-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/app-footer/{index-test.js => index-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/app-footer/{item-test.js => item-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/app-footer/{legal-links-test.js => legal-links-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/app-footer/{link-test.js => link-test.gjs} (70%)
 rename showcase/tests/integration/components/hds/app-footer/{status-link-test.js => status-link-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/app-frame/{index-test.js => index-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/app-header/{home-link-test.js => home-link-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/app-header/{index-test.js => index-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/app-side-nav/{index-test.js => index-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{back-link-test.js => back-link-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{index-test.js => index-test.gjs} (71%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{item-test.js => item-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{link-test.js => link-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/app-side-nav/portal/{index-test.js => index-test.gjs} (65%)
 rename showcase/tests/integration/components/hds/application-state/{body-test.js => body-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/application-state/{footer-test.js => footer-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/application-state/{header-test.js => header-test.gjs} (66%)
 rename showcase/tests/integration/components/hds/application-state/{index-test.js => index-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/application-state/{media-test.js => media-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/badge-count/{index-test.js => index-test.gjs} (71%)
 rename showcase/tests/integration/components/hds/badge/{index-test.js => index-test.gjs} (70%)
 rename showcase/tests/integration/components/hds/breadcrumb/{index-test.js => index-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/breadcrumb/{item-test.js => item-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/breadcrumb/{truncation-test.js => truncation-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/button-set/{index-test.js => index-test.gjs} (63%)
 rename showcase/tests/integration/components/hds/button/{index-test.js => index-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/card/{container-test.js => container-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/code-block/{index-test.js => index-test.gjs} (68%)
 rename showcase/tests/integration/components/hds/code-editor/{description-test.js => description-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/code-editor/{full-screen-button-test.js => full-screen-button-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/code-editor/{title-test.js => title-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/copy/button/{index-test.js => index-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/copy/snippet/{index-test.js => index-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{body-test.js => body-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{description-test.js => description-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{footer-test.js => footer-test.gjs} (66%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{header-test.js => header-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{overlay-test.js => overlay-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{wrapper-test.js => wrapper-test.gjs} (65%)
 rename showcase/tests/integration/components/hds/disclosure-primitive/{index-test.js => index-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/dismiss-button/{index-test.js => index-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/dropdown/{index-test.js => index-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{checkbox-test.js => checkbox-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{checkmark-test.js => checkmark-test.gjs} (70%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{copy-item-test.js => copy-item-test.gjs} (84%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{description-test.js => description-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{generic-test.js => generic-test.gjs} (82%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{interactive-test.js => interactive-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{radio-test.js => radio-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{separator-test.js => separator-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{title-test.js => title-test.gjs} (85%)
 rename showcase/tests/integration/components/hds/dropdown/toggle/{button-test.js => button-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/dropdown/toggle/{icon-test.js => icon-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/flyout/{index-test.js => index-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/form/character-count/{index-test.js => index-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/form/checkbox/{base-test.js => base-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/form/checkbox/{field-test.js => field-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/form/checkbox/{group-test.js => group-test.gjs} (90%)
 rename showcase/tests/integration/components/hds/form/divider/{index-test.js => index-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/form/error/{index-test.js => index-test.gjs} (70%)
 rename showcase/tests/integration/components/hds/form/field/{index-test.js => index-test.gjs} (87%)
 rename showcase/tests/integration/components/hds/form/fieldset/{index-test.js => index-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/form/file-input/{base-test.js => base-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/form/file-input/{field-test.js => field-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/form/footer/{index-test.js => index-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/form/header/description/{index-test.js => index-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/form/header/{index-test.js => index-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/form/header/title/{index-test.js => index-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/form/helper-text/{index-test.js => index-test.gjs} (70%)
 rename showcase/tests/integration/components/hds/form/{index-test.js => index-test.gjs} (88%)
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{add-row-button-test.js => add-row-button-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{delete-row-button-test.js => delete-row-button-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{field-test.js => field-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{generic-test.js => generic-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{index-test.js => index-test.gjs} (90%)
 rename showcase/tests/integration/components/hds/form/label/{index-test.js => index-test.gjs} (70%)
 rename showcase/tests/integration/components/hds/form/legend/{index-test.js => index-test.gjs} (71%)
 rename showcase/tests/integration/components/hds/form/masked-input/{base-test.js => base-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/form/masked-input/{field-test.js => field-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/form/radio-card/{group-test.js => group-test.gjs} (82%)
 rename showcase/tests/integration/components/hds/form/radio-card/{index-test.js => index-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/form/radio/{base-test.js => base-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/form/radio/{field-test.js => field-test.gjs} (86%)
 rename showcase/tests/integration/components/hds/form/radio/{group-test.js => group-test.gjs} (91%)
 rename showcase/tests/integration/components/hds/form/section/header/{index-test.js => index-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/form/section/{index-test.js => index-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/form/section/multi-field-group/{index-test.js => index-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/form/section/multi-field-group/item/{index-test.js => index-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/form/select/{base-test.js => base-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/form/select/{field-test.js => field-test.gjs} (82%)
 rename showcase/tests/integration/components/hds/form/super-select/multiple/{base-test.js => base-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/form/super-select/multiple/{field-test.js => field-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/form/super-select/single/{base-test.js => base-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/form/super-select/single/{field-test.js => field-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/form/text-input/{base-test.js => base-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/form/text-input/{field-test.js => field-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/form/textarea/{base-test.js => base-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/form/textarea/{field-test.js => field-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/form/toggle/{base-test.js => base-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/form/toggle/{field-test.js => field-test.gjs} (87%)
 rename showcase/tests/integration/components/hds/form/toggle/{group-test.js => group-test.gjs} (90%)
 rename showcase/tests/integration/components/hds/form/visibility-toggle/{index-test.js => index-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/icon-tile/{index-test.js => index-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/icon/{index-test.js => index-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/interactive/{index-test.js => index-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/layout/flex/{index-test.js => index-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/layout/flex/{item-test.js => item-test.gjs} (84%)
 rename showcase/tests/integration/components/hds/layout/grid/{index-test.js => index-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/layout/grid/{item-test.js => item-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/link/{inline-test.js => inline-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/link/{standalone-test.js => standalone-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/menu-primitive/{index-test.js => index-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/modal/{index-test.js => index-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/page-header/{index-test.js => index-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/pagination/{compact-test.js => compact-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/pagination/{info-test.js => info-test.gjs} (63%)
 rename showcase/tests/integration/components/hds/pagination/nav/{arrow-test.js => arrow-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/pagination/nav/{ellipsis-test.js => ellipsis-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/pagination/nav/{number-test.js => number-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/pagination/{numbered-test.js => numbered-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/pagination/{size-selector-test.js => size-selector-test.gjs} (71%)
 rename showcase/tests/integration/components/hds/popover-primitive/{index-test.js => index-test.gjs} (84%)
 rename showcase/tests/integration/components/hds/reveal/{index-test.js => index-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/rich-tooltip/{bubble-test.js => bubble-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/rich-tooltip/{index-test.js => index-test.gjs} (86%)
 rename showcase/tests/integration/components/hds/rich-tooltip/{toggle-test.js => toggle-test.gjs} (80%)
 rename showcase/tests/integration/components/hds/segmented-group/{index-test.js => index-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/separator/{index-test.js => index-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/side-nav/{base-test.js => base-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/side-nav/header/{home-link-test.js => home-link-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/side-nav/header/{icon-button-test.js => icon-button-test.gjs} (72%)
 rename showcase/tests/integration/components/hds/side-nav/header/{index-test.js => index-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/side-nav/{index-test.js => index-test.gjs} (83%)
 rename showcase/tests/integration/components/hds/side-nav/list/{back-link-test.js => back-link-test.gjs} (78%)
 rename showcase/tests/integration/components/hds/side-nav/list/{index-test.js => index-test.gjs} (81%)
 rename showcase/tests/integration/components/hds/side-nav/list/{item-test.js => item-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/side-nav/list/{link-test.js => link-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/side-nav/portal/{index-test.js => index-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/stepper/{list-step-test.js => list-step-test.gjs} (77%)
 rename showcase/tests/integration/components/hds/stepper/{list-test.js => list-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/stepper/{nav-panel-test.js => nav-panel-test.gjs} (85%)
 rename showcase/tests/integration/components/hds/stepper/{nav-step-test.js => nav-step-test.gjs} (90%)
 rename showcase/tests/integration/components/hds/stepper/{nav-test.js => nav-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/stepper/{step-indicator-test.js => step-indicator-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/stepper/{task-indicator-test.js => task-indicator-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/table/{td-test.js => td-test.gjs} (71%)
 rename showcase/tests/integration/components/hds/table/{th-sort-test.js => th-sort-test.gjs} (76%)
 rename showcase/tests/integration/components/hds/table/{th-test.js => th-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/table/{tr-test.js => tr-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/tabs/{index-test.js => index-test.gjs} (94%)
 rename showcase/tests/integration/components/hds/tag/{index-test.js => index-test.gjs} (74%)
 rename showcase/tests/integration/components/hds/text/{body-test.js => body-test.gjs} (84%)
 rename showcase/tests/integration/components/hds/text/{code-test.js => code-test.gjs} (84%)
 rename showcase/tests/integration/components/hds/text/{display-test.js => display-test.gjs} (84%)
 rename showcase/tests/integration/components/hds/text/{index-test.js => index-test.gjs} (69%)
 rename showcase/tests/integration/components/hds/time/{index-test.js => index-test.gjs} (75%)
 rename showcase/tests/integration/components/hds/toast/{index-test.js => index-test.gjs} (79%)
 rename showcase/tests/integration/components/hds/tooltip/{tooltip-button-test.js => tooltip-button-test.gjs} (73%)
 rename showcase/tests/integration/components/hds/tooltip/{tooltip-modifier-test.js => tooltip-modifier-test.gjs} (87%)
 rename showcase/tests/integration/helpers/{hds-t-test.js => hds-t-test.gjs} (86%)
 rename showcase/tests/integration/modifiers/{hds-anchored-position-test.js => hds-anchored-position-test.gjs} (96%)
 rename showcase/tests/integration/modifiers/{hds-clipboard-test.js => hds-clipboard-test.gjs} (80%)
 rename showcase/tests/integration/modifiers/{hds-register-event-test.js => hds-register-event-test.gjs} (73%)

diff --git a/showcase/package.json b/showcase/package.json
index 471363afa66..709b7965412 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -131,5 +131,9 @@
   },
   "ember": {
     "edition": "octane"
+  },
+  "exports": {
+    "./tests/*": "./tests/*",
+    "./*": "./app/*"
   }
-}
+}
\ No newline at end of file
diff --git a/showcase/tests/integration/components/hds/accordion/index-test.js b/showcase/tests/integration/components/hds/accordion/index-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/accordion/index-test.js
rename to showcase/tests/integration/components/hds/accordion/index-test.gjs
index 4ff330ab5ac..40a9df57f07 100644
--- a/showcase/tests/integration/components/hds/accordion/index-test.js
+++ b/showcase/tests/integration/components/hds/accordion/index-test.gjs
@@ -6,69 +6,79 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Accordion from '@hashicorp/design-system-components/components/hds/accordion/index';
+import Item from '@hashicorp/design-system-components/components/hds/accordion/item/index';
+import { on } from '@ember/modifier';
 
 module('Integration | Component | hds/accordion/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Accordion id="test-accordion" />`);
+    await render(<template><Accordion id="test-accordion" /></template>);
     assert.dom('#test-accordion').hasClass('hds-accordion');
   });
 
   // CONTENT
 
   test('it renders the passed in Accordion Items', async function (assert) {
-    await render(hbs`
-      <Hds::Accordion as |A|>
-        <A.Item>
-          <:toggle>Item one</:toggle>
-          <:content>Content one</:content>
-        </A.Item>
-        <A.Item>
-          <:toggle>Item two</:toggle>
-          <:content>Content two</:content>
-        </A.Item>
-      </Hds::Accordion>
-    `);
+    await render(
+      <template>
+        <Accordion as |A|>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
+          <A.Item>
+            <:toggle>Item two</:toggle>
+            <:content>Content two</:content>
+          </A.Item>
+        </Accordion>
+      </template>,
+    );
     assert.dom('.hds-accordion .hds-accordion-item').exists({ count: 2 });
   });
 
   test('it renders the passed in content in the Accordion Item', async function (assert) {
-    await render(hbs`
-      <Hds::Accordion as |A|>
-        <A.Item>
-          <:toggle><strong id="test-strong">Item one</strong></:toggle>
-          <:content><em id="test-em">Content one</em></:content>
-        </A.Item>
-      </Hds::Accordion>
-    `);
+    await render(
+      <template>
+        <Accordion as |A|>
+          <A.Item>
+            <:toggle><strong id="test-strong">Item one</strong></:toggle>
+            <:content><em id="test-em">Content one</em></:content>
+          </A.Item>
+        </Accordion>
+      </template>,
+    );
     await click('.hds-accordion-item__button');
     assert.dom('#test-strong').exists().hasText('Item one');
     assert.dom('#test-em').exists().hasText('Content one');
   });
 
   test('it renders a div when the @titleTag argument is not provided', async function (assert) {
-    await render(hbs`
-      <Hds::Accordion as |A|>
-        <A.Item>
-          <:toggle>Item one</:toggle>
-          <:content>Content one</:content>
-        </A.Item>
-      </Hds::Accordion>
-    `);
+    await render(
+      <template>
+        <Accordion as |A|>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
+        </Accordion>
+      </template>,
+    );
     assert.dom('.hds-accordion-item__toggle-content').hasTagName('div');
   });
 
   test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
-    await render(hbs`
-      <Hds::Accordion @titleTag='h2' as |A|>
-        <A.Item>
-          <:toggle>Item one</:toggle>
-          <:content>Content one</:content>
-        </A.Item>
-      </Hds::Accordion>
-    `);
+    await render(
+      <template>
+        <Accordion @titleTag="h2" as |A|>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
+        </Accordion>
+      </template>,
+    );
     assert.dom('.hds-accordion-item__toggle-content').hasTagName('h2');
   });
 
@@ -76,11 +86,11 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it should render the medium size as the default if no @size is declared', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion id="test-accordion" as |A|>
+      <template>
+        <Accordion id="test-accordion" as |A|>
           <A.Item>Item</A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert.dom('#test-accordion').hasClass('hds-accordion--size-medium');
     assert
@@ -90,11 +100,11 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it should render the correct CSS size class depending on the @size', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion id="test-accordion" @size="large" as |A|>
+      <template>
+        <Accordion id="test-accordion" @size="large" as |A|>
           <A.Item>Item</A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert.dom('#test-accordion').hasClass('hds-accordion--size-large');
     assert
@@ -104,12 +114,12 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it should render different CSS size classes when different @size arguments are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion id="test-accordion" @size="large" as |A|>
+      <template>
+        <Accordion id="test-accordion" @size="large" as |A|>
           <A.Item id="test-accordion-item1">Item 1</A.Item>
           <A.Item id="test-accordion-item2" @size="small">Item 2</A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert
       .dom('#test-accordion-item1')
@@ -123,11 +133,11 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it should render the card type as the default if no @type is declared', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion id="test-accordion" as |A|>
+      <template>
+        <Accordion id="test-accordion" as |A|>
           <A.Item>Item</A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert.dom('#test-accordion').hasClass('hds-accordion--type-card');
     assert
@@ -137,11 +147,11 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it should render the correct CSS type class depending on the @type', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion id="test-accordion" @type="flush" as |A|>
+      <template>
+        <Accordion id="test-accordion" @type="flush" as |A|>
           <A.Item>Item</A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert.dom('#test-accordion').hasClass('hds-accordion--type-flush');
     assert
@@ -151,12 +161,12 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it should render different CSS type class when different @type arguments are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion id="test-accordion" @type="flush" as |A|>
+      <template>
+        <Accordion id="test-accordion" @type="flush" as |A|>
           <A.Item id="test-accordion-item1">Item 1</A.Item>
           <A.Item id="test-accordion-item2" @type="card">Item 2</A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert
       .dom('#test-accordion-item1')
@@ -170,14 +180,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it displays the correct value for aria-expanded on the AccordionItem when closed vs open', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item>
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert
       .dom('.hds-accordion-item__button')
@@ -190,14 +200,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('the AccordionItem toggle button has an aria-controls attribute with a value matching the DisclosurePrimitive content id', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item>
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     await click('.hds-accordion-item__button');
     assert.dom('.hds-accordion-item__button').hasAttribute('aria-controls');
@@ -214,14 +224,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('the AccordionItem toggle has an aria-labelledby attribute set to the id of the toggle text by default', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item>
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
 
     assert.dom('.hds-accordion-item__button').hasAttribute('aria-labelledby');
@@ -242,14 +252,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('the AccordionItem toggle has an aria-label attribute when the argument is passed', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item @ariaLabel="Custom toggle label">
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
 
     assert
@@ -267,14 +277,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   test('it displays content initially when @isOpen is set to true', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item @isOpen={{true}}>
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     // Test content is displayed
     assert
@@ -289,18 +299,21 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
   // containsInteractive
   test('it displays the correct variant when containsInteractive is set to false vs. true', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item id="test-contains-interactive--false">
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-          <A.Item @containsInteractive={{true}} id="test-contains-interactive--true">
+          <A.Item
+            @containsInteractive={{true}}
+            id="test-contains-interactive--true"
+          >
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert
       .dom('#test-contains-interactive--false')
@@ -313,14 +326,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
   // isStatic
   test('it does not show the toggle button when @isStatic is set to true, ', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion as |A|>
+      <template>
+        <Accordion as |A|>
           <A.Item @isStatic={{true}}>
             <:toggle>Item one</:toggle>
             <:content>Additional content</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     assert.dom('.hds-accordion-item--is-static').exists();
     assert
@@ -331,8 +344,8 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
   // forceState
   test('it displays the correct content based on @forceState', async function (assert) {
     await render(
-      hbs`
-        <Hds::Accordion @forceState={{this.forceState}} as |A|>
+      <template>
+        <Accordion @forceState={{this.forceState}} as |A|>
           <A.Item @isOpen={{true}}>
             <:toggle>Item one</:toggle>
             <:content>Content one</:content>
@@ -341,8 +354,8 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
             <:toggle>Item one</:toggle>
             <:content>Content two</:content>
           </A.Item>
-        </Hds::Accordion>
-      `,
+        </Accordion>
+      </template>,
     );
     // first item open at rendering
     assert
@@ -376,14 +389,16 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
   // close
 
   test('it should hide the content when an accordion item triggers `close`', async function (assert) {
-    await render(hbs`
-      <Hds::Accordion::Item>
-        <:toggle>Item one</:toggle>
-        <:content as |c|>
-          <button type="button" {{on "click" c.close}}>Close</button>
-        </:content>
-      </Hds::Accordion::Item>
-    `);
+    await render(
+      <template>
+        <Item>
+          <:toggle>Item one</:toggle>
+          <:content as |c|>
+            <button type="button" {{on "click" c.close}}>Close</button>
+          </:content>
+        </Item>
+      </template>,
+    );
     await click('.hds-accordion-item__button');
     assert.dom('.hds-accordion-item__content').exists();
 
@@ -400,12 +415,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
       'onClickToggle',
       () => (state = state === 'open' ? (state = 'close') : (state = 'open')),
     );
-    await render(hbs`
-      <Hds::Accordion::Item @forceState={{this.state}} @onClickToggle={{this.onClickToggle}}>
-        <:toggle>Item one</:toggle>
-        <:content>Content one</:content>
-      </Hds::Accordion::Item>
-    `);
+    await render(
+      <template>
+        <Item @forceState={{this.state}} @onClickToggle={{this.onClickToggle}}>
+          <:toggle>Item one</:toggle>
+          <:content>Content one</:content>
+        </Item>
+      </template>,
+    );
     // closed by default
     assert.dom('.hds-accordion-item__content').doesNotExist();
     // toggle to open
diff --git a/showcase/tests/integration/components/hds/advanced-table/td-test.js b/showcase/tests/integration/components/hds/advanced-table/td-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/advanced-table/td-test.js
rename to showcase/tests/integration/components/hds/advanced-table/td-test.gjs
index 490dd38c43c..aed634a4b61 100644
--- a/showcase/tests/integration/components/hds/advanced-table/td-test.js
+++ b/showcase/tests/integration/components/hds/advanced-table/td-test.gjs
@@ -6,14 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Td from "@hashicorp/design-system-components/components/hds/advanced-table/td";
 
 module('Integration | Component | hds/advanced-table/td', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Td id='data-test-advanced-table-td' />`,
+      <template><Td id="data-test-advanced-table-td" /></template>,
     );
     assert
       .dom('#data-test-advanced-table-td')
@@ -22,14 +22,14 @@ module('Integration | Component | hds/advanced-table/td', function (hooks) {
 
   test('it should render with the appropriate role', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Td id='data-test-advanced-table-td' @align='right' />`,
+      <template><Td id="data-test-advanced-table-td" @align="right" /></template>,
     );
     assert.dom('#data-test-advanced-table-td').hasAttribute('role', 'gridcell');
   });
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Td id='data-test-advanced-table-td' @align='right' />`,
+      <template><Td id="data-test-advanced-table-td" @align="right" /></template>,
     );
     assert
       .dom('#data-test-advanced-table-td')
@@ -38,7 +38,7 @@ module('Integration | Component | hds/advanced-table/td', function (hooks) {
 
   test('it should render with the appropriate span information by default', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Td id='data-test-advanced-table-td' />`,
+      <template><Td id="data-test-advanced-table-td" /></template>,
     );
 
     assert.dom('#data-test-advanced-table-td').hasNoAttribute('aria-rowspan');
@@ -51,11 +51,7 @@ module('Integration | Component | hds/advanced-table/td', function (hooks) {
 
   test('it should render with the appropriate span information when pass rowspan and colspan', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Td
-  id='data-test-advanced-table-td'
-  @rowspan={{3}}
-  @colspan={{5}}
-/>`,
+      <template><Td id="data-test-advanced-table-td" @rowspan={{3}} @colspan={{5}} /></template>,
     );
 
     assert
@@ -74,7 +70,7 @@ module('Integration | Component | hds/advanced-table/td', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Td id='data-test-advanced-table-td' lang='es' />`,
+      <template><Td id="data-test-advanced-table-td" lang="es" /></template>,
     );
     assert.dom('#data-test-advanced-table-td').hasAttribute('lang', 'es');
   });
diff --git a/showcase/tests/integration/components/hds/advanced-table/th-sort-test.js b/showcase/tests/integration/components/hds/advanced-table/th-sort-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/advanced-table/th-sort-test.js
rename to showcase/tests/integration/components/hds/advanced-table/th-sort-test.gjs
index 78d759adffe..2f425be4417 100644
--- a/showcase/tests/integration/components/hds/advanced-table/th-sort-test.js
+++ b/showcase/tests/integration/components/hds/advanced-table/th-sort-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, focus, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import ThSort from "@hashicorp/design-system-components/components/hds/advanced-table/th-sort";
 
 module(
   'Integration | Component | hds/advanced-table/th-sort',
@@ -14,7 +14,7 @@ module(
     setupRenderingTest(hooks);
     test('it renders with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
       );
 
       assert
@@ -31,7 +31,7 @@ module(
 
     test('it renders text content yielded within the cell', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
       );
       assert
         .dom(
@@ -44,7 +44,7 @@ module(
 
     test('it should render with the appropriate `@align` CSS class', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort" @align="right">Year</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort" @align="right">Year</ThSort></template>,
       );
       assert
         .dom('#data-test-advanced-table-th-sort')
@@ -55,7 +55,7 @@ module(
 
     test('if @sortOrder is not defined, the swap-vertical icon should be displayed', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort @sortBy='artist'>Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort @sortBy="artist">Artist</ThSort></template>,
       );
 
       assert.dom('[data-test-icon="swap-vertical"]').exists();
@@ -63,13 +63,13 @@ module(
 
     test('if sorted, and `@sortOrder` is set, the correct icon should be displayed', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort @sortOrder='asc'>Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort @sortOrder="asc">Artist</ThSort></template>,
       );
 
       assert.dom('[data-test-icon="arrow-up"]').exists();
 
       await render(
-        hbs`<Hds::AdvancedTable::ThSort @sortOrder='desc'>Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort @sortOrder="desc">Artist</ThSort></template>,
       );
 
       assert.dom('[data-test-icon="arrow-down"]').exists();
@@ -79,14 +79,14 @@ module(
 
     test('it should support splattributes', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th" lang="es">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th" lang="es">Artist</ThSort></template>,
       );
       assert.dom('#data-test-advanced-table-th').hasAttribute('lang', 'es');
     });
 
     test('it has a role and it is set to columnheader by default', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort>Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort>Artist</ThSort></template>,
       );
 
       assert
@@ -95,7 +95,7 @@ module(
     });
     test('the default `scope` attribute can not be overwritten', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort scope="row">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort scope="row">Artist</ThSort></template>,
       );
 
       assert
@@ -105,7 +105,7 @@ module(
 
     test('if unsorted, the aria-sort attribute value should be set to none', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort @sortBy='artist' id="data-test-advanced-table-th-sort">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort @sortBy="artist" id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
       );
 
       assert
@@ -114,7 +114,7 @@ module(
     });
     test('if sorted, the aria-sort attribute value should reflect the direction', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort @sortBy='artist' @sortOrder="desc" id="data-test-advanced-table-th-sort">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort @sortBy="artist" @sortOrder="desc" id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
       );
 
       assert
@@ -123,7 +123,7 @@ module(
     });
     test('it renders the `aria-labelledby` attribute for the sort button with the correct IDs', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort" @sortBy='artist' @sortOrder="desc">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort" @sortBy="artist" @sortOrder="desc">Artist</ThSort></template>,
       );
       const prefixLabel = this.element.querySelector(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button-aria-label-hidden-segment:nth-of-type(1)',
@@ -154,11 +154,7 @@ module(
       });
 
       await render(
-        hbs`<Hds::AdvancedTable::ThSort
-      id='data-test-advanced-table-th-sort'
-      @rowspan={{3}}
-      @isStickyColumn={{true}}
-    />`,
+        <template><ThSort id="data-test-advanced-table-th-sort" @rowspan={{3}} @isStickyColumn={{true}} /></template>,
       );
 
       assert.throws(function () {
@@ -176,11 +172,7 @@ module(
       });
 
       await render(
-        hbs`<Hds::AdvancedTable::ThSort
-      id='data-test-advanced-table-th-sort'
-      @colspan={{3}}
-      @isStickyColumn={{true}}
-    />`,
+        <template><ThSort id="data-test-advanced-table-th-sort" @colspan={{3}} @isStickyColumn={{true}} /></template>,
       );
 
       assert.throws(function () {
@@ -194,7 +186,7 @@ module(
       let isClicked = false;
       this.set('onClickSort', () => (isClicked = true));
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort" @onClickSort={{this.onClickSort}}>Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort" @onClickSort={{this.onClickSort}}>Artist</ThSort></template>,
       );
       await click(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button--sort',
@@ -206,7 +198,7 @@ module(
 
     test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
       );
 
       assert
@@ -217,7 +209,7 @@ module(
     });
     test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort @tooltip="More info." id="data-test-advanced-table-th-sort">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort @tooltip="More info." id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
       );
 
       assert
@@ -234,7 +226,7 @@ module(
     });
     test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
       await render(
-        hbs`<Hds::AdvancedTable::ThSort id="data-test-advanced-table-th-sort" @tooltip="More info.">Artist</Hds::AdvancedTable::ThSort>`,
+        <template><ThSort id="data-test-advanced-table-th-sort" @tooltip="More info.">Artist</ThSort></template>,
       );
       let prefixLabel = this.element.querySelector(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button-aria-label-hidden-segment',
diff --git a/showcase/tests/integration/components/hds/advanced-table/th-test.js b/showcase/tests/integration/components/hds/advanced-table/th-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/advanced-table/th-test.js
rename to showcase/tests/integration/components/hds/advanced-table/th-test.gjs
index 69048fe5486..e42d8b7f388 100644
--- a/showcase/tests/integration/components/hds/advanced-table/th-test.js
+++ b/showcase/tests/integration/components/hds/advanced-table/th-test.gjs
@@ -6,16 +6,15 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, focus, click, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Th from "@hashicorp/design-system-components/components/hds/advanced-table/th";
+import AdvancedTable from "@hashicorp/design-system-components/components/hds/advanced-table/index";
 
 module('Integration | Component | hds/advanced-table/th', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
     );
 
     assert
@@ -27,9 +26,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders text content yielded within the cell (no tooltip)', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
     );
     assert
       .dom(
@@ -40,10 +37,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders text content yielded within the cell (with tooltip)', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
-  @tooltip='More info.'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Th></template>,
     );
     assert
       .dom(
@@ -56,9 +50,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it does not render an expand button by default', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
     );
 
     assert.dom('.hds-advanced-table__th-button--expand').doesNotExist();
@@ -66,10 +58,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders an expand button when `@isExpandable` is true and defaults to collapsed', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
-  @isExpandable={{true}}
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" @isExpandable={{true}}>Artist</Th></template>,
     );
     assert
       .dom(
@@ -81,11 +70,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders an expand button when `@isExpandable` is true and is expanded if `@isExpanded`', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
-  @isExpandable={{true}}
-  @isExpanded={{true}}
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" @isExpandable={{true}} @isExpanded={{true}}>Artist</Th></template>,
     );
     assert
       .dom(
@@ -102,11 +87,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     this.set('onClickToggle', () => (isClicked = true));
 
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
-  @isExpandable={{true}}
-@onClickToggle={{this.onClickToggle}}
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" @isExpandable={{true}} @onClickToggle={{this.onClickToggle}}>Artist</Th></template>,
     );
 
     await click(
@@ -120,10 +101,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
-  @align='right'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" @align="right">Artist</Th></template>,
     );
     assert
       .dom('#data-advanced-test-table-th')
@@ -134,7 +112,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should render with the appropriate span information by default', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th id='data-test-advanced-table-th' />`,
+      <template><Th id="data-test-advanced-table-th" /></template>,
     );
 
     assert.dom('#data-test-advanced-table-th').hasNoAttribute('aria-rowspan');
@@ -147,11 +125,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should render with the appropriate span information when pass rowspan and colspan', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-test-advanced-table-th'
-  @rowspan={{3}}
-  @colspan={{5}}
-/>`,
+      <template><Th id="data-test-advanced-table-th" @rowspan={{3}} @colspan={{5}} /></template>,
     );
 
     assert
@@ -177,11 +151,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     });
 
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-test-advanced-table-th'
-  @rowspan={{3}}
-  @isStickyColumn={{true}}
-/>`,
+      <template><Th id="data-test-advanced-table-th" @rowspan={{3}} @isStickyColumn={{true}} /></template>,
     );
 
     assert.throws(function () {
@@ -199,11 +169,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     });
 
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-test-advanced-table-th'
-  @colspan={{3}}
-  @isStickyColumn={{true}}
-/>`,
+      <template><Th id="data-test-advanced-table-th" @colspan={{3}} @isStickyColumn={{true}} /></template>,
     );
 
     assert.throws(function () {
@@ -213,19 +179,14 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
-  lang='es'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" lang="es">Artist</Th></template>,
     );
     assert.dom('#data-advanced-test-table-th').hasAttribute('lang', 'es');
   });
 
   test('it has the role attribute set to columnheader by default', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
     );
     assert
       .dom('#data-advanced-test-table-th')
@@ -246,11 +207,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     ]);
 
     await render(
-      hbs`<Hds::AdvancedTable @model={{this.model}} @columns={{this.columns}}><:body
-    as |B|
-  ><B.Tr><B.Th
-        id='data-advanced-test-table-th'
-      >Artist</B.Th></B.Tr></:body></Hds::AdvancedTable>`,
+      <template><AdvancedTable @model={{this.model}} @columns={{this.columns}}><:body as |B|><B.Tr><B.Th id="data-advanced-test-table-th">Artist</B.Th></B.Tr></:body></AdvancedTable></template>,
     );
     assert
       .dom('#data-advanced-test-table-th')
@@ -261,9 +218,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  id='data-advanced-test-table-th'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
     );
 
     assert
@@ -274,10 +229,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
   });
   test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th
-  @tooltip='More info.'
-  id='data-advanced-test-table-th'
->Artist</Hds::AdvancedTable::Th>`,
+      <template><Th @tooltip="More info." id="data-advanced-test-table-th">Artist</Th></template>,
     );
 
     assert
@@ -294,7 +246,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Hds::AdvancedTable::Th>`,
+      <template><Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Th></template>,
     );
     let prefixLabel = this.element.querySelector(
       '#data-advanced-test-table-th .hds-advanced-table__th-button-aria-label-hidden-segment',
diff --git a/showcase/tests/integration/components/hds/advanced-table/tr-test.js b/showcase/tests/integration/components/hds/advanced-table/tr-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/advanced-table/tr-test.js
rename to showcase/tests/integration/components/hds/advanced-table/tr-test.gjs
index b31291c43f8..9cf1013ed12 100644
--- a/showcase/tests/integration/components/hds/advanced-table/tr-test.js
+++ b/showcase/tests/integration/components/hds/advanced-table/tr-test.gjs
@@ -6,14 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Tr from "@hashicorp/design-system-components/components/hds/advanced-table/tr";
 
 module('Integration | Component | hds/advanced-table/tr', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr id='data-test-advanced-table-tr' />`,
+      <template><Tr id="data-test-advanced-table-tr" /></template>,
     );
 
     assert
@@ -23,7 +23,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should render with the appropriate role', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr id='data-test-advanced-table-tr' />`,
+      <template><Tr id="data-test-advanced-table-tr" /></template>,
     );
     assert.dom('#data-test-advanced-table-tr').hasAttribute('role', 'row');
   });
@@ -32,8 +32,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr id='data-test-advanced-table-tr'><td
-  ></td></Hds::AdvancedTable::Tr>`,
+      <template><Tr id="data-test-advanced-table-tr"><td></td></Tr></template>,
     );
     assert.dom('#data-test-advanced-table-tr > td').exists();
   });
@@ -45,50 +44,35 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should not render a checkbox if `@isSelectable` is not set', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr id="data-test-advanced-table-tr" />`,
+      <template><Tr id="data-test-advanced-table-tr" /></template>,
     );
     assert.dom(checkboxSelector).doesNotExist();
   });
 
   test('it should render a checkbox if `@isSelectable` is `true`', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} /></template>,
     );
     assert.dom(checkboxSelector).exists();
   });
 
   test('the checkbox should be checked if `@isSelected` is `true`', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-  @isSelected={{true}}
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @isSelected={{true}} /></template>,
     );
     assert.dom(checkboxSelector).isChecked();
   });
 
   test('the checkbox contains the `@selectionAriaLabelSuffix` suffix', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-  @selectionAriaLabelSuffix='row 123'
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @selectionAriaLabelSuffix="row 123" /></template>,
     );
     assert.dom(checkboxSelector).hasAria('label', 'Select row 123');
   });
 
   test('the `th` element has the correct `role` attribute value provided via `@selectionScope`', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-  @selectionScope='row'
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @selectionScope="row" /></template>,
     );
     assert
       .dom(
@@ -104,13 +88,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
       (_checkbox, selectionKey) => (key = selectionKey),
     );
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-  @selectionScope='row'
-  @selectionKey='row123'
-  @onSelectionChange={{this.onSelectionChange}}
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @selectionScope="row" @selectionKey="row123" @onSelectionChange={{this.onSelectionChange}} /></template>,
     );
     await click(checkboxSelector);
     assert.strictEqual(key, 'row123');
@@ -120,11 +98,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
     this.set('noop', () => {});
 
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-  @onClickSortBySelected={{this.noop}}
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @onClickSortBySelected={{this.noop}} /></template>,
     );
 
     assert
@@ -134,10 +108,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should not render a sort button in the checkbox cell if `@isSelectable` is `true`, and `@onClickSortBySelected` is undefined', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr
-  id='data-test-advanced-table-tr'
-  @isSelectable={{true}}
-/>`,
+      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} /></template>,
     );
 
     assert
@@ -149,7 +120,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      hbs`<Hds::AdvancedTable::Tr id='data-test-advanced-table-tr' lang='es' />`,
+      <template><Tr id="data-test-advanced-table-tr" lang="es" /></template>,
     );
     assert.dom('#data-test-advanced-table-tr').hasAttribute('lang', 'es');
   });
@@ -164,7 +135,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
       assert.strictEqual(error.message, errorMessage);
     });
     await render(
-      hbs`<Hds::AdvancedTable::Tr @isSelectable={{true}} @selectionScope='row' />`,
+      <template><Tr @isSelectable={{true}} @selectionScope="row" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/alert/index-test.js b/showcase/tests/integration/components/hds/alert/index-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/alert/index-test.js
rename to showcase/tests/integration/components/hds/alert/index-test.gjs
index d418865a48e..e3672ba4679 100644
--- a/showcase/tests/integration/components/hds/alert/index-test.js
+++ b/showcase/tests/integration/components/hds/alert/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Alert from "@hashicorp/design-system-components/components/hds/alert/index";
 
 module('Integration | Component | hds/alert/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,14 +16,14 @@ module('Integration | Component | hds/alert/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Alert @type="inline" id="test-alert" />`);
+    await render(<template><Alert @type="inline" id="test-alert" /></template>);
     assert.dom('#test-alert').hasClass('hds-alert');
   });
 
   // TYPE
 
   test('it should render the correct CSS type class depending on the @type prop', async function (assert) {
-    await render(hbs`<Hds::Alert @type="page" id="test-alert" />`);
+    await render(<template><Alert @type="page" id="test-alert" /></template>);
     assert.dom('#test-alert').hasClass('hds-alert--type-page');
   });
 
@@ -31,29 +31,29 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render an icon by default depending on the type and color', async function (assert) {
     // here we don't test all the possible combinations, only some of them as precaution
-    await render(hbs`<Hds::Alert @type="inline" />`);
+    await render(<template><Alert @type="inline" /></template>);
     assert.dom('.hds-icon-info').exists();
-    await render(hbs`<Hds::Alert @type="compact" />`);
+    await render(<template><Alert @type="compact" /></template>);
     assert.dom('.hds-icon-info-fill').exists();
-    await render(hbs`<Hds::Alert @type="inline" @color="highlight" />`);
+    await render(<template><Alert @type="inline" @color="highlight" /></template>);
     assert.dom('.hds-icon-info').exists();
-    await render(hbs`<Hds::Alert @type="inline" @color="success" />`);
+    await render(<template><Alert @type="inline" @color="success" /></template>);
     assert.dom('.hds-icon-check-circle').exists();
-    await render(hbs`<Hds::Alert @type="inline" @color="warning" />`);
+    await render(<template><Alert @type="inline" @color="warning" /></template>);
     assert.dom('.hds-icon-alert-triangle').exists();
-    await render(hbs`<Hds::Alert @type="inline" @color="critical" />`);
+    await render(<template><Alert @type="inline" @color="critical" /></template>);
     assert.dom('.hds-icon-alert-diamond').exists();
   });
 
   test('if an icon is declared, the icon should render in the component and override the default one', async function (assert) {
-    await render(hbs`<Hds::Alert @type="inline" @icon="clipboard-copy" />`);
+    await render(<template><Alert @type="inline" @icon="clipboard-copy" /></template>);
     assert.dom('.hds-icon-clipboard-copy').exists();
-    await render(hbs`<Hds::Alert @type="compact" @icon="clipboard-copy" />`);
+    await render(<template><Alert @type="compact" @icon="clipboard-copy" /></template>);
     assert.dom('.hds-icon-clipboard-copy').exists();
   });
 
   test('it should display no icon when @icon is set to false', async function (assert) {
-    await render(hbs`<Hds::Alert @type="inline" @icon={{false}} />`);
+    await render(<template><Alert @type="inline" @icon={{false}} /></template>);
     assert.dom('.hds-icon').doesNotExist();
   });
 
@@ -61,19 +61,19 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the title when the "title" contextual component is provided', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" as |A|><A.Title>This is the title</A.Title></Hds::Alert>`,
+      <template><Alert @type="inline" as |A|><A.Title>This is the title</A.Title></Alert></template>,
     );
     assert.dom(this.element).hasText('This is the title');
   });
   test('it should render the description when the "description" contextual component is provided', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" as |A|><A.Description>This is the description</A.Description></Hds::Alert>`,
+      <template><Alert @type="inline" as |A|><A.Description>This is the description</A.Description></Alert></template>,
     );
     assert.dom(this.element).hasText('This is the description');
   });
   test('it should render rich HTML when the "description" contextual component contains HTML tags', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" as |A|><A.Description>Hello <strong>strong</strong> and <em>em</em> and <code>code</code> and <a href='#'>link</a></A.Description></Hds::Alert>`,
+      <template><Alert @type="inline" as |A|><A.Description>Hello <strong>strong</strong> and <em>em</em> and <code>code</code> and <a href="#">link</a></A.Description></Alert></template>,
     );
     assert.dom('.hds-alert__description strong').exists().hasText('strong');
     assert.dom('.hds-alert__description em').exists().hasText('em');
@@ -81,17 +81,17 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     assert.dom('.hds-alert__description a').exists().hasText('link');
   });
   test('it should render a div when the @tag argument is not provided', async function (assert) {
-    await render(hbs`
-      <Hds::Alert @type="inline" as |A|>
+    await render(<template>
+      <Alert @type="inline" as |A|>
         <A.Title>This is the title</A.Title>
-      </Hds::Alert>`);
+      </Alert></template>);
     assert.dom('.hds-alert__title').hasTagName('div');
   });
   test('it should render the custom title tag when the @tag argument is provided', async function (assert) {
-    await render(hbs`
-      <Hds::Alert @type="inline" as |A|>
+    await render(<template>
+      <Alert @type="inline" as |A|>
         <A.Title @tag="h2">This is the title</A.Title>
-      </Hds::Alert>`);
+      </Alert></template>);
     assert.dom('.hds-alert__title').hasTagName('h2');
   });
 
@@ -99,7 +99,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render an Hds::Button component yielded to the "actions" container', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" aria-labelledby="test-alert-button" id="test-alert" as |A|><A.Button @text="I am a button" @size="small" @color="secondary" id="test-alert-button"/></Hds::Alert>`,
+      <template><Alert @type="inline" aria-labelledby="test-alert-button" id="test-alert" as |A|><A.Button @text="I am a button" @size="small" @color="secondary" id="test-alert-button" /></Alert></template>,
     );
     assert
       .dom('#test-alert .hds-alert__actions button')
@@ -111,7 +111,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
   });
   test('it should render an Hds::Link::Standalone component yielded to the "actions" container', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" aria-labelledby="test-alert-link" id="test-alert" as |A|><A.LinkStandalone @icon="plus" @text="I am a link" @href="#" @size="small" @color="secondary" id="test-alert-link" /></Hds::Alert>`,
+      <template><Alert @type="inline" aria-labelledby="test-alert-link" id="test-alert" as |A|><A.LinkStandalone @icon="plus" @text="I am a link" @href="#" @size="small" @color="secondary" id="test-alert-link" /></Alert></template>,
     );
     assert
       .dom('#test-alert .hds-alert__actions a')
@@ -126,7 +126,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render any content passed to the "generic" contextual component', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" id="test-alert" as |A|><A.Generic><pre>test</pre></A.Generic></Hds::Alert>`,
+      <template><Alert @type="inline" id="test-alert" as |A|><A.Generic><pre>test</pre></A.Generic></Alert></template>,
     );
     assert.dom('#test-alert .hds-alert__content pre').exists().hasText('test');
   });
@@ -134,12 +134,12 @@ module('Integration | Component | hds/alert/index', function (hooks) {
   // DISMISS
 
   test('it should not render the "dismiss" button by default', async function (assert) {
-    await render(hbs`<Hds::Alert @type="inline" />`);
+    await render(<template><Alert @type="inline" /></template>);
     assert.dom('button.hds-alert__dismiss').doesNotExist();
   });
   test('it should render the "dismiss" button if a callback function is passed to the @onDismiss argument', async function (assert) {
     this.set('NOOP', () => {});
-    await render(hbs`<Hds::Alert @type="inline" @onDismiss={{this.NOOP}} />`);
+    await render(<template><Alert @type="inline" @onDismiss={{this.NOOP}} /></template>);
     assert.dom('button.hds-alert__dismiss').exists();
   });
 
@@ -149,7 +149,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the component with role="alert" and aria-live="polite" for the "success" color', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" @color="success" id="test-alert" />`,
+      <template><Alert @type="inline" @color="success" id="test-alert" /></template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alert');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -157,7 +157,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the component with role="alert" and aria-live="polite" for the "warning" color', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" @color="warning" id="test-alert" />`,
+      <template><Alert @type="inline" @color="warning" id="test-alert" /></template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alert');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -165,7 +165,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the component with role="alert" and aria-live="polite" for the "critical" color', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" @color="critical" id="test-alert" />`,
+      <template><Alert @type="inline" @color="critical" id="test-alert" /></template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alert');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -175,7 +175,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should not render the component with role="alert" and aria-live="polite" for the "neutral" color', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" @color="neutral" id="test-alert" />`,
+      <template><Alert @type="inline" @color="neutral" id="test-alert" /></template>,
     );
     assert.dom('#test-alert').doesNotHaveAttribute('role', 'alert');
     assert.dom('#test-alert').doesNotHaveAttribute('aria-live', 'polite');
@@ -183,7 +183,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should not render the component with role="alert" and aria-live="polite" for the "highlight" color', async function (assert) {
     await render(
-      hbs`<Hds::Alert @type="inline" @color="highlight" id="test-alert" />`,
+      <template><Alert @type="inline" @color="highlight" id="test-alert" /></template>,
     );
     assert.dom('#test-alert').doesNotHaveAttribute('role', 'alert');
     assert.dom('#test-alert').doesNotHaveAttribute('aria-live', 'polite');
@@ -193,11 +193,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render with an auto-generated `aria-labelledby` when a title is provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" id="test-alert" as |A|>
           <A.Title>This is the title</A.Title>
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     let title = this.element.querySelector('#test-alert .hds-alert__title');
     assert.dom('#test-alert').hasAttribute('aria-labelledby', title.id);
@@ -205,11 +205,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render with an auto-generated `aria-labelledby` when description is provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" id="test-alert" as |A|>
           <A.Description>This is the title</A.Description>
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     let description = this.element.querySelector(
       '#test-alert .hds-alert__description',
@@ -223,11 +223,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render with with role="alertdialog" and aria-live="polite" for the "success" color when actions are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" @color="success" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" @color="success" id="test-alert" as |A|>
           <A.Button @text="I am a button" @size="small" />
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alertdialog');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -235,11 +235,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render with with role="alertdialog" and aria-live="polite" for the "warning" color when actions are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" @color="warning" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" @color="warning" id="test-alert" as |A|>
           <A.Button @text="I am a button" @size="small" />
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alertdialog');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -247,11 +247,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render with with role="alertdialog" and aria-live="polite" for the "critical" color when actions are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" @color="critical" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" @color="critical" id="test-alert" as |A|>
           <A.Button @text="I am a button" @size="small" />
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alertdialog');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -261,11 +261,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should not render with with role="alertdialog" and aria-live="polite" for the "neutral" color when actions are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" @color="neutral" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" @color="neutral" id="test-alert" as |A|>
           <A.Button @text="I am a button" @size="small" />
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     assert.dom('#test-alert').doesNotHaveAttribute('role', 'alertdialog');
     assert.dom('#test-alert').doesNotHaveAttribute('aria-live', 'polite');
@@ -273,11 +273,11 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should not render with with role="alertdialog" and aria-live="polite" for the "highlight" color when actions are provided', async function (assert) {
     await render(
-      hbs`
-        <Hds::Alert @type="inline" @color="highlight" id="test-alert" as |A|>
+      <template>
+        <Alert @type="inline" @color="highlight" id="test-alert" as |A|>
           <A.Button @text="I am a button" @size="small" />
-        </Hds::Alert>
-      `,
+        </Alert>
+      </template>,
     );
     assert.dom('#test-alert').doesNotHaveAttribute('role', 'alertdialog');
     assert.dom('#test-alert').doesNotHaveAttribute('aria-live', 'polite');
@@ -292,7 +292,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Alert @type="foo" />`);
+    await render(<template><Alert @type="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -304,7 +304,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Alert @type="compact" @icon={{false}} />`);
+    await render(<template><Alert @type="compact" @icon={{false}} /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -316,7 +316,7 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Alert @type="inline" @color="foo" />`);
+    await render(<template><Alert @type="inline" @color="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/app-footer/copyright-test.js b/showcase/tests/integration/components/hds/app-footer/copyright-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/app-footer/copyright-test.js
rename to showcase/tests/integration/components/hds/app-footer/copyright-test.gjs
index ffea2d39105..f4454ee6005 100644
--- a/showcase/tests/integration/components/hds/app-footer/copyright-test.js
+++ b/showcase/tests/integration/components/hds/app-footer/copyright-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Copyright from "@hashicorp/design-system-components/components/hds/app-footer/copyright";
 
 module('Integration | Component | hds/app-footer/copyright', function (hooks) {
   setupRenderingTest(hooks);
@@ -14,20 +14,20 @@ module('Integration | Component | hds/app-footer/copyright', function (hooks) {
   const currentYear = new Date().getFullYear();
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::AppFooter::Copyright id="test-copyright" />`);
+    await render(<template><Copyright id="test-copyright" /></template>);
     assert.dom('#test-copyright').hasClass('hds-app-footer__copyright');
   });
 
   // OPTIONS
 
   test('it renders the copyright with the current year by default', async function (assert) {
-    await render(hbs`<Hds::AppFooter::Copyright id="test-copyright" />`);
+    await render(<template><Copyright id="test-copyright" /></template>);
     assert.dom('#test-copyright').includesText(currentYear);
   });
 
   test('it renders the copyright with the passed in year value', async function (assert) {
     await render(
-      hbs`<Hds::AppFooter::Copyright id="test-copyright" @year="1984" />`,
+      <template><Copyright id="test-copyright" @year="1984" /></template>,
     );
     assert.dom('#test-copyright').includesText('1984');
   });
diff --git a/showcase/tests/integration/components/hds/app-footer/index-test.js b/showcase/tests/integration/components/hds/app-footer/index-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/app-footer/index-test.js
rename to showcase/tests/integration/components/hds/app-footer/index-test.gjs
index 1c3f4abc169..5dc2bd447a6 100644
--- a/showcase/tests/integration/components/hds/app-footer/index-test.js
+++ b/showcase/tests/integration/components/hds/app-footer/index-test.gjs
@@ -6,26 +6,26 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AppFooter from "@hashicorp/design-system-components/components/hds/app-footer/index";
 
 module('Integration | Component | hds/app-footer/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::AppFooter id="test-app-footer" />`);
+    await render(<template><AppFooter id="test-app-footer" /></template>);
     assert.dom('#test-app-footer').hasClass('hds-app-footer');
   });
 
   // CONTENT
 
   test('it renders the default content', async function (assert) {
-    await render(hbs`<Hds::AppFooter id="test-app-footer"></Hds::AppFooter>`);
+    await render(<template><AppFooter id="test-app-footer"></AppFooter></template>);
     assert.dom('.hds-app-footer__copyright').exists();
   });
 
   test('it renders the passed in content', async function (assert) {
-    await render(hbs`
-      <Hds::AppFooter as |AF|>
+    await render(<template>
+      <AppFooter as |AF|>
         <AF.ExtraBefore><span id="test-extra-before">Before</span></AF.ExtraBefore>
         <AF.Item id="test-custom-item">Custom item</AF.Item>
         <AF.Link @href="https://cloud.hashicorp.com" id="test-custom-link">
@@ -34,8 +34,8 @@ module('Integration | Component | hds/app-footer/index', function (hooks) {
         <AF.StatusLink @status="operational" id="test-status-link" />
         <AF.LegalLinks id="test-legal-links" />
         <AF.ExtraAfter><span id="test-extra-after">After</span></AF.ExtraAfter>
-      </Hds::AppFooter>
-    `);
+      </AppFooter>
+    </template>);
     assert.dom('#test-extra-before').hasText('Before');
     assert.dom('#test-custom-item').hasText('Custom item');
     assert
@@ -51,12 +51,12 @@ module('Integration | Component | hds/app-footer/index', function (hooks) {
   // OPTIONS
 
   test('it renders with the default "light" theme', async function (assert) {
-    await render(hbs`<Hds::AppFooter id="test-app-footer" />`);
+    await render(<template><AppFooter id="test-app-footer" /></template>);
     assert.dom('#test-app-footer').hasClass('hds-app-footer--theme-light');
   });
 
   test('it renders with the passed in "dark" theme', async function (assert) {
-    await render(hbs`<Hds::AppFooter id="test-app-footer" @theme="dark" />`);
+    await render(<template><AppFooter id="test-app-footer" @theme="dark" /></template>);
     assert.dom('#test-app-footer').hasClass('hds-app-footer--theme-dark');
   });
 });
diff --git a/showcase/tests/integration/components/hds/app-footer/item-test.js b/showcase/tests/integration/components/hds/app-footer/item-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/app-footer/item-test.js
rename to showcase/tests/integration/components/hds/app-footer/item-test.gjs
index 97246a9f68a..8798c7f6d2a 100644
--- a/showcase/tests/integration/components/hds/app-footer/item-test.js
+++ b/showcase/tests/integration/components/hds/app-footer/item-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/app-footer/item";
 
 module('Integration | Component | hds/app-footer/item', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<ul><Hds::AppFooter::Item id="test-item" /></ul>`);
+    await render(<template><ul><Item id="test-item" /></ul></template>);
     assert.dom('#test-item').hasClass('hds-app-footer__list-item');
   });
 
@@ -20,7 +20,7 @@ module('Integration | Component | hds/app-footer/item', function (hooks) {
 
   test('it renders text content yielded within the Item', async function (assert) {
     await render(
-      hbs`<ul><Hds::AppFooter::Item id="test-item">Custom item</Hds::AppFooter::Item></ul>`,
+      <template><ul><Item id="test-item">Custom item</Item></ul></template>,
     );
     assert.dom('#test-item').hasText('Custom item');
   });
diff --git a/showcase/tests/integration/components/hds/app-footer/legal-links-test.js b/showcase/tests/integration/components/hds/app-footer/legal-links-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/app-footer/legal-links-test.js
rename to showcase/tests/integration/components/hds/app-footer/legal-links-test.gjs
index c10734686bb..bbb75090194 100644
--- a/showcase/tests/integration/components/hds/app-footer/legal-links-test.js
+++ b/showcase/tests/integration/components/hds/app-footer/legal-links-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import LegalLinks from "@hashicorp/design-system-components/components/hds/app-footer/legal-links";
 
 module(
   'Integration | Component | hds/app-footer/legal-links',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<ul><Hds::AppFooter::LegalLinks id="test-legal-links" /></ul>`,
+        <template><ul><LegalLinks id="test-legal-links" /></ul></template>,
       );
       assert.dom('#test-legal-links').hasClass('hds-app-footer__legal-links');
     });
@@ -24,7 +24,7 @@ module(
 
     test('it contains the default links with default href values', async function (assert) {
       await render(
-        hbs`<ul><Hds::AppFooter::LegalLinks id="test-legal-links" /></ul>`,
+        <template><ul><LegalLinks id="test-legal-links" /></ul></template>,
       );
       assert
         .dom('#test-legal-links li:nth-child(1) a')
@@ -51,16 +51,9 @@ module(
     // OPTIONS
 
     test('it uses the passed in custom href values', async function (assert) {
-      await render(hbs`
-      <ul><Hds::AppFooter::LegalLinks 
-        id="test-legal-links"
-        @hrefForSupport="https://www.support.com"
-        @hrefForTerms="https://www.terms.com"
-        @hrefForPrivacy="https://www.privacy.com"
-        @hrefForSecurity="https://www.security.com"
-        @hrefForAccessibility="https://www.a11y.com"
-      /></ul>
-    `);
+      await render(<template>
+      <ul><LegalLinks id="test-legal-links" @hrefForSupport="https://www.support.com" @hrefForTerms="https://www.terms.com" @hrefForPrivacy="https://www.privacy.com" @hrefForSecurity="https://www.security.com" @hrefForAccessibility="https://www.a11y.com" /></ul>
+    </template>);
       assert
         .dom('#test-legal-links li:nth-child(1) a')
         .hasText('Support')
diff --git a/showcase/tests/integration/components/hds/app-footer/link-test.js b/showcase/tests/integration/components/hds/app-footer/link-test.gjs
similarity index 70%
rename from showcase/tests/integration/components/hds/app-footer/link-test.js
rename to showcase/tests/integration/components/hds/app-footer/link-test.gjs
index bc47c0e285b..b26a9f39a32 100644
--- a/showcase/tests/integration/components/hds/app-footer/link-test.js
+++ b/showcase/tests/integration/components/hds/app-footer/link-test.gjs
@@ -6,18 +6,18 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Link from "@hashicorp/design-system-components/components/hds/app-footer/link";
 
 module('Integration | Component | hds/app-footer/link', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <ul>
-        <Hds::AppFooter::Link @href="https://cloud.hashicorp.com" id="test-link">
+        <Link @href="https://cloud.hashicorp.com" id="test-link">
           Custom link
-        </Hds::AppFooter::Link>
-      </ul>`);
+        </Link>
+      </ul></template>);
     assert.dom('#test-link').hasClass('hds-app-footer__link');
   });
 
@@ -25,12 +25,12 @@ module('Integration | Component | hds/app-footer/link', function (hooks) {
 
   test('it renders text content yielded within the Link', async function (assert) {
     await render(
-      hbs`
+      <template>
         <ul>
-          <Hds::AppFooter::Link @href="https://cloud.hashicorp.com" id="test-link">
+          <Link @href="https://cloud.hashicorp.com" id="test-link">
             Custom link
-          </Hds::AppFooter::Link>
-        </ul>`,
+          </Link>
+        </ul></template>,
     );
     assert
       .dom('#test-link')
diff --git a/showcase/tests/integration/components/hds/app-footer/status-link-test.js b/showcase/tests/integration/components/hds/app-footer/status-link-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/app-footer/status-link-test.js
rename to showcase/tests/integration/components/hds/app-footer/status-link-test.gjs
index f594c3245b1..6142adeee82 100644
--- a/showcase/tests/integration/components/hds/app-footer/status-link-test.js
+++ b/showcase/tests/integration/components/hds/app-footer/status-link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import StatusLink from "@hashicorp/design-system-components/components/hds/app-footer/status-link";
 
 module(
   'Integration | Component | hds/app-footer/status-link',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<ul><Hds::AppFooter::StatusLink @status="operational" id="test-status-link" /></ul>`,
+        <template><ul><StatusLink @status="operational" id="test-status-link" /></ul></template>,
       );
       assert.dom('#test-status-link').hasClass('hds-app-footer__status-link');
     });
@@ -25,12 +25,12 @@ module(
     // status
 
     test('it should display text, icon, and icon color matching the passed in status', async function (assert) {
-      await render(hbs`<ul class="hds-app-footer hds-app-footer--theme-light">
-        <Hds::AppFooter::StatusLink id="test-operational" @status="operational" />
-        <Hds::AppFooter::StatusLink id="test-degraded" @status="degraded" />
-        <Hds::AppFooter::StatusLink id="test-maintenance" @status="maintenance" />
-        <Hds::AppFooter::StatusLink id="test-outage" @status="outage" />
-      </ul>`);
+      await render(<template><ul class="hds-app-footer hds-app-footer--theme-light">
+        <StatusLink id="test-operational" @status="operational" />
+        <StatusLink id="test-degraded" @status="degraded" />
+        <StatusLink id="test-maintenance" @status="maintenance" />
+        <StatusLink id="test-outage" @status="outage" />
+      </ul></template>);
       // operational
       assert
         .dom('#test-operational')
@@ -68,13 +68,9 @@ module(
     // text, statusIcon, statusIconColor
 
     test('it should display the custom text, icon color, and icon passed in', async function (assert) {
-      await render(hbs`
-      <ul><Hds::AppFooter::StatusLink
-        @text="Waypoint"
-        @statusIcon="waypoint"
-        @statusIconColor="var(--token-color-waypoint-brand)"
-      /></ul>
-    `);
+      await render(<template>
+      <ul><StatusLink @text="Waypoint" @statusIcon="waypoint" @statusIconColor="var(--token-color-waypoint-brand)" /></ul>
+    </template>);
       assert.dom('.hds-app-footer__status-link').hasText('Waypoint');
       assert.dom('.hds-app-footer__status-link .hds-icon').exists();
       // .hasStyle({'--hds-app-footer-status-icon-color': 'var(--token-color-waypoint-brand)'})
@@ -83,9 +79,9 @@ module(
     // href
 
     test('it should use the passed in href for the link', async function (assert) {
-      await render(hbs`
-      <ul><Hds::AppFooter::StatusLink @status="operational" @href="https://www.hashicorp.com/custom-url" /></ul>
-    `);
+      await render(<template>
+      <ul><StatusLink @status="operational" @href="https://www.hashicorp.com/custom-url" /></ul>
+    </template>);
       assert
         .dom('.hds-app-footer__status-link')
         .hasAttribute('href', 'https://www.hashicorp.com/custom-url');
@@ -100,7 +96,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<ul><Hds::AppFooter::StatusLink /></ul>`);
+      await render(<template><ul><StatusLink /></ul></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
@@ -113,7 +109,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<ul><Hds::AppFooter::StatusLink @status="foo" /></ul>`);
+      await render(<template><ul><StatusLink @status="foo" /></ul></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/app-frame/index-test.js b/showcase/tests/integration/components/hds/app-frame/index-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/app-frame/index-test.js
rename to showcase/tests/integration/components/hds/app-frame/index-test.gjs
index 5ca9119e9ca..a3d5289c79a 100644
--- a/showcase/tests/integration/components/hds/app-frame/index-test.js
+++ b/showcase/tests/integration/components/hds/app-frame/index-test.gjs
@@ -6,21 +6,21 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AppFrame from "@hashicorp/design-system-components/components/hds/app-frame/index";
 
 module('Integration | Component | hds/app-frame/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::AppFrame id="test-app-frame" />`);
+    await render(<template><AppFrame id="test-app-frame" /></template>);
     assert.dom('#test-app-frame').hasClass('hds-app-frame');
   });
 
   // CONTENT
 
   test('it should yield the different content areas (and spreads attributes on them)', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame id="test-app-frame" data-test-app-frame as |Frame|>
+    await render(<template>
+        <AppFrame id="test-app-frame" data-test-app-frame as |Frame|>
           <Frame.Header id="test-app-frame-header" data-test-app-frame-header>
             header container
           </Frame.Header>
@@ -36,8 +36,8 @@ module('Integration | Component | hds/app-frame/index', function (hooks) {
           <Frame.Modals id="test-app-frame-modals" data-test-app-frame-modals>
             modals container
           </Frame.Modals>
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
 
     assert.dom('#test-app-frame[data-test-app-frame]').exists();
 
@@ -79,63 +79,63 @@ module('Integration | Component | hds/app-frame/index', function (hooks) {
   // hasHeader
 
   test('it should hide the header when @hasHeader is false', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame @hasHeader={{false}} as |Frame|>
+    await render(<template>
+        <AppFrame @hasHeader={{false}} as |Frame|>
           <Frame.Header id="test-app-frame-header" />
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
     assert.dom('#test-app-frame-header').doesNotExist();
   });
 
   // hasSidebar
 
   test('it should hide the sidebar when @hasSidebar is false', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame @hasSidebar={{false}} as |Frame|>
+    await render(<template>
+        <AppFrame @hasSidebar={{false}} as |Frame|>
           <Frame.Sidebar id="test-app-frame-sidebar" />
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
     assert.dom('#test-app-frame-sidebar').doesNotExist();
   });
 
   // hasFooter
 
   test('it should hide the sidebar when @hasFooter is false', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame @hasFooter={{false}} as |Frame|>
+    await render(<template>
+        <AppFrame @hasFooter={{false}} as |Frame|>
           <Frame.Footer id="test-app-frame-footer" />
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
     assert.dom('#test-app-frame-sidebar').doesNotExist();
   });
 
   // hasModals
 
   test('it should hide the modals when @hasModals is false', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame @hasModals={{false}} as |Frame|>
+    await render(<template>
+        <AppFrame @hasModals={{false}} as |Frame|>
           <Frame.Modals id="test-app-frame-modals" />
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
     assert.dom('#test-app-frame-modals').doesNotExist();
   });
 
   // Main id
   test('it should have a default id of "hds-main" on the main container', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame as |Frame|>
+    await render(<template>
+        <AppFrame as |Frame|>
           <Frame.Main />
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
     assert.dom('main#hds-main').exists();
   });
 
   test('it should allow a custom id for the main container to be passed in', async function (assert) {
-    await render(hbs`
-        <Hds::AppFrame as |Frame|>
+    await render(<template>
+        <AppFrame as |Frame|>
           <Frame.Main id="test-main" />
-        </Hds::AppFrame>
-    `);
+        </AppFrame>
+    </template>);
     assert.dom('main#test-main').exists();
   });
 });
diff --git a/showcase/tests/integration/components/hds/app-header/home-link-test.js b/showcase/tests/integration/components/hds/app-header/home-link-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/app-header/home-link-test.js
rename to showcase/tests/integration/components/hds/app-header/home-link-test.gjs
index e35487b1216..b7777181713 100644
--- a/showcase/tests/integration/components/hds/app-header/home-link-test.js
+++ b/showcase/tests/integration/components/hds/app-header/home-link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import HomeLink from "@hashicorp/design-system-components/components/hds/app-header/home-link";
 
 module('Integration | Component | hds/app-header/home-link', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,11 +17,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::AppHeader::HomeLink
-  @icon='hashicorp'
-  @text='HashiCorp'
-  id='test-home-link'
-/>`,
+      <template><HomeLink @icon="hashicorp" @text="HashiCorp" id="test-home-link" /></template>,
     );
     assert.dom('#test-home-link').hasClass('hds-app-header__home-link');
   });
@@ -30,12 +26,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      hbs`<Hds::AppHeader::HomeLink
-  @icon='hashicorp'
-  @text='HashiCorp'
-  @href='https://www.hashicorp.com/'
-  id='test-home-link'
-/>`,
+      <template><HomeLink @icon="hashicorp" @text="HashiCorp" @href="https://www.hashicorp.com/" id="test-home-link" /></template>,
     );
     assert.dom('.hds-icon-hashicorp').exists();
     assert
@@ -46,12 +37,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it renders the logo with a custom passed in color', async function (assert) {
     await render(
-      hbs`<Hds::AppHeader::HomeLink
-  @icon='boundary'
-  @text='Boundary'
-  @color='var(--token-color-boundary-brand)'
-  @href='#'
-/>`,
+      <template><HomeLink @icon="boundary" @text="Boundary" @color="var(--token-color-boundary-brand)" @href="#" /></template>,
     );
     assert
       .dom('.hds-icon-boundary')
@@ -60,13 +46,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it renders the logo with text when @isIconOnly is false', async function (assert) {
     await render(
-      hbs`<Hds::AppHeader::HomeLink
-  @icon='hashicorp'
-  @text='HashiCorp'
-  @isIconOnly={{false}}
-  @href='#'
-  id='test-home-link'
-/>`,
+      <template><HomeLink @icon="hashicorp" @text="HashiCorp" @isIconOnly={{false}} @href="#" id="test-home-link" /></template>,
     );
     assert.dom('.hds-text').exists();
   });
@@ -80,7 +60,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::AppHeader::HomeLink @icon='hashicorp' />`);
+    await render(<template><HomeLink @icon="hashicorp" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/app-header/index-test.js b/showcase/tests/integration/components/hds/app-header/index-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/app-header/index-test.js
rename to showcase/tests/integration/components/hds/app-header/index-test.gjs
index 96f1b91805c..47a6fb9d482 100644
--- a/showcase/tests/integration/components/hds/app-header/index-test.js
+++ b/showcase/tests/integration/components/hds/app-header/index-test.gjs
@@ -6,30 +6,33 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, triggerKeyEvent } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AppHeader from "@hashicorp/design-system-components/components/hds/app-header/index";
+import HomeLink from "@hashicorp/design-system-components/components/hds/app-header/home-link";
+import { on } from "@ember/modifier";
+import Button from "@hashicorp/design-system-components/components/hds/button/index";
 
 module('Integration | Component | hds/app-header/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::AppHeader id='test-app-header' />`);
+    await render(<template><AppHeader id="test-app-header" /></template>);
     assert.dom('#test-app-header').hasClass('hds-app-header');
   });
 
   // CONTENT
 
   test('it renders content passed into the globalActions and utilityActions named blocks', async function (assert) {
-    await render(hbs`<Hds::AppHeader>
+    await render(<template><AppHeader>
   <:logo>
-    <span id='test-global-item-before'>Global Item Before</span>
+    <span id="test-global-item-before">Global Item Before</span>
   </:logo>
   <:globalActions>
-    <span id='test-global-item-after'>Global Item After</span>
+    <span id="test-global-item-after">Global Item After</span>
   </:globalActions>
   <:utilityActions>
-    <span id='test-utility-item'>Utility Item</span>
+    <span id="test-utility-item">Utility Item</span>
   </:utilityActions>
-</Hds::AppHeader>`);
+</AppHeader></template>);
     assert.dom('#test-global-item-before').hasText('Global Item Before');
     assert.dom('#test-global-item-after').hasText('Global Item After');
     assert.dom('#test-utility-item').hasText('Utility Item');
@@ -38,12 +41,12 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   // RESPONSIVENESS
 
   test('it is "desktop" by default', async function (assert) {
-    await render(hbs`<Hds::AppHeader id='test-app-header' />`);
+    await render(<template><AppHeader id="test-app-header" /></template>);
     assert.dom('#test-app-header').hasClass('hds-app-header--is-desktop');
   });
 
   test('it does not show a menu button on wide viewports', async function (assert) {
-    await render(hbs`<Hds::AppHeader />`);
+    await render(<template><AppHeader /></template>);
     assert.dom('.hds-app-header__menu-button').doesNotExist();
   });
 
@@ -53,27 +56,27 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
 
   test('it is "mobile" on narrow viewports', async function (assert) {
     await render(
-      hbs`<Hds::AppHeader id='test-app-header' @breakpoint='10000px' />`,
+      <template><AppHeader id="test-app-header" @breakpoint="10000px" /></template>,
     );
     assert.dom('#test-app-header').hasClass('hds-app-header--is-mobile');
   });
 
   test('it shows a menu button on narrow viewports', async function (assert) {
-    await render(hbs`
-<Hds::AppHeader @breakpoint='10000px' />`);
+    await render(<template>
+<AppHeader @breakpoint="10000px" /></template>);
     assert.dom('.hds-app-header__menu-button').exists();
   });
 
   // Mobile menu functionality
   test(`the actions do not display by default on narrow viewports`, async function (assert) {
-    await render(hbs`
-<Hds::AppHeader id='test-app-header' @breakpoint='10000px' />`);
+    await render(<template>
+<AppHeader id="test-app-header" @breakpoint="10000px" /></template>);
     assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');
   });
 
   test(`the actions show/hide when the menu button is pressed on narrow viewports`, async function (assert) {
-    await render(hbs`
-<Hds::AppHeader id='test-app-header' @breakpoint='10000px' />`);
+    await render(<template>
+<AppHeader id="test-app-header" @breakpoint="10000px" /></template>);
     assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');
 
     await click('.hds-app-header__menu-button');
@@ -85,23 +88,18 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
 
   // Close callback
   test('it should hide the actions when the "close" function is called in mobile view', async function (assert) {
-    await render(hbs`
-<Hds::AppHeader id='test-app-header' @breakpoint='10000px'>
+    await render(<template>
+<AppHeader id="test-app-header" @breakpoint="10000px">
   <:logo as |actions|>
-    <Hds::AppHeader::HomeLink
-      @icon="hashicorp"
-      @text="HashiCorp"
-      id="test-home-link"
-      {{on "click" actions.close}}
-    />
+    <HomeLink @icon="hashicorp" @text="HashiCorp" id="test-home-link" {{on "click" actions.close}} />
   </:logo>
   <:globalActions as |actions|>
-    <Hds::Button id='test-global-action' {{on 'click' actions.close}} @text="Global action" />
+    <Button id="test-global-action" {{on "click" actions.close}} @text="Global action" />
   </:globalActions>
   <:utilityActions as |actions|>
-    <Hds::Button id='test-utility-action' {{on 'click' actions.close}} @text="Utility action" />
+    <Button id="test-utility-action" {{on "click" actions.close}} @text="Utility action" />
   </:utilityActions>
-</Hds::AppHeader>`);
+</AppHeader></template>);
 
     // test logo actions close
     await click('.hds-app-header__menu-button');
@@ -123,15 +121,15 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   });
 
   test('it should not do anything when the "close" function is called in desktop view', async function (assert) {
-    await render(hbs`
-<Hds::AppHeader id='test-app-header' >
+    await render(<template>
+<AppHeader id="test-app-header">
     <:globalActions as |actions|>
-    <Hds::Button id='test-global-action' {{on 'click' actions.close}} @text="Global action" />
+    <Button id="test-global-action" {{on "click" actions.close}} @text="Global action" />
   </:globalActions>
       <:utilityActions as |actions|>
-    <Hds::Button id='test-utility-action' {{on 'click' actions.close}} @text="Utility action" />
+    <Button id="test-utility-action" {{on "click" actions.close}} @text="Utility action" />
   </:utilityActions>
-</Hds::AppHeader>`);
+</AppHeader></template>);
     assert.dom('#test-app-header').hasClass('hds-app-header--is-desktop');
     assert
       .dom('#test-app-header')
@@ -167,14 +165,14 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   // Note: We pass in a high custom breakpoint to force the component to render as "mobile"
 
   test('it uses the custom passed in breakpoint to control menu display', async function (assert) {
-    await render(hbs`<Hds::AppHeader @breakpoint='20000px' />`);
+    await render(<template><AppHeader @breakpoint="20000px" /></template>);
     assert.dom('.hds-app-header__menu-button').exists();
   });
 
   // A11Y
 
   test(`it displays the correct value for aria-expanded when actions are displayed vs hidden`, async function (assert) {
-    await render(hbs`<Hds::AppHeader @breakpoint='10000px' />`);
+    await render(<template><AppHeader @breakpoint="10000px" /></template>);
     await click('.hds-app-header__menu-button');
     assert
       .dom('.hds-app-header__menu-button')
@@ -188,7 +186,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
 
   test('the actions menu collapses when the ESC key is pressed on narrow viewports', async function (assert) {
     await render(
-      hbs`<Hds::AppHeader id='test-app-header' @breakpoint='10000px' />`,
+      <template><AppHeader id="test-app-header" @breakpoint="10000px" /></template>,
     );
     assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');
 
@@ -200,7 +198,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   });
 
   test('the menu button has an aria-controls attribute with a value matching the menu id', async function (assert) {
-    await render(hbs`<Hds::AppHeader @breakpoint='10000px' />`);
+    await render(<template><AppHeader @breakpoint="10000px" /></template>);
     await click('.hds-app-header__menu-button');
     assert.dom('.hds-app-header__menu-button').hasAttribute('aria-controls');
     assert.dom('.hds-app-header__actions').hasAttribute('id');
@@ -218,7 +216,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   // A11Y Refocus
 
   test('it renders the `a11y-refocus` elements by default with a default skip link href value of "#hds-main', async function (assert) {
-    await render(hbs`<Hds::AppHeader />`);
+    await render(<template><AppHeader /></template>);
     assert.dom('#ember-a11y-refocus-nav-message').exists();
     assert
       .dom('#ember-a11y-refocus-skip-link')
@@ -227,11 +225,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   });
 
   test('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) {
-    await render(hbs`<Hds::AppHeader
-  @a11yRefocusSkipTo='test-skip-to'
-  @a11yRefocusSkipText='test-skip-text'
-  @a11yRefocusNavigationText='test-navigation-text'
-/>`);
+    await render(<template><AppHeader @a11yRefocusSkipTo="test-skip-to" @a11yRefocusSkipText="test-skip-text" @a11yRefocusNavigationText="test-navigation-text" /></template>);
     assert
       .dom('#ember-a11y-refocus-nav-message')
       .hasText('test-navigation-text');
@@ -242,7 +236,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   });
 
   test('it does not render the `a11y-refocus` elements if `hasA11yRefocus` is false', async function (assert) {
-    await render(hbs`<Hds::AppHeader @hasA11yRefocus={{false}} />`);
+    await render(<template><AppHeader @hasA11yRefocus={{false}} /></template>);
     assert.dom('#ember-a11y-refocus-nav-message').doesNotExist();
     assert.dom('#ember-a11y-refocus-skip-link').doesNotExist();
   });
diff --git a/showcase/tests/integration/components/hds/app-side-nav/index-test.js b/showcase/tests/integration/components/hds/app-side-nav/index-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/app-side-nav/index-test.js
rename to showcase/tests/integration/components/hds/app-side-nav/index-test.gjs
index 23ca9d9f657..88eb7c49390 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/index-test.js
+++ b/showcase/tests/integration/components/hds/app-side-nav/index-test.gjs
@@ -4,19 +4,9 @@
  */
 
 import { module, test } from 'qunit';
-import {
-  setupRenderingTest,
-  cleanupBodyOverflow,
-} from 'showcase/tests/helpers';
-import {
-  render,
-  click,
-  resetOnerror,
-  settled,
-  triggerKeyEvent,
-  tab,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest, cleanupBodyOverflow } from 'showcase/tests/helpers';
+import { render, click, resetOnerror, settled, triggerKeyEvent, tab } from '@ember/test-helpers';
+import AppSideNav from "@hashicorp/design-system-components/components/hds/app-side-nav/index";
 
 class MockEventTarget extends EventTarget {}
 
@@ -53,7 +43,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav id='test-app-side-nav' @hasA11yRefocus={{false}} />`,
+      <template><AppSideNav id="test-app-side-nav" @hasA11yRefocus={{false}} /></template>,
     );
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav');
   });
@@ -61,21 +51,21 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   // CONTENT
 
   test('it renders content passed to the named blocks', async function (assert) {
-    await render(hbs`<Hds::AppSideNav @hasA11yRefocus={{false}}>
-  <span id='test-app-side-nav-body' />
-</Hds::AppSideNav>`);
+    await render(<template><AppSideNav @hasA11yRefocus={{false}}>
+  <span id="test-app-side-nav-body" />
+</AppSideNav></template>);
     assert.dom('#test-app-side-nav-body').exists();
   });
 
   // RESPONSIVENESS
 
   test('it is "desktop" by default', async function (assert) {
-    await render(hbs`<Hds::AppSideNav id='test-app-side-nav' />`);
+    await render(<template><AppSideNav id="test-app-side-nav" /></template>);
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-desktop');
   });
 
   test('it is "responsive" by default', async function (assert) {
-    await render(hbs`<Hds::AppSideNav id='test-app-side-nav' />`);
+    await render(<template><AppSideNav id="test-app-side-nav" /></template>);
     assert
       .dom('#test-app-side-nav')
       .hasClass('hds-app-side-nav--is-responsive');
@@ -83,7 +73,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
   test('it is not "responsive" if `isResponsive` is false', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav id='test-app-side-nav' @isResponsive={{false}} />`,
+      <template><AppSideNav id="test-app-side-nav" @isResponsive={{false}} /></template>,
     );
     assert
       .dom('#test-app-side-nav')
@@ -94,25 +84,21 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
   test('it is "mobile" on narrow viewports', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav id='test-app-side-nav' @breakpoint='10000px' />`,
+      <template><AppSideNav id="test-app-side-nav" @breakpoint="10000px" /></template>,
     );
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-mobile');
   });
 
   test('it is minimized/collapsed on narrow viewports by default', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav id='test-app-side-nav' @breakpoint='10000px' />`,
+      <template><AppSideNav id="test-app-side-nav" @breakpoint="10000px" /></template>,
     );
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
   });
 
   test('it is not minimized/collapsed on narrow viewports if `isResponsive` is false', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav
-  id='test-app-side-nav'
-  @isResponsive={{false}}
-  @breakpoint='10000px'
-/>`,
+      <template><AppSideNav id="test-app-side-nav" @isResponsive={{false}} @breakpoint="10000px" /></template>,
     );
     assert
       .dom('#test-app-side-nav')
@@ -121,25 +107,21 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
   test('it shows a toggle button on narrow viewports by default', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav id='test-app-side-nav' @breakpoint='10000px' />`,
+      <template><AppSideNav id="test-app-side-nav" @breakpoint="10000px" /></template>,
     );
     assert.dom('.hds-app-side-nav__toggle-button').exists();
   });
 
   test('it does not show a toggle button on narrow viewports if `isResponsive` is false', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav
-  id='test-app-side-nav'
-  @isResponsive={{false}}
-  @breakpoint='10000px'
-/>`,
+      <template><AppSideNav id="test-app-side-nav" @isResponsive={{false}} @breakpoint="10000px" /></template>,
     );
     assert.dom('.hds-app-side-nav__toggle-button').doesNotExist();
   });
 
   test('it expands/collapses when the toggle button is pressed on narrow viewports', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav id='test-app-side-nav' @breakpoint='10000px' />`,
+      <template><AppSideNav id="test-app-side-nav" @breakpoint="10000px" /></template>,
     );
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
     assert.dom('body', document).doesNotHaveStyle('overflow');
@@ -158,8 +140,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   });
 
   test('it collapses when the ESC key is pressed on narrow viewports', async function (assert) {
-    await render(hbs`<Hds::AppSideNav id='test-app-side-nav' @breakpoint='10000px'
-/>`);
+    await render(<template><AppSideNav id="test-app-side-nav" @breakpoint="10000px" /></template>);
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
     await click('.hds-app-side-nav__toggle-button');
     assert
@@ -175,7 +156,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
   test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav @isCollapsible={{true}} id='test-app-side-nav' />`,
+      <template><AppSideNav @isCollapsible={{true}} id="test-app-side-nav" /></template>,
     );
     assert
       .dom('#test-app-side-nav')
@@ -191,9 +172,9 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   });
 
   test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) {
-    await render(hbs`<Hds::AppSideNav @isCollapsible={{true}} id='test-app-side-nav'>
-  <span id='test-app-side-nav-body' />
-</Hds::AppSideNav>`);
+    await render(<template><AppSideNav @isCollapsible={{true}} id="test-app-side-nav">
+  <span id="test-app-side-nav-body" />
+</AppSideNav></template>);
     assert
       .dom('#test-app-side-nav')
       .hasClass('hds-app-side-nav--is-not-minimized');
@@ -228,10 +209,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
       onDesktopViewportChange: (...args) => calls.push(args),
     });
 
-    await render(hbs`<Hds::AppSideNav
-  @isCollapsible={{true}}
-  @onDesktopViewportChange={{this.onDesktopViewportChange}}
-/>`);
+    await render(<template><AppSideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}} /></template>);
 
     assert.strictEqual(calls.length, 1, 'called with initial viewport');
 
@@ -253,10 +231,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
       onDesktopViewportChange: (...args) => calls.push(args),
     });
 
-    await render(hbs`<Hds::AppSideNav
-  @isCollapsible={{true}}
-  @onDesktopViewportChange={{this.onDesktopViewportChange}}
-/>`);
+    await render(<template><AppSideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}} /></template>);
 
     await click('.hds-app-side-nav__toggle-button');
     assert.dom('.hds-app-side-nav__wrapper-body').hasAttribute('inert');
@@ -287,10 +262,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
       onDesktopViewportChange: (...args) => calls.push(args),
     });
 
-    await render(hbs`<Hds::AppSideNav
-  @isCollapsible={{true}}
-  @onDesktopViewportChange={{this.onDesktopViewportChange}}
-/>`);
+    await render(<template><AppSideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}} /></template>);
     await this.changeBrowserSize(false);
     assert.deepEqual(
       calls[1],
@@ -324,12 +296,9 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
 
     this.set('isAppSideNavRendered', true);
 
-    await render(hbs`{{#if this.isAppSideNavRendered}}
-  <Hds::AppSideNav
-    @isCollapsible={{true}}
-    @onDesktopViewportChange={{this.onDesktopViewportChange}}
-  />
-{{/if}}`);
+    await render(<template>{{#if this.isAppSideNavRendered}}
+  <AppSideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}} />
+{{/if}}</template>);
 
     await this.changeBrowserSize(false);
 
@@ -351,12 +320,9 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   });
 
   test('when collapsed, the content in the AppSideNav is not focusable', async function (assert) {
-    await render(hbs`<Hds::AppSideNav
-    id='test-app-side-nav'
-  @isCollapsible={{true}}
->
-  <button id='button-inside' type="button">Click</button>
-</Hds::AppSideNav><button id='button-outside' type="button">Click</button>`);
+    await render(<template><AppSideNav id="test-app-side-nav" @isCollapsible={{true}}>
+  <button id="button-inside" type="button">Click</button>
+</AppSideNav><button id="button-outside" type="button">Click</button></template>);
 
     await click('.hds-app-side-nav__toggle-button');
     assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized');
@@ -371,10 +337,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) {
   test('it should call `onToggleMinimizedStatus` function if provided', async function (assert) {
     let toggled = false;
     this.set('onToggleMinimizedStatus', () => (toggled = true));
-    await render(hbs`<Hds::AppSideNav
-  @isCollapsible={{true}}
-  @onToggleMinimizedStatus={{this.onToggleMinimizedStatus}}
-/>`);
+    await render(<template><AppSideNav @isCollapsible={{true}} @onToggleMinimizedStatus={{this.onToggleMinimizedStatus}} /></template>);
     await click('.hds-app-side-nav__toggle-button');
     assert.ok(toggled);
   });
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.js b/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.js
rename to showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gjs
index fbd1ea6f8a8..cbfd4c0d534 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.js
+++ b/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import BackLink from "@hashicorp/design-system-components/components/hds/app-side-nav/list/back-link";
 
 module(
   'Integration | Component | hds/app-side-nav/list/back-link',
@@ -17,9 +17,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::BackLink
-  id='test-app-side-nav-list-item-link-back-link'
-/>`,
+        <template><BackLink id="test-app-side-nav-list-item-link-back-link" /></template>,
       );
       assert
         .dom('#test-app-side-nav-list-item-link-back-link')
@@ -30,7 +28,7 @@ module(
 
     test('it renders the passed in args', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::BackLink @text='Back to parent page' @href='#' />`,
+        <template><BackLink @text="Back to parent page" @href="#" /></template>,
       );
       assert.dom('.hds-icon-chevron-left').exists();
       assert
@@ -41,7 +39,7 @@ module(
     // GENERATED ELEMENTS
 
     test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-      await render(hbs`<Hds::AppSideNav::List::BackLink />`);
+      await render(<template><BackLink /></template>);
       assert
         .dom('.hds-app-side-nav__list-item-link--back-link')
         .hasTagName('button');
@@ -49,7 +47,7 @@ module(
 
     test('it should render a <a> link if @href is passed', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::BackLink @href='https://www.hashicorp.com/' />`,
+        <template><BackLink @href="https://www.hashicorp.com/" /></template>,
       );
       assert
         .dom('.hds-app-side-nav__list-item-link--back-link')
@@ -59,7 +57,7 @@ module(
 
     test('it should render a <a> link if @route is passed', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::BackLink @route='page-utilities.interactive' />`,
+        <template><BackLink @route="page-utilities.interactive" /></template>,
       );
       assert
         .dom('.hds-app-side-nav__list-item-link--back-link')
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/index-test.js b/showcase/tests/integration/components/hds/app-side-nav/list/index-test.gjs
similarity index 71%
rename from showcase/tests/integration/components/hds/app-side-nav/list/index-test.js
rename to showcase/tests/integration/components/hds/app-side-nav/list/index-test.gjs
index ce01a238029..b9e8d1dcba1 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/list/index-test.js
+++ b/showcase/tests/integration/components/hds/app-side-nav/list/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import List from "@hashicorp/design-system-components/components/hds/app-side-nav/list/index";
 
 module(
   'Integration | Component | hds/app-side-nav/list/index',
@@ -17,7 +17,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List id='test-app-side-nav-list-wrapper' />`,
+        <template><List id="test-app-side-nav-list-wrapper" /></template>,
       );
       assert
         .dom('#test-app-side-nav-list-wrapper')
@@ -27,12 +27,12 @@ module(
     // Test Content / Args
 
     test('it renders passed in yielded content', async function (assert) {
-      await render(hbs`<Hds::AppSideNav::List as |L|>
-  <L.Item id='test-app-side-nav-list-content-item' />
-  <L.BackLink id='test-app-side-nav-list-content-backlink' />
-  <L.Title id='test-app-side-nav-list-content-title' />
-  <L.Link id='test-app-side-nav-list-content-link' />
-</Hds::AppSideNav::List>`);
+      await render(<template><List as |L|>
+  <L.Item id="test-app-side-nav-list-content-item" />
+  <L.BackLink id="test-app-side-nav-list-content-backlink" />
+  <L.Title id="test-app-side-nav-list-content-title" />
+  <L.Link id="test-app-side-nav-list-content-link" />
+</List></template>);
       assert.dom('#test-app-side-nav-list-content-item').exists();
       assert.dom('#test-app-side-nav-list-content-backlink').exists();
       assert.dom('#test-app-side-nav-list-content-title').exists();
@@ -41,7 +41,7 @@ module(
 
     // Accessibilty feature
     test('it has the role of "list" role so Safari will identify it correctly as a list since the list-style is changed in the CSS', async function (assert) {
-      await render(hbs`<Hds::AppSideNav::List />`);
+      await render(<template><List /></template>);
       assert.dom('.hds-app-side-nav__list').hasAttribute('role', 'list');
     });
   },
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/item-test.js b/showcase/tests/integration/components/hds/app-side-nav/list/item-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/app-side-nav/list/item-test.js
rename to showcase/tests/integration/components/hds/app-side-nav/list/item-test.gjs
index 10b5395e17e..e1fd9fa70b1 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/list/item-test.js
+++ b/showcase/tests/integration/components/hds/app-side-nav/list/item-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/app-side-nav/list/item";
 
 module(
   'Integration | Component | hds/app-side-nav/list/item',
@@ -17,7 +17,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::Item id='test-app-side-nav-list-item' />`,
+        <template><Item id="test-app-side-nav-list-item" /></template>,
       );
       assert
         .dom('#test-app-side-nav-list-item')
@@ -27,9 +27,9 @@ module(
     // Test Content
 
     test('it renders the passed in custom content', async function (assert) {
-      await render(hbs`
-        <Hds::AppSideNav::List::Item><span id='test-custom-content' /></Hds::AppSideNav::List::Item>
-      `);
+      await render(<template>
+        <Item><span id="test-custom-content" /></Item>
+      </template>);
       assert.dom('#test-custom-content').exists();
     });
   },
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/link-test.js b/showcase/tests/integration/components/hds/app-side-nav/list/link-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/app-side-nav/list/link-test.js
rename to showcase/tests/integration/components/hds/app-side-nav/list/link-test.gjs
index 5431b97c48a..4eb2f0a8e13 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/list/link-test.js
+++ b/showcase/tests/integration/components/hds/app-side-nav/list/link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Link from "@hashicorp/design-system-components/components/hds/app-side-nav/list/link";
 
 module(
   'Integration | Component | hds/app-side-nav/list/link',
@@ -17,7 +17,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::Link id='test-app-side-nav-list-item-link' />`,
+        <template><Link id="test-app-side-nav-list-item-link" /></template>,
       );
       assert
         .dom('#test-app-side-nav-list-item-link')
@@ -28,14 +28,7 @@ module(
 
     test('it renders the passed in args', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::Link
-  @icon='boundary'
-  @text='Boundary'
-  @count='3'
-  @badge='Alpha'
-  @hasSubItems={{true}}
-  @isHrefExternal={{true}}
-/>`,
+        <template><Link @icon="boundary" @text="Boundary" @count="3" @badge="Alpha" @hasSubItems={{true}} @isHrefExternal={{true}} /></template>,
       );
       assert.dom('.hds-icon-boundary').exists();
       assert.dom('.hds-app-side-nav__list-item-text').hasText('Boundary');
@@ -47,7 +40,7 @@ module(
 
     test('it renders the link as "active" if @isActive is true', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::Link @isActive={{true}} id='test-app-side-nav-link' />`,
+        <template><Link @isActive={{true}} id="test-app-side-nav-link" /></template>,
       );
       assert
         .dom('#test-app-side-nav-link')
@@ -56,22 +49,22 @@ module(
     });
 
     test('it renders the passed in custom content', async function (assert) {
-      await render(hbs`<Hds::AppSideNav::List::Link>
-  <span id='test-custom-content' />
-</Hds::AppSideNav::List::Link>`);
+      await render(<template><Link>
+  <span id="test-custom-content" />
+</Link></template>);
       assert.dom('#test-custom-content').exists();
     });
 
     // GENERATED ELEMENTS
 
     test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-      await render(hbs`<Hds::AppSideNav::List::Link />`);
+      await render(<template><Link /></template>);
       assert.dom('.hds-app-side-nav__list-item-link').hasTagName('button');
     });
 
     test('it should render a <a> link if @href is passed', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::Link @href='https://www.hashicorp.com/' />`,
+        <template><Link @href="https://www.hashicorp.com/" /></template>,
       );
       assert
         .dom('.hds-app-side-nav__list-item-link')
@@ -81,7 +74,7 @@ module(
 
     test('it should render a <a> link if @route is passed', async function (assert) {
       await render(
-        hbs`<Hds::AppSideNav::List::Link @route='page-utilities.interactive' />`,
+        <template><Link @route="page-utilities.interactive" /></template>,
       );
       assert
         .dom('.hds-app-side-nav__list-item-link')
diff --git a/showcase/tests/integration/components/hds/app-side-nav/portal/index-test.js b/showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gjs
similarity index 65%
rename from showcase/tests/integration/components/hds/app-side-nav/portal/index-test.js
rename to showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gjs
index 2a7048232b3..7826ae894bc 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/portal/index-test.js
+++ b/showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gjs
@@ -6,16 +6,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, waitUntil } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // NOTICE: we combine the tests for `PortalTarget` and `Portal` in a single file, because the two components are strictly interconnected
+import Target from "@hashicorp/design-system-components/components/hds/app-side-nav/portal/target";
+import Portal from "@hashicorp/design-system-components/components/hds/app-side-nav/portal/index";
 
 module('Integration | Component | hds/app-side-nav/portal', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::AppSideNav::Portal::Target id='test-app-side-nav-portal-target' />`,
+      <template><Target id="test-app-side-nav-portal-target" /></template>,
     );
     assert
       .dom('#test-app-side-nav-portal-target')
@@ -25,40 +25,29 @@ module('Integration | Component | hds/app-side-nav/portal', function (hooks) {
   // CONTENT
 
   test('it renders the content provided via portal', async function (assert) {
-    await render(hbs`<Hds::AppSideNav::Portal::Target />
-<Hds::AppSideNav::Portal>
-  <div id='test-app-side-nav-content-portaled' />
-</Hds::AppSideNav::Portal>`);
+    await render(<template><Target />
+<Portal>
+  <div id="test-app-side-nav-content-portaled" />
+</Portal></template>);
     assert.dom('#test-app-side-nav-content-portaled').exists();
   });
 
   test('we can use custom a custom name for the target portal', async function (assert) {
-    await render(hbs`<Hds::AppSideNav::Portal::Target
-  @targetName='test-app-side-nav-portal-target'
-/>
-<Hds::AppSideNav::Portal @targetName='test-app-side-nav-portal-target'>
-  <div id='test-app-side-nav-content-portaled' />
-</Hds::AppSideNav::Portal>`);
+    await render(<template><Target @targetName="test-app-side-nav-portal-target" />
+<Portal @targetName="test-app-side-nav-portal-target">
+  <div id="test-app-side-nav-content-portaled" />
+</Portal></template>);
     assert.dom('#test-app-side-nav-content-portaled').exists();
   });
 
   test('it renders the panel items provided via portal, in the right DOM location', async function (assert) {
-    await render(hbs`<Hds::AppSideNav::Portal::Target id='test-app-side-nav-content' />
-<Hds::AppSideNav::Portal as |Nav|>
-  <Nav.BackLink
-    @text='Back-link'
-    @href='#'
-    id='test-app-side-nav-list-backlink'
-  />
-  <Nav.Title id='test-app-side-nav-list-title'>Title</Nav.Title>
-  <Nav.Item id='test-app-side-nav-list-item'>Item</Nav.Item>
-  <Nav.Link
-    @icon='hexagon'
-    @text='Link'
-    @href='#'
-    id='test-app-side-nav-list-link'
-  />
-</Hds::AppSideNav::Portal>`);
+    await render(<template><Target id="test-app-side-nav-content" />
+<Portal as |Nav|>
+  <Nav.BackLink @text="Back-link" @href="#" id="test-app-side-nav-list-backlink" />
+  <Nav.Title id="test-app-side-nav-list-title">Title</Nav.Title>
+  <Nav.Item id="test-app-side-nav-list-item">Item</Nav.Item>
+  <Nav.Link @icon="hexagon" @text="Link" @href="#" id="test-app-side-nav-list-link" />
+</Portal></template>);
     assert
       .dom(
         '#test-app-side-nav-content .hds-app-side-nav__content-panels .hds-app-side-nav__content-panel',
@@ -85,10 +74,10 @@ module('Integration | Component | hds/app-side-nav/portal', function (hooks) {
   // A11Y
 
   test('it should render with the correct aria-label attribute passed down to the "list" parent', async function (assert) {
-    await render(hbs`<Hds::AppSideNav::Portal::Target />
-<Hds::AppSideNav::Portal @ariaLabel='test'>
+    await render(<template><Target />
+<Portal @ariaLabel="test">
   <div />
-</Hds::AppSideNav::Portal>`);
+</Portal></template>);
     assert
       .dom('.hds-app-side-nav__list-wrapper')
       .hasAttribute('aria-label', 'test');
@@ -97,16 +86,16 @@ module('Integration | Component | hds/app-side-nav/portal', function (hooks) {
   // DOM MANIPULATION
 
   test('it marks inactive subnavs', async function (assert) {
-    await render(hbs`<Hds::AppSideNav::Portal::Target />
-<Hds::AppSideNav::Portal data-test-app-side-nav-panel as |Nav|>
-  <Nav.Link @text='Some link content' @href='#' />
-</Hds::AppSideNav::Portal>
-<Hds::AppSideNav::Portal data-test-app-side-nav-panel as |Nav|>
-  <Nav.Link @text='Some other link content' @href='#' />
-</Hds::AppSideNav::Portal>
-<Hds::AppSideNav::Portal data-test-app-side-nav-panel as |Nav|>
-  <Nav.Link @text='The last link content' @href='#' />
-</Hds::AppSideNav::Portal>`);
+    await render(<template><Target />
+<Portal data-test-app-side-nav-panel as |Nav|>
+  <Nav.Link @text="Some link content" @href="#" />
+</Portal>
+<Portal data-test-app-side-nav-panel as |Nav|>
+  <Nav.Link @text="Some other link content" @href="#" />
+</Portal>
+<Portal data-test-app-side-nav-panel as |Nav|>
+  <Nav.Link @text="The last link content" @href="#" />
+</Portal></template>);
 
     assert.dom('[data-test-app-side-nav-panel]').exists({ count: 3 });
     assert
@@ -121,18 +110,18 @@ module('Integration | Component | hds/app-side-nav/portal', function (hooks) {
   });
 
   test('it sets transform on the container', async function (assert) {
-    await render(hbs`
-      <Hds::AppSideNav::Portal::Target id="test-app-side-nav-content" />
-      <Hds::AppSideNav::Portal as |Nav|>
+    await render(<template>
+      <Target id="test-app-side-nav-content" />
+      <Portal as |Nav|>
         <Nav.Link @text="Some link content" @href="#" id="test-app-side-nav-list-link-1" data-test-app-side-nav-link-2 />
-      </Hds::AppSideNav::Portal>
-      <Hds::AppSideNav::Portal as |Nav|>
+      </Portal>
+      <Portal as |Nav|>
         <Nav.Link @text="Some other link content" @href="#" id="test-app-side-nav-list-link-2" data-test-app-side-nav-link-2 />
-      </Hds::AppSideNav::Portal>
-      <Hds::AppSideNav::Portal as |Nav|>
+      </Portal>
+      <Portal as |Nav|>
         <Nav.Link @text="The last link content" @href="#" id="test-app-side-nav-list-link-3" data-test-app-side-nav-link-3 />
-      </Hds::AppSideNav::Portal>
-    `);
+      </Portal>
+    </template>);
 
     //   // we need to wait for
     let animationDone = false;
diff --git a/showcase/tests/integration/components/hds/application-state/body-test.js b/showcase/tests/integration/components/hds/application-state/body-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/application-state/body-test.js
rename to showcase/tests/integration/components/hds/application-state/body-test.gjs
index 5c53d4aad2b..e700ccff471 100644
--- a/showcase/tests/integration/components/hds/application-state/body-test.js
+++ b/showcase/tests/integration/components/hds/application-state/body-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Body from "@hashicorp/design-system-components/components/hds/application-state/body";
 
 module(
   'Integration | Component | hds/application-state/body',
@@ -15,7 +15,7 @@ module(
 
     test('it should render with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Body id="test-application-state-body" />`,
+        <template><Body id="test-application-state-body" /></template>,
       );
 
       assert
@@ -25,9 +25,9 @@ module(
 
     test('it should render the yielded content when used in block form', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Body id="test-application-state-body">
+        <template><Body id="test-application-state-body">
         <pre>test</pre>
-      </Hds::ApplicationState::Body>`,
+      </Body></template>,
       );
       assert.dom('#test-application-state-body > pre').exists();
       assert.dom('#test-application-state-body > pre').hasText('test');
@@ -35,7 +35,7 @@ module(
 
     test('it should render the text if defined', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Body id="test-application-state-body" @text="I am the only thing that should exist"/>`,
+        <template><Body id="test-application-state-body" @text="I am the only thing that should exist" /></template>,
       );
       assert.dom('#test-application-state-body').exists();
       assert
@@ -45,9 +45,9 @@ module(
 
     test('it should not render defined text if used in block form', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Body id="test-application-state-body" @text="I should not exist">
+        <template><Body id="test-application-state-body" @text="I should not exist">
         <pre>test should only exist</pre>
-      </Hds::ApplicationState::Body>`,
+      </Body></template>,
       );
       assert.dom('#test-application-state-body > pre').exists();
       assert
diff --git a/showcase/tests/integration/components/hds/application-state/footer-test.js b/showcase/tests/integration/components/hds/application-state/footer-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/application-state/footer-test.js
rename to showcase/tests/integration/components/hds/application-state/footer-test.gjs
index b99266a3154..4dfc5cc37d0 100644
--- a/showcase/tests/integration/components/hds/application-state/footer-test.js
+++ b/showcase/tests/integration/components/hds/application-state/footer-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Footer from "@hashicorp/design-system-components/components/hds/application-state/footer";
 
 module(
   'Integration | Component | hds/application-state/footer',
@@ -14,11 +14,11 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`
-      <Hds::ApplicationState::Footer id="test-application-state-footer">
+      await render(<template>
+      <Footer id="test-application-state-footer">
         template block text
-      </Hds::ApplicationState::Footer>
-    `);
+      </Footer>
+    </template>);
 
       assert
         .dom('#test-application-state-footer')
@@ -28,11 +28,11 @@ module(
     // CONTEXTUAL COMPONENTS
 
     test('it should render an Hds::Link::Standalone component', async function (assert) {
-      await render(hbs`
-        <Hds::ApplicationState::Footer id="test-application-state-footer" as |F|>
-          <F.LinkStandalone @icon="arrow-left" @text="Go back" @href="/"/>
-        </Hds::ApplicationState::Footer>
-      `);
+      await render(<template>
+        <Footer id="test-application-state-footer" as |F|>
+          <F.LinkStandalone @icon="arrow-left" @text="Go back" @href="/" />
+        </Footer>
+      </template>);
       assert
         .dom('#test-application-state-footer a')
         .exists()
diff --git a/showcase/tests/integration/components/hds/application-state/header-test.js b/showcase/tests/integration/components/hds/application-state/header-test.gjs
similarity index 66%
rename from showcase/tests/integration/components/hds/application-state/header-test.js
rename to showcase/tests/integration/components/hds/application-state/header-test.gjs
index 113580cf179..e422c876c3b 100644
--- a/showcase/tests/integration/components/hds/application-state/header-test.js
+++ b/showcase/tests/integration/components/hds/application-state/header-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from "@hashicorp/design-system-components/components/hds/application-state/header";
 
 module(
   'Integration | Component | hds/application-state/header',
@@ -15,7 +15,7 @@ module(
 
     test('it should render with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Header @title="An error has occurred" id="test-application-state-header" />`,
+        <template><Header @title="An error has occurred" id="test-application-state-header" /></template>,
       );
 
       assert
@@ -25,7 +25,7 @@ module(
 
     test('it should render an icon if @icon is defined', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Header @title="An error has occurred" id="test-application-state-header" @icon="help" @errorCode="404" />`,
+        <template><Header @title="An error has occurred" id="test-application-state-header" @icon="help" @errorCode="404" /></template>,
       );
 
       assert.dom('.hds-icon').exists();
@@ -33,7 +33,7 @@ module(
 
     test('it should render an error code if @errorCode is defined', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Header @title="An error has occurred" id="test-application-state-header" @icon="help" @errorCode="404" />`,
+        <template><Header @title="An error has occurred" id="test-application-state-header" @icon="help" @errorCode="404" /></template>,
       );
 
       assert.dom('.hds-application-state__error-code').exists();
@@ -41,7 +41,7 @@ module(
 
     test('it should render the title with a `div` tag if no `@titleTag` is provided', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Header @title="An error has occurred" id="test-application-state-header" />`,
+        <template><Header @title="An error has occurred" id="test-application-state-header" /></template>,
       );
 
       assert.dom('.hds-application-state__title').hasTagName('div');
@@ -49,7 +49,7 @@ module(
 
     test('it should render the title with the tag set for `@titleTag`', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Header @title="An error has occurred" @titleTag="h1" id="test-application-state-header" />`,
+        <template><Header @title="An error has occurred" @titleTag="h1" id="test-application-state-header" /></template>,
       );
 
       assert.dom('.hds-application-state__title').hasTagName('h1');
diff --git a/showcase/tests/integration/components/hds/application-state/index-test.js b/showcase/tests/integration/components/hds/application-state/index-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/application-state/index-test.js
rename to showcase/tests/integration/components/hds/application-state/index-test.gjs
index 5c55b47c495..c64017be147 100644
--- a/showcase/tests/integration/components/hds/application-state/index-test.js
+++ b/showcase/tests/integration/components/hds/application-state/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import ApplicationState from "@hashicorp/design-system-components/components/hds/application-state/index";
 
 module(
   'Integration | Component | hds/application-state/index',
@@ -18,21 +18,21 @@ module(
     });
 
     test('it should render with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`
-      <Hds::ApplicationState id="test-application-state">
+      await render(<template>
+      <ApplicationState id="test-application-state">
         template block text
-      </Hds::ApplicationState>
-    `);
+      </ApplicationState>
+    </template>);
 
       assert.dom('#test-application-state').hasClass('hds-application-state');
     });
 
     test('it should have the correct alignment class when no alignment is provided', async function (assert) {
-      await render(hbs`
-      <Hds::ApplicationState id="test-application-state">
+      await render(<template>
+      <ApplicationState id="test-application-state">
         template block text
-      </Hds::ApplicationState>
-    `);
+      </ApplicationState>
+    </template>);
 
       assert
         .dom('#test-application-state')
@@ -40,11 +40,11 @@ module(
     });
 
     test('it should have the correct alignment class when alignment is set to "left"', async function (assert) {
-      await render(hbs`
-      <Hds::ApplicationState id="test-application-state" @align="left">
+      await render(<template>
+      <ApplicationState id="test-application-state" @align="left">
         template block text
-      </Hds::ApplicationState>
-    `);
+      </ApplicationState>
+    </template>);
 
       assert
         .dom('#test-application-state')
@@ -52,11 +52,11 @@ module(
     });
 
     test('it should have the correct alignment class when alignment is set to "center"', async function (assert) {
-      await render(hbs`
-      <Hds::ApplicationState id="test-application-state" @align="center">
+      await render(<template>
+      <ApplicationState id="test-application-state" @align="center">
         template block text
-      </Hds::ApplicationState>
-    `);
+      </ApplicationState>
+    </template>);
 
       assert
         .dom('#test-application-state')
@@ -67,12 +67,12 @@ module(
 
     test('it renders the contextual components', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState as |A|>
+        <template><ApplicationState as |A|>
               <A.Media>ApplicationState Media</A.Media>
               <A.Header @title="ApplicationState Title" />
               <A.Body>ApplicationState Body</A.Body>
               <A.Footer>ApplicationState Footer</A.Footer>
-            </Hds::ApplicationState>`,
+            </ApplicationState></template>,
       );
       assert
         .dom('.hds-application-state__media')
@@ -88,7 +88,7 @@ module(
         .hasText('ApplicationState Footer');
     });
     test('it does not render the contextual components if not provided', async function (assert) {
-      await render(hbs`<Hds::ApplicationState />`);
+      await render(<template><ApplicationState /></template>);
       assert.dom('.hds-application-date__media').doesNotExist();
       assert.dom('.hds-application-date__header').doesNotExist();
       assert.dom('.hds-application-date__body').doesNotExist();
@@ -107,11 +107,11 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
 
-      await render(hbs`
-      <Hds::ApplicationState id="test-application-state" @align="test">
+      await render(<template>
+      <ApplicationState id="test-application-state" @align="test">
         template block text
-      </Hds::ApplicationState>
-    `);
+      </ApplicationState>
+    </template>);
 
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/application-state/media-test.js b/showcase/tests/integration/components/hds/application-state/media-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/application-state/media-test.js
rename to showcase/tests/integration/components/hds/application-state/media-test.gjs
index 3b9d811be1b..8f147bc5785 100644
--- a/showcase/tests/integration/components/hds/application-state/media-test.js
+++ b/showcase/tests/integration/components/hds/application-state/media-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Media from "@hashicorp/design-system-components/components/hds/application-state/media";
 
 module(
   'Integration | Component | hds/application-state/media',
@@ -15,7 +15,7 @@ module(
 
     test('it should render with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Media id="test-application-state-media" />`,
+        <template><Media id="test-application-state-media" /></template>,
       );
 
       assert
@@ -25,9 +25,9 @@ module(
 
     test('it should render the yielded content when used in block form', async function (assert) {
       await render(
-        hbs`<Hds::ApplicationState::Media id="test-application-state-media">
+        <template><Media id="test-application-state-media">
         <pre>test</pre>
-      </Hds::ApplicationState::Media>`,
+      </Media></template>,
       );
       assert.dom('#test-application-state-media > pre').exists();
       assert.dom('#test-application-state-media > pre').hasText('test');
diff --git a/showcase/tests/integration/components/hds/badge-count/index-test.js b/showcase/tests/integration/components/hds/badge-count/index-test.gjs
similarity index 71%
rename from showcase/tests/integration/components/hds/badge-count/index-test.js
rename to showcase/tests/integration/components/hds/badge-count/index-test.gjs
index 6d6261c817a..8277ffb75a8 100644
--- a/showcase/tests/integration/components/hds/badge-count/index-test.js
+++ b/showcase/tests/integration/components/hds/badge-count/index-test.gjs
@@ -6,14 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import BadgeCount from "@hashicorp/design-system-components/components/hds/badge-count/index";
 
 module('Integration | Component | hds/badge-count/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" /></template>,
     );
     assert.dom('#test-badge-count').hasClass('hds-badge-count');
   });
@@ -22,13 +22,13 @@ module('Integration | Component | hds/badge-count/index', function (hooks) {
 
   test('it should have the default color if no @color prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" /></template>,
     );
     assert.dom('#test-badge-count').hasClass('hds-badge-count--color-neutral');
   });
   test('it should have the correct color class based on the @color prop', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" @color="neutral-dark-mode" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" @color="neutral-dark-mode" /></template>,
     );
     assert
       .dom('#test-badge-count')
@@ -39,13 +39,13 @@ module('Integration | Component | hds/badge-count/index', function (hooks) {
 
   test('it should have the medium size if no @size prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" /></template>,
     );
     assert.dom('#test-badge-count').hasClass('hds-badge-count--size-medium');
   });
   test('it should have the correct size class based on the @size prop', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" @size="small" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" @size="small" /></template>,
     );
     assert.dom('#test-badge-count').hasClass('hds-badge-count--size-small');
   });
@@ -54,13 +54,13 @@ module('Integration | Component | hds/badge-count/index', function (hooks) {
 
   test('it should have the filled type if no @type prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" /></template>,
     );
     assert.dom('#test-badge-count').hasClass('hds-badge-count--type-filled');
   });
   test('it should have the correct type class based on the @type prop', async function (assert) {
     await render(
-      hbs`<Hds::BadgeCount @text="text renders" id="test-badge-count" @type="inverted" />`,
+      <template><BadgeCount @text="text renders" id="test-badge-count" @type="inverted" /></template>,
     );
     assert.dom('#test-badge-count').hasClass('hds-badge-count--type-inverted');
   });
diff --git a/showcase/tests/integration/components/hds/badge/index-test.js b/showcase/tests/integration/components/hds/badge/index-test.gjs
similarity index 70%
rename from showcase/tests/integration/components/hds/badge/index-test.js
rename to showcase/tests/integration/components/hds/badge/index-test.gjs
index 088a5f547ec..65e4e58d8e5 100644
--- a/showcase/tests/integration/components/hds/badge/index-test.js
+++ b/showcase/tests/integration/components/hds/badge/index-test.gjs
@@ -6,25 +6,25 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Badge from "@hashicorp/design-system-components/components/hds/badge/index";
 
 module('Integration | Component | hds/badge/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Badge @text="text renders" id="test-badge" />`);
+    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
     assert.dom('#test-badge').hasClass('hds-badge');
   });
 
   // COLOR
 
   test('it should render the neutral color as the default if no color is declared', async function (assert) {
-    await render(hbs`<Hds::Badge @text="text renders" id="test-badge" />`);
+    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
     assert.dom('#test-badge').hasClass('hds-badge--color-neutral');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Badge @text="text renders" id="test-badge" @color="highlight" />`,
+      <template><Badge @text="text renders" id="test-badge" @color="highlight" /></template>,
     );
     assert.dom('#test-badge').hasClass('hds-badge--color-highlight');
   });
@@ -32,12 +32,12 @@ module('Integration | Component | hds/badge/index', function (hooks) {
   // SIZE
 
   test('it should render the medium size if no size is declared', async function (assert) {
-    await render(hbs`<Hds::Badge @text="text renders" id="test-badge" />`);
+    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
     assert.dom('#test-badge').hasClass('hds-badge--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Badge @text="text renders" id="test-badge" @size="small" />`,
+      <template><Badge @text="text renders" id="test-badge" @size="small" /></template>,
     );
     assert.dom('#test-badge').hasClass('hds-badge--size-small');
   });
@@ -45,12 +45,12 @@ module('Integration | Component | hds/badge/index', function (hooks) {
   // TYPE
 
   test('it should render the filled type if no type is declared', async function (assert) {
-    await render(hbs`<Hds::Badge @text="text renders" id="test-badge" />`);
+    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
     assert.dom('#test-badge').hasClass('hds-badge--type-filled');
   });
   test('it should render the correct CSS type class if @type prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Badge @text="text renders" id="test-badge" @type="inverted" />`,
+      <template><Badge @text="text renders" id="test-badge" @type="inverted" /></template>,
     );
     assert.dom('#test-badge').hasClass('hds-badge--type-inverted');
   });
@@ -59,13 +59,13 @@ module('Integration | Component | hds/badge/index', function (hooks) {
 
   test('if an icon is declared the flight icon should render in the component', async function (assert) {
     await render(
-      hbs`<Hds::Badge @text="text renders" id="test-badge" @icon="activity" />`,
+      <template><Badge @text="text renders" id="test-badge" @icon="activity" /></template>,
     );
     assert.dom('.hds-icon-activity').exists();
   });
   test('if isIconOnly is set to true, visible text is hidden but text is still available to assistive technology', async function (assert) {
     await render(
-      hbs`<Hds::Badge @text="meaningful text for icon only badge" @isIconOnly={{true}} id="test-badge" @icon="activity" />`,
+      <template><Badge @text="meaningful text for icon only badge" @isIconOnly={{true}} id="test-badge" @icon="activity" /></template>,
     );
     assert.deepEqual(
       this.element.querySelector('.sr-only').textContent.trim(),
diff --git a/showcase/tests/integration/components/hds/breadcrumb/index-test.js b/showcase/tests/integration/components/hds/breadcrumb/index-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/breadcrumb/index-test.js
rename to showcase/tests/integration/components/hds/breadcrumb/index-test.gjs
index 091f5f9db3a..c39ff40c2f6 100644
--- a/showcase/tests/integration/components/hds/breadcrumb/index-test.js
+++ b/showcase/tests/integration/components/hds/breadcrumb/index-test.gjs
@@ -6,19 +6,19 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Breadcrumb from "@hashicorp/design-system-components/components/hds/breadcrumb/index";
 
 module('Integration | Component | hds/breadcrumb/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Breadcrumb id="test-breadcrumb" />`);
+    await render(<template><Breadcrumb id="test-breadcrumb" /></template>);
     assert.dom('#test-breadcrumb').hasClass('hds-breadcrumb');
   });
 
   test('it should render the correct CSS color class if the @itemsCanWrap prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb @itemsCanWrap={{true}} id="test-breadcrumb" />`,
+      <template><Breadcrumb @itemsCanWrap={{true}} id="test-breadcrumb" /></template>,
     );
     assert.dom('#test-breadcrumb').hasClass('hds-breadcrumb--items-can-wrap');
   });
@@ -27,7 +27,7 @@ module('Integration | Component | hds/breadcrumb/index', function (hooks) {
     let inserted = false;
     this.set('didInsert', () => (inserted = true));
     await render(
-      hbs`<Hds::Breadcrumb id="test-breadcrumb" @didInsert={{this.didInsert}} />`,
+      <template><Breadcrumb id="test-breadcrumb" @didInsert={{this.didInsert}} /></template>,
     );
     assert.ok(inserted);
   });
@@ -35,20 +35,20 @@ module('Integration | Component | hds/breadcrumb/index', function (hooks) {
   // A11Y
 
   test('it should render with the correct semantic tags', async function (assert) {
-    await render(hbs`<Hds::Breadcrumb id="test-breadcrumb" />`);
+    await render(<template><Breadcrumb id="test-breadcrumb" /></template>);
     assert.dom('#test-breadcrumb').hasTagName('nav');
     assert.dom('#test-breadcrumb').hasAria('label', 'breadcrumbs');
     assert.dom('#test-breadcrumb > ol').exists();
   });
   test('it should support a custom aria-label attribute', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb id="test-breadcrumb" aria-label="my aria label" />`,
+      <template><Breadcrumb id="test-breadcrumb" aria-label="my aria label" /></template>,
     );
     assert.dom('#test-breadcrumb').hasAria('label', 'my aria label');
     assert.dom('#test-breadcrumb > ol').exists();
   });
   test('it should have a fallback aria-label if no custom aria-label is provided', async function (assert) {
-    await render(hbs`<Hds::Breadcrumb id="test-breadcrumb" />`);
+    await render(<template><Breadcrumb id="test-breadcrumb" /></template>);
     assert.dom('#test-breadcrumb').hasAria('label', 'breadcrumbs');
   });
 });
diff --git a/showcase/tests/integration/components/hds/breadcrumb/item-test.js b/showcase/tests/integration/components/hds/breadcrumb/item-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/breadcrumb/item-test.js
rename to showcase/tests/integration/components/hds/breadcrumb/item-test.gjs
index a9e643d0396..8064ff74f46 100644
--- a/showcase/tests/integration/components/hds/breadcrumb/item-test.js
+++ b/showcase/tests/integration/components/hds/breadcrumb/item-test.gjs
@@ -6,19 +6,19 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/breadcrumb/item";
 
 module('Integration | Component | hds/breadcrumb/item', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Breadcrumb::Item id="test-breadcrumb-item" />`);
+    await render(<template><Item id="test-breadcrumb-item" /></template>);
     assert.dom('#test-breadcrumb-item').hasClass('hds-breadcrumb__item');
   });
 
   test('it should render the correct style if the @maxWidth prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Item @maxWidth="200px" @text="test" id="test-breadcrumb-item" />`,
+      <template><Item @maxWidth="200px" @text="test" id="test-breadcrumb-item" /></template>,
     );
     assert.dom('#test-breadcrumb-item').hasStyle({ 'max-width': '200px' });
   });
@@ -27,20 +27,20 @@ module('Integration | Component | hds/breadcrumb/item', function (hooks) {
 
   test('it should render a link by default', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Item id="test-breadcrumb-item" @text="text renders" />`,
+      <template><Item id="test-breadcrumb-item" @text="text renders" /></template>,
     );
     assert.dom('#test-breadcrumb-item > a').exists();
   });
   test('it should not render a if @current is true', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Item id="test-breadcrumb-item" @text="text renders" @current={{true}} />`,
+      <template><Item id="test-breadcrumb-item" @text="text renders" @current={{true}} /></template>,
     );
     assert.dom('#test-breadcrumb-item > a').doesNotExist();
     assert.dom('#test-breadcrumb-item .hds-breadcrumb__current').exists();
   });
   test('it should render the item with icon and text if @icon and @text are provided', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Item id="test-breadcrumb-item" @text="text renders" @icon="activity" />`,
+      <template><Item id="test-breadcrumb-item" @text="text renders" @icon="activity" /></template>,
     );
     assert.dom('.hds-icon.hds-icon-activity').exists();
     assert.dom('.hds-breadcrumb__text').hasText('text renders');
@@ -55,7 +55,7 @@ module('Integration | Component | hds/breadcrumb/item', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Breadcrumb::Item @maxWidth="123" id="test-breadcrumb-item" />`,
+      <template><Item @maxWidth="123" id="test-breadcrumb-item" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/breadcrumb/truncation-test.js b/showcase/tests/integration/components/hds/breadcrumb/truncation-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/breadcrumb/truncation-test.js
rename to showcase/tests/integration/components/hds/breadcrumb/truncation-test.gjs
index bb496ae8c3e..e730e3968a3 100644
--- a/showcase/tests/integration/components/hds/breadcrumb/truncation-test.js
+++ b/showcase/tests/integration/components/hds/breadcrumb/truncation-test.gjs
@@ -6,14 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Truncation from "@hashicorp/design-system-components/components/hds/breadcrumb/truncation";
 
 module('Integration | Component | hds/breadcrumb/truncation', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders the breadcrumb truncation with an appropriate CSS class', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Truncation id="test-breadcrumb-truncation" />`,
+      <template><Truncation id="test-breadcrumb-truncation" /></template>,
     );
     assert
       .dom('#test-breadcrumb-truncation')
@@ -24,14 +24,14 @@ module('Integration | Component | hds/breadcrumb/truncation', function (hooks) {
 
   test('it should render a toggle button', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Truncation id="test-breadcrumb-truncation" />`,
+      <template><Truncation id="test-breadcrumb-truncation" /></template>,
     );
     assert.dom('#test-breadcrumb-truncation button').exists();
   });
 
   test('the toggle button should have an aria-label', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Truncation id="test-breadcrumb-truncation" />`,
+      <template><Truncation id="test-breadcrumb-truncation" /></template>,
     );
     assert.dom('#test-breadcrumb-truncation button').hasAttribute('aria-label');
   });
@@ -40,7 +40,7 @@ module('Integration | Component | hds/breadcrumb/truncation', function (hooks) {
 
   test('it should not render the content', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Truncation id="test-breadcrumb-truncation" />`,
+      <template><Truncation id="test-breadcrumb-truncation" /></template>,
     );
     assert
       .dom('#test-breadcrumb-truncation .hds-breadcrumb__truncation-content')
@@ -48,7 +48,7 @@ module('Integration | Component | hds/breadcrumb/truncation', function (hooks) {
   });
   test('it should yield (and render) the content', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Truncation id="test-breadcrumb-truncation"><a id="test-breadcrumb-truncation-link" href="#">test</a></Hds::Breadcrumb::Truncation>`,
+      <template><Truncation id="test-breadcrumb-truncation"><a id="test-breadcrumb-truncation-link" href="#">test</a></Truncation></template>,
     );
     await click('#test-breadcrumb-truncation button');
     assert.dom('.hds-breadcrumb__truncation-content').exists();
@@ -60,7 +60,7 @@ module('Integration | Component | hds/breadcrumb/truncation', function (hooks) {
 
   test('it should render with the correct aria-expanded attribute on the toggle element', async function (assert) {
     await render(
-      hbs`<Hds::Breadcrumb::Truncation id="test-breadcrumb-truncation" />`,
+      <template><Truncation id="test-breadcrumb-truncation" /></template>,
     );
     assert
       .dom('#test-breadcrumb-truncation button')
diff --git a/showcase/tests/integration/components/hds/button-set/index-test.js b/showcase/tests/integration/components/hds/button-set/index-test.gjs
similarity index 63%
rename from showcase/tests/integration/components/hds/button-set/index-test.js
rename to showcase/tests/integration/components/hds/button-set/index-test.gjs
index 1eb40679e89..e2feef77daa 100644
--- a/showcase/tests/integration/components/hds/button-set/index-test.js
+++ b/showcase/tests/integration/components/hds/button-set/index-test.gjs
@@ -6,23 +6,24 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import ButtonSet from "@hashicorp/design-system-components/components/hds/button-set/index";
+import Button from "@hashicorp/design-system-components/components/hds/button/index";
 
 module('Integration | Component | hds/button-set/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::ButtonSet id="test-button-set" />`);
+    await render(<template><ButtonSet id="test-button-set" /></template>);
     assert.dom('#test-button-set').hasClass('hds-button-set');
   });
 
   test('it should render a child button component', async function (assert) {
     await render(
-      hbs`
-        <Hds::ButtonSet id="test-button-set">
-          <Hds::Button @text="test button" />
-        </Hds::ButtonSet>
-      `,
+      <template>
+        <ButtonSet id="test-button-set">
+          <Button @text="test button" />
+        </ButtonSet>
+      </template>,
     );
     assert.dom('#test-button-set .hds-button').exists();
   });
diff --git a/showcase/tests/integration/components/hds/button/index-test.js b/showcase/tests/integration/components/hds/button/index-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/button/index-test.js
rename to showcase/tests/integration/components/hds/button/index-test.gjs
index 6c81b3aac12..41f92a8adfb 100644
--- a/showcase/tests/integration/components/hds/button/index-test.js
+++ b/showcase/tests/integration/components/hds/button/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Button from "@hashicorp/design-system-components/components/hds/button/index";
 
 module('Integration | Component | hds/button/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" id="test-button" /></template>,
     );
     assert.dom('#test-button').hasClass('hds-button');
   });
@@ -26,13 +26,13 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should render the medium size if no size is declared', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" id="test-button" /></template>,
     );
     assert.dom('#test-button').hasClass('hds-button--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" @size="small" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" @size="small" id="test-button" /></template>,
     );
     assert.dom('#test-button').hasClass('hds-button--size-small');
   });
@@ -41,13 +41,13 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should render the primary color as the default if no color is declared', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" id="test-button" /></template>,
     );
     assert.dom('#test-button').hasClass('hds-button--color-primary');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" @color="critical" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" @color="critical" id="test-button" /></template>,
     );
     assert.dom('#test-button').hasClass('hds-button--color-critical');
   });
@@ -56,13 +56,13 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should not have visible icon if @icon is not declared', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" id="test-button" />`,
+      <template><Button @text="copy to clipboard" id="test-button" /></template>,
     );
     assert.dom('.hds-button__icon').doesNotExist();
   });
   test('if an icon is declared the flight icon should render in the component', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" @icon="clipboard-copy" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" @icon="clipboard-copy" id="test-button" /></template>,
     );
     assert
       .dom(this.element.querySelector('.hds-icon.hds-icon-clipboard-copy'))
@@ -70,19 +70,19 @@ module('Integration | Component | hds/button/index', function (hooks) {
   });
   test('if an icon is declared the icon should be in leading position by default', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" @icon="clipboard-copy" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" @icon="clipboard-copy" id="test-button" /></template>,
     );
     assert.dom('.hds-button__icon').matchesSelector(':first-child');
   });
   test('if an icon is declared the icon should be in trailing position if @iconPosition is set to trailing', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" @icon="clipboard-copy" @iconPosition="trailing" id="test-button" />`,
+      <template><Button @text="Copy to clipboard" @icon="clipboard-copy" @iconPosition="trailing" id="test-button" /></template>,
     );
     assert.dom('.hds-button__icon').matchesSelector(':last-child');
   });
   test('it should ignore isIconOnly if icon is not defined', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" @isIconOnly={{true}} id="test-button" />`,
+      <template><Button @text="copy to clipboard" @isIconOnly={{true}} id="test-button" /></template>,
     );
     assert
       .dom('#test-button')
@@ -93,9 +93,9 @@ module('Integration | Component | hds/button/index', function (hooks) {
   // ISINLINE
 
   test('it should render the element as `inline` if the value of @isInline is "true"', async function (assert) {
-    await render(hbs`
-      <Hds::Button @text="Lorem ipsum" @isInline={{true}} id="test-button" />
-    `);
+    await render(<template>
+      <Button @text="Lorem ipsum" @isInline={{true}} id="test-button" />
+    </template>);
     assert.dom('#test-button').hasClass('hds-button--is-inline');
   });
 
@@ -103,7 +103,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it renders a button with the defined text', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="Copy to clipboard" id="test-toggle-button" />`,
+      <template><Button @text="Copy to clipboard" id="test-toggle-button" /></template>,
     );
     assert.dom('#test-toggle-button').hasText('Copy to clipboard');
   });
@@ -112,13 +112,13 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should have aria-label on the button element if isIconOnly is set to true', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" @icon="clipboard-copy" @isIconOnly={{true}} id="test-button" />`,
+      <template><Button @text="copy to clipboard" @icon="clipboard-copy" @isIconOnly={{true}} id="test-button" /></template>,
     );
     assert.dom('#test-button').hasAria('label', 'copy to clipboard');
   });
   test('it should have "button" type by default', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" id="test-button" />`,
+      <template><Button @text="copy to clipboard" id="test-button" /></template>,
     );
     assert.dom('#test-button').hasAttribute('type', 'button');
   });
@@ -127,19 +127,19 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should not have visible text if isIconOnly is true', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" @icon="clipboard-copy" @isIconOnly={{true}} id="test-button" />`,
+      <template><Button @text="copy to clipboard" @icon="clipboard-copy" @isIconOnly={{true}} id="test-button" /></template>,
     );
     assert.dom('.hds-button__text').doesNotExist();
   });
   test('it should disable to the button if the `disabled` attribute is passed', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" disabled id="test-button" />`,
+      <template><Button @text="copy to clipboard" disabled id="test-button" /></template>,
     );
     assert.dom('#test-button').isDisabled();
   });
   test('it should have the correct CSS class to support full-width button size if @isFullWidth prop is true', async function (assert) {
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" @isFullWidth={{true}} id="test-button" />`,
+      <template><Button @text="copy to clipboard" @isFullWidth={{true}} id="test-button" /></template>,
     );
     assert.dom('#test-button').hasClass('hds-button--width-full');
   });
@@ -152,7 +152,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Button @icon="clipboard-copy" />`);
+    await render(<template><Button @icon="clipboard-copy" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -164,7 +164,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Button @text="copy to clipboard" @color="foo" />`);
+    await render(<template><Button @text="copy to clipboard" @color="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -176,7 +176,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Button @text="copy to clipboard" @size="tiny" />`);
+    await render(<template><Button @text="copy to clipboard" @size="tiny" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -189,7 +189,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Button @icon="clipboard-copy" @text="copy to clipboard" @iconPosition="after" />`,
+      <template><Button @icon="clipboard-copy" @text="copy to clipboard" @iconPosition="after" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -203,7 +203,7 @@ module('Integration | Component | hds/button/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Button @text="copy to clipboard" @color="tertiary" />`,
+      <template><Button @text="copy to clipboard" @color="tertiary" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/card/container-test.js b/showcase/tests/integration/components/hds/card/container-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/card/container-test.js
rename to showcase/tests/integration/components/hds/card/container-test.gjs
index 0836198ba74..5c885bf311f 100644
--- a/showcase/tests/integration/components/hds/card/container-test.js
+++ b/showcase/tests/integration/components/hds/card/container-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Container from "@hashicorp/design-system-components/components/hds/card/container";
 
 module('Integration | Component | hds/card/container', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,21 +16,21 @@ module('Integration | Component | hds/card/container', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Card::Container id="test-card-container" />`);
+    await render(<template><Container id="test-card-container" /></template>);
     assert.dom('#test-card-container').hasClass('hds-card__container');
   });
 
   // LEVEL(S) + BORDER
 
   test('it should have the base level elevation as the default if no @level prop is declared', async function (assert) {
-    await render(hbs`<Hds::Card::Container id="test-card-container" />`);
+    await render(<template><Container id="test-card-container" /></template>);
     assert
       .dom('#test-card-container')
       .hasClass('hds-card__container--level-elevation-base');
   });
   test('it should have the correct level class based on the @level prop', async function (assert) {
     await render(
-      hbs`<Hds::Card::Container id="test-card-container" @level="mid" />`,
+      <template><Container id="test-card-container" @level="mid" /></template>,
     );
     assert
       .dom('#test-card-container')
@@ -38,7 +38,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
   });
   test('it should have a "surface" elavation the @hasBorder prop is true', async function (assert) {
     await render(
-      hbs`<Hds::Card::Container id="test-card-container" @hasBorder={{true}} />`,
+      <template><Container id="test-card-container" @hasBorder={{true}} /></template>,
     );
     assert
       .dom('#test-card-container')
@@ -48,14 +48,14 @@ module('Integration | Component | hds/card/container', function (hooks) {
   // BACKGROUND
 
   test('it should have the default background if no @background prop is declared', async function (assert) {
-    await render(hbs`<Hds::Card::Container id="test-card-container" />`);
+    await render(<template><Container id="test-card-container" /></template>);
     assert
       .dom('#test-card-container')
       .hasClass('hds-card__container--background-neutral-primary');
   });
   test('it should have the correct background class based on the @background prop', async function (assert) {
     await render(
-      hbs`<Hds::Card::Container id="test-card-container" @background="neutral-secondary" />`,
+      <template><Container id="test-card-container" @background="neutral-secondary" /></template>,
     );
     assert
       .dom('#test-card-container')
@@ -65,14 +65,14 @@ module('Integration | Component | hds/card/container', function (hooks) {
   // OVERFLOW
 
   test('it should have the overflow visible if no @overflow prop is declared', async function (assert) {
-    await render(hbs`<Hds::Card::Container id="test-card-container" />`);
+    await render(<template><Container id="test-card-container" /></template>);
     assert
       .dom('#test-card-container')
       .hasClass('hds-card__container--overflow-visible');
   });
   test('it should have the overflow hidden if the @overflow prop is declared as "hidden"', async function (assert) {
     await render(
-      hbs`<Hds::Card::Container id="test-card-container" @overflow="hidden" />`,
+      <template><Container id="test-card-container" @overflow="hidden" /></template>,
     );
     assert
       .dom('#test-card-container')
@@ -82,7 +82,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
   // TAG
 
   test(`it should render a div if no @tag prop is declared and it should not have a role`, async function (assert) {
-    await render(hbs`<Hds::Card::Container id="test-card-container" />`);
+    await render(<template><Container id="test-card-container" /></template>);
     assert
       .dom('#test-card-container')
       .hasTagName('div')
@@ -91,7 +91,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
 
   test(`it should render an li if specified in the @tag prop and it should have the correct role`, async function (assert) {
     await render(
-      hbs`<Hds::Card::Container id="test-card-container" @tag="li" />`,
+      <template><Container id="test-card-container" @tag="li" /></template>,
     );
     assert
       .dom('#test-card-container')
@@ -108,7 +108,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Card::Container @level="foo" />`);
+    await render(<template><Container @level="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -120,7 +120,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Card::Container @levelHover="foo" />`);
+    await render(<template><Container @levelHover="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -132,7 +132,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Card::Container @levelActive="foo" />`);
+    await render(<template><Container @levelActive="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -146,7 +146,7 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Card::Container @tag="section" />`);
+    await render(<template><Container @tag="section" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/code-block/index-test.js b/showcase/tests/integration/components/hds/code-block/index-test.gjs
similarity index 68%
rename from showcase/tests/integration/components/hds/code-block/index-test.js
rename to showcase/tests/integration/components/hds/code-block/index-test.gjs
index de6fa9ab5ba..fd0d303417b 100644
--- a/showcase/tests/integration/components/hds/code-block/index-test.js
+++ b/showcase/tests/integration/components/hds/code-block/index-test.gjs
@@ -5,15 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  render,
-  settled,
-  resetOnerror,
-  setupOnerror,
-  click,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { render, settled, resetOnerror, setupOnerror, click } from '@ember/test-helpers';
 import sinon from 'sinon';
+import CodeBlock from "@hashicorp/design-system-components/components/hds/code-block/index";
 
 module('Integration | Component | hds/code-block/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -23,18 +17,18 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').hasClass('hds-code-block');
   });
 
   // CONTENT
 
   test('it renders the passed in code text content', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+    </template>);
     assert
       .dom('#test-code-block pre code')
       .containsText("console.log('Hello world');");
@@ -44,9 +38,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   test('it renders the passed in dynamic content', async function (assert) {
     this.set('value', "console.log('Hello world');");
-    await render(hbs`
-      <Hds::CodeBlock @value={{this.value}} id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value={{this.value}} id="test-code-block" />
+    </template>);
     assert
       .dom('#test-code-block pre code')
       .hasText("console.log('Hello world');");
@@ -60,12 +54,12 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   // CONTEXTUAL COMPONENTS
 
   test('it renders the contextual components', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
         <CB.Title>Title</CB.Title>
         <CB.Description>Description</CB.Description>
-      </Hds::CodeBlock>
-    `);
+      </CodeBlock>
+    </template>);
     let titleId = document
       .querySelector('.hds-code-block__title')
       .getAttribute('id');
@@ -79,20 +73,20 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it renders the title as a p when the @tag argument is not provided', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
         <CB.Title>Title</CB.Title>
-      </Hds::CodeBlock>
-    `);
+      </CodeBlock>
+    </template>);
     assert.dom('.hds-code-block__title').hasTagName('p');
   });
 
   test('it renders the title as the custom title tag when the @tag argument is provided', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
-        <CB.Title @tag='h2'>Title</CB.Title>
-      </Hds::CodeBlock>
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
+        <CB.Title @tag="h2">Title</CB.Title>
+      </CodeBlock>
+    </template>);
     assert.dom('.hds-code-block__title').hasTagName('h2');
   });
 
@@ -100,46 +94,46 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // ariaLabel
   test('it sets the aria-label property to the value provided', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @ariaLabel="test" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @ariaLabel="test" id="test-code-block" />
+    </template>);
     assert.dom('.hds-code-block__code').hasAria('label', 'test');
   });
 
   // ariaLabelledBy
   test('it sets the aria-labelledby property to the value provided', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @ariaLabelledBy="test-id" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @ariaLabelledBy="test-id" id="test-code-block" />
+    </template>);
     assert.dom('.hds-code-block__code').hasAria('labelledby', 'test-id');
   });
   test('it does not set the aria-labelledby property to the value provided if an ariaLabel argument is set', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @ariaLabel="test" @ariaLabelledBy="test-id" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @ariaLabel="test" @ariaLabelledBy="test-id" id="test-code-block" />
+    </template>);
     assert.dom('.hds-code-block__code').doesNotHaveAria('labelledby');
   });
 
   // ariaDescribedBy
   test('it sets the aria-describedby property to the value provided', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @ariaDescribedBy="test-id" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @ariaDescribedBy="test-id" id="test-code-block" />
+    </template>);
     assert.dom('.hds-code-block__code').hasAria('describedby', 'test-id');
   });
 
   // isStandalone
   test('it has rounded corners by default', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').hasClass('hds-code-block--is-standalone');
   });
 
   test('it does not have rounded corners if `isStandalone` is set to false', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @isStandalone={{false}} id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @isStandalone={{false}} id="test-code-block" />
+    </template>);
     assert
       .dom('#test-code-block')
       .doesNotHaveClass('hds-code-block--is-standalone');
@@ -147,39 +141,39 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // language
   test('it has no default language for syntax highlighting', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').doesNotHaveClass(/language-*/);
   });
 
   test('it uses the passed in language value for syntax highlighting', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @language="go" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @language="go" id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').hasClass('language-go');
   });
 
   test('syntax highlighting fails gracefully if an invalid language is specified', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @language="foo" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @language="foo" id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').hasClass('language-foo');
     assert.dom('#test-code-block .token').doesNotExist();
   });
 
   // hasCopyButton
   test('it does not display a Copy button by default', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" />
+    </template>);
     assert.dom('.hds-code-block__copy-button').doesNotExist();
   });
 
   test(`it displays a Copy button if hasCopyButton is set to true`, async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} />
+    </template>);
 
     assert
       .dom('.hds-code-block__copy-button')
@@ -188,9 +182,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it renders a Copy button with custom text', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} @copyButtonText="Foo" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} @copyButtonText="Foo" />
+    </template>);
 
     assert.dom('.hds-code-block__copy-button').exists().hasAria('label', 'Foo');
   });
@@ -202,9 +196,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
     this.set('onCopy', copySpy);
 
-    await render(hbs`
-      <Hds::CodeBlock @value="test" @hasCopyButton={{true}} @onCopy={{this.onCopy}} />
-    `);
+    await render(<template>
+      <CodeBlock @value="test" @hasCopyButton={{true}} @onCopy={{this.onCopy}} />
+    </template>);
 
     await click('.hds-code-block__copy-button');
     assert.ok(copySpy.calledOnce, 'onCopy action was called');
@@ -218,9 +212,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     const copySpy = sinon.spy();
     this.set('onCopy', copySpy);
 
-    await render(hbs`
-      <Hds::CodeBlock @value="test" @hasCopyButton={{true}} />
-    `);
+    await render(<template>
+      <CodeBlock @value="test" @hasCopyButton={{true}} />
+    </template>);
 
     assert
       .dom('.hds-code-block__copy-button + .sr-only')
@@ -240,9 +234,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     const copySpy = sinon.spy();
     this.set('onCopy', copySpy);
 
-    await render(hbs`
-      <Hds::CodeBlock @value="test" @hasCopyButton={{true}} @copySuccessMessageText="Custom success message" />
-    `);
+    await render(<template>
+      <CodeBlock @value="test" @hasCopyButton={{true}} @copySuccessMessageText="Custom success message" />
+    </template>);
 
     assert
       .dom('.hds-code-block__copy-button + .sr-only')
@@ -259,33 +253,33 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // hasLineNumbers
   test('it displays line numbers by default', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').hasClass('line-numbers');
   });
 
   test('it does not display line numbers if hasLineNumbers is set to false', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @hasLineNumbers={{false}} id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @hasLineNumbers={{false}} id="test-code-block" />
+    </template>);
     assert.dom('#test-code-block').doesNotHaveClass('line-numbers');
   });
 
   // hasLineWrapping
   test('it does not wrap code line by default', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+    </template>);
     assert
       .dom('#test-code-block')
       .doesNotHaveClass('hds-code-block--has-line-wrapping');
   });
 
   test('it wraps code lines if hasLineWrapping is set to true', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @hasLineWrapping={{true}} id="test-code-block" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @hasLineWrapping={{true}} id="test-code-block" />
+    </template>);
     assert
       .dom('#test-code-block')
       .hasClass('hds-code-block--has-line-wrapping');
@@ -293,13 +287,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // highlightLines
   test('it highlights the passed in individual line numbers', async function (assert) {
-    await render(hbs`
-    <Hds::CodeBlock
-      id="test-code-block-highlight"
-      @highlightLines="1"
-      @value="console.log('Hello world');"
-    />
-  `);
+    await render(<template>
+    <CodeBlock id="test-code-block-highlight" @highlightLines="1" @value="console.log('Hello world');" />
+  </template>);
     assert
       .dom('#test-code-block-highlight [data-range="1"]')
       .exists()
@@ -308,9 +298,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // maxHeight
   test('it uses the passed in maxHeight value', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @maxHeight="100px" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @maxHeight="100px" />
+    </template>);
     assert
       .dom('.hds-code-block__code')
       .hasAttribute('style', 'max-height: 100px;');
@@ -318,9 +308,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   test('it displays a "Show more" button if the height of the code content is greater than the maxHeight', async function (assert) {
     // Note: We set a very small maxHeight to ensure the code block is scrollable
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
+    </template>);
     assert
       .dom('.hds-code-block__height-toggle-button')
       .exists()
@@ -329,16 +319,16 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   test('it does not display a height toggle button if the height of the code content is less than the maxHeight', async function (assert) {
     // Note: We use ems since if they were incorrectly interpreted as pixels, the test would fail)
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @maxHeight="5em" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @maxHeight="5em" />
+    </template>);
     assert.dom('.hds-code-block__height-toggle-button').doesNotExist();
   });
 
   test('it expands to show all content and displays a "Show less" button when "Show more" is clicked', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
+    </template>);
 
     assert
       .dom('.hds-code-block')
@@ -357,9 +347,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it collapses to show less content and displays a "Show more" button when "Show less" is clicked', async function (assert) {
-    await render(hbs`
-      <Hds::CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
-    `);
+    await render(<template>
+      <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
+    </template>);
 
     await click('.hds-code-block__height-toggle-button');
 
@@ -387,7 +377,7 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::CodeBlock />`);
+    await render(<template><CodeBlock /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/code-editor/description-test.js b/showcase/tests/integration/components/hds/code-editor/description-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/code-editor/description-test.js
rename to showcase/tests/integration/components/hds/code-editor/description-test.gjs
index d129f958204..8a38cdc9251 100644
--- a/showcase/tests/integration/components/hds/code-editor/description-test.js
+++ b/showcase/tests/integration/components/hds/code-editor/description-test.gjs
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
+import Description from "@hashicorp/design-system-components/components/hds/code-editor/description";
 
 module(
   'Integration | Component | hds/code-editor/description',
@@ -18,7 +18,7 @@ module(
       this.set('noop', () => {});
 
       await render(
-        hbs`<Hds::CodeEditor::Description @editorId="test" @onInsert={{this.noop}} />`,
+        <template><Description @editorId="test" @onInsert={{this.noop}} /></template>,
       );
 
       assert.dom('.hds-code-editor__description').exists();
@@ -30,7 +30,7 @@ module(
       this.set('onInsert', onInsert);
 
       await render(
-        hbs`<Hds::CodeEditor::Description @editorId="test" @onInsert={{this.onInsert}}>Test description</Hds::CodeEditor::Description>`,
+        <template><Description @editorId="test" @onInsert={{this.onInsert}}>Test description</Description></template>,
       );
 
       assert.true(onInsert.calledOnce);
diff --git a/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.js b/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/code-editor/full-screen-button-test.js
rename to showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gjs
index acd4b0d8363..69bcdfddf96 100644
--- a/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.js
+++ b/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gjs
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
+import FullScreenButton from "@hashicorp/design-system-components/components/hds/code-editor/full-screen-button";
 
 module(
   'Integration | Component | hds/code-editor/full-screen-button',
@@ -18,7 +18,7 @@ module(
       this.set('noop', () => {});
 
       await render(
-        hbs`<Hds::CodeEditor::FullScreenButton @isFullScreen={{false}} @onToggleFullScreen={{this.noop}} />`,
+        <template><FullScreenButton @isFullScreen={{false}} @onToggleFullScreen={{this.noop}} /></template>,
       );
 
       assert.dom('.hds-code-editor__full-screen-button').exists();
@@ -32,7 +32,7 @@ module(
       });
 
       await render(
-        hbs`<Hds::CodeEditor::FullScreenButton @isFullScreen={{this.isFullScreen}} @onToggleFullScreen={{this.noop}} />`,
+        <template><FullScreenButton @isFullScreen={{this.isFullScreen}} @onToggleFullScreen={{this.noop}} /></template>,
       );
       assert
         .dom('.hds-code-editor__full-screen-button')
@@ -65,7 +65,7 @@ module(
       this.set('onToggleFullScreen', onToggleFullScreen);
 
       await render(
-        hbs`<Hds::CodeEditor::FullScreenButton id="test-button" @isFullScreen={{false}} @onToggleFullScreen={{this.onToggleFullScreen}} />`,
+        <template><FullScreenButton id="test-button" @isFullScreen={{false}} @onToggleFullScreen={{this.onToggleFullScreen}} /></template>,
       );
 
       await click('#test-button');
diff --git a/showcase/tests/integration/components/hds/code-editor/title-test.js b/showcase/tests/integration/components/hds/code-editor/title-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/code-editor/title-test.js
rename to showcase/tests/integration/components/hds/code-editor/title-test.gjs
index 52807b48fe5..40136d3785d 100644
--- a/showcase/tests/integration/components/hds/code-editor/title-test.js
+++ b/showcase/tests/integration/components/hds/code-editor/title-test.gjs
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
+import Title from "@hashicorp/design-system-components/components/hds/code-editor/title";
 
 module('Integration | Component | hds/code-editor/title', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/code-editor/title', function (hooks) {
     this.set('noop', () => {});
 
     await render(
-      hbs`<Hds::CodeEditor::Title @editorId="test" @onInsert={{this.noop}} />`,
+      <template><Title @editorId="test" @onInsert={{this.noop}} /></template>,
     );
 
     assert.dom('.hds-code-editor__title').exists();
@@ -26,7 +26,7 @@ module('Integration | Component | hds/code-editor/title', function (hooks) {
     this.set('noop', () => {});
 
     await render(
-      hbs`<Hds::CodeEditor::Title @editorId="test" @onInsert={{this.noop}}>Test Title</Hds::CodeEditor::Title>`,
+      <template><Title @editorId="test" @onInsert={{this.noop}}>Test Title</Title></template>,
     );
 
     assert
@@ -40,7 +40,7 @@ module('Integration | Component | hds/code-editor/title', function (hooks) {
     this.set('noop', () => {});
 
     await render(
-      hbs`<Hds::CodeEditor::Title @editorId="test" @tag="h1" @onInsert={{this.noop}}>Test Title</Hds::CodeEditor::Title>`,
+      <template><Title @editorId="test" @tag="h1" @onInsert={{this.noop}}>Test Title</Title></template>,
     );
 
     assert.dom('.hds-code-editor__title').hasTagName('h1');
@@ -52,7 +52,7 @@ module('Integration | Component | hds/code-editor/title', function (hooks) {
     this.set('onInsert', onInsert);
 
     await render(
-      hbs`<Hds::CodeEditor::Title @editorId="test" @onInsert={{this.onInsert}}>Test Title</Hds::CodeEditor::Title>`,
+      <template><Title @editorId="test" @onInsert={{this.onInsert}}>Test Title</Title></template>,
     );
 
     assert.true(onInsert.calledOnce);
diff --git a/showcase/tests/integration/components/hds/copy/button/index-test.js b/showcase/tests/integration/components/hds/copy/button/index-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/copy/button/index-test.js
rename to showcase/tests/integration/components/hds/copy/button/index-test.gjs
index 4165155ce1a..5275a3f6e64 100644
--- a/showcase/tests/integration/components/hds/copy/button/index-test.js
+++ b/showcase/tests/integration/components/hds/copy/button/index-test.gjs
@@ -6,10 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
-
 import { wait } from 'showcase/tests/helpers';
+import Button from "@hashicorp/design-system-components/components/hds/copy/button/index";
 
 module('Integration | Component | hds/copy/button/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -31,7 +30,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button');
   });
@@ -40,7 +39,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should allow to copy a `string` provided as `@text` argument', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     await click('button#test-copy-button');
     assert.true(this.success);
@@ -50,7 +49,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should allow to target an element using a `string` selector for the `@target` argument', async function (assert) {
     await render(
-      hbs`<p id="test-copy-button-target">Hello world!</p><Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @targetToCopy="#test-copy-button-target" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><p id="test-copy-button-target">Hello world!</p><Button id="test-copy-button" @text="Copy your secret key" @targetToCopy="#test-copy-button-target" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     await click('button#test-copy-button');
     assert.true(this.success);
@@ -59,7 +58,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
   // @ariaMessageText ARGUMENT
   test('it should set a custom success message in the aria-live region if passed', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @ariaMessageText="Custom success message" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @ariaMessageText="Custom success message" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     // Test the copy success message is not rendered before the button is clicked:
@@ -78,7 +77,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should render the correct default component variation: secondary color, medium size, idle status', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button');
     assert.dom('#test-copy-button').hasClass('hds-button--size-medium');
@@ -88,7 +87,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should only render an icon and also render an aria-label if isIconOnly is set to true', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button @text="Copy" @isIconOnly={{true}} @textToCopy="someSecretThingGoesHere" id="test-copy-button" />`,
+      <template><Button @text="Copy" @isIconOnly={{true}} @textToCopy="someSecretThingGoesHere" id="test-copy-button" /></template>,
     );
     assert.dom('#test-copy-button').doesNotIncludeText('Copy');
     assert.dom('#test-copy-button').hasAria('label', 'Copy');
@@ -96,15 +95,14 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should render the small size if @size small is defined', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="copy" @textToCopy="someSecretThingGoesHere" @size="small" />`,
+      <template><Button id="test-copy-button" @text="copy" @textToCopy="someSecretThingGoesHere" @size="small" /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-button--size-small');
   });
 
   test('it always renders the text value, not the text to copy', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key"
-      @textToCopy="someSecretThingGoesHere" />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-button').hasText('Copy your secret key');
     assert
@@ -114,7 +112,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should have the correct CSS class to support full-width size if @isFullWidth prop is true', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="copy" @textToCopy="someSecretThingGoesHere" @isFullWidth={{true}} />`,
+      <template><Button id="test-copy-button" @text="copy" @textToCopy="someSecretThingGoesHere" @isFullWidth={{true}} /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-button--width-full');
   });
@@ -123,7 +121,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should update the status to success if the copy operation was successful', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     // Test the copy success message is not rendered before the button is clicked:
@@ -140,8 +138,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should update the status back to idle after success', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key"
-      @textToCopy="someSecretThingGoesHere" />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     await click('button#test-copy-button');
@@ -159,7 +156,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
         'this is a fake error message provided to the sinon.stub().throws() method',
       );
     await render(
-      hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     await click('button#test-copy-button');
@@ -177,8 +174,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Copy::Button id="test-copy-button"
-    @textToCopy="someSecretThingGoesHere" />`);
+    await render(<template><Button id="test-copy-button" @textToCopy="someSecretThingGoesHere" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -191,8 +187,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Copy::Button id="test-copy-button" @text="Copy your secret key" @size="tiny"
-    @textToCopy="someSecretThingGoesHere" />`);
+    await render(<template><Button id="test-copy-button" @text="Copy your secret key" @size="tiny" @textToCopy="someSecretThingGoesHere" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/copy/snippet/index-test.js b/showcase/tests/integration/components/hds/copy/snippet/index-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/copy/snippet/index-test.js
rename to showcase/tests/integration/components/hds/copy/snippet/index-test.gjs
index 99299c919bf..e11b9a86fcb 100644
--- a/showcase/tests/integration/components/hds/copy/snippet/index-test.js
+++ b/showcase/tests/integration/components/hds/copy/snippet/index-test.gjs
@@ -6,10 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
-
 import { wait } from 'showcase/tests/helpers';
+import Snippet from "@hashicorp/design-system-components/components/hds/copy/snippet/index";
 
 module('Integration | Component | hds/copy/snippet/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -30,14 +29,14 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet');
   });
 
   test('it should render the component with an aria-label that includes the correct copy text', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="this aria label" />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="this aria label" /></template>,
     );
     assert.dom('#test-copy-snippet').hasAria('label', 'copy this aria label');
   });
@@ -46,7 +45,7 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should render the correct default component variation: primary color, idle status', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet');
     assert
@@ -57,7 +56,7 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should render the secondary color if defined', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @color="secondary" />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @color="secondary" /></template>,
     );
     assert
       .dom('#test-copy-snippet')
@@ -66,14 +65,14 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should support truncation if @isTruncated is set to true', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @isTruncated={{true}} />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @isTruncated={{true}} /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--is-truncated');
   });
 
   test('it should have the correct CSS class to support full-width size if @isFullWidth prop is true', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @isFullWidth={{true}} />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @isFullWidth={{true}} /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--width-full');
   });
@@ -82,7 +81,7 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should update the status to success if the copy operation was successful', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
     await click('button#test-copy-snippet');
@@ -94,7 +93,7 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should update the status back to idle after success', async function (assert) {
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
     await click('button#test-copy-snippet');
@@ -114,7 +113,7 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
         'this is a fake error message provided to the sinon.stub().throws() method',
       );
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
     await click('button#test-copy-snippet');
@@ -134,7 +133,7 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Copy::Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @color="tertiary" />`,
+      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @color="tertiary" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/body-test.js b/showcase/tests/integration/components/hds/dialog-primitive/body-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/dialog-primitive/body-test.js
rename to showcase/tests/integration/components/hds/dialog-primitive/body-test.gjs
index b4aa56f1b9a..841216ac820 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/body-test.js
+++ b/showcase/tests/integration/components/hds/dialog-primitive/body-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Body from "@hashicorp/design-system-components/components/hds/dialog-primitive/body";
 
 module('Integration | Component | hds/dialog-primitive/body', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,11 +17,11 @@ module('Integration | Component | hds/dialog-primitive/body', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`
-        <Hds::DialogPrimitive::Body id="test-body">
+      <template>
+        <Body id="test-body">
           Body
-        </Hds::DialogPrimitive::Body>
-      `,
+        </Body>
+      </template>,
     );
     assert.dom('#test-body').hasClass('hds-dialog-primitive__body');
   });
@@ -30,11 +30,11 @@ module('Integration | Component | hds/dialog-primitive/body', function (hooks) {
 
   test('it renders the passed in content', async function (assert) {
     await render(
-      hbs`
-        <Hds::DialogPrimitive::Body id="test-body">
+      <template>
+        <Body id="test-body">
             Body
-        </Hds::DialogPrimitive::Body>
-      `,
+        </Body>
+      </template>,
     );
     assert.dom('.hds-dialog-primitive__body').hasText('Body');
   });
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/description-test.js b/showcase/tests/integration/components/hds/dialog-primitive/description-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/dialog-primitive/description-test.js
rename to showcase/tests/integration/components/hds/dialog-primitive/description-test.gjs
index 0ff8c6454b7..8c97139ccff 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/description-test.js
+++ b/showcase/tests/integration/components/hds/dialog-primitive/description-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Description from "@hashicorp/design-system-components/components/hds/dialog-primitive/description";
 
 module(
   'Integration | Component | hds/dialog-primitive/description',
@@ -19,11 +19,11 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Description id="test-description">
+        <template>
+        <Description id="test-description">
           Description
-        </Hds::DialogPrimitive::Description>
-      `,
+        </Description>
+      </template>,
       );
       assert
         .dom('#test-description')
@@ -34,11 +34,11 @@ module(
 
     test('it renders the passed in content', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Description>
+        <template>
+        <Description>
           Description
-        </Hds::DialogPrimitive::Description>
-      `,
+        </Description>
+      </template>,
       );
       assert.dom('.hds-dialog-primitive__description').hasText('Description');
     });
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/footer-test.js b/showcase/tests/integration/components/hds/dialog-primitive/footer-test.gjs
similarity index 66%
rename from showcase/tests/integration/components/hds/dialog-primitive/footer-test.js
rename to showcase/tests/integration/components/hds/dialog-primitive/footer-test.gjs
index 41d8c02f71f..0c540a4420a 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/footer-test.js
+++ b/showcase/tests/integration/components/hds/dialog-primitive/footer-test.gjs
@@ -6,7 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Footer from "@hashicorp/design-system-components/components/hds/dialog-primitive/footer";
+import Button from "@hashicorp/design-system-components/components/hds/button/index";
+import { on } from "@ember/modifier";
 
 module(
   'Integration | Component | hds/dialog-primitive/footer',
@@ -19,11 +21,11 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Footer id="test-footer">
+        <template>
+        <Footer id="test-footer">
           Footer
-        </Hds::DialogPrimitive::Footer>
-      `,
+        </Footer>
+      </template>,
       );
       assert.dom('#test-footer').hasClass('hds-dialog-primitive__footer');
     });
@@ -32,11 +34,11 @@ module(
 
     test('it renders the passed in content', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Footer>
-          <Hds::Button type="submit" @text="Primary" />
-        </Hds::DialogPrimitive::Footer>
-      `,
+        <template>
+        <Footer>
+          <Button type="submit" @text="Primary" />
+        </Footer>
+      </template>,
       );
       assert.dom('.hds-dialog-primitive__footer .hds-button').exists();
     });
@@ -47,11 +49,11 @@ module(
       let dismissed = false;
       this.set('onDismiss', () => (dismissed = true));
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Footer @onDismiss={{this.onDismiss}} as |F|>
-          <Hds::Button type="submit" @text="Primary" {{on "click" F.close}} />
-        </Hds::DialogPrimitive::Footer>
-      `,
+        <template>
+        <Footer @onDismiss={{this.onDismiss}} as |F|>
+          <Button type="submit" @text="Primary" {{on "click" F.close}} />
+        </Footer>
+      </template>,
       );
       await click('.hds-dialog-primitive__footer .hds-button');
       assert.ok(dismissed);
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/header-test.js b/showcase/tests/integration/components/hds/dialog-primitive/header-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/dialog-primitive/header-test.js
rename to showcase/tests/integration/components/hds/dialog-primitive/header-test.gjs
index 5827148ee69..23c8ad3a028 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/header-test.js
+++ b/showcase/tests/integration/components/hds/dialog-primitive/header-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from "@hashicorp/design-system-components/components/hds/dialog-primitive/header";
 
 module(
   'Integration | Component | hds/dialog-primitive/header',
@@ -19,9 +19,9 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Header id="test-header">Title</Hds::DialogPrimitive::Header>
-      `,
+        <template>
+        <Header id="test-header">Title</Header>
+      </template>,
       );
       assert.dom('#test-header').hasClass('hds-dialog-primitive__header');
     });
@@ -30,11 +30,11 @@ module(
 
     test('it renders the title without icon, tagline, or description', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Header>
+        <template>
+        <Header>
           Title
-        </Hds::DialogPrimitive::Header>
-      `,
+        </Header>
+      </template>,
       );
       assert.dom('.hds-dialog-primitive__title').exists();
       assert.dom('.hds-dialog-primitive__title').hasText('Title');
@@ -44,11 +44,11 @@ module(
 
     test('it renders the title with icon and tagline if provided', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline">
+        <template>
+        <Header @icon="info" @tagline="Tagline">
           Title
-        </Hds::DialogPrimitive::Header>
-      `,
+        </Header>
+      </template>,
       );
       assert.dom('.hds-dialog-primitive__title').exists();
       assert.dom('.hds-dialog-primitive__title').hasText('Tagline Title');
@@ -58,20 +58,20 @@ module(
     });
 
     test('it renders the title as a div when the @titleTag argument is not provided', async function (assert) {
-      await render(hbs`
-        <Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline">
+      await render(<template>
+        <Header @icon="info" @tagline="Tagline">
           Title
-        </Hds::DialogPrimitive::Header>
-      `);
+        </Header>
+      </template>);
       assert.dom('.hds-dialog-primitive__title').hasTagName('div');
     });
 
     test('it renders the title as a custom title tag when the @titleTag argument is provided', async function (assert) {
-      await render(hbs`
-        <Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline" @titleTag='h1'>
+      await render(<template>
+        <Header @icon="info" @tagline="Tagline" @titleTag="h1">
           Title
-        </Hds::DialogPrimitive::Header>
-      `);
+        </Header>
+      </template>);
       assert.dom('.hds-dialog-primitive__title').hasTagName('h1');
     });
 
@@ -79,11 +79,11 @@ module(
 
     test('it adds contextual classes to different DOM nodes using the `@contextualClassPrefix`', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline" @contextualClassPrefix="abc">
+        <template>
+        <Header @icon="info" @tagline="Tagline" @contextualClassPrefix="abc">
           Title
-        </Hds::DialogPrimitive::Header>
-      `,
+        </Header>
+      </template>,
       );
       assert.dom('.hds-dialog-primitive__header.abc__header').exists();
       assert.dom('.hds-dialog-primitive__icon.abc__icon').exists();
@@ -96,11 +96,11 @@ module(
 
     test('it should always render the "dismiss" button', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Header>
+        <template>
+        <Header>
           Title
-        </Hds::DialogPrimitive::Header>
-      `,
+        </Header>
+      </template>,
       );
       assert.dom('button.hds-dialog-primitive__dismiss').exists();
     });
@@ -111,11 +111,11 @@ module(
       let dismissed = false;
       this.set('onDismiss', () => (dismissed = true));
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Header @onDismiss={{this.onDismiss}}>
+        <template>
+        <Header @onDismiss={{this.onDismiss}}>
           Title
-        </Hds::DialogPrimitive::Header>
-      `,
+        </Header>
+      </template>,
       );
       await click('button.hds-dialog-primitive__dismiss');
       assert.ok(dismissed);
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/overlay-test.js b/showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/dialog-primitive/overlay-test.js
rename to showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gjs
index 3c26e4eb8a0..c9ad968eacb 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/overlay-test.js
+++ b/showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Overlay from "@hashicorp/design-system-components/components/hds/dialog-primitive/overlay";
 
 module(
   'Integration | Component | hds/dialog-primitive/overlay',
@@ -18,7 +18,7 @@ module(
     });
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`<Hds::DialogPrimitive::Overlay />`);
+      await render(<template><Overlay /></template>);
       assert.dom('.hds-dialog-primitive__overlay').exists();
     });
   },
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.js b/showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gjs
similarity index 65%
rename from showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.js
rename to showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gjs
index 13f8ce70fab..ff503f08e7e 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.js
+++ b/showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gjs
@@ -6,7 +6,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Wrapper from "@hashicorp/design-system-components/components/hds/dialog-primitive/wrapper";
+import Header from "@hashicorp/design-system-components/components/hds/dialog-primitive/header";
+import Description from "@hashicorp/design-system-components/components/hds/dialog-primitive/description";
+import Body from "@hashicorp/design-system-components/components/hds/dialog-primitive/body";
+import Footer from "@hashicorp/design-system-components/components/hds/dialog-primitive/footer";
 
 module(
   'Integration | Component | hds/dialog-primitive/wrapper',
@@ -19,13 +23,13 @@ module(
 
     test('it should render the component with a CSS class that matches the component name, and its sub', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Wrapper id="test-dialog-primitive">
+        <template>
+        <Wrapper id="test-dialog-primitive">
           <:header>Header</:header>
           <:body>Body</:body>
           <:footer>Footer</:footer>
-        </Hds::DialogPrimitive::Wrapper>
-      `,
+        </Wrapper>
+      </template>,
       );
       assert
         .dom('#test-dialog-primitive')
@@ -36,20 +40,20 @@ module(
 
     test('it renders the content slots and the contextual components', async function (assert) {
       await render(
-        hbs`
-        <Hds::DialogPrimitive::Wrapper id="test-dialog-primitive">
+        <template>
+        <Wrapper id="test-dialog-primitive">
           <:header>
-            <Hds::DialogPrimitive::Header>Title</Hds::DialogPrimitive::Header>
-            <Hds::DialogPrimitive::Description>Description</Hds::DialogPrimitive::Description>
+            <Header>Title</Header>
+            <Description>Description</Description>
           </:header>
           <:body>
-            <Hds::DialogPrimitive::Body>Body</Hds::DialogPrimitive::Body>
+            <Body>Body</Body>
           </:body>
           <:footer>
-            <Hds::DialogPrimitive::Footer>Footer</Hds::DialogPrimitive::Footer>
+            <Footer>Footer</Footer>
           </:footer>
-        </Hds::DialogPrimitive::Wrapper>
-      `,
+        </Wrapper>
+      </template>,
       );
       assert.dom('.hds-dialog-primitive__wrapper-header').exists();
       assert.dom('.hds-dialog-primitive__wrapper-body').exists();
diff --git a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.js b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/disclosure-primitive/index-test.js
rename to showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs
index c007f8961cf..4a9e92e716f 100644
--- a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.js
+++ b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import DisclosurePrimitive from "@hashicorp/design-system-components/components/hds/disclosure-primitive/index";
+import { on } from "@ember/modifier";
 
 module(
   'Integration | Component | hds/disclosure-primitive/index',
@@ -19,7 +20,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::DisclosurePrimitive id="test-disclosure-primitive" />`,
+        <template><DisclosurePrimitive id="test-disclosure-primitive" /></template>,
       );
       assert
         .dom('div#test-disclosure-primitive')
@@ -29,32 +30,32 @@ module(
     // TOGGLE + CONTENT
 
     test('it should render the "toggle" block but not the "content', async function (assert) {
-      await render(hbs`
-      <Hds::DisclosurePrimitive>
+      await render(<template>
+      <DisclosurePrimitive>
         <:toggle>
           <button type="button" id="test-disclosure-primitive-button" />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       assert.dom('.hds-disclosure-primitive__toggle').exists();
       assert.dom('button#test-disclosure-primitive-button').exists();
       assert.dom('.hds-disclosure-primitive__content').exists();
       assert.dom('a#test-disclosure-primitive-link').doesNotExist();
     });
     test('it should render the "content" when the "toggle" is clicked', async function (assert) {
-      await render(hbs`
-      <Hds::DisclosurePrimitive>
+      await render(<template>
+      <DisclosurePrimitive>
         <:toggle as |t|>
           <button type="button" id="test-disclosure-primitive-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       await click('button#test-disclosure-primitive-button');
       assert.dom('a#test-disclosure-primitive-link').exists();
     });
@@ -63,16 +64,16 @@ module(
 
     test('it should toggle the "content" when @isOpen is set', async function (assert) {
       this.set('isOpen', true);
-      await render(hbs`
-      <Hds::DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
+      await render(<template>
+      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       assert.dom('a#test-disclosure-primitive-link').exists();
 
       this.set('isOpen', false);
@@ -80,16 +81,16 @@ module(
     });
 
     test('it should allow @isOpen to override an internal _isOpen=true', async function (assert) {
-      await render(hbs`
-      <Hds::DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
+      await render(<template>
+      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       await click('button#test-toggle-button');
       assert.dom('a#test-disclosure-primitive-link').exists();
 
@@ -98,16 +99,16 @@ module(
     });
 
     test('it should allow @isOpen to override an internal _isOpen=false', async function (assert) {
-      await render(hbs`
-      <Hds::DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
+      await render(<template>
+      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       assert.dom('a#test-disclosure-primitive-link').doesNotExist();
 
       this.set('isOpen', true);
@@ -116,16 +117,16 @@ module(
 
     test('it should allow the internal _isOpen to override @isOpen=true', async function (assert) {
       this.set('isOpen', true);
-      await render(hbs`
-      <Hds::DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
+      await render(<template>
+      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       assert.dom('a#test-disclosure-primitive-link').exists();
 
       await click('button#test-toggle-button');
@@ -134,16 +135,16 @@ module(
 
     test('it should allow the internal _isOpen to override @isOpen=false', async function (assert) {
       this.set('isOpen', false);
-      await render(hbs`
-      <Hds::DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
+      await render(<template>
+      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       assert.dom('a#test-disclosure-primitive-link').doesNotExist();
 
       await click('button#test-toggle-button');
@@ -153,32 +154,32 @@ module(
     // contentId
 
     test('it should set the contentId on the content block', async function (assert) {
-      await render(hbs`
-      <Hds::DisclosurePrimitive>
+      await render(<template>
+      <DisclosurePrimitive>
         <:toggle>
           <button type="button" id="test-disclosure-primitive-button" />
         </:toggle>
         <:content>
           <a id="test-disclosure-primitive-link" href="#">test</a>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       assert.dom('.hds-disclosure-primitive__content').hasAttribute('id');
     });
 
     // CLOSE DISCLOSED CONTENT ON CLICK
 
     test('it should hide the "content" when an interactive element triggers `close`', async function (assert) {
-      await render(hbs`
-      <Hds::DisclosurePrimitive id="test-disclosure-primitive">
+      await render(<template>
+      <DisclosurePrimitive id="test-disclosure-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content as |c|>
           <button id="test-content-button" {{on "click" c.close}}>test</button>
         </:content>
-      </Hds::DisclosurePrimitive>
-    `);
+      </DisclosurePrimitive>
+    </template>);
       await click('button#test-toggle-button');
       assert.dom('button#test-content-button').exists();
       await click('button#test-content-button');
@@ -190,16 +191,16 @@ module(
     test('it should invoke the `onClickToggle` callback', async function (assert) {
       let opened = false;
       this.set('onClickToggle', () => (opened = !opened));
-      await render(hbs`
-        <Hds::DisclosurePrimitive @onClickToggle={{this.onClickToggle}} id="test-disclosure-primitive">
+      await render(<template>
+        <DisclosurePrimitive @onClickToggle={{this.onClickToggle}} id="test-disclosure-primitive">
           <:toggle as |t|>
             <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
           </:toggle>
           <:content>
             <a id="test-disclosure-primitive-link" href="#">test</a>
           </:content>
-        </Hds::DisclosurePrimitive>
-      `);
+        </DisclosurePrimitive>
+      </template>);
       // toggle to open
       await click('button#test-toggle-button');
       assert.true(opened);
diff --git a/showcase/tests/integration/components/hds/dismiss-button/index-test.js b/showcase/tests/integration/components/hds/dismiss-button/index-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/dismiss-button/index-test.js
rename to showcase/tests/integration/components/hds/dismiss-button/index-test.gjs
index 4ebc9ce5634..bd6b5a14d7e 100644
--- a/showcase/tests/integration/components/hds/dismiss-button/index-test.js
+++ b/showcase/tests/integration/components/hds/dismiss-button/index-test.gjs
@@ -6,18 +6,18 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import DismissButton from "@hashicorp/design-system-components/components/hds/dismiss-button/index";
 
 module('Integration | Component | hds/dismiss-button/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::DismissButton id="test-dismiss-button" />`);
+    await render(<template><DismissButton id="test-dismiss-button" /></template>);
     assert.dom('#test-dismiss-button').hasClass('hds-dismiss-button');
   });
   test('it should spread all the passed attributes', async function (assert) {
     await render(
-      hbs`<Hds::DismissButton id="test-dismiss-button" class="dismiss-button-class" data-test-dismiss-button1 data-test-dismiss-button2="test" />`,
+      <template><DismissButton id="test-dismiss-button" class="dismiss-button-class" data-test-dismiss-button1 data-test-dismiss-button2="test" /></template>,
     );
     assert.dom('#test-dismiss-button').hasClass('dismiss-button-class');
     assert
diff --git a/showcase/tests/integration/components/hds/dropdown/index-test.js b/showcase/tests/integration/components/hds/dropdown/index-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/dropdown/index-test.js
rename to showcase/tests/integration/components/hds/dropdown/index-test.gjs
index 4793512ce5f..44eb09edf56 100644
--- a/showcase/tests/integration/components/hds/dropdown/index-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/index-test.gjs
@@ -6,37 +6,38 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 import { wait } from 'showcase/tests/helpers';
+import Dropdown from "@hashicorp/design-system-components/components/hds/dropdown/index";
+import style_ from "ember-style-modifier/modifiers/style";
+import { on } from "@ember/modifier";
 
 module('Integration | Component | hds/dropdown/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     assert.dom('#test-dropdown').hasClass('hds-dropdown');
   });
 
   // NAMED YIELDS
 
   test('it renders the "toggle" sub-components', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.ToggleIcon @icon="user" @text="toggle icon" id="test-toggle-icon" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     assert.dom('#test-dropdown #test-toggle-button').exists();
     assert.dom('#test-dropdown #test-toggle-icon').exists();
   });
   test('it renders the "list-item" sub-components', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Description @text="description" id="test-list-item-description" />
         <D.Generic>
@@ -45,8 +46,8 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
         <D.Interactive @route="page-components.dropdown" @text="interactive" id="test-list-item-interactive" />
         <D.Separator id="test-list-item-separator" />
         <D.Title @text="title" id="test-list-item-title" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown ul').exists();
     assert.dom('#test-dropdown #test-list-item-description').exists();
@@ -56,26 +57,26 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
     assert.dom('#test-dropdown #test-list-item-title').exists();
   });
   test('it renders the "header"/"footer" sub-components', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Header id="test-header">Header</D.Header>
         <D.Footer id="test-footer">Footer</D.Footer>
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown #test-header').hasText('Header');
     assert.dom('#test-dropdown #test-footer').hasText('Footer');
   });
 
   test('it renders the "header"/"footer" sub-components with separators', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Header @hasDivider={{true}} id="test-header">Header</D.Header>
         <D.Footer @hasDivider={{true}} id="test-footer">Footer</D.Footer>
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert
       .dom('#test-dropdown #test-header')
@@ -86,14 +87,14 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   });
 
   test('it does not render the content sub-components when closed, by default', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Header id="test-header">Header</D.Header>
         <D.Interactive @route="page-components.dropdown" @text="interactive" />
         <D.Footer id="test-footer">Footer</D.Footer>
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
 
     // the container should exist in the DOM
     assert.dom('#test-dropdown .hds-dropdown__content').exists();
@@ -104,14 +105,14 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   });
 
   test('it renders the content sub-components even when closed, when `@preserveContentInDom` is `true`', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" @preserveContentInDom={{true}} as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" @preserveContentInDom={{true}} as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Header id="test-header">Header</D.Header>
         <D.Interactive id="test-list-item" @route="page-components.dropdown" @text="interactive-always-rendered" />
         <D.Footer id="test-footer">Footer</D.Footer>
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
 
     // the container should exist in the DOM
     assert.dom('#test-dropdown .hds-dropdown__content').exists();
@@ -125,36 +126,36 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   // POSITION
 
   test('it should render the content aligned on the right by default', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert
       .dom('#test-dropdown .hds-dropdown__content')
       .hasClass('hds-dropdown__content--position-bottom-right');
   });
   test('it should render the content aligned on the left if the value of @listPosition is "bottom-left"', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" @listPosition="bottom-left" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" @listPosition="bottom-left" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert
       .dom('#test-dropdown .hds-dropdown__content')
       .hasClass('hds-dropdown__content--position-bottom-left');
   });
   test('it should render the element as `inline` if the value of @isInline is "true"', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" @isInline={{true}} as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" @isInline={{true}} as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown').hasClass('hds-dropdown--is-inline');
   });
@@ -162,23 +163,23 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   // WIDTH
 
   test('it should render the content with a fixed width if a @width value is passed', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown @width="248px" id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown @width="248px" id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('.hds-dropdown__content').hasStyle({ width: '248px' });
   });
 
   test('it should render the content with the same width as the ToggleButton if @matchToggleWidth is set', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" @matchToggleWidth={{true}} as |D|>
-        <D.ToggleButton {{style width="200px"}} @text="toggle button" id="test-toggle-button" />
+    await render(<template>
+      <Dropdown id="test-dropdown" @matchToggleWidth={{true}} as |D|>
+        <D.ToggleButton {{style_ width="200px"}} @text="toggle button" id="test-toggle-button" />
         <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     await wait();
     // the expected value is 200px, but the ember-testing frame has a `transform: scale(0.5);`
@@ -188,12 +189,12 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   // PRESERVE DISCLOSED CONTENT WHEN INTERACTED WITH
 
   test('it should preserve the content visible when interacted with', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @route="page-components.dropdown" id="test-list-item-interactive" @text="interactive" />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown #test-list-item-interactive').exists();
     // click on the dropdown content container as a minimal interaction with the content;
@@ -205,12 +206,12 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   // CLOSE DISCLOSED CONTENT ON CLICK
 
   test('it should hide the content when an interactive element triggers `close`', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @text="interactive" id="test-list-item-interactive" {{on "click" D.close}} />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown #test-list-item-interactive').exists();
     await click('#test-list-item-interactive');
@@ -220,22 +221,22 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
   // ACCESSIBILITY
 
   test('it should render a list of items without a role if no selectable items are passed in', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Interactive @text="interactive" id="test-list-item-interactive" {{on "click" D.close}} />
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown ul').doesNotHaveAttribute('role');
   });
   test('it should render a list of items with a `listbox` role, refering an existing `id` via `aria-labelledby` if selectable items are passed in', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" id="test-toggle-button" />
         <D.Checkmark>Checkmark</D.Checkmark>
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
     assert
@@ -243,12 +244,12 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
       .hasAttribute('aria-labelledby', 'test-toggle-button');
   });
   test('it should render a list of items with a `listbox` role, refering an generated `id` via `aria-labelledby` if selectable items are passed in', async function (assert) {
-    await render(hbs`
-      <Hds::Dropdown id="test-dropdown" as |D|>
+    await render(<template>
+      <Dropdown id="test-dropdown" as |D|>
         <D.ToggleButton @text="toggle button" />
         <D.Checkmark>Checkmark</D.Checkmark>
-      </Hds::Dropdown>
-    `);
+      </Dropdown>
+    </template>);
     const button = this.element.querySelector('.hds-dropdown-toggle-button');
     const buttonId = button.id;
     await click('button.hds-dropdown-toggle-button');
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gjs
index e9ba47edf5f..44568e74e91 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Checkbox from "@hashicorp/design-system-components/components/hds/dropdown/list-item/checkbox";
 
 module(
   'Integration | Component | hds/dropdown/list-item/checkbox',
@@ -15,14 +15,14 @@ module(
 
     test('it renders the "list-item/checkbox"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox>Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox>Checkbox item</Checkbox></template>,
       );
       assert.dom(this.element).exists();
     });
 
     test('it should render the "list-item/checkbox" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox>Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox>Checkbox item</Checkbox></template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -34,7 +34,7 @@ module(
 
     test('it should render the "list-item" with a checkbox control', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox>Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox>Checkbox item</Checkbox></template>,
       );
       assert.dom('.hds-form-checkbox').exists();
     });
@@ -43,7 +43,7 @@ module(
 
     test('it should forward the `id` and `value` arguments to the input control', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox @id="id" @value="value">Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox @id="id" @value="value">Checkbox item</Checkbox></template>,
       );
       assert.dom('.hds-form-checkbox').hasAttribute('id', 'id');
       assert.dom('.hds-form-checkbox').hasValue('value');
@@ -52,7 +52,7 @@ module(
     // CONTROL-LABEL ASSOCIATION
     test('it automatically creates the control-label relationship via generated id', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox @value="value">Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox @value="value">Checkbox item</Checkbox></template>,
       );
       let control = this.element.querySelector(
         '.hds-dropdown-list-item__control',
@@ -67,7 +67,7 @@ module(
 
     test('if an icon is declared the flight icon should render in the component', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox @icon="hexagon">Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox @icon="hexagon">Checkbox item</Checkbox></template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -76,7 +76,7 @@ module(
 
     test('it should render the content passed as block in a form label', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox>Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox>Checkbox item</Checkbox></template>,
       );
       assert.dom('.hds-dropdown-list-item__control').exists();
       assert.dom('.hds-dropdown-list-item__label').hasText('Checkbox item');
@@ -86,7 +86,7 @@ module(
 
     test('it should render with a result count badge', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox @count="10">Checkbox item</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox @count="10">Checkbox item</Checkbox></template>,
       );
       assert.dom('.hds-dropdown-list-item__count').hasText('10');
     });
@@ -95,7 +95,7 @@ module(
 
     test('it should render as checked if `checked` is true', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkbox checked={{true}}>Checkbox</Hds::Dropdown::ListItem::Checkbox>`,
+        <template><Checkbox checked={{true}}>Checkbox</Checkbox></template>,
       );
       assert.dom('.hds-form-checkbox').isChecked();
     });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gjs
similarity index 70%
rename from showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gjs
index 28672895720..daebf3dd70e 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Checkmark from "@hashicorp/design-system-components/components/hds/dropdown/list-item/checkmark";
 
 module(
   'Integration | Component | hds/dropdown/list-item/checkmark',
@@ -15,14 +15,14 @@ module(
 
     test('it renders the "list-item/checkmark"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark>Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark>Checkmark item</Checkmark></template>,
       );
       assert.dom(this.element).exists();
     });
 
     test('it should render the "list-item/checkmark" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark>Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark>Checkmark item</Checkmark></template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -34,19 +34,19 @@ module(
 
     test('it should render the "list-item" with a button by default"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark>Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark>Checkmark item</Checkmark></template>,
       );
       assert.dom('button.hds-dropdown-list-item__interactive').exists();
     });
     test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark @route="index">Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark @route="index">Checkmark item</Checkmark></template>,
       );
       assert.dom('a.hds-dropdown-list-item__interactive').exists();
     });
     test('it should render the "list-item" with a link if it has a @href argument"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark @href="#">Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark @href="#">Checkmark item</Checkmark></template>,
       );
       assert.dom('a.hds-dropdown-list-item__interactive').exists();
     });
@@ -55,7 +55,7 @@ module(
 
     test('if an icon is declared the flight icon should render in the component', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark @icon="hexagon">Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark @icon="hexagon">Checkmark item</Checkmark></template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -64,7 +64,7 @@ module(
 
     test('it should render the content passed as block', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark>Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark>Checkmark item</Checkmark></template>,
       );
       assert.dom('.hds-dropdown-list-item').hasText('Checkmark item');
     });
@@ -73,7 +73,7 @@ module(
 
     test('it should render with a result count badge', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark @count="10">Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark @count="10">Checkmark item</Checkmark></template>,
       );
       assert.dom('.hds-dropdown-list-item__count').hasText('10');
     });
@@ -82,7 +82,7 @@ module(
 
     test('it should render as selected if `@selected` is true', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark @selected={{true}}>Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark @selected={{true}}>Checkmark item</Checkmark></template>,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -94,7 +94,7 @@ module(
 
     test('it should present the interactive element as a selectable option', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Checkmark @selected={{true}}>Checkmark item</Hds::Dropdown::ListItem::Checkmark>`,
+        <template><Checkmark @selected={{true}}>Checkmark item</Checkmark></template>,
       );
       assert
         .dom('.hds-dropdown-list-item__interactive')
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gjs
similarity index 84%
rename from showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gjs
index fecfeaedbd2..2138fe579ea 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import CopyItem from "@hashicorp/design-system-components/components/hds/dropdown/list-item/copy-item";
 
 module(
   'Integration | Component | hds/dropdown/list-item/copy-item',
@@ -19,7 +19,7 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::CopyItem @text="copy-item" id="test-list-item-copy-item" />`,
+        <template><CopyItem @text="copy-item" id="test-list-item-copy-item" /></template>,
       );
       assert.dom('#test-list-item-copy-item').hasTagName('li');
       assert
@@ -39,7 +39,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<Hds::Dropdown::ListItem::CopyItem />`);
+      await render(<template><CopyItem /></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/description-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/description-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/dropdown/list-item/description-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/description-test.gjs
index 0839d83b267..a7a7acbb1dc 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/description-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/description-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Description from "@hashicorp/design-system-components/components/hds/dropdown/list-item/description";
 
 module(
   'Integration | Component | hds/dropdown/list-item/description',
@@ -19,7 +19,7 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Description @text="description" id="test-list-item-description" />`,
+        <template><Description @text="description" id="test-list-item-description" /></template>,
       );
       assert.dom('#test-list-item-description').hasTagName('li');
       assert
@@ -39,7 +39,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<Hds::Dropdown::ListItem::Description />`);
+      await render(<template><Description /></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/generic-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gjs
similarity index 82%
rename from showcase/tests/integration/components/hds/dropdown/list-item/generic-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gjs
index 130cfb7a8dd..458420b99f4 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/generic-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Generic from "@hashicorp/design-system-components/components/hds/dropdown/list-item/generic";
 
 module(
   'Integration | Component | hds/dropdown/list-item/generic',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Generic id="test-list-item-generic" />`,
+        <template><Generic id="test-list-item-generic" /></template>,
       );
       assert.dom('#test-list-item-generic').hasTagName('li');
       assert.dom('#test-list-item-generic').hasClass('hds-dropdown-list-item');
@@ -28,7 +28,7 @@ module(
 
     test('it should render the yielded content', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Generic><pre>test</pre></Hds::Dropdown::ListItem::Generic>`,
+        <template><Generic><pre>test</pre></Generic></template>,
       );
       assert.dom('.hds-dropdown-list-item--variant-generic > pre').exists();
       assert
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gjs
index 0a3873660f4..1923e340afb 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Interactive from "@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive";
 
 module(
   'Integration | Component | hds/dropdown/list-item/interactive',
@@ -23,7 +23,7 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
+        <template><Interactive @text="interactive" /></template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -35,19 +35,19 @@ module(
 
     test('it should render the "list-item" with a button by default"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
+        <template><Interactive @text="interactive" /></template>,
       );
       assert.dom('.hds-dropdown-list-item > button').exists();
     });
     test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" @route="index" />`,
+        <template><Interactive @text="interactive" @route="index" /></template>,
       );
       assert.dom('.hds-dropdown-list-item > a').exists();
     });
     test('it should render the "list-item" with a link if it has a @href argument"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" @href="#" />`,
+        <template><Interactive @text="interactive" @href="#" /></template>,
       );
       assert.dom('.hds-dropdown-list-item > a').exists();
     });
@@ -56,7 +56,7 @@ module(
 
     test('it should render the "action" color as the default if no color is declared"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive" />`,
+        <template><Interactive @text="interactive" /></template>,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -64,7 +64,7 @@ module(
     });
     test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @color="critical" @text="interactive" @icon="trash" />`,
+        <template><Interactive @color="critical" @text="interactive" @icon="trash" /></template>,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -75,19 +75,19 @@ module(
 
     test('if an `@icon` is declared a leading icon should be rendered', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @text="interactive" />`,
+        <template><Interactive @icon="clipboard-copy" @text="interactive" /></template>,
       );
       assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
     });
     test('if an `@trailingIcon` is declared a trailing icon should be rendered', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link" @text="interactive" />`,
+        <template><Interactive @trailingIcon="external-link" @text="interactive" /></template>,
       );
       assert.dom('.hds-icon.hds-icon-external-link').exists();
     });
     test('if both an `@icon` and an `@trailingIcon` are declared both the leading and trailing icons should be rendered', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @icon="clipboard-copy" @trailingIcon="external-link" @text="interactive" />`,
+        <template><Interactive @icon="clipboard-copy" @trailingIcon="external-link" @text="interactive" /></template>,
       );
       assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
       assert.dom('.hds-icon.hds-icon-external-link').exists();
@@ -97,24 +97,24 @@ module(
 
     test('it should render the text passed as @text prop', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @text="interactive text" />`,
+        <template><Interactive @text="interactive text" /></template>,
       );
       assert.dom('.hds-dropdown-list-item').hasText('interactive text');
     });
     test('it should render the yielded content', async function (assert) {
-      await render(hbs`
-        <Hds::Dropdown::ListItem::Interactive>
+      await render(<template>
+        <Interactive>
           interactive
-        </Hds::Dropdown::ListItem::Interactive>
-      `);
+        </Interactive>
+      </template>);
       assert.dom('.hds-dropdown-list-item').hasText('interactive');
     });
     test('it should render the text passed as @text prop if content is yielded', async function (assert) {
-      await render(hbs`
-        <Hds::Dropdown::ListItem::Interactive @text="erroneous">
+      await render(<template>
+        <Interactive @text="erroneous">
           interactive
-        </Hds::Dropdown::ListItem::Interactive>
-      `);
+        </Interactive>
+      </template>);
       assert.dom('.hds-dropdown-list-item').doesNotContainText('erroneous');
     });
 
@@ -127,7 +127,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<Hds::Dropdown::ListItem::Interactive />`);
+      await render(<template><Interactive /></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
@@ -140,7 +140,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive @color="foo" @text="interactive text" />`,
+        <template><Interactive @color="foo" @text="interactive text" /></template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
@@ -151,9 +151,9 @@ module(
 
     test('it renders the contextual components', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive as |I|>
+        <template><Interactive as |I|>
               <I.Badge @text="Badge" />
-            </Hds::Dropdown::ListItem::Interactive>`,
+            </Interactive></template>,
       );
       assert
         .dom('.hds-badge')
@@ -162,9 +162,9 @@ module(
     });
     test('it does not render the contextual components if not provided', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Interactive>
+        <template><Interactive>
               interactive
-            </Hds::Dropdown::ListItem::Interactive>`,
+            </Interactive></template>,
       );
       assert.dom('.hds-badge').doesNotExist();
     });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/dropdown/list-item/radio-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gjs
index 89e3e2f0c5e..d80cef6354a 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Radio from "@hashicorp/design-system-components/components/hds/dropdown/list-item/radio";
 
 module(
   'Integration | Component | hds/dropdown/list-item/radio',
@@ -15,14 +15,14 @@ module(
 
     test('it renders the "list-item/radio"', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio>Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio>Radio item</Radio></template>,
       );
       assert.dom(this.element).exists();
     });
 
     test('it should render the "list-item/radio" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio>Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio>Radio item</Radio></template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -34,7 +34,7 @@ module(
 
     test('it should render the "list-item" with a radio control', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio>Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio>Radio item</Radio></template>,
       );
       assert.dom('.hds-form-radio').exists();
     });
@@ -43,7 +43,7 @@ module(
 
     test('it should forward the `id` and `value` arguments to the input control', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio @id="id" @value="value">Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio @id="id" @value="value">Radio item</Radio></template>,
       );
       assert.dom('.hds-form-radio').hasAttribute('id', 'id');
       assert.dom('.hds-form-radio').hasValue('value');
@@ -52,7 +52,7 @@ module(
     // CONTROL-LABEL ASSOCIATION
     test('it automatically creates the control-label relationship via generated id', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio @value="value">Checkbox item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio @value="value">Checkbox item</Radio></template>,
       );
       let control = this.element.querySelector(
         '.hds-dropdown-list-item__control',
@@ -67,7 +67,7 @@ module(
 
     test('if an icon is declared the flight icon should render in the component', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio @icon="hexagon">Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio @icon="hexagon">Radio item</Radio></template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -76,7 +76,7 @@ module(
 
     test('it should render the content passed as block in a form label', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio>Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio>Radio item</Radio></template>,
       );
       assert.dom('.hds-dropdown-list-item__control').exists();
       assert.dom('.hds-dropdown-list-item__label').hasText('Radio item');
@@ -86,7 +86,7 @@ module(
 
     test('it should render with a result count badge', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio @count="10">Radio item</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio @count="10">Radio item</Radio></template>,
       );
       assert.dom('.hds-dropdown-list-item__count').hasText('10');
     });
@@ -95,7 +95,7 @@ module(
 
     test('it should render as checked if `checked` is true', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Radio checked={{true}}>Radio</Hds::Dropdown::ListItem::Radio>`,
+        <template><Radio checked={{true}}>Radio</Radio></template>,
       );
       assert.dom('.hds-form-radio').isChecked();
     });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/dropdown/list-item/separator-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gjs
index 12d692c23ba..d3cf597e089 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Separator from "@hashicorp/design-system-components/components/hds/dropdown/list-item/separator";
 
 module(
   'Integration | Component | hds/dropdown/list-item/separator',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the "list-item/separator" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Separator @text="separator" id="test-list-item-separator" />`,
+        <template><Separator @text="separator" id="test-list-item-separator" /></template>,
       );
       assert.dom('#test-list-item-separator').hasTagName('li');
       assert
@@ -30,13 +30,13 @@ module(
 
     test('it should render the "list-item/separator" with role of separator', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Separator id="test-list-item-separator" />`,
+        <template><Separator id="test-list-item-separator" /></template>,
       );
       assert.dom('#test-list-item-separator').hasAttribute('role', 'separator');
     });
     test('it should render the "list-item/separator" with the aria-hidden attribute', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Separator id="test-list-item-separator" />`,
+        <template><Separator id="test-list-item-separator" /></template>,
       );
       assert
         .dom('#test-list-item-separator')
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/title-test.js b/showcase/tests/integration/components/hds/dropdown/list-item/title-test.gjs
similarity index 85%
rename from showcase/tests/integration/components/hds/dropdown/list-item/title-test.js
rename to showcase/tests/integration/components/hds/dropdown/list-item/title-test.gjs
index 19a436c90ec..c9ef50adbe5 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/title-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/title-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Title from "@hashicorp/design-system-components/components/hds/dropdown/list-item/title";
 
 module(
   'Integration | Component | hds/dropdown/list-item/title',
@@ -19,7 +19,7 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::ListItem::Title @text="title" id="test-list-item-title" />`,
+        <template><Title @text="title" id="test-list-item-title" /></template>,
       );
       assert.dom('#test-list-item-title').hasTagName('li');
       assert.dom('#test-list-item-title').hasClass('hds-dropdown-list-item');
@@ -37,7 +37,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<Hds::Dropdown::ListItem::Title />`);
+      await render(<template><Title /></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/dropdown/toggle/button-test.js b/showcase/tests/integration/components/hds/dropdown/toggle/button-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/dropdown/toggle/button-test.js
rename to showcase/tests/integration/components/hds/dropdown/toggle/button-test.gjs
index 756ddbca27b..6f929f093eb 100644
--- a/showcase/tests/integration/components/hds/dropdown/toggle/button-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/toggle/button-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Button from "@hashicorp/design-system-components/components/hds/dropdown/toggle/button";
 
 module(
   'Integration | Component | hds/dropdown/toggle/button',
@@ -21,7 +21,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="toggle text" id="test-toggle-button" />`,
+        <template><Button @text="toggle text" id="test-toggle-button" /></template>,
       );
       assert.dom('#test-toggle-button').hasClass('hds-dropdown-toggle-button');
     });
@@ -30,7 +30,7 @@ module(
 
     test('it should render the text passed as @text prop', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="toggle text" id="test-toggle-button" />`,
+        <template><Button @text="toggle text" id="test-toggle-button" /></template>,
       );
       assert.dom('#test-toggle-button').hasText('toggle text');
     });
@@ -39,7 +39,7 @@ module(
 
     test('it should render the chevron "down" by default', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" id="test-toggle-button" />`,
+        <template><Button @text="text toggle" id="test-toggle-button" /></template>,
       );
       assert.dom('.hds-icon.hds-icon-chevron-down').exists();
     });
@@ -48,7 +48,7 @@ module(
 
     test('it should render an icon if @icon is defined', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @icon="hexagon" />`,
+        <template><Button @text="text toggle" @icon="hexagon" /></template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -57,7 +57,7 @@ module(
 
     test('it should render a badge if @badge is defined', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="Lorem ipsum" @badge="badge" id="test-toggle-button" />`,
+        <template><Button @text="Lorem ipsum" @badge="badge" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button .hds-dropdown-toggle-button__badge')
@@ -66,7 +66,7 @@ module(
     });
     test('it should render a badge with icon if @badge and @badgeIcon is defined', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="Lorem ipsum" @badge="badge" @badgeIcon="hexagon" id="test-toggle-button" />`,
+        <template><Button @text="Lorem ipsum" @badge="badge" @badgeIcon="hexagon" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button .hds-dropdown-toggle-button__badge')
@@ -80,7 +80,7 @@ module(
 
     test('it should render a badge count if @count is defined', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="Lorem ipsum" @count="3" id="test-toggle-button" />`,
+        <template><Button @text="Lorem ipsum" @count="3" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button .hds-dropdown-toggle-button__count')
@@ -91,7 +91,7 @@ module(
 
     test('it should render the primary color as the default if no color is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" id="test-toggle-button" />`,
+        <template><Button @text="text toggle" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -99,7 +99,7 @@ module(
     });
     test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @color="secondary" id="test-toggle-button" />`,
+        <template><Button @text="text toggle" @color="secondary" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -110,7 +110,7 @@ module(
 
     test('it should render the medium size as the default if no size is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" id="test-toggle-button" />`,
+        <template><Button @text="text toggle" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -118,7 +118,7 @@ module(
     });
     test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @size="small" id="test-toggle-button" />`,
+        <template><Button @text="text toggle" @size="small" id="test-toggle-button" /></template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -129,7 +129,7 @@ module(
 
     test('it should render with the correct aria-expanded attribute on the toggle element', async function (assert) {
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @isOpen={{true}} id="test-toggle-button" />`,
+        <template><Button @text="text toggle" @isOpen={{true}} id="test-toggle-button" /></template>,
       );
       assert.dom('#test-toggle-button').hasAttribute('aria-expanded', 'true');
     });
@@ -143,7 +143,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button id="test-toggle-button" />`,
+        <template><Button id="test-toggle-button" /></template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
@@ -157,7 +157,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @color="foo" id="test-toggle-button" />`,
+        <template><Button @text="text toggle" @color="foo" id="test-toggle-button" /></template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
@@ -171,7 +171,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Dropdown::Toggle::Button @text="text toggle" @size="foo" />`,
+        <template><Button @text="text toggle" @size="foo" /></template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.js b/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/dropdown/toggle/icon-test.js
rename to showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gjs
index d821501881a..aa41a1038da 100644
--- a/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.js
+++ b/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gjs
@@ -5,13 +5,8 @@
 
 import { module, skip, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  render,
-  resetOnerror,
-  settled,
-  setupOnerror,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { render, resetOnerror, settled, setupOnerror } from '@ember/test-helpers';
+import Icon from "@hashicorp/design-system-components/components/hds/dropdown/toggle/icon";
 
 module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,7 +19,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="toggle text" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="toggle text" id="test-toggle-icon" /></template>,
     );
     assert.dom('#test-toggle-icon').hasClass('hds-dropdown-toggle-icon');
   });
@@ -33,7 +28,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('if an @icon is declared the flight icon should render in the component', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="settings" @text="settings menu" id="test-toggle-icon" />`,
+      <template><Icon @icon="settings" @text="settings menu" id="test-toggle-icon" /></template>,
     );
     assert.dom('.hds-icon.hds-icon-settings').exists();
   });
@@ -42,7 +37,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('if an @imageSrc is declared and exists the image should render in the component', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" @imageSrc="/assets/images/avatar.png" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" @imageSrc="/assets/images/avatar.png" id="test-toggle-icon" /></template>,
     );
     assert.dom('img').exists();
   });
@@ -50,7 +45,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
   skip('if an @imageSrc is declared but does not exist, the flight icon should render in the component', async function (assert) {
     this.set('imageSrc', '/assets/images/avatar.png');
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" @imageSrc={{this.imageSrc}} id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" @imageSrc={{this.imageSrc}} id="test-toggle-icon" /></template>,
     );
     // we load the image dynamically to cover this usecase and also to prevent this test from intermittently failing for no obvious reason
     this.set('imageSrc', '/assets/images/avatar-broken.png');
@@ -63,13 +58,13 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render the chevron "down" by default', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" /></template>,
     );
     assert.dom('.hds-icon.hds-icon-chevron-down').exists();
   });
   test('toggle-icon renders no chevron when hasChevron is set to false', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" id="test-toggle-icon" @hasChevron={{false}} />`,
+      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" @hasChevron={{false}} /></template>,
     );
     assert.dom('.hds-icon.hds-icon-chevron-down').doesNotExist();
   });
@@ -78,7 +73,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render the medium size as the default if no size is declared', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" /></template>,
     );
     assert
       .dom('#test-toggle-icon')
@@ -86,7 +81,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" @size="small" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" @size="small" id="test-toggle-icon" /></template>,
     );
     assert
       .dom('#test-toggle-icon')
@@ -97,19 +92,19 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render with the correct aria attribute declared using the @text prop', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" /></template>,
     );
     assert.dom('#test-toggle-icon').hasAria('label', 'user menu');
   });
   test('it should render the user "avatar" image with the correct role', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" @imageSrc="/assets/images/avatar.png" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" @imageSrc="/assets/images/avatar.png" id="test-toggle-icon" /></template>,
     );
     assert.dom('#test-toggle-icon img').hasAttribute('role', 'presentation');
   });
   test('it should render with the correct aria-expanded attribute on the toggle element', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" @isOpen={{true}} id="test-toggle-icon" />`,
+      <template><Icon @icon="user" @text="user menu" @isOpen={{true}} id="test-toggle-icon" /></template>,
     );
     assert.dom('#test-toggle-icon').hasAttribute('aria-expanded', 'true');
   });
@@ -123,7 +118,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" id="test-toggle-icon" />`,
+      <template><Icon @icon="user" id="test-toggle-icon" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -136,7 +131,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Dropdown::Toggle::Icon @text="user menu" />`);
+    await render(<template><Icon @text="user menu" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -149,7 +144,7 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Dropdown::Toggle::Icon @icon="user" @text="user menu" @size="foo" />`,
+      <template><Icon @icon="user" @text="user menu" @size="foo" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/flyout/index-test.js b/showcase/tests/integration/components/hds/flyout/index-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/flyout/index-test.js
rename to showcase/tests/integration/components/hds/flyout/index-test.gjs
index d93e29c59a2..39678cd428e 100644
--- a/showcase/tests/integration/components/hds/flyout/index-test.js
+++ b/showcase/tests/integration/components/hds/flyout/index-test.gjs
@@ -4,19 +4,13 @@
  */
 
 import { module, test, skip } from 'qunit';
-import {
-  setupRenderingTest,
-  cleanupBodyOverflow,
-} from 'showcase/tests/helpers';
-import {
-  click,
-  render,
-  triggerKeyEvent,
-  resetOnerror,
-  setupOnerror,
-  settled,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest, cleanupBodyOverflow } from 'showcase/tests/helpers';
+import { click, render, triggerKeyEvent, resetOnerror, setupOnerror, settled } from '@ember/test-helpers';
+import Flyout from "@hashicorp/design-system-components/components/hds/flyout/index";
+import Button from "@hashicorp/design-system-components/components/hds/button/index";
+import { on } from "@ember/modifier";
+import set from "ember-set-helper/helpers/set";
+import Dropdown from "@hashicorp/design-system-components/components/hds/dropdown/index";
 
 module('Integration | Component | hds/flyout/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -28,7 +22,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('#test-flyout').hasClass('hds-flyout');
   });
@@ -37,14 +31,14 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should render the component with default size if no arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('#test-flyout').hasClass('hds-flyout--size-medium');
   });
 
   test('it should render the component with custom size if provided', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" @size="large" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" @size="large" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('#test-flyout').hasClass('hds-flyout--size-large');
   });
@@ -53,7 +47,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should render the component with an overlay element by default', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('.hds-flyout__overlay').isVisible();
   });
@@ -62,11 +56,11 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|>
+      <template><Flyout id="test-flyout" as |F|>
             <F.Header>Title</F.Header>
             <F.Body>Body</F.Body>
             <F.Footer>Footer</F.Footer>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('.hds-flyout').exists();
     assert.dom('.hds-flyout__header').exists();
@@ -81,9 +75,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it renders the title without icon, tagline, and description', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|>
+      <template><Flyout id="test-flyout" as |F|>
             <F.Header>Title</F.Header>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('.hds-flyout__title').exists();
     assert.dom('.hds-flyout__title').hasText('Title');
@@ -93,9 +87,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it renders the title with icon and tagline if provided', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|>
+      <template><Flyout id="test-flyout" as |F|>
             <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('.hds-flyout__title').exists();
     assert.dom('.hds-flyout__title').hasText('Tagline Title');
@@ -105,10 +99,10 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it renders the description if provided', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|>
+      <template><Flyout id="test-flyout" as |F|>
             <F.Header>Title</F.Header>
             <F.Description>Description</F.Description>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('.hds-flyout__title').exists();
     assert.dom('.hds-flyout__title').hasText('Title');
@@ -120,9 +114,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it renders the title as an h1', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|>
+      <template><Flyout id="test-flyout" as |F|>
             <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('.hds-flyout__title').hasTagName('h1');
   });
@@ -131,13 +125,13 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should always render the "dismiss" button', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('button.hds-flyout__dismiss').exists();
   });
   test('it should close the flyout when the "dismiss" button is pressed', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('#test-flyout').isVisible();
     await click('button.hds-flyout__dismiss');
@@ -145,11 +139,11 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it should close the flyout when the "close" function is called', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |M|>
+      <template><Flyout id="test-flyout" as |M|>
             <M.Footer as |F|>
-              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
             </M.Footer>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('#test-flyout').isVisible();
     await click('#cancel-button');
@@ -157,7 +151,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it should close the flyout when the "esc" key is pressed', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
     );
     assert.dom('#test-flyout').isVisible();
     await triggerKeyEvent('.hds-flyout', 'keydown', 'Escape');
@@ -165,7 +159,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it should close the flyout when clicking outside', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
     );
     assert.dom('#test-flyout').isVisible();
     await click('.hds-flyout__overlay');
@@ -176,7 +170,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should close the flyout and remove the body overflow style - manual dismiss', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
     );
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -191,7 +185,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should close the flyout and remove the body overflow style - click outside', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
     );
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -206,12 +200,12 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should close the flyout and remove the body overflow style - dismiss via `F.close`', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |M|>
+      <template><Flyout id="test-flyout" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer as |F|>
-              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
             </M.Footer>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -234,16 +228,16 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     );
 
     await render(
-      hbs`
+      <template>
         {{#if this.isFlyoutRendered}}
-          <Hds::Flyout id="test-flyout" as |M|>
+          <Flyout id="test-flyout" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer>
-              <Hds::Button id="confirm-button" type="button" @text="Confirm" @color="primary" {{on "click" this.deactivateFlyout}} />
+              <Button id="confirm-button" type="button" @text="Confirm" @color="primary" {{on "click" this.deactivateFlyout}} />
             </M.Footer>
-          </Hds::Flyout>
+          </Flyout>
         {{/if}}
-      `,
+      </template>,
     );
 
     assert.dom('#test-flyout').doesNotExist();
@@ -271,19 +265,19 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     );
 
     await render(
-      hbs`
+      <template>
         {{#if this.isFlyoutRendered}}
-          <Hds::Flyout id="test-flyout" as |M|>
+          <Flyout id="test-flyout" as |M|>
             <M.Header>Title</M.Header>
             <M.Body>
               <form id="test-form" {{on "submit" this.deactivateFlyoutOnSubmit}} />
             </M.Body>
             <M.Footer>
-              <Hds::Button id="submit-button" form="test-form" type="submit" @text="Confirm" @color="primary" />
+              <Button id="submit-button" form="test-form" type="submit" @text="Confirm" @color="primary" />
             </M.Footer>
-          </Hds::Flyout>
+          </Flyout>
         {{/if}}
-      `,
+      </template>,
     );
 
     assert.dom('#test-flyout').doesNotExist();
@@ -304,7 +298,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it uses the title as name for the dialog', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     // the IDs are dynamically generated
     let titleElement = this.element.querySelector('.hds-flyout__title');
@@ -316,20 +310,20 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it sets initial focus on the dimiss button, as first focusable element', async function (assert) {
     await render(
-      hbs`<Hds::Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.dom('button.hds-flyout__dismiss').isFocused();
   });
 
   test('it returns focus to the element that initiated the open event, if is still in the DOM', async function (assert) {
     await render(
-      hbs`<button id="test-button" type="button" {{on "click" (set this "showFlyout" true)}}>open flyout</button>
+      <template><button id="test-button" type="button" {{on "click" (set this "showFlyout" true)}}>open flyout</button>
           {{#if this.showFlyout}}
-            <Hds::Flyout id="test-flyout" as |M|>
+            <Flyout id="test-flyout" as |M|>
               <M.Header>Title</M.Header>
-            </Hds::Flyout>
+            </Flyout>
           {{/if}}
-          `,
+          </template>,
     );
     await click('#test-button');
     assert.true(this.showFlyout);
@@ -340,16 +334,16 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   // this test is flaky in CI, so skipping for now
   skip('it returns focus to the `body` element, if the one that initiated the open event not anymore in the DOM', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown as |D|>
+      <template><Dropdown as |D|>
             <D.ToggleButton id="test-toggle" @text="open flyout" />
             <D.Interactive id="test-interactive" {{on "click" (set this "showFlyout" true)}}>open flyout</D.Interactive>
-          </Hds::Dropdown>
+          </Dropdown>
           {{#if this.showFlyout}}
-            <Hds::Flyout id="test-flyout" as |M|>
+            <Flyout id="test-flyout" as |M|>
               <M.Header>Title</M.Header>
-            </Hds::Flyout>
+            </Flyout>
           {{/if}}
-          `,
+          </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
@@ -360,16 +354,16 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it returns focus to a specific element if provided via`@returnFocusTo`', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown as |D|>
+      <template><Dropdown as |D|>
             <D.ToggleButton id="test-toggle" @text="open flyout" />
             <D.Interactive id="test-interactive" {{on "click" (set this "showFlyout" true)}}>open flyout</D.Interactive>
-          </Hds::Dropdown>
+          </Dropdown>
           {{#if this.showFlyout}}
-            <Hds::Flyout id="test-flyout" @returnFocusTo="test-toggle" as |M|>
+            <Flyout id="test-flyout" @returnFocusTo="test-toggle" as |M|>
               <M.Header>Title</M.Header>
-            </Hds::Flyout>
+            </Flyout>
           {{/if}}
-          `,
+          </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
@@ -384,9 +378,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     let opened = false;
     this.set('onOpen', () => (opened = true));
     await render(
-      hbs`<Hds::Flyout id="test-onopen-callback" @onOpen={{this.onOpen}} as |F|>
+      <template><Flyout id="test-onopen-callback" @onOpen={{this.onOpen}} as |F|>
             <F.Header>Title</F.Header>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     assert.dom('#test-onopen-callback').isVisible();
     await settled();
@@ -397,9 +391,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     let closed = false;
     this.set('onClose', () => (closed = true));
     await render(
-      hbs`<Hds::Flyout id="test-close-callback" @onClose={{this.onClose}} as |F|>
+      <template><Flyout id="test-close-callback" @onClose={{this.onClose}} as |F|>
             <F.Header>Title</F.Header>
-          </Hds::Flyout>`,
+          </Flyout></template>,
     );
     await click('button.hds-flyout__dismiss');
     assert.dom('#test-onclose-callback').isNotVisible();
@@ -417,7 +411,7 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Flyout @size="foo" as |F|><F.Header>Title</F.Header></Hds::Flyout>`,
+      <template><Flyout @size="foo" as |F|><F.Header>Title</F.Header></Flyout></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/form/character-count/index-test.js b/showcase/tests/integration/components/hds/form/character-count/index-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/form/character-count/index-test.js
rename to showcase/tests/integration/components/hds/form/character-count/index-test.gjs
index 423b0d0acda..79a22ab48b9 100644
--- a/showcase/tests/integration/components/hds/form/character-count/index-test.js
+++ b/showcase/tests/integration/components/hds/form/character-count/index-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, typeIn } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import CharacterCount from "@hashicorp/design-system-components/components/hds/form/character-count/index";
+import { on } from "@ember/modifier";
 
 module(
   'Integration | Component | hds/form/character-count/index',
@@ -19,7 +20,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::CharacterCount id="test-form-character-count" />`,
+        <template><CharacterCount id="test-form-character-count" /></template>,
       );
       assert
         .dom('#test-form-character-count')
@@ -27,7 +28,7 @@ module(
     });
     test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
       await render(
-        hbs`<Hds::Form::CharacterCount @contextualClass="my-class" id="test-form-character-count" />`,
+        <template><CharacterCount @contextualClass="my-class" id="test-form-character-count" /></template>,
       );
       assert.dom('#test-form-character-count').hasClass('my-class');
     });
@@ -36,7 +37,7 @@ module(
 
     test('it renders a character count with the correct "id" attribute if the @controlId argument is provided', async function (assert) {
       await render(
-        hbs`<Hds::Form::CharacterCount @controlId="my-control-id"/>`,
+        <template><CharacterCount @controlId="my-control-id" /></template>,
       );
       assert.dom('#character-count-my-control-id').exists();
     });
@@ -45,9 +46,9 @@ module(
 
     test('it renders a character count with the default predefined format', async function (assert) {
       await render(
-        hbs`
+        <template>
           <input id="input-1" value={{this.value}} {{on "input" this.update}} />
-          <Hds::Form::CharacterCount @value={{this.value}} @controlId="input-1" id="test-form-character-count"/>`,
+          <CharacterCount @value={{this.value}} @controlId="input-1" id="test-form-character-count" /></template>,
       );
       assert.dom('#test-form-character-count').hasText('0 characters entered');
 
@@ -56,9 +57,9 @@ module(
     });
     test('it renders a character count in the predefined format when only @maxLength is set', async function (assert) {
       await render(
-        hbs`
+        <template>
           <input id="input-max-length" value={{this.value}} {{on "input" this.update}} />
-          <Hds::Form::CharacterCount @value={{this.value}} @maxLength={{25}} @controlId="input-max-length" id="test-form-character-count"/>`,
+          <CharacterCount @value={{this.value}} @maxLength={{25}} @controlId="input-max-length" id="test-form-character-count" /></template>,
       );
       assert.dom('#test-form-character-count').hasText('25 characters allowed');
 
@@ -87,9 +88,9 @@ module(
     });
     test('it renders a character count in the predefined format when only @minLength is set', async function (assert) {
       await render(
-        hbs`
+        <template>
           <input id="input-min-length" value={{this.value}} {{on "input" this.update}} />
-          <Hds::Form::CharacterCount @value={{this.value}} @minLength={{3}} @controlId="input-min-length" id="test-form-character-count"/>`,
+          <CharacterCount @value={{this.value}} @minLength={{3}} @controlId="input-min-length" id="test-form-character-count" /></template>,
       );
       assert.dom('#test-form-character-count').hasText('3 characters required');
 
@@ -108,9 +109,9 @@ module(
     });
     test('it renders a character count in the predefined format when both @minLength and @maxLength are set', async function (assert) {
       await render(
-        hbs`
+        <template>
           <input id="input-minmax-length" value={{this.value}} {{on "input" this.update}} />
-          <Hds::Form::CharacterCount @value={{this.value}} @minLength={{3}} @maxLength={{25}} @controlId="input-minmax-length" id="test-form-character-count"/>`,
+          <CharacterCount @value={{this.value}} @minLength={{3}} @maxLength={{25}} @controlId="input-minmax-length" id="test-form-character-count" /></template>,
       );
       assert.dom('#test-form-character-count').hasText('3 characters required');
 
@@ -132,15 +133,15 @@ module(
     test('it renders a character count in custom format', async function (assert) {
       this.set('value', 'with custom content');
       await render(
-        hbs`
+        <template>
         <input type="hidden" value={{this.value}} id="input-2" {{on "input" this.update}} />
-        <Hds::Form::CharacterCount @value={{this.value}} @minLength={{20}} @maxLength={{40}} @controlId="input-2" id="test-form-character-count" as |CC|>
+        <CharacterCount @value={{this.value}} @minLength={{20}} @maxLength={{40}} @controlId="input-2" id="test-form-character-count" as |CC|>
           maxLength {{CC.maxLength}}
           minLength {{CC.minLength}}
           remaining {{CC.remaining}}
           shortfall {{CC.shortfall}}
           currentLength {{CC.currentLength}}
-        </Hds::Form::CharacterCount>`,
+        </CharacterCount></template>,
       );
       assert
         .dom('#test-form-character-count')
@@ -154,9 +155,9 @@ module(
     test('it should present the character count as a live region', async function (assert) {
       this.set('value', 'with default content');
       await render(
-        hbs`
-          <input type="hidden" value={{this.value}} id="input-3"/>
-          <Hds::Form::CharacterCount @maxLength={{40}} @controlId="input-3" id="test-form-character-count"/>`,
+        <template>
+          <input type="hidden" value={{this.value}} id="input-3" />
+          <CharacterCount @maxLength={{40}} @controlId="input-3" id="test-form-character-count" /></template>,
       );
       assert
         .dom('#test-form-character-count')
diff --git a/showcase/tests/integration/components/hds/form/checkbox/base-test.js b/showcase/tests/integration/components/hds/form/checkbox/base-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/form/checkbox/base-test.js
rename to showcase/tests/integration/components/hds/form/checkbox/base-test.gjs
index 49a818cdbc3..758c2e65abe 100644
--- a/showcase/tests/integration/components/hds/form/checkbox/base-test.js
+++ b/showcase/tests/integration/components/hds/form/checkbox/base-test.gjs
@@ -6,18 +6,18 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/checkbox/base";
 
 module('Integration | Component | hds/form/checkbox/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Base id="test-form-checkbox" />`);
+    await render(<template><Base id="test-form-checkbox" /></template>);
     assert.dom('#test-form-checkbox').hasClass('hds-form-checkbox');
   });
   test('it should convert the `indeterminate` attribute into a property', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Base id="test-form-checkbox" indeterminate={{true}} />`,
+      <template><Base id="test-form-checkbox" indeterminate={{true}} /></template>,
     );
     assert.dom('#test-form-checkbox').doesNotHaveAttribute('indeterminate');
     assert.dom('#test-form-checkbox').hasProperty('indeterminate', true);
diff --git a/showcase/tests/integration/components/hds/form/checkbox/field-test.js b/showcase/tests/integration/components/hds/form/checkbox/field-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/form/checkbox/field-test.js
rename to showcase/tests/integration/components/hds/form/checkbox/field-test.gjs
index 2cb9bafb057..f92324d163a 100644
--- a/showcase/tests/integration/components/hds/form/checkbox/field-test.js
+++ b/showcase/tests/integration/components/hds/form/checkbox/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/checkbox/field";
 
 module('Integration | Component | hds/form/checkbox/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,21 +16,21 @@ module('Integration | Component | hds/form/checkbox/field', function (hooks) {
   });
 
   test('it should render the component with the appropriate CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__control').exists();
   });
 
   // VALUE
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Field @value="abc123" />`);
+    await render(<template><Field @value="abc123" /></template>);
     assert.dom('input').hasValue('abc123');
   });
 
   // ID
 
   test('it should render the input with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Field @id="my-input" />`);
+    await render(<template><Field @id="my-input" /></template>);
     assert.dom('input').hasAttribute('id', 'my-input');
   });
 
@@ -38,11 +38,11 @@ module('Integration | Component | hds/form/checkbox/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Field checked="checked" as |F|>
+      <template><Field checked="checked" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Checkbox::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -51,18 +51,18 @@ module('Integration | Component | hds/form/checkbox/field', function (hooks) {
     assert.dom('.hds-form-field__error').exists();
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Checkbox::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector('.hds-form-field__control input');
diff --git a/showcase/tests/integration/components/hds/form/checkbox/group-test.js b/showcase/tests/integration/components/hds/form/checkbox/group-test.gjs
similarity index 90%
rename from showcase/tests/integration/components/hds/form/checkbox/group-test.js
rename to showcase/tests/integration/components/hds/form/checkbox/group-test.gjs
index 71ccf74013c..551d00a6e6f 100644
--- a/showcase/tests/integration/components/hds/form/checkbox/group-test.js
+++ b/showcase/tests/integration/components/hds/form/checkbox/group-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Group from "@hashicorp/design-system-components/components/hds/form/checkbox/group";
 
 module('Integration | Component | hds/form/checkbox/group', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
   });
 
   test('it should render the component with an appropriate CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Group id="test-form-checkbox" />`);
+    await render(<template><Group id="test-form-checkbox" /></template>);
     assert.dom('#test-form-checkbox').hasClass('hds-form-group');
   });
 
@@ -24,7 +24,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
 
   test('it renders the yielded contextual components and subcomponents', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.CheckboxField checked="checked" @value="abc123" as |F|>
@@ -33,7 +33,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
               <F.Error>This is the control error</F.Error>
             </G.CheckboxField>
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::Checkbox::Group>`,
+          </Group></template>,
     );
     assert.dom('.hds-form-group__legend').exists();
     assert.dom('.hds-form-group__legend').hasText('This is the legend');
@@ -63,14 +63,14 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
     assert.dom('.hds-form-group__error').hasText('This is the group error');
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Checkbox::Group />`);
+    await render(<template><Group /></template>);
     assert.dom('.hds-form-group__legend').doesNotExist();
     assert.dom('.hds-form-group__helper-text').doesNotExist();
     assert.dom('.hds-form-group__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.CheckboxField checked="checked" @value="abc123" as |F|>
@@ -79,7 +79,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
               <F.Error>This is the control error</F.Error>
             </G.CheckboxField>
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::Checkbox::Group>`,
+          </Group></template>,
     );
     // the IDs are dynamically generated
     let groupHelperText = this.element.querySelector(
@@ -104,7 +104,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements even when Error is conditionally rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.CheckboxField checked="checked" @value="abc123" as |F|>
@@ -115,7 +115,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
             {{#if this.showErrors}}
               <G.Error>This is the group error</G.Error>
             {{/if}}
-          </Hds::Form::Checkbox::Group>`,
+          </Group></template>,
     );
 
     this.set('showErrors', true);
@@ -146,7 +146,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
 
   test('it renders the defined name on all controls within a group', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Group @name="datacenter-demo" as |G|>
+      <template><Group @name="datacenter-demo" as |G|>
             <G.Legend>Choose datacenter</G.Legend>
             <G.CheckboxField data-test="first-control" as |F|>
               <F.Label>NYC1</F.Label>
@@ -154,7 +154,7 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
             <G.CheckboxField data-test="second-control" as |F|>
               <F.Label>DC1</F.Label>
             </G.CheckboxField>
-          </Hds::Form::Checkbox::Group>`,
+          </Group></template>,
     );
     assert
       .dom('[data-test="first-control"]')
@@ -168,12 +168,12 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
 
   test('it should append an indicator to the legend text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Group @isRequired={{true}} as |G|>
+      <template><Group @isRequired={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.CheckboxField checked="checked" @value="abc123" as |F|>
               <F.Label>This is the control label</F.Label>
             </G.CheckboxField>
-          </Hds::Form::Checkbox::Group>`,
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
@@ -181,12 +181,12 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Checkbox::Group @isOptional={{true}} as |G|>
+      <template><Group @isOptional={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.CheckboxField checked="checked" @value="abc123" as |F|>
               <F.Label>This is the control label</F.Label>
             </G.CheckboxField>
-          </Hds::Form::Checkbox::Group>`,
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/divider/index-test.js b/showcase/tests/integration/components/hds/form/divider/index-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/form/divider/index-test.js
rename to showcase/tests/integration/components/hds/form/divider/index-test.gjs
index c9cc49e5423..b4beb431501 100644
--- a/showcase/tests/integration/components/hds/form/divider/index-test.js
+++ b/showcase/tests/integration/components/hds/form/divider/index-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Separator from "@hashicorp/design-system-components/components/hds/form/separator/index";
 
 module('Integration | Component | hds/form/separator/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Separator id="test-form-separator" />`);
+    await render(<template><Separator id="test-form-separator" /></template>);
     assert.dom('#test-form-separator').hasClass('hds-form__separator');
   });
 
@@ -20,7 +20,7 @@ module('Integration | Component | hds/form/separator/index', function (hooks) {
 
   // isFullWidth
   test(`it should have the default max-width if no @isFullWidth prop is declared`, async function (assert) {
-    await render(hbs`<Hds::Form::Separator id="test-form-separator" />`);
+    await render(<template><Separator id="test-form-separator" /></template>);
     assert
       .dom('#test-form-separator')
       .doesNotHaveClass('hds-form-content--is-full-width');
@@ -28,7 +28,7 @@ module('Integration | Component | hds/form/separator/index', function (hooks) {
 
   test(`if @isFullWidth is true, it should not have a max-width set`, async function (assert) {
     await render(
-      hbs`<Hds::Form::Separator id="test-form-separator" @isFullWidth={{true}} />`,
+      <template><Separator id="test-form-separator" @isFullWidth={{true}} /></template>,
     );
     assert
       .dom('#test-form-separator')
diff --git a/showcase/tests/integration/components/hds/form/error/index-test.js b/showcase/tests/integration/components/hds/form/error/index-test.gjs
similarity index 70%
rename from showcase/tests/integration/components/hds/form/error/index-test.js
rename to showcase/tests/integration/components/hds/form/error/index-test.gjs
index 5e368152e23..49366530c9a 100644
--- a/showcase/tests/integration/components/hds/form/error/index-test.js
+++ b/showcase/tests/integration/components/hds/form/error/index-test.gjs
@@ -6,18 +6,18 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Error0 from "@hashicorp/design-system-components/components/hds/form/error/index";
 
 module('Integration | Component | hds/form/error/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Error id="test-form-error" />`);
+    await render(<template><Error0 id="test-form-error" /></template>);
     assert.dom('#test-form-error').hasClass('hds-form-error');
   });
   test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
     await render(
-      hbs`<Hds::Form::Error @contextualClass="my-class" id="test-form-error" />`,
+      <template><Error0 @contextualClass="my-class" id="test-form-error" /></template>,
     );
     assert.dom('#test-form-error').hasClass('my-class');
   });
@@ -26,13 +26,13 @@ module('Integration | Component | hds/form/error/index', function (hooks) {
 
   test('it renders an error with the defined text', async function (assert) {
     await render(
-      hbs`<Hds::Form::Error id="test-form-error">This is the error</Hds::Form::Error>`,
+      <template><Error0 id="test-form-error">This is the error</Error0></template>,
     );
     assert.dom('#test-form-error').hasText('This is the error');
   });
   test('it renders an error with the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Form::Error id="test-form-error"><pre>This is an HTML element inside the error</pre></Hds::Form::Error>`,
+      <template><Error0 id="test-form-error"><pre>This is an HTML element inside the error</pre></Error0></template>,
     );
     assert.dom('#test-form-error pre').exists();
     assert
@@ -41,7 +41,7 @@ module('Integration | Component | hds/form/error/index', function (hooks) {
   });
   test('it renders multiple error messages as contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Error id="test-form-error" as |E|><E.Message>First error message</E.Message><E.Message>Second error message</E.Message></Hds::Form::Error>`,
+      <template><Error0 id="test-form-error" as |E|><E.Message>First error message</E.Message><E.Message>Second error message</E.Message></Error0></template>,
     );
     assert
       .dom('#test-form-error .hds-form-error__message')
@@ -55,7 +55,7 @@ module('Integration | Component | hds/form/error/index', function (hooks) {
 
   test('it renders an error with the correct "id" attribute if the @controlId argument is provided', async function (assert) {
     await render(
-      hbs`<Hds::Form::Error @controlId="my-control-id">This is the error</Hds::Form::Error>`,
+      <template><Error0 @controlId="my-control-id">This is the error</Error0></template>,
     );
     assert.dom('#error-my-control-id').exists();
   });
diff --git a/showcase/tests/integration/components/hds/form/field/index-test.js b/showcase/tests/integration/components/hds/form/field/index-test.gjs
similarity index 87%
rename from showcase/tests/integration/components/hds/form/field/index-test.js
rename to showcase/tests/integration/components/hds/form/field/index-test.gjs
index 945ffa75f29..7e8ce6aa667 100644
--- a/showcase/tests/integration/components/hds/form/field/index-test.js
+++ b/showcase/tests/integration/components/hds/form/field/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/field/index";
 
 module('Integration | Component | hds/form/field/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should render the component with a CSS class provided via the @contextualClass argument', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @contextualClass="my-class" id="test-form-field" />`,
+      <template><Field @contextualClass="my-class" id="test-form-field" /></template>,
     );
     assert.dom('#test-form-field').hasClass('my-class');
   });
@@ -26,17 +26,17 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should render the correct CSS layout class depending on the @layout prop', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="vertical" id="test-form-field" />`,
+      <template><Field @layout="vertical" id="test-form-field" /></template>,
     );
     assert.dom('#test-form-field').hasClass('hds-form-field--layout-vertical');
   });
 
   test('it should render the correct DOM order when the @layout prop has value vertical', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="vertical" id="test-form-field" as |F|>
+      <template><Field @layout="vertical" id="test-form-field" as |F|>
         <F.Label>This is the label</F.Label>
         <F.HelperText>This is the helper text</F.HelperText>
-      </Hds::Form::Field>`,
+      </Field></template>,
     );
     let control = this.element.querySelector(
       '#test-form-field .hds-form-field__control',
@@ -49,10 +49,10 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should render the correct DOM order when the @layout prop has value flag', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="flag" id="test-form-field" as |F|>
+      <template><Field @layout="flag" id="test-form-field" as |F|>
         <F.Label>This is the label</F.Label>
         <F.HelperText>This is the helper text</F.HelperText>
-      </Hds::Form::Field>`,
+      </Field></template>,
     );
     let control = this.element.querySelector(
       '#test-form-field .hds-form-field__control',
@@ -67,13 +67,13 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="vertical" id="test-form-field" as |F|>
+      <template><Field @layout="vertical" id="test-form-field" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Control>This is a mock control</F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Field>`,
+        </Field></template>,
     );
     assert.dom('#test-form-field .hds-form-field__label').exists();
     assert.dom('.hds-form-field__label').hasText('This is the label');
@@ -89,13 +89,13 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="vertical" id="test-form-field" as |F|>
+      <template><Field @layout="vertical" id="test-form-field" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Control><pre id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector(
@@ -121,13 +121,13 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements with a custom @id', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="vertical" id="test-form-field" @id="my-custom-id" as |F|>
+      <template><Field @layout="vertical" id="test-form-field" @id="my-custom-id" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Control><pre id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Field>`,
+        </Field></template>,
     );
     let controlId = 'my-custom-id';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
@@ -152,13 +152,13 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
   });
   test('it provides all the ID relations between the elements and allows extra `aria-describedby` attributes', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @layout="vertical" id="test-form-field" @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @layout="vertical" id="test-form-field" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Control><pre id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector(
@@ -187,18 +187,18 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should append an indicator to the label text when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @isRequired={{true}} as |F|>
+      <template><Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Field @isOptional={{true}} as |F|>
+      <template><Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
@@ -213,7 +213,7 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Form::Field @layout="foo" />`);
+    await render(<template><Field @layout="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/form/fieldset/index-test.js b/showcase/tests/integration/components/hds/form/fieldset/index-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/form/fieldset/index-test.js
rename to showcase/tests/integration/components/hds/form/fieldset/index-test.gjs
index 580ab2f2941..3beebd48157 100644
--- a/showcase/tests/integration/components/hds/form/fieldset/index-test.js
+++ b/showcase/tests/integration/components/hds/form/fieldset/index-test.gjs
@@ -6,17 +6,17 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Fieldset from "@hashicorp/design-system-components/components/hds/form/fieldset/index";
 
 module('Integration | Component | hds/form/fieldset/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with an appropriate CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Fieldset id="test-form-fieldset" />`);
+    await render(<template><Fieldset id="test-form-fieldset" /></template>);
     assert.dom('#test-form-fieldset').hasClass('hds-form-group');
   });
   test('it renders the element as <fieldset>', async function (assert) {
-    await render(hbs`<Hds::Form::Fieldset id="test-form-fieldset" />`);
+    await render(<template><Fieldset id="test-form-fieldset" /></template>);
     assert.dom('#test-form-fieldset').hasTagName('fieldset');
   });
 
@@ -24,7 +24,7 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
 
   test('it should render the correct CSS layout class depending on the @layout prop', async function (assert) {
     await render(
-      hbs`<Hds::Form::Fieldset @layout="vertical" id="test-form-fieldset" />`,
+      <template><Fieldset @layout="vertical" id="test-form-fieldset" /></template>,
     );
     assert
       .dom('#test-form-fieldset')
@@ -35,12 +35,12 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Fieldset @layout="vertical" id="test-form-fieldset" as |F|>
+      <template><Fieldset @layout="vertical" id="test-form-fieldset" as |F|>
           <F.Legend>This is the legend</F.Legend>
           <F.HelperText>This is the group helper text</F.HelperText>
           <F.Control><pre class="hds-form-group__control-field">This is a mock control field</pre></F.Control>
           <F.Error>This is the group error</F.Error>
-        </Hds::Form::Fieldset>`,
+        </Fieldset></template>,
     );
     assert.dom('#test-form-fieldset .hds-form-group__legend').exists();
     assert.dom('.hds-form-group__legend').hasText('This is the legend');
@@ -57,12 +57,12 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
   });
   test('it automatically provides IDs for helper text and error', async function (assert) {
     await render(
-      hbs`<Hds::Form::Fieldset @layout="vertical" as |F|>
+      <template><Fieldset @layout="vertical" as |F|>
           <F.Legend>This is the legend</F.Legend>
           <F.HelperText>This is the group helper text</F.HelperText>
           <F.Control><pre class="hds-form-group__control" id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
           <F.Error>This is the group error</F.Error>
-        </Hds::Form::Fieldset>`,
+        </Fieldset></template>,
     );
     // the fieldset ID is dynamically generated
     let fieldset = this.element.querySelector('fieldset');
@@ -79,18 +79,18 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
 
   test('it should append an indicator to the legend text when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Fieldset @isRequired={{true}} as |F|>
+      <template><Fieldset @isRequired={{true}} as |F|>
           <F.Legend>This is the legend</F.Legend>
-        </Hds::Form::Fieldset>`,
+        </Fieldset></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Fieldset @isOptional={{true}} as |F|>
+      <template><Fieldset @isOptional={{true}} as |F|>
           <F.Legend>This is the legend</F.Legend>
-        </Hds::Form::Fieldset>`,
+        </Fieldset></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/file-input/base-test.js b/showcase/tests/integration/components/hds/form/file-input/base-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/form/file-input/base-test.js
rename to showcase/tests/integration/components/hds/form/file-input/base-test.gjs
index b989b85d5fa..162b349a901 100644
--- a/showcase/tests/integration/components/hds/form/file-input/base-test.js
+++ b/showcase/tests/integration/components/hds/form/file-input/base-test.gjs
@@ -6,19 +6,19 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/file-input/base";
 
 module('Integration | Component | hds/form/file-input/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::FileInput::Base id="test-form-file-input" />`);
+    await render(<template><Base id="test-form-file-input" /></template>);
     assert.dom('#test-form-file-input').hasClass('hds-form-file-input');
   });
 
   test('it should set aria-describedby and id arguments if pass @id or @ariaDescribedBy', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Base @id="custom-id" @ariaDescribedBy="custom-description-id" />`,
+      <template><Base @id="custom-id" @ariaDescribedBy="custom-description-id" /></template>,
     );
     assert
       .dom('#custom-id')
diff --git a/showcase/tests/integration/components/hds/form/file-input/field-test.js b/showcase/tests/integration/components/hds/form/file-input/field-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/form/file-input/field-test.js
rename to showcase/tests/integration/components/hds/form/file-input/field-test.gjs
index 5efbe685d44..7f5880bf5c9 100644
--- a/showcase/tests/integration/components/hds/form/file-input/field-test.js
+++ b/showcase/tests/integration/components/hds/form/file-input/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/file-input/field";
 
 module('Integration | Component | hds/form/file-input/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,14 +16,14 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
   });
 
   test('it should render the component with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::FileInput::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__control').exists();
   });
 
   // ID
 
   test('it should render the input with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::FileInput::Field @id="my-input" />`);
+    await render(<template><Field @id="my-input" /></template>);
     assert.dom('input').hasAttribute('id', 'my-input');
   });
 
@@ -31,11 +31,11 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Field as |F|>
+      <template><Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::FileInput::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -44,7 +44,7 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
   });
 
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::FileInput::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__error').doesNotExist();
@@ -52,11 +52,11 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::FileInput::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector('.hds-form-field__control input');
@@ -77,13 +77,13 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::FileInput::Field>`,
+        </Field></template>,
     );
 
     this.set('showErrors', true);
@@ -111,9 +111,9 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Field @isRequired={{true}} as |F|>
+      <template><Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::FileInput::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -122,9 +122,9 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Field @isOptional={{true}} as |F|>
+      <template><Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::FileInput::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
@@ -132,9 +132,9 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      hbs`<Hds::Form::FileInput::Field required as |F|>
+      <template><Field required as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::FileInput::Field>`,
+          </Field></template>,
     );
     assert.dom('input').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();
diff --git a/showcase/tests/integration/components/hds/form/footer/index-test.js b/showcase/tests/integration/components/hds/form/footer/index-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/form/footer/index-test.js
rename to showcase/tests/integration/components/hds/form/footer/index-test.gjs
index f05d3e7c66b..f03519a2090 100644
--- a/showcase/tests/integration/components/hds/form/footer/index-test.js
+++ b/showcase/tests/integration/components/hds/form/footer/index-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Footer from "@hashicorp/design-system-components/components/hds/form/footer/index";
 
 module('Integration | Component | hds/form/footer/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Footer id="test-form-footer" />`);
+    await render(<template><Footer id="test-form-footer" /></template>);
     assert.dom('#test-form-footer').hasClass('hds-form__footer');
   });
 
@@ -20,7 +20,7 @@ module('Integration | Component | hds/form/footer/index', function (hooks) {
 
   test('it should yield the Footer children', async function (assert) {
     await render(
-      hbs`<Hds::Form::Footer id="test-form-footer" as |Footer|><pre>test</pre></Hds::Form::Footer>`,
+      <template><Footer id="test-form-footer" as |Footer|><pre>test</pre></Footer></template>,
     );
     assert
       .dom('#test-form-footer > pre')
@@ -33,7 +33,7 @@ module('Integration | Component | hds/form/footer/index', function (hooks) {
   // isFullWidth
 
   test(`it should have the default max-width if no @isFullWidth prop is declared`, async function (assert) {
-    await render(hbs`<Hds::Form::Footer id="test-form-footer" />`);
+    await render(<template><Footer id="test-form-footer" /></template>);
     assert
       .dom('#test-form-footer')
       .doesNotHaveClass('hds-form-content--is-full-width');
@@ -41,7 +41,7 @@ module('Integration | Component | hds/form/footer/index', function (hooks) {
 
   test(`if @isFullWidth is true, it should not have a max-width set`, async function (assert) {
     await render(
-      hbs`<Hds::Form::Footer id="test-form-footer" @isFullWidth={{true}} />`,
+      <template><Footer id="test-form-footer" @isFullWidth={{true}} /></template>,
     );
     assert.dom('#test-form-footer').hasClass('hds-form-content--is-full-width');
   });
diff --git a/showcase/tests/integration/components/hds/form/header/description/index-test.js b/showcase/tests/integration/components/hds/form/header/description/index-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/form/header/description/index-test.js
rename to showcase/tests/integration/components/hds/form/header/description/index-test.gjs
index a90ff7fd548..2e2c4e452c9 100644
--- a/showcase/tests/integration/components/hds/form/header/description/index-test.js
+++ b/showcase/tests/integration/components/hds/form/header/description/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Description from "@hashicorp/design-system-components/components/hds/form/header/description";
 
 module(
   'Integration | Component | hds/form/header/description/index',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Description id="test-form-description" />`,
+        <template><Description id="test-form-description" /></template>,
       );
       assert
         .dom('#test-form-description')
@@ -26,7 +26,7 @@ module(
 
     test('it should render the yielded content', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Description id="test-form-description"><pre>test</pre></Hds::Form::Header::Description>`,
+        <template><Description id="test-form-description"><pre>test</pre></Description></template>,
       );
       assert.dom('#test-form-description > pre').exists().hasText('test');
     });
diff --git a/showcase/tests/integration/components/hds/form/header/index-test.js b/showcase/tests/integration/components/hds/form/header/index-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/form/header/index-test.js
rename to showcase/tests/integration/components/hds/form/header/index-test.gjs
index 7f379bd96ce..8fe9b9f015c 100644
--- a/showcase/tests/integration/components/hds/form/header/index-test.js
+++ b/showcase/tests/integration/components/hds/form/header/index-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from "@hashicorp/design-system-components/components/hds/form/header/index";
 
 module('Integration | Component | hds/form/header/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Header id="test-form-header" />`);
+    await render(<template><Header id="test-form-header" /></template>);
     assert.dom('#test-form-header').hasClass('hds-form__header');
   });
 
@@ -20,7 +20,7 @@ module('Integration | Component | hds/form/header/index', function (hooks) {
 
   test('it should yield the Title and Description children', async function (assert) {
     await render(
-      hbs`<Hds::Form::Header id="test-form-header" as |Header|><Header.Title /><Header.Description /></Hds::Form::Header>`,
+      <template><Header id="test-form-header" as |Header|><Header.Title /><Header.Description /></Header></template>,
     );
     assert
       .dom('#test-form-header > .hds-form__header-title')
@@ -34,7 +34,7 @@ module('Integration | Component | hds/form/header/index', function (hooks) {
 
   // isFullWidth
   test(`it should have the default max-width if no @isFullWidth prop is declared`, async function (assert) {
-    await render(hbs`<Hds::Form::Header id="test-form-header" />`);
+    await render(<template><Header id="test-form-header" /></template>);
     assert
       .dom('#test-form-header')
       .doesNotHaveClass('hds-form-content--is-full-width');
@@ -42,7 +42,7 @@ module('Integration | Component | hds/form/header/index', function (hooks) {
 
   test(`if @isFullWidth is true, it should not have a max-width set`, async function (assert) {
     await render(
-      hbs`<Hds::Form::Header id="test-form-header" @isFullWidth={{true}} />`,
+      <template><Header id="test-form-header" @isFullWidth={{true}} /></template>,
     );
     assert.dom('#test-form-header').hasClass('hds-form-content--is-full-width');
   });
diff --git a/showcase/tests/integration/components/hds/form/header/title/index-test.js b/showcase/tests/integration/components/hds/form/header/title/index-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/form/header/title/index-test.js
rename to showcase/tests/integration/components/hds/form/header/title/index-test.gjs
index b0310d090bc..487a8c0b0ff 100644
--- a/showcase/tests/integration/components/hds/form/header/title/index-test.js
+++ b/showcase/tests/integration/components/hds/form/header/title/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Title from "@hashicorp/design-system-components/components/hds/form/header/title";
 
 module(
   'Integration | Component | hds/form/header/title/index',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Title id="test-form-header-title" />`,
+        <template><Title id="test-form-header-title" /></template>,
       );
       assert.dom('#test-form-header-title').hasClass('hds-form__header-title');
     });
@@ -23,7 +23,7 @@ module(
     // CONTENT
     test('it should render the yielded content', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Title id="test-form-header-title"><pre>test</pre></Hds::Form::Header::Title>`,
+        <template><Title id="test-form-header-title"><pre>test</pre></Title></template>,
       );
       assert.dom('#test-form-header-title > pre').exists().hasText('test');
     });
@@ -33,14 +33,14 @@ module(
     // Tag
     test('it should render the component using the default div tag', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Title id="test-form-header-title" />`,
+        <template><Title id="test-form-header-title" /></template>,
       );
       assert.dom('#test-form-header-title').hasTagName('div');
     });
 
     test('it should render the component using the specified tag', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Title id="test-form-header-title" @tag="h2" />`,
+        <template><Title id="test-form-header-title" @tag="h2" /></template>,
       );
       assert.dom('#test-form-header-title').hasTagName('h2');
     });
@@ -48,7 +48,7 @@ module(
     // Size
     test('it should render the component with the default size', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Title id="test-form-header-title" />`,
+        <template><Title id="test-form-header-title" /></template>,
       );
       assert
         .dom('#test-form-header-title')
@@ -57,7 +57,7 @@ module(
 
     test('it should render the component with a specified size', async function (assert) {
       await render(
-        hbs`<Hds::Form::Header::Title id="test-form-header-title" @size="300" />`,
+        <template><Title id="test-form-header-title" @size="300" /></template>,
       );
       assert
         .dom('#test-form-header-title')
@@ -75,7 +75,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
 
-      await render(hbs`<Hds::Form::Header::Title @tag="section" />`);
+      await render(<template><Title @tag="section" /></template>);
 
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/form/helper-text/index-test.js b/showcase/tests/integration/components/hds/form/helper-text/index-test.gjs
similarity index 70%
rename from showcase/tests/integration/components/hds/form/helper-text/index-test.js
rename to showcase/tests/integration/components/hds/form/helper-text/index-test.gjs
index 2a987d8df99..d9e402cadd3 100644
--- a/showcase/tests/integration/components/hds/form/helper-text/index-test.js
+++ b/showcase/tests/integration/components/hds/form/helper-text/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import HelperText from "@hashicorp/design-system-components/components/hds/form/helper-text/index";
 
 module(
   'Integration | Component | hds/form/helper-text/index',
@@ -14,12 +14,12 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`<Hds::Form::HelperText id="test-form-helper-text" />`);
+      await render(<template><HelperText id="test-form-helper-text" /></template>);
       assert.dom('#test-form-helper-text').hasClass('hds-form-helper-text');
     });
     test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
       await render(
-        hbs`<Hds::Form::HelperText @contextualClass="my-class" id="test-form-helper-text" />`,
+        <template><HelperText @contextualClass="my-class" id="test-form-helper-text" /></template>,
       );
       assert.dom('#test-form-helper-text').hasClass('my-class');
     });
@@ -28,13 +28,13 @@ module(
 
     test('it renders a helper text with the defined text', async function (assert) {
       await render(
-        hbs`<Hds::Form::HelperText id="test-form-helper-text">This is the helper text</Hds::Form::HelperText>`,
+        <template><HelperText id="test-form-helper-text">This is the helper text</HelperText></template>,
       );
       assert.dom('#test-form-helper-text').hasText('This is the helper text');
     });
     test('it renders a helper text with the yielded content', async function (assert) {
       await render(
-        hbs`<Hds::Form::HelperText id="test-form-helper-text"><pre>This is an HTML element inside the helper text</pre></Hds::Form::HelperText>`,
+        <template><HelperText id="test-form-helper-text"><pre>This is an HTML element inside the helper text</pre></HelperText></template>,
       );
       assert.dom('#test-form-helper-text > pre').exists();
       assert
@@ -46,7 +46,7 @@ module(
 
     test('it renders a helper text with the correct "id" attribute if the @controlId argument is provided', async function (assert) {
       await render(
-        hbs`<Hds::Form::HelperText @controlId="my-control-id">This is the helper text</Hds::Form::HelperText>`,
+        <template><HelperText @controlId="my-control-id">This is the helper text</HelperText></template>,
       );
       assert.dom('#helper-text-my-control-id').exists();
     });
diff --git a/showcase/tests/integration/components/hds/form/index-test.js b/showcase/tests/integration/components/hds/form/index-test.gjs
similarity index 88%
rename from showcase/tests/integration/components/hds/form/index-test.js
rename to showcase/tests/integration/components/hds/form/index-test.gjs
index d54dfd194de..90d4a6202df 100644
--- a/showcase/tests/integration/components/hds/form/index-test.js
+++ b/showcase/tests/integration/components/hds/form/index-test.gjs
@@ -6,15 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-import { AVAILABLE_TAGS } from '@hashicorp/design-system-components/components/hds/form/index';
+import Form, { AVAILABLE_TAGS } from '@hashicorp/design-system-components/components/hds/form/index';
 
 module('Integration | Component | hds/form/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form id="test-form" />`);
+    await render(<template><Form id="test-form" /></template>);
     assert.dom('#test-form').hasClass('hds-form');
   });
 
@@ -23,12 +21,12 @@ module('Integration | Component | hds/form/index', function (hooks) {
   // Tag
 
   test('it should render the component using a form tag by default', async function (assert) {
-    await render(hbs`<Hds::Form id="test-form-component" />`);
+    await render(<template><Form id="test-form-component" /></template>);
     assert.dom('#test-form-component').hasTagName('form');
   });
 
   test('it should render the component using a div tag if specified in the @tag prop', async function (assert) {
-    await render(hbs`<Hds::Form id="test-form-component" @tag="div" />`);
+    await render(<template><Form id="test-form-component" @tag="div" /></template>);
     assert.dom('#test-form-component').hasTagName('div');
   });
 
@@ -36,7 +34,7 @@ module('Integration | Component | hds/form/index', function (hooks) {
 
   test('it should set an inline style for the section max-width custom property', async function (assert) {
     await render(
-      hbs`<Hds::Form id="test-form-component" @sectionMaxWidth="32em" />`,
+      <template><Form id="test-form-component" @sectionMaxWidth="32em" /></template>,
     );
     assert.dom('#test-form-component').hasStyle(
       {
@@ -52,7 +50,7 @@ module('Integration | Component | hds/form/index', function (hooks) {
     for (const tag of AVAILABLE_TAGS) {
       this.set('tag', tag);
       await render(
-        hbs`<Hds::Form id="test-form" @tag={{this.tag}} as |FORM|>
+        <template><Form id="test-form" @tag={{this.tag}} as |FORM|>
               <FORM.Header>
                 <FORM.HeaderTitle />
                 <FORM.HeaderDescription />
@@ -68,7 +66,7 @@ module('Integration | Component | hds/form/index', function (hooks) {
               </FORM.Section>
               <FORM.Separator />
               <FORM.Footer />
-            </Hds::Form>`,
+            </Form></template>,
       );
 
       // Form Header content
@@ -135,7 +133,7 @@ module('Integration | Component | hds/form/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
 
-    await render(hbs`<Hds::Form @tag="section" />`);
+    await render(<template><Form @tag="section" /></template>);
 
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.js b/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.js
rename to showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gjs
index e33822949dd..39bc87135a1 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.js
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AddRowButton from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/add-row-button";
 
 module(
   'Integration | Component | hds/form/key-value-inputs/add-row-button',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::AddRowButton id="test-form-key-value-add-row-button" />`,
+        <template><AddRowButton id="test-form-key-value-add-row-button" /></template>,
       );
       assert
         .dom('#test-form-key-value-add-row-button')
@@ -26,14 +26,14 @@ module(
 
     test('it should render with default text', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::AddRowButton id="test-form-key-value-add-row-button" />`,
+        <template><AddRowButton id="test-form-key-value-add-row-button" /></template>,
       );
       assert.dom('#test-form-key-value-add-row-button').hasText('Add row');
     });
 
     test('it should render text from `@text` argument', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::AddRowButton @text="Custom text" id="test-form-key-value-add-row-button" />`,
+        <template><AddRowButton @text="Custom text" id="test-form-key-value-add-row-button" /></template>,
       );
       assert.dom('#test-form-key-value-add-row-button').hasText('Custom text');
     });
@@ -47,7 +47,7 @@ module(
       });
 
       await render(
-        hbs`<Hds::Form::KeyValueInputs::AddRowButton @onClick={{this.onClick}} id="test-form-key-value-add-row-button" />`,
+        <template><AddRowButton @onClick={{this.onClick}} id="test-form-key-value-add-row-button" /></template>,
       );
 
       await click('#test-form-key-value-add-row-button');
@@ -58,7 +58,7 @@ module(
 
     test('it should provide an `aria-description` attribute', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::AddRowButton id="test-form-key-value-add-row-button" />`,
+        <template><AddRowButton id="test-form-key-value-add-row-button" /></template>,
       );
       assert
         .dom('#test-form-key-value-add-row-button')
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.js b/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.js
rename to showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs
index baeda483fdb..79cf7f18912 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.js
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, fillIn } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import DeleteRowButton from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/delete-row-button";
+import KeyValueInputs from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/index";
 
 module(
   'Integration | Component | hds/form/key-value-inputs/delete-row-button',
@@ -15,7 +16,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::DeleteRowButton id="test-form-key-value-delete-row-button" @rowIndex={{0}} />`,
+        <template><DeleteRowButton id="test-form-key-value-delete-row-button" @rowIndex={{0}} /></template>,
       );
       assert
         .dom('#test-form-key-value-delete-row-button')
@@ -26,7 +27,7 @@ module(
 
     test('it should render with default text', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::DeleteRowButton id="test-form-key-value-delete-row-button" @rowIndex={{0}} />`,
+        <template><DeleteRowButton id="test-form-key-value-delete-row-button" @rowIndex={{0}} /></template>,
       );
       assert
         .dom('#test-form-key-value-delete-row-button')
@@ -35,7 +36,7 @@ module(
 
     test('it should render text from `@text` argument', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::DeleteRowButton @text="Custom text" id="test-form-key-value-delete-row-button" @rowIndex={{0}} />`,
+        <template><DeleteRowButton @text="Custom text" id="test-form-key-value-delete-row-button" @rowIndex={{0}} /></template>,
       );
       assert
         .dom('#test-form-key-value-delete-row-button')
@@ -60,7 +61,7 @@ module(
       );
 
       await render(
-        hbs`<Hds::Form::KeyValueInputs::DeleteRowButton @onClick={{this.onClick}} @rowData={{this.rowData}} @rowIndex={{this.rowIndex}} id="test-form-key-value-delete-row-button" />`,
+        <template><DeleteRowButton @onClick={{this.onClick}} @rowData={{this.rowData}} @rowIndex={{this.rowIndex}} id="test-form-key-value-delete-row-button" /></template>,
       );
 
       await click('#test-form-key-value-delete-row-button');
@@ -89,11 +90,11 @@ module(
       });
 
       await render(
-        hbs`
+        <template>
           {{#if this.isRendered}}
-            <Hds::Form::KeyValueInputs::DeleteRowButton @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
+            <DeleteRowButton @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
           {{/if}}
-        `,
+        </template>,
       );
 
       assert.notOk(inserted);
@@ -121,11 +122,8 @@ module(
         }.bind(this),
       );
 
-      await render(hbs`
-        <Hds::Form::KeyValueInputs
-          id="test-form-key-value-inputs"
-          @data={{this.data}}
-        >
+      await render(<template>
+        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
           <:row as |R|>
             {{#let R.rowIndex as |index|}}
               <R.Field as |F|>
@@ -136,8 +134,8 @@ module(
               <R.DeleteRowButton data-test-button="row-{{index}}" @onClick={{this.onClick}} />
             {{/let}}
           </:row>
-        </Hds::Form::KeyValueInputs>
-      `);
+        </KeyValueInputs>
+      </template>);
 
       const inputSelector =
         '#test-form-key-value-inputs [data-test-input="row-1"]';
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.js b/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/field-test.js
rename to showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gjs
index 0295a4eccba..0dc96fa2e9a 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.js
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/field";
+import eq from "ember-truth-helpers/helpers/eq";
 
 const YIELDED_INPUTS = [
   { type: 'FileInput', selector: '.hds-form-file-input' },
@@ -34,59 +35,44 @@ module(
         this.selected_option = 'Option 1';
         this.NOOP = () => {};
 
-        await render(hbs`
-          <Hds::Form::KeyValueInputs::Field
-            id="test-form-key-value-field"
-            @id={{this.controlId}}
-            @isInvalid={{this.isInvalid}}
-            @extraAriaDescribedBy={{this.extraAriaDescribedBy}}
-            @rowIndex={{0}}
-          as |F|>
+        await render(<template>
+          <Field id="test-form-key-value-field" @id={{this.controlId}} @isInvalid={{this.isInvalid}} @extraAriaDescribedBy={{this.extraAriaDescribedBy}} @rowIndex={{0}} as |F|>
             <F.Label>Label</F.Label>
             <F.HelperText>Helper text</F.HelperText>
-            {{#if (eq this.type 'FileInput')}}
+            {{#if (eq this.type "FileInput")}}
               <F.FileInput />
             {{/if}}
-            {{#if (eq this.type 'MaskedInput')}}
+            {{#if (eq this.type "MaskedInput")}}
               <F.MaskedInput />
             {{/if}}
-            {{#if (eq this.type 'SuperSelectSingle')}}
-              <F.SuperSelectSingle
-                @onChange={{this.NOOP}}
-                @options={{this.options}}
-                @selected={{this.selected_option}}
-                as |option|
-              >
+            {{#if (eq this.type "SuperSelectSingle")}}
+              <F.SuperSelectSingle @onChange={{this.NOOP}} @options={{this.options}} @selected={{this.selected_option}} as |option|>
                 {{option}}
               </F.SuperSelectSingle>
             {{/if}}
-            {{#if (eq this.type 'SuperSelectMultiple')}}
-              <F.SuperSelectMultiple
-                @onChange={{this.NOOP}}
-                @options={{this.options}}
-                as |option|
-              >
+            {{#if (eq this.type "SuperSelectMultiple")}}
+              <F.SuperSelectMultiple @onChange={{this.NOOP}} @options={{this.options}} as |option|>
                 {{option}}
               </F.SuperSelectMultiple>
             {{/if}}
-            {{#if (eq this.type 'Select')}}
+            {{#if (eq this.type "Select")}}
               <F.Select />
             {{/if}}
-            {{#if (eq this.type 'TextInput')}}
+            {{#if (eq this.type "TextInput")}}
               <F.TextInput />
             {{/if}}
-            {{#if (eq this.type 'Textarea')}}
+            {{#if (eq this.type "Textarea")}}
               <F.Textarea />
             {{/if}}
             <F.Error>Error text</F.Error>
-          </Hds::Form::KeyValueInputs::Field>
-        `);
+          </Field>
+        </template>);
       });
     });
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::Field id="test-form-key-value-field" />`,
+        <template><Field id="test-form-key-value-field" /></template>,
       );
       assert
         .dom('#test-form-key-value-field')
@@ -96,11 +82,11 @@ module(
     // LABEL HIDDEN TEXT
 
     test('it should render the label with screen-reader-only text based on the provided `@rowIndex` argument', async function (assert) {
-      await render(hbs`
-        <Hds::Form::KeyValueInputs::Field id="test-form-key-value-field" @rowIndex={{0}} as |F|>
+      await render(<template>
+        <Field id="test-form-key-value-field" @rowIndex={{0}} as |F|>
           <F.Label>Label</F.Label>
-        </Hds::Form::KeyValueInputs::Field>
-      `);
+        </Field>
+      </template>);
 
       assert
         .dom(
@@ -118,11 +104,11 @@ module(
     // REQUIRED/OPTIONAL
 
     test('it should render as required with `@isRequired` argument', async function (assert) {
-      await render(hbs`
-        <Hds::Form::KeyValueInputs::Field id="test-form-key-value-field" @isRequired={{true}} @rowIndex={{0}} as |F|>
+      await render(<template>
+        <Field id="test-form-key-value-field" @isRequired={{true}} @rowIndex={{0}} as |F|>
           <F.Label>Label</F.Label>
-        </Hds::Form::KeyValueInputs::Field>
-      `);
+        </Field>
+      </template>);
 
       assert
         .dom(
@@ -132,11 +118,11 @@ module(
     });
 
     test('it should render as optional with `@isOptional` argument', async function (assert) {
-      await render(hbs`
-        <Hds::Form::KeyValueInputs::Field id="test-form-key-value-field" @isOptional={{true}} @rowIndex={{0}} as |F|>
+      await render(<template>
+        <Field id="test-form-key-value-field" @isOptional={{true}} @rowIndex={{0}} as |F|>
           <F.Label>Label</F.Label>
-        </Hds::Form::KeyValueInputs::Field>
-      `);
+        </Field>
+      </template>);
 
       assert
         .dom(
@@ -192,7 +178,7 @@ module(
 
     test('it should add `data-width` if `@width` is provided', async function (assert) {
       await render(
-        hbs`<Hds::Form::KeyValueInputs::Field id="test-form-key-value-field" @width="50%" />`,
+        <template><Field id="test-form-key-value-field" @width="50%" /></template>,
       );
       assert
         .dom('#test-form-key-value-field')
@@ -213,11 +199,11 @@ module(
       });
 
       await render(
-        hbs`
+        <template>
           {{#if this.isRendered}}
-            <Hds::Form::KeyValueInputs::Field @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
+            <Field @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
           {{/if}}
-        `,
+        </template>,
       );
 
       assert.notOk(inserted);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.js b/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.js
rename to showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs
index f94aa3752c3..2db88b81e96 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.js
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Generic from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/generic";
 
 module(
   'Integration | Component | hds/form/key-value-inputs/generic',
@@ -14,9 +14,9 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`<Hds::Form::KeyValueInputs::Generic id="test-form-key-value-generic">
-      <span id='foo'>Generic content</span>
-    </Hds::Form::KeyValueInputs::Generic>`);
+      await render(<template><Generic id="test-form-key-value-generic">
+      <span id="foo">Generic content</span>
+    </Generic></template>);
       assert
         .dom('#test-form-key-value-generic')
         .hasClass('hds-form-key-value-inputs__generic-container');
@@ -25,9 +25,9 @@ module(
     // YIELDING
 
     test('it should render the content', async function (assert) {
-      await render(hbs`<Hds::Form::KeyValueInputs::Generic id="test-form-key-value-generic">
-      <span id='foo'>Generic content</span>
-    </Hds::Form::KeyValueInputs::Generic>`);
+      await render(<template><Generic id="test-form-key-value-generic">
+      <span id="foo">Generic content</span>
+    </Generic></template>);
       assert
         .dom('#test-form-key-value-generic #foo')
         .hasText('Generic content');
@@ -47,11 +47,11 @@ module(
       });
 
       await render(
-        hbs`
+        <template>
           {{#if this.isRendered}}
-            <Hds::Form::KeyValueInputs::Generic @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
+            <Generic @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
           {{/if}}
-        `,
+        </template>,
       );
 
       assert.notOk(inserted);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.js b/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gjs
similarity index 90%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/index-test.js
rename to showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gjs
index 646fc803964..bba817897a7 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.js
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import KeyValueInputs from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/index";
 
 module(
   'Integration | Component | hds/form/key-value-inputs/index',
@@ -19,14 +19,8 @@ module(
         this.isFieldsetRequired = args.isFieldsetRequired;
         this.isFieldsetOptional = args.isFieldsetOptional;
         this.extraAriaDescribedBy = args.extraAriaDescribedBy;
-        return await render(hbs`
-          <Hds::Form::KeyValueInputs
-            id="test-form-key-value-inputs"
-            @data={{this.data}}
-            @isRequired={{this.isFieldsetRequired}}
-            @isOptional={{this.isFieldsetOptional}}
-            @extraAriaDescribedBy={{this.extraAriaDescribedBy}}
-          >
+        return await render(<template>
+          <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}} @isRequired={{this.isFieldsetRequired}} @isOptional={{this.isFieldsetOptional}} @extraAriaDescribedBy={{this.extraAriaDescribedBy}}>
             <:header as |H|>
               <H.Legend>Legend</H.Legend>
               <H.HelperText>Helper text</H.HelperText>
@@ -54,8 +48,8 @@ module(
               </F.Alert>
               <F.Error>Error text</F.Error>
             </:footer>
-          </Hds::Form::KeyValueInputs>
-        `);
+          </KeyValueInputs>
+        </template>);
       });
     });
 
@@ -164,18 +158,15 @@ module(
 
     test('it should yield `rowData` and `rowIndex`', async function (assert) {
       this.data = [{ key: 'Test key', value: 'Test value' }];
-      await render(hbs`
-        <Hds::Form::KeyValueInputs
-          id="test-form-key-value-inputs"
-          @data={{this.data}}
-        >
+      await render(<template>
+        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
           <:row as |R|>
             <R.Generic>
               This row has R.rowIndex={{R.rowIndex}} / R.rowData.key={{R.rowData.key}} / R.rowData.value={{R.rowData.value}}
             </R.Generic>
           </:row>
-        </Hds::Form::KeyValueInputs>
-      `);
+        </KeyValueInputs>
+      </template>);
       assert
         .dom(
           '#test-form-key-value-inputs .hds-form-key-value-inputs__generic-container',
@@ -229,11 +220,8 @@ module(
         { key: 'Test key', value: 'Test value' },
         { key: 'Another key', value: 'Another value' },
       ];
-      await render(hbs`
-        <Hds::Form::KeyValueInputs
-          id="test-form-key-value-inputs"
-          @data={{this.data}}
-        >
+      await render(<template>
+        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
           <:header as |H|>
             <H.Legend>Legend</H.Legend>
           </:header>
@@ -255,8 +243,8 @@ module(
               Generic content
             </R.Generic>
           </:row>
-        </Hds::Form::KeyValueInputs>
-      `);
+        </KeyValueInputs>
+      </template>);
       assert
         .dom('#test-form-key-value-inputs [data-test-generic-1]')
         .hasStyle({ '--hds-key-value-inputs-column-index': '2' });
@@ -288,11 +276,8 @@ module(
         { key: 'Test key', value: 'Test value' },
         { key: 'Another key', value: 'Another value' },
       ];
-      await render(hbs`
-        <Hds::Form::KeyValueInputs
-          id="test-form-key-value-inputs"
-          @data={{this.data}}
-        >
+      await render(<template>
+        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
           <:row as |R|>
             <R.Field />
             <R.Generic />
@@ -300,8 +285,8 @@ module(
             <R.Generic />
             <R.DeleteRowButton />
           </:row>
-        </Hds::Form::KeyValueInputs>
-      `);
+        </KeyValueInputs>
+      </template>);
       assert.dom('#test-form-key-value-inputs').hasStyle({
         '--hds-key-value-inputs-columns': '1fr auto 1fr auto 2.25rem',
       });
@@ -309,17 +294,14 @@ module(
 
     test('it should set the appropriate `grid-template-columns` CSS property via `--hds-key-value-inputs-columns` for the row when there is no data and no yielded delete button', async function (assert) {
       this.data = [];
-      await render(hbs`
-        <Hds::Form::KeyValueInputs
-          id="test-form-key-value-inputs"
-          @data={{this.data}}
-        >
+      await render(<template>
+        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
           <:row as |R|>
             <R.Field />
             <R.Generic />
           </:row>
-        </Hds::Form::KeyValueInputs>
-      `);
+        </KeyValueInputs>
+      </template>);
       assert
         .dom('#test-form-key-value-inputs')
         // per design specs, the last column is always set to provide space for the delete button, even if the button is not rendered, to avoid layout shifts
@@ -328,18 +310,15 @@ module(
 
     test('it should set the appropriate `grid-template-columns` CSS property via `--hds-key-value-inputs-columns` for the rows with custom widths', async function (assert) {
       this.data = [{ value: 'Test value' }, { value: 'Another value' }];
-      await render(hbs`
-        <Hds::Form::KeyValueInputs
-          id="test-form-key-value-inputs"
-          @data={{this.data}}
-        >
+      await render(<template>
+        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
           <:row as |R|>
             <R.Field @width="200px" />
             <R.Generic />
             <R.DeleteRowButton />
           </:row>
-        </Hds::Form::KeyValueInputs>
-      `);
+        </KeyValueInputs>
+      </template>);
 
       assert
         .dom('#test-form-key-value-inputs .hds-form-key-value-inputs__field')
diff --git a/showcase/tests/integration/components/hds/form/label/index-test.js b/showcase/tests/integration/components/hds/form/label/index-test.gjs
similarity index 70%
rename from showcase/tests/integration/components/hds/form/label/index-test.js
rename to showcase/tests/integration/components/hds/form/label/index-test.gjs
index acce4ebfd9f..d2b98f1475d 100644
--- a/showcase/tests/integration/components/hds/form/label/index-test.js
+++ b/showcase/tests/integration/components/hds/form/label/index-test.gjs
@@ -6,18 +6,18 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Label from "@hashicorp/design-system-components/components/hds/form/label/index";
 
 module('Integration | Component | hds/form/label/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Label id="test-form-label" />`);
+    await render(<template><Label id="test-form-label" /></template>);
     assert.dom('#test-form-label').hasClass('hds-form-label');
   });
   test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label @contextualClass="my-class" id="test-form-label" />`,
+      <template><Label @contextualClass="my-class" id="test-form-label" /></template>,
     );
     assert.dom('#test-form-label').hasClass('my-class');
   });
@@ -26,13 +26,13 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders a label with the defined text', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label id="test-form-label">This is the label</Hds::Form::Label>`,
+      <template><Label id="test-form-label">This is the label</Label></template>,
     );
     assert.dom('#test-form-label').hasText('This is the label');
   });
   test('it renders a label with the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label id="test-form-label"><pre>This is an HTML element inside the label</pre></Hds::Form::Label>`,
+      <template><Label id="test-form-label"><pre>This is an HTML element inside the label</pre></Label></template>,
     );
     assert.dom('#test-form-label > pre').exists();
     assert
@@ -42,7 +42,7 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders hidden text if set @hiddenText', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label id="test-form-label" @hiddenText="this is hidden">This is the label</Hds::Form::Label>`,
+      <template><Label id="test-form-label" @hiddenText="this is hidden">This is the label</Label></template>,
     );
     assert.dom('#test-form-label').hasText('This is the label this is hidden');
     assert.dom('#test-form-label .sr-only').hasText('this is hidden');
@@ -52,14 +52,14 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it appends an indicator to the label text when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label @isRequired={{true}} id="test-form-label">This is the label</Hds::Form::Label>`,
+      <template><Label @isRequired={{true}} id="test-form-label">This is the label</Label></template>,
     );
     assert.dom('#test-form-label .hds-form-indicator').exists();
     assert.dom('#test-form-label .hds-form-indicator').hasText('Required');
   });
   test('it appends an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label @isOptional={{true}} id="test-form-label">This is the label</Hds::Form::Label>`,
+      <template><Label @isOptional={{true}} id="test-form-label">This is the label</Label></template>,
     );
     assert.dom('#test-form-label > .hds-form-indicator').exists();
     assert.dom('#test-form-label .hds-form-indicator').hasText('(Optional)');
@@ -69,16 +69,16 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders a label with the "for" attribute if the @controlId argument is provided', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label @controlId="my-control-id" id="test-form-label">This is the label</Hds::Form::Label>`,
+      <template><Label @controlId="my-control-id" id="test-form-label">This is the label</Label></template>,
     );
     assert.dom('#test-form-label').hasAttribute('for', 'my-control-id');
   });
 
   test('it renders a label with the "for" attribute even if the @controlId argument is a boolean', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label @controlId={{true}} id="test-form-label-true">True</Hds::Form::Label>
-        <Hds::Form::Label @controlId={{false}} id="test-form-label-false">False</Hds::Form::Label>
-      `,
+      <template><Label @controlId={{true}} id="test-form-label-true">True</Label>
+        <Label @controlId={{false}} id="test-form-label-false">False</Label>
+      </template>,
     );
     assert.dom('#test-form-label-true').hasAttribute('for', 'true');
     assert.dom('#test-form-label-false').hasAttribute('for', 'false');
@@ -88,7 +88,7 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders a label with the correct "id" attribute if the @controlId argument is provided', async function (assert) {
     await render(
-      hbs`<Hds::Form::Label @controlId="my-control-id">This is the label</Hds::Form::Label>`,
+      <template><Label @controlId="my-control-id">This is the label</Label></template>,
     );
     assert.dom('#label-my-control-id').exists();
   });
diff --git a/showcase/tests/integration/components/hds/form/legend/index-test.js b/showcase/tests/integration/components/hds/form/legend/index-test.gjs
similarity index 71%
rename from showcase/tests/integration/components/hds/form/legend/index-test.js
rename to showcase/tests/integration/components/hds/form/legend/index-test.gjs
index d3c8a6ec5c7..31085b28763 100644
--- a/showcase/tests/integration/components/hds/form/legend/index-test.js
+++ b/showcase/tests/integration/components/hds/form/legend/index-test.gjs
@@ -6,28 +6,28 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Legend from "@hashicorp/design-system-components/components/hds/form/legend/index";
 
 module('Integration | Component | hds/form/legend/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Legend id="test-form-legend" />`);
+    await render(<template><Legend id="test-form-legend" /></template>);
     assert.dom('#test-form-legend').hasClass('hds-form-legend');
   });
   test('it renders the element as <legend>', async function (assert) {
-    await render(hbs`<Hds::Form::Legend id="test-form-legend" />`);
+    await render(<template><Legend id="test-form-legend" /></template>);
     assert.dom('#test-form-legend').hasTagName('legend');
   });
   test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
     await render(
-      hbs`<Hds::Form::Legend @contextualClass="my-class" id="test-form-legend" />`,
+      <template><Legend @contextualClass="my-class" id="test-form-legend" /></template>,
     );
     assert.dom('#test-form-legend').hasClass('my-class');
   });
 
   test('it should set the id correctly if pass @id argument', async function (assert) {
-    await render(hbs`<Hds::Form::Legend @id="custom-id" />`);
+    await render(<template><Legend @id="custom-id" /></template>);
     assert.dom('#custom-id').exists();
   });
 
@@ -35,13 +35,13 @@ module('Integration | Component | hds/form/legend/index', function (hooks) {
 
   test('it renders a legend with the defined text', async function (assert) {
     await render(
-      hbs`<Hds::Form::Legend id="test-form-legend">This is the legend</Hds::Form::Legend>`,
+      <template><Legend id="test-form-legend">This is the legend</Legend></template>,
     );
     assert.dom('#test-form-legend').hasText('This is the legend');
   });
   test('it renders a legend with the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Form::Legend id="test-form-legend"><pre>This is an HTML element inside the legend</pre></Hds::Form::Legend>`,
+      <template><Legend id="test-form-legend"><pre>This is an HTML element inside the legend</pre></Legend></template>,
     );
     assert.dom('#test-form-legend > pre').exists();
     assert
@@ -53,14 +53,14 @@ module('Integration | Component | hds/form/legend/index', function (hooks) {
 
   test('it appends an indicator to the legend text when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Legend id="test-form-legend" @isRequired={{true}}>This is the legend</Hds::Form::Legend>`,
+      <template><Legend id="test-form-legend" @isRequired={{true}}>This is the legend</Legend></template>,
     );
     assert.dom('#test-form-legend .hds-form-indicator').exists();
     assert.dom('#test-form-legend .hds-form-indicator').hasText('Required');
   });
   test('it appends an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Legend id="test-form-legend" @isOptional={{true}}>This is the legend</Hds::Form::Legend>`,
+      <template><Legend id="test-form-legend" @isOptional={{true}}>This is the legend</Legend></template>,
     );
     assert.dom('#test-form-legend > .hds-form-indicator').exists();
     assert.dom('#test-form-legend .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/masked-input/base-test.js b/showcase/tests/integration/components/hds/form/masked-input/base-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/form/masked-input/base-test.js
rename to showcase/tests/integration/components/hds/form/masked-input/base-test.gjs
index af866cfe9fc..b9a42fabf5e 100644
--- a/showcase/tests/integration/components/hds/form/masked-input/base-test.js
+++ b/showcase/tests/integration/components/hds/form/masked-input/base-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/masked-input/base";
 
 module(
   'Integration | Component | hds/form/masked-input/base',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a specific CSS class', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base id="test-form-masked-input" />`,
+        <template><Base id="test-form-masked-input" /></template>,
       );
       assert
         .dom('#test-form-masked-input')
@@ -24,7 +24,7 @@ module(
 
     test('it should set aria-describedby and id arguments if pass @id or @ariaDescribedBy', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base @id="custom-id" @ariaDescribedBy="custom-description-id" />`,
+        <template><Base @id="custom-id" @ariaDescribedBy="custom-description-id" /></template>,
       );
       assert
         .dom('#custom-id')
@@ -36,7 +36,7 @@ module(
 
     test('it should render the text masked by default', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base id="test-form-masked-input" />`,
+        <template><Base id="test-form-masked-input" /></template>,
       );
       assert
         .dom('.hds-form-masked-input__control')
@@ -46,7 +46,7 @@ module(
 
     test('it should render readable text when `isContentMasked` is false', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base id="test-form-masked-input" @isContentMasked={{false}} />`,
+        <template><Base id="test-form-masked-input" @isContentMasked={{false}} /></template>,
       );
       assert
         .dom('.hds-form-masked-input__control')
@@ -56,7 +56,7 @@ module(
 
     test('it should toggle the masking when button is pressed', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base id="test-form-masked-input" />`,
+        <template><Base id="test-form-masked-input" /></template>,
       );
       await click('.hds-form-visibility-toggle');
       assert
@@ -69,7 +69,7 @@ module(
 
     test('it automatically provides the ID relations between the elements', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base @id="test-form-masked-input" />`,
+        <template><Base @id="test-form-masked-input" /></template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
@@ -78,7 +78,7 @@ module(
 
     test('it updates the button label on toggle', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base @id="test-form-masked-input" />`,
+        <template><Base @id="test-form-masked-input" /></template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
@@ -91,7 +91,7 @@ module(
 
     test('it informs the user about visibility change on toggle', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base @id="test-form-masked-input" />`,
+        <template><Base @id="test-form-masked-input" /></template>,
       );
       await click('.hds-form-visibility-toggle');
       assert
@@ -107,14 +107,14 @@ module(
 
     test('it should render an `<input>` element by default', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base id="test-form-masked-input" />`,
+        <template><Base id="test-form-masked-input" /></template>,
       );
       assert.dom('input#test-form-masked-input').exists();
     });
 
     test('it should render a `<textarea>` element when `@isMultiline` is true', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Base @isMultiline={{true}} id="test-form-masked-input" />`,
+        <template><Base @isMultiline={{true}} id="test-form-masked-input" /></template>,
       );
       assert.dom('textarea#test-form-masked-input').exists();
     });
diff --git a/showcase/tests/integration/components/hds/form/masked-input/field-test.js b/showcase/tests/integration/components/hds/form/masked-input/field-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/form/masked-input/field-test.js
rename to showcase/tests/integration/components/hds/form/masked-input/field-test.gjs
index 49a891875c9..a67509d76e0 100644
--- a/showcase/tests/integration/components/hds/form/masked-input/field-test.js
+++ b/showcase/tests/integration/components/hds/form/masked-input/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/masked-input/field";
 
 module(
   'Integration | Component | hds/form/masked-input/field',
@@ -18,28 +18,28 @@ module(
     });
 
     test('it should render the component with a specific CSS class', async function (assert) {
-      await render(hbs`<Hds::Form::MaskedInput::Field />`);
+      await render(<template><Field /></template>);
       assert.dom('.hds-form-field__control').exists();
     });
 
     // VALUE
 
     test('it should render the input with the value provided via @value argument', async function (assert) {
-      await render(hbs`<Hds::Form::MaskedInput::Field @value="abc123" />`);
+      await render(<template><Field @value="abc123" /></template>);
       assert.dom('input').hasValue('abc123');
     });
 
     // INVALID
 
     test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
-      await render(hbs`<Hds::Form::MaskedInput::Field @isInvalid={{true}} />`);
+      await render(<template><Field @isInvalid={{true}} /></template>);
       assert.dom('input').hasClass('hds-form-text-input--is-invalid');
     });
 
     // WIDTH
 
     test('it should render the input with a fixed width if a @width value is passed', async function (assert) {
-      await render(hbs`<Hds::Form::MaskedInput::Field @width="248px" />`);
+      await render(<template><Field @width="248px" /></template>);
       assert.dom('.hds-form-masked-input').hasStyle({ width: '248px' });
     });
 
@@ -47,7 +47,7 @@ module(
 
     test('it should render the input with a fixed height if a @height value is passed and `@isMultiline` is true', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @isMultiline={{true}} @height="248px" />`,
+        <template><Field @isMultiline={{true}} @height="248px" /></template>,
       );
       assert
         .dom('.hds-form-masked-input__control')
@@ -57,7 +57,7 @@ module(
     // ID
 
     test('it should render the input with a custom @id', async function (assert) {
-      await render(hbs`<Hds::Form::MaskedInput::Field @id="my-input" />`);
+      await render(<template><Field @id="my-input" /></template>);
       assert.dom('input').hasAttribute('id', 'my-input');
     });
 
@@ -65,12 +65,12 @@ module(
 
     test('it renders the yielded contextual components', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field as |F|>
+        <template><Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Hds::Form::MaskedInput::Field>`,
+        </Field></template>,
       );
       assert.dom('.hds-form-field__label').exists();
       assert.dom('.hds-form-field__helper-text').exists();
@@ -79,7 +79,7 @@ module(
       assert.dom('.hds-form-field__error').exists();
     });
     test('it does not render the yielded contextual components if not provided', async function (assert) {
-      await render(hbs`<Hds::Form::MaskedInput::Field />`);
+      await render(<template><Field /></template>);
       assert.dom('.hds-form-field__label').doesNotExist();
       assert.dom('.hds-form-field__helper-text').doesNotExist();
       assert.dom('.hds-form-field__character-count').doesNotExist();
@@ -87,12 +87,12 @@ module(
     });
     test('it automatically provides all the ID relations between the elements', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @extraAriaDescribedBy="extra" as |F|>
+        <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Hds::Form::MaskedInput::Field>`,
+        </Field></template>,
       );
       // the control ID is dynamically generated
       let control = this.element.querySelector(
@@ -118,14 +118,14 @@ module(
     });
     test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @extraAriaDescribedBy="extra" as |F|>
+        <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::MaskedInput::Field>`,
+        </Field></template>,
       );
 
       this.set('showErrors', true);
@@ -157,9 +157,9 @@ module(
 
     test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @isRequired={{true}} as |F|>
+        <template><Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::MaskedInput::Field>`,
+          </Field></template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('Required');
@@ -167,18 +167,18 @@ module(
     });
     test('it should append an indicator to the label text when user input is optional', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @isOptional={{true}} as |F|>
+        <template><Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::MaskedInput::Field>`,
+          </Field></template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('(Optional)');
     });
     test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field required as |F|>
+        <template><Field required as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::MaskedInput::Field>`,
+          </Field></template>,
       );
       assert.dom('input').hasAttribute('required');
       assert.dom('label .hds-form-indicator').doesNotExist();
@@ -188,7 +188,7 @@ module(
 
     test('it automatically provides the ID relations between the elements', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @id="test-form-masked-input" />`,
+        <template><Field @id="test-form-masked-input" /></template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
@@ -197,7 +197,7 @@ module(
 
     test('it updates the button label on toggle', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @id="test-form-masked-input" />`,
+        <template><Field @id="test-form-masked-input" /></template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
@@ -210,7 +210,7 @@ module(
 
     test('it renders a custom toggle button label', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @id="test-form-masked-input" @visibilityToggleAriaLabel="Show my masked content" />`,
+        <template><Field @id="test-form-masked-input" @visibilityToggleAriaLabel="Show my masked content" /></template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
@@ -219,7 +219,7 @@ module(
 
     test('it informs the user about visibility change on toggle', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @id="test-form-masked-input" />`,
+        <template><Field @id="test-form-masked-input" /></template>,
       );
       await click('.hds-form-visibility-toggle');
       assert
@@ -233,7 +233,7 @@ module(
 
     test('it renders a custom message on toggle', async function (assert) {
       await render(
-        hbs`<Hds::Form::MaskedInput::Field @id="test-form-masked-input" @visibilityToggleAriaMessageText="My input content is visible" />`,
+        <template><Field @id="test-form-masked-input" @visibilityToggleAriaMessageText="My input content is visible" /></template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
diff --git a/showcase/tests/integration/components/hds/form/radio-card/group-test.js b/showcase/tests/integration/components/hds/form/radio-card/group-test.gjs
similarity index 82%
rename from showcase/tests/integration/components/hds/form/radio-card/group-test.js
rename to showcase/tests/integration/components/hds/form/radio-card/group-test.gjs
index e335d8f5aa0..6e460b2418c 100644
--- a/showcase/tests/integration/components/hds/form/radio-card/group-test.js
+++ b/showcase/tests/integration/components/hds/form/radio-card/group-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Group from "@hashicorp/design-system-components/components/hds/form/radio-card/group";
 
 module('Integration | Component | hds/form/radio-card/group', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group id="test-radio-card-group" />`,
+      <template><Group id="test-radio-card-group" /></template>,
     );
     assert
       .dom('#test-radio-card-group')
@@ -28,7 +28,7 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the `@layout` argument provided', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group id="test-radio-card-group-layout" @layout="vertical" />`,
+      <template><Group id="test-radio-card-group-layout" @layout="vertical" /></template>,
     );
     assert
       .dom('#test-radio-card-group-layout')
@@ -39,13 +39,13 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard/>
-            <G.RadioCard/>
+            <G.RadioCard />
+            <G.RadioCard />
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::RadioCard::Group>`,
+          </Group></template>,
     );
     assert.dom('.hds-form-radio-card').exists();
     assert.dom('.hds-form-group__legend').exists();
@@ -59,7 +59,7 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
     assert.dom('.hds-form-group__error').hasText('This is the group error');
   });
   test('it does not render the contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard::Group />`);
+    await render(<template><Group /></template>);
     assert.dom('.hds-form-group__legend').doesNotExist();
     assert.dom('.hds-form-group__helper-text').doesNotExist();
     assert.dom('.hds-form-group__error').doesNotExist();
@@ -69,13 +69,13 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard/>
-            <G.RadioCard/>
+            <G.RadioCard />
+            <G.RadioCard />
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::RadioCard::Group>`,
+          </Group></template>,
     );
     // the IDs are dynamically generated
     let groupHelperText = this.element.querySelector(
@@ -91,15 +91,15 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard/>
-            <G.RadioCard/>
+            <G.RadioCard />
+            <G.RadioCard />
             {{#if this.showErrors}}
               <G.Error>This is the group error</G.Error>
             {{/if}}
-          </Hds::Form::RadioCard::Group>`,
+          </Group></template>,
     );
 
     this.set('showErrors', true);
@@ -121,13 +121,13 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should render the contextual components with CSS classes that reflect the arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group @name="test-name" @alignment="center" @controlPosition="left" as |G|>
+      <template><Group @name="test-name" @alignment="center" @controlPosition="left" as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard @maxWidth="50%" data-test="first-control"/>
-            <G.RadioCard @maxWidth="50%" data-test="second-control"/>
+            <G.RadioCard @maxWidth="50%" data-test="first-control" />
+            <G.RadioCard @maxWidth="50%" data-test="second-control" />
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::RadioCard::Group>`,
+          </Group></template>,
     );
     assert.dom('[data-test="first-control"]').hasAttribute('name', 'test-name');
     assert
@@ -145,20 +145,20 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should append an indicator to the legend text when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group @isRequired={{true}} as |G|>
+      <template><Group @isRequired={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
-            <G.RadioCard/>
-          </Hds::Form::RadioCard::Group>`,
+            <G.RadioCard />
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard::Group @isOptional={{true}} as |G|>
+      <template><Group @isOptional={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
-            <G.RadioCard/>
-          </Hds::Form::RadioCard::Group>`,
+            <G.RadioCard />
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/radio-card/index-test.js b/showcase/tests/integration/components/hds/form/radio-card/index-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/form/radio-card/index-test.js
rename to showcase/tests/integration/components/hds/form/radio-card/index-test.gjs
index 127a9b3ed24..9901e49b2c7 100644
--- a/showcase/tests/integration/components/hds/form/radio-card/index-test.js
+++ b/showcase/tests/integration/components/hds/form/radio-card/index-test.gjs
@@ -6,24 +6,24 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import RadioCard from "@hashicorp/design-system-components/components/hds/form/radio-card/index";
 
 module('Integration | Component | hds/form/radio-card/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard/>`);
+    await render(<template><RadioCard /></template>);
     assert.dom('label').hasClass('hds-form-radio-card');
   });
   test('it should render the input with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard />`);
+    await render(<template><RadioCard /></template>);
     assert.dom('input').hasClass('hds-form-radio-card__control');
   });
 
   // NAME, VALUE
 
   test('it should render the input with the arguments provided', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard @name="name" @value="value" />`);
+    await render(<template><RadioCard @name="name" @value="value" /></template>);
     assert.dom('input').hasValue('value');
     assert.dom('input').hasAttribute('name', 'name');
   });
@@ -32,7 +32,7 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard @checked="checked" @disabled="disabled" />`,
+      <template><RadioCard @checked="checked" @disabled="disabled" /></template>,
     );
     assert.dom('label').hasClass('hds-form-radio-card--checked');
     assert.dom('label').hasClass('hds-form-radio-card--disabled');
@@ -41,12 +41,12 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
   // WIDTH
 
   test('it should render the default class, resulting in a fluid width', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard />`);
+    await render(<template><RadioCard /></template>);
     assert.dom('label').hasClass('hds-form-radio-card--has-fluid-width');
   });
 
   test('it should render the correct class if `@maxWidth` is set', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard @maxWidth="25%" />`);
+    await render(<template><RadioCard @maxWidth="25%" /></template>);
     assert.dom('label').hasClass('hds-form-radio-card--has-fixed-width');
   });
 
@@ -54,13 +54,13 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::RadioCard as |R|>
-            <R.Icon @name="hexagon"/>
+      <template><RadioCard as |R|>
+            <R.Icon @name="hexagon" />
             <R.Label>This is the label</R.Label>
-            <R.Badge @text="badge"/>
+            <R.Badge @text="badge" />
             <R.Description>This is the description</R.Description>
             <R.Generic><div class="custom">This is the custom content</div></R.Generic>
-          </Hds::Form::RadioCard>`,
+          </RadioCard></template>,
     );
     assert.dom('.hds-icon-hexagon').exists();
     assert.dom('.hds-form-radio-card__label').exists();
@@ -69,7 +69,7 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
     assert.dom('.custom').exists();
   });
   test('it does not render the contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::RadioCard />`);
+    await render(<template><RadioCard /></template>);
     assert.dom('.hds-icon').doesNotExist();
     assert.dom('.hds-form-radio-card__label').doesNotExist();
     assert.dom('.hds-badge').doesNotExist();
@@ -86,7 +86,7 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Form::RadioCard @alignment="foo" />`);
+    await render(<template><RadioCard @alignment="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -99,7 +99,7 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Form::RadioCard @controlPosition="foo" />`);
+    await render(<template><RadioCard @controlPosition="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/form/radio/base-test.js b/showcase/tests/integration/components/hds/form/radio/base-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/form/radio/base-test.js
rename to showcase/tests/integration/components/hds/form/radio/base-test.gjs
index ba4c7f42abb..a18929470a9 100644
--- a/showcase/tests/integration/components/hds/form/radio/base-test.js
+++ b/showcase/tests/integration/components/hds/form/radio/base-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/radio/base";
 
 module('Integration | Component | hds/form/radio/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Base id="test-form-radio" />`);
+    await render(<template><Base id="test-form-radio" /></template>);
     assert.dom('#test-form-radio').hasClass('hds-form-radio');
   });
 });
diff --git a/showcase/tests/integration/components/hds/form/radio/field-test.js b/showcase/tests/integration/components/hds/form/radio/field-test.gjs
similarity index 86%
rename from showcase/tests/integration/components/hds/form/radio/field-test.js
rename to showcase/tests/integration/components/hds/form/radio/field-test.gjs
index 60ba69aae78..8796accda09 100644
--- a/showcase/tests/integration/components/hds/form/radio/field-test.js
+++ b/showcase/tests/integration/components/hds/form/radio/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/radio/field";
 
 module('Integration | Component | hds/form/radio/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,21 +16,21 @@ module('Integration | Component | hds/form/radio/field', function (hooks) {
   });
 
   test('it should render the component with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__control').exists();
   });
 
   // VALUE
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Field @value="abc123" />`);
+    await render(<template><Field @value="abc123" /></template>);
     assert.dom('input').hasValue('abc123');
   });
 
   // ID
 
   test('it should render the input with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Field @id="my-input" />`);
+    await render(<template><Field @id="my-input" /></template>);
     assert.dom('input').hasAttribute('id', 'my-input');
   });
 
@@ -38,11 +38,11 @@ module('Integration | Component | hds/form/radio/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Field as |F|>
+      <template><Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Radio::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -50,18 +50,18 @@ module('Integration | Component | hds/form/radio/field', function (hooks) {
     assert.dom('.hds-form-field__error').exists();
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Radio::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector('.hds-form-field__control input');
@@ -82,13 +82,13 @@ module('Integration | Component | hds/form/radio/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::Radio::Field>`,
+        </Field></template>,
     );
 
     this.set('showErrors', true);
diff --git a/showcase/tests/integration/components/hds/form/radio/group-test.js b/showcase/tests/integration/components/hds/form/radio/group-test.gjs
similarity index 91%
rename from showcase/tests/integration/components/hds/form/radio/group-test.js
rename to showcase/tests/integration/components/hds/form/radio/group-test.gjs
index 90d7f015c33..044ead583e2 100644
--- a/showcase/tests/integration/components/hds/form/radio/group-test.js
+++ b/showcase/tests/integration/components/hds/form/radio/group-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Group from "@hashicorp/design-system-components/components/hds/form/radio/group";
 
 module('Integration | Component | hds/form/radio/group', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
   });
 
   test('it should render the component', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Group id="test-form-radio" />`);
+    await render(<template><Group id="test-form-radio" /></template>);
     assert.dom('#test-form-radio').hasClass('hds-form-group');
   });
 
@@ -24,7 +24,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
 
   test('it renders the yielded contextual components and subcomponents', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.RadioField checked="checked" @value="abc123" as |F|>
@@ -33,7 +33,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
               <F.Error>This is the control error</F.Error>
             </G.RadioField>
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::Radio::Group>`,
+          </Group></template>,
     );
     assert.dom('.hds-form-group__legend').exists();
     assert.dom('.hds-form-group__legend').hasText('This is the legend');
@@ -63,14 +63,14 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
     assert.dom('.hds-form-group__error').hasText('This is the group error');
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Radio::Group />`);
+    await render(<template><Group /></template>);
     assert.dom('.hds-form-group__legend').doesNotExist();
     assert.dom('.hds-form-group__helper-text').doesNotExist();
     assert.dom('.hds-form-group__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.RadioField checked="checked" @value="abc123" as |F|>
@@ -79,7 +79,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
               <F.Error>This is the control error</F.Error>
             </G.RadioField>
             <G.Error>This is the group error</G.Error>
-          </Hds::Form::Radio::Group>`,
+          </Group></template>,
     );
     // the IDs are dynamically generated
     let groupHelperText = this.element.querySelector(
@@ -104,7 +104,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.RadioField checked="checked" @value="abc123" as |F|>
@@ -115,7 +115,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
             {{#if this.showErrors}}
               <G.Error>This is the group error</G.Error>
             {{/if}}
-          </Hds::Form::Radio::Group>`,
+          </Group></template>,
     );
 
     this.set('showErrors', true);
@@ -143,14 +143,14 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements when dynamically rendered using boolean values', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group as |G|>
+      <template><Group as |G|>
             <G.RadioField @value={{true}} @id={{true}} as |F|>
               <F.Label>This is the label for the 'true' value</F.Label>
             </G.RadioField>
             <G.RadioField @value={{false}} @id={{false}} as |F|>
               <F.Label>This is the label for the 'false' value</F.Label>
             </G.RadioField>
-          </Hds::Form::Radio::Group>`,
+          </Group></template>,
     );
 
     const inputs = this.element.querySelectorAll('input[type="radio"]');
@@ -170,7 +170,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
 
   test('it renders the defined name on all controls within a group', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group @name="datacenter-demo" as |G|>
+      <template><Group @name="datacenter-demo" as |G|>
             <G.Legend>Choose datacenter</G.Legend>
             <G.RadioField data-test="first-control" as |F|>
               <F.Label>NYC1</F.Label>
@@ -178,7 +178,7 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
             <G.RadioField data-test="second-control" as |F|>
               <F.Label>DC1</F.Label>
             </G.RadioField>
-          </Hds::Form::Radio::Group>`,
+          </Group></template>,
     );
     assert
       .dom('[data-test="first-control"]')
@@ -192,12 +192,12 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
 
   test('it should append an indicator to the legend text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group @isRequired={{true}} as |G|>
+      <template><Group @isRequired={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.RadioField checked="checked" @value="abc123" as |F|>
               <F.Label>This is the control label</F.Label>
             </G.RadioField>
-        </Hds::Form::Radio::Group>`,
+        </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
@@ -205,12 +205,12 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Radio::Group @isOptional={{true}} as |G|>
+      <template><Group @isOptional={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.RadioField checked="checked" @value="abc123" as |F|>
               <F.Label>This is the control label</F.Label>
             </G.RadioField>
-          </Hds::Form::Radio::Group>`,
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/section/header/index-test.js b/showcase/tests/integration/components/hds/form/section/header/index-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/form/section/header/index-test.js
rename to showcase/tests/integration/components/hds/form/section/header/index-test.gjs
index b81f4eebd3f..89d67571145 100644
--- a/showcase/tests/integration/components/hds/form/section/header/index-test.js
+++ b/showcase/tests/integration/components/hds/form/section/header/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from "@hashicorp/design-system-components/components/hds/form/section/header";
 
 module(
   'Integration | Component | hds/form/section/header/index',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::Section::Header id="test-form-section-header" />`,
+        <template><Header id="test-form-section-header" /></template>,
       );
       assert
         .dom('#test-form-section-header')
@@ -26,11 +26,11 @@ module(
 
     test('it should yield the Title and Description children', async function (assert) {
       await render(
-        hbs`
-          <Hds::Form::Section::Header id="test-form-section-header" as |Header|>
+        <template>
+          <Header id="test-form-section-header" as |Header|>
             <Header.Title /><Header.Description />
-          </Hds::Form::Section::Header>
-        `,
+          </Header>
+        </template>,
       );
       assert
         .dom('#test-form-section-header > .hds-form__header-title')
diff --git a/showcase/tests/integration/components/hds/form/section/index-test.js b/showcase/tests/integration/components/hds/form/section/index-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/form/section/index-test.js
rename to showcase/tests/integration/components/hds/form/section/index-test.gjs
index 72ed252001a..c4b6743acce 100644
--- a/showcase/tests/integration/components/hds/form/section/index-test.js
+++ b/showcase/tests/integration/components/hds/form/section/index-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Section from "@hashicorp/design-system-components/components/hds/form/section/index";
 
 module('Integration | Component | hds/form/section/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Section id="test-form-section" />`);
+    await render(<template><Section id="test-form-section" /></template>);
     assert.dom('#test-form-section').hasClass('hds-form__section');
   });
 
@@ -20,7 +20,7 @@ module('Integration | Component | hds/form/section/index', function (hooks) {
 
   test('it should yield the Section Header, HeaderTitle/Description, SectionMultiFieldGroup, SectionMultiFieldGroupItem, and Section children', async function (assert) {
     await render(
-      hbs`<Hds::Form::Section id="test-form-section" as |Section|>
+      <template><Section id="test-form-section" as |Section|>
             <Section.Header>
               <Section.HeaderTitle />
               <Section.HeaderDescription />
@@ -28,7 +28,7 @@ module('Integration | Component | hds/form/section/index', function (hooks) {
             <Section.MultiFieldGroup>
               <Section.MultiFieldGroupItem />
             </Section.MultiFieldGroup>
-          </Hds::Form::Section>`,
+          </Section></template>,
     );
     assert
       .dom('#test-form-section > .hds-form__section-header')
@@ -57,7 +57,7 @@ module('Integration | Component | hds/form/section/index', function (hooks) {
 
   // isFullWidth
   test(`it should have the default max-width if no @isFullWidth prop is declared`, async function (assert) {
-    await render(hbs`<Hds::Form::Section id="test-form-section" />`);
+    await render(<template><Section id="test-form-section" /></template>);
     assert
       .dom('#test-form-section')
       .doesNotHaveClass('hds-form-content--is-full-width');
@@ -65,7 +65,7 @@ module('Integration | Component | hds/form/section/index', function (hooks) {
 
   test(`if @isFullWidth is true, it should not have a max-width set`, async function (assert) {
     await render(
-      hbs`<Hds::Form::Section id="test-form-section" @isFullWidth={{true}} />`,
+      <template><Section id="test-form-section" @isFullWidth={{true}} /></template>,
     );
     assert
       .dom('#test-form-section')
diff --git a/showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.js b/showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.js
rename to showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gjs
index c8ed6f52d71..f638bdc3e55 100644
--- a/showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.js
+++ b/showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import MultiFieldGroup from "@hashicorp/design-system-components/components/hds/form/section/multi-field-group/index";
 
 module(
   'Integration | Component | hds/form/section/multi-field-group/index',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::Section::MultiFieldGroup id="test-form-section-multi-field-group" />`,
+        <template><MultiFieldGroup id="test-form-section-multi-field-group" /></template>,
       );
       assert
         .dom('#test-form-section-multi-field-group')
@@ -26,7 +26,7 @@ module(
 
     test('it should render the yielded content', async function (assert) {
       await render(
-        hbs`<Hds::Form::Section::MultiFieldGroup id="test-form-section-multi-field-group"><pre>test</pre></Hds::Form::Section::MultiFieldGroup>`,
+        <template><MultiFieldGroup id="test-form-section-multi-field-group"><pre>test</pre></MultiFieldGroup></template>,
       );
       assert
         .dom('#test-form-section-multi-field-group > pre')
@@ -36,11 +36,11 @@ module(
 
     test('it should render the `Item` yielded contextual component', async function (assert) {
       await render(
-        hbs`
-          <Hds::Form::Section::MultiFieldGroup id="test-form-section-multi-field-group" as |FG|>
+        <template>
+          <MultiFieldGroup id="test-form-section-multi-field-group" as |FG|>
             <FG.Item><pre>test</pre></FG.Item>
-          </Hds::Form::Section::MultiFieldGroup>
-        `,
+          </MultiFieldGroup>
+        </template>,
       );
       assert
         .dom(
diff --git a/showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.js b/showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.js
rename to showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gjs
index b08875e2384..eb655ca3224 100644
--- a/showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.js
+++ b/showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/form/section/multi-field-group/item";
 
 module(
   'Integration | Component | hds/form/section/multi-field-group/item/index',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::Section::MultiFieldGroup::Item id="test-form-section-multi-field-group-item" />`,
+        <template><Item id="test-form-section-multi-field-group-item" /></template>,
       );
       assert
         .dom('#test-form-section-multi-field-group-item')
@@ -27,7 +27,7 @@ module(
     // width
     test('it should set an inline style for the width custom property', async function (assert) {
       await render(
-        hbs`<Hds::Form::Section::MultiFieldGroup::Item @width="8em" id="test-form-section-multi-field-group-item" />`,
+        <template><Item @width="8em" id="test-form-section-multi-field-group-item" /></template>,
       );
       assert.dom('#test-form-section-multi-field-group-item').hasStyle(
         {
@@ -42,9 +42,9 @@ module(
     // It should yield the passed in content
     test('it should yield the passed in content', async function (assert) {
       await render(
-        hbs`<Hds::Form::Section::MultiFieldGroup::Item id="test-form-section-multi-field-group-item">
+        <template><Item id="test-form-section-multi-field-group-item">
               <span class="test-content">Test Content</span>
-            </Hds::Form::Section::MultiFieldGroup::Item>`,
+            </Item></template>,
       );
       assert
         .dom('#test-form-section-multi-field-group-item .test-content')
diff --git a/showcase/tests/integration/components/hds/form/select/base-test.js b/showcase/tests/integration/components/hds/form/select/base-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/form/select/base-test.js
rename to showcase/tests/integration/components/hds/form/select/base-test.gjs
index e7045151e22..88003e7f4a6 100644
--- a/showcase/tests/integration/components/hds/form/select/base-test.js
+++ b/showcase/tests/integration/components/hds/form/select/base-test.gjs
@@ -6,19 +6,19 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/select/base";
 
 module('Integration | Component | hds/form/select/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Select::Base id="test-form-select" />`);
+    await render(<template><Base id="test-form-select" /></template>);
     assert.dom('#test-form-select').hasClass('hds-form-select');
   });
 
   test('it should set aria-describedby and id arguments if pass @id or @ariaDescribedBy', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Base @id="custom-id" @ariaDescribedBy="custom-description-id" />`,
+      <template><Base @id="custom-id" @ariaDescribedBy="custom-description-id" /></template>,
     );
     assert
       .dom('#custom-id')
@@ -30,7 +30,7 @@ module('Integration | Component | hds/form/select/base', function (hooks) {
 
   test('it should render the options passed via contextual component', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Base id="test-form-select" as |C|><C.Options><option value="abc123">This is the option</option></C.Options></Hds::Form::Select::Base>`,
+      <template><Base id="test-form-select" as |C|><C.Options><option value="abc123">This is the option</option></C.Options></Base></template>,
     );
     assert.dom('#test-form-select option').exists();
     assert.dom('#test-form-select option').hasText('This is the option');
@@ -41,7 +41,7 @@ module('Integration | Component | hds/form/select/base', function (hooks) {
 
   test('it should render the select with a fixed width if a @width value is passed', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Base @width="248px" id="test-form-select" />`,
+      <template><Base @width="248px" id="test-form-select" /></template>,
     );
     assert.dom('#test-form-select').hasStyle({ width: '248px' });
   });
@@ -50,7 +50,7 @@ module('Integration | Component | hds/form/select/base', function (hooks) {
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Base id="test-form-select" @isInvalid={{true}} />`,
+      <template><Base id="test-form-select" @isInvalid={{true}} /></template>,
     );
     assert.dom('#test-form-select').hasClass('hds-form-select--is-invalid');
   });
diff --git a/showcase/tests/integration/components/hds/form/select/field-test.js b/showcase/tests/integration/components/hds/form/select/field-test.gjs
similarity index 82%
rename from showcase/tests/integration/components/hds/form/select/field-test.js
rename to showcase/tests/integration/components/hds/form/select/field-test.gjs
index a0b018b7bb6..524a2e5e464 100644
--- a/showcase/tests/integration/components/hds/form/select/field-test.js
+++ b/showcase/tests/integration/components/hds/form/select/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/select/field";
 
 module('Integration | Component | hds/form/select/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
   });
 
   test('it should render the component with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Select::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__control').exists();
   });
 
@@ -24,7 +24,7 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
 
   test('it should render the options passed via contextual component', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field id="test-form-select" as |F|><F.Options><option value="abc123">This is the option</option></F.Options></Hds::Form::Select::Field>`,
+      <template><Field id="test-form-select" as |F|><F.Options><option value="abc123">This is the option</option></F.Options></Field></template>,
     );
     assert.dom('select option').exists();
     assert.dom('select option').hasText('This is the option');
@@ -34,21 +34,21 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
   // WIDTH
 
   test('it should render the input with a fixed width if a @width value is passed', async function (assert) {
-    await render(hbs`<Hds::Form::Select::Field @width="248px" />`);
+    await render(<template><Field @width="248px" /></template>);
     assert.dom('select').hasStyle({ width: '248px' });
   });
 
   // INVALID
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
-    await render(hbs`<Hds::Form::Select::Field @isInvalid={{true}} />`);
+    await render(<template><Field @isInvalid={{true}} /></template>);
     assert.dom('select').hasClass('hds-form-select--is-invalid');
   });
 
   // ID
 
   test('it should render the select control with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::Select::Field @id="my-input" />`);
+    await render(<template><Field @id="my-input" /></template>);
     assert.dom('select').hasAttribute('id', 'my-input');
   });
 
@@ -56,11 +56,11 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field as |F|>
+      <template><Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Select::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -68,18 +68,18 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
     assert.dom('.hds-form-field__error').exists();
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Select::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Select::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector('.hds-form-field__control select');
@@ -100,13 +100,13 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::Select::Field>`,
+        </Field></template>,
     );
 
     this.set('showErrors', true);
@@ -133,9 +133,9 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field @isRequired={{true}} as |F|>
+      <template><Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Select::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -143,18 +143,18 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field @isOptional={{true}} as |F|>
+      <template><Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Select::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
   });
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      hbs`<Hds::Form::Select::Field required as |F|>
+      <template><Field required as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Select::Field>`,
+          </Field></template>,
     );
     assert.dom('select').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();
diff --git a/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js b/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js
rename to showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gjs
index 1413536c571..0aa1770725b 100644
--- a/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.js
+++ b/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gjs
@@ -6,10 +6,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import { selectChoose } from 'ember-power-select/test-support';
 
 // we're using this data for multiple tests so we'll define it here
+import Base from "@hashicorp/design-system-components/components/hds/form/super-select/multiple/base";
+import { fn } from "@ember/helper";
 const setOptionsData = (context) => {
   context.set('NOOP', () => {});
   context.set('OPTION', []);
@@ -24,7 +25,7 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} id="test-super-select-multiple" />`,
+        <template><Base @onChange={{this.NOOP}} id="test-super-select-multiple" /></template>,
       );
       assert
         .dom('.hds-form-super-select-multiple #test-super-select-multiple')
@@ -36,10 +37,10 @@ module(
     test('it should render the options passed', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`
-          <Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>
+        <template>
+          <Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>
             {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>`,
+          </Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.ember-power-select-options').exists();
@@ -51,7 +52,7 @@ module(
     test('it should render the after options block by default', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert
@@ -70,7 +71,7 @@ module(
     test('it should update the options view when "Show selected"/"Show all" is toggled', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{fn (mut this.OPTION)}} @selected={{this.OPTION}} @options={{this.OPTIONS}} id="test-super-select-multiple" as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @onChange={{fn (mut this.OPTION)}} @selected={{this.OPTION}} @options={{this.OPTIONS}} id="test-super-select-multiple" as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       await selectChoose('#test-super-select-multiple', 'Option 1');
@@ -93,7 +94,7 @@ module(
     test('it should clear any existing selection when "Clear selected" is activated', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{fn (mut this.OPTION)}} @selected={{this.OPTION}} @options={{this.OPTIONS}} id="test-super-select-multiple" as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @onChange={{fn (mut this.OPTION)}} @selected={{this.OPTION}} @options={{this.OPTIONS}} id="test-super-select-multiple" as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       await selectChoose('#test-super-select-multiple', 'Option 1');
@@ -121,7 +122,7 @@ module(
     test('it should not render the after options block when showAfterOptions is set to false', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @showAfterOptions={{false}} as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @showAfterOptions={{false}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
@@ -130,7 +131,7 @@ module(
     test('it should render custom content in the after options block when `@afterOptionsContent` exists', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @afterOptionsContent="Custom content" @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @afterOptionsContent="Custom content" @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__result-count').doesNotExist();
@@ -142,7 +143,7 @@ module(
     test('it should not render the after options block when `@showAfterOptions` is false', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @showAfterOptions={{false}} @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @showAfterOptions={{false}} @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
@@ -151,7 +152,7 @@ module(
     test('it should render the default after options block with custom result count message when `@resultCountMessage` exists', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @resultCountMessage="custom result count message" as |option|>{{option}}</Hds::Form::SuperSelect::Multiple::Base>`,
+        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @resultCountMessage="custom result count message" as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert
@@ -172,7 +173,7 @@ module(
     test('`@matchTriggerWidth` should be true by default', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} />`,
+        <template><Base @onChange={{this.NOOP}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
@@ -182,7 +183,7 @@ module(
     test('it should render the correct CSS class when `@matchTriggerWidth` is false', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @matchTriggerWidth={{false}} />`,
+        <template><Base @onChange={{this.NOOP}} @matchTriggerWidth={{false}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
@@ -194,7 +195,7 @@ module(
     test('it should set the correct CSS property value when `@dropdownMaxWidth` is set', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @dropdownMaxWidth="40em" />`,
+        <template><Base @onChange={{this.NOOP}} @dropdownMaxWidth="40em" /></template>,
       );
 
       assert
@@ -211,7 +212,7 @@ module(
     test('it should render the correct CSS class when `@isInvalid` is true', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Base @onChange={{this.NOOP}} @isInvalid={{true}} />`,
+        <template><Base @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
diff --git a/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.js b/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/form/super-select/multiple/field-test.js
rename to showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gjs
index e5cd7799ce5..df22501d79d 100644
--- a/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.js
+++ b/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gjs
@@ -6,9 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // we're using this data for multiple tests so we'll define it here
+import Field from "@hashicorp/design-system-components/components/hds/form/super-select/multiple/field";
 const setOptionsData = (context) => {
   context.set('NOOP', () => {});
 };
@@ -21,7 +20,7 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @onChange={{this.NOOP}} />`,
+        <template><Field @onChange={{this.NOOP}} /></template>,
       );
       assert.dom('.hds-form-field__control .hds-form-super-select').exists();
     });
@@ -31,7 +30,7 @@ module(
     test('it should render the correct CSS class if @isInvalid is true', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @onChange={{this.NOOP}} @isInvalid={{true}} />`,
+        <template><Field @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-field__control .hds-form-super-select')
@@ -43,7 +42,7 @@ module(
     test('it should render the trigger with a custom id', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @id="my-super-select" @onChange={{this.NOOP}} />`,
+        <template><Field @id="my-super-select" @onChange={{this.NOOP}} /></template>,
       );
       assert
         .dom('.ember-basic-dropdown-trigger')
@@ -55,11 +54,11 @@ module(
     test('it renders the yielded contextual components', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @onChange={{this.NOOP}} as |F|>
+        <template><Field @onChange={{this.NOOP}} as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::SuperSelect::Multiple::Field>`,
+        </Field></template>,
       );
       assert.dom('.hds-form-field__label').exists();
       assert.dom('.hds-form-field__helper-text').exists();
@@ -69,7 +68,7 @@ module(
     test('it does not render the yielded contextual components if not provided', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @onChange={{this.NOOP}} />`,
+        <template><Field @onChange={{this.NOOP}} /></template>,
       );
       assert.dom('.hds-form-field__label').doesNotExist();
       assert.dom('.hds-form-field__helper-text').doesNotExist();
@@ -78,11 +77,11 @@ module(
     test('it automatically provides all the ID relations between the elements', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
+        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::SuperSelect::Multiple::Field>`,
+        </Field></template>,
       );
       let control = this.element.querySelector('.ember-basic-dropdown-trigger');
       let controlId = control.id;
@@ -108,13 +107,13 @@ module(
     test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
+        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::SuperSelect::Multiple::Field>`,
+        </Field></template>,
       );
 
       this.set('showErrors', true);
@@ -146,9 +145,9 @@ module(
     test('it should append an indicator to the label text when user input is required', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @isRequired={{true}} @onChange={{this.NOOP}} as |F|>
+        <template><Field @isRequired={{true}} @onChange={{this.NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::SuperSelect::Multiple::Field>`,
+          </Field></template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('Required');
@@ -156,9 +155,9 @@ module(
     test('it should append an indicator to the label text when user input is optional', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Multiple::Field @isOptional={{true}} @onChange={{this.NOOP}} as |F|>
+        <template><Field @isOptional={{true}} @onChange={{this.NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::SuperSelect::Multiple::Field>`,
+          </Field></template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/super-select/single/base-test.js b/showcase/tests/integration/components/hds/form/super-select/single/base-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/form/super-select/single/base-test.js
rename to showcase/tests/integration/components/hds/form/super-select/single/base-test.gjs
index 23d1d4b1550..4093e240172 100644
--- a/showcase/tests/integration/components/hds/form/super-select/single/base-test.js
+++ b/showcase/tests/integration/components/hds/form/super-select/single/base-test.gjs
@@ -6,9 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // we're using this data for multiple tests so we'll define it here
+import Base from "@hashicorp/design-system-components/components/hds/form/super-select/single/base";
 const setOptionsData = (context) => {
   context.set('NOOP', () => {});
   context.set('OPTION', []);
@@ -23,7 +22,7 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} id="test-super-select-single" />`,
+        <template><Base @onChange={{this.NOOP}} id="test-super-select-single" /></template>,
       );
       assert
         .dom('.hds-form-super-select-single #test-super-select-single')
@@ -35,7 +34,7 @@ module(
     test('it should render the options passed', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Single::Base>`,
+        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.ember-power-select-options').exists();
@@ -47,7 +46,7 @@ module(
     test('it should not render the after options block by default', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Single::Base>`,
+        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
@@ -56,7 +55,7 @@ module(
     test('it should render the after options block when showAfterOptions is set to true', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @showAfterOptions={{true}} as |option|>{{option}}</Hds::Form::SuperSelect::Single::Base>`,
+        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @showAfterOptions={{true}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert
@@ -69,7 +68,7 @@ module(
     test('it should render custom content in the after options block when `@afterOptionsContent` exists', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @afterOptionsContent="Custom content" @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Single::Base>`,
+        <template><Base @afterOptionsContent="Custom content" @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__result-count').doesNotExist();
@@ -81,7 +80,7 @@ module(
     test('it should not render the after options block when `@showAfterOptions` is false', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @showAfterOptions={{false}} @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Hds::Form::SuperSelect::Single::Base>`,
+        <template><Base @showAfterOptions={{false}} @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
@@ -92,7 +91,7 @@ module(
     test('`@matchTriggerWidth` should be true by default', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} />`,
+        <template><Base @onChange={{this.NOOP}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
@@ -102,7 +101,7 @@ module(
     test('it should render the correct CSS class when `@matchTriggerWidth` is false', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} @matchTriggerWidth={{false}} />`,
+        <template><Base @onChange={{this.NOOP}} @matchTriggerWidth={{false}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
@@ -114,7 +113,7 @@ module(
     test('it should set the correct CSS property value when `@dropdownMaxWidth` is set', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} @dropdownMaxWidth="40em" />`,
+        <template><Base @onChange={{this.NOOP}} @dropdownMaxWidth="40em" /></template>,
       );
 
       assert
@@ -131,7 +130,7 @@ module(
     test('it should render the correct CSS class when `@isInvalid` is true', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Base @onChange={{this.NOOP}} @isInvalid={{true}} />`,
+        <template><Base @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
diff --git a/showcase/tests/integration/components/hds/form/super-select/single/field-test.js b/showcase/tests/integration/components/hds/form/super-select/single/field-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/form/super-select/single/field-test.js
rename to showcase/tests/integration/components/hds/form/super-select/single/field-test.gjs
index e7170dc4215..44e5b04f888 100644
--- a/showcase/tests/integration/components/hds/form/super-select/single/field-test.js
+++ b/showcase/tests/integration/components/hds/form/super-select/single/field-test.gjs
@@ -6,9 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // we're using this data for multiple tests so we'll define it here
+import Field from "@hashicorp/design-system-components/components/hds/form/super-select/single/field";
 const setOptionsData = (context) => {
   context.set('NOOP', () => {});
 };
@@ -21,7 +20,7 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @onChange={{this.NOOP}} />`,
+        <template><Field @onChange={{this.NOOP}} /></template>,
       );
       assert.dom('.hds-form-field__control .hds-form-super-select').exists();
     });
@@ -31,7 +30,7 @@ module(
     test('it should render the correct CSS class if @isInvalid is true', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @onChange={{this.NOOP}} @isInvalid={{true}} />`,
+        <template><Field @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-field__control .hds-form-super-select')
@@ -43,7 +42,7 @@ module(
     test('it should render the trigger with a custom id', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @id="my-super-select" @onChange={{this.NOOP}} />`,
+        <template><Field @id="my-super-select" @onChange={{this.NOOP}} /></template>,
       );
       assert
         .dom('.ember-basic-dropdown-trigger')
@@ -55,11 +54,11 @@ module(
     test('it renders the yielded contextual components', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @onChange={{this.NOOP}} as |F|>
+        <template><Field @onChange={{this.NOOP}} as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::SuperSelect::Single::Field>`,
+        </Field></template>,
       );
       assert.dom('.hds-form-field__label').exists();
       assert.dom('.hds-form-field__helper-text').exists();
@@ -69,7 +68,7 @@ module(
     test('it does not render the yielded contextual components if not provided', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @onChange={{this.NOOP}} />`,
+        <template><Field @onChange={{this.NOOP}} /></template>,
       );
       assert.dom('.hds-form-field__label').doesNotExist();
       assert.dom('.hds-form-field__helper-text').doesNotExist();
@@ -78,11 +77,11 @@ module(
     test('it automatically provides all the ID relations between the elements', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
+        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::SuperSelect::Single::Field>`,
+        </Field></template>,
       );
       let control = this.element.querySelector('.ember-basic-dropdown-trigger');
       let controlId = control.id;
@@ -109,13 +108,13 @@ module(
     test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
+        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::SuperSelect::Single::Field>`,
+        </Field></template>,
       );
 
       this.set('showErrors', true);
@@ -147,9 +146,9 @@ module(
     test('it should append an indicator to the label text when user input is required', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @isRequired={{true}} @onChange={{this.NOOP}} as |F|>
+        <template><Field @isRequired={{true}} @onChange={{this.NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::SuperSelect::Single::Field>`,
+          </Field></template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('Required');
@@ -157,9 +156,9 @@ module(
     test('it should append an indicator to the label text when user input is optional', async function (assert) {
       setOptionsData(this);
       await render(
-        hbs`<Hds::Form::SuperSelect::Single::Field @isOptional={{true}} @onChange={{this.NOOP}} as |F|>
+        <template><Field @isOptional={{true}} @onChange={{this.NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::SuperSelect::Single::Field>`,
+          </Field></template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/text-input/base-test.js b/showcase/tests/integration/components/hds/form/text-input/base-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/form/text-input/base-test.js
rename to showcase/tests/integration/components/hds/form/text-input/base-test.gjs
index c00fd781a26..008b41012bb 100644
--- a/showcase/tests/integration/components/hds/form/text-input/base-test.js
+++ b/showcase/tests/integration/components/hds/form/text-input/base-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/text-input/base";
 
 module('Integration | Component | hds/form/text-input/base', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,13 +16,13 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Base id="test-form-text-input" />`);
+    await render(<template><Base id="test-form-text-input" /></template>);
     assert.dom('#test-form-text-input').hasClass('hds-form-text-input');
   });
 
   test('it should set aria-describedby and id arguments if pass @id or @ariaDescribedBy', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Base @id="custom-id" @ariaDescribedBy="custom-description-id" />`,
+      <template><Base @id="custom-id" @ariaDescribedBy="custom-description-id" /></template>,
     );
     assert
       .dom('#custom-id')
@@ -33,13 +33,13 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
   // TYPE
 
   test('it should render the "text" type if no type is declared', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Base id="test-form-text-input" />`);
+    await render(<template><Base id="test-form-text-input" /></template>);
     assert.dom('#test-form-text-input').hasAttribute('type', 'text');
   });
   test('it should render the correct type depending on the @type prop', async function (assert) {
     this.set('type', 'email');
     await render(
-      hbs`<Hds::Form::TextInput::Base @type={{this.type}} id="test-form-text-input" />`,
+      <template><Base @type={{this.type}} id="test-form-text-input" /></template>,
     );
     assert.dom('#test-form-text-input').hasAttribute('type', 'email');
     this.set('type', 'datetime-local');
@@ -50,7 +50,7 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Base @value="abc123" id="test-form-text-input" />`,
+      <template><Base @value="abc123" id="test-form-text-input" /></template>,
     );
     assert.dom('#test-form-text-input').hasValue('abc123');
   });
@@ -59,7 +59,7 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Base id="test-form-text-input" @isInvalid={{true}} />`,
+      <template><Base id="test-form-text-input" @isInvalid={{true}} /></template>,
     );
     assert
       .dom('#test-form-text-input')
@@ -70,7 +70,7 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should render the correct CSS class if the @isLoading prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Base id="test-form-text-input" @type="search" @isLoading={{true}} />`,
+      <template><Base id="test-form-text-input" @type="search" @isLoading={{true}} /></template>,
     );
     assert
       .dom('#test-form-text-input')
@@ -81,7 +81,7 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should render the input with a fixed width if a @width value is passed', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Base @width="248px" id="test-form-text-input" />`,
+      <template><Base @width="248px" id="test-form-text-input" /></template>,
     );
     assert.dom('#test-form-text-input').hasStyle({ width: '248px' });
   });
@@ -95,7 +95,7 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Form::TextInput::Base @type="foo" />`);
+    await render(<template><Base @type="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/form/text-input/field-test.js b/showcase/tests/integration/components/hds/form/text-input/field-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/form/text-input/field-test.js
rename to showcase/tests/integration/components/hds/form/text-input/field-test.gjs
index 2e935e3a96a..fd1ceaa0b75 100644
--- a/showcase/tests/integration/components/hds/form/text-input/field-test.js
+++ b/showcase/tests/integration/components/hds/form/text-input/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/text-input/field";
 
 module('Integration | Component | hds/form/text-input/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,31 +16,31 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   });
 
   test('it should render the component with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__control').exists();
   });
 
   // TYPE
 
   test('it should render the "text" type if no type is declared', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('input').hasAttribute('type', 'text');
   });
   test('it should render the correct type depending on the @type prop', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @type="email" />`);
+    await render(<template><Field @type="email" /></template>);
     assert.dom('input').hasAttribute('type', 'email');
   });
 
   // PASSWORD
 
   test('it should render the password input with visibility toggle and masked by default', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @type="password" />`);
+    await render(<template><Field @type="password" /></template>);
     assert.dom('input').hasAttribute('type', 'password');
     assert.dom('.hds-form-visibility-toggle .hds-icon-eye').exists();
   });
 
   test('it should toggle the masking when the toggle button is pressed', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @type="password" />`);
+    await render(<template><Field @type="password" /></template>);
     await click('.hds-form-visibility-toggle');
     assert.dom('input').hasAttribute('type', 'text');
     assert.dom('.hds-form-visibility-toggle .hds-icon-eye-off').exists();
@@ -48,7 +48,7 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it should render the password input without visibility toggle when `hasVisibilityToggle` is false', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @type="password" @hasVisibilityToggle={{false}} />`,
+      <template><Field @type="password" @hasVisibilityToggle={{false}} /></template>,
     );
     assert.dom('input').hasAttribute('type', 'password');
     assert.dom('.hds-form-visibility-toggle').doesNotExist();
@@ -57,14 +57,14 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   // VALUE
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @value="abc123" />`);
+    await render(<template><Field @value="abc123" /></template>);
     assert.dom('input').hasValue('abc123');
   });
 
   // INVALID
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @isInvalid={{true}} />`);
+    await render(<template><Field @isInvalid={{true}} /></template>);
     assert.dom('input').hasClass('hds-form-text-input--is-invalid');
   });
 
@@ -72,7 +72,7 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it should render the correct CSS class if the @isLoading prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @type="search" @isLoading={{true}} />`,
+      <template><Field @type="search" @isLoading={{true}} /></template>,
     );
     assert.dom('input').hasClass('hds-form-text-input--is-loading');
   });
@@ -80,14 +80,14 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   // WIDTH
 
   test('it should render the input with a fixed width if a @width value is passed', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @width="248px" />`);
+    await render(<template><Field @width="248px" /></template>);
     assert.dom('input').hasStyle({ width: '248px' });
   });
 
   // ID
 
   test('it should render the input with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field @id="my-input" />`);
+    await render(<template><Field @id="my-input" /></template>);
     assert.dom('input').hasAttribute('id', 'my-input');
   });
 
@@ -95,12 +95,12 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @value="abc123" as |F|>
+      <template><Field @value="abc123" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Hds::Form::TextInput::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -109,7 +109,7 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
     assert.dom('.hds-form-field__error').exists();
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::TextInput::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__character-count').doesNotExist();
@@ -117,12 +117,12 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Hds::Form::TextInput::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector('.hds-form-field__control input');
@@ -150,14 +150,14 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements even when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::TextInput::Field>`,
+        </Field></template>,
     );
 
     this.set('showErrors', true);
@@ -191,9 +191,9 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @isRequired={{true}} as |F|>
+      <template><Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::TextInput::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -201,18 +201,18 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field @isOptional={{true}} as |F|>
+      <template><Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::TextInput::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
   });
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      hbs`<Hds::Form::TextInput::Field required as |F|>
+      <template><Field required as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::TextInput::Field>`,
+          </Field></template>,
     );
     assert.dom('input').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();
diff --git a/showcase/tests/integration/components/hds/form/textarea/base-test.js b/showcase/tests/integration/components/hds/form/textarea/base-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/form/textarea/base-test.js
rename to showcase/tests/integration/components/hds/form/textarea/base-test.gjs
index 611d808952b..d453643ab86 100644
--- a/showcase/tests/integration/components/hds/form/textarea/base-test.js
+++ b/showcase/tests/integration/components/hds/form/textarea/base-test.gjs
@@ -6,19 +6,19 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/textarea/base";
 
 module('Integration | Component | hds/form/textarea/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Base id="test-form-textarea" />`);
+    await render(<template><Base id="test-form-textarea" /></template>);
     assert.dom('#test-form-textarea').hasClass('hds-form-textarea');
   });
 
   test('it should set aria-describedby and id arguments if pass @id or @ariaDescribedBy', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Base @id="custom-id" @ariaDescribedBy="custom-description-id" />`,
+      <template><Base @id="custom-id" @ariaDescribedBy="custom-description-id" /></template>,
     );
     assert
       .dom('#custom-id')
@@ -30,7 +30,7 @@ module('Integration | Component | hds/form/textarea/base', function (hooks) {
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Base @value="abc123" id="test-form-textarea" />`,
+      <template><Base @value="abc123" id="test-form-textarea" /></template>,
     );
     assert.dom('#test-form-textarea').hasValue('abc123');
   });
@@ -38,11 +38,11 @@ module('Integration | Component | hds/form/textarea/base', function (hooks) {
   // ROWS
 
   test('it should render the textarea with the default number of rows', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Base />`);
+    await render(<template><Base /></template>);
     assert.dom('textarea').hasAttribute('rows', '4');
   });
   test('it should render the textarea with a custom number of rows', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Base rows="2" />`);
+    await render(<template><Base rows="2" /></template>);
     assert.dom('textarea').hasAttribute('rows', '2');
   });
 
@@ -50,7 +50,7 @@ module('Integration | Component | hds/form/textarea/base', function (hooks) {
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Base id="test-form-textarea" @isInvalid={{true}} />`,
+      <template><Base id="test-form-textarea" @isInvalid={{true}} /></template>,
     );
     assert.dom('#test-form-textarea').hasClass('hds-form-textarea--is-invalid');
   });
diff --git a/showcase/tests/integration/components/hds/form/textarea/field-test.js b/showcase/tests/integration/components/hds/form/textarea/field-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/form/textarea/field-test.js
rename to showcase/tests/integration/components/hds/form/textarea/field-test.gjs
index 9e169169d1b..cfe81788ee6 100644
--- a/showcase/tests/integration/components/hds/form/textarea/field-test.js
+++ b/showcase/tests/integration/components/hds/form/textarea/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/textarea/field";
 
 module('Integration | Component | hds/form/textarea/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,43 +16,43 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   });
 
   test('it should render the component with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__control').exists();
   });
 
   // VALUE
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Field @value="abc123" />`);
+    await render(<template><Field @value="abc123" /></template>);
     assert.dom('textarea').hasValue('abc123');
   });
 
   // INVALID
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Field @isInvalid={{true}} />`);
+    await render(<template><Field @isInvalid={{true}} /></template>);
     assert.dom('textarea').hasClass('hds-form-textarea--is-invalid');
   });
 
   // WIDTH & HEIGHT
 
   test('it should render the textarea control with a fixed width if a @width value is passed', async function (assert) {
-    await render(hbs`
-      <Hds::Form::Textarea::Field @width="248px" />
-    `);
+    await render(<template>
+      <Field @width="248px" />
+    </template>);
     assert.dom('textarea').hasStyle({ width: '248px' });
   });
   test('it should render the textarea control with a fixed height if a @height value is passed', async function (assert) {
-    await render(hbs`
-      <Hds::Form::Textarea::Field @height="248px" />
-    `);
+    await render(<template>
+      <Field @height="248px" />
+    </template>);
     assert.dom('textarea').hasStyle({ height: '248px' });
   });
 
   // ID
 
   test('it should render the textarea control with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Field @id="my-textarea" />`);
+    await render(<template><Field @id="my-textarea" /></template>);
     assert.dom('textarea').hasAttribute('id', 'my-textarea');
   });
 
@@ -60,12 +60,12 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Field @value="abc123" as |F|>
+      <template><Field @value="abc123" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Textarea::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -74,7 +74,7 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
     assert.dom('.hds-form-field__error').exists();
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Textarea::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__character-count').doesNotExist();
@@ -82,12 +82,12 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Textarea::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     let control = this.element.querySelector(
@@ -114,14 +114,14 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}}/>
+          <F.CharacterCount @maxLength={{10}} />
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::Textarea::Field>`,
+        </Field></template>,
     );
 
     this.set('showErrors', true);
@@ -154,9 +154,9 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Field @isRequired={{true}} as |F|>
+      <template><Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Textarea::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -164,18 +164,18 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
+      <template><Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Textarea::Field>`,
+          </Field></template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
   });
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      hbs`<Hds::Form::Textarea::Field required as |F|>
+      <template><Field required as |F|>
             <F.Label>This is the label</F.Label>
-          </Hds::Form::Textarea::Field>`,
+          </Field></template>,
     );
     assert.dom('textarea').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();
diff --git a/showcase/tests/integration/components/hds/form/toggle/base-test.js b/showcase/tests/integration/components/hds/form/toggle/base-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/form/toggle/base-test.js
rename to showcase/tests/integration/components/hds/form/toggle/base-test.gjs
index 1a35fb8942b..0cffffd0a27 100644
--- a/showcase/tests/integration/components/hds/form/toggle/base-test.js
+++ b/showcase/tests/integration/components/hds/form/toggle/base-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/form/toggle/base";
 
 module('Integration | Component | hds/form/toggle/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Base id="test-form-toggle" />`);
+    await render(<template><Base id="test-form-toggle" /></template>);
     // Notice: the "toggle" component has a slightly different DOM structure than the other form controls
     assert.dom('.hds-form-toggle').exists();
     assert.dom('.hds-form-toggle > #test-form-toggle').exists();
@@ -22,7 +22,7 @@ module('Integration | Component | hds/form/toggle/base', function (hooks) {
   // ACCESSIBILITY
 
   test('it should render with the correct role', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Base id="test-form-toggle" />`);
+    await render(<template><Base id="test-form-toggle" /></template>);
     assert.dom('#test-form-toggle').hasAttribute('role', 'switch');
   });
   // role="switch"
diff --git a/showcase/tests/integration/components/hds/form/toggle/field-test.js b/showcase/tests/integration/components/hds/form/toggle/field-test.gjs
similarity index 87%
rename from showcase/tests/integration/components/hds/form/toggle/field-test.js
rename to showcase/tests/integration/components/hds/form/toggle/field-test.gjs
index af256ffaa8e..fa9496eadd5 100644
--- a/showcase/tests/integration/components/hds/form/toggle/field-test.js
+++ b/showcase/tests/integration/components/hds/form/toggle/field-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, settled } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Field from "@hashicorp/design-system-components/components/hds/form/toggle/field";
 
 module('Integration | Component | hds/form/toggle/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
   });
 
   test('it should render the component with a specific CSS class', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Field />`);
+    await render(<template><Field /></template>);
     // Notice: the "toggle" component has a slightly different DOM structure than the other form controls
     assert.dom('input').hasClass('hds-form-toggle__control');
   });
@@ -24,14 +24,14 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
   // VALUE
 
   test('it should render the input with the value provided via @value argument', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Field @value="abc123" />`);
+    await render(<template><Field @value="abc123" /></template>);
     assert.dom('input').hasValue('abc123');
   });
 
   // ID
 
   test('it should render the input with a custom @id', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Field @id="my-input" />`);
+    await render(<template><Field @id="my-input" /></template>);
     assert.dom('input').hasAttribute('id', 'my-input');
   });
 
@@ -39,11 +39,11 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Field as |F|>
+      <template><Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Toggle::Field>`,
+        </Field></template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -51,18 +51,18 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
     assert.dom('.hds-form-field__error').exists();
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Field />`);
+    await render(<template><Field /></template>);
     assert.dom('.hds-form-field__label').doesNotExist();
     assert.dom('.hds-form-field__helper-text').doesNotExist();
     assert.dom('.hds-form-field__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Hds::Form::Toggle::Field>`,
+        </Field></template>,
     );
     // the control ID is dynamically generated
     // Notice: the "toggle" component has a slightly different DOM structure than the other form controls
@@ -84,13 +84,13 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Field @extraAriaDescribedBy="extra" as |F|>
+      <template><Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           {{#if this.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Hds::Form::Toggle::Field>`,
+        </Field></template>,
     );
 
     this.set('showErrors', true);
diff --git a/showcase/tests/integration/components/hds/form/toggle/group-test.js b/showcase/tests/integration/components/hds/form/toggle/group-test.gjs
similarity index 90%
rename from showcase/tests/integration/components/hds/form/toggle/group-test.js
rename to showcase/tests/integration/components/hds/form/toggle/group-test.gjs
index 17c4a76b112..49e50b3d52f 100644
--- a/showcase/tests/integration/components/hds/form/toggle/group-test.js
+++ b/showcase/tests/integration/components/hds/form/toggle/group-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Group from "@hashicorp/design-system-components/components/hds/form/toggle/group";
 
 module('Integration | Component | hds/form/toggle/group', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Group id="test-form-toggle" />`);
+    await render(<template><Group id="test-form-toggle" /></template>);
     assert.dom('#test-form-toggle').hasClass('hds-form-group');
   });
 
@@ -24,7 +24,7 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
 
   test('it renders the yielded contextual components and subcomponents', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.ToggleField checked="checked" @value="abc123" as |F|>
@@ -33,7 +33,7 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
               <F.Error>This is the control error</F.Error>
             </G.ToggleField>
             <G.Error>This is the group error</G.Error>
-        </Hds::Form::Toggle::Group>`,
+        </Group></template>,
     );
     assert.dom('.hds-form-group__legend').exists();
     assert.dom('.hds-form-group__legend').hasText('This is the legend');
@@ -63,14 +63,14 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
     assert.dom('.hds-form-group__error').hasText('This is the group error');
   });
   test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::Form::Toggle::Group />`);
+    await render(<template><Group /></template>);
     assert.dom('.hds-form-group__legend').doesNotExist();
     assert.dom('.hds-form-group__helper-text').doesNotExist();
     assert.dom('.hds-form-group__error').doesNotExist();
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Group as |G|>
+      <template><Group as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.HelperText>This is the group helper text</G.HelperText>
             <G.ToggleField checked="checked" @value="abc123" as |F|>
@@ -79,7 +79,7 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
               <F.Error>This is the control error</F.Error>
             </G.ToggleField>
             <G.Error>This is the group error</G.Error>
-        </Hds::Form::Toggle::Group>`,
+        </Group></template>,
     );
     // the IDs are dynamically generated
     let groupHelperText = this.element.querySelector(
@@ -106,12 +106,12 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
 
   test('it should append an indicator to the legend text and set the required attribute when user input is required', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Group @isRequired={{true}} as |G|>
+      <template><Group @isRequired={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.ToggleField checked="checked" @value="abc123" as |F|>
               <F.Label>This is the control label</F.Label>
             </G.ToggleField>
-          </Hds::Form::Toggle::Group>`,
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
@@ -119,12 +119,12 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      hbs`<Hds::Form::Toggle::Group @isOptional={{true}} as |G|>
+      <template><Group @isOptional={{true}} as |G|>
             <G.Legend>This is the legend</G.Legend>
             <G.ToggleField checked="checked" @value="abc123" as |F|>
               <F.Label>This is the control label</F.Label>
             </G.ToggleField>
-          </Hds::Form::Toggle::Group>`,
+          </Group></template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');
diff --git a/showcase/tests/integration/components/hds/form/visibility-toggle/index-test.js b/showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/form/visibility-toggle/index-test.js
rename to showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gjs
index 1fa46fbb06c..acace0e9210 100644
--- a/showcase/tests/integration/components/hds/form/visibility-toggle/index-test.js
+++ b/showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import VisibilityToggle from "@hashicorp/design-system-components/components/hds/form/visibility-toggle/index";
 
 module(
   'Integration | Component | hds/form/visibility-toggle/index',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Form::VisibilityToggle id="test-visibility-toggle" />`,
+        <template><VisibilityToggle id="test-visibility-toggle" /></template>,
       );
       assert
         .dom('#test-visibility-toggle')
@@ -24,7 +24,7 @@ module(
 
     test('it should render the default icon, `aria-label` and `sr-live` message', async function (assert) {
       await render(
-        hbs`<Hds::Form::VisibilityToggle id="test-visibility-toggle" />`,
+        <template><VisibilityToggle id="test-visibility-toggle" /></template>,
       );
       assert
         .dom('#test-visibility-toggle .hds-icon')
@@ -33,14 +33,14 @@ module(
 
     test('it should render correct icon when `@isVisible` is `true`', async function (assert) {
       await render(
-        hbs`<Hds::Form::VisibilityToggle @isVisible={{true}} id="test-visibility-toggle" />`,
+        <template><VisibilityToggle @isVisible={{true}} id="test-visibility-toggle" /></template>,
       );
       assert.dom('#test-visibility-toggle .hds-icon').hasClass('hds-icon-eye');
     });
 
     test('it should render `aria-label` and `sr-live` message', async function (assert) {
       await render(
-        hbs`<Hds::Form::VisibilityToggle @ariaLabel="Hide masked content" @ariaMessageText="Input content is visible" id="test-visibility-toggle" />`,
+        <template><VisibilityToggle @ariaLabel="Hide masked content" @ariaMessageText="Input content is visible" id="test-visibility-toggle" /></template>,
       );
       assert
         .dom('#test-visibility-toggle')
diff --git a/showcase/tests/integration/components/hds/icon-tile/index-test.js b/showcase/tests/integration/components/hds/icon-tile/index-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/icon-tile/index-test.js
rename to showcase/tests/integration/components/hds/icon-tile/index-test.gjs
index 0dcccde2405..cf48e870e98 100644
--- a/showcase/tests/integration/components/hds/icon-tile/index-test.js
+++ b/showcase/tests/integration/components/hds/icon-tile/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import IconTile from "@hashicorp/design-system-components/components/hds/icon-tile/index";
 
 module('Integration | Component | hds/icon-tile/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,14 +16,14 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::IconTile @icon="dashboard" id="test-icon-tile" />`);
+    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile');
   });
 
   // ICON
 
   test('it renders an icon-tile with an icon', async function (assert) {
-    await render(hbs`<Hds::IconTile @icon="dashboard" id="test-icon-tile" />`);
+    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile .hds-icon-tile__icon').exists();
     assert
       .dom('div#test-icon-tile .hds-icon-tile__icon svg.hds-icon-dashboard')
@@ -33,7 +33,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // LOGO
 
   test('it renders an icon-tile with a logo', async function (assert) {
-    await render(hbs`<Hds::IconTile @logo="boundary" id="test-icon-tile" />`);
+    await render(<template><IconTile @logo="boundary" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile .hds-icon-tile__logo').exists();
     assert.dom('div#test-icon-tile .hds-icon-tile__logo svg').exists();
   });
@@ -41,22 +41,22 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // COLOR
 
   test('it should render the neutral color as the default if no color is declared and is an icon', async function (assert) {
-    await render(hbs`<Hds::IconTile @icon="dashboard" id="test-icon-tile" />`);
+    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-neutral');
   });
   test('it should render the correct CSS color class if the @color prop is declared and is an icon', async function (assert) {
     await render(
-      hbs`<Hds::IconTile @icon="dashboard" @color="boundary" id="test-icon-tile" />`,
+      <template><IconTile @icon="dashboard" @color="boundary" id="test-icon-tile" /></template>,
     );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-boundary');
   });
   test('it should render the product color if is a logo', async function (assert) {
-    await render(hbs`<Hds::IconTile @logo="boundary" id="test-icon-tile" />`);
+    await render(<template><IconTile @logo="boundary" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-boundary');
   });
   test('it should render the product color even if the @color prop is declared and is a logo', async function (assert) {
     await render(
-      hbs`<Hds::IconTile @logo="boundary" @color="waypoint" id="test-icon-tile" />`,
+      <template><IconTile @logo="boundary" @color="waypoint" id="test-icon-tile" /></template>,
     );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-boundary');
   });
@@ -64,12 +64,12 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // SIZE
 
   test('it should render the medium size if no size is declared', async function (assert) {
-    await render(hbs`<Hds::IconTile @icon="dashboard" id="test-icon-tile" />`);
+    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::IconTile @icon="dashboard" id="test-icon-tile" @size="small" />`,
+      <template><IconTile @icon="dashboard" id="test-icon-tile" @size="small" /></template>,
     );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--size-small');
   });
@@ -78,7 +78,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
 
   test('it should render the secondary icon if the @iconSecondary prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::IconTile @icon="dashboard" @iconSecondary="plus" id="test-icon-tile" />`,
+      <template><IconTile @icon="dashboard" @iconSecondary="plus" id="test-icon-tile" /></template>,
     );
     assert.dom('div#test-icon-tile .hds-icon-tile__extra').exists();
     assert.dom('div#test-icon-tile .hds-icon-tile__extra-icon').exists();
@@ -90,7 +90,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // A11Y
 
   test('it should have aria-hidden set to true', async function (assert) {
-    await render(hbs`<Hds::IconTile @logo="boundary" id="test-icon-tile" />`);
+    await render(<template><IconTile @logo="boundary" id="test-icon-tile" /></template>);
     assert.dom('div#test-icon-tile').hasAria('hidden', 'true');
   });
 
@@ -103,7 +103,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::IconTile @icon="dashboard" @logo="boundary" />`);
+    await render(<template><IconTile @icon="dashboard" @logo="boundary" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -115,7 +115,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::IconTile />`);
+    await render(<template><IconTile /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -127,7 +127,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::IconTile @logo="test" />`);
+    await render(<template><IconTile @logo="test" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/icon/index-test.js b/showcase/tests/integration/components/hds/icon/index-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/icon/index-test.js
rename to showcase/tests/integration/components/hds/icon/index-test.gjs
index a1c70aacc9c..6cb70b63e12 100644
--- a/showcase/tests/integration/components/hds/icon/index-test.js
+++ b/showcase/tests/integration/components/hds/icon/index-test.gjs
@@ -6,20 +6,20 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Icon from "@hashicorp/design-system-components/components/hds/icon/index";
 
 module('Integration | Component | hds-icon', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" />`);
+    await render(<template><Icon @name="activity" /></template>);
     assert.dom('svg.hds-icon').hasClass('hds-icon');
   });
 
   // SIZE
 
   test('it renders the 16x16 icon by default', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" />`);
+    await render(<template><Icon @name="activity" /></template>);
     assert
       .dom('svg.hds-icon.hds-icon-activity')
       .hasStyle({ height: '16px', width: '16px' })
@@ -27,7 +27,7 @@ module('Integration | Component | hds-icon', function (hooks) {
       .hasAttribute('height', '16');
   });
   test('it renders the 24x24 icon when the "size" option is set', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" @size="24" />`);
+    await render(<template><Icon @name="activity" @size="24" /></template>);
     assert
       .dom('svg.hds-icon.hds-icon-activity')
       .hasStyle({ height: '24px', width: '24px' })
@@ -36,7 +36,7 @@ module('Integration | Component | hds-icon', function (hooks) {
   });
   test('it sets the width/height to 100% when the "stretched" option is set to true', async function (assert) {
     await render(
-      hbs`<Hds::Icon @name="activity" @size="24" @stretched={{true}} />`,
+      <template><Icon @name="activity" @size="24" @stretched={{true}} /></template>,
     );
     assert
       .dom('svg.hds-icon.hds-icon-activity')
@@ -47,41 +47,41 @@ module('Integration | Component | hds-icon', function (hooks) {
   // DISPLAY
 
   test('it does not have the "hds-icon--is-inline" class by default', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" />`);
+    await render(<template><Icon @name="activity" /></template>);
     assert.dom('svg.hds-icon').doesNotHaveClass('hds-icon--is-inline');
   });
   test('it does have the "hds-icon--is-inline" class if the `@isInline` option is set to `true`', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" @isInline={{true}} />`);
+    await render(<template><Icon @name="activity" @isInline={{true}} /></template>);
     assert.dom('svg.hds-icon').hasClass('hds-icon--is-inline');
   });
 
   // COLOR
 
   test('the fill color should be `currentColor` if no @color is declared', async function (assert) {
-    await render(hbs`<Hds::Icon @name="alert-circle" />`);
+    await render(<template><Icon @name="alert-circle" /></template>);
     assert.dom(`svg.hds-icon`).hasAttribute('fill', 'currentColor');
   });
   test('it should render the correct CSS color class if the @color prop is declared using a pre-defined color', async function (assert) {
-    await render(hbs`<Hds::Icon @name="alert-circle" @color="highlight" />`);
+    await render(<template><Icon @name="alert-circle" @color="highlight" /></template>);
     // notice: we use CSS helper classes for the color definitions
     assert.dom(`svg.hds-icon`).hasClass('hds-foreground-highlight');
     assert.dom(`svg.hds-icon`).hasAttribute('fill', 'currentColor');
   });
   test('it should render the correct style if the @color prop is declared as custom CSS property color', async function (assert) {
     await render(
-      hbs`<Hds::Icon @name="alert-circle" @color="var(--doc-color-feedback-critical-100)" />`,
+      <template><Icon @name="alert-circle" @color="var(--doc-color-feedback-critical-100)" /></template>,
     );
     assert
       .dom(`svg.hds-icon`)
       .hasAttribute('fill', 'var(--doc-color-feedback-critical-100)');
   });
   test('it should render the correct style if the @color prop is declared as custom HEX color', async function (assert) {
-    await render(hbs`<Hds::Icon @name="alert-circle" @color="#FF0000" />`);
+    await render(<template><Icon @name="alert-circle" @color="#FF0000" /></template>);
     assert.dom(`svg.hds-icon`).hasAttribute('fill', '#FF0000');
   });
   test('the fill color should be able to be inherited from parent', async function (assert) {
     await render(
-      hbs`<div style="color:blue;"><Hds::Icon @name="alert-circle" /></div>`,
+      <template><div style="color:blue;"><Icon @name="alert-circle" /></div></template>,
     );
     assert.dom(`svg.hds-icon`).hasStyle({
       fill: 'rgb(0, 0, 255)',
@@ -91,38 +91,38 @@ module('Integration | Component | hds-icon', function (hooks) {
   // A11Y
 
   test('it renders the title if one is defined', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" @title="try to avoid" />`);
+    await render(<template><Icon @name="activity" @title="try to avoid" /></template>);
     assert.dom('title').containsText('try to avoid');
   });
   test('it has aria-hidden set to true', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" />`);
+    await render(<template><Icon @name="activity" /></template>);
     assert.dom('svg.hds-icon.hds-icon-activity').hasAria('hidden', 'true');
   });
   test('it has aria-hidden set to false if a title is defined', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" @title="try to avoid" />`);
+    await render(<template><Icon @name="activity" @title="try to avoid" /></template>);
     assert.dom('svg.hds-icon.hds-icon-activity').hasAria('hidden', 'false');
   });
   test('it has aria-labelledby if a title exists', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" @title="try to avoid" />`);
+    await render(<template><Icon @name="activity" @title="try to avoid" /></template>);
     assert
       .dom('svg.hds-icon.hds-icon-activity')
       .hasAttribute('aria-labelledby');
   });
   test('it does not have aria-labelledby if a title does not exist', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" />`);
+    await render(<template><Icon @name="activity" /></template>);
     assert
       .dom('svg.hds-icon.hds-icon-activity')
       .doesNotHaveAttribute('aria-labelledby');
   });
   test('it has a g element with role of presentation if a title exists', async function (assert) {
-    await render(hbs`<Hds::Icon @name="activity" @title="computer says no" />`);
+    await render(<template><Icon @name="activity" @title="computer says no" /></template>);
     assert.dom('svg > g').hasAttribute('role');
   });
 
   // ATTRIBUTES
 
   test('additional classes can be added when component is invoked', async function (assert) {
-    await render(hbs`<Hds::Icon @name="meh" class="demo" />`);
+    await render(<template><Icon @name="meh" class="demo" /></template>);
     assert.dom(`svg.hds-icon`).hasClass('demo');
   });
 
@@ -134,7 +134,7 @@ module('Integration | Component | hds-icon', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Icon />`);
+    await render(<template><Icon /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -145,7 +145,7 @@ module('Integration | Component | hds-icon', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Icon @name="abc" />`);
+    await render(<template><Icon @name="abc" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/interactive/index-test.js b/showcase/tests/integration/components/hds/interactive/index-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/interactive/index-test.js
rename to showcase/tests/integration/components/hds/interactive/index-test.gjs
index 1e57b38f6e7..5f9ce9710c1 100644
--- a/showcase/tests/integration/components/hds/interactive/index-test.js
+++ b/showcase/tests/integration/components/hds/interactive/index-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, triggerKeyEvent } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Interactive from "@hashicorp/design-system-components/components/hds/interactive/index";
+import { on } from "@ember/modifier";
 
 module('Integration | Component | hds/interactive/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -14,24 +15,24 @@ module('Integration | Component | hds/interactive/index', function (hooks) {
   // notice: since this element can generate different HTML element, to make the tests even more solid, in the DOM selectors we prefix the #ID of the element with the tag name
 
   test('it renders the interactive container', async function (assert) {
-    await render(hbs`<Hds::Interactive />`);
+    await render(<template><Interactive /></template>);
     assert.dom(this.element).exists();
   });
 
   // GENERATED ELEMENTS
 
   test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-    await render(hbs`<Hds::Interactive id="test-interactive" />`);
+    await render(<template><Interactive id="test-interactive" /></template>);
     assert.dom('#test-interactive').hasTagName('button');
   });
   test('it should render a <a> link if @href is passed', async function (assert) {
-    await render(hbs`<Hds::Interactive @href="#" id="test-interactive" />`);
+    await render(<template><Interactive @href="#" id="test-interactive" /></template>);
     assert.dom('#test-interactive').hasTagName('a');
     assert.dom('#test-interactive').hasAttribute('href', '#');
   });
   test('it should render a <a> link if @route is passed', async function (assert) {
     await render(
-      hbs`<Hds::Interactive @route="page-utilities.interactive" id="test-interactive" />`,
+      <template><Interactive @route="page-utilities.interactive" id="test-interactive" /></template>,
     );
     assert.dom('#test-interactive').hasTagName('a');
     assert
@@ -42,20 +43,20 @@ module('Integration | Component | hds/interactive/index', function (hooks) {
   // TARGET/REL ATTRIBUTES
 
   test('it should render a <a> link with the right "target" and "rel" attributes if @href is passed', async function (assert) {
-    await render(hbs`<Hds::Interactive @href="#" id="test-interactive" />`);
+    await render(<template><Interactive @href="#" id="test-interactive" /></template>);
     assert.dom('#test-interactive').hasAttribute('target', '_blank');
     assert.dom('#test-interactive').hasAttribute('rel', 'noopener noreferrer');
   });
   test('it should render a <a> link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) {
     await render(
-      hbs`<Hds::Interactive @href="#" id="test-interactive" target="test-target" rel="test-rel" />`,
+      <template><Interactive @href="#" id="test-interactive" target="test-target" rel="test-rel" /></template>,
     );
     assert.dom('#test-interactive').hasAttribute('target', 'test-target');
     assert.dom('#test-interactive').hasAttribute('rel', 'test-rel');
   });
   test('it should render a <a> link withhout "target" and "rel" attributes if @isHrefExternal is false', async function (assert) {
     await render(
-      hbs`<Hds::Interactive @href="#" @isHrefExternal={{false}} id="test-interactive" />`,
+      <template><Interactive @href="#" @isHrefExternal={{false}} id="test-interactive" /></template>,
     );
     assert.dom('#test-interactive').doesNotHaveAttribute('target');
     assert.dom('#test-interactive').doesNotHaveAttribute('rel');
@@ -65,21 +66,21 @@ module('Integration | Component | hds/interactive/index', function (hooks) {
 
   test('it should yield the children of the <button> element', async function (assert) {
     await render(
-      hbs`<Hds::Interactive id="test-interactive"><pre>test</pre></Hds::Interactive>`,
+      <template><Interactive id="test-interactive"><pre>test</pre></Interactive></template>,
     );
     assert.dom('button#test-interactive > pre').exists();
     assert.dom('button#test-interactive > pre').hasText('test');
   });
   test('it should yield the children of the <a> element', async function (assert) {
     await render(
-      hbs`<Hds::Interactive @href="#" id="test-interactive"><pre>test</pre></Hds::Interactive>`,
+      <template><Interactive @href="#" id="test-interactive"><pre>test</pre></Interactive></template>,
     );
     assert.dom('a#test-interactive > pre').exists();
     assert.dom('a#test-interactive > pre').hasText('test');
   });
   test('it should yield the children of the <LinkTo> element', async function (assert) {
     await render(
-      hbs`<Hds::Interactive @route="index" id="test-interactive"><pre>test</pre></Hds::Interactive>`,
+      <template><Interactive @route="index" id="test-interactive"><pre>test</pre></Interactive></template>,
     );
     assert.dom('a#test-interactive > pre').exists();
     assert.dom('a#test-interactive > pre').hasText('test');
@@ -88,18 +89,18 @@ module('Integration | Component | hds/interactive/index', function (hooks) {
   // A11Y
 
   test('it should render with the correct button "type" by default', async function (assert) {
-    await render(hbs`<Hds::Interactive id="test-interactive" />`);
+    await render(<template><Interactive id="test-interactive" /></template>);
     assert.dom('button#test-interactive').hasAttribute('type', 'button');
   });
   test('it should have a custom type if @type is set', async function (assert) {
-    await render(hbs`<Hds::Interactive id="test-interactive" type="submit" />`);
+    await render(<template><Interactive id="test-interactive" type="submit" /></template>);
     assert.dom('button#test-interactive').hasAttribute('type', 'submit');
   });
   test('it should dispatch a click event when pressing space key on a link', async function (assert) {
     let clicked = false;
     this.set('clickHandler', () => (clicked = true));
     await render(
-      hbs`<div {{on "click" this.clickHandler}}><Hds::Interactive @href="javascript:;" id="test-interactive"/></div>`,
+      <template><div {{on "click" this.clickHandler}}><Interactive @href="javascript:;" id="test-interactive" /></div></template>,
     );
     await triggerKeyEvent('#test-interactive', 'keyup', ' ');
     assert.ok(clicked);
diff --git a/showcase/tests/integration/components/hds/layout/flex/index-test.js b/showcase/tests/integration/components/hds/layout/flex/index-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/layout/flex/index-test.js
rename to showcase/tests/integration/components/hds/layout/flex/index-test.gjs
index 2ce34372ca1..4822ab92313 100644
--- a/showcase/tests/integration/components/hds/layout/flex/index-test.js
+++ b/showcase/tests/integration/components/hds/layout/flex/index-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Flex from "@hashicorp/design-system-components/components/hds/layout/flex/index";
+import { array } from "@ember/helper";
 
 module('Integration | Component | hds/layout/flex/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +17,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
+    await render(<template><Flex id="test-layout-flex" /></template>);
     assert.dom('#test-layout-flex').hasClass('hds-layout-flex');
   });
 
@@ -24,13 +25,13 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex id="test-layout-flex"><pre>test</pre></Hds::Layout::Flex>`,
+      <template><Flex id="test-layout-flex"><pre>test</pre></Flex></template>,
     );
     assert.dom('#test-layout-flex > pre').exists().hasText('test');
   });
   test('it should render the `Item` yielded contextual component', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex id="test-layout-flex" as |LF|><LF.Item><pre>test</pre></LF.Item></Hds::Layout::Flex>`,
+      <template><Flex id="test-layout-flex" as |LF|><LF.Item><pre>test</pre></LF.Item></Flex></template>,
     );
     assert
       .dom('#test-layout-flex > .hds-layout-flex-item > pre')
@@ -41,12 +42,12 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   // TAG
 
   test('it should render with a "div" element if @tag is not declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
+    await render(<template><Flex id="test-layout-flex" /></template>);
     assert.dom('#test-layout-flex').hasTagName('div');
   });
   test('it should render with the correct @tag declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex id="test-layout-flex" @tag="section" />`,
+      <template><Flex id="test-layout-flex" @tag="section" /></template>,
     );
     assert.dom('#test-layout-flex').hasTagName('section');
   });
@@ -54,12 +55,12 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   // DIRECTION
 
   test('it should render the element with `row` direction if no @direction is declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
+    await render(<template><Flex id="test-layout-flex" /></template>);
     assert.dom('#test-layout-flex').hasClass('hds-layout-flex--direction-row');
   });
   test('it should render the correct CSS class if the @direction prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex id="test-layout-flex" @direction="column" />`,
+      <template><Flex id="test-layout-flex" @direction="column" /></template>,
     );
     assert
       .dom('#test-layout-flex')
@@ -69,7 +70,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   // JUSTIFY / ALIGN / WRAP / IS-INLINE
 
   test('it should render the element without specific classes if no @justify/@align/@wrap/@isInline are declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
+    await render(<template><Flex id="test-layout-flex" /></template>);
     assert
       .dom('#test-layout-flex')
       .doesNotHaveClass(/hds-layout-flex--justify-content-/)
@@ -79,7 +80,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   });
   test('it should render the correct CSS classes if the @justify/@align/@wrap/@isInline props are declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex id="test-layout-flex" @justify="space-between" @align="stretch" @wrap={{true}} @isInline={{true}} />`,
+      <template><Flex id="test-layout-flex" @justify="space-between" @align="stretch" @wrap={{true}} @isInline={{true}} /></template>,
     );
     assert
       .dom('#test-layout-flex')
@@ -92,14 +93,14 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   // GAP
 
   test('it should render the element with the default `gap` class if no @gap is declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex id="test-layout-flex" />`);
+    await render(<template><Flex id="test-layout-flex" /></template>);
     assert
       .dom('#test-layout-flex')
       .hasClass('hds-layout-flex--row-gap-0')
       .hasClass('hds-layout-flex--column-gap-0');
   });
   test('it should render the correct CSS classes if the @gap prop is declared as single value', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex id="test-layout-flex" @gap="24" />`);
+    await render(<template><Flex id="test-layout-flex" @gap="24" /></template>);
     assert
       .dom('#test-layout-flex')
       .hasClass('hds-layout-flex--row-gap-24')
@@ -107,7 +108,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   });
   test('it should render the correct CSS class if the @gap prop is declared as a couple of values', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex id="test-layout-flex" @gap={{array "4" "48"}} />`,
+      <template><Flex id="test-layout-flex" @gap={{array "4" "48"}} /></template>,
     );
     assert
       .dom('#test-layout-flex')
@@ -124,7 +125,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Layout::Flex @direction="foo" />`);
+    await render(<template><Flex @direction="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -136,7 +137,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Layout::Flex @justify="foo" />`);
+    await render(<template><Flex @justify="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -148,7 +149,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Layout::Flex @align="foo" />`);
+    await render(<template><Flex @align="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -160,7 +161,7 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Layout::Flex @gap={{array 4 "foo"}} />`);
+    await render(<template><Flex @gap={{array 4 "foo"}} /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/layout/flex/item-test.js b/showcase/tests/integration/components/hds/layout/flex/item-test.gjs
similarity index 84%
rename from showcase/tests/integration/components/hds/layout/flex/item-test.js
rename to showcase/tests/integration/components/hds/layout/flex/item-test.gjs
index 8a14fd24d21..d99c4d06e4c 100644
--- a/showcase/tests/integration/components/hds/layout/flex/item-test.js
+++ b/showcase/tests/integration/components/hds/layout/flex/item-test.gjs
@@ -6,13 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/layout/flex/item";
+import Flex from "@hashicorp/design-system-components/components/hds/layout/flex/index";
 
 module('Integration | Component | hds/layout/flex/item', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Layout::Flex::Item id="test-layout-flex-item" />`);
+    await render(<template><Item id="test-layout-flex-item" /></template>);
     assert.dom('#test-layout-flex-item').hasClass('hds-layout-flex-item');
   });
 
@@ -20,13 +21,13 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex::Item id="test-layout-flex-item"><pre>test</pre></Hds::Layout::Flex::Item>`,
+      <template><Item id="test-layout-flex-item"><pre>test</pre></Item></template>,
     );
     assert.dom('#test-layout-flex-item > pre').exists().hasText('test');
   });
   test('it should render as yielded contextual component', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item"><pre>test</pre></LF.Item></Hds::Layout::Flex>`,
+      <template><Flex as |LF|><LF.Item id="test-layout-flex-item"><pre>test</pre></LF.Item></Flex></template>,
     );
     assert.dom('#test-layout-flex-item > pre').exists().hasText('test');
   });
@@ -35,13 +36,13 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
 
   test('it should render with a "div" element if @tag is not declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" /></Hds::Layout::Flex>`,
+      <template><Flex as |LF|><LF.Item id="test-layout-flex-item" /></Flex></template>,
     );
     assert.dom('#test-layout-flex-item').hasTagName('div');
   });
   test('it should render with the correct @tag declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" @tag="span" /></Hds::Layout::Flex>`,
+      <template><Flex as |LF|><LF.Item id="test-layout-flex-item" @tag="span" /></Flex></template>,
     );
     assert.dom('#test-layout-flex-item').hasTagName('span');
   });
@@ -50,7 +51,7 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
 
   test('it should render the element without specific classes or inline styles if no @basis/@grow/@shrink are declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" /></Hds::Layout::Flex>`,
+      <template><Flex as |LF|><LF.Item id="test-layout-flex-item" /></Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item')
@@ -61,9 +62,9 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
   });
   test('it should render the correct CSS class if the @basis prop is declared as 0', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|>
+      <template><Flex as |LF|>
         <LF.Item id="test-layout-flex-item-1" @basis={{0}} />
-      </Hds::Layout::Flex>`,
+      </Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item-1')
@@ -72,12 +73,12 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
   });
   test('it should render the correct inline styles if the @basis prop is declared as string', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|>
+      <template><Flex as |LF|>
         <LF.Item id="test-layout-flex-item-1" @basis="5%" />
         <LF.Item id="test-layout-flex-item-2" @basis="100px" />
         <LF.Item id="test-layout-flex-item-3" @basis="auto" />
         <LF.Item id="test-layout-flex-item-4" @basis="max-content" />
-      </Hds::Layout::Flex>`,
+      </Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item-1')
@@ -98,12 +99,12 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
   });
   test('it should render the correct CSS class if the @grow/@shrink props are declared as boolean or 0/1', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|>
+      <template><Flex as |LF|>
         <LF.Item id="test-layout-flex-item-1" @grow={{false}} @shrink={{false}} />
         <LF.Item id="test-layout-flex-item-2" @grow={{0}} @shrink={{0}} />
         <LF.Item id="test-layout-flex-item-3" @grow={{true}} @shrink={{true}} />
         <LF.Item id="test-layout-flex-item-4" @grow={{1}} @shrink={{1}} />
-      </Hds::Layout::Flex>`,
+      </Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item-1')
@@ -128,12 +129,12 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
   });
   test('it should render the correct inline styles if the @grow/@shrink props are declared as strings/numbers', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|>
+      <template><Flex as |LF|>
         <LF.Item id="test-layout-flex-item-1" @grow="0" @shrink="0" />
         <LF.Item id="test-layout-flex-item-2" @grow="1" @shrink="1" />
         <LF.Item id="test-layout-flex-item-3" @grow={{2}} @shrink={{2}} />
         <LF.Item id="test-layout-flex-item-4" @grow="initial" @shrink="initial" />
-      </Hds::Layout::Flex>`,
+      </Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item-1')
@@ -158,7 +159,7 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
 
   test('it should render the element without specific classes if no @enableCollapseBelowContentSize is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" /></Hds::Layout::Flex>`,
+      <template><Flex as |LF|><LF.Item id="test-layout-flex-item" /></Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item')
@@ -168,7 +169,7 @@ module('Integration | Component | hds/layout/flex/item', function (hooks) {
   });
   test('it should render the correct CSS class if the @enableCollapseBelowContentSize prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Flex as |LF|><LF.Item id="test-layout-flex-item" @enableCollapseBelowContentSize={{true}} /></Hds::Layout::Flex>`,
+      <template><Flex as |LF|><LF.Item id="test-layout-flex-item" @enableCollapseBelowContentSize={{true}} /></Flex></template>,
     );
     assert
       .dom('#test-layout-flex-item')
diff --git a/showcase/tests/integration/components/hds/layout/grid/index-test.js b/showcase/tests/integration/components/hds/layout/grid/index-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/layout/grid/index-test.js
rename to showcase/tests/integration/components/hds/layout/grid/index-test.gjs
index 26159853b56..471883685da 100644
--- a/showcase/tests/integration/components/hds/layout/grid/index-test.js
+++ b/showcase/tests/integration/components/hds/layout/grid/index-test.gjs
@@ -6,13 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Grid from "@hashicorp/design-system-components/components/hds/layout/grid/index";
+import { array } from "@ember/helper";
 
 module('Integration | Component | hds/layout/grid/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    await render(<template><Grid id="test-layout-grid" /></template>);
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid');
   });
 
@@ -20,17 +21,17 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid"><pre>test</pre></Hds::Layout::Grid>`,
+      <template><Grid id="test-layout-grid"><pre>test</pre></Grid></template>,
     );
     assert.dom('#test-layout-grid > pre').exists().hasText('test');
   });
 
   test('it should render the `Item` yielded contextual component', async function (assert) {
     await render(
-      hbs`
-        <Hds::Layout::Grid id="test-layout-grid" as |LG|>
+      <template>
+        <Grid id="test-layout-grid" as |LG|>
           <LG.Item><pre>test</pre></LG.Item>
-        </Hds::Layout::Grid>`,
+        </Grid></template>,
     );
     assert
       .dom('#test-layout-grid > .hds-layout-grid-item > pre')
@@ -48,7 +49,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   // if neither columnMinWidth or columnWidth are declared, we do not set the inline custom properties
   test('if neither columnMinWidth or columnWidth are declared, we do not set the inline custom properties', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    await render(<template><Grid id="test-layout-grid" /></template>);
     assert
       .dom('#test-layout-grid')
       .doesNotHaveStyle('--hds-layout-grid-column-min-width')
@@ -57,7 +58,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the correct min-width if the @columnMinWidth prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @columnMinWidth="200px" />`,
+      <template><Grid id="test-layout-grid" @columnMinWidth="200px" /></template>,
     );
     assert
       .dom('#test-layout-grid')
@@ -66,7 +67,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should set the correct fill type and column width if the @columnWidth prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @columnWidth="200px" />`,
+      <template><Grid id="test-layout-grid" @columnWidth="200px" /></template>,
     );
     assert
       .dom('#test-layout-grid')
@@ -77,13 +78,13 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
   // TAG
 
   test('it should render with a "div" element if @tag is not declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    await render(<template><Grid id="test-layout-grid" /></template>);
     assert.dom('#test-layout-grid').hasTagName('div');
   });
 
   test('it should render with the correct @tag declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @tag="section" />`,
+      <template><Grid id="test-layout-grid" @tag="section" /></template>,
     );
     assert.dom('#test-layout-grid').hasTagName('section');
   });
@@ -91,7 +92,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
   // ALIGN
 
   test('it should render the element without specific classes if @align is not declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    await render(<template><Grid id="test-layout-grid" /></template>);
     assert
       .dom('#test-layout-grid')
       .doesNotHaveClass(/hds-layout-grid--align-items-/);
@@ -99,7 +100,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the correct CSS classes if @align props are declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @align="stretch" @wrap={{true}} />`,
+      <template><Grid id="test-layout-grid" @align="stretch" @wrap={{true}} /></template>,
     );
     assert
       .dom('#test-layout-grid')
@@ -109,13 +110,13 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
   // GAP
 
   test('it should render the element with the default `gap` class if no @gap is declared', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" />`);
+    await render(<template><Grid id="test-layout-grid" /></template>);
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid--row-gap-0');
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid--column-gap-0');
   });
 
   test('it should render the correct CSS classes if the @gap prop is declared as a single value', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid id="test-layout-grid" @gap="24" />`);
+    await render(<template><Grid id="test-layout-grid" @gap="24" /></template>);
     assert
       .dom('#test-layout-grid')
       .hasClass('hds-layout-grid--row-gap-24')
@@ -124,7 +125,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the correct CSS class if the @gap prop is declared as two values', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @gap={{array "4" "48"}} />`,
+      <template><Grid id="test-layout-grid" @gap={{array "4" "48"}} /></template>,
     );
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid--row-gap-4');
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid--column-gap-48');
@@ -139,7 +140,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Layout::Grid @align="foo" />`);
+    await render(<template><Grid @align="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -152,7 +153,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Layout::Grid @gap={{array 4 "foo"}} />`);
+    await render(<template><Grid @gap={{array 4 "foo"}} /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -166,7 +167,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Layout::Grid id="test-layout-grid" @columnMinWidth="200px" @columnWidth="300px" />`,
+      <template><Grid id="test-layout-grid" @columnMinWidth="200px" @columnWidth="300px" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/layout/grid/item-test.js b/showcase/tests/integration/components/hds/layout/grid/item-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/layout/grid/item-test.js
rename to showcase/tests/integration/components/hds/layout/grid/item-test.gjs
index dd88d377138..f559d72bc9e 100644
--- a/showcase/tests/integration/components/hds/layout/grid/item-test.js
+++ b/showcase/tests/integration/components/hds/layout/grid/item-test.gjs
@@ -6,13 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/layout/grid/item";
+import Grid from "@hashicorp/design-system-components/components/hds/layout/grid/index";
 
 module('Integration | Component | hds/layout/grid/item', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item" />`);
+    await render(<template><Item id="test-layout-grid-item" /></template>);
     assert.dom('#test-layout-grid-item').hasClass('hds-layout-grid-item');
   });
 
@@ -20,14 +21,14 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item"><pre>test</pre></Hds::Layout::Grid::Item>`,
+      <template><Item id="test-layout-grid-item"><pre>test</pre></Item></template>,
     );
     assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
   });
 
   test('it should render as yielded contextual component', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item"><pre>test</pre></LG.Item></Hds::Layout::Grid>`,
+      <template><Grid as |LG|><LG.Item id="test-layout-grid-item"><pre>test</pre></LG.Item></Grid></template>,
     );
     assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
   });
@@ -36,14 +37,14 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   test('it should render with a "div" element if @tag is not declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item" /></Hds::Layout::Grid>`,
+      <template><Grid as |LG|><LG.Item id="test-layout-grid-item" /></Grid></template>,
     );
     assert.dom('#test-layout-grid-item').hasTagName('div');
   });
 
   test('it should render with the correct @tag declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid as |LG|><LG.Item id="test-layout-grid-item" @tag="span" /></Hds::Layout::Grid>`,
+      <template><Grid as |LG|><LG.Item id="test-layout-grid-item" @tag="span" /></Grid></template>,
     );
     assert.dom('#test-layout-grid-item').hasTagName('span');
   });
@@ -52,7 +53,7 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   // Note: A fallback value of 1 is set in the CSS for the `--hds-layout-grid-column-span` custom property
   test('if the @colspan prop is not declared, --hds-layout-grid-column-span should be unset', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid-item" />`);
+    await render(<template><Item id="test-layout-grid-item" /></template>);
     assert
       .dom('#test-layout-grid-item')
       .doesNotHaveStyle('--hds-layout-grid-column-span');
@@ -60,7 +61,7 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   test('it should render the correct column span if the @colspan prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid::Item id="test-layout-grid" @colspan={{2}} />`,
+      <template><Item id="test-layout-grid" @colspan={{2}} /></template>,
     );
     assert
       .dom('#test-layout-grid')
@@ -71,7 +72,7 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   // Note: A fallback value of 1 is set in the CSS for the `--hds-layout-grid-row-span` custom property
   test('if the @rowspan prop is not declared, --hds-layout-grid-row-span should be unset', async function (assert) {
-    await render(hbs`<Hds::Layout::Grid::Item id="test-layout-grid" />`);
+    await render(<template><Item id="test-layout-grid" /></template>);
     assert
       .dom('#test-layout-grid')
       .doesNotHaveStyle('--hds-layout-grid-row-span');
@@ -79,7 +80,7 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   test('it should render the correct row span if the @rowspan prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Layout::Grid::Item id="test-layout-grid" @rowspan={{2}} />`,
+      <template><Item id="test-layout-grid" @rowspan={{2}} /></template>,
     );
     assert
       .dom('#test-layout-grid')
diff --git a/showcase/tests/integration/components/hds/link/inline-test.js b/showcase/tests/integration/components/hds/link/inline-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/link/inline-test.js
rename to showcase/tests/integration/components/hds/link/inline-test.gjs
index 5a4f10161e8..6ff78f83f28 100644
--- a/showcase/tests/integration/components/hds/link/inline-test.js
+++ b/showcase/tests/integration/components/hds/link/inline-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Inline from "@hashicorp/design-system-components/components/hds/link/inline";
 
 module('Integration | Component | hds/link/inline', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" id="test-link">watch video</Hds::Link::Inline>`,
+      <template><Inline @href="/" id="test-link">watch video</Inline></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-inline');
   });
@@ -25,14 +25,14 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should render the icon in the trailing position by default', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" @icon="film" id="test-link">watch video</Hds::Link::Inline>`,
+      <template><Inline @href="/" @icon="film" id="test-link">watch video</Inline></template>,
     );
     assert.dom('#test-link .hds-link-inline__icon').exists();
     assert.dom('#test-link ').hasClass('hds-link-inline--icon-trailing');
   });
   test('it should render the icon in the leading position if @iconPosition is set to leading', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" @icon="film" @iconPosition="leading" id="test-link">watch video</Hds::Link::Inline>`,
+      <template><Inline @href="/" @icon="film" @iconPosition="leading" id="test-link">watch video</Inline></template>,
     );
     assert.dom('#test-link ').hasClass('hds-link-inline--icon-leading');
   });
@@ -41,13 +41,13 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should render the primary color as the default if no @color prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" id="test-link">watch video</Hds::Link::Inline>`,
+      <template><Inline @href="/" id="test-link">watch video</Inline></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-inline--color-primary');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" @color="secondary" id="test-link">watch video</Hds::Link::Inline>`,
+      <template><Inline @href="/" @color="secondary" id="test-link">watch video</Inline></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-inline--color-secondary');
   });
@@ -56,7 +56,7 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should yield the children of the <a> element', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" id="test-link"><span>test</span></Hds::Link::Inline>`,
+      <template><Inline @href="/" id="test-link"><span>test</span></Inline></template>,
     );
     assert.dom('#test-link > span').exists();
     assert.dom('#test-link > span').hasText('test');
@@ -65,20 +65,20 @@ module('Integration | Component | hds/link/inline', function (hooks) {
   // TARGET/REL ATTRIBUTES
 
   test('it should render a <a> link with the right "target" and "rel" attributes if @href is passed', async function (assert) {
-    await render(hbs`<Hds::Link::Inline @href="/" id="test-link" />`);
+    await render(<template><Inline @href="/" id="test-link" /></template>);
     assert.dom('#test-link').hasAttribute('target', '_blank');
     assert.dom('#test-link').hasAttribute('rel', 'noopener noreferrer');
   });
   test('it should render a <a> link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" id="test-link" target="test-target" rel="test-rel" />`,
+      <template><Inline @href="/" id="test-link" target="test-target" rel="test-rel" /></template>,
     );
     assert.dom('#test-link').hasAttribute('target', 'test-target');
     assert.dom('#test-link').hasAttribute('rel', 'test-rel');
   });
   test('it should render a <a> link withhout "target" and "rel" attributes if @isHrefExternal is false', async function (assert) {
     await render(
-      hbs`<Hds::Link::Inline @href="/" @isHrefExternal={{false}} id="test-link" />`,
+      <template><Inline @href="/" @isHrefExternal={{false}} id="test-link" /></template>,
     );
     assert.dom('#test-link').doesNotHaveAttribute('target');
     assert.dom('#test-link').doesNotHaveAttribute('rel');
@@ -93,7 +93,7 @@ module('Integration | Component | hds/link/inline', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Link::Inline>watch video</Hds::Link::Inline>`);
+    await render(<template><Inline>watch video</Inline></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -106,7 +106,7 @@ module('Integration | Component | hds/link/inline', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Link::Inline @icon="film" @text="watch video" @href="/" @color="foo" />`,
+      <template><Inline @icon="film" @text="watch video" @href="/" @color="foo" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/link/standalone-test.js b/showcase/tests/integration/components/hds/link/standalone-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/link/standalone-test.js
rename to showcase/tests/integration/components/hds/link/standalone-test.gjs
index ef5e49af9d1..833313d1594 100644
--- a/showcase/tests/integration/components/hds/link/standalone-test.js
+++ b/showcase/tests/integration/components/hds/link/standalone-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Standalone from "@hashicorp/design-system-components/components/hds/link/standalone";
 
 module('Integration | Component | hds/link/standalone', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone');
   });
@@ -25,13 +25,13 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the medium size if no size is declared', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" @size="small" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" @size="small" /></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--size-small');
   });
@@ -40,13 +40,13 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the primary color as the default if no color is declared', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--color-primary');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" @color="secondary" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" @color="secondary" id="test-link" /></template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--color-secondary');
   });
@@ -55,13 +55,13 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the icon in the leading position by default', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
     );
     assert.dom('.hds-link-standalone__icon').matchesSelector(':first-child');
   });
   test('it should render the icon in the trailing position if @iconPosition is set to trailing', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" @iconPosition="trailing" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" @iconPosition="trailing" id="test-link" /></template>,
     );
     assert.dom('.hds-link-standalone__icon').matchesSelector(':last-child');
   });
@@ -70,7 +70,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it renders a link with the defined text', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="Copy to clipboard" @href="/" @icon="film" id="test-link" />`,
+      <template><Standalone @text="Copy to clipboard" @href="/" @icon="film" id="test-link" /></template>,
     );
     assert.dom('#test-link').hasText('Copy to clipboard');
   });
@@ -79,21 +79,21 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render a <a> link with the right "target" and "rel" attributes if @href is passed', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
     );
     assert.dom('#test-link').hasAttribute('target', '_blank');
     assert.dom('#test-link').hasAttribute('rel', 'noopener noreferrer');
   });
   test('it should render a <a> link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" id="test-link" target="test-target" rel="test-rel" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" target="test-target" rel="test-rel" /></template>,
     );
     assert.dom('#test-link').hasAttribute('target', 'test-target');
     assert.dom('#test-link').hasAttribute('rel', 'test-rel');
   });
   test('it should render a <a> link without "target" and "rel" attributes if @isHrefExternal is false', async function (assert) {
     await render(
-      hbs`<Hds::Link::Standalone @text="watch video" @href="/" @icon="film" @isHrefExternal={{false}} id="test-link" />`,
+      <template><Standalone @text="watch video" @href="/" @icon="film" @isHrefExternal={{false}} id="test-link" /></template>,
     );
     assert.dom('#test-link').doesNotHaveAttribute('target');
     assert.dom('#test-link').doesNotHaveAttribute('rel');
@@ -108,7 +108,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Link::Standalone @text="watch video" />`);
+    await render(<template><Standalone @text="watch video" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -120,7 +120,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Link::Standalone @icon="film" @href="/" />`);
+    await render(<template><Standalone @icon="film" @href="/" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -132,7 +132,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Link::Standalone @href="/" @text="watch video" />`);
+    await render(<template><Standalone @href="/" @text="watch video" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -145,7 +145,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Link::Standalone @icon="film" @href="/" @text="watch video" @iconPosition="after" />`,
+      <template><Standalone @icon="film" @href="/" @text="watch video" @iconPosition="after" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -159,7 +159,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Link::Standalone @icon="film" @text="watch video" @href="/" @size="tiny" />`,
+      <template><Standalone @icon="film" @text="watch video" @href="/" @size="tiny" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -173,7 +173,7 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Link::Standalone @icon="film" @text="watch video" @href="/" @color="foo" />`,
+      <template><Standalone @icon="film" @text="watch video" @href="/" @color="foo" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/menu-primitive/index-test.js b/showcase/tests/integration/components/hds/menu-primitive/index-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/menu-primitive/index-test.js
rename to showcase/tests/integration/components/hds/menu-primitive/index-test.gjs
index d284b683bb4..6fbc5b3d236 100644
--- a/showcase/tests/integration/components/hds/menu-primitive/index-test.js
+++ b/showcase/tests/integration/components/hds/menu-primitive/index-test.gjs
@@ -5,14 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  click,
-  triggerEvent,
-  triggerKeyEvent,
-  render,
-  resetOnerror,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { click, triggerEvent, triggerKeyEvent, render, resetOnerror } from '@ember/test-helpers';
+import MenuPrimitive from "@hashicorp/design-system-components/components/hds/menu-primitive/index";
+import { on } from "@ember/modifier";
 
 module('Integration | Component | hds/menu-primitive/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,35 +17,35 @@ module('Integration | Component | hds/menu-primitive/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::MenuPrimitive id="test-menu-primitive" />`);
+    await render(<template><MenuPrimitive id="test-menu-primitive" /></template>);
     assert.dom('div#test-menu-primitive').hasClass('hds-menu-primitive');
   });
 
   // TOGGLE + CONTENT
 
   test('it should render the "toggle" block but not the "content', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive>
+    await render(<template>
+      <MenuPrimitive>
         <:toggle>
           <button type="button" id="test-menu-primitive-button" />
         </:toggle>
-      </Hds::MenuPrimitive>
-    `);
+      </MenuPrimitive>
+    </template>);
     assert.dom('.hds-menu-primitive__toggle').exists();
     assert.dom('button#test-menu-primitive-button').exists();
     assert.dom('.hds-menu-primitive__content').doesNotExist();
   });
   test('it should render the "content" when the "toggle" is clicked', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive>
+    await render(<template>
+      <MenuPrimitive>
         <:toggle as |t|>
           <button type="button" id="test-menu-primitive-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-menu-primitive-link" href="#">test</a>
         </:content>
-      </Hds::MenuPrimitive>
-    `);
+      </MenuPrimitive>
+    </template>);
     await click('button#test-menu-primitive-button');
     assert.dom('.hds-menu-primitive__content').exists();
     assert.dom('a#test-menu-primitive-link').exists();
@@ -59,16 +54,16 @@ module('Integration | Component | hds/menu-primitive/index', function (hooks) {
   // ESCAPE KEY
 
   test('it should hide the "content" when the "toggle" is deactivated via "Escape"', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive id="test-menu-primitive">
+    await render(<template>
+      <MenuPrimitive id="test-menu-primitive">
         <:toggle as |t|>
           <button type="button" id="test-menu-primitive-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-menu-primitive-link" href="#">test</a>
         </:content>
-      </Hds::MenuPrimitive>
-    `);
+      </MenuPrimitive>
+    </template>);
     await click('button#test-menu-primitive-button');
     assert.dom('.hds-menu-primitive__content').exists();
     assert.dom('a#test-menu-primitive-link').exists();
@@ -80,16 +75,16 @@ module('Integration | Component | hds/menu-primitive/index', function (hooks) {
   // FOCUS OUT
 
   test('it should hide the "content" when the focus is moved outside', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive id="test-menu-primitive">
+    await render(<template>
+      <MenuPrimitive id="test-menu-primitive">
         <:toggle as |t|>
           <button type="button" id="test-menu-primitive-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content>
           <a id="test-menu-primitive-link" href="#">test</a>
         </:content>
-      </Hds::MenuPrimitive>
-    `);
+      </MenuPrimitive>
+    </template>);
     await click('button#test-menu-primitive-button');
     assert.dom('.hds-menu-primitive__content').exists();
     assert.dom('a#test-menu-primitive-link').exists();
@@ -104,16 +99,16 @@ module('Integration | Component | hds/menu-primitive/index', function (hooks) {
   // CLOSE DISCLOSED CONTENT ON CLICK
 
   test('it should hide the "content" when an interactive element triggers `close`', async function (assert) {
-    await render(hbs`
-      <Hds::MenuPrimitive id="test-menu-primitive">
+    await render(<template>
+      <MenuPrimitive id="test-menu-primitive">
         <:toggle as |t|>
           <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
         </:toggle>
         <:content as |c|>
           <button id="test-content-button" {{on "click" c.close}}>test</button>
         </:content>
-      </Hds::MenuPrimitive>
-    `);
+      </MenuPrimitive>
+    </template>);
     await click('button#test-toggle-button');
     assert.dom('.hds-menu-primitive__content').exists();
     assert.dom('button#test-content-button').exists();
diff --git a/showcase/tests/integration/components/hds/modal/index-test.js b/showcase/tests/integration/components/hds/modal/index-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/modal/index-test.js
rename to showcase/tests/integration/components/hds/modal/index-test.gjs
index ea3e5afbddd..29df1ff9c78 100644
--- a/showcase/tests/integration/components/hds/modal/index-test.js
+++ b/showcase/tests/integration/components/hds/modal/index-test.gjs
@@ -4,20 +4,13 @@
  */
 
 import { module, test, skip } from 'qunit';
-import {
-  setupRenderingTest,
-  cleanupBodyOverflow,
-} from 'showcase/tests/helpers';
-import {
-  click,
-  render,
-  rerender,
-  triggerKeyEvent,
-  resetOnerror,
-  setupOnerror,
-  settled,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest, cleanupBodyOverflow } from 'showcase/tests/helpers';
+import { click, render, rerender, triggerKeyEvent, resetOnerror, setupOnerror, settled } from '@ember/test-helpers';
+import Modal from "@hashicorp/design-system-components/components/hds/modal/index";
+import Button from "@hashicorp/design-system-components/components/hds/button/index";
+import { on } from "@ember/modifier";
+import set from "ember-set-helper/helpers/set";
+import Dropdown from "@hashicorp/design-system-components/components/hds/dropdown/index";
 
 module('Integration | Component | hds/modal/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -29,7 +22,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('#test-modal').hasClass('hds-modal');
   });
@@ -38,7 +31,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the default vaules if no arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('#test-modal').hasClass('hds-modal--size-medium');
     assert.dom('#test-modal').hasClass('hds-modal--color-neutral');
@@ -46,7 +39,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('#test-modal').hasClass('hds-modal--size-small');
     assert.dom('#test-modal').hasClass('hds-modal--color-warning');
@@ -56,7 +49,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with an overlay element', async function (assert) {
     await render(
-      hbs`<Hds::Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('.hds-modal__overlay').isVisible();
   });
@@ -65,11 +58,11 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Body>Body</M.Body>
             <M.Footer>Footer</M.Footer>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('.hds-modal').exists();
     assert.dom('.hds-modal__header').exists();
@@ -84,9 +77,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it renders the title without icon and tagline if not provided', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('.hds-modal__title').exists();
     assert.dom('.hds-modal__title').hasText('Title');
@@ -95,9 +88,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
   test('it renders the title with icon and tagline if provided', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('.hds-modal__title').exists();
     assert.dom('.hds-modal__title').hasText('Tagline Title');
@@ -108,9 +101,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it renders the title as an h1', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('.hds-modal__title').hasTagName('h1');
   });
@@ -119,13 +112,13 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should always render the "dismiss" button', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('button.hds-modal__dismiss').exists();
   });
   test('it should close the modal when the "dismiss" button is pressed', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('#test-modal').isVisible();
     await click('button.hds-modal__dismiss');
@@ -133,11 +126,11 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
   test('it should close the modal when the "close" function is called', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Footer as |F|>
-              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
             </M.Footer>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('#test-modal').isVisible();
     await click('#cancel-button');
@@ -145,7 +138,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
   test('it should close the modal when the "esc" key is pressed', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('#test-modal').isVisible();
     await triggerKeyEvent('.hds-modal', 'keydown', 'Escape');
@@ -154,7 +147,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal when clicking outside', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.dom('#test-modal').isVisible();
     await click('.hds-modal__overlay');
@@ -164,12 +157,12 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   test('it should not close the modal when `@isDismissDisabled` is `true`', async function (assert) {
     this.set('isDismissDisabled', true);
     await render(
-      hbs`<Hds::Modal @isDismissDisabled={{this.isDismissDisabled}} id="test-modal" as |M|>
+      <template><Modal @isDismissDisabled={{this.isDismissDisabled}} id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer as |F|>
-              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
             </M.Footer>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     // top right dismiss button
     await click('button.hds-modal__dismiss');
@@ -195,7 +188,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal and remove the body overflow style - manual dismiss', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -210,7 +203,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal and remove the body overflow style - click outside', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -225,12 +218,12 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal and remove the body overflow style - dismiss via `F.close`', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer as |F|>
-              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
             </M.Footer>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -253,16 +246,16 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     );
 
     await render(
-      hbs`
+      <template>
         {{#if this.isModalRendered}}
-          <Hds::Modal id="test-modal" as |M|>
+          <Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer>
-              <Hds::Button id="confirm-button" type="button" @text="Confirm" @color="primary" {{on "click" this.deactivateModal}} />
+              <Button id="confirm-button" type="button" @text="Confirm" @color="primary" {{on "click" this.deactivateModal}} />
             </M.Footer>
-          </Hds::Modal>
+          </Modal>
         {{/if}}
-      `,
+      </template>,
     );
 
     assert.dom('#test-modal').doesNotExist();
@@ -290,19 +283,19 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     );
 
     await render(
-      hbs`
+      <template>
         {{#if this.isModalRendered}}
-          <Hds::Modal id="test-modal" as |M|>
+          <Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Body>
               <form id="test-form" {{on "submit" this.deactivateModalOnSubmit}} />
             </M.Body>
             <M.Footer>
-              <Hds::Button id="submit-button" form="test-form" type="submit" @text="Confirm" @color="primary" />
+              <Button id="submit-button" form="test-form" type="submit" @text="Confirm" @color="primary" />
             </M.Footer>
-          </Hds::Modal>
+          </Modal>
         {{/if}}
-      `,
+      </template>,
     );
 
     assert.dom('#test-modal').doesNotExist();
@@ -323,9 +316,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it uses the title as name for the dialog', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     // the IDs are dynamically generated
     let titleElement = this.element.querySelector('.hds-modal__title');
@@ -337,22 +330,22 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it sets initial focus on the dimiss button, as first focusable element', async function (assert) {
     await render(
-      hbs`<Hds::Modal id="test-modal" as |M|>
+      <template><Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('button.hds-modal__dismiss').isFocused();
   });
 
   test('it returns focus to the element that initiated the open event, if is still in the DOM', async function (assert) {
     await render(
-      hbs`<button id="test-button" type="button" {{on "click" (set this "showModal" true)}}>open modal</button>
+      <template><button id="test-button" type="button" {{on "click" (set this "showModal" true)}}>open modal</button>
           {{#if this.showModal}}
-            <Hds::Modal id="test-modal" as |M|>
+            <Modal id="test-modal" as |M|>
               <M.Header>Title</M.Header>
-            </Hds::Modal>
+            </Modal>
           {{/if}}
-          `,
+          </template>,
     );
     await click('#test-button');
     assert.true(this.showModal);
@@ -363,16 +356,16 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   // this test is flaky in CI, so skipping for now
   skip('it returns focus to the `body` element, if the one that initiated the open event not anymore in the DOM', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown as |D|>
+      <template><Dropdown as |D|>
             <D.ToggleButton id="test-toggle" @text="open modal" />
             <D.Interactive id="test-interactive" {{on "click" (set this "showModal" true)}}>open modal</D.Interactive>
-          </Hds::Dropdown>
+          </Dropdown>
           {{#if this.showModal}}
-            <Hds::Modal id="test-modal" as |M|>
+            <Modal id="test-modal" as |M|>
               <M.Header>Title</M.Header>
-            </Hds::Modal>
+            </Modal>
           {{/if}}
-          `,
+          </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
@@ -383,16 +376,16 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it returns focus to a specific element if provided via`@returnFocusTo`', async function (assert) {
     await render(
-      hbs`<Hds::Dropdown as |D|>
+      <template><Dropdown as |D|>
             <D.ToggleButton id="test-toggle" @text="open modal" />
             <D.Interactive id="test-interactive" {{on "click" (set this "showModal" true)}}>open modal</D.Interactive>
-          </Hds::Dropdown>
+          </Dropdown>
           {{#if this.showModal}}
-            <Hds::Modal id="test-modal" @returnFocusTo="test-toggle" as |M|>
+            <Modal id="test-modal" @returnFocusTo="test-toggle" as |M|>
               <M.Header>Title</M.Header>
-            </Hds::Modal>
+            </Modal>
           {{/if}}
-          `,
+          </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
@@ -407,9 +400,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     let opened = false;
     this.set('onOpen', () => (opened = true));
     await render(
-      hbs`<Hds::Modal id="test-modal-onopen-callback" @onOpen={{this.onOpen}} as |M|>
+      <template><Modal id="test-modal-onopen-callback" @onOpen={{this.onOpen}} as |M|>
             <M.Header>Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     assert.dom('#test-modal-onopen-callback').isVisible();
     await settled();
@@ -420,9 +413,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     let closed = false;
     this.set('onClose', () => (closed = true));
     await render(
-      hbs`<Hds::Modal id="test-modal-onclose-callback" @onClose={{this.onClose}} as |M|>
+      <template><Modal id="test-modal-onclose-callback" @onClose={{this.onClose}} as |M|>
             <M.Header>Title</M.Header>
-          </Hds::Modal>`,
+          </Modal></template>,
     );
     await click('#test-modal-onclose-callback button.hds-modal__dismiss');
     assert.dom('#test-modal-onclose-callback').isNotVisible();
@@ -440,7 +433,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Modal @size="foo" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal @size="foo" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -454,7 +447,7 @@ module('Integration | Component | hds/modal/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Modal @color="foo" as |M|><M.Header>Title</M.Header></Hds::Modal>`,
+      <template><Modal @color="foo" as |M|><M.Header>Title</M.Header></Modal></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/page-header/index-test.js b/showcase/tests/integration/components/hds/page-header/index-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/page-header/index-test.js
rename to showcase/tests/integration/components/hds/page-header/index-test.gjs
index b4e2d7b6b36..8708908620d 100644
--- a/showcase/tests/integration/components/hds/page-header/index-test.js
+++ b/showcase/tests/integration/components/hds/page-header/index-test.gjs
@@ -6,16 +6,18 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import PageHeader from "@hashicorp/design-system-components/components/hds/page-header/index";
+import Breadcrumb from "@hashicorp/design-system-components/components/hds/breadcrumb/index";
+import Item from "@hashicorp/design-system-components/components/hds/breadcrumb/item";
 
 module('Integration | Component | hds/page-header/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::PageHeader id="test-page-header" as |PH|>
+      <template><PageHeader id="test-page-header" as |PH|>
             <PH.Title>Page title</PH.Title>
-          </Hds::PageHeader>`,
+          </PageHeader></template>,
     );
     assert.dom('#test-page-header').hasClass('hds-page-header');
   });
@@ -24,19 +26,19 @@ module('Integration | Component | hds/page-header/index', function (hooks) {
 
   test('it should render contextual components', async function (assert) {
     await render(
-      hbs`<Hds::PageHeader id="test-page-header" as |PH|>
+      <template><PageHeader id="test-page-header" as |PH|>
             <PH.Title>Page title</PH.Title>
             <PH.Breadcrumb>
-              <Hds::Breadcrumb>
-                <Hds::Breadcrumb::Item @text="Breadcrumb" />
-              </Hds::Breadcrumb>
+              <Breadcrumb>
+                <Item @text="Breadcrumb" />
+              </Breadcrumb>
             </PH.Breadcrumb>
             <PH.IconTile @icon="server-cluster" />
             <PH.Actions>Actions</PH.Actions>
             <PH.Subtitle>Subtitle</PH.Subtitle>
             <PH.Description>Description</PH.Description>
             <PH.Generic><p class="custom">Generic</p></PH.Generic>
-          </Hds::PageHeader>`,
+          </PageHeader></template>,
     );
     assert.dom('.hds-page-header').exists();
     assert.dom('.hds-page-header__title').exists();
@@ -53,7 +55,7 @@ module('Integration | Component | hds/page-header/index', function (hooks) {
     assert.dom('.custom').hasText('Generic');
   });
   test('it should not render the contextual components if not provided', async function (assert) {
-    await render(hbs`<Hds::PageHeader />`);
+    await render(<template><PageHeader /></template>);
     assert.dom('.hds-breadcrumb').doesNotExist();
     assert.dom('.hds-page-header__title').doesNotExist();
     assert.dom('.hds-page-header__actions').doesNotExist();
diff --git a/showcase/tests/integration/components/hds/pagination/compact-test.js b/showcase/tests/integration/components/hds/pagination/compact-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/pagination/compact-test.js
rename to showcase/tests/integration/components/hds/pagination/compact-test.gjs
index ea97d586d9f..8829a654751 100644
--- a/showcase/tests/integration/components/hds/pagination/compact-test.js
+++ b/showcase/tests/integration/components/hds/pagination/compact-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Compact from "@hashicorp/design-system-components/components/hds/pagination/compact/index";
+import { array } from "@ember/helper";
 
 module('Integration | Component | hds/pagination/compact', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,16 +16,16 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-    <Hds::Pagination::Compact id="test-pagination-compact" />
-    `);
+    await render(<template>
+    <Compact id="test-pagination-compact" />
+    </template>);
     assert.dom('#test-pagination-compact').hasClass('hds-pagination');
   });
 
   // CONTENT
 
   test('it should render the "prev" and "next" controls', async function (assert) {
-    await render(hbs`<Hds::Pagination::Compact />`);
+    await render(<template><Compact /></template>);
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
       .includesText('Previous');
@@ -43,25 +44,25 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
       .exists();
   });
   test('it should not render the text labels if @showLabels is set to false', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Compact @showLabels={{false}} />
-    `);
+    await render(<template>
+      <Compact @showLabels={{false}} />
+    </template>);
     assert.dom('.hds-pagination-nav__arrow-label').doesNotExist();
   });
 
   // SIZE SELECTOR
 
   test('it shows the "size-selector" if @showSizeSelector is true', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Compact @showSizeSelector={{true}} />
-    `);
+    await render(<template>
+      <Compact @showSizeSelector={{true}} />
+    </template>);
     assert.dom('.hds-pagination .hds-pagination-size-selector').exists();
   });
 
   test('it renders the "size selector" content with default pageSizes values', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Compact @showSizeSelector={{true}} />
-    `);
+    await render(<template>
+      <Compact @showSizeSelector={{true}} />
+    </template>);
     assert
       .dom('.hds-pagination .hds-pagination-size-selector option[value="10"]')
       .hasText('10');
@@ -74,9 +75,9 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it renders custom options for passed in pageSizes and sets currentPageSize to the first PageSizes item', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Compact @showSizeSelector={{true}} @pageSizes={{array 20 40 60}} />
-    `);
+    await render(<template>
+      <Compact @showSizeSelector={{true}} @pageSizes={{array 20 40 60}} />
+    </template>);
     assert
       .dom('.hds-pagination .hds-pagination-size-selector option[value="20"]')
       .hasText('20');
@@ -89,27 +90,27 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it renders the passed in currentPageSize value', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Compact @showSizeSelector={{true}} @currentPageSize={{40}} @pageSizes={{array 20 40 60}} />
-    `);
+    await render(<template>
+      <Compact @showSizeSelector={{true}} @currentPageSize={{40}} @pageSizes={{array 20 40 60}} />
+    </template>);
     assert
       .dom('.hds-pagination .hds-pagination-size-selector select')
       .hasValue('40');
   });
 
   test('it displays the passed in custom text for the SizeSelector label text', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Compact @showSizeSelector={{true}} @sizeSelectorLabel="Custom text" />
-    `);
+    await render(<template>
+      <Compact @showSizeSelector={{true}} @sizeSelectorLabel="Custom text" />
+    </template>);
     assert.dom('.hds-pagination-size-selector label').hasText('Custom text');
   });
 
   // DISABLED
 
   test('it should render disabled buttons when @isDisabledPrev/Next are set to true', async function (assert) {
-    await render(hbs`
-        <Hds::Pagination::Compact @isDisabledPrev={{true}} @isDisabledNext={{true}} />
-      `);
+    await render(<template>
+        <Compact @isDisabledPrev={{true}} @isDisabledNext={{true}} />
+      </template>);
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
       .hasAttribute('disabled');
@@ -124,9 +125,9 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
     let direction;
     this.set('onPageChange', (dir) => (direction = dir));
     await render(
-      hbs`
-        <Hds::Pagination::Compact @onPageChange={{this.onPageChange}} />
-        `,
+      <template>
+        <Compact @onPageChange={{this.onPageChange}} />
+        </template>,
     );
     await click('.hds-pagination-nav__arrow--direction-prev');
     assert.strictEqual(direction, 'prev');
@@ -139,7 +140,7 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   test('it should render links instead of buttons, with the correct "href" values, if it has routing', async function (assert) {
     this.set('myQueryFunction', (page) => ({ page }));
     await render(
-      hbs`<Hds::Pagination::Compact @route="page-components.pagination" @queryFunction={{this.myQueryFunction}} />`,
+      <template><Compact @route="page-components.pagination" @queryFunction={{this.myQueryFunction}} /></template>,
     );
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
@@ -159,7 +160,7 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Pagination::Compact @queryFunction="foo" @model="test" />`,
+      <template><Compact @queryFunction="foo" @model="test" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -175,7 +176,7 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Pagination::Compact @queryFunction={{this.myQueryFunction}} />`,
+      <template><Compact @queryFunction={{this.myQueryFunction}} /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/pagination/info-test.js b/showcase/tests/integration/components/hds/pagination/info-test.gjs
similarity index 63%
rename from showcase/tests/integration/components/hds/pagination/info-test.js
rename to showcase/tests/integration/components/hds/pagination/info-test.gjs
index e450d358848..477ce84387c 100644
--- a/showcase/tests/integration/components/hds/pagination/info-test.js
+++ b/showcase/tests/integration/components/hds/pagination/info-test.gjs
@@ -6,31 +6,31 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Info from "@hashicorp/design-system-components/components/hds/pagination/info/index";
 
 module('Integration | Component | hds/pagination/info', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Info @itemsRangeStart={{1}} @itemsRangeEnd={{10}} @totalItems={{100}} id="test-pagination-info" />
-    `);
+    await render(<template>
+      <Info @itemsRangeStart={{1}} @itemsRangeEnd={{10}} @totalItems={{100}} id="test-pagination-info" />
+    </template>);
     assert.dom('#test-pagination-info').hasClass('hds-pagination-info');
   });
 
   // CONTENT
 
   test('it should show the passed in itemsRangeStart and itemsRangeEnd values', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Info @itemsRangeStart={{1}} @itemsRangeEnd={{10}} @totalItems={{103}} />
-    `);
+    await render(<template>
+      <Info @itemsRangeStart={{1}} @itemsRangeEnd={{10}} @totalItems={{103}} />
+    </template>);
     assert.dom('.hds-pagination-info').hasText('1–10 of 103');
   });
 
   test('it should not display the totalItems when showTotalItems is set to false', async function (assert) {
-    await render(hbs`
-    <Hds::Pagination::Info @itemsRangeStart={{1}} @itemsRangeEnd={{10}} @totalItems={{100}} @showTotalItems={{false}} />
-    `);
+    await render(<template>
+    <Info @itemsRangeStart={{1}} @itemsRangeEnd={{10}} @totalItems={{100}} @showTotalItems={{false}} />
+    </template>);
     assert.dom('.hds-pagination-info').doesNotIncludeText('of 100');
   });
 });
diff --git a/showcase/tests/integration/components/hds/pagination/nav/arrow-test.js b/showcase/tests/integration/components/hds/pagination/nav/arrow-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/pagination/nav/arrow-test.js
rename to showcase/tests/integration/components/hds/pagination/nav/arrow-test.gjs
index 91bcebe122c..23e7fed5188 100644
--- a/showcase/tests/integration/components/hds/pagination/nav/arrow-test.js
+++ b/showcase/tests/integration/components/hds/pagination/nav/arrow-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Arrow from "@hashicorp/design-system-components/components/hds/pagination/nav/arrow";
 
 module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,19 +15,19 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Nav::Arrow @direction="prev" id="test-nav-arrow" />
-    `);
+    await render(<template>
+      <Arrow @direction="prev" id="test-nav-arrow" />
+    </template>);
     assert.dom('#test-nav-arrow').hasClass('hds-pagination-nav__arrow');
   });
 
   // DIRECTION
 
   test('it should render a "Previous" or "Next" button matching the passed in direction', async function (assert) {
-    await render(hbs`
-    <Hds::Pagination::Nav::Arrow @direction="prev" id="test-nav-arrow-prev" />
-    <Hds::Pagination::Nav::Arrow @direction="next" id="test-nav-arrow-next" />
-    `);
+    await render(<template>
+    <Arrow @direction="prev" id="test-nav-arrow-prev" />
+    <Arrow @direction="next" id="test-nav-arrow-next" />
+    </template>);
     assert
       .dom('#test-nav-arrow-next')
       .hasClass('hds-pagination-nav__arrow--direction-next')
@@ -43,10 +43,10 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
   // LABEL
 
   test('it should render the appropriate text labels by default', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Nav::Arrow @direction="prev" id="test-nav-arrow-prev" />
-      <Hds::Pagination::Nav::Arrow @direction="next" id="test-nav-arrow-next" />
-    `);
+    await render(<template>
+      <Arrow @direction="prev" id="test-nav-arrow-prev" />
+      <Arrow @direction="next" id="test-nav-arrow-next" />
+    </template>);
     assert
       .dom('#test-nav-arrow-prev .hds-pagination-nav__arrow-label')
       .hasText('Previous');
@@ -55,18 +55,18 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
       .hasText('Next');
   });
   test('it should not render the text label if @showLabel is set to false', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Nav::Arrow @direction="prev" @showLabel={{false}} />
-    `);
+    await render(<template>
+      <Arrow @direction="prev" @showLabel={{false}} />
+    </template>);
     assert.dom('.hds-pagination-nav__arrow-label').doesNotExist();
   });
 
   // DISABLED
 
   test('it should render a disabled button when @disabled is set to true', async function (assert) {
-    await render(hbs`
-        <Hds::Pagination::Nav::Arrow @direction="prev" @disabled={{true}} />
-      `);
+    await render(<template>
+        <Arrow @direction="prev" @disabled={{true}} />
+      </template>);
     assert.dom('.hds-pagination-nav__control').hasAttribute('disabled');
   });
 
@@ -76,9 +76,9 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
     let direction;
     this.set('onClick', (dir) => (direction = dir));
     await render(
-      hbs`
-          <Hds::Pagination::Nav::Arrow @direction="prev" @onClick={{this.onClick}} />
-        `,
+      <template>
+          <Arrow @direction="prev" @onClick={{this.onClick}} />
+        </template>,
     );
     await click('.hds-pagination-nav__control');
     assert.strictEqual(direction, 'prev');
@@ -93,7 +93,7 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Pagination::Nav::Arrow />`);
+    await render(<template><Arrow /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -105,7 +105,7 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Pagination::Nav::Arrow @direction="foo" />`);
+    await render(<template><Arrow @direction="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.js b/showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.js
rename to showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gjs
index 173ce654887..b15f791a64c 100644
--- a/showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.js
+++ b/showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Ellipsis from "@hashicorp/design-system-components/components/hds/pagination/nav/ellipsis";
 
 module(
   'Integration | Component | hds/pagination/nav/ellipsis',
@@ -14,9 +14,9 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`
-      <Hds::Pagination::Nav::Ellipsis id="test-nav-ellipsis" />
-    `);
+      await render(<template>
+      <Ellipsis id="test-nav-ellipsis" />
+    </template>);
       assert.dom('#test-nav-ellipsis').hasClass('hds-pagination-nav__ellipsis');
     });
   },
diff --git a/showcase/tests/integration/components/hds/pagination/nav/number-test.js b/showcase/tests/integration/components/hds/pagination/nav/number-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/pagination/nav/number-test.js
rename to showcase/tests/integration/components/hds/pagination/nav/number-test.gjs
index b29df8aa01d..cc8b23fc943 100644
--- a/showcase/tests/integration/components/hds/pagination/nav/number-test.js
+++ b/showcase/tests/integration/components/hds/pagination/nav/number-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Number0 from "@hashicorp/design-system-components/components/hds/pagination/nav/number";
 
 module('Integration | Component | hds/pagination/nav/number', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,9 +15,9 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-        <Hds::Pagination::Nav::Number @page={{1}} id="test-pagination-number" />
-      `);
+    await render(<template>
+        <Number0 @page={{1}} id="test-pagination-number" />
+      </template>);
     assert
       .dom('#test-pagination-number')
       .hasClass('hds-pagination-nav__number');
@@ -26,19 +26,19 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
   // CONTENT
 
   test('it displays the passed in page number', async function (assert) {
-    await render(hbs`
-        <Hds::Pagination::Nav::Number @page={{5}} />
-      `);
+    await render(<template>
+        <Number0 @page={{5}} />
+      </template>);
     assert.dom('.hds-pagination-nav__control').hasText('page 5');
   });
 
   // SELECTED
 
   test('it is selected if @isSelected is set to true', async function (assert) {
-    await render(hbs`
-        <Hds::Pagination::Nav::Number @page={{1}} @isSelected={{true}} id="test-is-selected" />
-        <Hds::Pagination::Nav::Number @page={{3}} id="test-not-selected" />
-      `);
+    await render(<template>
+        <Number0 @page={{1}} @isSelected={{true}} id="test-is-selected" />
+        <Number0 @page={{3}} id="test-not-selected" />
+      </template>);
     assert
       .dom('#test-is-selected')
       .hasClass('hds-pagination-nav__number--is-selected');
@@ -57,9 +57,9 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
     let pageNumber;
     this.set('onClick', (pageNum) => (pageNumber = pageNum));
     await render(
-      hbs`
-          <Hds::Pagination::Nav::Number @page={{3}} id="test-pagination-number" @onClick={{this.onClick}} />
-        `,
+      <template>
+          <Number0 @page={{3}} id="test-pagination-number" @onClick={{this.onClick}} />
+        </template>,
     );
     await click('#test-pagination-number');
     assert.strictEqual(pageNumber, 3);
@@ -74,7 +74,7 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Pagination::Nav::Number />`);
+    await render(<template><Number0 /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/pagination/numbered-test.js b/showcase/tests/integration/components/hds/pagination/numbered-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/pagination/numbered-test.js
rename to showcase/tests/integration/components/hds/pagination/numbered-test.gjs
index b8fe2ad56fe..deaa7a4d678 100644
--- a/showcase/tests/integration/components/hds/pagination/numbered-test.js
+++ b/showcase/tests/integration/components/hds/pagination/numbered-test.gjs
@@ -5,15 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  click,
-  select,
-  render,
-  resetOnerror,
-  setupOnerror,
-} from '@ember/test-helpers';
-
-import { hbs } from 'ember-cli-htmlbars';
+import { click, select, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
+import Numbered from "@hashicorp/design-system-components/components/hds/pagination/numbered/index";
+import { array } from "@ember/helper";
 
 module('Integration | Component | hds/pagination/numbered', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,27 +16,27 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} id="test-pagination-numbered" />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} id="test-pagination-numbered" />
+    </template>);
     assert.dom('#test-pagination-numbered').hasClass('hds-pagination');
   });
 
   // CONTENT (AND ARGUMENTS DRILLING)
 
   test('it renders the main child components', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} />
+    </template>);
     assert.dom('.hds-pagination .hds-pagination-info').exists();
     assert.dom('.hds-pagination .hds-pagination-nav').exists();
     assert.dom('.hds-pagination .hds-pagination-size-selector').exists();
   });
 
   test('it renders the "info" and "size selector" content with default pageSizes and currentPageSize values', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} />
+    </template>);
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–10 of 100');
     assert
       .dom('.hds-pagination .hds-pagination-size-selector option[value="10"]')
@@ -56,9 +50,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it renders custom options for passed in pageSizes and sets currentPageSize to the first PageSizes item', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @pageSizes={{array 20 40 60}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @pageSizes={{array 20 40 60}} />
+    </template>);
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–20 of 100');
     assert
       .dom('.hds-pagination .hds-pagination-size-selector select')
@@ -76,7 +70,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
 
   test('it renders the passed in currentPageSize value', async function (assert) {
     await render(
-      hbs`<Hds::Pagination::Numbered @totalItems={{100}} @currentPageSize={{40}} @pageSizes={{array 20 40 60}} />`,
+      <template><Numbered @totalItems={{100}} @currentPageSize={{40}} @pageSizes={{array 20 40 60}} /></template>,
     );
 
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–40 of 100');
@@ -86,9 +80,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it renders the "nav" content', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} />
+    </template>);
     assert
       .dom('.hds-pagination .hds-pagination-nav__arrow--direction-prev')
       .exists();
@@ -103,33 +97,33 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it displays the passed in custom text for the SizeSelector label text', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @sizeSelectorLabel="Custom text" />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @sizeSelectorLabel="Custom text" />
+    </template>);
     assert.dom('.hds-pagination-size-selector label').hasText('Custom text');
   });
 
   // SHOW/HIDE ELEMENTS
   test('it hides the total items from the "info" content when @showTotalItems is false', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @showTotalItems={{false}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @showTotalItems={{false}} />
+    </template>);
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–10');
   });
 
   test('it hides "info", "page numbers" and "size-selector" @showInfo/@showPageNumbers/@showSizeSelector are false', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @showInfo={{false}} @showPageNumbers={{false}} @showSizeSelector={{false}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @showInfo={{false}} @showPageNumbers={{false}} @showSizeSelector={{false}} />
+    </template>);
     assert.dom('.hds-pagination .hds-pagination-info').doesNotExist();
     assert.dom('.hds-pagination .hds-pagination-nav__page-list').doesNotExist();
     assert.dom('.hds-pagination .hds-pagination-size-selector').doesNotExist();
   });
 
   test('it hides the "prev/next" labels by default', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} />
+    </template>);
     assert
       .dom(
         '.hds-pagination-nav__arrow--direction-prev .hds-pagination-nav__arrow-label',
@@ -143,9 +137,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it show the "prev/next" labels is @showLabels is true', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @showLabels={{true}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @showLabels={{true}} />
+    </template>);
     assert
       .dom(
         '.hds-pagination-nav__arrow--direction-prev .hds-pagination-nav__arrow-label',
@@ -161,9 +155,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // CURRENT PAGE
 
   test('the selected page match the passed in @currentPage value', async function (assert) {
-    await render(hbs`
-    <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{2}} />
-    `);
+    await render(<template>
+    <Numbered @totalItems={{100}} @currentPage={{2}} />
+    </template>);
     assert.dom('.hds-pagination-nav__number--is-selected').exists();
     assert.dom('.hds-pagination-nav__number--is-selected').hasText('page 2');
   });
@@ -171,9 +165,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // TRUNCATION
 
   test('it truncates the page numbers by default', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} />
+    </template>);
     // displays 7 items (the max number displayed)
     assert
       .dom('.hds-pagination-nav .hds-pagination-nav__page-item')
@@ -181,18 +175,18 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it disable truncation if @isTruncated is false', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @isTruncated={{false}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @isTruncated={{false}} />
+    </template>);
     assert
       .dom('.hds-pagination .hds-pagination-nav .hds-pagination-nav__page-item')
       .exists({ count: 10 });
   });
 
   test('it should display an ellipsis for the 5th item when the first page number is selected', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{1}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @currentPage={{1}} />
+    </template>);
     assert
       .dom('.hds-pagination-nav .hds-pagination-nav__page-item:nth-child(5)')
       .hasText('...');
@@ -204,9 +198,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it should display an ellipsis for the 2nd and 6th items when a middle page number is selected', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{4}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @currentPage={{4}} />
+    </template>);
     assert.dom('.hds-pagination-nav__page-item:nth-child(2)').hasText('...');
     assert.dom('.hds-pagination-nav__page-item:nth-child(6)').hasText('...');
     assert
@@ -217,9 +211,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it should display an ellipsis for the 3rd item when the last page number is selected', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{10}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @currentPage={{10}} />
+    </template>);
     assert.dom('.hds-pagination-nav__page-item:nth-child(3)').hasText('...');
     assert
       .dom('.hds-pagination-nav__page-item:not(:nth-child(3))')
@@ -229,9 +223,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // DISABLED PREV/NEXT
 
   test('when on the first page, the "Previous" control should be disabled', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{1}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @currentPage={{1}} />
+    </template>);
     // Test that the first page is selected:
     assert
       .dom(
@@ -242,9 +236,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('when on the last page, the "Next" control should be disabled', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{10}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @currentPage={{10}} />
+    </template>);
     // Test that the last page is selected:
     assert
       .dom(
@@ -255,8 +249,8 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('clicking on the fist/last page disables the "Prev/Next" controls', async function (assert) {
-    await render(hbs`<Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{10}} />
-    `);
+    await render(<template><Numbered @totalItems={{100}} @currentPage={{10}} />
+    </template>);
     assert.dom('.hds-pagination-nav__arrow--direction-prev').isNotDisabled();
     assert.dom('.hds-pagination-nav__arrow--direction-prev').isNotDisabled();
     // Activate the first page:
@@ -286,9 +280,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // INTERACTION
 
   test('it should select the activated page number', async function (assert) {
-    await render(hbs`
-    <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{1}} />
-    `);
+    await render(<template>
+    <Numbered @totalItems={{100}} @currentPage={{1}} />
+    </template>);
     assert
       .dom(
         '.hds-pagination-nav__page-item:nth-child(3) .hds-pagination-nav__control',
@@ -307,9 +301,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('selecting a pageSize option should change the page size', async function (assert) {
-    await render(hbs`
-      <Hds::Pagination::Numbered @totalItems={{100}} @currentPage={{1}} />
-    `);
+    await render(<template>
+      <Numbered @totalItems={{100}} @currentPage={{1}} />
+    </template>);
     // Check that items per page is initially set to 10:
     assert.dom('.hds-pagination-size-selector select').hasValue('10');
     assert.dom('.hds-pagination-info').hasText('1–10 of 100');
@@ -365,9 +359,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       pageSize = size;
     });
     await render(
-      hbs`
-        <Hds::Pagination::Numbered @totalItems={{100}} @onPageChange={{this.onPageChange}} />
-        `,
+      <template>
+        <Numbered @totalItems={{100}} @onPageChange={{this.onPageChange}} />
+        </template>,
     );
     await click(
       '.hds-pagination-nav__page-item:nth-child(3) .hds-pagination-nav__control',
@@ -380,9 +374,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
     let size;
     this.set('onPageSizeChange', (pageSize) => (size = pageSize));
     await render(
-      hbs`
-        <Hds::Pagination::Numbered @totalItems={{100}} @onPageSizeChange={{this.onPageSizeChange}} />
-        `,
+      <template>
+        <Numbered @totalItems={{100}} @onPageSizeChange={{this.onPageSizeChange}} />
+        </template>,
     );
     await select('.hds-pagination-size-selector select', '30'); // notice: '30' needs to be a string to work
     assert.strictEqual(size, 30); // notice: it's converted to an integer by the callback function
@@ -393,7 +387,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   test('it should render links instead of buttons, with the correct "href" values, if it has routing', async function (assert) {
     this.set('myQueryFunction', (page, pageSize) => ({ page, pageSize }));
     await render(
-      hbs`<Hds::Pagination::Numbered @totalItems={{30}} @currentPage={{2}} @currentPageSize={{10}} @route="page-components.pagination" @queryFunction={{this.myQueryFunction}} />`,
+      <template><Numbered @totalItems={{30}} @currentPage={{2}} @currentPageSize={{10}} @route="page-components.pagination" @queryFunction={{this.myQueryFunction}} /></template>,
     );
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
@@ -423,7 +417,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Pagination::Numbered @totalItems={{100}} @queryFunction="foo" @model="test" />`,
+      <template><Numbered @totalItems={{100}} @queryFunction="foo" @model="test" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -438,7 +432,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Pagination::Numbered @totalItems={{100}} @queryFunction={{this.myQueryFunction}} @model="test" />`,
+      <template><Numbered @totalItems={{100}} @queryFunction={{this.myQueryFunction}} @model="test" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -451,7 +445,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Pagination::Numbered />`);
+    await render(<template><Numbered /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -463,7 +457,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Pagination::Numbered @totalItems="foo" />`);
+    await render(<template><Numbered @totalItems="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -477,7 +471,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Pagination::Numbered @queryFunction={{this.myQueryFunction}} />`,
+      <template><Numbered @queryFunction={{this.myQueryFunction}} /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/pagination/size-selector-test.js b/showcase/tests/integration/components/hds/pagination/size-selector-test.gjs
similarity index 71%
rename from showcase/tests/integration/components/hds/pagination/size-selector-test.js
rename to showcase/tests/integration/components/hds/pagination/size-selector-test.gjs
index 226849c265c..a8647792a35 100644
--- a/showcase/tests/integration/components/hds/pagination/size-selector-test.js
+++ b/showcase/tests/integration/components/hds/pagination/size-selector-test.gjs
@@ -5,13 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  select,
-  render,
-  resetOnerror,
-  setupOnerror,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { select, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
+import SizeSelector from "@hashicorp/design-system-components/components/hds/pagination/size-selector/index";
+import { array } from "@ember/helper";
 
 module(
   'Integration | Component | hds/pagination/size-selector',
@@ -22,9 +18,9 @@ module(
     });
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(hbs`
-      <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} id="test-pagination-size-selector" />
-    `);
+      await render(<template>
+      <SizeSelector @pageSizes={{array 10 30 50}} id="test-pagination-size-selector" />
+    </template>);
       assert
         .dom('#test-pagination-size-selector')
         .hasClass('hds-pagination-size-selector');
@@ -33,9 +29,9 @@ module(
     // CONTENT
 
     test('it should display options for the passed in page sizes', async function (assert) {
-      await render(hbs`
-      <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} />
-    `);
+      await render(<template>
+      <SizeSelector @pageSizes={{array 10 30 50}} />
+    </template>);
       assert
         .dom('.hds-pagination-size-selector option[value="10"]')
         .hasText('10');
@@ -48,16 +44,16 @@ module(
     });
 
     test('it should display the passed in @selectedSize as selected value', async function (assert) {
-      await render(hbs`
-        <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{30}} />
-      `);
+      await render(<template>
+        <SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{30}} />
+      </template>);
       assert.dom('.hds-pagination-size-selector select').hasValue('30');
     });
 
     test('it has a label with a "for" attribute value matching the select id value', async function (assert) {
-      await render(hbs`
-        <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} id="test-pagination-size-selector" />
-      `);
+      await render(<template>
+        <SizeSelector @pageSizes={{array 10 30 50}} id="test-pagination-size-selector" />
+      </template>);
 
       let controlId = this.element.querySelector('.hds-form-select').id;
       assert
@@ -66,18 +62,18 @@ module(
     });
 
     test('the label text matches the default value if no custom value is set', async function (assert) {
-      await render(hbs`
-        <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} />
-      `);
+      await render(<template>
+        <SizeSelector @pageSizes={{array 10 30 50}} />
+      </template>);
       assert
         .dom('.hds-pagination-size-selector label')
         .hasText('Items per page');
     });
 
     test('it displays the passed in custom text for the label text', async function (assert) {
-      await render(hbs`
-        <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} @label="Custom text" />
-      `);
+      await render(<template>
+        <SizeSelector @pageSizes={{array 10 30 50}} @label="Custom text" />
+      </template>);
       assert.dom('.hds-pagination-size-selector label').hasText('Custom text');
     });
 
@@ -87,9 +83,9 @@ module(
       let size;
       this.set('onChange', (pageSize) => (size = pageSize));
       await render(
-        hbs`
-        <Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{10}} id="test-pagination-size-selector" @onChange={{this.onChange}} />
-        `,
+        <template>
+        <SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{10}} id="test-pagination-size-selector" @onChange={{this.onChange}} />
+        </template>,
       );
       await select('#test-pagination-size-selector select', '30'); // notice: '30' needs to be a string to work
       assert.strictEqual(size, 30); // notice: it's converted to an integer by the callback function
@@ -104,7 +100,7 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`<Hds::Pagination::SizeSelector />`);
+      await render(<template><SizeSelector /></template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
@@ -117,7 +113,7 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        hbs`<Hds::Pagination::SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{1234}} />`,
+        <template><SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{1234}} /></template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/popover-primitive/index-test.js b/showcase/tests/integration/components/hds/popover-primitive/index-test.gjs
similarity index 84%
rename from showcase/tests/integration/components/hds/popover-primitive/index-test.js
rename to showcase/tests/integration/components/hds/popover-primitive/index-test.gjs
index 98a98dcdfd5..fb56a3b2f97 100644
--- a/showcase/tests/integration/components/hds/popover-primitive/index-test.js
+++ b/showcase/tests/integration/components/hds/popover-primitive/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test, skip } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, focus, blur, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import PopoverPrimitive from "@hashicorp/design-system-components/components/hds/popover-primitive/index";
 
 module(
   'Integration | Component | hds/popover-primitive/index',
@@ -18,14 +18,14 @@ module(
     // IDs
 
     test('it should generate IDs provided and connect them with the popover attributes', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} type="button" />
             <main {{PP.setupPrimitivePopover}} />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       // the popover ID is dynamically generated
       const popover = this.element.querySelector('main');
       const popoverId = popover.id;
@@ -35,14 +35,14 @@ module(
     });
 
     test('it should use the IDs provided and connect them with the popover attributes', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert
         .dom('#test-popover-primitive-toggle')
         .hasAttribute('popovertarget', 'test-popover-primitive-content');
@@ -54,14 +54,14 @@ module(
     // INTERACTIONS
 
     test('it should toggle the popover visibility on focus in/out', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableSoftEvents={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableSoftEvents={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       // it's hidden by default
       assert.dom('#test-popover-primitive-content').isNotVisible();
       // focus the toggle to show the popover
@@ -79,14 +79,14 @@ module(
       assert.dom('#test-popover-primitive-content').isNotVisible();
     });
     test('it should toggle the popover visibility on click', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       // it's hidden by default
       assert.dom('#test-popover-primitive-content').isNotVisible();
       // focus the toggle to show the popover
@@ -106,8 +106,8 @@ module(
     test('it should continue to work when the toggle element is dynamically swapped', async function (assert) {
       this.set('isSwapped', false);
 
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             {{#if this.isSwapped}}
               <button data-test-id="replacement-toggle" type="button" {{PP.setupPrimitiveToggle}}>
@@ -122,8 +122,8 @@ module(
               Content
             </div>
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
 
       // verify the initial toggle works as expected
       assert
@@ -170,14 +170,14 @@ module(
         .isNotVisible('The popover is hidden again by the new toggle');
     });
     skip('it should toggle the popover visibility on click', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}}>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}}>
           <:toggle>Toggle</:toggle>
           <:content>
             <div id="test-popover-primitive-content">Content</div>
           </:content>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       // it's hidden when closed
       assert.dom('.hds-popover-primitive__content').isNotVisible();
       assert.dom('#test-popover-primitive-content').doesNotExist();
@@ -199,19 +199,14 @@ module(
       let status;
       this.set('onOpen', () => (status = 'opened'));
       this.set('onClose', () => (status = 'closed'));
-      await render(hbs`
-        <Hds::PopoverPrimitive
-          @enableClickEvents={{true}}
-          @onOpen={{this.onOpen}}
-          @onClose={{this.onClose}}
-          as |PP|
-        >
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
-            <button {{PP.setupPrimitiveToggle}}  id="test-popover-primitive-toggle" />
+            <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" />
             <div {{PP.setupPrimitivePopover}} />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       // toggle the visibility
       await click('#test-popover-primitive-toggle');
       assert.strictEqual(status, 'opened');
@@ -228,53 +223,53 @@ module(
     // POPOVER API (HTML ATTRIBUTES)
 
     test('the toggle does not have a `popovertarget` attribute by default', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive as |PP|>
+      await render(<template>
+        <PopoverPrimitive as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert
         .dom('#test-popover-primitive-toggle')
         .doesNotHaveAttribute('popovertarget');
     });
     test('the toggle has a `popovertarget` attribute if `@enableClickEvents` is `true`', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-popover" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert
         .dom('#test-popover-primitive-toggle')
         .hasAttribute('popovertarget', 'test-popover-primitive-popover');
     });
     test('the popover has a `popover` attribute by default', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive as |PP|>
+      await render(<template>
+        <PopoverPrimitive as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert
         .dom('#test-popover-primitive-content')
         .hasAttribute('popover', 'auto');
     });
     test('the popover has a `popover` attribute set to `manual` if `@isOpen` is `true` and it reverts to `auto` after "soft" interacting with it', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} @isOpen={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} @isOpen={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert
         .dom('#test-popover-primitive-content')
         .isVisible()
@@ -289,14 +284,14 @@ module(
         .hasAttribute('popover', 'auto');
     });
     test('the popover has a `popover` attribute set to `manual` if `@isOpen` is `true` and it reverts to `auto` after "click" interacting with it', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} @isOpen={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} @isOpen={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert
         .dom('#test-popover-primitive-content')
         .hasAttribute('popover', 'manual');
@@ -307,14 +302,14 @@ module(
         .hasAttribute('popover', 'auto');
     });
     test('the popover is open when `isOpen` is true', async function (assert) {
-      await render(hbs`
-        <Hds::PopoverPrimitive @enableClickEvents={{true}} @isOpen={{true}} as |PP|>
+      await render(<template>
+        <PopoverPrimitive @enableClickEvents={{true}} @isOpen={{true}} as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <button {{PP.setupPrimitiveToggle}} id="test-popover-primitive-toggle" type="button" />
             <div {{PP.setupPrimitivePopover}} id="test-popover-primitive-content" />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert.dom('#test-popover-primitive-content').isVisible();
     });
 
@@ -327,14 +322,14 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(hbs`
-        <Hds::PopoverPrimitive as |PP|>
+      await render(<template>
+        <PopoverPrimitive as |PP|>
           <div {{PP.setupPrimitiveContainer}}>
             <div {{PP.setupPrimitiveToggle}} />
             <div {{PP.setupPrimitivePopover}} />
           </div>
-        </Hds::PopoverPrimitive>
-      `);
+        </PopoverPrimitive>
+      </template>);
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/reveal/index-test.js b/showcase/tests/integration/components/hds/reveal/index-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/reveal/index-test.js
rename to showcase/tests/integration/components/hds/reveal/index-test.gjs
index 6844c3aff32..b353cb84377 100644
--- a/showcase/tests/integration/components/hds/reveal/index-test.js
+++ b/showcase/tests/integration/components/hds/reveal/index-test.gjs
@@ -6,15 +6,15 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Reveal from "@hashicorp/design-system-components/components/hds/reveal/index";
 
 module('Integration | Component | hds/reveal/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::Reveal @text="More options" id="test-reveal">Additional content</Hds::Reveal>
-    `);
+    await render(<template>
+      <Reveal @text="More options" id="test-reveal">Additional content</Reveal>
+    </template>);
     assert.dom('#test-reveal').hasClass('hds-reveal');
   });
 
@@ -22,21 +22,21 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('it renders passed in @text content in the toggle button', async function (assert) {
     await render(
-      hbs`
-        <Hds::Reveal @text="More options">
+      <template>
+        <Reveal @text="More options">
           Additional content
-        </Hds::Reveal>`,
+        </Reveal></template>,
     );
     assert.dom('.hds-reveal__toggle-button').hasText('More options');
   });
 
   test('it provides the correct accessible name and description when passed in @text and @ariaDescribedBy content in the toggle button', async function (assert) {
     await render(
-      hbs`
+      <template>
         <span id="reveal-description">GitHub apps</span>
-        <Hds::Reveal @text="Show More" @ariaDescribedBy="reveal-description">
+        <Reveal @text="Show More" @ariaDescribedBy="reveal-description">
           Additional content
-        </Hds::Reveal>`,
+        </Reveal></template>,
     );
     assert
       .dom('.hds-reveal__toggle-button')
@@ -46,10 +46,10 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('it shows and hides passed in content when the toggle is triggered', async function (assert) {
     await render(
-      hbs`
-        <Hds::Reveal @text="More options">
+      <template>
+        <Reveal @text="More options">
           Additional content
-        </Hds::Reveal>`,
+        </Reveal></template>,
     );
     // Test content is not shown before toggle is triggered
     assert.dom('.hds-reveal__content').doesNotExist();
@@ -65,11 +65,11 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('it displays the correct value for aria-expanded when closed vs open', async function (assert) {
     await render(
-      hbs`
-        <Hds::Reveal @text="More options">
+      <template>
+        <Reveal @text="More options">
           Additional content
-        </Hds::Reveal>
-      `,
+        </Reveal>
+      </template>,
     );
     assert
       .dom('.hds-reveal__toggle-button')
@@ -82,7 +82,7 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('the toggle button has an aria-controls attribute with a value matching the DisclosurePrimitive content id', async function (assert) {
     await render(
-      hbs`<Hds::Reveal @text="More options">Additional content</Hds::Reveal>`,
+      <template><Reveal @text="More options">Additional content</Reveal></template>,
     );
     await click('.hds-reveal__toggle-button');
     assert.dom('.hds-reveal__toggle-button').hasAttribute('aria-controls');
@@ -103,10 +103,10 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('it displays content initially when @isOpen is set to true, ', async function (assert) {
     await render(
-      hbs`
-        <Hds::Reveal @text="More options" @isOpen={{true}}>
+      <template>
+        <Reveal @text="More options" @isOpen={{true}}>
           Additional content
-        </Hds::Reveal>`,
+        </Reveal></template>,
     );
     // Test content is displayed
     assert.dom('.hds-reveal__content').exists().hasText('Additional content');
@@ -119,10 +119,10 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('it displays different passed in text when open', async function (assert) {
     await render(
-      hbs`
-      <Hds::Reveal @text="Open me" @textWhenOpen="Close me">
+      <template>
+      <Reveal @text="Open me" @textWhenOpen="Close me">
         Additional content
-      </Hds::Reveal>`,
+      </Reveal></template>,
     );
     await click('.hds-reveal__toggle-button');
     assert.dom('.hds-reveal__toggle-button').hasText('Close me');
@@ -136,7 +136,7 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Reveal>Additional content</Hds::Reveal>`);
+    await render(<template><Reveal>Additional content</Reveal></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.js b/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/rich-tooltip/bubble-test.js
rename to showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gjs
index fc61c8d20f9..fc1f13f7491 100644
--- a/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.js
+++ b/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gjs
@@ -6,8 +6,8 @@
 import { module, test, skip } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import { modifier } from 'ember-modifier';
+import Bubble from "@hashicorp/design-system-components/components/hds/rich-tooltip/bubble";
 
 module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   setupRenderingTest(hooks);
@@ -18,7 +18,7 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Bubble @popoverId="test-rich-tooltip-bubble" />`,
+      <template><Bubble @popoverId="test-rich-tooltip-bubble" /></template>,
     );
     assert
       .dom('#test-rich-tooltip-bubble')
@@ -28,11 +28,11 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   // CONTENT
 
   test('it should render some elements but not the yielded content by default', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip::Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-bubble-arrow">
+    await render(<template>
+      <Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-bubble-arrow">
         <div id="test-rich-tooltip-bubble-content" />
-      </Hds::RichTooltip::Bubble>
-    `);
+      </Bubble>
+    </template>);
     assert.dom('.hds-rich-tooltip__bubble').exists();
     assert
       .dom('.hds-rich-tooltip__bubble')
@@ -46,11 +46,11 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
 
   test('it should render the inner content if `@isOpen` is `true`', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip::Bubble @isOpen={{true}}>
+    await render(<template>
+      <Bubble @isOpen={{true}}>
         <div id="test-rich-tooltip-bubble-content" />
-      </Hds::RichTooltip::Bubble>
-    `);
+      </Bubble>
+    </template>);
     assert.dom('.hds-rich-tooltip__bubble').exists();
     assert.dom('.hds-rich-tooltip__bubble-arrow').exists();
     assert.dom('.hds-rich-tooltip__bubble-inner-content').exists();
@@ -64,9 +64,9 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   // WIDTH/HEIGHT
 
   test('it should render the container with the provided with/height', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip::Bubble @width="123px" @height="456px" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Bubble @width="123px" @height="456px" @isOpen={{true}} />
+    </template>);
     const container = this.element.querySelector('.hds-rich-tooltip__bubble');
     const rect = container.getBoundingClientRect();
     // we need to divide by 2 because ember testing scales the `#ember-testing` container by a factor 0.5;
@@ -86,11 +86,7 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
       }),
     );
     await render(
-      hbs`<Hds::RichTooltip::Bubble
-        @popoverId="test-rich-tooltip-bubble"
-        @arrowId="test-rich-tooltip-arrow"
-        @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}}
-      />`,
+      <template><Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-arrow" @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}} /></template>,
     );
     assert.deepEqual(anchoredPositionOptions, {
       anchoredPositionOptions: {
@@ -111,16 +107,7 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
       }),
     );
     await render(
-      hbs`<Hds::RichTooltip::Bubble
-        @popoverId="test-rich-tooltip-bubble"
-        @arrowId="test-rich-tooltip-arrow"
-        @placement="top-start"
-        @offsetOptions={{123}}
-        @enableCollisionDetection={{false}}
-        @arrowSelector="#test-arrow-selector"
-        @arrowPadding={{987}}
-        @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}}
-      />`,
+      <template><Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-arrow" @placement="top-start" @offsetOptions={{123}} @enableCollisionDetection={{false}} @arrowSelector="#test-arrow-selector" @arrowPadding={{987}} @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}} /></template>,
     );
     assert.deepEqual(anchoredPositionOptions, {
       anchoredPositionOptions: {
@@ -137,7 +124,7 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
 
   test('it should assign the ID value provided with @popoverId', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Bubble @popoverId="test-rich-tooltip-bubble" />`,
+      <template><Bubble @popoverId="test-rich-tooltip-bubble" /></template>,
     );
     assert
       .dom('.hds-rich-tooltip__bubble')
@@ -145,7 +132,7 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
   test('it should not override the ID value provided with @popoverId with an attribute', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Bubble @popoverId="test-rich-tooltip-bubble" id="the-other-id" />`,
+      <template><Bubble @popoverId="test-rich-tooltip-bubble" id="the-other-id" /></template>,
     );
     assert
       .dom('.hds-rich-tooltip__bubble')
@@ -153,14 +140,14 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
   test('it should have a set of attributes based on the arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Bubble @popoverId="popoverId" @isOpen={{true}} />`,
+      <template><Bubble @popoverId="popoverId" @isOpen={{true}} /></template>,
     );
     assert.dom('.hds-rich-tooltip__bubble').hasAttribute('id', 'popoverId');
     assert.dom('.hds-rich-tooltip__bubble').hasAttribute('tabindex', '-1');
     assert.dom('.hds-rich-tooltip__bubble').hasAttribute('role', 'tooltip');
     assert.dom('.hds-rich-tooltip__bubble').doesNotHaveAria('hidden');
     await render(
-      hbs`<Hds::RichTooltip::Bubble id="test-rich-tooltip-bubble" />`,
+      <template><Bubble id="test-rich-tooltip-bubble" /></template>,
     );
     assert.dom('.hds-rich-tooltip__bubble').hasAria('hidden', '');
   });
@@ -181,10 +168,7 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::RichTooltip::Bubble
-        @placement="foo"
-        @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}}
-      />`,
+      <template><Bubble @placement="foo" @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}} /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/rich-tooltip/index-test.js b/showcase/tests/integration/components/hds/rich-tooltip/index-test.gjs
similarity index 86%
rename from showcase/tests/integration/components/hds/rich-tooltip/index-test.js
rename to showcase/tests/integration/components/hds/rich-tooltip/index-test.gjs
index f6b20bf14bb..e5b0dce7ce5 100644
--- a/showcase/tests/integration/components/hds/rich-tooltip/index-test.js
+++ b/showcase/tests/integration/components/hds/rich-tooltip/index-test.gjs
@@ -6,9 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, click, focus, blur } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 import { wait } from 'showcase/tests/helpers';
+import RichTooltip from "@hashicorp/design-system-components/components/hds/rich-tooltip/index";
 
 module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -18,19 +17,19 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::RichTooltip id="test-rich-tooltip" />`);
+    await render(<template><RichTooltip id="test-rich-tooltip" /></template>);
     assert.dom('#test-rich-tooltip').hasClass('hds-rich-tooltip');
   });
 
   // CONTENT + VISIBILITY + IS-OPEN
 
   test('it should render the toggle (visible) and bubble (not visible) but not the yielded content by default', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip as |RT|>
+    await render(<template>
+      <RichTooltip as |RT|>
         <RT.Toggle>Toggle</RT.Toggle>
         <RT.Bubble><span id="test-rich-tooltip-content">Content</span></RT.Bubble>
-      </Hds::RichTooltip>
-    `);
+      </RichTooltip>
+    </template>);
     assert.dom('.hds-rich-tooltip__toggle').isVisible();
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
     assert.dom('.hds-rich-tooltip__bubble-arrow').isNotVisible();
@@ -41,12 +40,12 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   });
 
   test('it should render the toggle (visible) and bubble (visible) and the yielded content (visible) if `@isOpen` is `true`', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip @isOpen={{true}} as |RT|>
+    await render(<template>
+      <RichTooltip @isOpen={{true}} as |RT|>
         <RT.Toggle>Toggle</RT.Toggle>
         <RT.Bubble><span id="test-rich-tooltip-content">Content</span></RT.Bubble>
-      </Hds::RichTooltip>
-    `);
+      </RichTooltip>
+    </template>);
     assert.dom('.hds-rich-tooltip__toggle').isVisible();
     assert.dom('.hds-rich-tooltip__bubble').isVisible();
     assert.dom('.hds-rich-tooltip__bubble-arrow').isVisible();
@@ -59,12 +58,12 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   // INTERACTIONS
 
   test('it should toggle the content visibility on focus in/out by default', async function (assert) {
-    await render(hbs`
-        <Hds::RichTooltip as |RT|>
+    await render(<template>
+        <RichTooltip as |RT|>
           <RT.Toggle>Toggle</RT.Toggle>
           <RT.Bubble>Content</RT.Bubble>
-        </Hds::RichTooltip>
-      `);
+        </RichTooltip>
+      </template>);
     // it's hidden when closed
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
     // focus the toggle to show the content
@@ -78,12 +77,12 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
   });
   test('it should toggle the content visibility on click', async function (assert) {
-    await render(hbs`
-        <Hds::RichTooltip @enableClickEvents={{true}} as |RT|>
+    await render(<template>
+        <RichTooltip @enableClickEvents={{true}} as |RT|>
           <RT.Toggle>Toggle</RT.Toggle>
           <RT.Bubble>Content</RT.Bubble>
-        </Hds::RichTooltip>
-      `);
+        </RichTooltip>
+      </template>);
     // it's hidden when closed
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
     // click the toggle to show the content
@@ -102,12 +101,12 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
     let status;
     this.set('onOpen', () => (status = 'opened'));
     this.set('onClose', () => (status = 'closed'));
-    await render(hbs`
-        <Hds::RichTooltip @enableClickEvents={{true}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} as |RT|>
+    await render(<template>
+        <RichTooltip @enableClickEvents={{true}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} as |RT|>
           <RT.Toggle />
           <RT.Bubble />
-        </Hds::RichTooltip>
-      `);
+        </RichTooltip>
+      </template>);
     // toggle the visibility
     await click('button.hds-rich-tooltip__toggle');
     assert.strictEqual(status, 'opened');
@@ -122,12 +121,12 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   // A11Y
 
   test('it displays the correct aria attributes for the "toggle" and "bubble" elements', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip @enableClickEvents={{true}} as |RT|>
+    await render(<template>
+      <RichTooltip @enableClickEvents={{true}} as |RT|>
         <RT.Toggle>Toggle</RT.Toggle>
         <RT.Bubble>Content</RT.Bubble>
-      </Hds::RichTooltip>
-    `);
+      </RichTooltip>
+    </template>);
     const bubbleElement = document.querySelector('.hds-rich-tooltip__bubble');
     const bubbleId = bubbleElement.id;
     // when closed
diff --git a/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.js b/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gjs
similarity index 80%
rename from showcase/tests/integration/components/hds/rich-tooltip/toggle-test.js
rename to showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gjs
index 2de14c84004..db2c9106700 100644
--- a/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.js
+++ b/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Toggle from "@hashicorp/design-system-components/components/hds/rich-tooltip/toggle";
 
 module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Toggle id="test-rich-tooltip-toggle" />`,
+      <template><Toggle id="test-rich-tooltip-toggle" /></template>,
     );
     assert
       .dom('#test-rich-tooltip-toggle')
@@ -27,25 +27,25 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // TEXT + ICON
 
   test('it should render the text and icon provided', async function (assert) {
-    await render(hbs`<Hds::RichTooltip::Toggle @text="test" @icon="info" />`);
+    await render(<template><Toggle @text="test" @icon="info" /></template>);
     assert.dom('.hds-rich-tooltip__toggle-text').hasText('test');
     assert.dom('.hds-rich-tooltip__toggle-icon.hds-icon-info').exists();
   });
   test('it should render only the text provided', async function (assert) {
-    await render(hbs`
-        <Hds::RichTooltip::Toggle @text="test" />
-      `);
+    await render(<template>
+        <Toggle @text="test" />
+      </template>);
     assert.dom('.hds-rich-tooltip__toggle-text').hasText('test');
     assert.dom('.hds-rich-tooltip__toggle-icon').doesNotExist();
   });
   test('it should render only the icon provided (in the leading position by default)', async function (assert) {
-    await render(hbs`<Hds::RichTooltip::Toggle @icon="info" />`);
+    await render(<template><Toggle @icon="info" /></template>);
     assert.dom('.hds-rich-tooltip__toggle-icon:first-child').exists();
     assert.dom('.hds-rich-tooltip__toggle-text').doesNotExist();
   });
   test('it should render the icon in the trailing position if @iconPosition is set to trailing', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Toggle @icon="info" @iconPosition="trailing" />`,
+      <template><Toggle @icon="info" @iconPosition="trailing" /></template>,
     );
     assert.dom('.hds-rich-tooltip__toggle-icon:last-child').exists();
     assert.dom('.hds-rich-tooltip__toggle-text').doesNotExist();
@@ -54,11 +54,11 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // YIELD
 
   test('it should yield the content provided', async function (assert) {
-    await render(hbs`
-        <Hds::RichTooltip::Toggle>
+    await render(<template>
+        <Toggle>
           Lorem <strong>ipsum</strong> dolor
-        </Hds::RichTooltip::Toggle>
-      `);
+        </Toggle>
+      </template>);
     assert.dom('.hds-rich-tooltip__toggle').exists();
     assert.dom('.hds-rich-tooltip__toggle').hasText('Lorem ipsum dolor');
     assert.dom('.hds-rich-tooltip__toggle strong').hasText('ipsum');
@@ -67,7 +67,7 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // DISPLAY
 
   test('it should render the element as block by default', async function (assert) {
-    await render(hbs`<Hds::RichTooltip::Toggle @icon="info" />`);
+    await render(<template><Toggle @icon="info" /></template>);
     assert.dom('.hds-rich-tooltip__toggle--is-block').exists();
     assert
       .dom('.hds-rich-tooltip__toggle-icon')
@@ -75,7 +75,7 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   });
   test('it should render the element as inline if `@isInline` is `true`', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Toggle @isInline={{true}} @icon="info" />`,
+      <template><Toggle @isInline={{true}} @icon="info" /></template>,
     );
     assert.dom('.hds-rich-tooltip__toggle--is-inline').exists();
     assert
@@ -86,21 +86,21 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // SIZE
 
   test('it should render the element with @text without sizing classes by default if no @size prop is declared', async function (assert) {
-    await render(hbs`<Hds::RichTooltip::Toggle @text="test" />`);
+    await render(<template><Toggle @text="test" /></template>);
     assert.dom('[class*="hds-rich-tooltip__toggle--size-"]').doesNotExist();
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
-    await render(hbs`<Hds::RichTooltip::Toggle @text="test" @size="large" />`);
+    await render(<template><Toggle @text="test" @size="large" /></template>);
     assert
       .dom('.hds-rich-tooltip__toggle')
       .hasClass('hds-rich-tooltip__toggle--size-large');
   });
   test('it should render the element with yielded content without sizing classes even if the @size prop is declared', async function (assert) {
-    await render(hbs`
-      <Hds::RichTooltip::Toggle @size="large">
+    await render(<template>
+      <Toggle @size="large">
         test
-      </Hds::RichTooltip::Toggle>
-    `);
+      </Toggle>
+    </template>);
     assert.dom('[class*="hds-rich-tooltip__toggle--size-"]').doesNotExist();
   });
 
@@ -108,7 +108,7 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
 
   test('it should have a set of attributes based on the arguments provided', async function (assert) {
     await render(
-      hbs`<Hds::RichTooltip::Toggle @popoverId="popoverId" @isOpen={{true}} />`,
+      <template><Toggle @popoverId="popoverId" @isOpen={{true}} /></template>,
     );
     assert.dom('.hds-rich-tooltip__toggle').hasAttribute('type', 'button');
     assert.dom('.hds-rich-tooltip__toggle').hasAria('describedby', 'popoverId');
@@ -125,7 +125,7 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::RichTooltip::Toggle @icon="info" @iconPosition="foo" />`,
+      <template><Toggle @icon="info" @iconPosition="foo" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -138,7 +138,7 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::RichTooltip::Toggle @text="test" @size="foo" />`);
+    await render(<template><Toggle @text="test" @size="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/segmented-group/index-test.js b/showcase/tests/integration/components/hds/segmented-group/index-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/segmented-group/index-test.js
rename to showcase/tests/integration/components/hds/segmented-group/index-test.gjs
index c22f8b1b2b4..4643f8aefd5 100644
--- a/showcase/tests/integration/components/hds/segmented-group/index-test.js
+++ b/showcase/tests/integration/components/hds/segmented-group/index-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import SegmentedGroup from "@hashicorp/design-system-components/components/hds/segmented-group/index";
 
 module('Integration | Component | hds/segmented-group/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::SegmentedGroup id="test-segmented-group" />`);
+    await render(<template><SegmentedGroup id="test-segmented-group" /></template>);
     assert.dom('#test-segmented-group').hasClass('hds-segmented-group');
   });
 
@@ -20,16 +20,16 @@ module('Integration | Component | hds/segmented-group/index', function (hooks) {
 
   test('it renders the contextual components with CSS modifier classes', async function (assert) {
     await render(
-      hbs`<Hds::SegmentedGroup as |SG|>
+      <template><SegmentedGroup as |SG|>
             <SG.Button id="segmented-button" @color="secondary" @text="Button" />
             <SG.Dropdown id="segmented-dropdown" as |DD|>
               <DD.ToggleButton @color="secondary" @text="Toggle" />
               <DD.Interactive @href="#" @text="Dropdown Item" />
             </SG.Dropdown>
-            <SG.Select id="segmented-select"/>
+            <SG.Select id="segmented-select" />
             <SG.TextInput id="segmented-input" />
             <SG.Generic><span id="segmented-generic"></span></SG.Generic>
-          </Hds::SegmentedGroup>`,
+          </SegmentedGroup></template>,
     );
     assert.dom('#segmented-button').hasClass('hds-button');
     assert.dom('#segmented-dropdown').hasClass('hds-dropdown');
diff --git a/showcase/tests/integration/components/hds/separator/index-test.js b/showcase/tests/integration/components/hds/separator/index-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/separator/index-test.js
rename to showcase/tests/integration/components/hds/separator/index-test.gjs
index c2019c312f2..2b9579e2d19 100644
--- a/showcase/tests/integration/components/hds/separator/index-test.js
+++ b/showcase/tests/integration/components/hds/separator/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Separator from "@hashicorp/design-system-components/components/hds/separator/index";
 
 module('Integration | Component | hds/separator/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,19 +16,19 @@ module('Integration | Component | hds/separator/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Separator id="test-separator" />`);
+    await render(<template><Separator id="test-separator" /></template>);
     assert.dom('#test-separator').hasClass('hds-separator');
   });
 
   // SPACING
 
   test('it should render the component with CSS classes that reflect the default vaules if no arguments provided', async function (assert) {
-    await render(hbs`<Hds::Separator id="test-separator" />`);
+    await render(<template><Separator id="test-separator" /></template>);
     assert.dom('#test-separator').hasClass('hds-separator--spacing-24');
   });
 
   test('it should render the component with CSS classes that reflect the arguments provided', async function (assert) {
-    await render(hbs`<Hds::Separator @spacing="0" id="test-separator" />`);
+    await render(<template><Separator @spacing="0" id="test-separator" /></template>);
     assert.dom('#test-separator').hasClass('hds-separator--spacing-0');
   });
 
@@ -41,7 +41,7 @@ module('Integration | Component | hds/separator/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Separator @spacing="foo" id="test-separator" />`);
+    await render(<template><Separator @spacing="foo" id="test-separator" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/side-nav/base-test.js b/showcase/tests/integration/components/hds/side-nav/base-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/side-nav/base-test.js
rename to showcase/tests/integration/components/hds/side-nav/base-test.gjs
index b9151b1137e..846b130ef49 100644
--- a/showcase/tests/integration/components/hds/side-nav/base-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/base-test.gjs
@@ -6,21 +6,21 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Base from "@hashicorp/design-system-components/components/hds/side-nav/base";
 
 module('Integration | Component | hds/side-nav/base', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::SideNav::Base id="test-side-nav" />`);
+    await render(<template><Base id="test-side-nav" /></template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav');
   });
 
   // CONTENT
 
   test('it renders content passed to the named blocks', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Base>
+    await render(<template>
+      <Base>
         <:root>
           <span id="test-side-nav-root" />
         </:root>
@@ -33,8 +33,8 @@ module('Integration | Component | hds/side-nav/base', function (hooks) {
         <:footer>
           <span id="test-side-nav-footer" />
         </:footer>
-      </Hds::SideNav::Base>
-    `);
+      </Base>
+    </template>);
     assert.dom('#test-side-nav-root').exists();
     assert.dom('#test-side-nav-header').exists();
     assert.dom('#test-side-nav-body').exists();
diff --git a/showcase/tests/integration/components/hds/side-nav/header/home-link-test.js b/showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/side-nav/header/home-link-test.js
rename to showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs
index 639eb49844c..db3b7418036 100644
--- a/showcase/tests/integration/components/hds/side-nav/header/home-link-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import HomeLink from "@hashicorp/design-system-components/components/hds/side-nav/header/home-link";
 
 module('Integration | Component | hds/side-nav/home-link', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-home-link" />`,
+      <template><HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-home-link" /></template>,
     );
     assert.dom('#test-home-link').hasClass('hds-side-nav__home-link');
   });
@@ -26,7 +26,7 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" @href="https://www.hashicorp.com/" id="test-home-link" />`,
+      <template><HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" @href="https://www.hashicorp.com/" id="test-home-link" /></template>,
     );
     assert.dom('.hds-icon-hashicorp').exists();
     assert
@@ -37,7 +37,7 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it renders the logo with a custom passed in color', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" />`,
+      <template><HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" /></template>,
     );
     assert
       .dom('.hds-icon-boundary')
@@ -53,7 +53,7 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::SideNav::Header::HomeLink @icon="hashicorp" />`);
+    await render(<template><HomeLink @icon="hashicorp" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js b/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs
similarity index 72%
rename from showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js
rename to showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs
index 6e28172e449..b6ef4b190a4 100644
--- a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import IconButton from "@hashicorp/design-system-components/components/hds/side-nav/header/icon-button";
 
 module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-icon-button" />`,
+      <template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-icon-button" /></template>,
     );
     assert
       .dom('#test-side-nav-icon-button')
@@ -28,7 +28,7 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" />`,
+      <template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" /></template>,
     );
     assert.dom('.hds-icon-search').exists();
   });
@@ -37,14 +37,14 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" />`,
+      <template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" /></template>,
     );
     assert.dom('#test-side-nav-button').hasTagName('button');
   });
 
   test('it should render a <a> link if @href is passed', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-side-nav-button" />`,
+      <template><IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-side-nav-button" /></template>,
     );
     assert
       .dom('#test-side-nav-button')
@@ -54,7 +54,7 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render a <a> link if @route is passed', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" @route="page-utilities.interactive" id="test-side-nav-button" />`,
+      <template><IconButton @icon="search" @ariaLabel="Search" @route="page-utilities.interactive" id="test-side-nav-button" /></template>,
     );
     assert
       .dom('#test-side-nav-button')
@@ -71,7 +71,7 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::SideNav::Header::IconButton @icon="search" />`);
+    await render(<template><IconButton @icon="search" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/side-nav/header/index-test.js b/showcase/tests/integration/components/hds/side-nav/header/index-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/side-nav/header/index-test.js
rename to showcase/tests/integration/components/hds/side-nav/header/index-test.gjs
index ae63b8cda22..5eaa518cd5b 100644
--- a/showcase/tests/integration/components/hds/side-nav/header/index-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/header/index-test.gjs
@@ -6,29 +6,29 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Header from "@hashicorp/design-system-components/components/hds/side-nav/header/index";
 
 module('Integration | Component | hds/side-nav/header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::SideNav::Header id="test-side-nav-header"/>`);
+    await render(<template><Header id="test-side-nav-header" /></template>);
     assert.dom('#test-side-nav-header').hasClass('hds-side-nav-header');
   });
 
   // CONTENT
 
   test('it renders passed in content', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Header>
+    await render(<template>
+      <Header>
         <:logo>
           <div id="test-side-nav-logo"></div>
         </:logo>
         <:actions>
           <div id="test-side-nav-actions"></div>
         </:actions>
-      </Hds::SideNav::Header>
-    `);
+      </Header>
+    </template>);
     assert.dom('#test-side-nav-logo').exists();
     assert.dom('#test-side-nav-actions').exists();
   });
diff --git a/showcase/tests/integration/components/hds/side-nav/index-test.js b/showcase/tests/integration/components/hds/side-nav/index-test.gjs
similarity index 83%
rename from showcase/tests/integration/components/hds/side-nav/index-test.js
rename to showcase/tests/integration/components/hds/side-nav/index-test.gjs
index c1defb86260..26cb68cb8c5 100644
--- a/showcase/tests/integration/components/hds/side-nav/index-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/index-test.gjs
@@ -5,14 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  render,
-  click,
-  resetOnerror,
-  settled,
-  triggerKeyEvent,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { render, click, resetOnerror, settled, triggerKeyEvent } from '@ember/test-helpers';
+import SideNav from "@hashicorp/design-system-components/components/hds/side-nav/index";
 
 class MockEventTarget extends EventTarget {}
 
@@ -48,7 +42,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav id="test-side-nav" @hasA11yRefocus={{false}} />`,
+      <template><SideNav id="test-side-nav" @hasA11yRefocus={{false}} /></template>,
     );
     assert.dom('#test-side-nav').hasClass('hds-side-nav');
   });
@@ -56,8 +50,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   // CONTENT
 
   test('it renders content passed to the named blocks', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav @hasA11yRefocus={{false}}>
+    await render(<template>
+      <SideNav @hasA11yRefocus={{false}}>
         <:header>
           <span id="test-side-nav-header" />
         </:header>
@@ -67,8 +61,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
         <:footer>
           <span id="test-side-nav-footer" />
         </:footer>
-      </Hds::SideNav>
-    `);
+      </SideNav>
+    </template>);
     assert.dom('#test-side-nav-header').exists();
     assert.dom('#test-side-nav-body').exists();
     assert.dom('#test-side-nav-footer').exists();
@@ -77,7 +71,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   // A11Y
 
   test('it renders the `a11y-refocus` elements by default with a default skip link href value of "#hds-main', async function (assert) {
-    await render(hbs`<Hds::SideNav />`);
+    await render(<template><SideNav /></template>);
     assert.dom('#ember-a11y-refocus-nav-message').exists();
     assert
       .dom('#ember-a11y-refocus-skip-link')
@@ -86,13 +80,9 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   });
 
   test('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav
-        @a11yRefocusSkipTo="test-skip-to"
-        @a11yRefocusSkipText="test-skip-text"
-        @a11yRefocusNavigationText="test-navigation-text"
-      />
-    `);
+    await render(<template>
+      <SideNav @a11yRefocusSkipTo="test-skip-to" @a11yRefocusSkipText="test-skip-text" @a11yRefocusNavigationText="test-navigation-text" />
+    </template>);
     assert
       .dom('#ember-a11y-refocus-nav-message')
       .hasText('test-navigation-text');
@@ -103,7 +93,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   });
 
   test('it does not render the `a11y-refocus` elements if `hasA11yRefocus` is false', async function (assert) {
-    await render(hbs`<Hds::SideNav @hasA11yRefocus={{false}} />`);
+    await render(<template><SideNav @hasA11yRefocus={{false}} /></template>);
     assert.dom('#ember-a11y-refocus-nav-message').doesNotExist();
     assert.dom('#ember-a11y-refocus-skip-link').doesNotExist();
   });
@@ -111,18 +101,18 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   // RESPONSIVENESS
 
   test('it is "desktop" by default', async function (assert) {
-    await render(hbs`<Hds::SideNav id="test-side-nav" />`);
+    await render(<template><SideNav id="test-side-nav" /></template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-desktop');
   });
 
   test('it is "responsive" by default', async function (assert) {
-    await render(hbs`<Hds::SideNav id="test-side-nav" />`);
+    await render(<template><SideNav id="test-side-nav" /></template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-responsive');
   });
 
   test('it is not "responsive" if `isResponsive` is false', async function (assert) {
     await render(
-      hbs`<Hds::SideNav id="test-side-nav" @isResponsive={{false}} />`,
+      <template><SideNav id="test-side-nav" @isResponsive={{false}} /></template>,
     );
     assert
       .dom('#test-side-nav')
@@ -132,50 +122,50 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   // MOBILE
 
   test('it is "mobile" on narrow viewports', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav" />
-    `);
+      <SideNav id="test-side-nav" />
+    </template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-mobile');
   });
 
   test('it is minimized/collapsed on narrow viewports by default', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav" />
-    `);
+      <SideNav id="test-side-nav" />
+    </template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
   });
 
   test('it is not minimized/collapsed on narrow viewports if `isResponsive` is false', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav" @isResponsive={{false}} />
-    `);
+      <SideNav id="test-side-nav" @isResponsive={{false}} />
+    </template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
   });
 
   test('it shows a toggle button on narrow viewports by default', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav" />
-    `);
+      <SideNav id="test-side-nav" />
+    </template>);
     assert.dom('.hds-side-nav__toggle-button').exists();
   });
 
   test('it does not show a toggle button on narrow viewports if `isResponsive` is false', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav" @isResponsive={{false}} />
-    `);
+      <SideNav id="test-side-nav" @isResponsive={{false}} />
+    </template>);
     assert.dom('.hds-side-nav__toggle-button').doesNotExist();
   });
 
   test('it expands/collapses when the toggle button is pressed on narrow viewports', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav" />
-    `);
+      <SideNav id="test-side-nav" />
+    </template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
 
     await click('.hds-side-nav__toggle-button');
@@ -185,9 +175,9 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   });
 
   test('it collapses when the ESC key is pressed on narrow viewports', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <style>:root {--hds-app-desktop-breakpoint: 10088px}</style>
-      <Hds::SideNav id="test-side-nav">
+      <SideNav id="test-side-nav">
         <:header as |H|>
           <span id="test-side-nav-header" data-test-minimized={{H.isMinimized}} />
         </:header>
@@ -198,8 +188,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
         <:footer as |F|>
           <span id="test-side-nav-footer" data-test-minimized={{F.isMinimized}} />
         </:footer>
-      </Hds::SideNav>
-    `);
+      </SideNav>
+    </template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-minimized');
     await click('.hds-side-nav__toggle-button');
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
@@ -213,7 +203,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   test('if the @ariaLabel argument is not provided the default aria-labelledby value is set on the toggle button', async function (assert) {
     await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`,
+      <template><SideNav @isCollapsible={{true}} id="test-side-nav" /></template>,
     );
     assert
       .dom('.hds-side-nav__toggle-button')
@@ -223,7 +213,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   test('if the @ariaLabel argument is provided the label value is set on the toggle button', async function (assert) {
     await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" @ariaLabel="Test"/>`,
+      <template><SideNav @isCollapsible={{true}} id="test-side-nav" @ariaLabel="Test" /></template>,
     );
     assert
       .dom('.hds-side-nav__toggle-button')
@@ -235,7 +225,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
 
   test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) {
     await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} id="test-side-nav" />`,
+      <template><SideNav @isCollapsible={{true}} id="test-side-nav" /></template>,
     );
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
 
@@ -247,8 +237,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
   });
 
   test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav @isCollapsible={{true}} id="test-side-nav">
+    await render(<template>
+      <SideNav @isCollapsible={{true}} id="test-side-nav">
         <:header as |H|>
           <span id="test-side-nav-header" data-test-minimized={{H.isMinimized}} />
         </:header>
@@ -259,8 +249,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
         <:footer as |F|>
           <span id="test-side-nav-footer" data-test-minimized={{F.isMinimized}} />
         </:footer>
-      </Hds::SideNav>
-    `);
+      </SideNav>
+    </template>);
     assert.dom('#test-side-nav').hasClass('hds-side-nav--is-not-minimized');
     assert
       .dom('.hds-side-nav__toggle-button')
@@ -306,8 +296,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
       onDesktopViewportChange: (...args) => calls.push(args),
     });
 
-    await render(hbs`
-      <Hds::SideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}}>
+    await render(<template>
+      <SideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}}>
         <:header as |H|>
           <span id="test-side-nav-header" data-test-minimized={{H.isMinimized}} />
         </:header>
@@ -318,8 +308,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
         <:footer as |F|>
           <span id="test-side-nav-footer" data-test-minimized={{F.isMinimized}} />
         </:footer>
-      </Hds::SideNav>
-    `);
+      </SideNav>
+    </template>);
 
     assert.strictEqual(calls.length, 1, 'called with initial viewport');
 
@@ -341,8 +331,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
       onDesktopViewportChange: (...args) => calls.push(args),
     });
 
-    await render(hbs`
-      <Hds::SideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}}>
+    await render(<template>
+      <SideNav @isCollapsible={{true}} @onDesktopViewportChange={{this.onDesktopViewportChange}}>
         <:header as |H|>
           <span id="test-side-nav-header" data-test-minimized={{H.isMinimized}} />
         </:header>
@@ -353,8 +343,8 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
         <:footer as |F|>
           <span id="test-side-nav-footer" data-test-minimized={{F.isMinimized}} />
         </:footer>
-      </Hds::SideNav>
-    `);
+      </SideNav>
+    </template>);
 
     await click('.hds-side-nav__toggle-button');
     assert.dom('.hds-side-nav-hide-when-minimized').hasAttribute('inert');
@@ -384,7 +374,7 @@ module('Integration | Component | hds/side-nav/index', function (hooks) {
     let toggled = false;
     this.set('onToggleMinimizedStatus', () => (toggled = true));
     await render(
-      hbs`<Hds::SideNav @isCollapsible={{true}} @onToggleMinimizedStatus={{this.onToggleMinimizedStatus}} />`,
+      <template><SideNav @isCollapsible={{true}} @onToggleMinimizedStatus={{this.onToggleMinimizedStatus}} /></template>,
     );
     await click('.hds-side-nav__toggle-button');
     assert.ok(toggled);
diff --git a/showcase/tests/integration/components/hds/side-nav/list/back-link-test.js b/showcase/tests/integration/components/hds/side-nav/list/back-link-test.gjs
similarity index 78%
rename from showcase/tests/integration/components/hds/side-nav/list/back-link-test.js
rename to showcase/tests/integration/components/hds/side-nav/list/back-link-test.gjs
index 3c0cf308833..685605d46ee 100644
--- a/showcase/tests/integration/components/hds/side-nav/list/back-link-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/list/back-link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import BackLink from "@hashicorp/design-system-components/components/hds/side-nav/list/back-link";
 
 module(
   'Integration | Component | hds/side-nav/list/back-link',
@@ -17,7 +17,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::SideNav::List::BackLink id="test-side-nav-list-item-link-back-link" />`,
+        <template><BackLink id="test-side-nav-list-item-link-back-link" /></template>,
       );
       assert
         .dom('#test-side-nav-list-item-link-back-link')
@@ -28,7 +28,7 @@ module(
 
     test('it renders the passed in args', async function (assert) {
       await render(
-        hbs`<Hds::SideNav::List::BackLink @text="Back to parent page" @href="#" />`,
+        <template><BackLink @text="Back to parent page" @href="#" /></template>,
       );
       assert.dom('.hds-icon-chevron-left').exists();
       assert
@@ -39,7 +39,7 @@ module(
     // GENERATED ELEMENTS
 
     test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-      await render(hbs`<Hds::SideNav::List::BackLink />`);
+      await render(<template><BackLink /></template>);
       assert
         .dom('.hds-side-nav__list-item-link--back-link')
         .hasTagName('button');
@@ -47,7 +47,7 @@ module(
 
     test('it should render a <a> link if @href is passed', async function (assert) {
       await render(
-        hbs`<Hds::SideNav::List::BackLink @href="https://www.hashicorp.com/" />`,
+        <template><BackLink @href="https://www.hashicorp.com/" /></template>,
       );
       assert
         .dom('.hds-side-nav__list-item-link--back-link')
@@ -57,7 +57,7 @@ module(
 
     test('it should render a <a> link if @route is passed', async function (assert) {
       await render(
-        hbs`<Hds::SideNav::List::BackLink @route="page-utilities.interactive" />`,
+        <template><BackLink @route="page-utilities.interactive" /></template>,
       );
       assert
         .dom('.hds-side-nav__list-item-link--back-link')
diff --git a/showcase/tests/integration/components/hds/side-nav/list/index-test.js b/showcase/tests/integration/components/hds/side-nav/list/index-test.gjs
similarity index 81%
rename from showcase/tests/integration/components/hds/side-nav/list/index-test.js
rename to showcase/tests/integration/components/hds/side-nav/list/index-test.gjs
index b4117d0ffe6..b558b86a0d8 100644
--- a/showcase/tests/integration/components/hds/side-nav/list/index-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/list/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import List from "@hashicorp/design-system-components/components/hds/side-nav/list/index";
 
 module('Integration | Component | hds/side-nav/list/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -14,7 +14,7 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
   // Basic
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::SideNav::List id="test-side-nav-list-wrapper" />`);
+    await render(<template><List id="test-side-nav-list-wrapper" /></template>);
     assert
       .dom('#test-side-nav-list-wrapper')
       .hasClass('hds-side-nav__list-wrapper');
@@ -23,14 +23,14 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
   // Test Content / Args
 
   test('it renders passed in yielded content', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::List as |L|>
+    await render(<template>
+      <List as |L|>
         <L.Item id="test-side-nav-list-content-item" />
         <L.BackLink id="test-side-nav-list-content-backlink" />
         <L.Title id="test-side-nav-list-content-title" />
         <L.Link id="test-side-nav-list-content-link" />
-      </Hds::SideNav::List>
-    `);
+      </List>
+    </template>);
     assert.dom('#test-side-nav-list-content-item').exists();
     assert.dom('#test-side-nav-list-content-backlink').exists();
     assert.dom('#test-side-nav-list-content-title').exists();
@@ -39,9 +39,9 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
 
   // Accessibilty feature
   test('it has the role of "list" role so Safari will identify it correctly as a list since the list-style is changed in the CSS', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::List />
-    `);
+    await render(<template>
+      <List />
+    </template>);
     assert.dom('.hds-side-nav__list').hasAttribute('role', 'list');
   });
 });
diff --git a/showcase/tests/integration/components/hds/side-nav/list/item-test.js b/showcase/tests/integration/components/hds/side-nav/list/item-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/side-nav/list/item-test.js
rename to showcase/tests/integration/components/hds/side-nav/list/item-test.gjs
index 18bbbedc664..03ec2d1734e 100644
--- a/showcase/tests/integration/components/hds/side-nav/list/item-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/list/item-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Item from "@hashicorp/design-system-components/components/hds/side-nav/list/item";
 
 module('Integration | Component | hds/side-nav/list/item', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,7 +15,7 @@ module('Integration | Component | hds/side-nav/list/item', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Item id="test-side-nav-list-item" />`,
+      <template><Item id="test-side-nav-list-item" /></template>,
     );
     assert.dom('#test-side-nav-list-item').hasClass('hds-side-nav__list-item');
   });
@@ -23,11 +23,11 @@ module('Integration | Component | hds/side-nav/list/item', function (hooks) {
   // Test Content
 
   test('it renders the passed in custom content', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::List::Item>
+    await render(<template>
+      <Item>
         <span id="test-custom-content" />
-      </Hds::SideNav::List::Item>
-    `);
+      </Item>
+    </template>);
     assert.dom('#test-custom-content').exists();
   });
 });
diff --git a/showcase/tests/integration/components/hds/side-nav/list/link-test.js b/showcase/tests/integration/components/hds/side-nav/list/link-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/side-nav/list/link-test.js
rename to showcase/tests/integration/components/hds/side-nav/list/link-test.gjs
index acb143df190..9dfe7b35dcb 100644
--- a/showcase/tests/integration/components/hds/side-nav/list/link-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/list/link-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Link from "@hashicorp/design-system-components/components/hds/side-nav/list/link";
 
 module('Integration | Component | hds/side-nav/list/link', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,7 +15,7 @@ module('Integration | Component | hds/side-nav/list/link', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link id="test-side-nav-list-item-link" />`,
+      <template><Link id="test-side-nav-list-item-link" /></template>,
     );
     assert
       .dom('#test-side-nav-list-item-link')
@@ -26,7 +26,7 @@ module('Integration | Component | hds/side-nav/list/link', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link @icon="boundary" @text="Boundary" @count="3" @badge="Alpha" @hasSubItems={{true}} @isHrefExternal={{true}} />`,
+      <template><Link @icon="boundary" @text="Boundary" @count="3" @badge="Alpha" @hasSubItems={{true}} @isHrefExternal={{true}} /></template>,
     );
     assert.dom('.hds-icon-boundary').exists();
     assert.dom('.hds-side-nav__list-item-text').hasText('Boundary');
@@ -38,30 +38,30 @@ module('Integration | Component | hds/side-nav/list/link', function (hooks) {
 
   test('it renders the link as "active" if @isActive is true', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link @isActive={{true}} id="test-side-nav-link" />`,
+      <template><Link @isActive={{true}} id="test-side-nav-link" /></template>,
     );
     assert.dom('#test-side-nav-link').hasClass('active');
   });
 
   test('it renders the passed in custom content', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::List::Link>
+    await render(<template>
+      <Link>
         <span id="test-custom-content" />
-      </Hds::SideNav::List::Link>
-    `);
+      </Link>
+    </template>);
     assert.dom('#test-custom-content').exists();
   });
 
   // GENERATED ELEMENTS
 
   test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-    await render(hbs`<Hds::SideNav::List::Link />`);
+    await render(<template><Link /></template>);
     assert.dom('.hds-side-nav__list-item-link').hasTagName('button');
   });
 
   test('it should render a <a> link if @href is passed', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link @href="https://www.hashicorp.com/" />`,
+      <template><Link @href="https://www.hashicorp.com/" /></template>,
     );
     assert
       .dom('.hds-side-nav__list-item-link')
@@ -71,7 +71,7 @@ module('Integration | Component | hds/side-nav/list/link', function (hooks) {
 
   test('it should render a <a> link if @route is passed', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::List::Link @route="page-utilities.interactive" />`,
+      <template><Link @route="page-utilities.interactive" /></template>,
     );
     assert
       .dom('.hds-side-nav__list-item-link')
diff --git a/showcase/tests/integration/components/hds/side-nav/portal/index-test.js b/showcase/tests/integration/components/hds/side-nav/portal/index-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/side-nav/portal/index-test.js
rename to showcase/tests/integration/components/hds/side-nav/portal/index-test.gjs
index 545d0a6b79b..af889333683 100644
--- a/showcase/tests/integration/components/hds/side-nav/portal/index-test.js
+++ b/showcase/tests/integration/components/hds/side-nav/portal/index-test.gjs
@@ -6,16 +6,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, waitUntil } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // NOTICE: we combine the tests for `PortalTarget` and `Portal` in a single file, because the two components are strictly interconnected
+import Target from "@hashicorp/design-system-components/components/hds/side-nav/portal/target";
+import Portal from "@hashicorp/design-system-components/components/hds/side-nav/portal/index";
 
 module('Integration | Component | hds/side-nav/portal', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::SideNav::Portal::Target id="test-side-nav-portal-target" />`,
+      <template><Target id="test-side-nav-portal-target" /></template>,
     );
     assert
       .dom('#test-side-nav-portal-target')
@@ -25,35 +25,35 @@ module('Integration | Component | hds/side-nav/portal', function (hooks) {
   // CONTENT
 
   test('it renders the content provided via portal', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Portal::Target />
-      <Hds::SideNav::Portal>
+    await render(<template>
+      <Target />
+      <Portal>
         <div id="test-side-nav-content-portaled" />
-      </Hds::SideNav::Portal>
-    `);
+      </Portal>
+    </template>);
     assert.dom('#test-side-nav-content-portaled').exists();
   });
 
   test('we can use custom a custom name for the target portal', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Portal::Target @targetName="test-side-nav-portal-target" />
-      <Hds::SideNav::Portal @targetName="test-side-nav-portal-target">
+    await render(<template>
+      <Target @targetName="test-side-nav-portal-target" />
+      <Portal @targetName="test-side-nav-portal-target">
         <div id="test-side-nav-content-portaled" />
-      </Hds::SideNav::Portal>
-    `);
+      </Portal>
+    </template>);
     assert.dom('#test-side-nav-content-portaled').exists();
   });
 
   test('it renders the panel items provided via portal, in the right DOM location', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Portal::Target id="test-side-nav-content" />
-      <Hds::SideNav::Portal as |Nav|>
+    await render(<template>
+      <Target id="test-side-nav-content" />
+      <Portal as |Nav|>
         <Nav.BackLink @text="Back-link" @href="#" id="test-side-nav-list-backlink" />
         <Nav.Title id="test-side-nav-list-title">Title</Nav.Title>
         <Nav.Item id="test-side-nav-list-item">Item</Nav.Item>
         <Nav.Link @icon="hexagon" @text="Link" @href="#" id="test-side-nav-list-link" />
-      </Hds::SideNav::Portal>
-    `);
+      </Portal>
+    </template>);
     assert
       .dom(
         '#test-side-nav-content .hds-side-nav__content-panels .hds-side-nav__content-panel',
@@ -78,12 +78,12 @@ module('Integration | Component | hds/side-nav/portal', function (hooks) {
   // A11Y
 
   test('it should render with the correct aria-label attribute passed down to the "list" parent', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Portal::Target />
-      <Hds::SideNav::Portal @ariaLabel="test">
-        <div/>
-      </Hds::SideNav::Portal>
-    `);
+    await render(<template>
+      <Target />
+      <Portal @ariaLabel="test">
+        <div />
+      </Portal>
+    </template>);
     assert
       .dom('.hds-side-nav__list-wrapper')
       .hasAttribute('aria-label', 'test');
@@ -92,18 +92,18 @@ module('Integration | Component | hds/side-nav/portal', function (hooks) {
   // DOM MANIPULATION
 
   test('it marks inactive subnavs', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Portal::Target />
-      <Hds::SideNav::Portal data-test-side-nav-panel as |Nav|>
+    await render(<template>
+      <Target />
+      <Portal data-test-side-nav-panel as |Nav|>
         <Nav.Link @text="Some link content" @href="#" />
-      </Hds::SideNav::Portal>
-      <Hds::SideNav::Portal data-test-side-nav-panel as |Nav|>
+      </Portal>
+      <Portal data-test-side-nav-panel as |Nav|>
         <Nav.Link @text="Some other link content" @href="#" />
-      </Hds::SideNav::Portal>
-      <Hds::SideNav::Portal data-test-side-nav-panel as |Nav|>
+      </Portal>
+      <Portal data-test-side-nav-panel as |Nav|>
         <Nav.Link @text="The last link content" @href="#" />
-      </Hds::SideNav::Portal>
-    `);
+      </Portal>
+    </template>);
 
     assert.dom('[data-test-side-nav-panel]').exists({ count: 3 });
     assert
@@ -118,18 +118,18 @@ module('Integration | Component | hds/side-nav/portal', function (hooks) {
   });
 
   test('it sets transform on the container', async function (assert) {
-    await render(hbs`
-      <Hds::SideNav::Portal::Target id="test-side-nav-content" />
-      <Hds::SideNav::Portal as |Nav|>
+    await render(<template>
+      <Target id="test-side-nav-content" />
+      <Portal as |Nav|>
         <Nav.Link @text="Some link content" @href="#" id="test-side-nav-list-link-1" data-test-side-nav-link-2 />
-      </Hds::SideNav::Portal>
-      <Hds::SideNav::Portal as |Nav|>
+      </Portal>
+      <Portal as |Nav|>
         <Nav.Link @text="Some other link content" @href="#" id="test-side-nav-list-link-2" data-test-side-nav-link-2 />
-      </Hds::SideNav::Portal>
-      <Hds::SideNav::Portal as |Nav|>
+      </Portal>
+      <Portal as |Nav|>
         <Nav.Link @text="The last link content" @href="#" id="test-side-nav-list-link-3" data-test-side-nav-link-3 />
-      </Hds::SideNav::Portal>
-    `);
+      </Portal>
+    </template>);
 
     // we need to wait for
     let animationDone = false;
diff --git a/showcase/tests/integration/components/hds/stepper/list-step-test.js b/showcase/tests/integration/components/hds/stepper/list-step-test.gjs
similarity index 77%
rename from showcase/tests/integration/components/hds/stepper/list-step-test.js
rename to showcase/tests/integration/components/hds/stepper/list-step-test.gjs
index da040ba527f..40be946fb4b 100644
--- a/showcase/tests/integration/components/hds/stepper/list-step-test.js
+++ b/showcase/tests/integration/components/hds/stepper/list-step-test.gjs
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Step from "@hashicorp/design-system-components/components/hds/stepper/list/step";
+import List from "@hashicorp/design-system-components/components/hds/stepper/list/index";
 
 module('Integration | Component | hds/stepper/list/step', function (hooks) {
   setupRenderingTest(hooks);
@@ -14,7 +15,7 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   // CLASSES
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Stepper::List::Step data-test="step-1" />`);
+    await render(<template><Step data-test="step-1" /></template>);
     assert.dom('[data-test="step-1"]').hasClass('hds-stepper-list__step');
   });
 
@@ -22,11 +23,11 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
 
   test('it sets the status to incomplete when the @status argument is not provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step>
+      <template>
+          <Step>
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -39,11 +40,11 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
 
   test('it sets the status to complete when the @status argument is provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step @status="complete">
+      <template>
+          <Step @status="complete">
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -56,11 +57,11 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
 
   test('it sets the status to progress when the @status argument is provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step @status="progress">
+      <template>
+          <Step @status="progress">
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -73,11 +74,11 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
 
   test('it sets the status to processing when the @status argument is provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step @status="processing">
+      <template>
+          <Step @status="processing">
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -92,22 +93,22 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
 
   test('it renders a div when the @titleTag argument is not provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step>
+      <template>
+          <Step>
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-title').hasTagName('div');
   });
 
   test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step @titleTag="h2">
+      <template>
+          <Step @titleTag="h2">
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-title').hasTagName('h2');
   });
@@ -117,11 +118,11 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it sets the step number automatically based on the step ids provided', async function (assert) {
     // Note: Testing this use case requires wrapping the element in its parent element
     await render(
-      hbs`
-          <Hds::Stepper::List as |S|>
+      <template>
+          <List as |S|>
             <S.Step />
-          </Hds::Stepper::List>
-        `,
+          </List>
+        </template>,
     );
     assert.dom('.hds-stepper-indicator-step__text').hasText('1');
   });
@@ -130,11 +131,11 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
 
   test('it renders the title when the title contextual component block is used', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step>
+      <template>
+          <Step>
             <:title>Test</:title>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-title').containsText('Test');
   });
@@ -142,17 +143,17 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   // DESCRIPTION
 
   test('it does not render the description when the description contextual component block is not used', async function (assert) {
-    await render(hbs`<Hds::Stepper::List::Step></Hds::Stepper::List::Step>`);
+    await render(<template><Step></Step></template>);
     assert.dom('.hds-stepper-list__step-description').doesNotExist();
   });
 
   test('it renders the description when the description contextual component block is used', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step>
+      <template>
+          <Step>
             <:description>Test</:description>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-description').exists();
     assert.dom('.hds-stepper-list__step-description').containsText('Test');
@@ -161,17 +162,17 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   // CONTENT
 
   test('it does not render the content when the content contextual component block is not used', async function (assert) {
-    await render(hbs`<Hds::Stepper::List::Step></Hds::Stepper::List::Step>`);
+    await render(<template><Step></Step></template>);
     assert.dom('.hds-stepper-list__step-content').doesNotExist();
   });
 
   test('it renders the content when the content contextual component block is used', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List::Step>
+      <template>
+          <Step>
             <:content>Test</:content>
-          </Hds::Stepper::List::Step>
-        `,
+          </Step>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-content').exists();
     assert.dom('.hds-stepper-list__step-content').containsText('Test');
diff --git a/showcase/tests/integration/components/hds/stepper/list-test.js b/showcase/tests/integration/components/hds/stepper/list-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/stepper/list-test.js
rename to showcase/tests/integration/components/hds/stepper/list-test.gjs
index 4c234c4c85c..59c3df2bd8c 100644
--- a/showcase/tests/integration/components/hds/stepper/list-test.js
+++ b/showcase/tests/integration/components/hds/stepper/list-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import List from "@hashicorp/design-system-components/components/hds/stepper/list/index";
 
 module('Integration | Component | hds/stepper/list', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,7 +15,7 @@ module('Integration | Component | hds/stepper/list', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Stepper::List @ariaLabel="Label" id="test-stepper-list" />`,
+      <template><List @ariaLabel="Label" id="test-stepper-list" /></template>,
     );
     assert.dom('#test-stepper-list').hasClass('hds-stepper-list');
   });
@@ -24,26 +24,26 @@ module('Integration | Component | hds/stepper/list', function (hooks) {
 
   test('it renders a div when the @titleTag argument is not provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List @ariaLabel="Label" as |S|>
+      <template>
+          <List @ariaLabel="Label" as |S|>
             <S.Step>
               <:title>Test</:title>
             </S.Step>
-          </Hds::Stepper::List>
-        `,
+          </List>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-title').hasTagName('div');
   });
 
   test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
     await render(
-      hbs`
-          <Hds::Stepper::List @titleTag="h2" @ariaLabel="Label" as |S|>
+      <template>
+          <List @titleTag="h2" @ariaLabel="Label" as |S|>
             <S.Step>
               <:title>Test</:title>
             </S.Step>
-          </Hds::Stepper::List>
-        `,
+          </List>
+        </template>,
     );
     assert.dom('.hds-stepper-list__step-title').hasTagName('h2');
   });
@@ -52,7 +52,7 @@ module('Integration | Component | hds/stepper/list', function (hooks) {
 
   test('it sets the aria-label of the ol to the value provided to the @ariaLabel argument', async function (assert) {
     await render(
-      hbs`<Hds::Stepper::List id="test-stepper-list" @ariaLabel="test"/>`,
+      <template><List id="test-stepper-list" @ariaLabel="test" /></template>,
     );
     assert.dom('.hds-stepper-list').hasAttribute('aria-label', 'test');
   });
diff --git a/showcase/tests/integration/components/hds/stepper/nav-panel-test.js b/showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs
similarity index 85%
rename from showcase/tests/integration/components/hds/stepper/nav-panel-test.js
rename to showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs
index 1866798d3bb..5962a59668a 100644
--- a/showcase/tests/integration/components/hds/stepper/nav-panel-test.js
+++ b/showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs
@@ -6,12 +6,12 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // NOTICE
 // Because of how the `panel` subcomponent is built,
 // it's practically impossible to test in isolation, so in our tests
 // in this file it will be wrapped inside its parent component.
+import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
+import Panel from "@hashicorp/design-system-components/components/hds/stepper/nav/panel";
 
 module('Integration | Component | hds/stepper/nav/panel', function (hooks) {
   setupRenderingTest(hooks);
@@ -20,21 +20,21 @@ module('Integration | Component | hds/stepper/nav/panel', function (hooks) {
     this.set('createNavPanel', async (args = {}) => {
       this.currentStep = args.currentStep ?? undefined;
       this.isNavInteractive = args.isNavInteractive ?? undefined;
-      return await render(hbs`
-        <Hds::Stepper::Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
+      return await render(<template>
+        <Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
           <S.Step></S.Step>
           <S.Panel>
             <div id="test-panel-content">Test</div>
           </S.Panel>
-        </Hds::Stepper::Nav>
-      `);
+        </Nav>
+      </template>);
     });
   });
 
   // CLASSES
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Stepper::Nav::Panel data-test="panel-1" />`);
+    await render(<template><Panel data-test="panel-1" /></template>);
     assert.dom('[data-test="panel-1"]').hasClass('hds-stepper-nav__panel');
   });
 
diff --git a/showcase/tests/integration/components/hds/stepper/nav-step-test.js b/showcase/tests/integration/components/hds/stepper/nav-step-test.gjs
similarity index 90%
rename from showcase/tests/integration/components/hds/stepper/nav-step-test.js
rename to showcase/tests/integration/components/hds/stepper/nav-step-test.gjs
index c4fdbcce00b..8879c5e7533 100644
--- a/showcase/tests/integration/components/hds/stepper/nav-step-test.js
+++ b/showcase/tests/integration/components/hds/stepper/nav-step-test.gjs
@@ -6,12 +6,12 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 // NOTICE
 // Because of how the `step` subcomponent is built,
 // it's practically impossible to test in isolation, so in our tests
 // in this file it will be wrapped inside its parent comoponent.
+import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
+import Step from "@hashicorp/design-system-components/components/hds/stepper/nav/step";
 
 module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,29 +24,22 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
       this.stepNumber = args.stepNumber ?? undefined;
       this.isNavInteractive = args.isNavInteractive ?? undefined;
       this.titleTag = args.titleTag ?? undefined;
-      return await render(hbs`
-        <Hds::Stepper::Nav
-          @currentStep={{this.currentStep}}
-          @isInteractive={{this.isNavInteractive}}
-          as |S|
-        >
-          <S.Step
-            @stepNumber={{this.stepNumber}}
-            @titleTag={{this.titleTag}}
-          >
+      return await render(<template>
+        <Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
+          <S.Step @stepNumber={{this.stepNumber}} @titleTag={{this.titleTag}}>
             <:title>{{this.title}}</:title>
             <:description>{{this.description}}</:description>
           </S.Step>
           <S.Panel />
-        </Hds::Stepper::Nav>
-      `);
+        </Nav>
+      </template>);
     });
   });
 
   // CLASSES
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Stepper::Nav::Step id="test-stepper-nav-step" />`);
+    await render(<template><Step id="test-stepper-nav-step" /></template>);
     assert.dom('#test-stepper-nav-step').hasClass('hds-stepper-nav__step');
   });
 
@@ -91,11 +84,11 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
 
   test('it sets the step to incomplete when the @currentStep is less than the nodeIndex and @isNavInteractive is true', async function (assert) {
     await render(
-      hbs`
-        <Hds::Stepper::Nav::Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{true}}>
+      <template>
+        <Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{true}}>
           <:title>Title</:title>
           <:description>Description</:description>
-        </Hds::Stepper::Nav::Step>`,
+        </Step></template>,
     );
     assert
       .dom('.hds-stepper-nav__step')
@@ -144,11 +137,11 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
 
   test('it sets the step to incomplete when the @currentStep is less than the nodeIndex and @isNavInteractive is false', async function (assert) {
     await render(
-      hbs`
-        <Hds::Stepper::Nav::Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{false}}>
+      <template>
+        <Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{false}}>
           <:title>Title</:title>
           <:description>Description</:description>
-        </Hds::Stepper::Nav::Step>`,
+        </Step></template>,
     );
     assert
       .dom('.hds-stepper-nav__step')
@@ -206,7 +199,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   // DESCRIPTION
 
   test('it does not render the description when the description contextual component block is not used', async function (assert) {
-    await render(hbs`<Hds::Stepper::Nav::Step></Hds::Stepper::Nav::Step>`);
+    await render(<template><Step></Step></template>);
     assert.dom('.hds-stepper-nav__step-description').doesNotExist();
   });
 
diff --git a/showcase/tests/integration/components/hds/stepper/nav-test.js b/showcase/tests/integration/components/hds/stepper/nav-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/stepper/nav-test.js
rename to showcase/tests/integration/components/hds/stepper/nav-test.gjs
index 49a02aec94e..be463ddfbf4 100644
--- a/showcase/tests/integration/components/hds/stepper/nav-test.js
+++ b/showcase/tests/integration/components/hds/stepper/nav-test.gjs
@@ -5,14 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  render,
-  click,
-  focus,
-  setupOnerror,
-  triggerKeyEvent,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { render, click, focus, setupOnerror, triggerKeyEvent } from '@ember/test-helpers';
+import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
+import { array, hash } from "@ember/helper";
 
 module('Integration | Component | hds/stepper/nav', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,24 +19,16 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
       this.onStepChange = args.onStepChange ?? undefined;
       this.isInteractive = args.isInteractive ?? undefined;
       this.ariaLabel = args.ariaLabel ?? 'Label';
-      return await render(hbs`
-          <Hds::Stepper::Nav
-            id="test-stepper-nav"
-            @currentStep={{this.currentStep}}
-            @titleTag={{this.titleTag}}
-            @isInteractive={{this.isInteractive}}
-            @ariaLabel={{this.ariaLabel}}
-            @onStepChange={{this.onStepChange}}
-            as |S|
-          >
+      return await render(<template>
+          <Nav id="test-stepper-nav" @currentStep={{this.currentStep}} @titleTag={{this.titleTag}} @isInteractive={{this.isInteractive}} @ariaLabel={{this.ariaLabel}} @onStepChange={{this.onStepChange}} as |S|>
             <S.Step data-test="step-1">
             </S.Step>
             <S.Step data-test="step-2">
             </S.Step>
             <S.Panel></S.Panel>
             <S.Panel></S.Panel>
-          </Hds::Stepper::Nav>
-        `);
+          </Nav>
+        </template>);
     });
 
     this.set('createStepperNavArray', async (args = {}) => {
@@ -51,22 +38,12 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
       this.step1Title = args.step1Title ?? undefined;
       this.step1Description = args.step1Description ?? undefined;
       this.ariaLabel = args.ariaLabel ?? 'Label';
-      return await render(hbs`
-          <Hds::Stepper::Nav
-            id="test-stepper-nav"
-            @steps={{array
-              (hash title=this.step1Title description=this.step1Description)
-              (hash title="Step 2")
-            }}
-            @currentStep={{this.currentStep}}
-            @titleTag={{this.titleTag}}
-            @ariaLabel={{this.ariaLabel}}
-            @onStepChange={{this.onStepChange}}
-          >
+      return await render(<template>
+          <Nav id="test-stepper-nav" @steps={{array (hash title=this.step1Title description=this.step1Description) (hash title="Step 2")}} @currentStep={{this.currentStep}} @titleTag={{this.titleTag}} @ariaLabel={{this.ariaLabel}} @onStepChange={{this.onStepChange}}>
             <:body>
             </:body>
-          </Hds::Stepper::Nav>
-        `);
+          </Nav>
+        </template>);
     });
   });
 
@@ -96,20 +73,10 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
   });
 
   test('it should have 2 Steps and no Panels if no :body named block is added', async function (assert) {
-    await render(hbs`
-      <Hds::Stepper::Nav
-        id="test-stepper-nav"
-        @steps={{array
-          (hash title=this.step1Title description=this.step1Description)
-          (hash title="Step 2")
-        }}
-        @currentStep={{this.currentStep}}
-        @isInteractive={{false}}
-        @titleTag={{this.titleTag}}
-        @onStepChange={{this.onStepChange}}
-      >
-      </Hds::Stepper::Nav>
-    `);
+    await render(<template>
+      <Nav id="test-stepper-nav" @steps={{array (hash title=this.step1Title description=this.step1Description) (hash title="Step 2")}} @currentStep={{this.currentStep}} @isInteractive={{false}} @titleTag={{this.titleTag}} @onStepChange={{this.onStepChange}}>
+      </Nav>
+    </template>);
     assert.dom('.hds-stepper-nav__step').exists({ count: 2 });
     assert.dom('.hds-stepper-nav__panel').doesNotExist();
   });
@@ -238,19 +205,10 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`
-      <Hds::Stepper::Nav
-        id="test-stepper-nav"
-        @steps={{array
-          (hash title=this.step1Title description=this.step1Description)
-          (hash title="Step 2")
-        }}
-        @currentStep={{this.currentStep}}
-        @titleTag={{this.titleTag}}
-        @onStepChange={{this.onStepChange}}
-      >
-      </Hds::Stepper::Nav>
-    `);
+    await render(<template>
+      <Nav id="test-stepper-nav" @steps={{array (hash title=this.step1Title description=this.step1Description) (hash title="Step 2")}} @currentStep={{this.currentStep}} @titleTag={{this.titleTag}} @onStepChange={{this.onStepChange}}>
+      </Nav>
+    </template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/stepper/step-indicator-test.js b/showcase/tests/integration/components/hds/stepper/step-indicator-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/stepper/step-indicator-test.js
rename to showcase/tests/integration/components/hds/stepper/step-indicator-test.gjs
index a0376c1a930..a9da5cd6186 100644
--- a/showcase/tests/integration/components/hds/stepper/step-indicator-test.js
+++ b/showcase/tests/integration/components/hds/stepper/step-indicator-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Indicator from "@hashicorp/design-system-components/components/hds/stepper/step/indicator";
 
 module(
   'Integration | Component | hds/stepper/indicator/step',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @text="1" @status="incomplete" />`,
+        <template><Indicator id="test-stepper-indicator-step" @text="1" @status="incomplete" /></template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -26,7 +26,7 @@ module(
 
     test('it should render the non-interactive variant by default', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @status="incomplete" @test="1" />`,
+        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @test="1" /></template>,
       );
       // Is there a way to test if an element DOESN'T have a class?
       assert
@@ -36,7 +36,7 @@ module(
 
     test('it should render the interactive variant if passed the isInteractive property', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @status="incomplete" @isInteractive={{true}} />`,
+        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @isInteractive={{true}} /></template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -49,7 +49,7 @@ module(
 
     test('it should render the correct step status if the @status="incomplete" prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @status="incomplete" />`,
+        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" /></template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -60,7 +60,7 @@ module(
 
     test('it should render the correct status if the @status="incomplete" prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @status="incomplete" @isInteractive={{true}} />`,
+        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @isInteractive={{true}} /></template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -72,7 +72,7 @@ module(
 
     test('it should render text within the indicator if the @text prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @status="incomplete" @text="1" />`,
+        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @text="1" /></template>,
       );
       assert.dom('#test-stepper-indicator-step').hasText('1');
     });
@@ -81,7 +81,7 @@ module(
 
     test('it should render a flight icon if the @status="processing" prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Step::Indicator id="test-stepper-indicator-step" @status="processing" />`,
+        <template><Indicator id="test-stepper-indicator-step" @status="processing" /></template>,
       );
       assert.dom('.hds-icon-loading').exists();
     });
diff --git a/showcase/tests/integration/components/hds/stepper/task-indicator-test.js b/showcase/tests/integration/components/hds/stepper/task-indicator-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/stepper/task-indicator-test.js
rename to showcase/tests/integration/components/hds/stepper/task-indicator-test.gjs
index b0e64180abd..76472a4cd2d 100644
--- a/showcase/tests/integration/components/hds/stepper/task-indicator-test.js
+++ b/showcase/tests/integration/components/hds/stepper/task-indicator-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Indicator from "@hashicorp/design-system-components/components/hds/stepper/task/indicator";
 
 module(
   'Integration | Component | hds/stepper/indicator/task',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Task::Indicator id="test-stepper-indicator-task" @status="incomplete" />`,
+        <template><Indicator id="test-stepper-indicator-task" @status="incomplete" /></template>,
       );
       assert
         .dom('#test-stepper-indicator-task')
@@ -26,7 +26,7 @@ module(
 
     test('it should render the non-interactive variant by default', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Task::Indicator id="test-stepper-indicator-task" @status="incomplete" />`,
+        <template><Indicator id="test-stepper-indicator-task" @status="incomplete" /></template>,
       );
       assert
         .dom('#test-stepper-indicator-task')
@@ -35,7 +35,7 @@ module(
 
     test('it should render the interactive variant if passed the isInteractive property', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Task::Indicator id="test-stepper-indicator-task" @status="incomplete" @isInteractive={{true}} />`,
+        <template><Indicator id="test-stepper-indicator-task" @status="incomplete" @isInteractive={{true}} /></template>,
       );
       assert
         .dom('#test-stepper-indicator-task')
@@ -48,7 +48,7 @@ module(
 
     test('it should render the correct task status if the @status="incomplete" prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Task::Indicator id="test-stepper-indicator-task" @status="incomplete" />`,
+        <template><Indicator id="test-stepper-indicator-task" @status="incomplete" /></template>,
       );
       assert
         .dom('#test-stepper-indicator-task')
@@ -59,7 +59,7 @@ module(
 
     test('it should render the correct status if the @status="incomplete" prop is declared', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Task::Indicator id="test-stepper-indicator-task" @status="incomplete" @isInteractive={{true}} />`,
+        <template><Indicator id="test-stepper-indicator-task" @status="incomplete" @isInteractive={{true}} /></template>,
       );
       assert
         .dom('#test-stepper-indicator-task')
@@ -71,7 +71,7 @@ module(
 
     test('it should render a flight icon for any of the variants', async function (assert) {
       await render(
-        hbs`<Hds::Stepper::Task::Indicator id="test-stepper-indicator-task" @status="processing" />`,
+        <template><Indicator id="test-stepper-indicator-task" @status="processing" /></template>,
       );
       assert.dom('.hds-icon-loading').exists();
     });
diff --git a/showcase/tests/integration/components/hds/table/td-test.js b/showcase/tests/integration/components/hds/table/td-test.gjs
similarity index 71%
rename from showcase/tests/integration/components/hds/table/td-test.js
rename to showcase/tests/integration/components/hds/table/td-test.gjs
index d90754dc370..c747a71a2ba 100644
--- a/showcase/tests/integration/components/hds/table/td-test.js
+++ b/showcase/tests/integration/components/hds/table/td-test.gjs
@@ -6,23 +6,23 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Td from "@hashicorp/design-system-components/components/hds/table/td";
 
 module('Integration | Component | hds/table/td', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Table::Td id="data-test-table-td"/>`);
+    await render(<template><Td id="data-test-table-td" /></template>);
     assert.dom('#data-test-table-td').hasClass('hds-table__td');
   });
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
-    await render(hbs`<Hds::Table::Td id="data-test-table-td" @align="right"/>`);
+    await render(<template><Td id="data-test-table-td" @align="right" /></template>);
     assert.dom('#data-test-table-td').hasClass('hds-table__td--align-right');
   });
 
   test('it should support splattributes', async function (assert) {
-    await render(hbs`<Hds::Table::Td id="data-test-table-td" lang="es" />`);
+    await render(<template><Td id="data-test-table-td" lang="es" /></template>);
     assert.dom('#data-test-table-td').hasAttribute('lang', 'es');
   });
 });
diff --git a/showcase/tests/integration/components/hds/table/th-sort-test.js b/showcase/tests/integration/components/hds/table/th-sort-test.gjs
similarity index 76%
rename from showcase/tests/integration/components/hds/table/th-sort-test.js
rename to showcase/tests/integration/components/hds/table/th-sort-test.gjs
index 88d77a6307d..cd48182a0d9 100644
--- a/showcase/tests/integration/components/hds/table/th-sort-test.js
+++ b/showcase/tests/integration/components/hds/table/th-sort-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, focus } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import ThSort from "@hashicorp/design-system-components/components/hds/table/th-sort";
 
 module('Integration | Component | hds/table/th-sort', function (hooks) {
   setupRenderingTest(hooks);
   test('it renders with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort">Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort">Artist</ThSort></template>,
     );
 
     assert.dom('#data-test-table-th-sort').hasClass('hds-table__th--sort');
@@ -23,7 +23,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it renders text content yielded within the cell', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort">Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort">Artist</ThSort></template>,
     );
     assert
       .dom('#data-test-table-th-sort .hds-table__th-content > span')
@@ -34,7 +34,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort" @align="right">Year</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort" @align="right">Year</ThSort></template>,
     );
     assert
       .dom('#data-test-table-th-sort')
@@ -45,7 +45,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it should add inline styles if `@width` is declared', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort" @width="10%" />`,
+      <template><ThSort id="data-test-table-th-sort" @width="10%" /></template>,
     );
     assert
       .dom('#data-test-table-th-sort')
@@ -56,7 +56,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if @sortOrder is not defined, the swap-vertical icon should be displayed', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort @sortBy='artist'>Artist</Hds::Table::ThSort>`,
+      <template><ThSort @sortBy="artist">Artist</ThSort></template>,
     );
 
     assert.dom('[data-test-icon="swap-vertical"]').exists();
@@ -64,13 +64,13 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if sorted, and `@sortOrder` is set, the correct icon should be displayed', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort @sortOrder='asc'>Artist</Hds::Table::ThSort>`,
+      <template><ThSort @sortOrder="asc">Artist</ThSort></template>,
     );
 
     assert.dom('[data-test-icon="arrow-up"]').exists();
 
     await render(
-      hbs`<Hds::Table::ThSort @sortOrder='desc'>Artist</Hds::Table::ThSort>`,
+      <template><ThSort @sortOrder="desc">Artist</ThSort></template>,
     );
 
     assert.dom('[data-test-icon="arrow-down"]').exists();
@@ -80,19 +80,19 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th" lang="es">Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th" lang="es">Artist</ThSort></template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('lang', 'es');
   });
 
   test('it has the `scope` attribute, and it is set to column by default', async function (assert) {
-    await render(hbs`<Hds::Table::ThSort>Artist</Hds::Table::ThSort>`);
+    await render(<template><ThSort>Artist</ThSort></template>);
 
     assert.dom('.hds-table__th--sort').hasAttribute('scope', 'col');
   });
   test('the default `scope` attribute can not be overwritten', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort scope="row">Artist</Hds::Table::ThSort>`,
+      <template><ThSort scope="row">Artist</ThSort></template>,
     );
 
     assert.dom('.hds-table__th--sort').hasAttribute('scope', 'col');
@@ -100,14 +100,14 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if unsorted, the aria-sort attribute value should be set to none', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort @sortBy='artist' id="data-test-table-th-sort">Artist</Hds::Table::ThSort>`,
+      <template><ThSort @sortBy="artist" id="data-test-table-th-sort">Artist</ThSort></template>,
     );
 
     assert.dom('#data-test-table-th-sort').hasAttribute('aria-sort', 'none');
   });
   test('if sorted, the aria-sort attribute value should reflect the direction', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort @sortBy='artist' @sortOrder="desc" id="data-test-table-th-sort">Artist</Hds::Table::ThSort>`,
+      <template><ThSort @sortBy="artist" @sortOrder="desc" id="data-test-table-th-sort">Artist</ThSort></template>,
     );
 
     assert
@@ -116,7 +116,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the sort button with the correct IDs', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort" @sortBy='artist' @sortOrder="desc">Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort" @sortBy="artist" @sortOrder="desc">Artist</ThSort></template>,
     );
     const prefixLabel = this.element.querySelector(
       '#data-test-table-th-sort .hds-table__th-button-aria-label-hidden-segment:nth-of-type(1)',
@@ -142,7 +142,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
     let isClicked = false;
     this.set('onClickSort', () => (isClicked = true));
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort" @onClickSort={{this.onClickSort}}>Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort" @onClickSort={{this.onClickSort}}>Artist</ThSort></template>,
     );
     await click('#data-test-table-th-sort .hds-table__th-button--sort');
     assert.ok(isClicked);
@@ -152,7 +152,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort">Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort">Artist</ThSort></template>,
     );
 
     assert
@@ -161,7 +161,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
   });
   test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort @tooltip="More info." id="data-test-table-th-sort">Artist</Hds::Table::ThSort>`,
+      <template><ThSort @tooltip="More info." id="data-test-table-th-sort">Artist</ThSort></template>,
     );
 
     assert
@@ -174,7 +174,7 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
     await render(
-      hbs`<Hds::Table::ThSort id="data-test-table-th-sort" @tooltip="More info.">Artist</Hds::Table::ThSort>`,
+      <template><ThSort id="data-test-table-th-sort" @tooltip="More info.">Artist</ThSort></template>,
     );
     let prefixLabel = this.element.querySelector(
       '#data-test-table-th-sort .hds-table__th-button-aria-label-hidden-segment',
diff --git a/showcase/tests/integration/components/hds/table/th-test.js b/showcase/tests/integration/components/hds/table/th-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/table/th-test.js
rename to showcase/tests/integration/components/hds/table/th-test.gjs
index 492e7ed308d..b083fdc2d03 100644
--- a/showcase/tests/integration/components/hds/table/th-test.js
+++ b/showcase/tests/integration/components/hds/table/th-test.gjs
@@ -6,14 +6,15 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, focus } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Th from "@hashicorp/design-system-components/components/hds/table/th";
+import Table from "@hashicorp/design-system-components/components/hds/table/index";
 
 module('Integration | Component | hds/table/th', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th">Artist</Th></template>,
     );
     assert.dom('#data-test-table-th').hasClass('hds-table__th');
   });
@@ -22,13 +23,13 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it renders text content yielded within the cell (no tooltip)', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th">Artist</Th></template>,
     );
     assert.dom('#data-test-table-th > span').hasText('Artist');
   });
   test('it renders text content yielded within the cell (with tooltip)', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th" @tooltip="More info.">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th" @tooltip="More info.">Artist</Th></template>,
     );
     assert
       .dom('#data-test-table-th .hds-table__th-content > span')
@@ -39,7 +40,7 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th" @align="right">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th" @align="right">Artist</Th></template>,
     );
     assert.dom('#data-test-table-th').hasClass('hds-table__th--align-right');
   });
@@ -48,7 +49,7 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it should add inline styles if `@width` is declared', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th" @width="10%">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th" @width="10%">Artist</Th></template>,
     );
     assert
       .dom('#data-test-table-th')
@@ -59,20 +60,20 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th" lang="es">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th" lang="es">Artist</Th></template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('lang', 'es');
   });
 
   test('it has the scope attribute set to column by default', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th">Artist</Th></template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('scope', 'col');
   });
   test('it has the scope attribute set to row if inside a tbody', async function (assert) {
     await render(
-      hbs`<Hds::Table><:body as |B|><B.Tr><B.Th id="data-test-table-th">Artist</B.Th></B.Tr></:body></Hds::Table>`,
+      <template><Table><:body as |B|><B.Tr><B.Th id="data-test-table-th">Artist</B.Th></B.Tr></:body></Table></template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('scope', 'row');
   });
@@ -81,7 +82,7 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th">Artist</Th></template>,
     );
 
     assert
@@ -90,7 +91,7 @@ module('Integration | Component | hds/table/th', function (hooks) {
   });
   test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th @tooltip="More info." id="data-test-table-th">Artist</Hds::Table::Th>`,
+      <template><Th @tooltip="More info." id="data-test-table-th">Artist</Th></template>,
     );
 
     assert.dom('#data-test-table-th .hds-table__th-button--tooltip').exists();
@@ -101,7 +102,7 @@ module('Integration | Component | hds/table/th', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
     await render(
-      hbs`<Hds::Table::Th id="data-test-table-th" @tooltip="More info.">Artist</Hds::Table::Th>`,
+      <template><Th id="data-test-table-th" @tooltip="More info.">Artist</Th></template>,
     );
     let prefixLabel = this.element.querySelector(
       '#data-test-table-th .hds-table__th-button-aria-label-hidden-segment',
diff --git a/showcase/tests/integration/components/hds/table/tr-test.js b/showcase/tests/integration/components/hds/table/tr-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/table/tr-test.js
rename to showcase/tests/integration/components/hds/table/tr-test.gjs
index 5d3ada9cb92..2b0408c3650 100644
--- a/showcase/tests/integration/components/hds/table/tr-test.js
+++ b/showcase/tests/integration/components/hds/table/tr-test.gjs
@@ -6,13 +6,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Tr from "@hashicorp/design-system-components/components/hds/table/tr";
 
 module('Integration | Component | hds/table/tr', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Table::Tr id="data-test-table-tr"/>`);
+    await render(<template><Tr id="data-test-table-tr" /></template>);
     assert.dom('#data-test-table-tr').hasClass('hds-table__tr');
   });
 
@@ -20,7 +20,7 @@ module('Integration | Component | hds/table/tr', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr"><td></td></Hds::Table::Tr>`,
+      <template><Tr id="data-test-table-tr"><td></td></Tr></template>,
     );
     assert.dom('#data-test-table-tr > td').exists();
   });
@@ -31,34 +31,34 @@ module('Integration | Component | hds/table/tr', function (hooks) {
     '#data-test-table-tr > .hds-table__th--is-selectable input.hds-table__checkbox';
 
   test('it should not render a checkbox if `@isSelectable` is not set', async function (assert) {
-    await render(hbs`<Hds::Table::Tr id="data-test-table-tr" />`);
+    await render(<template><Tr id="data-test-table-tr" /></template>);
     assert.dom(checkboxSelector).doesNotExist();
   });
 
   test('it should render a checkbox if `@isSelectable` is `true`', async function (assert) {
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} /></template>,
     );
     assert.dom(checkboxSelector).exists();
   });
 
   test('the checkbox should be checked if `@isSelected` is `true`', async function (assert) {
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @isSelected={{true}} />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @isSelected={{true}} /></template>,
     );
     assert.dom(checkboxSelector).isChecked();
   });
 
   test('the checkbox contains the `@selectionAriaLabelSuffix` suffix', async function (assert) {
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @selectionAriaLabelSuffix="row 123" />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @selectionAriaLabelSuffix="row 123" /></template>,
     );
     assert.dom(checkboxSelector).hasAria('label', 'Select row 123');
   });
 
   test('the `th` element has the correct `scope` attribute value provided via `@selectionScope`', async function (assert) {
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @selectionScope="test-selectionscope" />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @selectionScope="test-selectionscope" /></template>,
     );
     assert
       .dom('#data-test-table-tr > .hds-table__th--is-selectable')
@@ -72,7 +72,7 @@ module('Integration | Component | hds/table/tr', function (hooks) {
       (_checkbox, selectionKey) => (key = selectionKey),
     );
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @selectionScope="row" @selectionKey="row123" @onSelectionChange={{this.onSelectionChange}} />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @selectionScope="row" @selectionKey="row123" @onSelectionChange={{this.onSelectionChange}} /></template>,
     );
     await click(checkboxSelector);
     assert.strictEqual(key, 'row123');
@@ -82,7 +82,7 @@ module('Integration | Component | hds/table/tr', function (hooks) {
     this.set('noop', () => {});
 
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} @onClickSortBySelected={{this.noop}} />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @onClickSortBySelected={{this.noop}} /></template>,
     );
 
     assert.dom(checkboxSelector + ' ~ .hds-table__th-button--sort').exists();
@@ -90,7 +90,7 @@ module('Integration | Component | hds/table/tr', function (hooks) {
 
   test('it should not render a sort button in the checkbox cell if `@isSelectable` is `true`, and `@onClickSortBySelected` is undefined', async function (assert) {
     await render(
-      hbs`<Hds::Table::Tr id="data-test-table-tr" @isSelectable={{true}} />`,
+      <template><Tr id="data-test-table-tr" @isSelectable={{true}} /></template>,
     );
 
     assert
@@ -101,7 +101,7 @@ module('Integration | Component | hds/table/tr', function (hooks) {
   // ATTRIBUTES
 
   test('it should support splattributes', async function (assert) {
-    await render(hbs`<Hds::Table::Tr id="data-test-table-tr" lang="es" />`);
+    await render(<template><Tr id="data-test-table-tr" lang="es" /></template>);
     assert.dom('#data-test-table-tr').hasAttribute('lang', 'es');
   });
 
@@ -115,7 +115,7 @@ module('Integration | Component | hds/table/tr', function (hooks) {
       assert.strictEqual(error.message, errorMessage);
     });
     await render(
-      hbs`<Hds::Table::Tr @isSelectable={{true}} @selectionScope="row" />`,
+      <template><Tr @isSelectable={{true}} @selectionScope="row" /></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/tabs/index-test.js b/showcase/tests/integration/components/hds/tabs/index-test.gjs
similarity index 94%
rename from showcase/tests/integration/components/hds/tabs/index-test.js
rename to showcase/tests/integration/components/hds/tabs/index-test.gjs
index 2ef69247230..c96e433dadb 100644
--- a/showcase/tests/integration/components/hds/tabs/index-test.js
+++ b/showcase/tests/integration/components/hds/tabs/index-test.gjs
@@ -3,25 +3,14 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import {
-  module,
-  test,
-  skip,
-  // only
+import { module, test, skip
+// only
 } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  click,
-  focus,
-  find,
-  // pauseTest,
-  render,
-  resetOnerror,
-  setupOnerror,
-  settled,
-  triggerKeyEvent,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { click, focus, find,
+// pauseTest,
+render, resetOnerror, setupOnerror, settled, triggerKeyEvent } from '@ember/test-helpers';
+import Tabs from "@hashicorp/design-system-components/components/hds/tabs/index";
 
 function assertCssVarsCloseTo(assert, string, values) {
   // we need to use this regex because the widths of the tabs in local env and in CI are different (browser rendering)
@@ -85,14 +74,14 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
       this.selectedTabIndex = args.selectedTabIndex ?? undefined;
       this.size = args.size ?? undefined;
       this.onClickTab = args.onClickTab ?? undefined;
-      return await render(hbs`
-        <Hds::Tabs id="test-tabs" @size={{this.size}} @selectedTabIndex={{this.selectedTabIndex}} @onClickTab={{this.onClickTab}} as |T|>
+      return await render(<template>
+        <Tabs id="test-tabs" @size={{this.size}} @selectedTabIndex={{this.selectedTabIndex}} @onClickTab={{this.onClickTab}} as |T|>
           <T.Tab data-test="tab-1" @isSelected={{this.isSelectedTab1}} @icon={{this.iconTab1}} @count={{this.countTab1}}>One</T.Tab>
           <T.Tab data-test="tab-2" @isSelected={{this.isSelectedTab2}}>Two</T.Tab>
           <T.Panel data-test="panel-1">Content 1</T.Panel>
           <T.Panel data-test="panel-2">Content 2</T.Panel>
-        </Hds::Tabs>
-      `);
+        </Tabs>
+      </template>);
     });
   });
 
@@ -350,15 +339,15 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`
-      <Hds::Tabs as |T|>
+    await render(<template>
+      <Tabs as |T|>
         <T.Tab>One</T.Tab>
         <T.Tab>Two</T.Tab>
         <T.Panel>Content 1</T.Panel>
         <T.Panel>Content 2</T.Panel>
         <T.Panel>Content 3</T.Panel>
-      </Hds::Tabs>
-    `);
+      </Tabs>
+    </template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -373,14 +362,14 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     // await this.createTabs({ isSelectedTab1: true, isSelectedTab2: true });
-    await render(hbs`
-      <Hds::Tabs as |T|>
+    await render(<template>
+      <Tabs as |T|>
         <T.Tab @isSelected={{true}} @id="ONE">One</T.Tab>
         <T.Tab @isSelected={{true}} @id="TWO">Two</T.Tab>
         <T.Panel data-test="panel-1">Content 1</T.Panel>
         <T.Panel data-test="panel-2">Content 2</T.Panel>
-      </Hds::Tabs>
-    `);
+      </Tabs>
+    </template>);
     // await pauseTest();
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -418,14 +407,14 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
 
   test('tab indicator should respond to content size changes', async function (assert) {
     this.set('count', 5);
-    await render(hbs`
-      <Hds::Tabs id="test-tabs" as |T|>
+    await render(<template>
+      <Tabs id="test-tabs" as |T|>
         <T.Tab data-test="tab-1" @count="{{this.count}}">One</T.Tab>
         <T.Tab data-test="tab-2">Two</T.Tab>
         <T.Panel data-test="panel-1">Content 1</T.Panel>
         <T.Panel data-test="panel-2">Content 2</T.Panel>
-      </Hds::Tabs>
-    `);
+      </Tabs>
+    </template>);
     let tablistStyle = find('.hds-tabs__tablist').style;
     assertCssVarsCloseTo(assert, tablistStyle['cssText'], [0, 81]); // --indicator-left-pos: 0px; --indicator-width: 81px;
     this.set('count', 12345);
@@ -471,28 +460,28 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
   // NESTED TABS
 
   test('it should have the correct selection of tabs (via @isSelected) and correct indicator at different stages', async function (assert) {
-    await render(hbs`
-      <Hds::Tabs id="test-tabs" as |T|>
+    await render(<template>
+      <Tabs id="test-tabs" as |T|>
         <T.Tab data-test="tab-1">One</T.Tab>
         <T.Tab data-test="tab-2" @isSelected={{true}}>Two</T.Tab>
         <T.Panel data-test="panel-1">
-          <Hds::Tabs id="test-tabs-sub1" as |T|>
+          <Tabs id="test-tabs-sub1" as |T|>
             <T.Tab data-test="tab-1__subtab-1">Tab One / Subtab One</T.Tab>
             <T.Tab data-test="tab-1__subtab-2">Tab One / Subtab Two</T.Tab>
             <T.Panel data-test="tab-1__panel-1">Tab One / Subcontent 1</T.Panel>
             <T.Panel data-test="tab-1__panel-2">Tab One / SubContent 2</T.Panel>
-          </Hds::Tabs>
+          </Tabs>
         </T.Panel>
         <T.Panel data-test="panel-2">
-          <Hds::Tabs id="test-tabs-sub2" as |T|>
+          <Tabs id="test-tabs-sub2" as |T|>
             <T.Tab data-test="tab-2__subtab-1">Tab Two / Subtab One</T.Tab>
             <T.Tab data-test="tab-2__subtab-2" @isSelected={{true}}>Tab Two / Subtab Two</T.Tab>
             <T.Panel data-test="tab-2__panel-1">Tab Two / Subcontent 1</T.Panel>
             <T.Panel data-test="tab-2__panel-2">Tab Two / SubContent 2</T.Panel>
-          </Hds::Tabs>
+          </Tabs>
         </T.Panel>
-      </Hds::Tabs>
-    `);
+      </Tabs>
+    </template>);
 
     // tab 2 is selected (via @isSelected)
     assert.dom('[data-test="tab-2"]').hasClass('hds-tabs__tab--is-selected');
@@ -530,28 +519,28 @@ module('Integration | Component | hds/tabs/index', function (hooks) {
   });
 
   test('it should have the correct selection of tabs (via @selectedTabIndex) and correct indicator at different stages', async function (assert) {
-    await render(hbs`
-      <Hds::Tabs id="test-tabs" @selectedTabIndex={{1}} as |T|>
+    await render(<template>
+      <Tabs id="test-tabs" @selectedTabIndex={{1}} as |T|>
         <T.Tab data-test="tab-1">One</T.Tab>
         <T.Tab data-test="tab-2">Two</T.Tab>
         <T.Panel data-test="panel-1">
-          <Hds::Tabs id="test-tabs-sub1" as |T|>
+          <Tabs id="test-tabs-sub1" as |T|>
             <T.Tab data-test="tab-1__subtab-1">Tab One / Subtab One</T.Tab>
             <T.Tab data-test="tab-1__subtab-2">Tab One / Subtab Two</T.Tab>
             <T.Panel data-test="tab-1__panel-1">Tab One / Subcontent 1</T.Panel>
             <T.Panel data-test="tab-1__panel-2">Tab One / SubContent 2</T.Panel>
-          </Hds::Tabs>
+          </Tabs>
         </T.Panel>
         <T.Panel data-test="panel-2">
-          <Hds::Tabs id="test-tabs-sub2" @selectedTabIndex={{1}} as |T|>
+          <Tabs id="test-tabs-sub2" @selectedTabIndex={{1}} as |T|>
             <T.Tab data-test="tab-2__subtab-1">Tab Two / Subtab One</T.Tab>
             <T.Tab data-test="tab-2__subtab-2">Tab Two / Subtab Two</T.Tab>
             <T.Panel data-test="tab-2__panel-1">Tab Two / Subcontent 1</T.Panel>
             <T.Panel data-test="tab-2__panel-2">Tab Two / SubContent 2</T.Panel>
-          </Hds::Tabs>
+          </Tabs>
         </T.Panel>
-      </Hds::Tabs>
-    `);
+      </Tabs>
+    </template>);
 
     // tab 2 is selected (via @isSelected)
     assert.dom('[data-test="tab-2"]').hasClass('hds-tabs__tab--is-selected');
diff --git a/showcase/tests/integration/components/hds/tag/index-test.js b/showcase/tests/integration/components/hds/tag/index-test.gjs
similarity index 74%
rename from showcase/tests/integration/components/hds/tag/index-test.js
rename to showcase/tests/integration/components/hds/tag/index-test.gjs
index f02d1bc5ad4..d21603ec7b4 100644
--- a/showcase/tests/integration/components/hds/tag/index-test.js
+++ b/showcase/tests/integration/components/hds/tag/index-test.gjs
@@ -5,13 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  render,
-  resetOnerror,
-  setupOnerror,
-  waitFor,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { render, resetOnerror, setupOnerror, waitFor } from '@ember/test-helpers';
+import Tag from "@hashicorp/design-system-components/components/hds/tag/index";
 
 module('Integration | Component | hds/tag/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -20,20 +15,20 @@ module('Integration | Component | hds/tag/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Tag @text="My tag" id="test-tag" />`);
+    await render(<template><Tag @text="My tag" id="test-tag" /></template>);
     assert.dom('#test-tag').hasClass('hds-tag');
   });
 
   // DISMISS
 
   test('it should not render the "dismiss" button by default', async function (assert) {
-    await render(hbs`<Hds::Tag @text="My tag" />`);
+    await render(<template><Tag @text="My tag" /></template>);
     assert.dom('button.hds-tag__dismiss').doesNotExist();
   });
 
   test('it should render the "dismiss" button if a callback function is passed to the @onDismiss argument', async function (assert) {
     this.set('NOOP', () => {});
-    await render(hbs`<Hds::Tag @text="My tag" @onDismiss={{this.NOOP}} />`);
+    await render(<template><Tag @text="My tag" @onDismiss={{this.NOOP}} /></template>);
     assert.dom('button.hds-tag__dismiss').exists();
     assert
       .dom('button.hds-tag__dismiss')
@@ -43,7 +38,7 @@ module('Integration | Component | hds/tag/index', function (hooks) {
   test('it should render a customized label for the dismiss button if custom @ariaLabel text is defined', async function (assert) {
     this.set('NOOP', () => {});
     await render(
-      hbs`<Hds::Tag @text="My tag" @onDismiss={{this.NOOP}} @ariaLabel="Please dismiss" />`,
+      <template><Tag @text="My tag" @onDismiss={{this.NOOP}} @ariaLabel="Please dismiss" /></template>,
     );
     assert.dom('button.hds-tag__dismiss').exists();
     assert
@@ -55,14 +50,14 @@ module('Integration | Component | hds/tag/index', function (hooks) {
 
   test('it should render the primary color as the default if no @color prop is declared when the text is a link', async function (assert) {
     await render(
-      hbs`<Hds::Tag @text="My text tag" @href="/" id="test-link-tag"/>`,
+      <template><Tag @text="My text tag" @href="/" id="test-link-tag" /></template>,
     );
     assert.dom('#test-link-tag').hasClass('hds-tag--color-primary');
   });
 
   test('it should render the correct CSS color class if the @color prop is declared when the text is a link', async function (assert) {
     await render(
-      hbs`<Hds::Tag @text="My text tag" @href="/" @color="secondary" id="test-link-tag"/>`,
+      <template><Tag @text="My text tag" @href="/" @color="secondary" id="test-link-tag" /></template>,
     );
     assert.dom('#test-link-tag').hasClass('hds-tag--color-secondary');
   });
@@ -74,7 +69,7 @@ module('Integration | Component | hds/tag/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Tag @text="My text tag" @href="/" @color="foo"/>`);
+    await render(<template><Tag @text="My text tag" @href="/" @color="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -87,7 +82,7 @@ module('Integration | Component | hds/tag/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Tag @text="My text tag" @color="foo"/>`);
+    await render(<template><Tag @text="My text tag" @color="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -96,18 +91,18 @@ module('Integration | Component | hds/tag/index', function (hooks) {
   // OVERFLOW
 
   test('it should not render a tooltip if the text does not overflow', async function (assert) {
-    await render(hbs`
-        <Hds::Tag @text="My text tag" id="test-tag"/>
-    `);
+    await render(<template>
+        <Tag @text="My text tag" id="test-tag" />
+    </template>);
     assert.dom('.hds-tooltip-button').doesNotExist();
   });
 
   test('it should render a tooltip if the text overflows', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <div style="width: 50px;">
-        <Hds::Tag @text="This is a very long text that should go on multiple lines" id="test-tag"/>
+        <Tag @text="This is a very long text that should go on multiple lines" id="test-tag" />
       </div>
-    `);
+    </template>);
     await waitFor('.hds-tooltip-button', { timeout: 1000 });
     assert.dom('.hds-tooltip-button').exists();
   });
diff --git a/showcase/tests/integration/components/hds/text/body-test.js b/showcase/tests/integration/components/hds/text/body-test.gjs
similarity index 84%
rename from showcase/tests/integration/components/hds/text/body-test.js
rename to showcase/tests/integration/components/hds/text/body-test.gjs
index 3bd8e525fb2..fa02344329b 100644
--- a/showcase/tests/integration/components/hds/text/body-test.js
+++ b/showcase/tests/integration/components/hds/text/body-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Body from "@hashicorp/design-system-components/components/hds/text/body";
 
 module('Integration | Component | hds/text/body', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,7 @@ module('Integration | Component | hds/text/body', function (hooks) {
   });
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Text::Body @size="200" @tag="p" id="test-text" />`);
+    await render(<template><Body @size="200" @tag="p" id="test-text" /></template>);
     assert.dom('#test-text').hasClass('hds-text');
     assert.dom('#test-text').hasClass('hds-typography-body-200');
   });
@@ -26,7 +26,7 @@ module('Integration | Component | hds/text/body', function (hooks) {
 
   test('it renders correctly the provided arguments', async function (assert) {
     await render(
-      hbs`<Hds::Text::Body @size="100" @tag="mark" @weight="semibold" @align="right" @color="success" id="test-text">This is the text</Hds::Text::Body>`,
+      <template><Body @size="100" @tag="mark" @weight="semibold" @align="right" @color="success" id="test-text">This is the text</Body></template>,
     );
     assert.dom('#test-text').hasText('This is the text');
     assert.dom('#test-text').hasClass('hds-typography-body-100');
@@ -45,7 +45,7 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Body @size="123" />`);
+    await render(<template><Body @size="123" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -57,7 +57,7 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Body @size="300" @weight="foo" />`);
+    await render(<template><Body @size="300" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -69,7 +69,7 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Body @size="200" @weight="foo" />`);
+    await render(<template><Body @size="200" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -81,7 +81,7 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Body @size="100" @weight="foo" />`);
+    await render(<template><Body @size="100" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/text/code-test.js b/showcase/tests/integration/components/hds/text/code-test.gjs
similarity index 84%
rename from showcase/tests/integration/components/hds/text/code-test.js
rename to showcase/tests/integration/components/hds/text/code-test.gjs
index cfd0c5f3bd3..63ec9d94bb0 100644
--- a/showcase/tests/integration/components/hds/text/code-test.js
+++ b/showcase/tests/integration/components/hds/text/code-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Code from "@hashicorp/design-system-components/components/hds/text/code";
 
 module('Integration | Component | hds/text/code', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/text/code', function (hooks) {
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Text::Code @size="200" @tag="pre" id="test-text" />`,
+      <template><Code @size="200" @tag="pre" id="test-text" /></template>,
     );
     assert.dom('#test-text').hasClass('hds-text');
     assert.dom('#test-text').hasClass('hds-typography-code-200');
@@ -28,7 +28,7 @@ module('Integration | Component | hds/text/code', function (hooks) {
 
   test('it renders correctly the provided arguments', async function (assert) {
     await render(
-      hbs`<Hds::Text::Code @size="100" @tag="code" @weight="regular" @align="right" @color="success" id="test-text">This is the text</Hds::Text::Code>`,
+      <template><Code @size="100" @tag="code" @weight="regular" @align="right" @color="success" id="test-text">This is the text</Code></template>,
     );
     assert.dom('#test-text').hasText('This is the text');
     assert.dom('#test-text').hasClass('hds-typography-code-100');
@@ -47,7 +47,7 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Code @size="123" />`);
+    await render(<template><Code @size="123" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -59,7 +59,7 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Code @size="300" @weight="foo" />`);
+    await render(<template><Code @size="300" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -71,7 +71,7 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Code @size="200" @weight="foo" />`);
+    await render(<template><Code @size="200" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -83,7 +83,7 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Code @size="100" @weight="foo" />`);
+    await render(<template><Code @size="100" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/text/display-test.js b/showcase/tests/integration/components/hds/text/display-test.gjs
similarity index 84%
rename from showcase/tests/integration/components/hds/text/display-test.js
rename to showcase/tests/integration/components/hds/text/display-test.gjs
index dd95fd5c25c..f4eea469b38 100644
--- a/showcase/tests/integration/components/hds/text/display-test.js
+++ b/showcase/tests/integration/components/hds/text/display-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Display from "@hashicorp/design-system-components/components/hds/text/display";
 
 module('Integration | Component | hds/text/display', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Text::Display @size="500" @tag="h1" id="test-text" />`,
+      <template><Display @size="500" @tag="h1" id="test-text" /></template>,
     );
     assert.dom('#test-text').hasClass('hds-text');
     assert.dom('#test-text').hasClass('hds-typography-display-500');
@@ -28,7 +28,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
 
   test('it renders correctly the provided arguments', async function (assert) {
     await render(
-      hbs`<Hds::Text::Display @size="400" @tag="h3" @weight="bold" @align="right" @color="success" id="test-text">This is the text</Hds::Text::Display>`,
+      <template><Display @size="400" @tag="h3" @weight="bold" @align="right" @color="success" id="test-text">This is the text</Display></template>,
     );
     assert.dom('#test-text').hasText('This is the text');
     assert.dom('#test-text').hasClass('hds-typography-display-400');
@@ -47,7 +47,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Display @size="123" />`);
+    await render(<template><Display @size="123" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -59,7 +59,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Display @size="500" @weight="foo" />`);
+    await render(<template><Display @size="500" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -71,7 +71,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Display @size="400" @weight="foo" />`);
+    await render(<template><Display @size="400" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -83,7 +83,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Display @size="300" @weight="foo" />`);
+    await render(<template><Display @size="300" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -95,7 +95,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Display @size="200" @weight="foo" />`);
+    await render(<template><Display @size="200" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -107,7 +107,7 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::Text::Display @size="100" @weight="foo" />`);
+    await render(<template><Display @size="100" @weight="foo" /></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/text/index-test.js b/showcase/tests/integration/components/hds/text/index-test.gjs
similarity index 69%
rename from showcase/tests/integration/components/hds/text/index-test.js
rename to showcase/tests/integration/components/hds/text/index-test.gjs
index 1578c047123..9bda3a9aefb 100644
--- a/showcase/tests/integration/components/hds/text/index-test.js
+++ b/showcase/tests/integration/components/hds/text/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Text from "@hashicorp/design-system-components/components/hds/text/index";
 
 module('Integration | Component | hds/text/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,7 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" id="test-text" />`,
+      <template><Text @group="body" @size="200" @tag="p" id="test-text" /></template>,
     );
     assert.dom('#test-text').hasClass('hds-text');
   });
@@ -26,7 +26,7 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it renders with the provided text', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').hasText('This is the text');
   });
@@ -35,7 +35,7 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text with the correct variant based on the @group/@size declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="display" @size="500" @tag="p" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="display" @size="500" @tag="p" id="test-text">This is the text</Text></template>,
     );
     // notice: we use CSS helper classes for the weight definitions
     assert.dom('#test-text').hasClass('hds-typography-display-500');
@@ -45,13 +45,13 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text with a "span" element if @tag is not declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').hasTagName('span');
   });
   test('it should render text with the correct @tag declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @tag="mark" @size="200" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @tag="mark" @size="200" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').hasTagName('mark');
   });
@@ -60,13 +60,13 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text without weight if no @weight is declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').doesNotHaveClass(/hds-text--weight-/);
   });
   test('it should render the correct CSS class if the @weight prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" @weight="semibold" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" @weight="semibold" id="test-text">This is the text</Text></template>,
     );
     // notice: we use CSS helper classes for the weight definitions
     assert.dom('#test-text').hasClass('hds-font-weight-semibold');
@@ -76,13 +76,13 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text without alignment if no @align is declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').doesNotHaveClass(/hds-text--align-/);
   });
   test('it should render the correct CSS class if the @align prop is declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" @align="right" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" @align="right" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').hasClass('hds-text--align-right');
   });
@@ -91,21 +91,21 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text without color if no @color is declared', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').doesNotHaveClass(/hds-text--color-/);
     assert.dom('#test-text').doesNotHaveAttribute('style');
   });
   test('it should render the correct CSS color class if the @color prop is declared using a pre-defined color', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" @color="highlight" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" @color="highlight" id="test-text">This is the text</Text></template>,
     );
     // notice: we use CSS helper classes for the color definitions
     assert.dom('#test-text').hasClass('hds-foreground-highlight');
   });
   test('it should render the correct style if the @color prop is declared as custom CSS property color', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" @color="var(--token-color-foreground-action)" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" @color="var(--token-color-foreground-action)" id="test-text">This is the text</Text></template>,
     );
     assert
       .dom('#test-text')
@@ -113,7 +113,7 @@ module('Integration | Component | hds/text/index', function (hooks) {
   });
   test('it should render the correct style if the @color prop is declared as custom HEX color', async function (assert) {
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" @color="#FF0000" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" @color="#FF0000" id="test-text">This is the text</Text></template>,
     );
     assert.dom('#test-text').hasAttribute('style', 'color: rgb(255, 0, 0);');
   });
@@ -128,7 +128,7 @@ module('Integration | Component | hds/text/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::Text @group="body" @size="200" @tag="p" @align="top" id="test-text">This is the text</Hds::Text>`,
+      <template><Text @group="body" @size="200" @tag="p" @align="top" id="test-text">This is the text</Text></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/time/index-test.js b/showcase/tests/integration/components/hds/time/index-test.gjs
similarity index 75%
rename from showcase/tests/integration/components/hds/time/index-test.js
rename to showcase/tests/integration/components/hds/time/index-test.gjs
index 47f4d4044ff..7b0a1b44239 100644
--- a/showcase/tests/integration/components/hds/time/index-test.js
+++ b/showcase/tests/integration/components/hds/time/index-test.gjs
@@ -6,13 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-import {
-  HdsDisplayKeyValues,
-  DEFAULT_DISPLAY_MAPPING,
-  MINUTE_IN_MS,
-  DAY_IN_MS,
-} from '@hashicorp/design-system-components/services/hds-time';
+import { HdsDisplayKeyValues, DEFAULT_DISPLAY_MAPPING, MINUTE_IN_MS, DAY_IN_MS } from '@hashicorp/design-system-components/services/hds-time';
+import Time from "@hashicorp/design-system-components/components/hds/time/index";
 
 module('Integration | Component | hds/time/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -27,9 +22,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:48" id="test-time" />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:48" id="test-time" />
+    </template>);
     assert.dom('#test-time').hasClass('hds-time');
   });
 
@@ -38,32 +33,32 @@ module('Integration | Component | hds/time/index', function (hooks) {
   // OPTION: hasTooltip
 
   test('it should render the component with a tooltip by default', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:48" />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:48" />
+    </template>);
     assert.dom('.hds-tooltip-button').exists();
   });
 
   test('it should render the component without a tooltip', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:48" @hasTooltip={{false}} />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:48" @hasTooltip={{false}} />
+    </template>);
     assert.dom('.hds-tooltip-button').doesNotExist();
   });
 
   // OPTION: isOpen (tooltip)
 
   test('it should render the component with the tooltip closed by default', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:48" />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:48" />
+    </template>);
     assert.dom('.tippy-box').doesNotExist();
   });
 
   test('it should render the component with the tooltip open', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:48" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:48" @isOpen={{true}} />
+    </template>);
     assert.dom('.tippy-box').exists();
   });
 
@@ -74,9 +69,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
   // default using Date object
   test('it should render the correct string in the default format when passing a Date object', async function (assert) {
     this.set('defaultDate', new Date('05 September 2018 14:07:32'));
-    await render(hbs`
-      <Hds::Time @date={{this.defaultDate}} @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date={{this.defaultDate}} @isOpen={{true}} />
+    </template>);
     let options = DEFAULT_DISPLAY_MAPPING[HdsDisplayKeyValues.FriendlyLocal];
     let expectedDateString = new Date(this.defaultDate).toLocaleString(
       navigator.language,
@@ -89,9 +84,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
 
   // default using ISO date string
   test('it should render the correct string in the default format when passing an ISO date string', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:07:32" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:07:32" @isOpen={{true}} />
+    </template>);
     let options = DEFAULT_DISPLAY_MAPPING[HdsDisplayKeyValues.FriendlyLocal];
     let expectedDateString = new Date(
       '05 September 2018 14:07:32',
@@ -108,9 +103,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
   // friendly local using Date object
   test('it should render the correct string in friendly local format when passing a Date object', async function (assert) {
     this.set('friendlyLocalDate', new Date('05 September 2018 14:07:32'));
-    await render(hbs`
-      <Hds::Time @date={{this.friendlyLocalDate}} @display="friendly-local" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date={{this.friendlyLocalDate}} @display="friendly-local" @isOpen={{true}} />
+    </template>);
     let options = DEFAULT_DISPLAY_MAPPING[HdsDisplayKeyValues.FriendlyLocal];
     let expectedDateString = new Date(this.friendlyLocalDate).toLocaleString(
       navigator.language,
@@ -123,9 +118,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
 
   // friendly local using ISO date string
   test('it should render the correct string in friendly local format when passing an ISO date string', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:07:32" @display="friendly-local" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:07:32" @display="friendly-local" @isOpen={{true}} />
+    </template>);
     let options = DEFAULT_DISPLAY_MAPPING[HdsDisplayKeyValues.FriendlyLocal];
     let expectedDateString = new Date(
       '05 September 2018 14:07:32',
@@ -141,9 +136,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
   test('it should render the correct string in friendly only format when passing a Date object', async function (assert) {
     this.set('friendlyOnlyDate', new Date('05 September 2018 14:07:32'));
 
-    await render(hbs`
-      <Hds::Time @date={{this.friendlyOnlyDate}} @display="friendly-only" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date={{this.friendlyOnlyDate}} @display="friendly-only" @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText('Sep 5, 2018');
     // test tooltip content
     assert.dom('.tippy-content').hasText(this.friendlyOnlyDate.toISOString());
@@ -151,9 +146,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
 
   // friendly only using ISO date string
   test('it should render the correct string in friendly only format when passing an ISO date string', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:07:32" @display="friendly-only" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:07:32" @display="friendly-only" @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText('Sep 5, 2018');
     // test tooltip content
     assert
@@ -167,9 +162,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
   test('it should render the correct string in UTC format when passing a Date object', async function (assert) {
     this.set('utcDate', new Date('05 September 2018 14:07:32'));
 
-    await render(hbs`
-      <Hds::Time @date={{this.utcDate}} @display="utc" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date={{this.utcDate}} @display="utc" @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText(this.utcDate.toISOString());
     // test tooltip content
     assert.dom('.tippy-content').hasText(this.utcDate.toISOString());
@@ -177,9 +172,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
 
   // UTC using ISO date string
   test('it should render the correct string in UTC format when passing an ISO date string', async function (assert) {
-    await render(hbs`
-      <Hds::Time @date="05 September 2018 14:07:32" @display="utc" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @date="05 September 2018 14:07:32" @display="utc" @isOpen={{true}} />
+    </template>);
     let date = new Date('05 September 2018 14:07:32');
     assert.dom('.hds-time').hasText(date.toISOString());
     // test tooltip content
@@ -197,27 +192,27 @@ module('Integration | Component | hds/time/index', function (hooks) {
       new Date(service.now + MINUTE_IN_MS * (5 + 1)),
     );
 
-    await render(hbs`
-      <Hds::Time @date={{this.fiveMinutesFromNow}} @display="relative" />
-    `);
+    await render(<template>
+      <Time @date={{this.fiveMinutesFromNow}} @display="relative" />
+    </template>);
     assert.dom('.hds-time').hasText('in 5 minutes');
   });
 
   test('it should render the correct string for a date that is two days from now', async function (assert) {
     this.set('twoDaysFromNow', new Date(service.now + DAY_IN_MS * (2 + 1)));
 
-    await render(hbs`
-      <Hds::Time @date={{this.twoDaysFromNow}} @display="relative" />
-    `);
+    await render(<template>
+      <Time @date={{this.twoDaysFromNow}} @display="relative" />
+    </template>);
     assert.dom('.hds-time').hasText('in 2 days');
   });
 
   test('it should render the correct string for a date that is one week from now', async function (assert) {
     this.set('oneWeekFromNow', new Date(service.now + DAY_IN_MS * (7 + 1)));
 
-    await render(hbs`
-      <Hds::Time @date={{this.oneWeekFromNow}} @display="relative" />
-    `);
+    await render(<template>
+      <Time @date={{this.oneWeekFromNow}} @display="relative" />
+    </template>);
     assert.dom('.hds-time').hasText('in 7 days');
   });
 
@@ -226,27 +221,27 @@ module('Integration | Component | hds/time/index', function (hooks) {
   test('it should render the correct string for a date that is five minutes ago', async function (assert) {
     this.set('fiveMinutesAgo', new Date(service.now - MINUTE_IN_MS * 5));
 
-    await render(hbs`
-      <Hds::Time @date={{this.fiveMinutesAgo}} @display="relative" />
-    `);
+    await render(<template>
+      <Time @date={{this.fiveMinutesAgo}} @display="relative" />
+    </template>);
     assert.dom('.hds-time').hasText('5 minutes ago');
   });
 
   test('it should render the correct string for a date that is two days ago', async function (assert) {
     this.set('twoDaysAgo', new Date(service.now - DAY_IN_MS * 2));
 
-    await render(hbs`
-      <Hds::Time @date={{this.twoDaysAgo}} @display="relative" />
-    `);
+    await render(<template>
+      <Time @date={{this.twoDaysAgo}} @display="relative" />
+    </template>);
     assert.dom('.hds-time').hasText('2 days ago');
   });
 
   test('it should render the correct string for a date that is one week ago', async function (assert) {
     this.set('oneWeekAgo', new Date(service.now - DAY_IN_MS * 7));
 
-    await render(hbs`
-      <Hds::Time @date={{this.oneWeekAgo}} @display="relative" />
-    `);
+    await render(<template>
+      <Time @date={{this.oneWeekAgo}} @display="relative" />
+    </template>);
     assert.dom('.hds-time').hasText('7 days ago');
   });
 
@@ -259,9 +254,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
     this.set('startDate', new Date('20 September 2024 14:07:32'));
     this.set('endDate', new Date('25 September 2024 02:07:32'));
 
-    await render(hbs`
-      <Hds::Time @startDate={{this.startDate}} @endDate={{this.endDate}} @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @startDate={{this.startDate}} @endDate={{this.endDate}} @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText('Sep 20 – Sep 25, 2024');
     // test tooltip content
     let expectedTooltipContent = `${this.startDate.toISOString()}–${this.endDate.toISOString()}`;
@@ -270,9 +265,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
 
   // same year using ISO date strings
   test('it should render the correct string for a date range with the same year using ISO date strings', async function (assert) {
-    await render(hbs`
-      <Hds::Time @startDate="20 September 2024 14:07:32" @endDate="25 September 2024 02:07:32" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @startDate="20 September 2024 14:07:32" @endDate="25 September 2024 02:07:32" @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText('Sep 20 – Sep 25, 2024');
     // test tooltip content
     let startDate = new Date('20 September 2024 14:07:32');
@@ -288,9 +283,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
     this.set('startDate', new Date('8 November 2024 14:07:32'));
     this.set('endDate', new Date('20 January 2025 02:07:32'));
 
-    await render(hbs`
-      <Hds::Time @startDate={{this.startDate}} @endDate={{this.endDate}} @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @startDate={{this.startDate}} @endDate={{this.endDate}} @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText('Nov 8, 2024 – Jan 20, 2025');
     // test tooltip content
     let expectedTooltipContent = `${this.startDate.toISOString()}–${this.endDate.toISOString()}`;
@@ -299,9 +294,9 @@ module('Integration | Component | hds/time/index', function (hooks) {
 
   // different years using ISO date strings
   test('it should render the correct string for a date range with different years using ISO date strings', async function (assert) {
-    await render(hbs`
-      <Hds::Time @startDate="8 November 2024 14:07:32" @endDate="20 January 2025 02:07:32" @isOpen={{true}} />
-    `);
+    await render(<template>
+      <Time @startDate="8 November 2024 14:07:32" @endDate="20 January 2025 02:07:32" @isOpen={{true}} />
+    </template>);
     assert.dom('.hds-time').hasText('Nov 8, 2024 – Jan 20, 2025');
     // test tooltip content
     let startDate = new Date('8 November 2024 14:07:32');
diff --git a/showcase/tests/integration/components/hds/toast/index-test.js b/showcase/tests/integration/components/hds/toast/index-test.gjs
similarity index 79%
rename from showcase/tests/integration/components/hds/toast/index-test.js
rename to showcase/tests/integration/components/hds/toast/index-test.gjs
index 84472ecdb3d..e668334ac9f 100644
--- a/showcase/tests/integration/components/hds/toast/index-test.js
+++ b/showcase/tests/integration/components/hds/toast/index-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import Toast from "@hashicorp/design-system-components/components/hds/toast/index";
 
 module('Integration | Component | hds/toast/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -14,12 +14,12 @@ module('Integration | Component | hds/toast/index', function (hooks) {
   // notice: "toast" is a wrapper around the "hds::alert" so we test only very specific things
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(hbs`<Hds::Toast id="test-toast" />`);
+    await render(<template><Toast id="test-toast" /></template>);
     assert.dom('#test-toast').hasClass('hds-toast');
   });
 
   test('it should render the component with "role"="alert" and aria-live="polite" by default', async function (assert) {
-    await render(hbs`<Hds::Toast id="test-toast" />`);
+    await render(<template><Toast id="test-toast" /></template>);
     assert.dom('#test-toast').hasAttribute('role', 'alert');
     assert.dom('#test-toast').hasAttribute('aria-live', 'polite');
   });
diff --git a/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.js b/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gjs
similarity index 73%
rename from showcase/tests/integration/components/hds/tooltip/tooltip-button-test.js
rename to showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gjs
index b5ebffd6fd2..19c77f86a7a 100644
--- a/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.js
+++ b/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gjs
@@ -5,22 +5,17 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  focus,
-  render,
-  triggerKeyEvent,
-  setupOnerror,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
+import { focus, render, triggerKeyEvent, setupOnerror } from '@ember/test-helpers';
 import { wait } from 'showcase/tests/helpers';
+import TooltipButton from "@hashicorp/design-system-components/components/hds/tooltip-button/index";
+import { hash } from "@ember/helper";
 
 module('Integration | Component | hds/tooltip/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="More info." id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
     );
     assert.dom('#test-tooltip-button').hasClass('hds-tooltip-button');
   });
@@ -29,7 +24,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it renders plain text content passed into the tooltip', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="More info." id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-content').hasText('More info.');
@@ -37,13 +32,9 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('when allowHTML to true is passed in as an extraTippyOption, it renders rich HTML and text content passed into the tooltip', async function (assert) {
     await render(
-      hbs`
-        <Hds::TooltipButton
-          @extraTippyOptions={{hash allowHTML=true}}
-          @text="<em>em</em> <strong>strong</strong>"
-          id="test-tooltip-button"
-        >info</Hds::TooltipButton>
-      `,
+      <template>
+        <TooltipButton @extraTippyOptions={{hash allowHTML=true}} @text="<em>em</em> <strong>strong</strong>" id="test-tooltip-button">info</TooltipButton>
+      </template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-content em').exists().hasText('em');
@@ -56,7 +47,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
     const escapeKey = 27;
 
     await render(
-      hbs`<Hds::TooltipButton @text="More info." id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
     );
 
     // Test that tooltip does not display by default:
@@ -75,7 +66,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('the tooltip has a role of "tooltip"', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="More info." id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-box').hasAttribute('role', 'tooltip');
@@ -83,7 +74,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('the button has an aria-describedby and aria-controls attribute with a value matching the tooltip container', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="Hello" data-test-tooltip-button>info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="Hello" data-test-tooltip-button>info</TooltipButton></template>,
     );
     await focus('[data-test-tooltip-button]');
     const tooltipContainerId = this.element
@@ -101,7 +92,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it should render the component with the passed in @placement', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="Hello" @placement="right" id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="Hello" @placement="right" id="test-tooltip-button">info</TooltipButton></template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-box').hasAttribute('data-placement', 'right');
@@ -111,7 +102,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it should render the component with isInline as true by default', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="More info." id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
     );
     assert
       .dom('#test-tooltip-button')
@@ -120,7 +111,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it should render the component with the correct class if isInline is set to false', async function (assert) {
     await render(
-      hbs`<Hds::TooltipButton @text="More info." @isInline={{false}} id="test-tooltip-button">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." @isInline={{false}} id="test-tooltip-button">info</TooltipButton></template>,
     );
     assert.dom('#test-tooltip-button').hasClass('hds-tooltip-button--is-block');
   });
@@ -134,7 +125,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(hbs`<Hds::TooltipButton>info</Hds::TooltipButton>`);
+    await render(<template><TooltipButton>info</TooltipButton></template>);
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -148,7 +139,7 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      hbs`<Hds::TooltipButton @text="More info." @placement="invalid">info</Hds::TooltipButton>`,
+      <template><TooltipButton @text="More info." @placement="invalid">info</TooltipButton></template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.js b/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gjs
similarity index 87%
rename from showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.js
rename to showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gjs
index f01d34ed758..4934282dbf1 100644
--- a/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.js
+++ b/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gjs
@@ -6,14 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { focus, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import hdsTooltip from "@hashicorp/design-system-components/modifiers/hds-tooltip";
 
 module('Integration | Component | hds/tooltip/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it attaches a tooltip to the element it is invoked on', async function (assert) {
     await render(
-      hbs`<a href="#" {{hds-tooltip "More info."}}  id="test-tooltip-modifier">Info</a>`,
+      <template><a href="#" {{hdsTooltip "More info."}} id="test-tooltip-modifier">Info</a></template>,
     );
     // activate the tooltip:
     await focus('#test-tooltip-modifier');
diff --git a/showcase/tests/integration/helpers/hds-t-test.js b/showcase/tests/integration/helpers/hds-t-test.gjs
similarity index 86%
rename from showcase/tests/integration/helpers/hds-t-test.js
rename to showcase/tests/integration/helpers/hds-t-test.gjs
index d39d8e70c1d..89494429366 100644
--- a/showcase/tests/integration/helpers/hds-t-test.js
+++ b/showcase/tests/integration/helpers/hds-t-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import hdsT from "@hashicorp/design-system-components/helpers/hds-t";
 
 const defaultString = 'Default text';
 
@@ -54,7 +54,7 @@ module('Integration | Helper | hds-t', function (hooks) {
         this.set('translationKey', value);
 
         await render(
-          hbs`{{hds-t this.translationKey default=this.defaultString}}`,
+          <template>{{hdsT this.translationKey default=this.defaultString}}</template>,
         );
 
         assert.throws(function () {
@@ -76,7 +76,7 @@ module('Integration | Helper | hds-t', function (hooks) {
 
       this.set('key', 'greeting');
 
-      await render(hbs`{{hds-t this.key default=this.defaultString}}`);
+      await render(<template>{{hdsT this.key default=this.defaultString}}</template>);
 
       assert.dom().hasText('Hello from Real Intl!');
     });
@@ -93,7 +93,7 @@ module('Integration | Helper | hds-t', function (hooks) {
       });
 
       await render(
-        hbs`{{hds-t this.key name=this.nameParam age=this.ageParam default=this.defaultString}}`,
+        <template>{{hdsT this.key name=this.nameParam age=this.ageParam default=this.defaultString}}</template>,
       );
 
       assert.dom().hasText('Goodbye Tester, aged 30!');
@@ -109,7 +109,7 @@ module('Integration | Helper | hds-t', function (hooks) {
         `intl.exists('${testKey}') is false`,
       );
 
-      await render(hbs`{{hds-t this.key default=this.defaultString}}`);
+      await render(<template>{{hdsT this.key default=this.defaultString}}</template>);
 
       assert
         .dom()
diff --git a/showcase/tests/integration/modifiers/hds-anchored-position-test.js b/showcase/tests/integration/modifiers/hds-anchored-position-test.gjs
similarity index 96%
rename from showcase/tests/integration/modifiers/hds-anchored-position-test.js
rename to showcase/tests/integration/modifiers/hds-anchored-position-test.gjs
index ece2371d2e6..273eb731d5a 100644
--- a/showcase/tests/integration/modifiers/hds-anchored-position-test.js
+++ b/showcase/tests/integration/modifiers/hds-anchored-position-test.gjs
@@ -6,11 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
 import { wait } from 'showcase/tests/helpers';
-
-import { getFloatingUIOptions } from '@hashicorp/design-system-components/modifiers/hds-anchored-position';
+import hdsAnchoredPosition, { getFloatingUIOptions } from '@hashicorp/design-system-components/modifiers/hds-anchored-position';
 import anchoredElementModifier from '@hashicorp/design-system-components/modifiers/hds-anchored-position';
 
 //
@@ -216,12 +213,12 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
   });
 
   test('render "anchor/floating/arrow" elements with default `options`', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <div id="wrapper">
         <div id="anchor">anchor</div>
         <div id="floating"><div id="arrow"></div>floating</div>
       </div>
-    `);
+    </template>);
     this.anchorElement = document.getElementById('anchor');
     this.floatingElement = document.getElementById('floating');
     this.arrowElement = document.getElementById('arrow');
@@ -248,12 +245,12 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
   });
 
   test('render "anchor/floating/arrow" elements with custom options', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <div id="wrapper">
         <div id="anchor">anchor</div>
         <div id="floating"><div id="arrow"></div>floating</div>
       </div>
-    `);
+    </template>);
     this.anchorElement = document.getElementById('anchor');
     this.floatingElement = document.getElementById('floating');
     this.arrowElement = document.getElementById('arrow');
@@ -286,12 +283,12 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
   });
 
   test('the modifier works also when applied directly in the template code', async function (assert) {
-    await render(hbs`
+    await render(<template>
       <div id="wrapper">
         <div id="anchor">anchor</div>
-        <div id="floating" {{hds-anchored-position '#anchor' placement='bottom-start' strategy='fixed' offsetOptions=20 arrowSelector='#arrow' }}><div id="arrow"></div>floating</div>
+        <div id="floating" {{hdsAnchoredPosition "#anchor" placement="bottom-start" strategy="fixed" offsetOptions=20 arrowSelector="#arrow"}}><div id="arrow"></div>floating</div>
       </div>
-    `);
+    </template>);
     this.anchorElement = document.getElementById('anchor');
     this.floatingElement = document.getElementById('floating');
     this.arrowElement = document.getElementById('arrow');
diff --git a/showcase/tests/integration/modifiers/hds-clipboard-test.js b/showcase/tests/integration/modifiers/hds-clipboard-test.gjs
similarity index 80%
rename from showcase/tests/integration/modifiers/hds-clipboard-test.js
rename to showcase/tests/integration/modifiers/hds-clipboard-test.gjs
index 7bc36f98eb5..933e4b31794 100644
--- a/showcase/tests/integration/modifiers/hds-clipboard-test.js
+++ b/showcase/tests/integration/modifiers/hds-clipboard-test.gjs
@@ -5,24 +5,9 @@
 
 import { module, test, skip } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import {
-  click,
-  render,
-  find,
-  findAll,
-  fillIn,
-  resetOnerror,
-} from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { click, render, find, findAll, fillIn, resetOnerror } from '@ember/test-helpers';
 import sinon from 'sinon';
-
-import {
-  getTextToCopy,
-  getTargetElement,
-  getTextToCopyFromTargetElement,
-  writeTextToClipboard,
-  copyToClipboard,
-} from '@hashicorp/design-system-components/modifiers/hds-clipboard';
+import hdsClipboard, { getTextToCopy, getTargetElement, getTextToCopyFromTargetElement, writeTextToClipboard, copyToClipboard } from '@hashicorp/design-system-components/modifiers/hds-clipboard';
 
 //
 // ================================================================
@@ -54,19 +39,19 @@ module(
   function (hooks) {
     setupRenderingTest(hooks);
     test('returns the DOM element identified by a CSS selector string passed as argument', async function (assert) {
-      await render(hbs`<pre id="test-target">Test</pre>`);
+      await render(<template><pre id="test-target">Test</pre></template>);
       this.target = find('#test-target');
       assert.deepEqual(await this.target, await find('#test-target'));
     });
     test('returns the same DOM element passed as argument', async function (assert) {
-      await render(hbs`<pre id="test-target">Test</pre>`);
+      await render(<template><pre id="test-target">Test</pre></template>);
       this.node = await find('#test-target');
       this.target = find('#test-target');
       assert.deepEqual(await this.target, this.node);
     });
     test('it should throw an assertion if the argument provided is a list of DOM nodes', async function (assert) {
       await render(
-        hbs`<pre class="test-target">Test 1</pre><pre class="test-target">Test 2</pre>`,
+        <template><pre class="test-target">Test 1</pre><pre class="test-target">Test 2</pre></template>,
       );
       const arg = await findAll('.test-target');
       assert.throws(function () {
@@ -75,7 +60,7 @@ module(
     });
     test('it should throw an assertion if the argument provided is not a string/node', async function (assert) {
       await render(
-        hbs`<pre class="test-target">Test 1</pre><pre class="test-target">Test 2</pre>`,
+        <template><pre class="test-target">Test 1</pre><pre class="test-target">Test 2</pre></template>,
       );
       const arg = {};
       assert.throws(function () {
@@ -106,7 +91,7 @@ module(
         this.set('type', type);
         this.set('value', value);
         await render(
-          hbs`<input id="test-target" type={{this.type}} value={{this.value}} />`,
+          <template><input id="test-target" type={{this.type}} value={{this.value}} /></template>,
         );
         this.target = find('#test-target');
         assert.equal(
@@ -119,7 +104,7 @@ module(
 
     test('returns the value of a <textarea> passed as `target` argument', async function (assert) {
       this.set('value', `hello\nworld<br>!`);
-      await render(hbs`<textarea id="test-target">{{this.value}}</textarea>`);
+      await render(<template><textarea id="test-target">{{this.value}}</textarea></template>);
       this.target = find('#test-target');
       assert.deepEqual(this.value, getTextToCopyFromTargetElement(this.target));
     });
@@ -128,11 +113,11 @@ module(
       this.set('option1', `option1`);
       this.set('option2', `option2`);
       this.set('option3', `option3`);
-      await render(hbs`<select id="test-target">
+      await render(<template><select id="test-target">
         <option>{{this.option1}}</option>
         <option>{{this.option2}}</option>
         <option>{{this.option3}}</option>
-      </select>`);
+      </select></template>);
       this.target = find('#test-target');
       assert.deepEqual(
         this.option1,
@@ -144,11 +129,11 @@ module(
       this.set('option1', `option1`);
       this.set('option2', `option2`);
       this.set('option3', `option3`);
-      await render(hbs`<select id="test-target">
+      await render(<template><select id="test-target">
         <option>{{this.option1}}</option>
         <option selected>{{this.option2}}</option>
         <option>{{this.option3}}</option>
-      </select>`);
+      </select></template>);
       this.target = find('#test-target');
       assert.deepEqual(
         this.option2,
@@ -162,10 +147,10 @@ module(
     });
 
     test('returns the innerText of DOM element passed as `target` argument', async function (assert) {
-      await render(hbs`<ul id="test-target">
+      await render(<template><ul id="test-target">
         <li><p>Lorem <span><strong>Ipsum</strong> <em>dolor</em></span></p></li>
-        <li><p><code>Sit</code> <a href="#">Amet</a></p><pre>Some<br/>Code</pre></li>
-      </ul>`);
+        <li><p><code>Sit</code> <a href="#">Amet</a></p><pre>Some<br />Code</pre></li>
+      </ul></template>);
       this.target = find('#test-target');
       assert.deepEqual(
         getTextToCopyFromTargetElement(this.target),
@@ -174,19 +159,19 @@ module(
     });
 
     test('returns the innerText of DOM element passed as `target` argument without including hidden elements', async function (assert) {
-      await render(hbs`<p id="test-target">Lorem
+      await render(<template><p id="test-target">Lorem
       <span style="display: none">Ipsum</span>
       <span style="visibility: hidden">Dolor</span>
-    </p>`);
+    </p></template>);
       this.target = find('#test-target');
       assert.deepEqual(getTextToCopyFromTargetElement(this.target), 'Lorem ');
     });
 
     test('returns the innerText of DOM element passed as `target` argument without including sr only text', async function (assert) {
-      await render(hbs`<p id="test-target">
+      await render(<template><p id="test-target">
         <span>Lorem ipsum</span>
         <span class="sr-only">Text not to copy</span>
-      </p>`);
+      </p></template>);
       this.target = find('#test-target');
       assert.deepEqual(
         getTextToCopyFromTargetElement(this.target),
@@ -264,11 +249,7 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
 
   test('it should allow to copy a `string` provided as `@text` argument', async function (assert) {
     await render(
-      hbs`<button id="test-button" {{hds-clipboard
-        text="Hello world!"
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><button id="test-button" {{hdsClipboard text="Hello world!" onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.true(this.success);
@@ -276,11 +257,7 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
 
   test('it should copy an empty string provided as a `@text` argument', async function (assert) {
     await render(
-      hbs`<button id="test-button" {{hds-clipboard
-        text=""
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><button id="test-button" {{hdsClipboard text="" onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.true(this.success);
@@ -289,11 +266,7 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
   // context: https://github.com/hashicorp/design-system/pull/1564
   test('it should allow to copy an `integer` provided as `@text` argument', async function (assert) {
     await render(
-      hbs`<button id="test-button" {{hds-clipboard
-        text=1234
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><button id="test-button" {{hdsClipboard text=1234 onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.true(this.success);
@@ -301,11 +274,7 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
 
   test('it should copy a zero number value provided as a `@text` argument', async function (assert) {
     await render(
-      hbs`<button id="test-button" {{hds-clipboard
-        text=0
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><button id="test-button" {{hdsClipboard text=0 onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.true(this.success);
@@ -315,22 +284,14 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
 
   test('it should allow to target an element using a `string` selector for the `@target` argument', async function (assert) {
     await render(
-      hbs`<p id="test-target">Hello world!</p><button id="test-button" {{hds-clipboard
-        target="#test-target"
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><p id="test-target">Hello world!</p><button id="test-button" {{hdsClipboard target="#test-target" onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.true(this.success);
   });
 
   test('it should allow to target an element using a DOM node', async function (assert) {
-    await render(hbs`<p id="test-target">Hello world!</p><button id="test-button" {{hds-clipboard
-        target=this.target
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`);
+    await render(<template><p id="test-target">Hello world!</p><button id="test-button" {{hdsClipboard target=this.target onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>);
     this.set('target', find('#test-target'));
     await click('button#test-button');
     assert.true(this.success);
@@ -340,11 +301,7 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
 
   test('it should invoke the `onSuccess` callback on a successful "copy" action', async function (assert) {
     await render(
-      hbs`<button id="test-button" {{hds-clipboard
-        text="Hello world!"
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><button id="test-button" {{hdsClipboard text="Hello world!" onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.true(this.success);
@@ -359,11 +316,7 @@ module('Integration | Modifier | hds-clipboard', function (hooks) {
         'this is a fake error message provided to the sinon.stub().throws() method',
       );
     await render(
-      hbs`<button id="test-button" {{hds-clipboard
-        text="Hello world!"
-        onSuccess=this.onSuccess
-        onError=this.onError
-      }}>Test</button>`,
+      <template><button id="test-button" {{hdsClipboard text="Hello world!" onSuccess=this.onSuccess onError=this.onError}}>Test</button></template>,
     );
     await click('button#test-button');
     assert.false(this.success);
diff --git a/showcase/tests/integration/modifiers/hds-register-event-test.js b/showcase/tests/integration/modifiers/hds-register-event-test.gjs
similarity index 73%
rename from showcase/tests/integration/modifiers/hds-register-event-test.js
rename to showcase/tests/integration/modifiers/hds-register-event-test.gjs
index cd45dded0d4..19e80f0d06d 100644
--- a/showcase/tests/integration/modifiers/hds-register-event-test.js
+++ b/showcase/tests/integration/modifiers/hds-register-event-test.gjs
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, triggerEvent } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import hdsRegisterEvent from "@hashicorp/design-system-components/modifiers/hds-register-event";
 
 module('Integration | Modifier | hds-register-event', function (hooks) {
   setupRenderingTest(hooks);
@@ -19,7 +19,7 @@ module('Integration | Modifier | hds-register-event', function (hooks) {
     });
 
     await render(
-      hbs`<button id="test-button" {{hds-register-event 'click' this.eventHandler}}>Test</button>`,
+      <template><button id="test-button" {{hdsRegisterEvent "click" this.eventHandler}}>Test</button></template>,
     );
 
     await click('button');
@@ -37,7 +37,7 @@ module('Integration | Modifier | hds-register-event', function (hooks) {
     });
 
     await render(
-      hbs`<button id="test-button" {{hds-register-event 'click' this.eventHandler useCapture=true}}><span>Test</span></button>`,
+      <template><button id="test-button" {{hdsRegisterEvent "click" this.eventHandler useCapture=true}}><span>Test</span></button></template>,
     );
 
     await triggerEvent('span', 'click', { bubbles: true });

From cebbc085f82ab1278fad6969272bccc1e6f176d8 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 16:35:18 -0400
Subject: [PATCH 02/43] feat: convert gjs files to gts (easy ones)

---
 .../{td-test.gjs => td-test.gts}              |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../{item-test.gjs => item-test.gts}          |   0
 ...al-links-test.gjs => legal-links-test.gts} |   0
 .../{link-test.gjs => link-test.gts}          |   0
 ...tus-link-test.gjs => status-link-test.gts} |  60 ++++++---
 .../{index-test.gjs => index-test.gts}        |   0
 ...{home-link-test.gjs => home-link-test.gts} |  41 +++++-
 ...{back-link-test.gjs => back-link-test.gts} |  27 +++-
 .../list/{index-test.gjs => index-test.gts}   |  21 ++-
 .../list/{item-test.gjs => item-test.gts}     |   0
 .../list/{link-test.gjs => link-test.gts}     |   0
 .../portal/{index-test.gjs => index-test.gts} |   0
 .../{body-test.gjs => body-test.gts}          |   0
 .../{footer-test.gjs => footer-test.gts}      |   0
 .../{header-test.gjs => header-test.gts}      |   0
 .../{index-test.gjs => index-test.gts}        |  77 ++++++-----
 .../{media-test.gjs => media-test.gts}        |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../{item-test.gjs => item-test.gts}          |  31 ++++-
 ...runcation-test.gjs => truncation-test.gts} |   0
 .../{index-test.gjs => index-test.gts}        |   0
 ...{container-test.gjs => container-test.gts} |  42 ++++--
 .../{body-test.gjs => body-test.gts}          |   0
 ...cription-test.gjs => description-test.gts} |   0
 .../{overlay-test.gjs => overlay-test.gts}    |   0
 .../{wrapper-test.gjs => wrapper-test.gts}    |   0
 .../{index-test.gjs => index-test.gts}        |   0
 ...{copy-item-test.gjs => copy-item-test.gts} |  13 +-
 ...cription-test.gjs => description-test.gts} |  13 +-
 .../{generic-test.gjs => generic-test.gts}    |   0
 ...eractive-test.gjs => interactive-test.gts} |  79 ++++++-----
 ...{separator-test.gjs => separator-test.gts} |   4 +-
 .../{title-test.gjs => title-test.gts}        |   9 +-
 .../{button-test.gjs => button-test.gts}      |  74 ++++++++---
 .../checkbox/{base-test.gjs => base-test.gts} |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../error/{index-test.gjs => index-test.gts}  |   0
 .../{base-test.gjs => base-test.gts}          |   0
 .../footer/{index-test.gjs => index-test.gts} |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../header/{index-test.gjs => index-test.gts} |   0
 .../title/{index-test.gjs => index-test.gts}  |  25 ++--
 .../{index-test.gjs => index-test.gts}        |   0
 .../label/{index-test.gjs => index-test.gts}  |  41 ++++--
 .../legend/{index-test.gjs => index-test.gts} |   0
 .../{base-test.gjs => base-test.gts}          |   0
 .../{index-test.gjs => index-test.gts}        |  38 ++++--
 .../radio/{base-test.gjs => base-test.gts}    |   0
 .../header/{index-test.gjs => index-test.gts} |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../item/{index-test.gjs => index-test.gts}   |   0
 .../select/{base-test.gjs => base-test.gts}   |   0
 .../textarea/{base-test.gjs => base-test.gts} |   0
 .../toggle/{base-test.gjs => base-test.gts}   |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../{index-test.gjs => index-test.gts}        |  57 ++++++--
 .../icon/{index-test.gjs => index-test.gts}   |  60 +++++++--
 .../flex/{index-test.gjs => index-test.gts}   |  55 ++++++--
 .../flex/{item-test.gjs => item-test.gts}     |   0
 .../link/{inline-test.gjs => inline-test.gts} |  50 +++++--
 ...tandalone-test.gjs => standalone-test.gts} | 123 +++++++++++++++---
 .../{index-test.gjs => index-test.gts}        |   0
 .../{info-test.gjs => info-test.gts}          |   0
 .../{ellipsis-test.gjs => ellipsis-test.gts}  |   0
 .../{index-test.gjs => index-test.gts}        |   0
 .../{index-test.gjs => index-test.gts}        |  13 +-
 .../side-nav/{base-test.gjs => base-test.gts} |   0
 ...{home-link-test.gjs => home-link-test.gts} |  35 ++++-
 ...n-button-test.gjs => icon-button-test.gts} |  51 +++++++-
 .../header/{index-test.gjs => index-test.gts} |   0
 ...{back-link-test.gjs => back-link-test.gts} |  27 +++-
 .../list/{index-test.gjs => index-test.gts}   |  27 ++--
 .../list/{item-test.gjs => item-test.gts}     |   0
 .../list/{link-test.gjs => link-test.gts}     |   0
 .../portal/{index-test.gjs => index-test.gts} |   0
 ...{list-step-test.gjs => list-step-test.gts} |  88 ++++++-------
 .../stepper/{list-test.gjs => list-test.gts}  |   0
 ...cator-test.gjs => step-indicator-test.gts} |  46 +++++--
 ...cator-test.gjs => task-indicator-test.gts} |   0
 .../hds/table/{td-test.gjs => td-test.gts}    |   0
 .../tag/{index-test.gjs => index-test.gts}    |  70 +++++++---
 .../hds/text/{body-test.gjs => body-test.gts} |  45 ++++++-
 .../hds/text/{code-test.gjs => code-test.gts} |  41 +++++-
 .../{display-test.gjs => display-test.gts}    |  55 ++++++--
 .../text/{index-test.gjs => index-test.gts}   |  97 +++++++++++---
 .../toast/{index-test.gjs => index-test.gts}  |   0
 88 files changed, 1160 insertions(+), 375 deletions(-)
 rename showcase/tests/integration/components/hds/advanced-table/{td-test.gjs => td-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-footer/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-footer/{item-test.gjs => item-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-footer/{legal-links-test.gjs => legal-links-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-footer/{link-test.gjs => link-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-footer/{status-link-test.gjs => status-link-test.gts} (71%)
 rename showcase/tests/integration/components/hds/app-frame/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-header/{home-link-test.gjs => home-link-test.gts} (64%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{back-link-test.gjs => back-link-test.gts} (72%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{index-test.gjs => index-test.gts} (72%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{item-test.gjs => item-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-side-nav/list/{link-test.gjs => link-test.gts} (100%)
 rename showcase/tests/integration/components/hds/app-side-nav/portal/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/application-state/{body-test.gjs => body-test.gts} (100%)
 rename showcase/tests/integration/components/hds/application-state/{footer-test.gjs => footer-test.gts} (100%)
 rename showcase/tests/integration/components/hds/application-state/{header-test.gjs => header-test.gts} (100%)
 rename showcase/tests/integration/components/hds/application-state/{index-test.gjs => index-test.gts} (65%)
 rename showcase/tests/integration/components/hds/application-state/{media-test.gjs => media-test.gts} (100%)
 rename showcase/tests/integration/components/hds/badge-count/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/breadcrumb/{item-test.gjs => item-test.gts} (70%)
 rename showcase/tests/integration/components/hds/breadcrumb/{truncation-test.gjs => truncation-test.gts} (100%)
 rename showcase/tests/integration/components/hds/button-set/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/card/{container-test.gjs => container-test.gts} (83%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{body-test.gjs => body-test.gts} (100%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{description-test.gjs => description-test.gts} (100%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{overlay-test.gjs => overlay-test.gts} (100%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{wrapper-test.gjs => wrapper-test.gts} (100%)
 rename showcase/tests/integration/components/hds/dismiss-button/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{copy-item-test.gjs => copy-item-test.gts} (78%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{description-test.gjs => description-test.gts} (77%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{generic-test.gjs => generic-test.gts} (100%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{interactive-test.gjs => interactive-test.gts} (77%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{separator-test.gjs => separator-test.gts} (88%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{title-test.gjs => title-test.gts} (84%)
 rename showcase/tests/integration/components/hds/dropdown/toggle/{button-test.gjs => button-test.gts} (72%)
 rename showcase/tests/integration/components/hds/form/checkbox/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/divider/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/error/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/file-input/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/footer/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/header/description/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/header/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/header/title/{index-test.gjs => index-test.gts} (79%)
 rename showcase/tests/integration/components/hds/form/helper-text/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/label/{index-test.gjs => index-test.gts} (69%)
 rename showcase/tests/integration/components/hds/form/legend/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/masked-input/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/radio-card/{index-test.gjs => index-test.gts} (78%)
 rename showcase/tests/integration/components/hds/form/radio/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/section/header/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/section/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/section/multi-field-group/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/section/multi-field-group/item/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/select/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/textarea/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/toggle/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/form/visibility-toggle/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/icon-tile/{index-test.gjs => index-test.gts} (75%)
 rename showcase/tests/integration/components/hds/icon/{index-test.gjs => index-test.gts} (78%)
 rename showcase/tests/integration/components/hds/layout/flex/{index-test.gjs => index-test.gts} (82%)
 rename showcase/tests/integration/components/hds/layout/flex/{item-test.gjs => item-test.gts} (100%)
 rename showcase/tests/integration/components/hds/link/{inline-test.gjs => inline-test.gts} (73%)
 rename showcase/tests/integration/components/hds/link/{standalone-test.gjs => standalone-test.gts} (65%)
 rename showcase/tests/integration/components/hds/page-header/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/pagination/{info-test.gjs => info-test.gts} (100%)
 rename showcase/tests/integration/components/hds/pagination/nav/{ellipsis-test.gjs => ellipsis-test.gts} (100%)
 rename showcase/tests/integration/components/hds/segmented-group/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/separator/{index-test.gjs => index-test.gts} (81%)
 rename showcase/tests/integration/components/hds/side-nav/{base-test.gjs => base-test.gts} (100%)
 rename showcase/tests/integration/components/hds/side-nav/header/{home-link-test.gjs => home-link-test.gts} (66%)
 rename showcase/tests/integration/components/hds/side-nav/header/{icon-button-test.gjs => icon-button-test.gts} (63%)
 rename showcase/tests/integration/components/hds/side-nav/header/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/side-nav/list/{back-link-test.gjs => back-link-test.gts} (72%)
 rename showcase/tests/integration/components/hds/side-nav/list/{index-test.gjs => index-test.gts} (69%)
 rename showcase/tests/integration/components/hds/side-nav/list/{item-test.gjs => item-test.gts} (100%)
 rename showcase/tests/integration/components/hds/side-nav/list/{link-test.gjs => link-test.gts} (100%)
 rename showcase/tests/integration/components/hds/side-nav/portal/{index-test.gjs => index-test.gts} (100%)
 rename showcase/tests/integration/components/hds/stepper/{list-step-test.gjs => list-step-test.gts} (77%)
 rename showcase/tests/integration/components/hds/stepper/{list-test.gjs => list-test.gts} (100%)
 rename showcase/tests/integration/components/hds/stepper/{step-indicator-test.gjs => step-indicator-test.gts} (66%)
 rename showcase/tests/integration/components/hds/stepper/{task-indicator-test.gjs => task-indicator-test.gts} (100%)
 rename showcase/tests/integration/components/hds/table/{td-test.gjs => td-test.gts} (100%)
 rename showcase/tests/integration/components/hds/tag/{index-test.gjs => index-test.gts} (69%)
 rename showcase/tests/integration/components/hds/text/{body-test.gjs => body-test.gts} (74%)
 rename showcase/tests/integration/components/hds/text/{code-test.gjs => code-test.gts} (76%)
 rename showcase/tests/integration/components/hds/text/{display-test.gjs => display-test.gts} (75%)
 rename showcase/tests/integration/components/hds/text/{index-test.gjs => index-test.gts} (62%)
 rename showcase/tests/integration/components/hds/toast/{index-test.gjs => index-test.gts} (100%)

diff --git a/showcase/tests/integration/components/hds/advanced-table/td-test.gjs b/showcase/tests/integration/components/hds/advanced-table/td-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/advanced-table/td-test.gjs
rename to showcase/tests/integration/components/hds/advanced-table/td-test.gts
diff --git a/showcase/tests/integration/components/hds/app-footer/index-test.gjs b/showcase/tests/integration/components/hds/app-footer/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-footer/index-test.gjs
rename to showcase/tests/integration/components/hds/app-footer/index-test.gts
diff --git a/showcase/tests/integration/components/hds/app-footer/item-test.gjs b/showcase/tests/integration/components/hds/app-footer/item-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-footer/item-test.gjs
rename to showcase/tests/integration/components/hds/app-footer/item-test.gts
diff --git a/showcase/tests/integration/components/hds/app-footer/legal-links-test.gjs b/showcase/tests/integration/components/hds/app-footer/legal-links-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-footer/legal-links-test.gjs
rename to showcase/tests/integration/components/hds/app-footer/legal-links-test.gts
diff --git a/showcase/tests/integration/components/hds/app-footer/link-test.gjs b/showcase/tests/integration/components/hds/app-footer/link-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-footer/link-test.gjs
rename to showcase/tests/integration/components/hds/app-footer/link-test.gts
diff --git a/showcase/tests/integration/components/hds/app-footer/status-link-test.gjs b/showcase/tests/integration/components/hds/app-footer/status-link-test.gts
similarity index 71%
rename from showcase/tests/integration/components/hds/app-footer/status-link-test.gjs
rename to showcase/tests/integration/components/hds/app-footer/status-link-test.gts
index 6142adeee82..eb24636bd39 100644
--- a/showcase/tests/integration/components/hds/app-footer/status-link-test.gjs
+++ b/showcase/tests/integration/components/hds/app-footer/status-link-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import StatusLink from "@hashicorp/design-system-components/components/hds/app-footer/status-link";
+import StatusLink from '@hashicorp/design-system-components/components/hds/app-footer/status-link';
 
 module(
   'Integration | Component | hds/app-footer/status-link',
@@ -15,7 +15,9 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><ul><StatusLink @status="operational" id="test-status-link" /></ul></template>,
+        <template>
+          <ul><StatusLink @status="operational" id="test-status-link" /></ul>
+        </template>,
       );
       assert.dom('#test-status-link').hasClass('hds-app-footer__status-link');
     });
@@ -25,12 +27,16 @@ module(
     // status
 
     test('it should display text, icon, and icon color matching the passed in status', async function (assert) {
-      await render(<template><ul class="hds-app-footer hds-app-footer--theme-light">
-        <StatusLink id="test-operational" @status="operational" />
-        <StatusLink id="test-degraded" @status="degraded" />
-        <StatusLink id="test-maintenance" @status="maintenance" />
-        <StatusLink id="test-outage" @status="outage" />
-      </ul></template>);
+      await render(
+        <template>
+          <ul class="hds-app-footer hds-app-footer--theme-light">
+            <StatusLink id="test-operational" @status="operational" />
+            <StatusLink id="test-degraded" @status="degraded" />
+            <StatusLink id="test-maintenance" @status="maintenance" />
+            <StatusLink id="test-outage" @status="outage" />
+          </ul>
+        </template>,
+      );
       // operational
       assert
         .dom('#test-operational')
@@ -68,9 +74,15 @@ module(
     // text, statusIcon, statusIconColor
 
     test('it should display the custom text, icon color, and icon passed in', async function (assert) {
-      await render(<template>
-      <ul><StatusLink @text="Waypoint" @statusIcon="waypoint" @statusIconColor="var(--token-color-waypoint-brand)" /></ul>
-    </template>);
+      await render(
+        <template>
+          <ul><StatusLink
+              @text="Waypoint"
+              @statusIcon="waypoint"
+              @statusIconColor="var(--token-color-waypoint-brand)"
+            /></ul>
+        </template>,
+      );
       assert.dom('.hds-app-footer__status-link').hasText('Waypoint');
       assert.dom('.hds-app-footer__status-link .hds-icon').exists();
       // .hasStyle({'--hds-app-footer-status-icon-color': 'var(--token-color-waypoint-brand)'})
@@ -79,9 +91,14 @@ module(
     // href
 
     test('it should use the passed in href for the link', async function (assert) {
-      await render(<template>
-      <ul><StatusLink @status="operational" @href="https://www.hashicorp.com/custom-url" /></ul>
-    </template>);
+      await render(
+        <template>
+          <ul><StatusLink
+              @status="operational"
+              @href="https://www.hashicorp.com/custom-url"
+            /></ul>
+        </template>,
+      );
       assert
         .dom('.hds-app-footer__status-link')
         .hasAttribute('href', 'https://www.hashicorp.com/custom-url');
@@ -96,7 +113,11 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(<template><ul><StatusLink /></ul></template>);
+      await render(
+        <template>
+          <ul><StatusLink /></ul>
+        </template>,
+      );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
@@ -109,7 +130,14 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(<template><ul><StatusLink @status="foo" /></ul></template>);
+      await render(
+        <template>
+          <ul>
+            {{! @glint-expect-error - assertion testing invalid value }}
+            <StatusLink @status="foo" />
+          </ul>
+        </template>,
+      );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/app-frame/index-test.gjs b/showcase/tests/integration/components/hds/app-frame/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-frame/index-test.gjs
rename to showcase/tests/integration/components/hds/app-frame/index-test.gts
diff --git a/showcase/tests/integration/components/hds/app-header/home-link-test.gjs b/showcase/tests/integration/components/hds/app-header/home-link-test.gts
similarity index 64%
rename from showcase/tests/integration/components/hds/app-header/home-link-test.gjs
rename to showcase/tests/integration/components/hds/app-header/home-link-test.gts
index b7777181713..111ae686256 100644
--- a/showcase/tests/integration/components/hds/app-header/home-link-test.gjs
+++ b/showcase/tests/integration/components/hds/app-header/home-link-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import HomeLink from "@hashicorp/design-system-components/components/hds/app-header/home-link";
+import HomeLink from '@hashicorp/design-system-components/components/hds/app-header/home-link';
 
 module('Integration | Component | hds/app-header/home-link', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,9 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><HomeLink @icon="hashicorp" @text="HashiCorp" id="test-home-link" /></template>,
+      <template>
+        <HomeLink @icon="hashicorp" @text="HashiCorp" id="test-home-link" />
+      </template>,
     );
     assert.dom('#test-home-link').hasClass('hds-app-header__home-link');
   });
@@ -26,7 +28,14 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      <template><HomeLink @icon="hashicorp" @text="HashiCorp" @href="https://www.hashicorp.com/" id="test-home-link" /></template>,
+      <template>
+        <HomeLink
+          @icon="hashicorp"
+          @text="HashiCorp"
+          @href="https://www.hashicorp.com/"
+          id="test-home-link"
+        />
+      </template>,
     );
     assert.dom('.hds-icon-hashicorp').exists();
     assert
@@ -37,7 +46,14 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it renders the logo with a custom passed in color', async function (assert) {
     await render(
-      <template><HomeLink @icon="boundary" @text="Boundary" @color="var(--token-color-boundary-brand)" @href="#" /></template>,
+      <template>
+        <HomeLink
+          @icon="boundary"
+          @text="Boundary"
+          @color="var(--token-color-boundary-brand)"
+          @href="#"
+        />
+      </template>,
     );
     assert
       .dom('.hds-icon-boundary')
@@ -46,7 +62,15 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   test('it renders the logo with text when @isIconOnly is false', async function (assert) {
     await render(
-      <template><HomeLink @icon="hashicorp" @text="HashiCorp" @isIconOnly={{false}} @href="#" id="test-home-link" /></template>,
+      <template>
+        <HomeLink
+          @icon="hashicorp"
+          @text="HashiCorp"
+          @isIconOnly={{false}}
+          @href="#"
+          id="test-home-link"
+        />
+      </template>,
     );
     assert.dom('.hds-text').exists();
   });
@@ -60,7 +84,12 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><HomeLink @icon="hashicorp" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <HomeLink @icon="hashicorp" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gjs b/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gts
similarity index 72%
rename from showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gjs
rename to showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gts
index cbfd4c0d534..2fad47915e7 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gjs
+++ b/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import BackLink from "@hashicorp/design-system-components/components/hds/app-side-nav/list/back-link";
+import BackLink from '@hashicorp/design-system-components/components/hds/app-side-nav/list/back-link';
 
 module(
   'Integration | Component | hds/app-side-nav/list/back-link',
@@ -17,7 +17,12 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><BackLink id="test-app-side-nav-list-item-link-back-link" /></template>,
+        <template>
+          <BackLink
+            @text="Back to parent page"
+            id="test-app-side-nav-list-item-link-back-link"
+          />
+        </template>,
       );
       assert
         .dom('#test-app-side-nav-list-item-link-back-link')
@@ -39,7 +44,9 @@ module(
     // GENERATED ELEMENTS
 
     test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-      await render(<template><BackLink /></template>);
+      await render(
+        <template><BackLink @text="Back to parent page" /></template>,
+      );
       assert
         .dom('.hds-app-side-nav__list-item-link--back-link')
         .hasTagName('button');
@@ -47,7 +54,12 @@ module(
 
     test('it should render a <a> link if @href is passed', async function (assert) {
       await render(
-        <template><BackLink @href="https://www.hashicorp.com/" /></template>,
+        <template>
+          <BackLink
+            @text="Back to parent page"
+            @href="https://www.hashicorp.com/"
+          />
+        </template>,
       );
       assert
         .dom('.hds-app-side-nav__list-item-link--back-link')
@@ -57,7 +69,12 @@ module(
 
     test('it should render a <a> link if @route is passed', async function (assert) {
       await render(
-        <template><BackLink @route="page-utilities.interactive" /></template>,
+        <template>
+          <BackLink
+            @text="Back to parent page"
+            @route="page-utilities.interactive"
+          />
+        </template>,
       );
       assert
         .dom('.hds-app-side-nav__list-item-link--back-link')
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/index-test.gjs b/showcase/tests/integration/components/hds/app-side-nav/list/index-test.gts
similarity index 72%
rename from showcase/tests/integration/components/hds/app-side-nav/list/index-test.gjs
rename to showcase/tests/integration/components/hds/app-side-nav/list/index-test.gts
index b9e8d1dcba1..e56a68f8be6 100644
--- a/showcase/tests/integration/components/hds/app-side-nav/list/index-test.gjs
+++ b/showcase/tests/integration/components/hds/app-side-nav/list/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import List from "@hashicorp/design-system-components/components/hds/app-side-nav/list/index";
+import List from '@hashicorp/design-system-components/components/hds/app-side-nav/list/index';
 
 module(
   'Integration | Component | hds/app-side-nav/list/index',
@@ -27,12 +27,19 @@ module(
     // Test Content / Args
 
     test('it renders passed in yielded content', async function (assert) {
-      await render(<template><List as |L|>
-  <L.Item id="test-app-side-nav-list-content-item" />
-  <L.BackLink id="test-app-side-nav-list-content-backlink" />
-  <L.Title id="test-app-side-nav-list-content-title" />
-  <L.Link id="test-app-side-nav-list-content-link" />
-</List></template>);
+      await render(
+        <template>
+          <List as |L|>
+            <L.Item id="test-app-side-nav-list-content-item" />
+            <L.BackLink
+              @text="Back to parent page"
+              id="test-app-side-nav-list-content-backlink"
+            />
+            <L.Title id="test-app-side-nav-list-content-title" />
+            <L.Link id="test-app-side-nav-list-content-link" />
+          </List>
+        </template>,
+      );
       assert.dom('#test-app-side-nav-list-content-item').exists();
       assert.dom('#test-app-side-nav-list-content-backlink').exists();
       assert.dom('#test-app-side-nav-list-content-title').exists();
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/item-test.gjs b/showcase/tests/integration/components/hds/app-side-nav/list/item-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-side-nav/list/item-test.gjs
rename to showcase/tests/integration/components/hds/app-side-nav/list/item-test.gts
diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/link-test.gjs b/showcase/tests/integration/components/hds/app-side-nav/list/link-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-side-nav/list/link-test.gjs
rename to showcase/tests/integration/components/hds/app-side-nav/list/link-test.gts
diff --git a/showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gjs b/showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gjs
rename to showcase/tests/integration/components/hds/app-side-nav/portal/index-test.gts
diff --git a/showcase/tests/integration/components/hds/application-state/body-test.gjs b/showcase/tests/integration/components/hds/application-state/body-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/application-state/body-test.gjs
rename to showcase/tests/integration/components/hds/application-state/body-test.gts
diff --git a/showcase/tests/integration/components/hds/application-state/footer-test.gjs b/showcase/tests/integration/components/hds/application-state/footer-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/application-state/footer-test.gjs
rename to showcase/tests/integration/components/hds/application-state/footer-test.gts
diff --git a/showcase/tests/integration/components/hds/application-state/header-test.gjs b/showcase/tests/integration/components/hds/application-state/header-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/application-state/header-test.gjs
rename to showcase/tests/integration/components/hds/application-state/header-test.gts
diff --git a/showcase/tests/integration/components/hds/application-state/index-test.gjs b/showcase/tests/integration/components/hds/application-state/index-test.gts
similarity index 65%
rename from showcase/tests/integration/components/hds/application-state/index-test.gjs
rename to showcase/tests/integration/components/hds/application-state/index-test.gts
index c64017be147..68cd649fc4e 100644
--- a/showcase/tests/integration/components/hds/application-state/index-test.gjs
+++ b/showcase/tests/integration/components/hds/application-state/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import ApplicationState from "@hashicorp/design-system-components/components/hds/application-state/index";
+import ApplicationState from '@hashicorp/design-system-components/components/hds/application-state/index';
 
 module(
   'Integration | Component | hds/application-state/index',
@@ -18,21 +18,25 @@ module(
     });
 
     test('it should render with a CSS class that matches the component name', async function (assert) {
-      await render(<template>
-      <ApplicationState id="test-application-state">
-        template block text
-      </ApplicationState>
-    </template>);
+      await render(
+        <template>
+          <ApplicationState id="test-application-state">
+            template block text
+          </ApplicationState>
+        </template>,
+      );
 
       assert.dom('#test-application-state').hasClass('hds-application-state');
     });
 
     test('it should have the correct alignment class when no alignment is provided', async function (assert) {
-      await render(<template>
-      <ApplicationState id="test-application-state">
-        template block text
-      </ApplicationState>
-    </template>);
+      await render(
+        <template>
+          <ApplicationState id="test-application-state">
+            template block text
+          </ApplicationState>
+        </template>,
+      );
 
       assert
         .dom('#test-application-state')
@@ -40,11 +44,13 @@ module(
     });
 
     test('it should have the correct alignment class when alignment is set to "left"', async function (assert) {
-      await render(<template>
-      <ApplicationState id="test-application-state" @align="left">
-        template block text
-      </ApplicationState>
-    </template>);
+      await render(
+        <template>
+          <ApplicationState id="test-application-state" @align="left">
+            template block text
+          </ApplicationState>
+        </template>,
+      );
 
       assert
         .dom('#test-application-state')
@@ -52,11 +58,13 @@ module(
     });
 
     test('it should have the correct alignment class when alignment is set to "center"', async function (assert) {
-      await render(<template>
-      <ApplicationState id="test-application-state" @align="center">
-        template block text
-      </ApplicationState>
-    </template>);
+      await render(
+        <template>
+          <ApplicationState id="test-application-state" @align="center">
+            template block text
+          </ApplicationState>
+        </template>,
+      );
 
       assert
         .dom('#test-application-state')
@@ -67,12 +75,14 @@ module(
 
     test('it renders the contextual components', async function (assert) {
       await render(
-        <template><ApplicationState as |A|>
-              <A.Media>ApplicationState Media</A.Media>
-              <A.Header @title="ApplicationState Title" />
-              <A.Body>ApplicationState Body</A.Body>
-              <A.Footer>ApplicationState Footer</A.Footer>
-            </ApplicationState></template>,
+        <template>
+          <ApplicationState as |A|>
+            <A.Media>ApplicationState Media</A.Media>
+            <A.Header @title="ApplicationState Title" />
+            <A.Body>ApplicationState Body</A.Body>
+            <A.Footer>ApplicationState Footer</A.Footer>
+          </ApplicationState>
+        </template>,
       );
       assert
         .dom('.hds-application-state__media')
@@ -107,11 +117,14 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
 
-      await render(<template>
-      <ApplicationState id="test-application-state" @align="test">
-        template block text
-      </ApplicationState>
-    </template>);
+      await render(
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <ApplicationState id="test-application-state" @align="test">
+            template block text
+          </ApplicationState>
+        </template>,
+      );
 
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/application-state/media-test.gjs b/showcase/tests/integration/components/hds/application-state/media-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/application-state/media-test.gjs
rename to showcase/tests/integration/components/hds/application-state/media-test.gts
diff --git a/showcase/tests/integration/components/hds/badge-count/index-test.gjs b/showcase/tests/integration/components/hds/badge-count/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/badge-count/index-test.gjs
rename to showcase/tests/integration/components/hds/badge-count/index-test.gts
diff --git a/showcase/tests/integration/components/hds/breadcrumb/item-test.gjs b/showcase/tests/integration/components/hds/breadcrumb/item-test.gts
similarity index 70%
rename from showcase/tests/integration/components/hds/breadcrumb/item-test.gjs
rename to showcase/tests/integration/components/hds/breadcrumb/item-test.gts
index 8064ff74f46..2fb12de03c3 100644
--- a/showcase/tests/integration/components/hds/breadcrumb/item-test.gjs
+++ b/showcase/tests/integration/components/hds/breadcrumb/item-test.gts
@@ -6,19 +6,23 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import Item from "@hashicorp/design-system-components/components/hds/breadcrumb/item";
+import Item from '@hashicorp/design-system-components/components/hds/breadcrumb/item';
 
 module('Integration | Component | hds/breadcrumb/item', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template><Item id="test-breadcrumb-item" /></template>);
+    await render(
+      <template><Item id="test-breadcrumb-item" @text="test" /></template>,
+    );
     assert.dom('#test-breadcrumb-item').hasClass('hds-breadcrumb__item');
   });
 
   test('it should render the correct style if the @maxWidth prop is declared', async function (assert) {
     await render(
-      <template><Item @maxWidth="200px" @text="test" id="test-breadcrumb-item" /></template>,
+      <template>
+        <Item @maxWidth="200px" @text="test" id="test-breadcrumb-item" />
+      </template>,
     );
     assert.dom('#test-breadcrumb-item').hasStyle({ 'max-width': '200px' });
   });
@@ -27,20 +31,30 @@ module('Integration | Component | hds/breadcrumb/item', function (hooks) {
 
   test('it should render a link by default', async function (assert) {
     await render(
-      <template><Item id="test-breadcrumb-item" @text="text renders" /></template>,
+      <template>
+        <Item id="test-breadcrumb-item" @text="text renders" />
+      </template>,
     );
     assert.dom('#test-breadcrumb-item > a').exists();
   });
   test('it should not render a if @current is true', async function (assert) {
     await render(
-      <template><Item id="test-breadcrumb-item" @text="text renders" @current={{true}} /></template>,
+      <template>
+        <Item
+          id="test-breadcrumb-item"
+          @text="text renders"
+          @current={{true}}
+        />
+      </template>,
     );
     assert.dom('#test-breadcrumb-item > a').doesNotExist();
     assert.dom('#test-breadcrumb-item .hds-breadcrumb__current').exists();
   });
   test('it should render the item with icon and text if @icon and @text are provided', async function (assert) {
     await render(
-      <template><Item id="test-breadcrumb-item" @text="text renders" @icon="activity" /></template>,
+      <template>
+        <Item id="test-breadcrumb-item" @text="text renders" @icon="activity" />
+      </template>,
     );
     assert.dom('.hds-icon.hds-icon-activity').exists();
     assert.dom('.hds-breadcrumb__text').hasText('text renders');
@@ -55,7 +69,10 @@ module('Integration | Component | hds/breadcrumb/item', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Item @maxWidth="123" id="test-breadcrumb-item" /></template>,
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Item @maxWidth="123" id="test-breadcrumb-item" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/breadcrumb/truncation-test.gjs b/showcase/tests/integration/components/hds/breadcrumb/truncation-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/breadcrumb/truncation-test.gjs
rename to showcase/tests/integration/components/hds/breadcrumb/truncation-test.gts
diff --git a/showcase/tests/integration/components/hds/button-set/index-test.gjs b/showcase/tests/integration/components/hds/button-set/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/button-set/index-test.gjs
rename to showcase/tests/integration/components/hds/button-set/index-test.gts
diff --git a/showcase/tests/integration/components/hds/card/container-test.gjs b/showcase/tests/integration/components/hds/card/container-test.gts
similarity index 83%
rename from showcase/tests/integration/components/hds/card/container-test.gjs
rename to showcase/tests/integration/components/hds/card/container-test.gts
index 5c885bf311f..3d4f8244206 100644
--- a/showcase/tests/integration/components/hds/card/container-test.gjs
+++ b/showcase/tests/integration/components/hds/card/container-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Container from "@hashicorp/design-system-components/components/hds/card/container";
+import Container from '@hashicorp/design-system-components/components/hds/card/container';
 
 module('Integration | Component | hds/card/container', function (hooks) {
   setupRenderingTest(hooks);
@@ -38,7 +38,9 @@ module('Integration | Component | hds/card/container', function (hooks) {
   });
   test('it should have a "surface" elavation the @hasBorder prop is true', async function (assert) {
     await render(
-      <template><Container id="test-card-container" @hasBorder={{true}} /></template>,
+      <template>
+        <Container id="test-card-container" @hasBorder={{true}} />
+      </template>,
     );
     assert
       .dom('#test-card-container')
@@ -55,7 +57,9 @@ module('Integration | Component | hds/card/container', function (hooks) {
   });
   test('it should have the correct background class based on the @background prop', async function (assert) {
     await render(
-      <template><Container id="test-card-container" @background="neutral-secondary" /></template>,
+      <template>
+        <Container id="test-card-container" @background="neutral-secondary" />
+      </template>,
     );
     assert
       .dom('#test-card-container')
@@ -72,7 +76,9 @@ module('Integration | Component | hds/card/container', function (hooks) {
   });
   test('it should have the overflow hidden if the @overflow prop is declared as "hidden"', async function (assert) {
     await render(
-      <template><Container id="test-card-container" @overflow="hidden" /></template>,
+      <template>
+        <Container id="test-card-container" @overflow="hidden" />
+      </template>,
     );
     assert
       .dom('#test-card-container')
@@ -108,7 +114,12 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Container @level="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Container @level="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -120,7 +131,12 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Container @levelHover="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Container @levelHover="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -132,7 +148,12 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Container @levelActive="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Container @levelActive="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -146,7 +167,12 @@ module('Integration | Component | hds/card/container', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Container @tag="section" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Container @tag="section" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/body-test.gjs b/showcase/tests/integration/components/hds/dialog-primitive/body-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/dialog-primitive/body-test.gjs
rename to showcase/tests/integration/components/hds/dialog-primitive/body-test.gts
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/description-test.gjs b/showcase/tests/integration/components/hds/dialog-primitive/description-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/dialog-primitive/description-test.gjs
rename to showcase/tests/integration/components/hds/dialog-primitive/description-test.gts
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gjs b/showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gjs
rename to showcase/tests/integration/components/hds/dialog-primitive/overlay-test.gts
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gjs b/showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gjs
rename to showcase/tests/integration/components/hds/dialog-primitive/wrapper-test.gts
diff --git a/showcase/tests/integration/components/hds/dismiss-button/index-test.gjs b/showcase/tests/integration/components/hds/dismiss-button/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/dismiss-button/index-test.gjs
rename to showcase/tests/integration/components/hds/dismiss-button/index-test.gts
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gts
similarity index 78%
rename from showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gts
index 2138fe579ea..ecdca8b31a6 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/copy-item-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import CopyItem from "@hashicorp/design-system-components/components/hds/dropdown/list-item/copy-item";
+import CopyItem from '@hashicorp/design-system-components/components/hds/dropdown/list-item/copy-item';
 
 module(
   'Integration | Component | hds/dropdown/list-item/copy-item',
@@ -19,7 +19,9 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><CopyItem @text="copy-item" id="test-list-item-copy-item" /></template>,
+        <template>
+          <CopyItem @text="copy-item" id="test-list-item-copy-item" />
+        </template>,
       );
       assert.dom('#test-list-item-copy-item').hasTagName('li');
       assert
@@ -39,7 +41,12 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(<template><CopyItem /></template>);
+      await render(
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <CopyItem />
+        </template>,
+      );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/description-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/description-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/dropdown/list-item/description-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/description-test.gts
index a7a7acbb1dc..5e3d34c8ee8 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/description-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/description-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Description from "@hashicorp/design-system-components/components/hds/dropdown/list-item/description";
+import Description from '@hashicorp/design-system-components/components/hds/dropdown/list-item/description';
 
 module(
   'Integration | Component | hds/dropdown/list-item/description',
@@ -19,7 +19,9 @@ module(
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Description @text="description" id="test-list-item-description" /></template>,
+        <template>
+          <Description @text="description" id="test-list-item-description" />
+        </template>,
       );
       assert.dom('#test-list-item-description').hasTagName('li');
       assert
@@ -39,7 +41,12 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(<template><Description /></template>);
+      await render(
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <Description />
+        </template>,
+      );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/generic-test.gts
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gts
index 1923e340afb..c8194f11ef6 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/interactive-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Interactive from "@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive";
+import Interactive from '@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive';
 
 module(
   'Integration | Component | hds/dropdown/list-item/interactive',
@@ -22,9 +22,7 @@ module(
     // so we can't use the DOM "id" to target the component but we have to rely on the class name
 
     test('it should render the component as a <li> element with a CSS class that matches the component name', async function (assert) {
-      await render(
-        <template><Interactive @text="interactive" /></template>,
-      );
+      await render(<template><Interactive @text="interactive" /></template>);
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
         .dom('.hds-dropdown-list-item')
@@ -34,9 +32,7 @@ module(
     // ELEMENTS
 
     test('it should render the "list-item" with a button by default"', async function (assert) {
-      await render(
-        <template><Interactive @text="interactive" /></template>,
-      );
+      await render(<template><Interactive @text="interactive" /></template>);
       assert.dom('.hds-dropdown-list-item > button').exists();
     });
     test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
@@ -55,16 +51,16 @@ module(
     // COLOR
 
     test('it should render the "action" color as the default if no color is declared"', async function (assert) {
-      await render(
-        <template><Interactive @text="interactive" /></template>,
-      );
+      await render(<template><Interactive @text="interactive" /></template>);
       assert
         .dom('.hds-dropdown-list-item')
         .hasClass('hds-dropdown-list-item--color-action');
     });
     test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
       await render(
-        <template><Interactive @color="critical" @text="interactive" @icon="trash" /></template>,
+        <template>
+          <Interactive @color="critical" @text="interactive" @icon="trash" />
+        </template>,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -75,19 +71,29 @@ module(
 
     test('if an `@icon` is declared a leading icon should be rendered', async function (assert) {
       await render(
-        <template><Interactive @icon="clipboard-copy" @text="interactive" /></template>,
+        <template>
+          <Interactive @icon="clipboard-copy" @text="interactive" />
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
     });
     test('if an `@trailingIcon` is declared a trailing icon should be rendered', async function (assert) {
       await render(
-        <template><Interactive @trailingIcon="external-link" @text="interactive" /></template>,
+        <template>
+          <Interactive @trailingIcon="external-link" @text="interactive" />
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-external-link').exists();
     });
     test('if both an `@icon` and an `@trailingIcon` are declared both the leading and trailing icons should be rendered', async function (assert) {
       await render(
-        <template><Interactive @icon="clipboard-copy" @trailingIcon="external-link" @text="interactive" /></template>,
+        <template>
+          <Interactive
+            @icon="clipboard-copy"
+            @trailingIcon="external-link"
+            @text="interactive"
+          />
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
       assert.dom('.hds-icon.hds-icon-external-link').exists();
@@ -102,19 +108,23 @@ module(
       assert.dom('.hds-dropdown-list-item').hasText('interactive text');
     });
     test('it should render the yielded content', async function (assert) {
-      await render(<template>
-        <Interactive>
-          interactive
-        </Interactive>
-      </template>);
+      await render(
+        <template>
+          <Interactive>
+            interactive
+          </Interactive>
+        </template>,
+      );
       assert.dom('.hds-dropdown-list-item').hasText('interactive');
     });
     test('it should render the text passed as @text prop if content is yielded', async function (assert) {
-      await render(<template>
-        <Interactive @text="erroneous">
-          interactive
-        </Interactive>
-      </template>);
+      await render(
+        <template>
+          <Interactive @text="erroneous">
+            interactive
+          </Interactive>
+        </template>,
+      );
       assert.dom('.hds-dropdown-list-item').doesNotContainText('erroneous');
     });
 
@@ -140,7 +150,10 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        <template><Interactive @color="foo" @text="interactive text" /></template>,
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <Interactive @color="foo" @text="interactive text" />
+        </template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
@@ -151,9 +164,11 @@ module(
 
     test('it renders the contextual components', async function (assert) {
       await render(
-        <template><Interactive as |I|>
-              <I.Badge @text="Badge" />
-            </Interactive></template>,
+        <template>
+          <Interactive as |I|>
+            <I.Badge @text="Badge" />
+          </Interactive>
+        </template>,
       );
       assert
         .dom('.hds-badge')
@@ -162,9 +177,11 @@ module(
     });
     test('it does not render the contextual components if not provided', async function (assert) {
       await render(
-        <template><Interactive>
-              interactive
-            </Interactive></template>,
+        <template>
+          <Interactive>
+            interactive
+          </Interactive>
+        </template>,
       );
       assert.dom('.hds-badge').doesNotExist();
     });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gts
similarity index 88%
rename from showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gts
index d3cf597e089..47fb0b1bab7 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/separator-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Separator from "@hashicorp/design-system-components/components/hds/dropdown/list-item/separator";
+import Separator from '@hashicorp/design-system-components/components/hds/dropdown/list-item/separator';
 
 module(
   'Integration | Component | hds/dropdown/list-item/separator',
@@ -15,7 +15,7 @@ module(
 
     test('it should render the "list-item/separator" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Separator @text="separator" id="test-list-item-separator" /></template>,
+        <template><Separator id="test-list-item-separator" /></template>,
       );
       assert.dom('#test-list-item-separator').hasTagName('li');
       assert
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/title-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/title-test.gts
similarity index 84%
rename from showcase/tests/integration/components/hds/dropdown/list-item/title-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/title-test.gts
index c9ef50adbe5..32ff52d1958 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/title-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/title-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Title from "@hashicorp/design-system-components/components/hds/dropdown/list-item/title";
+import Title from '@hashicorp/design-system-components/components/hds/dropdown/list-item/title';
 
 module(
   'Integration | Component | hds/dropdown/list-item/title',
@@ -37,7 +37,12 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(<template><Title /></template>);
+      await render(
+        <template>
+          {{! @glint-expect-error - testing invalid component usage }}
+          <Title />
+        </template>,
+      );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
diff --git a/showcase/tests/integration/components/hds/dropdown/toggle/button-test.gjs b/showcase/tests/integration/components/hds/dropdown/toggle/button-test.gts
similarity index 72%
rename from showcase/tests/integration/components/hds/dropdown/toggle/button-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/toggle/button-test.gts
index 6f929f093eb..deee62628ba 100644
--- a/showcase/tests/integration/components/hds/dropdown/toggle/button-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/toggle/button-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Button from "@hashicorp/design-system-components/components/hds/dropdown/toggle/button";
+import Button from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button';
 
 module(
   'Integration | Component | hds/dropdown/toggle/button',
@@ -21,7 +21,9 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Button @text="toggle text" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="toggle text" id="test-toggle-button" />
+        </template>,
       );
       assert.dom('#test-toggle-button').hasClass('hds-dropdown-toggle-button');
     });
@@ -30,7 +32,9 @@ module(
 
     test('it should render the text passed as @text prop', async function (assert) {
       await render(
-        <template><Button @text="toggle text" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="toggle text" id="test-toggle-button" />
+        </template>,
       );
       assert.dom('#test-toggle-button').hasText('toggle text');
     });
@@ -39,7 +43,9 @@ module(
 
     test('it should render the chevron "down" by default', async function (assert) {
       await render(
-        <template><Button @text="text toggle" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="text toggle" id="test-toggle-button" />
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-chevron-down').exists();
     });
@@ -57,7 +63,9 @@ module(
 
     test('it should render a badge if @badge is defined', async function (assert) {
       await render(
-        <template><Button @text="Lorem ipsum" @badge="badge" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="Lorem ipsum" @badge="badge" id="test-toggle-button" />
+        </template>,
       );
       assert
         .dom('#test-toggle-button .hds-dropdown-toggle-button__badge')
@@ -66,7 +74,14 @@ module(
     });
     test('it should render a badge with icon if @badge and @badgeIcon is defined', async function (assert) {
       await render(
-        <template><Button @text="Lorem ipsum" @badge="badge" @badgeIcon="hexagon" id="test-toggle-button" /></template>,
+        <template>
+          <Button
+            @text="Lorem ipsum"
+            @badge="badge"
+            @badgeIcon="hexagon"
+            id="test-toggle-button"
+          />
+        </template>,
       );
       assert
         .dom('#test-toggle-button .hds-dropdown-toggle-button__badge')
@@ -80,7 +95,9 @@ module(
 
     test('it should render a badge count if @count is defined', async function (assert) {
       await render(
-        <template><Button @text="Lorem ipsum" @count="3" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="Lorem ipsum" @count="3" id="test-toggle-button" />
+        </template>,
       );
       assert
         .dom('#test-toggle-button .hds-dropdown-toggle-button__count')
@@ -91,7 +108,9 @@ module(
 
     test('it should render the primary color as the default if no color is declared', async function (assert) {
       await render(
-        <template><Button @text="text toggle" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="text toggle" id="test-toggle-button" />
+        </template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -99,7 +118,13 @@ module(
     });
     test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
       await render(
-        <template><Button @text="text toggle" @color="secondary" id="test-toggle-button" /></template>,
+        <template>
+          <Button
+            @text="text toggle"
+            @color="secondary"
+            id="test-toggle-button"
+          />
+        </template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -110,7 +135,9 @@ module(
 
     test('it should render the medium size as the default if no size is declared', async function (assert) {
       await render(
-        <template><Button @text="text toggle" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="text toggle" id="test-toggle-button" />
+        </template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -118,7 +145,9 @@ module(
     });
     test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
       await render(
-        <template><Button @text="text toggle" @size="small" id="test-toggle-button" /></template>,
+        <template>
+          <Button @text="text toggle" @size="small" id="test-toggle-button" />
+        </template>,
       );
       assert
         .dom('#test-toggle-button')
@@ -129,7 +158,13 @@ module(
 
     test('it should render with the correct aria-expanded attribute on the toggle element', async function (assert) {
       await render(
-        <template><Button @text="text toggle" @isOpen={{true}} id="test-toggle-button" /></template>,
+        <template>
+          <Button
+            @text="text toggle"
+            @isOpen={{true}}
+            id="test-toggle-button"
+          />
+        </template>,
       );
       assert.dom('#test-toggle-button').hasAttribute('aria-expanded', 'true');
     });
@@ -143,7 +178,10 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        <template><Button id="test-toggle-button" /></template>,
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <Button id="test-toggle-button" />
+        </template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
@@ -157,7 +195,10 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        <template><Button @text="text toggle" @color="foo" id="test-toggle-button" /></template>,
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <Button @text="text toggle" @color="foo" id="test-toggle-button" />
+        </template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
@@ -171,7 +212,10 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        <template><Button @text="text toggle" @size="foo" /></template>,
+        <template>
+          {{! @glint-expect-error - assertion testing invalid value }}
+          <Button @text="text toggle" @size="foo" />
+        </template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/form/checkbox/base-test.gjs b/showcase/tests/integration/components/hds/form/checkbox/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/checkbox/base-test.gjs
rename to showcase/tests/integration/components/hds/form/checkbox/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/divider/index-test.gjs b/showcase/tests/integration/components/hds/form/divider/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/divider/index-test.gjs
rename to showcase/tests/integration/components/hds/form/divider/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/error/index-test.gjs b/showcase/tests/integration/components/hds/form/error/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/error/index-test.gjs
rename to showcase/tests/integration/components/hds/form/error/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/file-input/base-test.gjs b/showcase/tests/integration/components/hds/form/file-input/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/file-input/base-test.gjs
rename to showcase/tests/integration/components/hds/form/file-input/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/footer/index-test.gjs b/showcase/tests/integration/components/hds/form/footer/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/footer/index-test.gjs
rename to showcase/tests/integration/components/hds/form/footer/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/header/description/index-test.gjs b/showcase/tests/integration/components/hds/form/header/description/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/header/description/index-test.gjs
rename to showcase/tests/integration/components/hds/form/header/description/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/header/index-test.gjs b/showcase/tests/integration/components/hds/form/header/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/header/index-test.gjs
rename to showcase/tests/integration/components/hds/form/header/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/header/title/index-test.gjs b/showcase/tests/integration/components/hds/form/header/title/index-test.gts
similarity index 79%
rename from showcase/tests/integration/components/hds/form/header/title/index-test.gjs
rename to showcase/tests/integration/components/hds/form/header/title/index-test.gts
index 487a8c0b0ff..a8a7c1feb02 100644
--- a/showcase/tests/integration/components/hds/form/header/title/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/header/title/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import Title from "@hashicorp/design-system-components/components/hds/form/header/title";
+import Title from '@hashicorp/design-system-components/components/hds/form/header/title';
 
 module(
   'Integration | Component | hds/form/header/title/index',
@@ -14,16 +14,16 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(
-        <template><Title id="test-form-header-title" /></template>,
-      );
+      await render(<template><Title id="test-form-header-title" /></template>);
       assert.dom('#test-form-header-title').hasClass('hds-form__header-title');
     });
 
     // CONTENT
     test('it should render the yielded content', async function (assert) {
       await render(
-        <template><Title id="test-form-header-title"><pre>test</pre></Title></template>,
+        <template>
+          <Title id="test-form-header-title"><pre>test</pre></Title>
+        </template>,
       );
       assert.dom('#test-form-header-title > pre').exists().hasText('test');
     });
@@ -32,9 +32,7 @@ module(
 
     // Tag
     test('it should render the component using the default div tag', async function (assert) {
-      await render(
-        <template><Title id="test-form-header-title" /></template>,
-      );
+      await render(<template><Title id="test-form-header-title" /></template>);
       assert.dom('#test-form-header-title').hasTagName('div');
     });
 
@@ -47,9 +45,7 @@ module(
 
     // Size
     test('it should render the component with the default size', async function (assert) {
-      await render(
-        <template><Title id="test-form-header-title" /></template>,
-      );
+      await render(<template><Title id="test-form-header-title" /></template>);
       assert
         .dom('#test-form-header-title')
         .hasClass('hds-typography-display-400');
@@ -75,7 +71,12 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
 
-      await render(<template><Title @tag="section" /></template>);
+      await render(
+        <template>
+          {{! @glint-expect-error - testing invalid component usage }}
+          <Title @tag="section" />
+        </template>,
+      );
 
       assert.throws(function () {
         throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/form/helper-text/index-test.gjs b/showcase/tests/integration/components/hds/form/helper-text/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/helper-text/index-test.gjs
rename to showcase/tests/integration/components/hds/form/helper-text/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/label/index-test.gjs b/showcase/tests/integration/components/hds/form/label/index-test.gts
similarity index 69%
rename from showcase/tests/integration/components/hds/form/label/index-test.gjs
rename to showcase/tests/integration/components/hds/form/label/index-test.gts
index d2b98f1475d..a9ea09fc7c2 100644
--- a/showcase/tests/integration/components/hds/form/label/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/label/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Label from "@hashicorp/design-system-components/components/hds/form/label/index";
+import Label from '@hashicorp/design-system-components/components/hds/form/label/index';
 
 module('Integration | Component | hds/form/label/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,9 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
   });
   test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
     await render(
-      <template><Label @contextualClass="my-class" id="test-form-label" /></template>,
+      <template>
+        <Label @contextualClass="my-class" id="test-form-label" />
+      </template>,
     );
     assert.dom('#test-form-label').hasClass('my-class');
   });
@@ -26,13 +28,18 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders a label with the defined text', async function (assert) {
     await render(
-      <template><Label id="test-form-label">This is the label</Label></template>,
+      <template>
+        <Label id="test-form-label">This is the label</Label>
+      </template>,
     );
     assert.dom('#test-form-label').hasText('This is the label');
   });
   test('it renders a label with the yielded content', async function (assert) {
     await render(
-      <template><Label id="test-form-label"><pre>This is an HTML element inside the label</pre></Label></template>,
+      <template>
+        <Label id="test-form-label"><pre
+          >This is an HTML element inside the label</pre></Label>
+      </template>,
     );
     assert.dom('#test-form-label > pre').exists();
     assert
@@ -42,7 +49,10 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders hidden text if set @hiddenText', async function (assert) {
     await render(
-      <template><Label id="test-form-label" @hiddenText="this is hidden">This is the label</Label></template>,
+      <template>
+        <Label id="test-form-label" @hiddenText="this is hidden">This is the
+          label</Label>
+      </template>,
     );
     assert.dom('#test-form-label').hasText('This is the label this is hidden');
     assert.dom('#test-form-label .sr-only').hasText('this is hidden');
@@ -52,14 +62,18 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it appends an indicator to the label text when user input is required', async function (assert) {
     await render(
-      <template><Label @isRequired={{true}} id="test-form-label">This is the label</Label></template>,
+      <template>
+        <Label @isRequired={{true}} id="test-form-label">This is the label</Label>
+      </template>,
     );
     assert.dom('#test-form-label .hds-form-indicator').exists();
     assert.dom('#test-form-label .hds-form-indicator').hasText('Required');
   });
   test('it appends an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      <template><Label @isOptional={{true}} id="test-form-label">This is the label</Label></template>,
+      <template>
+        <Label @isOptional={{true}} id="test-form-label">This is the label</Label>
+      </template>,
     );
     assert.dom('#test-form-label > .hds-form-indicator').exists();
     assert.dom('#test-form-label .hds-form-indicator').hasText('(Optional)');
@@ -69,14 +83,19 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders a label with the "for" attribute if the @controlId argument is provided', async function (assert) {
     await render(
-      <template><Label @controlId="my-control-id" id="test-form-label">This is the label</Label></template>,
+      <template>
+        <Label @controlId="my-control-id" id="test-form-label">This is the label</Label>
+      </template>,
     );
     assert.dom('#test-form-label').hasAttribute('for', 'my-control-id');
   });
 
   test('it renders a label with the "for" attribute even if the @controlId argument is a boolean', async function (assert) {
     await render(
-      <template><Label @controlId={{true}} id="test-form-label-true">True</Label>
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Label @controlId={{true}} id="test-form-label-true">True</Label>
+        {{! @glint-expect-error - testing invalid component usage }}
         <Label @controlId={{false}} id="test-form-label-false">False</Label>
       </template>,
     );
@@ -88,7 +107,9 @@ module('Integration | Component | hds/form/label/index', function (hooks) {
 
   test('it renders a label with the correct "id" attribute if the @controlId argument is provided', async function (assert) {
     await render(
-      <template><Label @controlId="my-control-id">This is the label</Label></template>,
+      <template>
+        <Label @controlId="my-control-id">This is the label</Label>
+      </template>,
     );
     assert.dom('#label-my-control-id').exists();
   });
diff --git a/showcase/tests/integration/components/hds/form/legend/index-test.gjs b/showcase/tests/integration/components/hds/form/legend/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/legend/index-test.gjs
rename to showcase/tests/integration/components/hds/form/legend/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/masked-input/base-test.gjs b/showcase/tests/integration/components/hds/form/masked-input/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/masked-input/base-test.gjs
rename to showcase/tests/integration/components/hds/form/masked-input/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/radio-card/index-test.gjs b/showcase/tests/integration/components/hds/form/radio-card/index-test.gts
similarity index 78%
rename from showcase/tests/integration/components/hds/form/radio-card/index-test.gjs
rename to showcase/tests/integration/components/hds/form/radio-card/index-test.gts
index 9901e49b2c7..ce12990ca0a 100644
--- a/showcase/tests/integration/components/hds/form/radio-card/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/radio-card/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import RadioCard from "@hashicorp/design-system-components/components/hds/form/radio-card/index";
+import RadioCard from '@hashicorp/design-system-components/components/hds/form/radio-card/index';
 
 module('Integration | Component | hds/form/radio-card/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -23,7 +23,9 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
   // NAME, VALUE
 
   test('it should render the input with the arguments provided', async function (assert) {
-    await render(<template><RadioCard @name="name" @value="value" /></template>);
+    await render(
+      <template><RadioCard @name="name" @value="value" /></template>,
+    );
     assert.dom('input').hasValue('value');
     assert.dom('input').hasAttribute('name', 'name');
   });
@@ -32,7 +34,7 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the arguments provided', async function (assert) {
     await render(
-      <template><RadioCard @checked="checked" @disabled="disabled" /></template>,
+      <template><RadioCard @checked={{true}} @disabled={{true}} /></template>,
     );
     assert.dom('label').hasClass('hds-form-radio-card--checked');
     assert.dom('label').hasClass('hds-form-radio-card--disabled');
@@ -54,13 +56,15 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      <template><RadioCard as |R|>
-            <R.Icon @name="hexagon" />
-            <R.Label>This is the label</R.Label>
-            <R.Badge @text="badge" />
-            <R.Description>This is the description</R.Description>
-            <R.Generic><div class="custom">This is the custom content</div></R.Generic>
-          </RadioCard></template>,
+      <template>
+        <RadioCard as |R|>
+          <R.Icon @name="hexagon" />
+          <R.Label>This is the label</R.Label>
+          <R.Badge @text="badge" />
+          <R.Description>This is the description</R.Description>
+          <R.Generic><div class="custom">This is the custom content</div></R.Generic>
+        </RadioCard>
+      </template>,
     );
     assert.dom('.hds-icon-hexagon').exists();
     assert.dom('.hds-form-radio-card__label').exists();
@@ -86,7 +90,12 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><RadioCard @alignment="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <RadioCard @alignment="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -99,7 +108,12 @@ module('Integration | Component | hds/form/radio-card/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><RadioCard @controlPosition="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <RadioCard @controlPosition="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/form/radio/base-test.gjs b/showcase/tests/integration/components/hds/form/radio/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/radio/base-test.gjs
rename to showcase/tests/integration/components/hds/form/radio/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/section/header/index-test.gjs b/showcase/tests/integration/components/hds/form/section/header/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/section/header/index-test.gjs
rename to showcase/tests/integration/components/hds/form/section/header/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/section/index-test.gjs b/showcase/tests/integration/components/hds/form/section/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/section/index-test.gjs
rename to showcase/tests/integration/components/hds/form/section/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gjs b/showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gjs
rename to showcase/tests/integration/components/hds/form/section/multi-field-group/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gjs b/showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gjs
rename to showcase/tests/integration/components/hds/form/section/multi-field-group/item/index-test.gts
diff --git a/showcase/tests/integration/components/hds/form/select/base-test.gjs b/showcase/tests/integration/components/hds/form/select/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/select/base-test.gjs
rename to showcase/tests/integration/components/hds/form/select/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/textarea/base-test.gjs b/showcase/tests/integration/components/hds/form/textarea/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/textarea/base-test.gjs
rename to showcase/tests/integration/components/hds/form/textarea/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/toggle/base-test.gjs b/showcase/tests/integration/components/hds/form/toggle/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/toggle/base-test.gjs
rename to showcase/tests/integration/components/hds/form/toggle/base-test.gts
diff --git a/showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gjs b/showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gjs
rename to showcase/tests/integration/components/hds/form/visibility-toggle/index-test.gts
diff --git a/showcase/tests/integration/components/hds/icon-tile/index-test.gjs b/showcase/tests/integration/components/hds/icon-tile/index-test.gts
similarity index 75%
rename from showcase/tests/integration/components/hds/icon-tile/index-test.gjs
rename to showcase/tests/integration/components/hds/icon-tile/index-test.gts
index cf48e870e98..61068bff18f 100644
--- a/showcase/tests/integration/components/hds/icon-tile/index-test.gjs
+++ b/showcase/tests/integration/components/hds/icon-tile/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import IconTile from "@hashicorp/design-system-components/components/hds/icon-tile/index";
+import IconTile from '@hashicorp/design-system-components/components/hds/icon-tile/index';
 
 module('Integration | Component | hds/icon-tile/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,14 +16,18 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @icon="dashboard" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile');
   });
 
   // ICON
 
   test('it renders an icon-tile with an icon', async function (assert) {
-    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @icon="dashboard" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile .hds-icon-tile__icon').exists();
     assert
       .dom('div#test-icon-tile .hds-icon-tile__icon svg.hds-icon-dashboard')
@@ -33,7 +37,9 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // LOGO
 
   test('it renders an icon-tile with a logo', async function (assert) {
-    await render(<template><IconTile @logo="boundary" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @logo="boundary" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile .hds-icon-tile__logo').exists();
     assert.dom('div#test-icon-tile .hds-icon-tile__logo svg').exists();
   });
@@ -41,22 +47,30 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // COLOR
 
   test('it should render the neutral color as the default if no color is declared and is an icon', async function (assert) {
-    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @icon="dashboard" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-neutral');
   });
   test('it should render the correct CSS color class if the @color prop is declared and is an icon', async function (assert) {
     await render(
-      <template><IconTile @icon="dashboard" @color="boundary" id="test-icon-tile" /></template>,
+      <template>
+        <IconTile @icon="dashboard" @color="boundary" id="test-icon-tile" />
+      </template>,
     );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-boundary');
   });
   test('it should render the product color if is a logo', async function (assert) {
-    await render(<template><IconTile @logo="boundary" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @logo="boundary" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-boundary');
   });
   test('it should render the product color even if the @color prop is declared and is a logo', async function (assert) {
     await render(
-      <template><IconTile @logo="boundary" @color="waypoint" id="test-icon-tile" /></template>,
+      <template>
+        <IconTile @logo="boundary" @color="waypoint" id="test-icon-tile" />
+      </template>,
     );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--color-boundary');
   });
@@ -64,12 +78,16 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // SIZE
 
   test('it should render the medium size if no size is declared', async function (assert) {
-    await render(<template><IconTile @icon="dashboard" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @icon="dashboard" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      <template><IconTile @icon="dashboard" id="test-icon-tile" @size="small" /></template>,
+      <template>
+        <IconTile @icon="dashboard" id="test-icon-tile" @size="small" />
+      </template>,
     );
     assert.dom('div#test-icon-tile').hasClass('hds-icon-tile--size-small');
   });
@@ -78,7 +96,9 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
 
   test('it should render the secondary icon if the @iconSecondary prop is declared', async function (assert) {
     await render(
-      <template><IconTile @icon="dashboard" @iconSecondary="plus" id="test-icon-tile" /></template>,
+      <template>
+        <IconTile @icon="dashboard" @iconSecondary="plus" id="test-icon-tile" />
+      </template>,
     );
     assert.dom('div#test-icon-tile .hds-icon-tile__extra').exists();
     assert.dom('div#test-icon-tile .hds-icon-tile__extra-icon').exists();
@@ -90,7 +110,9 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
   // A11Y
 
   test('it should have aria-hidden set to true', async function (assert) {
-    await render(<template><IconTile @logo="boundary" id="test-icon-tile" /></template>);
+    await render(
+      <template><IconTile @logo="boundary" id="test-icon-tile" /></template>,
+    );
     assert.dom('div#test-icon-tile').hasAria('hidden', 'true');
   });
 
@@ -103,7 +125,9 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><IconTile @icon="dashboard" @logo="boundary" /></template>);
+    await render(
+      <template><IconTile @icon="dashboard" @logo="boundary" /></template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -127,7 +151,12 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><IconTile @logo="test" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <IconTile @logo="test" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/icon/index-test.gjs b/showcase/tests/integration/components/hds/icon/index-test.gts
similarity index 78%
rename from showcase/tests/integration/components/hds/icon/index-test.gjs
rename to showcase/tests/integration/components/hds/icon/index-test.gts
index 6cb70b63e12..34892bb410c 100644
--- a/showcase/tests/integration/components/hds/icon/index-test.gjs
+++ b/showcase/tests/integration/components/hds/icon/index-test.gts
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import Icon from "@hashicorp/design-system-components/components/hds/icon/index";
+import style from 'ember-style-modifier';
+import Icon from '@hashicorp/design-system-components/components/hds/icon/index';
 
 module('Integration | Component | hds-icon', function (hooks) {
   setupRenderingTest(hooks);
@@ -36,7 +37,9 @@ module('Integration | Component | hds-icon', function (hooks) {
   });
   test('it sets the width/height to 100% when the "stretched" option is set to true', async function (assert) {
     await render(
-      <template><Icon @name="activity" @size="24" @stretched={{true}} /></template>,
+      <template>
+        <Icon @name="activity" @size="24" @stretched={{true}} />
+      </template>,
     );
     assert
       .dom('svg.hds-icon.hds-icon-activity')
@@ -51,7 +54,9 @@ module('Integration | Component | hds-icon', function (hooks) {
     assert.dom('svg.hds-icon').doesNotHaveClass('hds-icon--is-inline');
   });
   test('it does have the "hds-icon--is-inline" class if the `@isInline` option is set to `true`', async function (assert) {
-    await render(<template><Icon @name="activity" @isInline={{true}} /></template>);
+    await render(
+      <template><Icon @name="activity" @isInline={{true}} /></template>,
+    );
     assert.dom('svg.hds-icon').hasClass('hds-icon--is-inline');
   });
 
@@ -62,26 +67,37 @@ module('Integration | Component | hds-icon', function (hooks) {
     assert.dom(`svg.hds-icon`).hasAttribute('fill', 'currentColor');
   });
   test('it should render the correct CSS color class if the @color prop is declared using a pre-defined color', async function (assert) {
-    await render(<template><Icon @name="alert-circle" @color="highlight" /></template>);
+    await render(
+      <template><Icon @name="alert-circle" @color="highlight" /></template>,
+    );
     // notice: we use CSS helper classes for the color definitions
     assert.dom(`svg.hds-icon`).hasClass('hds-foreground-highlight');
     assert.dom(`svg.hds-icon`).hasAttribute('fill', 'currentColor');
   });
   test('it should render the correct style if the @color prop is declared as custom CSS property color', async function (assert) {
     await render(
-      <template><Icon @name="alert-circle" @color="var(--doc-color-feedback-critical-100)" /></template>,
+      <template>
+        <Icon
+          @name="alert-circle"
+          @color="var(--doc-color-feedback-critical-100)"
+        />
+      </template>,
     );
     assert
       .dom(`svg.hds-icon`)
       .hasAttribute('fill', 'var(--doc-color-feedback-critical-100)');
   });
   test('it should render the correct style if the @color prop is declared as custom HEX color', async function (assert) {
-    await render(<template><Icon @name="alert-circle" @color="#FF0000" /></template>);
+    await render(
+      <template><Icon @name="alert-circle" @color="#FF0000" /></template>,
+    );
     assert.dom(`svg.hds-icon`).hasAttribute('fill', '#FF0000');
   });
   test('the fill color should be able to be inherited from parent', async function (assert) {
     await render(
-      <template><div style="color:blue;"><Icon @name="alert-circle" /></div></template>,
+      <template>
+        <div {{style color="blue"}}><Icon @name="alert-circle" /></div>
+      </template>,
     );
     assert.dom(`svg.hds-icon`).hasStyle({
       fill: 'rgb(0, 0, 255)',
@@ -91,7 +107,9 @@ module('Integration | Component | hds-icon', function (hooks) {
   // A11Y
 
   test('it renders the title if one is defined', async function (assert) {
-    await render(<template><Icon @name="activity" @title="try to avoid" /></template>);
+    await render(
+      <template><Icon @name="activity" @title="try to avoid" /></template>,
+    );
     assert.dom('title').containsText('try to avoid');
   });
   test('it has aria-hidden set to true', async function (assert) {
@@ -99,11 +117,15 @@ module('Integration | Component | hds-icon', function (hooks) {
     assert.dom('svg.hds-icon.hds-icon-activity').hasAria('hidden', 'true');
   });
   test('it has aria-hidden set to false if a title is defined', async function (assert) {
-    await render(<template><Icon @name="activity" @title="try to avoid" /></template>);
+    await render(
+      <template><Icon @name="activity" @title="try to avoid" /></template>,
+    );
     assert.dom('svg.hds-icon.hds-icon-activity').hasAria('hidden', 'false');
   });
   test('it has aria-labelledby if a title exists', async function (assert) {
-    await render(<template><Icon @name="activity" @title="try to avoid" /></template>);
+    await render(
+      <template><Icon @name="activity" @title="try to avoid" /></template>,
+    );
     assert
       .dom('svg.hds-icon.hds-icon-activity')
       .hasAttribute('aria-labelledby');
@@ -115,7 +137,9 @@ module('Integration | Component | hds-icon', function (hooks) {
       .doesNotHaveAttribute('aria-labelledby');
   });
   test('it has a g element with role of presentation if a title exists', async function (assert) {
-    await render(<template><Icon @name="activity" @title="computer says no" /></template>);
+    await render(
+      <template><Icon @name="activity" @title="computer says no" /></template>,
+    );
     assert.dom('svg > g').hasAttribute('role');
   });
 
@@ -134,7 +158,12 @@ module('Integration | Component | hds-icon', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Icon /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Icon />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -145,7 +174,12 @@ module('Integration | Component | hds-icon', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Icon @name="abc" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Icon @name="abc" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/layout/flex/index-test.gjs b/showcase/tests/integration/components/hds/layout/flex/index-test.gts
similarity index 82%
rename from showcase/tests/integration/components/hds/layout/flex/index-test.gjs
rename to showcase/tests/integration/components/hds/layout/flex/index-test.gts
index 4822ab92313..eb9724cfa55 100644
--- a/showcase/tests/integration/components/hds/layout/flex/index-test.gjs
+++ b/showcase/tests/integration/components/hds/layout/flex/index-test.gts
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Flex from "@hashicorp/design-system-components/components/hds/layout/flex/index";
-import { array } from "@ember/helper";
+import Flex from '@hashicorp/design-system-components/components/hds/layout/flex/index';
+import { array } from '@ember/helper';
 
 module('Integration | Component | hds/layout/flex/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -25,13 +25,18 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      <template><Flex id="test-layout-flex"><pre>test</pre></Flex></template>,
+      <template>
+        <Flex id="test-layout-flex"><pre>test</pre></Flex>
+      </template>,
     );
     assert.dom('#test-layout-flex > pre').exists().hasText('test');
   });
   test('it should render the `Item` yielded contextual component', async function (assert) {
     await render(
-      <template><Flex id="test-layout-flex" as |LF|><LF.Item><pre>test</pre></LF.Item></Flex></template>,
+      <template>
+        <Flex id="test-layout-flex" as |LF|><LF.Item><pre
+            >test</pre></LF.Item></Flex>
+      </template>,
     );
     assert
       .dom('#test-layout-flex > .hds-layout-flex-item > pre')
@@ -80,7 +85,15 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   });
   test('it should render the correct CSS classes if the @justify/@align/@wrap/@isInline props are declared', async function (assert) {
     await render(
-      <template><Flex id="test-layout-flex" @justify="space-between" @align="stretch" @wrap={{true}} @isInline={{true}} /></template>,
+      <template>
+        <Flex
+          id="test-layout-flex"
+          @justify="space-between"
+          @align="stretch"
+          @wrap={{true}}
+          @isInline={{true}}
+        />
+      </template>,
     );
     assert
       .dom('#test-layout-flex')
@@ -108,7 +121,9 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
   });
   test('it should render the correct CSS class if the @gap prop is declared as a couple of values', async function (assert) {
     await render(
-      <template><Flex id="test-layout-flex" @gap={{array "4" "48"}} /></template>,
+      <template>
+        <Flex id="test-layout-flex" @gap={{array "4" "48"}} />
+      </template>,
     );
     assert
       .dom('#test-layout-flex')
@@ -125,7 +140,12 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Flex @direction="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Flex @direction="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -137,7 +157,12 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Flex @justify="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Flex @justify="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -149,7 +174,12 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Flex @align="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Flex @align="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -161,7 +191,12 @@ module('Integration | Component | hds/layout/flex/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Flex @gap={{array 4 "foo"}} /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Flex @gap={{array 4 "foo"}} />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/layout/flex/item-test.gjs b/showcase/tests/integration/components/hds/layout/flex/item-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/layout/flex/item-test.gjs
rename to showcase/tests/integration/components/hds/layout/flex/item-test.gts
diff --git a/showcase/tests/integration/components/hds/link/inline-test.gjs b/showcase/tests/integration/components/hds/link/inline-test.gts
similarity index 73%
rename from showcase/tests/integration/components/hds/link/inline-test.gjs
rename to showcase/tests/integration/components/hds/link/inline-test.gts
index 6ff78f83f28..0dbf85687da 100644
--- a/showcase/tests/integration/components/hds/link/inline-test.gjs
+++ b/showcase/tests/integration/components/hds/link/inline-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Inline from "@hashicorp/design-system-components/components/hds/link/inline";
+import Inline from '@hashicorp/design-system-components/components/hds/link/inline';
 
 module('Integration | Component | hds/link/inline', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,9 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Inline @href="/" id="test-link">watch video</Inline></template>,
+      <template>
+        <Inline @href="/" id="test-link">watch video</Inline>
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-inline');
   });
@@ -25,14 +27,23 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should render the icon in the trailing position by default', async function (assert) {
     await render(
-      <template><Inline @href="/" @icon="film" id="test-link">watch video</Inline></template>,
+      <template>
+        <Inline @href="/" @icon="film" id="test-link">watch video</Inline>
+      </template>,
     );
     assert.dom('#test-link .hds-link-inline__icon').exists();
     assert.dom('#test-link ').hasClass('hds-link-inline--icon-trailing');
   });
   test('it should render the icon in the leading position if @iconPosition is set to leading', async function (assert) {
     await render(
-      <template><Inline @href="/" @icon="film" @iconPosition="leading" id="test-link">watch video</Inline></template>,
+      <template>
+        <Inline
+          @href="/"
+          @icon="film"
+          @iconPosition="leading"
+          id="test-link"
+        >watch video</Inline>
+      </template>,
     );
     assert.dom('#test-link ').hasClass('hds-link-inline--icon-leading');
   });
@@ -41,13 +52,17 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should render the primary color as the default if no @color prop is declared', async function (assert) {
     await render(
-      <template><Inline @href="/" id="test-link">watch video</Inline></template>,
+      <template>
+        <Inline @href="/" id="test-link">watch video</Inline>
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-inline--color-primary');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      <template><Inline @href="/" @color="secondary" id="test-link">watch video</Inline></template>,
+      <template>
+        <Inline @href="/" @color="secondary" id="test-link">watch video</Inline>
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-inline--color-secondary');
   });
@@ -56,7 +71,9 @@ module('Integration | Component | hds/link/inline', function (hooks) {
 
   test('it should yield the children of the <a> element', async function (assert) {
     await render(
-      <template><Inline @href="/" id="test-link"><span>test</span></Inline></template>,
+      <template>
+        <Inline @href="/" id="test-link"><span>test</span></Inline>
+      </template>,
     );
     assert.dom('#test-link > span').exists();
     assert.dom('#test-link > span').hasText('test');
@@ -71,14 +88,18 @@ module('Integration | Component | hds/link/inline', function (hooks) {
   });
   test('it should render a <a> link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) {
     await render(
-      <template><Inline @href="/" id="test-link" target="test-target" rel="test-rel" /></template>,
+      <template>
+        <Inline @href="/" id="test-link" target="test-target" rel="test-rel" />
+      </template>,
     );
     assert.dom('#test-link').hasAttribute('target', 'test-target');
     assert.dom('#test-link').hasAttribute('rel', 'test-rel');
   });
   test('it should render a <a> link withhout "target" and "rel" attributes if @isHrefExternal is false', async function (assert) {
     await render(
-      <template><Inline @href="/" @isHrefExternal={{false}} id="test-link" /></template>,
+      <template>
+        <Inline @href="/" @isHrefExternal={{false}} id="test-link" />
+      </template>,
     );
     assert.dom('#test-link').doesNotHaveAttribute('target');
     assert.dom('#test-link').doesNotHaveAttribute('rel');
@@ -93,7 +114,11 @@ module('Integration | Component | hds/link/inline', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Inline>watch video</Inline></template>);
+    await render(
+      <template>
+        <Inline>watch video</Inline>
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -106,7 +131,10 @@ module('Integration | Component | hds/link/inline', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Inline @icon="film" @text="watch video" @href="/" @color="foo" /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Inline @icon="film" @text="watch video" @href="/" @color="foo" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/link/standalone-test.gjs b/showcase/tests/integration/components/hds/link/standalone-test.gts
similarity index 65%
rename from showcase/tests/integration/components/hds/link/standalone-test.gjs
rename to showcase/tests/integration/components/hds/link/standalone-test.gts
index 833313d1594..a2b3eee6e09 100644
--- a/showcase/tests/integration/components/hds/link/standalone-test.gjs
+++ b/showcase/tests/integration/components/hds/link/standalone-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Standalone from "@hashicorp/design-system-components/components/hds/link/standalone";
+import Standalone from '@hashicorp/design-system-components/components/hds/link/standalone';
 
 module('Integration | Component | hds/link/standalone', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,9 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
+      <template>
+        <Standalone @text="watch video" @href="/" @icon="film" id="test-link" />
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone');
   });
@@ -25,13 +27,23 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the medium size if no size is declared', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
+      <template>
+        <Standalone @text="watch video" @href="/" @icon="film" id="test-link" />
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" @size="small" /></template>,
+      <template>
+        <Standalone
+          @text="watch video"
+          @href="/"
+          @icon="film"
+          id="test-link"
+          @size="small"
+        />
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--size-small');
   });
@@ -40,13 +52,23 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the primary color as the default if no color is declared', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
+      <template>
+        <Standalone @text="watch video" @href="/" @icon="film" id="test-link" />
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--color-primary');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" @color="secondary" id="test-link" /></template>,
+      <template>
+        <Standalone
+          @text="watch video"
+          @href="/"
+          @icon="film"
+          @color="secondary"
+          id="test-link"
+        />
+      </template>,
     );
     assert.dom('#test-link').hasClass('hds-link-standalone--color-secondary');
   });
@@ -55,13 +77,23 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render the icon in the leading position by default', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
+      <template>
+        <Standalone @text="watch video" @href="/" @icon="film" id="test-link" />
+      </template>,
     );
     assert.dom('.hds-link-standalone__icon').matchesSelector(':first-child');
   });
   test('it should render the icon in the trailing position if @iconPosition is set to trailing', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" @iconPosition="trailing" id="test-link" /></template>,
+      <template>
+        <Standalone
+          @text="watch video"
+          @href="/"
+          @icon="film"
+          @iconPosition="trailing"
+          id="test-link"
+        />
+      </template>,
     );
     assert.dom('.hds-link-standalone__icon').matchesSelector(':last-child');
   });
@@ -70,7 +102,14 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it renders a link with the defined text', async function (assert) {
     await render(
-      <template><Standalone @text="Copy to clipboard" @href="/" @icon="film" id="test-link" /></template>,
+      <template>
+        <Standalone
+          @text="Copy to clipboard"
+          @href="/"
+          @icon="film"
+          id="test-link"
+        />
+      </template>,
     );
     assert.dom('#test-link').hasText('Copy to clipboard');
   });
@@ -79,21 +118,40 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
 
   test('it should render a <a> link with the right "target" and "rel" attributes if @href is passed', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" /></template>,
+      <template>
+        <Standalone @text="watch video" @href="/" @icon="film" id="test-link" />
+      </template>,
     );
     assert.dom('#test-link').hasAttribute('target', '_blank');
     assert.dom('#test-link').hasAttribute('rel', 'noopener noreferrer');
   });
   test('it should render a <a> link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" id="test-link" target="test-target" rel="test-rel" /></template>,
+      <template>
+        <Standalone
+          @text="watch video"
+          @href="/"
+          @icon="film"
+          id="test-link"
+          target="test-target"
+          rel="test-rel"
+        />
+      </template>,
     );
     assert.dom('#test-link').hasAttribute('target', 'test-target');
     assert.dom('#test-link').hasAttribute('rel', 'test-rel');
   });
   test('it should render a <a> link without "target" and "rel" attributes if @isHrefExternal is false', async function (assert) {
     await render(
-      <template><Standalone @text="watch video" @href="/" @icon="film" @isHrefExternal={{false}} id="test-link" /></template>,
+      <template>
+        <Standalone
+          @text="watch video"
+          @href="/"
+          @icon="film"
+          @isHrefExternal={{false}}
+          id="test-link"
+        />
+      </template>,
     );
     assert.dom('#test-link').doesNotHaveAttribute('target');
     assert.dom('#test-link').doesNotHaveAttribute('rel');
@@ -108,7 +166,12 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Standalone @text="watch video" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Standalone @text="watch video" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -120,7 +183,12 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Standalone @icon="film" @href="/" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Standalone @icon="film" @href="/" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -132,7 +200,12 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Standalone @href="/" @text="watch video" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Standalone @href="/" @text="watch video" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -145,7 +218,15 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Standalone @icon="film" @href="/" @text="watch video" @iconPosition="after" /></template>,
+      <template>
+        <Standalone
+          @icon="film"
+          @href="/"
+          @text="watch video"
+          {{! @glint-expect-error - testing invalid component usage }}
+          @iconPosition="after"
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -159,7 +240,10 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Standalone @icon="film" @text="watch video" @href="/" @size="tiny" /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Standalone @icon="film" @text="watch video" @href="/" @size="tiny" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -173,7 +257,10 @@ module('Integration | Component | hds/link/standalone', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Standalone @icon="film" @text="watch video" @href="/" @color="foo" /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Standalone @icon="film" @text="watch video" @href="/" @color="foo" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/page-header/index-test.gjs b/showcase/tests/integration/components/hds/page-header/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/page-header/index-test.gjs
rename to showcase/tests/integration/components/hds/page-header/index-test.gts
diff --git a/showcase/tests/integration/components/hds/pagination/info-test.gjs b/showcase/tests/integration/components/hds/pagination/info-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/pagination/info-test.gjs
rename to showcase/tests/integration/components/hds/pagination/info-test.gts
diff --git a/showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gjs b/showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gjs
rename to showcase/tests/integration/components/hds/pagination/nav/ellipsis-test.gts
diff --git a/showcase/tests/integration/components/hds/segmented-group/index-test.gjs b/showcase/tests/integration/components/hds/segmented-group/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/segmented-group/index-test.gjs
rename to showcase/tests/integration/components/hds/segmented-group/index-test.gts
diff --git a/showcase/tests/integration/components/hds/separator/index-test.gjs b/showcase/tests/integration/components/hds/separator/index-test.gts
similarity index 81%
rename from showcase/tests/integration/components/hds/separator/index-test.gjs
rename to showcase/tests/integration/components/hds/separator/index-test.gts
index 2b9579e2d19..5f671e9634c 100644
--- a/showcase/tests/integration/components/hds/separator/index-test.gjs
+++ b/showcase/tests/integration/components/hds/separator/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Separator from "@hashicorp/design-system-components/components/hds/separator/index";
+import Separator from '@hashicorp/design-system-components/components/hds/separator/index';
 
 module('Integration | Component | hds/separator/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -28,7 +28,9 @@ module('Integration | Component | hds/separator/index', function (hooks) {
   });
 
   test('it should render the component with CSS classes that reflect the arguments provided', async function (assert) {
-    await render(<template><Separator @spacing="0" id="test-separator" /></template>);
+    await render(
+      <template><Separator @spacing="0" id="test-separator" /></template>,
+    );
     assert.dom('#test-separator').hasClass('hds-separator--spacing-0');
   });
 
@@ -41,7 +43,12 @@ module('Integration | Component | hds/separator/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Separator @spacing="foo" id="test-separator" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Separator @spacing="foo" id="test-separator" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/side-nav/base-test.gjs b/showcase/tests/integration/components/hds/side-nav/base-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/side-nav/base-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/base-test.gts
diff --git a/showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs b/showcase/tests/integration/components/hds/side-nav/header/home-link-test.gts
similarity index 66%
rename from showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/header/home-link-test.gts
index db3b7418036..ef3c5330274 100644
--- a/showcase/tests/integration/components/hds/side-nav/header/home-link-test.gjs
+++ b/showcase/tests/integration/components/hds/side-nav/header/home-link-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import HomeLink from "@hashicorp/design-system-components/components/hds/side-nav/header/home-link";
+import HomeLink from '@hashicorp/design-system-components/components/hds/side-nav/header/home-link';
 
 module('Integration | Component | hds/side-nav/home-link', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,13 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" id="test-home-link" /></template>,
+      <template>
+        <HomeLink
+          @icon="hashicorp"
+          @ariaLabel="Hashicorp"
+          id="test-home-link"
+        />
+      </template>,
     );
     assert.dom('#test-home-link').hasClass('hds-side-nav__home-link');
   });
@@ -26,7 +32,14 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      <template><HomeLink @icon="hashicorp" @ariaLabel="Hashicorp" @href="https://www.hashicorp.com/" id="test-home-link" /></template>,
+      <template>
+        <HomeLink
+          @icon="hashicorp"
+          @ariaLabel="Hashicorp"
+          @href="https://www.hashicorp.com/"
+          id="test-home-link"
+        />
+      </template>,
     );
     assert.dom('.hds-icon-hashicorp').exists();
     assert
@@ -37,7 +50,14 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
 
   test('it renders the logo with a custom passed in color', async function (assert) {
     await render(
-      <template><HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" /></template>,
+      <template>
+        <HomeLink
+          @icon="boundary"
+          @ariaLabel="Boundary"
+          @color="var(--token-color-boundary-brand)"
+          @href="#"
+        />
+      </template>,
     );
     assert
       .dom('.hds-icon-boundary')
@@ -53,7 +73,12 @@ module('Integration | Component | hds/side-nav/home-link', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><HomeLink @icon="hashicorp" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <HomeLink @icon="hashicorp" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs b/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gts
similarity index 63%
rename from showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gts
index b6ef4b190a4..efa59911345 100644
--- a/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gjs
+++ b/showcase/tests/integration/components/hds/side-nav/header/icon-button-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import IconButton from "@hashicorp/design-system-components/components/hds/side-nav/header/icon-button";
+import IconButton from '@hashicorp/design-system-components/components/hds/side-nav/header/icon-button';
 
 module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,13 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-icon-button" /></template>,
+      <template>
+        <IconButton
+          @icon="search"
+          @ariaLabel="Search"
+          id="test-side-nav-icon-button"
+        />
+      </template>,
     );
     assert
       .dom('#test-side-nav-icon-button')
@@ -28,7 +34,13 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it renders the passed in args', async function (assert) {
     await render(
-      <template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" /></template>,
+      <template>
+        <IconButton
+          @icon="search"
+          @ariaLabel="Search"
+          id="test-side-nav-button"
+        />
+      </template>,
     );
     assert.dom('.hds-icon-search').exists();
   });
@@ -37,14 +49,27 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
     await render(
-      <template><IconButton @icon="search" @ariaLabel="Search" id="test-side-nav-button" /></template>,
+      <template>
+        <IconButton
+          @icon="search"
+          @ariaLabel="Search"
+          id="test-side-nav-button"
+        />
+      </template>,
     );
     assert.dom('#test-side-nav-button').hasTagName('button');
   });
 
   test('it should render a <a> link if @href is passed', async function (assert) {
     await render(
-      <template><IconButton @icon="search" @ariaLabel="Search" @href="https://www.hashicorp.com/" id="test-side-nav-button" /></template>,
+      <template>
+        <IconButton
+          @icon="search"
+          @ariaLabel="Search"
+          @href="https://www.hashicorp.com/"
+          id="test-side-nav-button"
+        />
+      </template>,
     );
     assert
       .dom('#test-side-nav-button')
@@ -54,7 +79,14 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
 
   test('it should render a <a> link if @route is passed', async function (assert) {
     await render(
-      <template><IconButton @icon="search" @ariaLabel="Search" @route="page-utilities.interactive" id="test-side-nav-button" /></template>,
+      <template>
+        <IconButton
+          @icon="search"
+          @ariaLabel="Search"
+          @route="page-utilities.interactive"
+          id="test-side-nav-button"
+        />
+      </template>,
     );
     assert
       .dom('#test-side-nav-button')
@@ -71,7 +103,12 @@ module('Integration | Component | hds/side-nav/icon-button', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><IconButton @icon="search" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <IconButton @icon="search" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/side-nav/header/index-test.gjs b/showcase/tests/integration/components/hds/side-nav/header/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/side-nav/header/index-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/header/index-test.gts
diff --git a/showcase/tests/integration/components/hds/side-nav/list/back-link-test.gjs b/showcase/tests/integration/components/hds/side-nav/list/back-link-test.gts
similarity index 72%
rename from showcase/tests/integration/components/hds/side-nav/list/back-link-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/list/back-link-test.gts
index 685605d46ee..3a63e5e7dc1 100644
--- a/showcase/tests/integration/components/hds/side-nav/list/back-link-test.gjs
+++ b/showcase/tests/integration/components/hds/side-nav/list/back-link-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import BackLink from "@hashicorp/design-system-components/components/hds/side-nav/list/back-link";
+import BackLink from '@hashicorp/design-system-components/components/hds/side-nav/list/back-link';
 
 module(
   'Integration | Component | hds/side-nav/list/back-link',
@@ -17,7 +17,12 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><BackLink id="test-side-nav-list-item-link-back-link" /></template>,
+        <template>
+          <BackLink
+            @text="Back to parent page"
+            id="test-side-nav-list-item-link-back-link"
+          />
+        </template>,
       );
       assert
         .dom('#test-side-nav-list-item-link-back-link')
@@ -39,7 +44,9 @@ module(
     // GENERATED ELEMENTS
 
     test('it should render a <button> if no @href or @route is passed (default)', async function (assert) {
-      await render(<template><BackLink /></template>);
+      await render(
+        <template><BackLink @text="Back to parent page" /></template>,
+      );
       assert
         .dom('.hds-side-nav__list-item-link--back-link')
         .hasTagName('button');
@@ -47,7 +54,12 @@ module(
 
     test('it should render a <a> link if @href is passed', async function (assert) {
       await render(
-        <template><BackLink @href="https://www.hashicorp.com/" /></template>,
+        <template>
+          <BackLink
+            @text="Back to parent page"
+            @href="https://www.hashicorp.com/"
+          />
+        </template>,
       );
       assert
         .dom('.hds-side-nav__list-item-link--back-link')
@@ -57,7 +69,12 @@ module(
 
     test('it should render a <a> link if @route is passed', async function (assert) {
       await render(
-        <template><BackLink @route="page-utilities.interactive" /></template>,
+        <template>
+          <BackLink
+            @text="Back to parent page"
+            @route="page-utilities.interactive"
+          />
+        </template>,
       );
       assert
         .dom('.hds-side-nav__list-item-link--back-link')
diff --git a/showcase/tests/integration/components/hds/side-nav/list/index-test.gjs b/showcase/tests/integration/components/hds/side-nav/list/index-test.gts
similarity index 69%
rename from showcase/tests/integration/components/hds/side-nav/list/index-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/list/index-test.gts
index b558b86a0d8..93dca3b3018 100644
--- a/showcase/tests/integration/components/hds/side-nav/list/index-test.gjs
+++ b/showcase/tests/integration/components/hds/side-nav/list/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import List from "@hashicorp/design-system-components/components/hds/side-nav/list/index";
+import List from '@hashicorp/design-system-components/components/hds/side-nav/list/index';
 
 module('Integration | Component | hds/side-nav/list/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -23,14 +23,19 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
   // Test Content / Args
 
   test('it renders passed in yielded content', async function (assert) {
-    await render(<template>
-      <List as |L|>
-        <L.Item id="test-side-nav-list-content-item" />
-        <L.BackLink id="test-side-nav-list-content-backlink" />
-        <L.Title id="test-side-nav-list-content-title" />
-        <L.Link id="test-side-nav-list-content-link" />
-      </List>
-    </template>);
+    await render(
+      <template>
+        <List as |L|>
+          <L.Item id="test-side-nav-list-content-item" />
+          <L.BackLink
+            @text="Back to parent page"
+            id="test-side-nav-list-content-backlink"
+          />
+          <L.Title id="test-side-nav-list-content-title" />
+          <L.Link id="test-side-nav-list-content-link" />
+        </List>
+      </template>,
+    );
     assert.dom('#test-side-nav-list-content-item').exists();
     assert.dom('#test-side-nav-list-content-backlink').exists();
     assert.dom('#test-side-nav-list-content-title').exists();
@@ -39,9 +44,7 @@ module('Integration | Component | hds/side-nav/list/index', function (hooks) {
 
   // Accessibilty feature
   test('it has the role of "list" role so Safari will identify it correctly as a list since the list-style is changed in the CSS', async function (assert) {
-    await render(<template>
-      <List />
-    </template>);
+    await render(<template><List /></template>);
     assert.dom('.hds-side-nav__list').hasAttribute('role', 'list');
   });
 });
diff --git a/showcase/tests/integration/components/hds/side-nav/list/item-test.gjs b/showcase/tests/integration/components/hds/side-nav/list/item-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/side-nav/list/item-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/list/item-test.gts
diff --git a/showcase/tests/integration/components/hds/side-nav/list/link-test.gjs b/showcase/tests/integration/components/hds/side-nav/list/link-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/side-nav/list/link-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/list/link-test.gts
diff --git a/showcase/tests/integration/components/hds/side-nav/portal/index-test.gjs b/showcase/tests/integration/components/hds/side-nav/portal/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/side-nav/portal/index-test.gjs
rename to showcase/tests/integration/components/hds/side-nav/portal/index-test.gts
diff --git a/showcase/tests/integration/components/hds/stepper/list-step-test.gjs b/showcase/tests/integration/components/hds/stepper/list-step-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/stepper/list-step-test.gjs
rename to showcase/tests/integration/components/hds/stepper/list-step-test.gts
index 40be946fb4b..62d7c7b2329 100644
--- a/showcase/tests/integration/components/hds/stepper/list-step-test.gjs
+++ b/showcase/tests/integration/components/hds/stepper/list-step-test.gts
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Step from "@hashicorp/design-system-components/components/hds/stepper/list/step";
-import List from "@hashicorp/design-system-components/components/hds/stepper/list/index";
+import Step from '@hashicorp/design-system-components/components/hds/stepper/list/step';
+import List from '@hashicorp/design-system-components/components/hds/stepper/list/index';
 
 module('Integration | Component | hds/stepper/list/step', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,10 +24,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it sets the status to incomplete when the @status argument is not provided', async function (assert) {
     await render(
       <template>
-          <Step>
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step>
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -41,10 +41,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it sets the status to complete when the @status argument is provided', async function (assert) {
     await render(
       <template>
-          <Step @status="complete">
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step @status="complete">
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -58,10 +58,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it sets the status to progress when the @status argument is provided', async function (assert) {
     await render(
       <template>
-          <Step @status="progress">
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step @status="progress">
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -75,10 +75,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it sets the status to processing when the @status argument is provided', async function (assert) {
     await render(
       <template>
-          <Step @status="processing">
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step @status="processing">
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert
       .dom('.hds-stepper-list__step')
@@ -94,10 +94,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it renders a div when the @titleTag argument is not provided', async function (assert) {
     await render(
       <template>
-          <Step>
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step>
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert.dom('.hds-stepper-list__step-title').hasTagName('div');
   });
@@ -105,10 +105,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
     await render(
       <template>
-          <Step @titleTag="h2">
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step @titleTag="h2">
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert.dom('.hds-stepper-list__step-title').hasTagName('h2');
   });
@@ -119,10 +119,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
     // Note: Testing this use case requires wrapping the element in its parent element
     await render(
       <template>
-          <List as |S|>
-            <S.Step />
-          </List>
-        </template>,
+        <List @ariaLabel="test list" as |S|>
+          <S.Step />
+        </List>
+      </template>,
     );
     assert.dom('.hds-stepper-indicator-step__text').hasText('1');
   });
@@ -132,10 +132,10 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   test('it renders the title when the title contextual component block is used', async function (assert) {
     await render(
       <template>
-          <Step>
-            <:title>Test</:title>
-          </Step>
-        </template>,
+        <Step>
+          <:title>Test</:title>
+        </Step>
+      </template>,
     );
     assert.dom('.hds-stepper-list__step-title').containsText('Test');
   });
@@ -143,17 +143,17 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   // DESCRIPTION
 
   test('it does not render the description when the description contextual component block is not used', async function (assert) {
-    await render(<template><Step></Step></template>);
+    await render(<template><Step /></template>);
     assert.dom('.hds-stepper-list__step-description').doesNotExist();
   });
 
   test('it renders the description when the description contextual component block is used', async function (assert) {
     await render(
       <template>
-          <Step>
-            <:description>Test</:description>
-          </Step>
-        </template>,
+        <Step>
+          <:description>Test</:description>
+        </Step>
+      </template>,
     );
     assert.dom('.hds-stepper-list__step-description').exists();
     assert.dom('.hds-stepper-list__step-description').containsText('Test');
@@ -162,17 +162,17 @@ module('Integration | Component | hds/stepper/list/step', function (hooks) {
   // CONTENT
 
   test('it does not render the content when the content contextual component block is not used', async function (assert) {
-    await render(<template><Step></Step></template>);
+    await render(<template><Step /></template>);
     assert.dom('.hds-stepper-list__step-content').doesNotExist();
   });
 
   test('it renders the content when the content contextual component block is used', async function (assert) {
     await render(
       <template>
-          <Step>
-            <:content>Test</:content>
-          </Step>
-        </template>,
+        <Step>
+          <:content>Test</:content>
+        </Step>
+      </template>,
     );
     assert.dom('.hds-stepper-list__step-content').exists();
     assert.dom('.hds-stepper-list__step-content').containsText('Test');
diff --git a/showcase/tests/integration/components/hds/stepper/list-test.gjs b/showcase/tests/integration/components/hds/stepper/list-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/stepper/list-test.gjs
rename to showcase/tests/integration/components/hds/stepper/list-test.gts
diff --git a/showcase/tests/integration/components/hds/stepper/step-indicator-test.gjs b/showcase/tests/integration/components/hds/stepper/step-indicator-test.gts
similarity index 66%
rename from showcase/tests/integration/components/hds/stepper/step-indicator-test.gjs
rename to showcase/tests/integration/components/hds/stepper/step-indicator-test.gts
index a9da5cd6186..9b1179e454d 100644
--- a/showcase/tests/integration/components/hds/stepper/step-indicator-test.gjs
+++ b/showcase/tests/integration/components/hds/stepper/step-indicator-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Indicator from "@hashicorp/design-system-components/components/hds/stepper/step/indicator";
+import Indicator from '@hashicorp/design-system-components/components/hds/stepper/step/indicator';
 
 module(
   'Integration | Component | hds/stepper/indicator/step',
@@ -15,7 +15,13 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @text="1" @status="incomplete" /></template>,
+        <template>
+          <Indicator
+            id="test-stepper-indicator-step"
+            @text="1"
+            @status="incomplete"
+          />
+        </template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -26,7 +32,9 @@ module(
 
     test('it should render the non-interactive variant by default', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @test="1" /></template>,
+        <template>
+          <Indicator id="test-stepper-indicator-step" @status="incomplete" />
+        </template>,
       );
       // Is there a way to test if an element DOESN'T have a class?
       assert
@@ -36,7 +44,13 @@ module(
 
     test('it should render the interactive variant if passed the isInteractive property', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @isInteractive={{true}} /></template>,
+        <template>
+          <Indicator
+            id="test-stepper-indicator-step"
+            @status="incomplete"
+            @isInteractive={{true}}
+          />
+        </template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -49,7 +63,9 @@ module(
 
     test('it should render the correct step status if the @status="incomplete" prop is declared', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" /></template>,
+        <template>
+          <Indicator id="test-stepper-indicator-step" @status="incomplete" />
+        </template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -60,7 +76,13 @@ module(
 
     test('it should render the correct status if the @status="incomplete" prop is declared', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @isInteractive={{true}} /></template>,
+        <template>
+          <Indicator
+            id="test-stepper-indicator-step"
+            @status="incomplete"
+            @isInteractive={{true}}
+          />
+        </template>,
       );
       assert
         .dom('#test-stepper-indicator-step')
@@ -72,7 +94,13 @@ module(
 
     test('it should render text within the indicator if the @text prop is declared', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @status="incomplete" @text="1" /></template>,
+        <template>
+          <Indicator
+            id="test-stepper-indicator-step"
+            @status="incomplete"
+            @text="1"
+          />
+        </template>,
       );
       assert.dom('#test-stepper-indicator-step').hasText('1');
     });
@@ -81,7 +109,9 @@ module(
 
     test('it should render a flight icon if the @status="processing" prop is declared', async function (assert) {
       await render(
-        <template><Indicator id="test-stepper-indicator-step" @status="processing" /></template>,
+        <template>
+          <Indicator id="test-stepper-indicator-step" @status="processing" />
+        </template>,
       );
       assert.dom('.hds-icon-loading').exists();
     });
diff --git a/showcase/tests/integration/components/hds/stepper/task-indicator-test.gjs b/showcase/tests/integration/components/hds/stepper/task-indicator-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/stepper/task-indicator-test.gjs
rename to showcase/tests/integration/components/hds/stepper/task-indicator-test.gts
diff --git a/showcase/tests/integration/components/hds/table/td-test.gjs b/showcase/tests/integration/components/hds/table/td-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/table/td-test.gjs
rename to showcase/tests/integration/components/hds/table/td-test.gts
diff --git a/showcase/tests/integration/components/hds/tag/index-test.gjs b/showcase/tests/integration/components/hds/tag/index-test.gts
similarity index 69%
rename from showcase/tests/integration/components/hds/tag/index-test.gjs
rename to showcase/tests/integration/components/hds/tag/index-test.gts
index d21603ec7b4..4091527ee7b 100644
--- a/showcase/tests/integration/components/hds/tag/index-test.gjs
+++ b/showcase/tests/integration/components/hds/tag/index-test.gts
@@ -5,8 +5,16 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, setupOnerror, waitFor } from '@ember/test-helpers';
-import Tag from "@hashicorp/design-system-components/components/hds/tag/index";
+import {
+  render,
+  resetOnerror,
+  setupOnerror,
+  waitFor,
+} from '@ember/test-helpers';
+import Tag from '@hashicorp/design-system-components/components/hds/tag/index';
+import style from 'ember-style-modifier';
+
+import NOOP from 'showcase/utils/noop';
 
 module('Integration | Component | hds/tag/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -27,8 +35,9 @@ module('Integration | Component | hds/tag/index', function (hooks) {
   });
 
   test('it should render the "dismiss" button if a callback function is passed to the @onDismiss argument', async function (assert) {
-    this.set('NOOP', () => {});
-    await render(<template><Tag @text="My tag" @onDismiss={{this.NOOP}} /></template>);
+    await render(
+      <template><Tag @text="My tag" @onDismiss={{NOOP}} /></template>,
+    );
     assert.dom('button.hds-tag__dismiss').exists();
     assert
       .dom('button.hds-tag__dismiss')
@@ -36,9 +45,10 @@ module('Integration | Component | hds/tag/index', function (hooks) {
   });
 
   test('it should render a customized label for the dismiss button if custom @ariaLabel text is defined', async function (assert) {
-    this.set('NOOP', () => {});
     await render(
-      <template><Tag @text="My tag" @onDismiss={{this.NOOP}} @ariaLabel="Please dismiss" /></template>,
+      <template>
+        <Tag @text="My tag" @onDismiss={{NOOP}} @ariaLabel="Please dismiss" />
+      </template>,
     );
     assert.dom('button.hds-tag__dismiss').exists();
     assert
@@ -50,14 +60,23 @@ module('Integration | Component | hds/tag/index', function (hooks) {
 
   test('it should render the primary color as the default if no @color prop is declared when the text is a link', async function (assert) {
     await render(
-      <template><Tag @text="My text tag" @href="/" id="test-link-tag" /></template>,
+      <template>
+        <Tag @text="My text tag" @href="/" id="test-link-tag" />
+      </template>,
     );
     assert.dom('#test-link-tag').hasClass('hds-tag--color-primary');
   });
 
   test('it should render the correct CSS color class if the @color prop is declared when the text is a link', async function (assert) {
     await render(
-      <template><Tag @text="My text tag" @href="/" @color="secondary" id="test-link-tag" /></template>,
+      <template>
+        <Tag
+          @text="My text tag"
+          @href="/"
+          @color="secondary"
+          id="test-link-tag"
+        />
+      </template>,
     );
     assert.dom('#test-link-tag').hasClass('hds-tag--color-secondary');
   });
@@ -69,7 +88,12 @@ module('Integration | Component | hds/tag/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Tag @text="My text tag" @href="/" @color="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Tag @text="My text tag" @href="/" @color="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -82,7 +106,12 @@ module('Integration | Component | hds/tag/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Tag @text="My text tag" @color="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Tag @text="My text tag" @color="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -91,18 +120,23 @@ module('Integration | Component | hds/tag/index', function (hooks) {
   // OVERFLOW
 
   test('it should not render a tooltip if the text does not overflow', async function (assert) {
-    await render(<template>
-        <Tag @text="My text tag" id="test-tag" />
-    </template>);
+    await render(
+      <template><Tag @text="My text tag" id="test-tag" /></template>,
+    );
     assert.dom('.hds-tooltip-button').doesNotExist();
   });
 
   test('it should render a tooltip if the text overflows', async function (assert) {
-    await render(<template>
-      <div style="width: 50px;">
-        <Tag @text="This is a very long text that should go on multiple lines" id="test-tag" />
-      </div>
-    </template>);
+    await render(
+      <template>
+        <div {{style width="50px"}}>
+          <Tag
+            @text="This is a very long text that should go on multiple lines"
+            id="test-tag"
+          />
+        </div>
+      </template>,
+    );
     await waitFor('.hds-tooltip-button', { timeout: 1000 });
     assert.dom('.hds-tooltip-button').exists();
   });
diff --git a/showcase/tests/integration/components/hds/text/body-test.gjs b/showcase/tests/integration/components/hds/text/body-test.gts
similarity index 74%
rename from showcase/tests/integration/components/hds/text/body-test.gjs
rename to showcase/tests/integration/components/hds/text/body-test.gts
index fa02344329b..03060d446d9 100644
--- a/showcase/tests/integration/components/hds/text/body-test.gjs
+++ b/showcase/tests/integration/components/hds/text/body-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Body from "@hashicorp/design-system-components/components/hds/text/body";
+import Body from '@hashicorp/design-system-components/components/hds/text/body';
 
 module('Integration | Component | hds/text/body', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,7 +16,9 @@ module('Integration | Component | hds/text/body', function (hooks) {
   });
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(<template><Body @size="200" @tag="p" id="test-text" /></template>);
+    await render(
+      <template><Body @size="200" @tag="p" id="test-text" /></template>,
+    );
     assert.dom('#test-text').hasClass('hds-text');
     assert.dom('#test-text').hasClass('hds-typography-body-200');
   });
@@ -26,7 +28,16 @@ module('Integration | Component | hds/text/body', function (hooks) {
 
   test('it renders correctly the provided arguments', async function (assert) {
     await render(
-      <template><Body @size="100" @tag="mark" @weight="semibold" @align="right" @color="success" id="test-text">This is the text</Body></template>,
+      <template>
+        <Body
+          @size="100"
+          @tag="mark"
+          @weight="semibold"
+          @align="right"
+          @color="success"
+          id="test-text"
+        >This is the text</Body>
+      </template>,
     );
     assert.dom('#test-text').hasText('This is the text');
     assert.dom('#test-text').hasClass('hds-typography-body-100');
@@ -45,7 +56,12 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Body @size="123" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Body @size="123" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -57,7 +73,12 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Body @size="300" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Body @size="300" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -69,7 +90,12 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Body @size="200" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Body @size="200" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -81,7 +107,12 @@ module('Integration | Component | hds/text/body', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Body @size="100" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Body @size="100" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/text/code-test.gjs b/showcase/tests/integration/components/hds/text/code-test.gts
similarity index 76%
rename from showcase/tests/integration/components/hds/text/code-test.gjs
rename to showcase/tests/integration/components/hds/text/code-test.gts
index 63ec9d94bb0..5015918d1af 100644
--- a/showcase/tests/integration/components/hds/text/code-test.gjs
+++ b/showcase/tests/integration/components/hds/text/code-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Code from "@hashicorp/design-system-components/components/hds/text/code";
+import Code from '@hashicorp/design-system-components/components/hds/text/code';
 
 module('Integration | Component | hds/text/code', function (hooks) {
   setupRenderingTest(hooks);
@@ -28,7 +28,16 @@ module('Integration | Component | hds/text/code', function (hooks) {
 
   test('it renders correctly the provided arguments', async function (assert) {
     await render(
-      <template><Code @size="100" @tag="code" @weight="regular" @align="right" @color="success" id="test-text">This is the text</Code></template>,
+      <template>
+        <Code
+          @size="100"
+          @tag="code"
+          @weight="regular"
+          @align="right"
+          @color="success"
+          id="test-text"
+        >This is the text</Code>
+      </template>,
     );
     assert.dom('#test-text').hasText('This is the text');
     assert.dom('#test-text').hasClass('hds-typography-code-100');
@@ -47,7 +56,12 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Code @size="123" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Code @size="123" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -59,7 +73,12 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Code @size="300" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Code @size="300" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -71,7 +90,12 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Code @size="200" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Code @size="200" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -83,7 +107,12 @@ module('Integration | Component | hds/text/code', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Code @size="100" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Code @size="100" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/text/display-test.gjs b/showcase/tests/integration/components/hds/text/display-test.gts
similarity index 75%
rename from showcase/tests/integration/components/hds/text/display-test.gjs
rename to showcase/tests/integration/components/hds/text/display-test.gts
index f4eea469b38..04fbdb8314b 100644
--- a/showcase/tests/integration/components/hds/text/display-test.gjs
+++ b/showcase/tests/integration/components/hds/text/display-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Display from "@hashicorp/design-system-components/components/hds/text/display";
+import Display from '@hashicorp/design-system-components/components/hds/text/display';
 
 module('Integration | Component | hds/text/display', function (hooks) {
   setupRenderingTest(hooks);
@@ -28,7 +28,16 @@ module('Integration | Component | hds/text/display', function (hooks) {
 
   test('it renders correctly the provided arguments', async function (assert) {
     await render(
-      <template><Display @size="400" @tag="h3" @weight="bold" @align="right" @color="success" id="test-text">This is the text</Display></template>,
+      <template>
+        <Display
+          @size="400"
+          @tag="h3"
+          @weight="bold"
+          @align="right"
+          @color="success"
+          id="test-text"
+        >This is the text</Display>
+      </template>,
     );
     assert.dom('#test-text').hasText('This is the text');
     assert.dom('#test-text').hasClass('hds-typography-display-400');
@@ -47,7 +56,12 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Display @size="123" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Display @size="123" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -59,7 +73,12 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Display @size="500" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Display @size="500" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -71,7 +90,12 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Display @size="400" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Display @size="400" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -83,7 +107,12 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Display @size="300" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Display @size="300" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -95,7 +124,12 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Display @size="200" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Display @size="200" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -107,7 +141,12 @@ module('Integration | Component | hds/text/display', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Display @size="100" @weight="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Display @size="100" @weight="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/text/index-test.gjs b/showcase/tests/integration/components/hds/text/index-test.gts
similarity index 62%
rename from showcase/tests/integration/components/hds/text/index-test.gjs
rename to showcase/tests/integration/components/hds/text/index-test.gts
index 9bda3a9aefb..99ff104e7c6 100644
--- a/showcase/tests/integration/components/hds/text/index-test.gjs
+++ b/showcase/tests/integration/components/hds/text/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Text from "@hashicorp/design-system-components/components/hds/text/index";
+import Text from '@hashicorp/design-system-components/components/hds/text/index';
 
 module('Integration | Component | hds/text/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,9 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" id="test-text" /></template>,
+      <template>
+        <Text @group="body" @size="200" @tag="p" id="test-text" />
+      </template>,
     );
     assert.dom('#test-text').hasClass('hds-text');
   });
@@ -26,7 +28,9 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it renders with the provided text', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').hasText('This is the text');
   });
@@ -35,7 +39,10 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text with the correct variant based on the @group/@size declared', async function (assert) {
     await render(
-      <template><Text @group="display" @size="500" @tag="p" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="display" @size="500" @tag="p" id="test-text">This is the
+          text</Text>
+      </template>,
     );
     // notice: we use CSS helper classes for the weight definitions
     assert.dom('#test-text').hasClass('hds-typography-display-500');
@@ -45,13 +52,18 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text with a "span" element if @tag is not declared', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="body" @size="200" id="test-text">This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').hasTagName('span');
   });
   test('it should render text with the correct @tag declared', async function (assert) {
     await render(
-      <template><Text @group="body" @tag="mark" @size="200" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="body" @tag="mark" @size="200" id="test-text">This is the
+          text</Text>
+      </template>,
     );
     assert.dom('#test-text').hasTagName('mark');
   });
@@ -60,13 +72,23 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text without weight if no @weight is declared', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').doesNotHaveClass(/hds-text--weight-/);
   });
   test('it should render the correct CSS class if the @weight prop is declared', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" @weight="semibold" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text
+          @group="body"
+          @size="200"
+          @tag="p"
+          @weight="semibold"
+          id="test-text"
+        >This is the text</Text>
+      </template>,
     );
     // notice: we use CSS helper classes for the weight definitions
     assert.dom('#test-text').hasClass('hds-font-weight-semibold');
@@ -76,13 +98,23 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text without alignment if no @align is declared', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').doesNotHaveClass(/hds-text--align-/);
   });
   test('it should render the correct CSS class if the @align prop is declared', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" @align="right" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text
+          @group="body"
+          @size="200"
+          @tag="p"
+          @align="right"
+          id="test-text"
+        >This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').hasClass('hds-text--align-right');
   });
@@ -91,21 +123,39 @@ module('Integration | Component | hds/text/index', function (hooks) {
 
   test('it should render text without color if no @color is declared', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text @group="body" @size="200" @tag="p" id="test-text">This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').doesNotHaveClass(/hds-text--color-/);
     assert.dom('#test-text').doesNotHaveAttribute('style');
   });
   test('it should render the correct CSS color class if the @color prop is declared using a pre-defined color', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" @color="highlight" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text
+          @group="body"
+          @size="200"
+          @tag="p"
+          @color="highlight"
+          id="test-text"
+        >This is the text</Text>
+      </template>,
     );
     // notice: we use CSS helper classes for the color definitions
     assert.dom('#test-text').hasClass('hds-foreground-highlight');
   });
   test('it should render the correct style if the @color prop is declared as custom CSS property color', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" @color="var(--token-color-foreground-action)" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text
+          @group="body"
+          @size="200"
+          @tag="p"
+          @color="var(--token-color-foreground-action)"
+          id="test-text"
+        >This is the text</Text>
+      </template>,
     );
     assert
       .dom('#test-text')
@@ -113,7 +163,15 @@ module('Integration | Component | hds/text/index', function (hooks) {
   });
   test('it should render the correct style if the @color prop is declared as custom HEX color', async function (assert) {
     await render(
-      <template><Text @group="body" @size="200" @tag="p" @color="#FF0000" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text
+          @group="body"
+          @size="200"
+          @tag="p"
+          @color="#FF0000"
+          id="test-text"
+        >This is the text</Text>
+      </template>,
     );
     assert.dom('#test-text').hasAttribute('style', 'color: rgb(255, 0, 0);');
   });
@@ -128,7 +186,16 @@ module('Integration | Component | hds/text/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Text @group="body" @size="200" @tag="p" @align="top" id="test-text">This is the text</Text></template>,
+      <template>
+        <Text
+          @group="body"
+          @size="200"
+          @tag="p"
+          {{! @glint-expect-error - testing invalid component usage }}
+          @align="top"
+          id="test-text"
+        >This is the text</Text>
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/toast/index-test.gjs b/showcase/tests/integration/components/hds/toast/index-test.gts
similarity index 100%
rename from showcase/tests/integration/components/hds/toast/index-test.gjs
rename to showcase/tests/integration/components/hds/toast/index-test.gts

From a24b39a09288afa98c04698c947177adabf1f0a9 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 17:46:14 -0400
Subject: [PATCH 03/43] feat: convert Accordion tests to gts

---
 .../{index-test.gjs => index-test.gts}        | 101 ++++++++++++------
 1 file changed, 69 insertions(+), 32 deletions(-)
 rename showcase/tests/integration/components/hds/accordion/{index-test.gjs => index-test.gts} (83%)

diff --git a/showcase/tests/integration/components/hds/accordion/index-test.gjs b/showcase/tests/integration/components/hds/accordion/index-test.gts
similarity index 83%
rename from showcase/tests/integration/components/hds/accordion/index-test.gjs
rename to showcase/tests/integration/components/hds/accordion/index-test.gts
index 40a9df57f07..521ce6a2957 100644
--- a/showcase/tests/integration/components/hds/accordion/index-test.gjs
+++ b/showcase/tests/integration/components/hds/accordion/index-test.gts
@@ -5,9 +5,13 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, render } from '@ember/test-helpers';
+import { click, render, settled, find } from '@ember/test-helpers';
 import Accordion from '@hashicorp/design-system-components/components/hds/accordion/index';
 import Item from '@hashicorp/design-system-components/components/hds/accordion/item/index';
+import { tracked } from 'tracked-built-ins';
+
+import type { HdsAccordionForceStates } from '@hashicorp/design-system-components/components/hds/accordion/types';
+
 import { on } from '@ember/modifier';
 
 module('Integration | Component | hds/accordion/index', function (hooks) {
@@ -88,7 +92,10 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await render(
       <template>
         <Accordion id="test-accordion" as |A|>
-          <A.Item>Item</A.Item>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
         </Accordion>
       </template>,
     );
@@ -102,7 +109,10 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await render(
       <template>
         <Accordion id="test-accordion" @size="large" as |A|>
-          <A.Item>Item</A.Item>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
         </Accordion>
       </template>,
     );
@@ -116,8 +126,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await render(
       <template>
         <Accordion id="test-accordion" @size="large" as |A|>
-          <A.Item id="test-accordion-item1">Item 1</A.Item>
-          <A.Item id="test-accordion-item2" @size="small">Item 2</A.Item>
+          <A.Item id="test-accordion-item1">
+            <:toggle>Item 1</:toggle>
+            <:content>Content 1</:content>
+          </A.Item>
+          <A.Item id="test-accordion-item2" @size="small">
+            <:toggle>Item 2</:toggle>
+            <:content>Content 2</:content>
+          </A.Item>
         </Accordion>
       </template>,
     );
@@ -135,7 +151,10 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await render(
       <template>
         <Accordion id="test-accordion" as |A|>
-          <A.Item>Item</A.Item>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
         </Accordion>
       </template>,
     );
@@ -149,7 +168,10 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await render(
       <template>
         <Accordion id="test-accordion" @type="flush" as |A|>
-          <A.Item>Item</A.Item>
+          <A.Item>
+            <:toggle>Item one</:toggle>
+            <:content>Content one</:content>
+          </A.Item>
         </Accordion>
       </template>,
     );
@@ -163,8 +185,14 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await render(
       <template>
         <Accordion id="test-accordion" @type="flush" as |A|>
-          <A.Item id="test-accordion-item1">Item 1</A.Item>
-          <A.Item id="test-accordion-item2" @type="card">Item 2</A.Item>
+          <A.Item id="test-accordion-item1">
+            <:toggle>Item 1</:toggle>
+            <:content>Content 1</:content>
+          </A.Item>
+          <A.Item id="test-accordion-item2" @type="card">
+            <:toggle>Item 2</:toggle>
+            <:content>Content 2</:content>
+          </A.Item>
         </Accordion>
       </template>,
     );
@@ -212,13 +240,12 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await click('.hds-accordion-item__button');
     assert.dom('.hds-accordion-item__button').hasAttribute('aria-controls');
 
+    const accordionButton = find('.hds-accordion-item__button');
+    const accordionContent = find('.hds-disclosure-primitive__content');
+
     assert.strictEqual(
-      this.element
-        .querySelector('.hds-accordion-item__button')
-        .getAttribute('aria-controls'),
-      this.element
-        .querySelector('.hds-disclosure-primitive__content')
-        .getAttribute('id'),
+      accordionButton?.getAttribute('aria-controls'),
+      accordionContent?.getAttribute('id'),
     );
   });
 
@@ -240,13 +267,12 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
       .dom('.hds-accordion-item__button')
       .doesNotHaveAttribute('aria-label');
 
+    const accordionButton = find('.hds-accordion-item__button');
+    const accordionToggleContent = find('.hds-accordion-item__toggle-content');
+
     assert.strictEqual(
-      this.element
-        .querySelector('.hds-accordion-item__toggle-content')
-        .getAttribute('id'),
-      this.element
-        .querySelector('.hds-accordion-item__button')
-        .getAttribute('aria-labelledby'),
+      accordionToggleContent?.getAttribute('id'),
+      accordionButton?.getAttribute('aria-labelledby'),
     );
   });
 
@@ -343,9 +369,13 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
 
   // forceState
   test('it displays the correct content based on @forceState', async function (assert) {
+    const context = tracked<Record<'isOpen', HdsAccordionForceStates>>({
+      isOpen: 'close',
+    });
+
     await render(
       <template>
-        <Accordion @forceState={{this.forceState}} as |A|>
+        <Accordion @forceState={{context.isOpen}} as |A|>
           <A.Item @isOpen={{true}}>
             <:toggle>Item one</:toggle>
             <:content>Content one</:content>
@@ -364,7 +394,8 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
       .containsText('Content one');
 
     // all items open via forceState (external override to open)
-    this.set('forceState', 'open');
+    context.isOpen = 'open';
+    await settled();
     assert.dom('.hds-accordion-item__content').exists({ count: 2 });
 
     // first item closed via toggle (internal override to close)
@@ -375,7 +406,8 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
       .containsText('Content two');
 
     // all items closed via forceState (external override to close)
-    this.set('forceState', 'close');
+    context.isOpen = 'close';
+    await settled();
     assert.dom('.hds-accordion-item__content').doesNotExist();
 
     // first item open via toggle  (internal override to open)
@@ -410,14 +442,19 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
   // onClickToggle
 
   test('it should call onClickToggle function', async function (assert) {
-    let state = 'close';
-    this.set(
-      'onClickToggle',
-      () => (state = state === 'open' ? (state = 'close') : (state = 'open')),
-    );
+    const context = tracked<Record<'isOpen', HdsAccordionForceStates>>({
+      isOpen: 'close',
+    });
+
+    const onClickToggle = () =>
+      (context.isOpen =
+        context.isOpen === 'open'
+          ? (context.isOpen = 'close')
+          : (context.isOpen = 'open'));
+
     await render(
       <template>
-        <Item @forceState={{this.state}} @onClickToggle={{this.onClickToggle}}>
+        <Item @forceState={{context.isOpen}} @onClickToggle={{onClickToggle}}>
           <:toggle>Item one</:toggle>
           <:content>Content one</:content>
         </Item>
@@ -427,11 +464,11 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     assert.dom('.hds-accordion-item__content').doesNotExist();
     // toggle to open
     await click('.hds-accordion-item__button');
-    assert.strictEqual(state, 'open');
+    assert.strictEqual(context.isOpen, 'open');
     assert.dom('.hds-accordion-item__content').exists();
     // toggle to close
     await click('.hds-accordion-item__button');
-    assert.strictEqual(state, 'close');
+    assert.strictEqual(context.isOpen, 'close');
     assert.dom('.hds-accordion-item__content').doesNotExist();
   });
 });

From dd00c8372dc598cc1a5ef7dd82151763d7331a55 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 17:48:59 -0400
Subject: [PATCH 04/43] feat: convert alert tests to gts

---
 .../alert/{index-test.gjs => index-test.gts}  | 165 +++++++++++++-----
 1 file changed, 125 insertions(+), 40 deletions(-)
 rename showcase/tests/integration/components/hds/alert/{index-test.gjs => index-test.gts} (73%)

diff --git a/showcase/tests/integration/components/hds/alert/index-test.gjs b/showcase/tests/integration/components/hds/alert/index-test.gts
similarity index 73%
rename from showcase/tests/integration/components/hds/alert/index-test.gjs
rename to showcase/tests/integration/components/hds/alert/index-test.gts
index e3672ba4679..512a68d5ad8 100644
--- a/showcase/tests/integration/components/hds/alert/index-test.gjs
+++ b/showcase/tests/integration/components/hds/alert/index-test.gts
@@ -5,8 +5,10 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Alert from "@hashicorp/design-system-components/components/hds/alert/index";
+import { render, resetOnerror, setupOnerror, find } from '@ember/test-helpers';
+import Alert from '@hashicorp/design-system-components/components/hds/alert/index';
+
+import NOOP from 'showcase/utils/noop';
 
 module('Integration | Component | hds/alert/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -35,20 +37,32 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     assert.dom('.hds-icon-info').exists();
     await render(<template><Alert @type="compact" /></template>);
     assert.dom('.hds-icon-info-fill').exists();
-    await render(<template><Alert @type="inline" @color="highlight" /></template>);
+    await render(
+      <template><Alert @type="inline" @color="highlight" /></template>,
+    );
     assert.dom('.hds-icon-info').exists();
-    await render(<template><Alert @type="inline" @color="success" /></template>);
+    await render(
+      <template><Alert @type="inline" @color="success" /></template>,
+    );
     assert.dom('.hds-icon-check-circle').exists();
-    await render(<template><Alert @type="inline" @color="warning" /></template>);
+    await render(
+      <template><Alert @type="inline" @color="warning" /></template>,
+    );
     assert.dom('.hds-icon-alert-triangle').exists();
-    await render(<template><Alert @type="inline" @color="critical" /></template>);
+    await render(
+      <template><Alert @type="inline" @color="critical" /></template>,
+    );
     assert.dom('.hds-icon-alert-diamond').exists();
   });
 
   test('if an icon is declared, the icon should render in the component and override the default one', async function (assert) {
-    await render(<template><Alert @type="inline" @icon="clipboard-copy" /></template>);
+    await render(
+      <template><Alert @type="inline" @icon="clipboard-copy" /></template>,
+    );
     assert.dom('.hds-icon-clipboard-copy').exists();
-    await render(<template><Alert @type="compact" @icon="clipboard-copy" /></template>);
+    await render(
+      <template><Alert @type="compact" @icon="clipboard-copy" /></template>,
+    );
     assert.dom('.hds-icon-clipboard-copy').exists();
   });
 
@@ -61,19 +75,32 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the title when the "title" contextual component is provided', async function (assert) {
     await render(
-      <template><Alert @type="inline" as |A|><A.Title>This is the title</A.Title></Alert></template>,
+      <template>
+        <Alert @type="inline" as |A|><A.Title>This is the title</A.Title></Alert>
+      </template>,
     );
-    assert.dom(this.element).hasText('This is the title');
+    assert.dom('.hds-alert').hasText('This is the title');
   });
   test('it should render the description when the "description" contextual component is provided', async function (assert) {
     await render(
-      <template><Alert @type="inline" as |A|><A.Description>This is the description</A.Description></Alert></template>,
+      <template>
+        <Alert @type="inline" as |A|><A.Description>This is the description</A.Description></Alert>
+      </template>,
     );
-    assert.dom(this.element).hasText('This is the description');
+    assert.dom('.hds-alert').hasText('This is the description');
   });
   test('it should render rich HTML when the "description" contextual component contains HTML tags', async function (assert) {
     await render(
-      <template><Alert @type="inline" as |A|><A.Description>Hello <strong>strong</strong> and <em>em</em> and <code>code</code> and <a href="#">link</a></A.Description></Alert></template>,
+      <template>
+        <Alert @type="inline" as |A|><A.Description>Hello
+            <strong>strong</strong>
+            and
+            <em>em</em>
+            and
+            <code>code</code>
+            and
+            <a href="#">link</a></A.Description></Alert>
+      </template>,
     );
     assert.dom('.hds-alert__description strong').exists().hasText('strong');
     assert.dom('.hds-alert__description em').exists().hasText('em');
@@ -81,17 +108,23 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     assert.dom('.hds-alert__description a').exists().hasText('link');
   });
   test('it should render a div when the @tag argument is not provided', async function (assert) {
-    await render(<template>
-      <Alert @type="inline" as |A|>
-        <A.Title>This is the title</A.Title>
-      </Alert></template>);
+    await render(
+      <template>
+        <Alert @type="inline" as |A|>
+          <A.Title>This is the title</A.Title>
+        </Alert>
+      </template>,
+    );
     assert.dom('.hds-alert__title').hasTagName('div');
   });
   test('it should render the custom title tag when the @tag argument is provided', async function (assert) {
-    await render(<template>
-      <Alert @type="inline" as |A|>
-        <A.Title @tag="h2">This is the title</A.Title>
-      </Alert></template>);
+    await render(
+      <template>
+        <Alert @type="inline" as |A|>
+          <A.Title @tag="h2">This is the title</A.Title>
+        </Alert>
+      </template>,
+    );
     assert.dom('.hds-alert__title').hasTagName('h2');
   });
 
@@ -99,7 +132,19 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render an Hds::Button component yielded to the "actions" container', async function (assert) {
     await render(
-      <template><Alert @type="inline" aria-labelledby="test-alert-button" id="test-alert" as |A|><A.Button @text="I am a button" @size="small" @color="secondary" id="test-alert-button" /></Alert></template>,
+      <template>
+        <Alert
+          @type="inline"
+          aria-labelledby="test-alert-button"
+          id="test-alert"
+          as |A|
+        ><A.Button
+            @text="I am a button"
+            @size="small"
+            @color="secondary"
+            id="test-alert-button"
+          /></Alert>
+      </template>,
     );
     assert
       .dom('#test-alert .hds-alert__actions button')
@@ -111,7 +156,21 @@ module('Integration | Component | hds/alert/index', function (hooks) {
   });
   test('it should render an Hds::Link::Standalone component yielded to the "actions" container', async function (assert) {
     await render(
-      <template><Alert @type="inline" aria-labelledby="test-alert-link" id="test-alert" as |A|><A.LinkStandalone @icon="plus" @text="I am a link" @href="#" @size="small" @color="secondary" id="test-alert-link" /></Alert></template>,
+      <template>
+        <Alert
+          @type="inline"
+          aria-labelledby="test-alert-link"
+          id="test-alert"
+          as |A|
+        ><A.LinkStandalone
+            @icon="plus"
+            @text="I am a link"
+            @href="#"
+            @size="small"
+            @color="secondary"
+            id="test-alert-link"
+          /></Alert>
+      </template>,
     );
     assert
       .dom('#test-alert .hds-alert__actions a')
@@ -126,7 +185,10 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render any content passed to the "generic" contextual component', async function (assert) {
     await render(
-      <template><Alert @type="inline" id="test-alert" as |A|><A.Generic><pre>test</pre></A.Generic></Alert></template>,
+      <template>
+        <Alert @type="inline" id="test-alert" as |A|><A.Generic><pre
+            >test</pre></A.Generic></Alert>
+      </template>,
     );
     assert.dom('#test-alert .hds-alert__content pre').exists().hasText('test');
   });
@@ -138,8 +200,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     assert.dom('button.hds-alert__dismiss').doesNotExist();
   });
   test('it should render the "dismiss" button if a callback function is passed to the @onDismiss argument', async function (assert) {
-    this.set('NOOP', () => {});
-    await render(<template><Alert @type="inline" @onDismiss={{this.NOOP}} /></template>);
+    await render(
+      <template><Alert @type="inline" @onDismiss={{NOOP}} /></template>,
+    );
     assert.dom('button.hds-alert__dismiss').exists();
   });
 
@@ -149,7 +212,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the component with role="alert" and aria-live="polite" for the "success" color', async function (assert) {
     await render(
-      <template><Alert @type="inline" @color="success" id="test-alert" /></template>,
+      <template>
+        <Alert @type="inline" @color="success" id="test-alert" />
+      </template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alert');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -157,7 +222,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the component with role="alert" and aria-live="polite" for the "warning" color', async function (assert) {
     await render(
-      <template><Alert @type="inline" @color="warning" id="test-alert" /></template>,
+      <template>
+        <Alert @type="inline" @color="warning" id="test-alert" />
+      </template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alert');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -165,7 +232,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should render the component with role="alert" and aria-live="polite" for the "critical" color', async function (assert) {
     await render(
-      <template><Alert @type="inline" @color="critical" id="test-alert" /></template>,
+      <template>
+        <Alert @type="inline" @color="critical" id="test-alert" />
+      </template>,
     );
     assert.dom('#test-alert').hasAttribute('role', 'alert');
     assert.dom('#test-alert').hasAttribute('aria-live', 'polite');
@@ -175,7 +244,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should not render the component with role="alert" and aria-live="polite" for the "neutral" color', async function (assert) {
     await render(
-      <template><Alert @type="inline" @color="neutral" id="test-alert" /></template>,
+      <template>
+        <Alert @type="inline" @color="neutral" id="test-alert" />
+      </template>,
     );
     assert.dom('#test-alert').doesNotHaveAttribute('role', 'alert');
     assert.dom('#test-alert').doesNotHaveAttribute('aria-live', 'polite');
@@ -183,7 +254,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
 
   test('it should not render the component with role="alert" and aria-live="polite" for the "highlight" color', async function (assert) {
     await render(
-      <template><Alert @type="inline" @color="highlight" id="test-alert" /></template>,
+      <template>
+        <Alert @type="inline" @color="highlight" id="test-alert" />
+      </template>,
     );
     assert.dom('#test-alert').doesNotHaveAttribute('role', 'alert');
     assert.dom('#test-alert').doesNotHaveAttribute('aria-live', 'polite');
@@ -199,8 +272,8 @@ module('Integration | Component | hds/alert/index', function (hooks) {
         </Alert>
       </template>,
     );
-    let title = this.element.querySelector('#test-alert .hds-alert__title');
-    assert.dom('#test-alert').hasAttribute('aria-labelledby', title.id);
+    let title = find('#test-alert .hds-alert__title');
+    assert.dom('#test-alert').hasAttribute('aria-labelledby', title?.id ?? '');
   });
 
   test('it should render with an auto-generated `aria-labelledby` when description is provided', async function (assert) {
@@ -211,10 +284,10 @@ module('Integration | Component | hds/alert/index', function (hooks) {
         </Alert>
       </template>,
     );
-    let description = this.element.querySelector(
-      '#test-alert .hds-alert__description',
-    );
-    assert.dom('#test-alert').hasAttribute('aria-labelledby', description.id);
+    let description = find('#test-alert .hds-alert__description');
+    assert
+      .dom('#test-alert')
+      .hasAttribute('aria-labelledby', description?.id ?? '');
   });
 
   // Alert dialogs
@@ -292,7 +365,12 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Alert @type="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Alert @type="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -304,7 +382,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Alert @type="compact" @icon={{false}} /></template>);
+    await render(
+      <template><Alert @type="compact" @icon={{false}} /></template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -316,7 +396,12 @@ module('Integration | Component | hds/alert/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Alert @type="inline" @color="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Alert @type="inline" @color="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From 8524e55cb37a85e3ceb478d30021e5fd471616d5 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 17:50:19 -0400
Subject: [PATCH 05/43] feat: convert copyright-test to gts

---
 .../hds/app-footer/{copyright-test.gjs => copyright-test.gts} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename showcase/tests/integration/components/hds/app-footer/{copyright-test.gjs => copyright-test.gts} (87%)

diff --git a/showcase/tests/integration/components/hds/app-footer/copyright-test.gjs b/showcase/tests/integration/components/hds/app-footer/copyright-test.gts
similarity index 87%
rename from showcase/tests/integration/components/hds/app-footer/copyright-test.gjs
rename to showcase/tests/integration/components/hds/app-footer/copyright-test.gts
index f4454ee6005..3d7659d7f8e 100644
--- a/showcase/tests/integration/components/hds/app-footer/copyright-test.gjs
+++ b/showcase/tests/integration/components/hds/app-footer/copyright-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Copyright from "@hashicorp/design-system-components/components/hds/app-footer/copyright";
+import Copyright from '@hashicorp/design-system-components/components/hds/app-footer/copyright';
 
 module('Integration | Component | hds/app-footer/copyright', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,7 +22,7 @@ module('Integration | Component | hds/app-footer/copyright', function (hooks) {
 
   test('it renders the copyright with the current year by default', async function (assert) {
     await render(<template><Copyright id="test-copyright" /></template>);
-    assert.dom('#test-copyright').includesText(currentYear);
+    assert.dom('#test-copyright').includesText(`${currentYear}`);
   });
 
   test('it renders the copyright with the passed in year value', async function (assert) {

From dfeca5415936cc7e047954c7b1bd2b555d31a186 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 17:52:36 -0400
Subject: [PATCH 06/43] feat: convert appheader tests to gts

---
 .../{index-test.gjs => index-test.gts}        | 149 ++++++++++++------
 1 file changed, 99 insertions(+), 50 deletions(-)
 rename showcase/tests/integration/components/hds/app-header/{index-test.gjs => index-test.gts} (70%)

diff --git a/showcase/tests/integration/components/hds/app-header/index-test.gjs b/showcase/tests/integration/components/hds/app-header/index-test.gts
similarity index 70%
rename from showcase/tests/integration/components/hds/app-header/index-test.gjs
rename to showcase/tests/integration/components/hds/app-header/index-test.gts
index 47a6fb9d482..2eab090cb21 100644
--- a/showcase/tests/integration/components/hds/app-header/index-test.gjs
+++ b/showcase/tests/integration/components/hds/app-header/index-test.gts
@@ -5,11 +5,11 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, click, triggerKeyEvent } from '@ember/test-helpers';
-import AppHeader from "@hashicorp/design-system-components/components/hds/app-header/index";
-import HomeLink from "@hashicorp/design-system-components/components/hds/app-header/home-link";
-import { on } from "@ember/modifier";
-import Button from "@hashicorp/design-system-components/components/hds/button/index";
+import { render, click, triggerKeyEvent, find } from '@ember/test-helpers';
+import AppHeader from '@hashicorp/design-system-components/components/hds/app-header/index';
+import HomeLink from '@hashicorp/design-system-components/components/hds/app-header/home-link';
+import { on } from '@ember/modifier';
+import Button from '@hashicorp/design-system-components/components/hds/button/index';
 
 module('Integration | Component | hds/app-header/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,17 +22,21 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   // CONTENT
 
   test('it renders content passed into the globalActions and utilityActions named blocks', async function (assert) {
-    await render(<template><AppHeader>
-  <:logo>
-    <span id="test-global-item-before">Global Item Before</span>
-  </:logo>
-  <:globalActions>
-    <span id="test-global-item-after">Global Item After</span>
-  </:globalActions>
-  <:utilityActions>
-    <span id="test-utility-item">Utility Item</span>
-  </:utilityActions>
-</AppHeader></template>);
+    await render(
+      <template>
+        <AppHeader>
+          <:logo>
+            <span id="test-global-item-before">Global Item Before</span>
+          </:logo>
+          <:globalActions>
+            <span id="test-global-item-after">Global Item After</span>
+          </:globalActions>
+          <:utilityActions>
+            <span id="test-utility-item">Utility Item</span>
+          </:utilityActions>
+        </AppHeader>
+      </template>,
+    );
     assert.dom('#test-global-item-before').hasText('Global Item Before');
     assert.dom('#test-global-item-after').hasText('Global Item After');
     assert.dom('#test-utility-item').hasText('Utility Item');
@@ -56,27 +60,34 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
 
   test('it is "mobile" on narrow viewports', async function (assert) {
     await render(
-      <template><AppHeader id="test-app-header" @breakpoint="10000px" /></template>,
+      <template>
+        <AppHeader id="test-app-header" @breakpoint="10000px" />
+      </template>,
     );
     assert.dom('#test-app-header').hasClass('hds-app-header--is-mobile');
   });
 
   test('it shows a menu button on narrow viewports', async function (assert) {
-    await render(<template>
-<AppHeader @breakpoint="10000px" /></template>);
+    await render(<template><AppHeader @breakpoint="10000px" /></template>);
     assert.dom('.hds-app-header__menu-button').exists();
   });
 
   // Mobile menu functionality
   test(`the actions do not display by default on narrow viewports`, async function (assert) {
-    await render(<template>
-<AppHeader id="test-app-header" @breakpoint="10000px" /></template>);
+    await render(
+      <template>
+        <AppHeader id="test-app-header" @breakpoint="10000px" />
+      </template>,
+    );
     assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');
   });
 
   test(`the actions show/hide when the menu button is pressed on narrow viewports`, async function (assert) {
-    await render(<template>
-<AppHeader id="test-app-header" @breakpoint="10000px" /></template>);
+    await render(
+      <template>
+        <AppHeader id="test-app-header" @breakpoint="10000px" />
+      </template>,
+    );
     assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');
 
     await click('.hds-app-header__menu-button');
@@ -88,18 +99,34 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
 
   // Close callback
   test('it should hide the actions when the "close" function is called in mobile view', async function (assert) {
-    await render(<template>
-<AppHeader id="test-app-header" @breakpoint="10000px">
-  <:logo as |actions|>
-    <HomeLink @icon="hashicorp" @text="HashiCorp" id="test-home-link" {{on "click" actions.close}} />
-  </:logo>
-  <:globalActions as |actions|>
-    <Button id="test-global-action" {{on "click" actions.close}} @text="Global action" />
-  </:globalActions>
-  <:utilityActions as |actions|>
-    <Button id="test-utility-action" {{on "click" actions.close}} @text="Utility action" />
-  </:utilityActions>
-</AppHeader></template>);
+    await render(
+      <template>
+        <AppHeader id="test-app-header" @breakpoint="10000px">
+          <:logo as |actions|>
+            <HomeLink
+              @icon="hashicorp"
+              @text="HashiCorp"
+              id="test-home-link"
+              {{on "click" actions.close}}
+            />
+          </:logo>
+          <:globalActions as |actions|>
+            <Button
+              id="test-global-action"
+              {{on "click" actions.close}}
+              @text="Global action"
+            />
+          </:globalActions>
+          <:utilityActions as |actions|>
+            <Button
+              id="test-utility-action"
+              {{on "click" actions.close}}
+              @text="Utility action"
+            />
+          </:utilityActions>
+        </AppHeader>
+      </template>,
+    );
 
     // test logo actions close
     await click('.hds-app-header__menu-button');
@@ -121,15 +148,26 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   });
 
   test('it should not do anything when the "close" function is called in desktop view', async function (assert) {
-    await render(<template>
-<AppHeader id="test-app-header">
-    <:globalActions as |actions|>
-    <Button id="test-global-action" {{on "click" actions.close}} @text="Global action" />
-  </:globalActions>
-      <:utilityActions as |actions|>
-    <Button id="test-utility-action" {{on "click" actions.close}} @text="Utility action" />
-  </:utilityActions>
-</AppHeader></template>);
+    await render(
+      <template>
+        <AppHeader id="test-app-header">
+          <:globalActions as |actions|>
+            <Button
+              id="test-global-action"
+              {{on "click" actions.close}}
+              @text="Global action"
+            />
+          </:globalActions>
+          <:utilityActions as |actions|>
+            <Button
+              id="test-utility-action"
+              {{on "click" actions.close}}
+              @text="Utility action"
+            />
+          </:utilityActions>
+        </AppHeader>
+      </template>,
+    );
     assert.dom('#test-app-header').hasClass('hds-app-header--is-desktop');
     assert
       .dom('#test-app-header')
@@ -186,7 +224,9 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
 
   test('the actions menu collapses when the ESC key is pressed on narrow viewports', async function (assert) {
     await render(
-      <template><AppHeader id="test-app-header" @breakpoint="10000px" /></template>,
+      <template>
+        <AppHeader id="test-app-header" @breakpoint="10000px" />
+      </template>,
     );
     assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed');
 
@@ -203,11 +243,12 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
     assert.dom('.hds-app-header__menu-button').hasAttribute('aria-controls');
     assert.dom('.hds-app-header__actions').hasAttribute('id');
 
+    const menuButton = find('.hds-app-header__menu-button');
+    const actions = find('.hds-app-header__actions');
+
     assert.strictEqual(
-      this.element
-        .querySelector('.hds-app-header__menu-button')
-        .getAttribute('aria-controls'),
-      this.element.querySelector('.hds-app-header__actions').getAttribute('id'),
+      menuButton?.getAttribute('aria-controls'),
+      actions?.getAttribute('id'),
     );
     // Toggle the menu back to close to avoid interfering with other tests
     await click('.hds-app-header__menu-button');
@@ -225,7 +266,15 @@ module('Integration | Component | hds/app-header/index', function (hooks) {
   });
 
   test('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) {
-    await render(<template><AppHeader @a11yRefocusSkipTo="test-skip-to" @a11yRefocusSkipText="test-skip-text" @a11yRefocusNavigationText="test-navigation-text" /></template>);
+    await render(
+      <template>
+        <AppHeader
+          @a11yRefocusSkipTo="test-skip-to"
+          @a11yRefocusSkipText="test-skip-text"
+          @a11yRefocusNavigationText="test-navigation-text"
+        />
+      </template>,
+    );
     assert
       .dom('#ember-a11y-refocus-nav-message')
       .hasText('test-navigation-text');

From 6b8e2cefc4dcc9512f3dc711d37ac8dec66e2888 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Fri, 24 Oct 2025 17:55:22 -0400
Subject: [PATCH 07/43] feat: breadrumb index tests to gts

---
 .../{index-test.gjs => index-test.gts}        | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)
 rename showcase/tests/integration/components/hds/breadcrumb/{index-test.gjs => index-test.gts} (73%)

diff --git a/showcase/tests/integration/components/hds/breadcrumb/index-test.gjs b/showcase/tests/integration/components/hds/breadcrumb/index-test.gts
similarity index 73%
rename from showcase/tests/integration/components/hds/breadcrumb/index-test.gjs
rename to showcase/tests/integration/components/hds/breadcrumb/index-test.gts
index c39ff40c2f6..ec2da1533cd 100644
--- a/showcase/tests/integration/components/hds/breadcrumb/index-test.gjs
+++ b/showcase/tests/integration/components/hds/breadcrumb/index-test.gts
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Breadcrumb from "@hashicorp/design-system-components/components/hds/breadcrumb/index";
+import Breadcrumb from '@hashicorp/design-system-components/components/hds/breadcrumb/index';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/breadcrumb/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -18,18 +19,29 @@ module('Integration | Component | hds/breadcrumb/index', function (hooks) {
 
   test('it should render the correct CSS color class if the @itemsCanWrap prop is declared', async function (assert) {
     await render(
-      <template><Breadcrumb @itemsCanWrap={{true}} id="test-breadcrumb" /></template>,
+      <template>
+        <Breadcrumb @itemsCanWrap={{true}} id="test-breadcrumb" />
+      </template>,
     );
     assert.dom('#test-breadcrumb').hasClass('hds-breadcrumb--items-can-wrap');
   });
 
   test('it should dispatch a didInsert event when the component is rendered', async function (assert) {
-    let inserted = false;
-    this.set('didInsert', () => (inserted = true));
+    const context = tracked({
+      isInserted: false,
+    });
+
+    const onInsertCallback = () => {
+      context.isInserted = true;
+    };
+
     await render(
-      <template><Breadcrumb id="test-breadcrumb" @didInsert={{this.didInsert}} /></template>,
+      <template>
+        <Breadcrumb id="test-breadcrumb" @didInsert={{onInsertCallback}} />
+      </template>,
     );
-    assert.ok(inserted);
+
+    assert.ok(context.isInserted);
   });
 
   // A11Y
@@ -42,7 +54,9 @@ module('Integration | Component | hds/breadcrumb/index', function (hooks) {
   });
   test('it should support a custom aria-label attribute', async function (assert) {
     await render(
-      <template><Breadcrumb id="test-breadcrumb" aria-label="my aria label" /></template>,
+      <template>
+        <Breadcrumb id="test-breadcrumb" aria-label="my aria label" />
+      </template>,
     );
     assert.dom('#test-breadcrumb').hasAria('label', 'my aria label');
     assert.dom('#test-breadcrumb > ol').exists();

From 1b435164e32ecf88415491507863117bbc0c56d7 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:23:36 -0400
Subject: [PATCH 08/43] feat: convert badge tests to gts

---
 .../badge/{index-test.gjs => index-test.gts}  | 49 +++++++++++++------
 1 file changed, 35 insertions(+), 14 deletions(-)
 rename showcase/tests/integration/components/hds/badge/{index-test.gjs => index-test.gts} (63%)

diff --git a/showcase/tests/integration/components/hds/badge/index-test.gjs b/showcase/tests/integration/components/hds/badge/index-test.gts
similarity index 63%
rename from showcase/tests/integration/components/hds/badge/index-test.gjs
rename to showcase/tests/integration/components/hds/badge/index-test.gts
index 65e4e58d8e5..bf1bbaed243 100644
--- a/showcase/tests/integration/components/hds/badge/index-test.gjs
+++ b/showcase/tests/integration/components/hds/badge/index-test.gts
@@ -6,25 +6,31 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Badge from "@hashicorp/design-system-components/components/hds/badge/index";
+import Badge from '@hashicorp/design-system-components/components/hds/badge/index';
 
 module('Integration | Component | hds/badge/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
+    await render(
+      <template><Badge @text="text renders" id="test-badge" /></template>,
+    );
     assert.dom('#test-badge').hasClass('hds-badge');
   });
 
   // COLOR
 
   test('it should render the neutral color as the default if no color is declared', async function (assert) {
-    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
+    await render(
+      <template><Badge @text="text renders" id="test-badge" /></template>,
+    );
     assert.dom('#test-badge').hasClass('hds-badge--color-neutral');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      <template><Badge @text="text renders" id="test-badge" @color="highlight" /></template>,
+      <template>
+        <Badge @text="text renders" id="test-badge" @color="highlight" />
+      </template>,
     );
     assert.dom('#test-badge').hasClass('hds-badge--color-highlight');
   });
@@ -32,12 +38,16 @@ module('Integration | Component | hds/badge/index', function (hooks) {
   // SIZE
 
   test('it should render the medium size if no size is declared', async function (assert) {
-    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
+    await render(
+      <template><Badge @text="text renders" id="test-badge" /></template>,
+    );
     assert.dom('#test-badge').hasClass('hds-badge--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      <template><Badge @text="text renders" id="test-badge" @size="small" /></template>,
+      <template>
+        <Badge @text="text renders" id="test-badge" @size="small" />
+      </template>,
     );
     assert.dom('#test-badge').hasClass('hds-badge--size-small');
   });
@@ -45,12 +55,16 @@ module('Integration | Component | hds/badge/index', function (hooks) {
   // TYPE
 
   test('it should render the filled type if no type is declared', async function (assert) {
-    await render(<template><Badge @text="text renders" id="test-badge" /></template>);
+    await render(
+      <template><Badge @text="text renders" id="test-badge" /></template>,
+    );
     assert.dom('#test-badge').hasClass('hds-badge--type-filled');
   });
   test('it should render the correct CSS type class if @type prop is declared', async function (assert) {
     await render(
-      <template><Badge @text="text renders" id="test-badge" @type="inverted" /></template>,
+      <template>
+        <Badge @text="text renders" id="test-badge" @type="inverted" />
+      </template>,
     );
     assert.dom('#test-badge').hasClass('hds-badge--type-inverted');
   });
@@ -59,17 +73,24 @@ module('Integration | Component | hds/badge/index', function (hooks) {
 
   test('if an icon is declared the flight icon should render in the component', async function (assert) {
     await render(
-      <template><Badge @text="text renders" id="test-badge" @icon="activity" /></template>,
+      <template>
+        <Badge @text="text renders" id="test-badge" @icon="activity" />
+      </template>,
     );
     assert.dom('.hds-icon-activity').exists();
   });
   test('if isIconOnly is set to true, visible text is hidden but text is still available to assistive technology', async function (assert) {
     await render(
-      <template><Badge @text="meaningful text for icon only badge" @isIconOnly={{true}} id="test-badge" @icon="activity" /></template>,
-    );
-    assert.deepEqual(
-      this.element.querySelector('.sr-only').textContent.trim(),
-      'meaningful text for icon only badge',
+      <template>
+        <Badge
+          @text="meaningful text for icon only badge"
+          @isIconOnly={{true}}
+          id="test-badge"
+          @icon="activity"
+        />
+      </template>,
     );
+
+    assert.dom('.sr-only').hasText('meaningful text for icon only badge');
   });
 });

From b1dc6e852304e5772dffd7729526bac1c1d02845 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:25:58 -0400
Subject: [PATCH 09/43] feat: convert reveal tests to gts

---
 .../reveal/{index-test.gjs => index-test.gts} | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)
 rename showcase/tests/integration/components/hds/reveal/{index-test.gjs => index-test.gts} (79%)

diff --git a/showcase/tests/integration/components/hds/reveal/index-test.gjs b/showcase/tests/integration/components/hds/reveal/index-test.gts
similarity index 79%
rename from showcase/tests/integration/components/hds/reveal/index-test.gjs
rename to showcase/tests/integration/components/hds/reveal/index-test.gts
index b353cb84377..b2faacfffe0 100644
--- a/showcase/tests/integration/components/hds/reveal/index-test.gjs
+++ b/showcase/tests/integration/components/hds/reveal/index-test.gts
@@ -5,16 +5,18 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, render, setupOnerror } from '@ember/test-helpers';
-import Reveal from "@hashicorp/design-system-components/components/hds/reveal/index";
+import { click, render, setupOnerror, find } from '@ember/test-helpers';
+import Reveal from '@hashicorp/design-system-components/components/hds/reveal/index';
 
 module('Integration | Component | hds/reveal/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-      <Reveal @text="More options" id="test-reveal">Additional content</Reveal>
-    </template>);
+    await render(
+      <template>
+        <Reveal @text="More options" id="test-reveal">Additional content</Reveal>
+      </template>,
+    );
     assert.dom('#test-reveal').hasClass('hds-reveal');
   });
 
@@ -25,7 +27,8 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
       <template>
         <Reveal @text="More options">
           Additional content
-        </Reveal></template>,
+        </Reveal>
+      </template>,
     );
     assert.dom('.hds-reveal__toggle-button').hasText('More options');
   });
@@ -36,7 +39,8 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
         <span id="reveal-description">GitHub apps</span>
         <Reveal @text="Show More" @ariaDescribedBy="reveal-description">
           Additional content
-        </Reveal></template>,
+        </Reveal>
+      </template>,
     );
     assert
       .dom('.hds-reveal__toggle-button')
@@ -49,7 +53,8 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
       <template>
         <Reveal @text="More options">
           Additional content
-        </Reveal></template>,
+        </Reveal>
+      </template>,
     );
     // Test content is not shown before toggle is triggered
     assert.dom('.hds-reveal__content').doesNotExist();
@@ -82,18 +87,19 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
 
   test('the toggle button has an aria-controls attribute with a value matching the DisclosurePrimitive content id', async function (assert) {
     await render(
-      <template><Reveal @text="More options">Additional content</Reveal></template>,
+      <template>
+        <Reveal @text="More options">Additional content</Reveal>
+      </template>,
     );
     await click('.hds-reveal__toggle-button');
     assert.dom('.hds-reveal__toggle-button').hasAttribute('aria-controls');
 
+    const toggleButton = find('.hds-reveal__toggle-button');
+    const content = find('.hds-disclosure-primitive__content');
+
     assert.strictEqual(
-      this.element
-        .querySelector('.hds-reveal__toggle-button')
-        .getAttribute('aria-controls'),
-      this.element
-        .querySelector('.hds-disclosure-primitive__content')
-        .getAttribute('id'),
+      toggleButton?.getAttribute('aria-controls'),
+      content?.getAttribute('id'),
     );
   });
 
@@ -106,7 +112,8 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
       <template>
         <Reveal @text="More options" @isOpen={{true}}>
           Additional content
-        </Reveal></template>,
+        </Reveal>
+      </template>,
     );
     // Test content is displayed
     assert.dom('.hds-reveal__content').exists().hasText('Additional content');
@@ -120,9 +127,10 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
   test('it displays different passed in text when open', async function (assert) {
     await render(
       <template>
-      <Reveal @text="Open me" @textWhenOpen="Close me">
-        Additional content
-      </Reveal></template>,
+        <Reveal @text="Open me" @textWhenOpen="Close me">
+          Additional content
+        </Reveal>
+      </template>,
     );
     await click('.hds-reveal__toggle-button');
     assert.dom('.hds-reveal__toggle-button').hasText('Close me');
@@ -136,7 +144,12 @@ module('Integration | Component | hds/reveal/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Reveal>Additional content</Reveal></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Reveal>Additional content</Reveal>
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From 574ff4aaced75f09ee88b98bf81536d9bf08b786 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:29:11 -0400
Subject: [PATCH 10/43] feat: convert grid item + index tests to gts

---
 .../grid/{index-test.gjs => index-test.gts}   | 47 ++++++++++++++-----
 .../grid/{item-test.gjs => item-test.gts}     | 25 ++++++----
 2 files changed, 52 insertions(+), 20 deletions(-)
 rename showcase/tests/integration/components/hds/layout/grid/{index-test.gjs => index-test.gts} (83%)
 rename showcase/tests/integration/components/hds/layout/grid/{item-test.gjs => item-test.gts} (78%)

diff --git a/showcase/tests/integration/components/hds/layout/grid/index-test.gjs b/showcase/tests/integration/components/hds/layout/grid/index-test.gts
similarity index 83%
rename from showcase/tests/integration/components/hds/layout/grid/index-test.gjs
rename to showcase/tests/integration/components/hds/layout/grid/index-test.gts
index 471883685da..decc130264a 100644
--- a/showcase/tests/integration/components/hds/layout/grid/index-test.gjs
+++ b/showcase/tests/integration/components/hds/layout/grid/index-test.gts
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import Grid from "@hashicorp/design-system-components/components/hds/layout/grid/index";
-import { array } from "@ember/helper";
+import Grid from '@hashicorp/design-system-components/components/hds/layout/grid/index';
+import { array } from '@ember/helper';
 
 module('Integration | Component | hds/layout/grid/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -21,7 +21,9 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      <template><Grid id="test-layout-grid"><pre>test</pre></Grid></template>,
+      <template>
+        <Grid id="test-layout-grid"><pre>test</pre></Grid>
+      </template>,
     );
     assert.dom('#test-layout-grid > pre').exists().hasText('test');
   });
@@ -31,7 +33,8 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
       <template>
         <Grid id="test-layout-grid" as |LG|>
           <LG.Item><pre>test</pre></LG.Item>
-        </Grid></template>,
+        </Grid>
+      </template>,
     );
     assert
       .dom('#test-layout-grid > .hds-layout-grid-item > pre')
@@ -52,13 +55,15 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
     await render(<template><Grid id="test-layout-grid" /></template>);
     assert
       .dom('#test-layout-grid')
-      .doesNotHaveStyle('--hds-layout-grid-column-min-width')
-      .doesNotHaveStyle('--hds-layout-grid-column-fill-type');
+      .doesNotHaveStyle({ '--hds-layout-grid-column-min-width': '' })
+      .doesNotHaveStyle({ '--hds-layout-grid-column-fill-type': '' });
   });
 
   test('it should render the correct min-width if the @columnMinWidth prop is declared', async function (assert) {
     await render(
-      <template><Grid id="test-layout-grid" @columnMinWidth="200px" /></template>,
+      <template>
+        <Grid id="test-layout-grid" @columnMinWidth="200px" />
+      </template>,
     );
     assert
       .dom('#test-layout-grid')
@@ -100,7 +105,7 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the correct CSS classes if @align props are declared', async function (assert) {
     await render(
-      <template><Grid id="test-layout-grid" @align="stretch" @wrap={{true}} /></template>,
+      <template><Grid id="test-layout-grid" @align="stretch" /></template>,
     );
     assert
       .dom('#test-layout-grid')
@@ -125,7 +130,9 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
 
   test('it should render the correct CSS class if the @gap prop is declared as two values', async function (assert) {
     await render(
-      <template><Grid id="test-layout-grid" @gap={{array "4" "48"}} /></template>,
+      <template>
+        <Grid id="test-layout-grid" @gap={{array "4" "48"}} />
+      </template>,
     );
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid--row-gap-4');
     assert.dom('#test-layout-grid').hasClass('hds-layout-grid--column-gap-48');
@@ -140,7 +147,12 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Grid @align="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Grid @align="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -153,7 +165,12 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Grid @gap={{array 4 "foo"}} /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Grid @gap={{array 4 "foo"}} />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -167,7 +184,13 @@ module('Integration | Component | hds/layout/grid/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Grid id="test-layout-grid" @columnMinWidth="200px" @columnWidth="300px" /></template>,
+      <template>
+        <Grid
+          id="test-layout-grid"
+          @columnMinWidth="200px"
+          @columnWidth="300px"
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/layout/grid/item-test.gjs b/showcase/tests/integration/components/hds/layout/grid/item-test.gts
similarity index 78%
rename from showcase/tests/integration/components/hds/layout/grid/item-test.gjs
rename to showcase/tests/integration/components/hds/layout/grid/item-test.gts
index f559d72bc9e..fc65bf2fcda 100644
--- a/showcase/tests/integration/components/hds/layout/grid/item-test.gjs
+++ b/showcase/tests/integration/components/hds/layout/grid/item-test.gts
@@ -6,8 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Item from "@hashicorp/design-system-components/components/hds/layout/grid/item";
-import Grid from "@hashicorp/design-system-components/components/hds/layout/grid/index";
+import Item from '@hashicorp/design-system-components/components/hds/layout/grid/item';
+import Grid from '@hashicorp/design-system-components/components/hds/layout/grid/index';
 
 module('Integration | Component | hds/layout/grid/item', function (hooks) {
   setupRenderingTest(hooks);
@@ -21,14 +21,19 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      <template><Item id="test-layout-grid-item"><pre>test</pre></Item></template>,
+      <template>
+        <Item id="test-layout-grid-item"><pre>test</pre></Item>
+      </template>,
     );
     assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
   });
 
   test('it should render as yielded contextual component', async function (assert) {
     await render(
-      <template><Grid as |LG|><LG.Item id="test-layout-grid-item"><pre>test</pre></LG.Item></Grid></template>,
+      <template>
+        <Grid as |LG|><LG.Item id="test-layout-grid-item"><pre
+            >test</pre></LG.Item></Grid>
+      </template>,
     );
     assert.dom('#test-layout-grid-item > pre').exists().hasText('test');
   });
@@ -37,14 +42,18 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
 
   test('it should render with a "div" element if @tag is not declared', async function (assert) {
     await render(
-      <template><Grid as |LG|><LG.Item id="test-layout-grid-item" /></Grid></template>,
+      <template>
+        <Grid as |LG|><LG.Item id="test-layout-grid-item" /></Grid>
+      </template>,
     );
     assert.dom('#test-layout-grid-item').hasTagName('div');
   });
 
   test('it should render with the correct @tag declared', async function (assert) {
     await render(
-      <template><Grid as |LG|><LG.Item id="test-layout-grid-item" @tag="span" /></Grid></template>,
+      <template>
+        <Grid as |LG|><LG.Item id="test-layout-grid-item" @tag="span" /></Grid>
+      </template>,
     );
     assert.dom('#test-layout-grid-item').hasTagName('span');
   });
@@ -56,7 +65,7 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
     await render(<template><Item id="test-layout-grid-item" /></template>);
     assert
       .dom('#test-layout-grid-item')
-      .doesNotHaveStyle('--hds-layout-grid-column-span');
+      .doesNotHaveStyle({ '--hds-layout-grid-column-span': '' });
   });
 
   test('it should render the correct column span if the @colspan prop is declared', async function (assert) {
@@ -75,7 +84,7 @@ module('Integration | Component | hds/layout/grid/item', function (hooks) {
     await render(<template><Item id="test-layout-grid" /></template>);
     assert
       .dom('#test-layout-grid')
-      .doesNotHaveStyle('--hds-layout-grid-row-span');
+      .doesNotHaveStyle({ '--hds-layout-grid-row-span': '' });
   });
 
   test('it should render the correct row span if the @rowspan prop is declared', async function (assert) {

From ed55fb63e5ffdbce3ab8db9d40314db2efb52998 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:35:39 -0400
Subject: [PATCH 11/43] feat: convert checkbox tests to gts

---
 .../{field-test.gjs => field-test.gts}        |  28 +--
 .../hds/form/checkbox/group-test.gjs          | 194 -----------------
 .../hds/form/checkbox/group-test.gts          | 195 ++++++++++++++++++
 3 files changed, 211 insertions(+), 206 deletions(-)
 rename showcase/tests/integration/components/hds/form/checkbox/{field-test.gjs => field-test.gts} (80%)
 delete mode 100644 showcase/tests/integration/components/hds/form/checkbox/group-test.gjs
 create mode 100644 showcase/tests/integration/components/hds/form/checkbox/group-test.gts

diff --git a/showcase/tests/integration/components/hds/form/checkbox/field-test.gjs b/showcase/tests/integration/components/hds/form/checkbox/field-test.gts
similarity index 80%
rename from showcase/tests/integration/components/hds/form/checkbox/field-test.gjs
rename to showcase/tests/integration/components/hds/form/checkbox/field-test.gts
index f92324d163a..4b040c8d08a 100644
--- a/showcase/tests/integration/components/hds/form/checkbox/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/checkbox/field-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/checkbox/field";
+import { render, resetOnerror, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/checkbox/field';
 
 module('Integration | Component | hds/form/checkbox/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -38,11 +38,13 @@ module('Integration | Component | hds/form/checkbox/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field checked="checked" as |F|>
+      <template>
+        <Field checked="checked" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -58,27 +60,29 @@ module('Integration | Component | hds/form/checkbox/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
-    assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
+    const control = find('.hds-form-field__control input');
+
+    assert.dom('.hds-form-field__label').hasAttribute('for', control?.id || '');
     assert
       .dom('.hds-form-field__helper-text')
-      .hasAttribute('id', `helper-text-${controlId}`);
+      .hasAttribute('id', `helper-text-${control?.id || ''}`);
     assert
       .dom('.hds-form-field__control input')
       .hasAttribute(
         'aria-describedby',
-        `helper-text-${controlId} error-${controlId} extra`,
+        `helper-text-${control?.id || ''} error-${control?.id || ''} extra`,
       );
     assert
       .dom('.hds-form-field__error')
-      .hasAttribute('id', `error-${controlId}`);
+      .hasAttribute('id', `error-${control?.id || ''}`);
   });
 });
diff --git a/showcase/tests/integration/components/hds/form/checkbox/group-test.gjs b/showcase/tests/integration/components/hds/form/checkbox/group-test.gjs
deleted file mode 100644
index 551d00a6e6f..00000000000
--- a/showcase/tests/integration/components/hds/form/checkbox/group-test.gjs
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled } from '@ember/test-helpers';
-import Group from "@hashicorp/design-system-components/components/hds/form/checkbox/group";
-
-module('Integration | Component | hds/form/checkbox/group', function (hooks) {
-  setupRenderingTest(hooks);
-
-  hooks.afterEach(() => {
-    resetOnerror();
-  });
-
-  test('it should render the component with an appropriate CSS class', async function (assert) {
-    await render(<template><Group id="test-form-checkbox" /></template>);
-    assert.dom('#test-form-checkbox').hasClass('hds-form-group');
-  });
-
-  // YIELDED (CONTEXTUAL) COMPONENTS
-
-  test('it renders the yielded contextual components and subcomponents', async function (assert) {
-    await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.CheckboxField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-              <F.HelperText>This is the control helper text</F.HelperText>
-              <F.Error>This is the control error</F.Error>
-            </G.CheckboxField>
-            <G.Error>This is the group error</G.Error>
-          </Group></template>,
-    );
-    assert.dom('.hds-form-group__legend').exists();
-    assert.dom('.hds-form-group__legend').hasText('This is the legend');
-    assert.dom('.hds-form-group__helper-text').exists();
-    assert
-      .dom('.hds-form-group__helper-text')
-      .hasText('This is the group helper text');
-    assert
-      .dom('.hds-form-group__control-fields-wrapper .hds-form-field__label')
-      .exists();
-    assert
-      .dom(
-        '.hds-form-group__control-fields-wrapper .hds-form-field__helper-text',
-      )
-      .exists();
-    assert
-      .dom('.hds-form-group__control-fields-wrapper .hds-form-field__control')
-      .exists();
-    assert.dom('.hds-form-group__control-fields-wrapper input').isChecked();
-    assert
-      .dom('.hds-form-group__control-fields-wrapper input')
-      .hasValue('abc123');
-    assert
-      .dom('.hds-form-group__control-fields-wrapper .hds-form-field__error')
-      .exists();
-    assert.dom('.hds-form-group__error').exists();
-    assert.dom('.hds-form-group__error').hasText('This is the group error');
-  });
-  test('it does not render the yielded contextual components if not provided', async function (assert) {
-    await render(<template><Group /></template>);
-    assert.dom('.hds-form-group__legend').doesNotExist();
-    assert.dom('.hds-form-group__helper-text').doesNotExist();
-    assert.dom('.hds-form-group__error').doesNotExist();
-  });
-  test('it automatically provides all the ID relations between the elements', async function (assert) {
-    await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.CheckboxField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-              <F.HelperText>This is the control helper text</F.HelperText>
-              <F.Error>This is the control error</F.Error>
-            </G.CheckboxField>
-            <G.Error>This is the group error</G.Error>
-          </Group></template>,
-    );
-    // the IDs are dynamically generated
-    let groupHelperText = this.element.querySelector(
-      '.hds-form-group__helper-text',
-    );
-    let groupHelperTextId = groupHelperText.id;
-    let groupError = this.element.querySelector('.hds-form-group__error');
-    let groupErrorId = groupError.id;
-    let fieldHelperText = this.element.querySelector(
-      '.hds-form-field__helper-text',
-    );
-    let fieldHelperTextId = fieldHelperText.id;
-    let fieldError = this.element.querySelector('.hds-form-field__error');
-    let fieldErrorId = fieldError.id;
-    assert
-      .dom('input')
-      .hasAttribute(
-        'aria-describedby',
-        `${fieldHelperTextId} ${fieldErrorId} ${groupHelperTextId} ${groupErrorId}`,
-      );
-  });
-
-  test('it automatically provides all the ID relations between the elements even when Error is conditionally rendered', async function (assert) {
-    await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.CheckboxField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-              <F.HelperText>This is the control helper text</F.HelperText>
-              <F.Error>This is the control error</F.Error>
-            </G.CheckboxField>
-            {{#if this.showErrors}}
-              <G.Error>This is the group error</G.Error>
-            {{/if}}
-          </Group></template>,
-    );
-
-    this.set('showErrors', true);
-    await settled();
-
-    // the IDs are dynamically generated
-    let groupHelperText = this.element.querySelector(
-      '.hds-form-group__helper-text',
-    );
-    let groupHelperTextId = groupHelperText.id;
-    let groupError = this.element.querySelector('.hds-form-group__error');
-    let groupErrorId = groupError.id;
-    let fieldHelperText = this.element.querySelector(
-      '.hds-form-field__helper-text',
-    );
-    let fieldHelperTextId = fieldHelperText.id;
-    let fieldError = this.element.querySelector('.hds-form-field__error');
-    let fieldErrorId = fieldError.id;
-    assert
-      .dom('input')
-      .hasAttribute(
-        'aria-describedby',
-        `${fieldHelperTextId} ${fieldErrorId} ${groupHelperTextId} ${groupErrorId}`,
-      );
-  });
-
-  // NAME
-
-  test('it renders the defined name on all controls within a group', async function (assert) {
-    await render(
-      <template><Group @name="datacenter-demo" as |G|>
-            <G.Legend>Choose datacenter</G.Legend>
-            <G.CheckboxField data-test="first-control" as |F|>
-              <F.Label>NYC1</F.Label>
-            </G.CheckboxField>
-            <G.CheckboxField data-test="second-control" as |F|>
-              <F.Label>DC1</F.Label>
-            </G.CheckboxField>
-          </Group></template>,
-    );
-    assert
-      .dom('[data-test="first-control"]')
-      .hasAttribute('name', 'datacenter-demo');
-    assert
-      .dom('[data-test="second-control"]')
-      .hasAttribute('name', 'datacenter-demo');
-  });
-
-  // REQUIRED AND OPTIONAL
-
-  test('it should append an indicator to the legend text and set the required attribute when user input is required', async function (assert) {
-    await render(
-      <template><Group @isRequired={{true}} as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.CheckboxField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-            </G.CheckboxField>
-          </Group></template>,
-    );
-    assert.dom('legend .hds-form-indicator').exists();
-    assert.dom('legend .hds-form-indicator').hasText('Required');
-    assert.dom('input').hasAttribute('required');
-  });
-  test('it should append an indicator to the legend text when user input is optional', async function (assert) {
-    await render(
-      <template><Group @isOptional={{true}} as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.CheckboxField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-            </G.CheckboxField>
-          </Group></template>,
-    );
-    assert.dom('legend .hds-form-indicator').exists();
-    assert.dom('legend .hds-form-indicator').hasText('(Optional)');
-  });
-});
diff --git a/showcase/tests/integration/components/hds/form/checkbox/group-test.gts b/showcase/tests/integration/components/hds/form/checkbox/group-test.gts
new file mode 100644
index 00000000000..6d65fbcf04a
--- /dev/null
+++ b/showcase/tests/integration/components/hds/form/checkbox/group-test.gts
@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render, resetOnerror, settled, find } from '@ember/test-helpers';
+import Group from '@hashicorp/design-system-components/components/hds/form/checkbox/group';
+import { tracked } from 'tracked-built-ins';
+
+module('Integration | Component | hds/form/checkbox/group', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.afterEach(() => {
+    resetOnerror();
+  });
+
+  test('it should render the component with an appropriate CSS class', async function (assert) {
+    await render(<template><Group id="test-form-checkbox" /></template>);
+    assert.dom('#test-form-checkbox').hasClass('hds-form-group');
+  });
+
+  // YIELDED (CONTEXTUAL) COMPONENTS
+
+  test('it renders the yielded contextual components and subcomponents', async function (assert) {
+    await render(
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.CheckboxField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+            <F.HelperText>This is the control helper text</F.HelperText>
+            <F.Error>This is the control error</F.Error>
+          </G.CheckboxField>
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
+    );
+    assert.dom('.hds-form-group__legend').exists();
+    assert.dom('.hds-form-group__legend').hasText('This is the legend');
+    assert.dom('.hds-form-group__helper-text').exists();
+    assert
+      .dom('.hds-form-group__helper-text')
+      .hasText('This is the group helper text');
+    assert
+      .dom('.hds-form-group__control-fields-wrapper .hds-form-field__label')
+      .exists();
+    assert
+      .dom(
+        '.hds-form-group__control-fields-wrapper .hds-form-field__helper-text',
+      )
+      .exists();
+    assert
+      .dom('.hds-form-group__control-fields-wrapper .hds-form-field__control')
+      .exists();
+    assert.dom('.hds-form-group__control-fields-wrapper input').isChecked();
+    assert
+      .dom('.hds-form-group__control-fields-wrapper input')
+      .hasValue('abc123');
+    assert
+      .dom('.hds-form-group__control-fields-wrapper .hds-form-field__error')
+      .exists();
+    assert.dom('.hds-form-group__error').exists();
+    assert.dom('.hds-form-group__error').hasText('This is the group error');
+  });
+  test('it does not render the yielded contextual components if not provided', async function (assert) {
+    await render(<template><Group /></template>);
+    assert.dom('.hds-form-group__legend').doesNotExist();
+    assert.dom('.hds-form-group__helper-text').doesNotExist();
+    assert.dom('.hds-form-group__error').doesNotExist();
+  });
+  test('it automatically provides all the ID relations between the elements', async function (assert) {
+    await render(
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.CheckboxField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+            <F.HelperText>This is the control helper text</F.HelperText>
+            <F.Error>This is the control error</F.Error>
+          </G.CheckboxField>
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
+    );
+    // the IDs are dynamically generated
+    const groupHelperText = find('.hds-form-group__helper-text');
+    const groupError = find('.hds-form-group__error');
+    const fieldHelperText = find('.hds-form-field__helper-text');
+    const fieldError = find('.hds-form-field__error');
+
+    assert
+      .dom('input')
+      .hasAttribute(
+        'aria-describedby',
+        `${fieldHelperText?.id} ${fieldError?.id} ${groupHelperText?.id} ${groupError?.id}`,
+      );
+  });
+
+  test('it automatically provides all the ID relations between the elements even when Error is conditionally rendered', async function (assert) {
+    const context = tracked({ showErrors: false });
+
+    await render(
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.CheckboxField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+            <F.HelperText>This is the control helper text</F.HelperText>
+            <F.Error>This is the control error</F.Error>
+          </G.CheckboxField>
+          {{#if context.showErrors}}
+            <G.Error>This is the group error</G.Error>
+          {{/if}}
+        </Group>
+      </template>,
+    );
+
+    context.showErrors = true;
+    await settled();
+
+    // the IDs are dynamically generated
+    const groupHelperText = find('.hds-form-group__helper-text');
+    const groupError = find('.hds-form-group__error');
+    const fieldHelperText = find('.hds-form-field__helper-text');
+    const fieldError = find('.hds-form-field__error');
+
+    assert
+      .dom('input')
+      .hasAttribute(
+        'aria-describedby',
+        `${fieldHelperText?.id} ${fieldError?.id} ${groupHelperText?.id} ${groupError?.id}`,
+      );
+  });
+
+  // NAME
+
+  test('it renders the defined name on all controls within a group', async function (assert) {
+    await render(
+      <template>
+        <Group @name="datacenter-demo" as |G|>
+          <G.Legend>Choose datacenter</G.Legend>
+          <G.CheckboxField data-test="first-control" as |F|>
+            <F.Label>NYC1</F.Label>
+          </G.CheckboxField>
+          <G.CheckboxField data-test="second-control" as |F|>
+            <F.Label>DC1</F.Label>
+          </G.CheckboxField>
+        </Group>
+      </template>,
+    );
+    assert
+      .dom('[data-test="first-control"]')
+      .hasAttribute('name', 'datacenter-demo');
+    assert
+      .dom('[data-test="second-control"]')
+      .hasAttribute('name', 'datacenter-demo');
+  });
+
+  // REQUIRED AND OPTIONAL
+
+  test('it should append an indicator to the legend text and set the required attribute when user input is required', async function (assert) {
+    await render(
+      <template>
+        <Group @isRequired={{true}} as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.CheckboxField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+          </G.CheckboxField>
+        </Group>
+      </template>,
+    );
+    assert.dom('legend .hds-form-indicator').exists();
+    assert.dom('legend .hds-form-indicator').hasText('Required');
+    assert.dom('input').hasAttribute('required');
+  });
+  test('it should append an indicator to the legend text when user input is optional', async function (assert) {
+    await render(
+      <template>
+        <Group @isOptional={{true}} as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.CheckboxField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+          </G.CheckboxField>
+        </Group>
+      </template>,
+    );
+    assert.dom('legend .hds-form-indicator').exists();
+    assert.dom('legend .hds-form-indicator').hasText('(Optional)');
+  });
+});

From f192979b6b178ffcff547e53450d0248ff2ae664 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:38:25 -0400
Subject: [PATCH 12/43] feat: convert field tests to gts

---
 .../field/{index-test.gjs => index-test.gts}  | 132 +++++++++++-------
 1 file changed, 81 insertions(+), 51 deletions(-)
 rename showcase/tests/integration/components/hds/form/field/{index-test.gjs => index-test.gts} (68%)

diff --git a/showcase/tests/integration/components/hds/form/field/index-test.gjs b/showcase/tests/integration/components/hds/form/field/index-test.gts
similarity index 68%
rename from showcase/tests/integration/components/hds/form/field/index-test.gjs
rename to showcase/tests/integration/components/hds/form/field/index-test.gts
index 7e8ce6aa667..e4a1517d9f6 100644
--- a/showcase/tests/integration/components/hds/form/field/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/field/index-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/field/index";
+import { render, resetOnerror, setupOnerror, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/field/index';
 
 module('Integration | Component | hds/form/field/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,9 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should render the component with a CSS class provided via the @contextualClass argument', async function (assert) {
     await render(
-      <template><Field @contextualClass="my-class" id="test-form-field" /></template>,
+      <template>
+        <Field @contextualClass="my-class" id="test-form-field" />
+      </template>,
     );
     assert.dom('#test-form-field').hasClass('my-class');
   });
@@ -33,47 +35,45 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should render the correct DOM order when the @layout prop has value vertical', async function (assert) {
     await render(
-      <template><Field @layout="vertical" id="test-form-field" as |F|>
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-      </Field></template>,
-    );
-    let control = this.element.querySelector(
-      '#test-form-field .hds-form-field__control',
-    );
-    let helperText = this.element.querySelector(
-      '#test-form-field .hds-form-field__helper-text',
+      <template>
+        <Field @layout="vertical" id="test-form-field" as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+        </Field>
+      </template>,
     );
-    assert.equal(control.previousElementSibling, helperText);
+    let control = find('#test-form-field .hds-form-field__control');
+    let helperText = find('#test-form-field .hds-form-field__helper-text');
+    assert.equal(control?.previousElementSibling, helperText);
   });
 
   test('it should render the correct DOM order when the @layout prop has value flag', async function (assert) {
     await render(
-      <template><Field @layout="flag" id="test-form-field" as |F|>
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-      </Field></template>,
-    );
-    let control = this.element.querySelector(
-      '#test-form-field .hds-form-field__control',
-    );
-    let helperText = this.element.querySelector(
-      '#test-form-field .hds-form-field__helper-text',
+      <template>
+        <Field @layout="flag" id="test-form-field" as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+        </Field>
+      </template>,
     );
-    assert.equal(control.nextElementSibling, helperText);
+    let control = find('#test-form-field .hds-form-field__control');
+    let helperText = find('#test-form-field .hds-form-field__helper-text');
+    assert.equal(control?.nextElementSibling, helperText);
   });
 
   // YIELDED (CONTEXTUAL) COMPONENTS
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field @layout="vertical" id="test-form-field" as |F|>
+      <template>
+        <Field @layout="vertical" id="test-form-field" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Control>This is a mock control</F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('#test-form-field .hds-form-field__label').exists();
     assert.dom('.hds-form-field__label').hasText('This is the label');
@@ -89,19 +89,22 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @layout="vertical" id="test-form-field" as |F|>
+      <template>
+        <Field @layout="vertical" id="test-form-field" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.Control><pre id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
+          <F.Control><pre
+              id={{F.id}}
+              aria-describedby={{F.ariaDescribedBy}}
+            >This is a mock control</pre></F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector(
-      '#test-form-field .hds-form-field__control pre',
-    );
-    let controlId = control.id;
+    let control = find('#test-form-field .hds-form-field__control pre');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -121,13 +124,23 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements with a custom @id', async function (assert) {
     await render(
-      <template><Field @layout="vertical" id="test-form-field" @id="my-custom-id" as |F|>
+      <template>
+        <Field
+          @layout="vertical"
+          id="test-form-field"
+          @id="my-custom-id"
+          as |F|
+        >
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.Control><pre id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
+          <F.Control><pre
+              id={{F.id}}
+              aria-describedby={{F.ariaDescribedBy}}
+            >This is a mock control</pre></F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     let controlId = 'my-custom-id';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
@@ -152,19 +165,27 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
   });
   test('it provides all the ID relations between the elements and allows extra `aria-describedby` attributes', async function (assert) {
     await render(
-      <template><Field @layout="vertical" id="test-form-field" @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field
+          @layout="vertical"
+          id="test-form-field"
+          @extraAriaDescribedBy="extra"
+          as |F|
+        >
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          <F.Control><pre id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
+          <F.Control><pre
+              id={{F.id}}
+              aria-describedby={{F.ariaDescribedBy}}
+            >This is a mock control</pre></F.Control>
           <F.CharacterCount>20/40</F.CharacterCount>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector(
-      '#test-form-field .hds-form-field__control pre',
-    );
-    let controlId = control.id;
+    let control = find('#test-form-field .hds-form-field__control pre');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -187,18 +208,22 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
 
   test('it should append an indicator to the label text when user input is required', async function (assert) {
     await render(
-      <template><Field @isRequired={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isRequired={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      <template><Field @isOptional={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isOptional={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
@@ -213,7 +238,12 @@ module('Integration | Component | hds/form/field/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Field @layout="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Field @layout="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From 324d33238849f57cbee432e862b573516521f588 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:39:13 -0400
Subject: [PATCH 13/43] feat: convert fieldset tests to gts

---
 .../{index-test.gjs => index-test.gts}        | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)
 rename showcase/tests/integration/components/hds/form/fieldset/{index-test.gjs => index-test.gts} (74%)

diff --git a/showcase/tests/integration/components/hds/form/fieldset/index-test.gjs b/showcase/tests/integration/components/hds/form/fieldset/index-test.gts
similarity index 74%
rename from showcase/tests/integration/components/hds/form/fieldset/index-test.gjs
rename to showcase/tests/integration/components/hds/form/fieldset/index-test.gts
index 3beebd48157..8cee7beddab 100644
--- a/showcase/tests/integration/components/hds/form/fieldset/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/fieldset/index-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render } from '@ember/test-helpers';
-import Fieldset from "@hashicorp/design-system-components/components/hds/form/fieldset/index";
+import { render, find } from '@ember/test-helpers';
+import Fieldset from '@hashicorp/design-system-components/components/hds/form/fieldset/index';
 
 module('Integration | Component | hds/form/fieldset/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,7 +24,9 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
 
   test('it should render the correct CSS layout class depending on the @layout prop', async function (assert) {
     await render(
-      <template><Fieldset @layout="vertical" id="test-form-fieldset" /></template>,
+      <template>
+        <Fieldset @layout="vertical" id="test-form-fieldset" />
+      </template>,
     );
     assert
       .dom('#test-form-fieldset')
@@ -35,12 +37,16 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Fieldset @layout="vertical" id="test-form-fieldset" as |F|>
+      <template>
+        <Fieldset @layout="vertical" id="test-form-fieldset" as |F|>
           <F.Legend>This is the legend</F.Legend>
           <F.HelperText>This is the group helper text</F.HelperText>
-          <F.Control><pre class="hds-form-group__control-field">This is a mock control field</pre></F.Control>
+          <F.Control><pre
+              class="hds-form-group__control-field"
+            >This is a mock control field</pre></F.Control>
           <F.Error>This is the group error</F.Error>
-        </Fieldset></template>,
+        </Fieldset>
+      </template>,
     );
     assert.dom('#test-form-fieldset .hds-form-group__legend').exists();
     assert.dom('.hds-form-group__legend').hasText('This is the legend');
@@ -57,16 +63,22 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
   });
   test('it automatically provides IDs for helper text and error', async function (assert) {
     await render(
-      <template><Fieldset @layout="vertical" as |F|>
+      <template>
+        <Fieldset @layout="vertical" as |F|>
           <F.Legend>This is the legend</F.Legend>
           <F.HelperText>This is the group helper text</F.HelperText>
-          <F.Control><pre class="hds-form-group__control" id={{F.id}} aria-describedby={{F.ariaDescribedBy}}>This is a mock control</pre></F.Control>
+          <F.Control><pre
+              class="hds-form-group__control"
+              id={{F.id}}
+              aria-describedby={{F.ariaDescribedBy}}
+            >This is a mock control</pre></F.Control>
           <F.Error>This is the group error</F.Error>
-        </Fieldset></template>,
+        </Fieldset>
+      </template>,
     );
     // the fieldset ID is dynamically generated
-    let fieldset = this.element.querySelector('fieldset');
-    let fieldsetId = fieldset.id;
+    let fieldset = find('fieldset');
+    let fieldsetId = fieldset?.id;
     assert
       .dom('.hds-form-group__helper-text')
       .hasAttribute('id', `helper-text-${fieldsetId}`);
@@ -79,18 +91,22 @@ module('Integration | Component | hds/form/fieldset/index', function (hooks) {
 
   test('it should append an indicator to the legend text when user input is required', async function (assert) {
     await render(
-      <template><Fieldset @isRequired={{true}} as |F|>
+      <template>
+        <Fieldset @isRequired={{true}} as |F|>
           <F.Legend>This is the legend</F.Legend>
-        </Fieldset></template>,
+        </Fieldset>
+      </template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      <template><Fieldset @isOptional={{true}} as |F|>
+      <template>
+        <Fieldset @isOptional={{true}} as |F|>
           <F.Legend>This is the legend</F.Legend>
-        </Fieldset></template>,
+        </Fieldset>
+      </template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');

From 98701073a3ba03f7a7a2ffb9d238e1585c0c4004 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:41:19 -0400
Subject: [PATCH 14/43] feat: convert field input field tests to gts

---
 .../{field-test.gjs => field-test.gts}        | 63 ++++++++++++-------
 1 file changed, 40 insertions(+), 23 deletions(-)
 rename showcase/tests/integration/components/hds/form/file-input/{field-test.gjs => field-test.gts} (77%)

diff --git a/showcase/tests/integration/components/hds/form/file-input/field-test.gjs b/showcase/tests/integration/components/hds/form/file-input/field-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/form/file-input/field-test.gjs
rename to showcase/tests/integration/components/hds/form/file-input/field-test.gts
index 7f5880bf5c9..127a8e55d25 100644
--- a/showcase/tests/integration/components/hds/form/file-input/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/file-input/field-test.gts
@@ -5,8 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/file-input/field";
+import { render, resetOnerror, settled, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/file-input/field';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/file-input/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -31,11 +32,13 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field as |F|>
+      <template>
+        <Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -52,15 +55,17 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control input');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -76,22 +81,28 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
       .hasAttribute('id', `error-${controlId}`);
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    const context = tracked({
+      showErrors: false,
+    });
+
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          {{#if this.showErrors}}
+          {{#if context.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Field></template>,
+        </Field>
+      </template>,
     );
 
-    this.set('showErrors', true);
+    context.showErrors = true;
     await settled();
 
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control input');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -111,9 +122,11 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      <template><Field @isRequired={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isRequired={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -122,9 +135,11 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      <template><Field @isOptional={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isOptional={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
@@ -132,9 +147,11 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
 
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      <template><Field required as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field required as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('input').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();

From 400db339e4fffc4320f80cbb88486485d854df13 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:43:00 -0400
Subject: [PATCH 15/43] feat: convert masked input field tests to gts

---
 .../{field-test.gjs => field-test.gts}        | 121 +++++++++++-------
 1 file changed, 73 insertions(+), 48 deletions(-)
 rename showcase/tests/integration/components/hds/form/masked-input/{field-test.gjs => field-test.gts} (74%)

diff --git a/showcase/tests/integration/components/hds/form/masked-input/field-test.gjs b/showcase/tests/integration/components/hds/form/masked-input/field-test.gts
similarity index 74%
rename from showcase/tests/integration/components/hds/form/masked-input/field-test.gjs
rename to showcase/tests/integration/components/hds/form/masked-input/field-test.gts
index a67509d76e0..03b694f89a5 100644
--- a/showcase/tests/integration/components/hds/form/masked-input/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/masked-input/field-test.gts
@@ -5,8 +5,15 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, render, resetOnerror, settled } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/masked-input/field";
+import {
+  click,
+  render,
+  resetOnerror,
+  settled,
+  find,
+} from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/masked-input/field';
+import { tracked } from 'tracked-built-ins';
 
 module(
   'Integration | Component | hds/form/masked-input/field',
@@ -65,12 +72,14 @@ module(
 
     test('it renders the yielded contextual components', async function (assert) {
       await render(
-        <template><Field as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}} />
-          <F.Error>This is the error</F.Error>
-        </Field></template>,
+        <template>
+          <Field as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.CharacterCount @maxLength={{10}} />
+            <F.Error>This is the error</F.Error>
+          </Field>
+        </template>,
       );
       assert.dom('.hds-form-field__label').exists();
       assert.dom('.hds-form-field__helper-text').exists();
@@ -87,18 +96,19 @@ module(
     });
     test('it automatically provides all the ID relations between the elements', async function (assert) {
       await render(
-        <template><Field @extraAriaDescribedBy="extra" as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}} />
-          <F.Error>This is the error</F.Error>
-        </Field></template>,
+        <template>
+          <Field @extraAriaDescribedBy="extra" as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.CharacterCount @maxLength={{10}} />
+            <F.Error>This is the error</F.Error>
+          </Field>
+        </template>,
       );
       // the control ID is dynamically generated
-      let control = this.element.querySelector(
-        '.hds-form-field__control input',
-      );
-      let controlId = control.id;
+      const control = find('.hds-form-field__control input');
+      const controlId = control?.id ?? '';
+
       assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
       assert
         .dom('.hds-form-field__helper-text')
@@ -117,24 +127,29 @@ module(
         .hasAttribute('id', `error-${controlId}`);
     });
     test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+      const context = tracked({
+        showErrors: false,
+      });
+
       await render(
-        <template><Field @extraAriaDescribedBy="extra" as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.CharacterCount @maxLength={{10}} />
-          {{#if this.showErrors}}
-            <F.Error>This is the error</F.Error>
-          {{/if}}
-        </Field></template>,
+        <template>
+          <Field @extraAriaDescribedBy="extra" as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.CharacterCount @maxLength={{10}} />
+            {{#if context.showErrors}}
+              <F.Error>This is the error</F.Error>
+            {{/if}}
+          </Field>
+        </template>,
       );
 
-      this.set('showErrors', true);
+      context.showErrors = true;
       await settled();
+
       // the control ID is dynamically generated
-      let control = this.element.querySelector(
-        '.hds-form-field__control input',
-      );
-      let controlId = control.id;
+      let control = find('.hds-form-field__control input');
+      let controlId = control?.id ?? '';
       assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
       assert
         .dom('.hds-form-field__helper-text')
@@ -157,9 +172,11 @@ module(
 
     test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
       await render(
-        <template><Field @isRequired={{true}} as |F|>
+        <template>
+          <Field @isRequired={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('Required');
@@ -167,18 +184,22 @@ module(
     });
     test('it should append an indicator to the label text when user input is optional', async function (assert) {
       await render(
-        <template><Field @isOptional={{true}} as |F|>
+        <template>
+          <Field @isOptional={{true}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('(Optional)');
     });
     test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
       await render(
-        <template><Field required as |F|>
+        <template>
+          <Field required as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('input').hasAttribute('required');
       assert.dom('label .hds-form-indicator').doesNotExist();
@@ -187,18 +208,14 @@ module(
     // ACCESSIBILITY
 
     test('it automatically provides the ID relations between the elements', async function (assert) {
-      await render(
-        <template><Field @id="test-form-masked-input" /></template>,
-      );
+      await render(<template><Field @id="test-form-masked-input" /></template>);
       assert
         .dom('.hds-form-visibility-toggle')
         .hasAttribute('aria-controls', 'test-form-masked-input');
     });
 
     test('it updates the button label on toggle', async function (assert) {
-      await render(
-        <template><Field @id="test-form-masked-input" /></template>,
-      );
+      await render(<template><Field @id="test-form-masked-input" /></template>);
       assert
         .dom('.hds-form-visibility-toggle')
         .hasAttribute('aria-label', 'Show masked content');
@@ -210,7 +227,12 @@ module(
 
     test('it renders a custom toggle button label', async function (assert) {
       await render(
-        <template><Field @id="test-form-masked-input" @visibilityToggleAriaLabel="Show my masked content" /></template>,
+        <template>
+          <Field
+            @id="test-form-masked-input"
+            @visibilityToggleAriaLabel="Show my masked content"
+          />
+        </template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')
@@ -218,9 +240,7 @@ module(
     });
 
     test('it informs the user about visibility change on toggle', async function (assert) {
-      await render(
-        <template><Field @id="test-form-masked-input" /></template>,
-      );
+      await render(<template><Field @id="test-form-masked-input" /></template>);
       await click('.hds-form-visibility-toggle');
       assert
         .dom('.hds-form-visibility-toggle')
@@ -233,7 +253,12 @@ module(
 
     test('it renders a custom message on toggle', async function (assert) {
       await render(
-        <template><Field @id="test-form-masked-input" @visibilityToggleAriaMessageText="My input content is visible" /></template>,
+        <template>
+          <Field
+            @id="test-form-masked-input"
+            @visibilityToggleAriaMessageText="My input content is visible"
+          />
+        </template>,
       );
       assert
         .dom('.hds-form-visibility-toggle')

From 6e918cea21331f7d2552fddfa93f1cafaea4f80c Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:44:42 -0400
Subject: [PATCH 16/43] feat: convert radio card group tests to gts

---
 .../{group-test.gjs => group-test.gts}        | 132 ++++++++++--------
 1 file changed, 75 insertions(+), 57 deletions(-)
 rename showcase/tests/integration/components/hds/form/radio-card/{group-test.gjs => group-test.gts} (58%)

diff --git a/showcase/tests/integration/components/hds/form/radio-card/group-test.gjs b/showcase/tests/integration/components/hds/form/radio-card/group-test.gts
similarity index 58%
rename from showcase/tests/integration/components/hds/form/radio-card/group-test.gjs
rename to showcase/tests/integration/components/hds/form/radio-card/group-test.gts
index 6e460b2418c..0b266046eed 100644
--- a/showcase/tests/integration/components/hds/form/radio-card/group-test.gjs
+++ b/showcase/tests/integration/components/hds/form/radio-card/group-test.gts
@@ -5,8 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled } from '@ember/test-helpers';
-import Group from "@hashicorp/design-system-components/components/hds/form/radio-card/group";
+import { render, resetOnerror, settled, find } from '@ember/test-helpers';
+import Group from '@hashicorp/design-system-components/components/hds/form/radio-card/group';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/radio-card/group', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,9 +17,7 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(
-      <template><Group id="test-radio-card-group" /></template>,
-    );
+    await render(<template><Group id="test-radio-card-group" /></template>);
     assert
       .dom('#test-radio-card-group')
       .hasClass('hds-form-group--radio-cards');
@@ -28,7 +27,9 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the `@layout` argument provided', async function (assert) {
     await render(
-      <template><Group id="test-radio-card-group-layout" @layout="vertical" /></template>,
+      <template>
+        <Group id="test-radio-card-group-layout" @layout="vertical" />
+      </template>,
     );
     assert
       .dom('#test-radio-card-group-layout')
@@ -39,13 +40,15 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard />
-            <G.RadioCard />
-            <G.Error>This is the group error</G.Error>
-          </Group></template>,
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.RadioCard />
+          <G.RadioCard />
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
     );
     assert.dom('.hds-form-radio-card').exists();
     assert.dom('.hds-form-group__legend').exists();
@@ -69,49 +72,53 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard />
-            <G.RadioCard />
-            <G.Error>This is the group error</G.Error>
-          </Group></template>,
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.RadioCard />
+          <G.RadioCard />
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
     );
     // the IDs are dynamically generated
-    let groupHelperText = this.element.querySelector(
-      '.hds-form-group__helper-text',
-    );
-    let groupHelperTextId = groupHelperText.id;
-    let groupError = this.element.querySelector('.hds-form-group__error');
-    let groupErrorId = groupError.id;
+    let groupHelperText = find('.hds-form-group__helper-text');
+    let groupHelperTextId = groupHelperText?.id ?? '';
+    let groupError = find('.hds-form-group__error');
+    let groupErrorId = groupError?.id ?? '';
     assert
       .dom('input')
       .hasAttribute('aria-describedby', `${groupHelperTextId} ${groupErrorId}`);
   });
 
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    const context = tracked({
+      showErrors: false,
+    });
+
     await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard />
-            <G.RadioCard />
-            {{#if this.showErrors}}
-              <G.Error>This is the group error</G.Error>
-            {{/if}}
-          </Group></template>,
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.RadioCard />
+          <G.RadioCard />
+          {{#if context.showErrors}}
+            <G.Error>This is the group error</G.Error>
+          {{/if}}
+        </Group>
+      </template>,
     );
 
-    this.set('showErrors', true);
+    context.showErrors = true;
     await settled();
 
     // the IDs are dynamically generated
-    let groupHelperText = this.element.querySelector(
-      '.hds-form-group__helper-text',
-    );
-    let groupHelperTextId = groupHelperText.id;
-    let groupError = this.element.querySelector('.hds-form-group__error');
-    let groupErrorId = groupError.id;
+    let groupHelperText = find('.hds-form-group__helper-text');
+    let groupHelperTextId = groupHelperText?.id ?? '';
+    let groupError = find('.hds-form-group__error');
+    let groupErrorId = groupError?.id ?? '';
     assert
       .dom('input')
       .hasAttribute('aria-describedby', `${groupHelperTextId} ${groupErrorId}`);
@@ -121,13 +128,20 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should render the contextual components with CSS classes that reflect the arguments provided', async function (assert) {
     await render(
-      <template><Group @name="test-name" @alignment="center" @controlPosition="left" as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.RadioCard @maxWidth="50%" data-test="first-control" />
-            <G.RadioCard @maxWidth="50%" data-test="second-control" />
-            <G.Error>This is the group error</G.Error>
-          </Group></template>,
+      <template>
+        <Group
+          @name="test-name"
+          @alignment="center"
+          @controlPosition="left"
+          as |G|
+        >
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.RadioCard @maxWidth="50%" data-test="first-control" />
+          <G.RadioCard @maxWidth="50%" data-test="second-control" />
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
     );
     assert.dom('[data-test="first-control"]').hasAttribute('name', 'test-name');
     assert
@@ -145,20 +159,24 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
 
   test('it should append an indicator to the legend text when user input is required', async function (assert) {
     await render(
-      <template><Group @isRequired={{true}} as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.RadioCard />
-          </Group></template>,
+      <template>
+        <Group @isRequired={{true}} as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.RadioCard />
+        </Group>
+      </template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      <template><Group @isOptional={{true}} as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.RadioCard />
-          </Group></template>,
+      <template>
+        <Group @isOptional={{true}} as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.RadioCard />
+        </Group>
+      </template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');

From 1f21d2586b65689ee6bbcd1b70ae3b1c42cfa5b7 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 08:54:22 -0400
Subject: [PATCH 17/43] feat: convert select field tests to gts

---
 .../select/{field-test.gjs => field-test.gts} | 70 ++++++++++++-------
 1 file changed, 46 insertions(+), 24 deletions(-)
 rename showcase/tests/integration/components/hds/form/select/{field-test.gjs => field-test.gts} (77%)

diff --git a/showcase/tests/integration/components/hds/form/select/field-test.gjs b/showcase/tests/integration/components/hds/form/select/field-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/form/select/field-test.gjs
rename to showcase/tests/integration/components/hds/form/select/field-test.gts
index 524a2e5e464..02891ab85c7 100644
--- a/showcase/tests/integration/components/hds/form/select/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/select/field-test.gts
@@ -5,8 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/select/field";
+import { render, resetOnerror, settled, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/select/field';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/select/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,7 +25,11 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
 
   test('it should render the options passed via contextual component', async function (assert) {
     await render(
-      <template><Field id="test-form-select" as |F|><F.Options><option value="abc123">This is the option</option></F.Options></Field></template>,
+      <template>
+        <Field id="test-form-select" as |F|><F.Options><option
+              value="abc123"
+            >This is the option</option></F.Options></Field>
+      </template>,
     );
     assert.dom('select option').exists();
     assert.dom('select option').hasText('This is the option');
@@ -56,11 +61,13 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field as |F|>
+      <template>
+        <Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -75,15 +82,17 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control select');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control select');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -99,21 +108,28 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
       .hasAttribute('id', `error-${controlId}`);
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    const context = tracked({
+      showErrors: false,
+    });
+
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          {{#if this.showErrors}}
+          {{#if context.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Field></template>,
+        </Field>
+      </template>,
     );
 
-    this.set('showErrors', true);
+    context.showErrors = true;
     await settled();
+
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control select');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control select');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -133,9 +149,11 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      <template><Field @isRequired={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isRequired={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -143,18 +161,22 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      <template><Field @isOptional={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isOptional={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
   });
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      <template><Field required as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field required as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('select').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();

From 9bf04e6d32baca48647415eccf34a41c8b438992 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:10:16 -0400
Subject: [PATCH 18/43] feat: convert textarea field tests to gts

---
 .../{field-test.gjs => field-test.gts}        | 75 +++++++++++--------
 1 file changed, 42 insertions(+), 33 deletions(-)
 rename showcase/tests/integration/components/hds/form/textarea/{field-test.gjs => field-test.gts} (79%)

diff --git a/showcase/tests/integration/components/hds/form/textarea/field-test.gjs b/showcase/tests/integration/components/hds/form/textarea/field-test.gts
similarity index 79%
rename from showcase/tests/integration/components/hds/form/textarea/field-test.gjs
rename to showcase/tests/integration/components/hds/form/textarea/field-test.gts
index cfe81788ee6..33d4b223303 100644
--- a/showcase/tests/integration/components/hds/form/textarea/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/textarea/field-test.gts
@@ -5,8 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/textarea/field";
+import { render, resetOnerror, settled, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/textarea/field';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/textarea/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -37,15 +38,11 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   // WIDTH & HEIGHT
 
   test('it should render the textarea control with a fixed width if a @width value is passed', async function (assert) {
-    await render(<template>
-      <Field @width="248px" />
-    </template>);
+    await render(<template><Field @width="248px" /></template>);
     assert.dom('textarea').hasStyle({ width: '248px' });
   });
   test('it should render the textarea control with a fixed height if a @height value is passed', async function (assert) {
-    await render(<template>
-      <Field @height="248px" />
-    </template>);
+    await render(<template><Field @height="248px" /></template>);
     assert.dom('textarea').hasStyle({ height: '248px' });
   });
 
@@ -60,12 +57,14 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field @value="abc123" as |F|>
+      <template>
+        <Field @value="abc123" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -82,18 +81,18 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector(
-      '.hds-form-field__control textarea',
-    );
-    let controlId = control.id;
+    let control = find('.hds-form-field__control textarea');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -113,25 +112,29 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   });
 
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    const context = tracked({
+      showErrors: false,
+    });
+
     await render(
-      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.CharacterCount @maxLength={{10}} />
-          {{#if this.showErrors}}
+          {{#if context.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Field></template>,
+        </Field>
+      </template>,
     );
 
-    this.set('showErrors', true);
+    context.showErrors = true;
     await settled();
 
     // the control ID is dynamically generated
-    let control = this.element.querySelector(
-      '.hds-form-field__control textarea',
-    );
-    let controlId = control.id;
+    let control = find('.hds-form-field__control textarea');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -154,9 +157,11 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      <template><Field @isRequired={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isRequired={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -164,18 +169,22 @@ module('Integration | Component | hds/form/textarea/field', function (hooks) {
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      <template><Field @isOptional={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isOptional={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
   });
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      <template><Field required as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field required as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('textarea').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();

From a527d1d8a7329f3d442d9307b3a80c1fb391844e Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:16:33 -0400
Subject: [PATCH 19/43] feat: convert character count tests to gts

---
 .../{index-test.gjs => index-test.gts}        | 140 ++++++++++++++----
 1 file changed, 113 insertions(+), 27 deletions(-)
 rename showcase/tests/integration/components/hds/form/character-count/{index-test.gjs => index-test.gts} (58%)

diff --git a/showcase/tests/integration/components/hds/form/character-count/index-test.gjs b/showcase/tests/integration/components/hds/form/character-count/index-test.gts
similarity index 58%
rename from showcase/tests/integration/components/hds/form/character-count/index-test.gjs
rename to showcase/tests/integration/components/hds/form/character-count/index-test.gts
index 79a22ab48b9..80bf5d25ca5 100644
--- a/showcase/tests/integration/components/hds/form/character-count/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/character-count/index-test.gts
@@ -6,17 +6,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, typeIn } from '@ember/test-helpers';
-import CharacterCount from "@hashicorp/design-system-components/components/hds/form/character-count/index";
-import { on } from "@ember/modifier";
+import CharacterCount from '@hashicorp/design-system-components/components/hds/form/character-count/index';
+import { on } from '@ember/modifier';
+import { tracked } from 'tracked-built-ins';
 
 module(
   'Integration | Component | hds/form/character-count/index',
   function (hooks) {
     setupRenderingTest(hooks);
-    hooks.beforeEach(function () {
-      this.set('value', '');
-      this.update = (event) => this.set('value', event.target.value);
-    });
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
@@ -28,7 +25,12 @@ module(
     });
     test('it should render with a CSS class provided via the @contextualClass argument', async function (assert) {
       await render(
-        <template><CharacterCount @contextualClass="my-class" id="test-form-character-count" /></template>,
+        <template>
+          <CharacterCount
+            @contextualClass="my-class"
+            id="test-form-character-count"
+          />
+        </template>,
       );
       assert.dom('#test-form-character-count').hasClass('my-class');
     });
@@ -45,10 +47,23 @@ module(
     // CONTENT
 
     test('it renders a character count with the default predefined format', async function (assert) {
+      const context = tracked({
+        value: '',
+      });
+
+      const onInput = (event: Event) => {
+        context.value = (event.target as HTMLInputElement).value;
+      };
+
       await render(
         <template>
-          <input id="input-1" value={{this.value}} {{on "input" this.update}} />
-          <CharacterCount @value={{this.value}} @controlId="input-1" id="test-form-character-count" /></template>,
+          <input id="input-1" value={{context.value}} {{on "input" onInput}} />
+          <CharacterCount
+            @value={{context.value}}
+            @controlId="input-1"
+            id="test-form-character-count"
+          />
+        </template>,
       );
       assert.dom('#test-form-character-count').hasText('0 characters entered');
 
@@ -56,10 +71,28 @@ module(
       assert.dom('#test-form-character-count').hasText('2 characters entered');
     });
     test('it renders a character count in the predefined format when only @maxLength is set', async function (assert) {
+      const context = tracked({
+        value: '',
+      });
+
+      const onInput = (event: Event) => {
+        context.value = (event.target as HTMLInputElement).value;
+      };
+
       await render(
         <template>
-          <input id="input-max-length" value={{this.value}} {{on "input" this.update}} />
-          <CharacterCount @value={{this.value}} @maxLength={{25}} @controlId="input-max-length" id="test-form-character-count" /></template>,
+          <input
+            id="input-max-length"
+            value={{context.value}}
+            {{on "input" onInput}}
+          />
+          <CharacterCount
+            @value={{context.value}}
+            @maxLength={{25}}
+            @controlId="input-max-length"
+            id="test-form-character-count"
+          />
+        </template>,
       );
       assert.dom('#test-form-character-count').hasText('25 characters allowed');
 
@@ -87,10 +120,28 @@ module(
         .hasText('Exceeded by 4 characters');
     });
     test('it renders a character count in the predefined format when only @minLength is set', async function (assert) {
+      const context = tracked({
+        value: '',
+      });
+
+      const onInput = (event: Event) => {
+        context.value = (event.target as HTMLInputElement).value;
+      };
+
       await render(
         <template>
-          <input id="input-min-length" value={{this.value}} {{on "input" this.update}} />
-          <CharacterCount @value={{this.value}} @minLength={{3}} @controlId="input-min-length" id="test-form-character-count" /></template>,
+          <input
+            id="input-min-length"
+            value={{context.value}}
+            {{on "input" onInput}}
+          />
+          <CharacterCount
+            @value={{context.value}}
+            @minLength={{3}}
+            @controlId="input-min-length"
+            id="test-form-character-count"
+          />
+        </template>,
       );
       assert.dom('#test-form-character-count').hasText('3 characters required');
 
@@ -108,10 +159,29 @@ module(
       assert.dom('#test-form-character-count').hasText('3 characters entered');
     });
     test('it renders a character count in the predefined format when both @minLength and @maxLength are set', async function (assert) {
+      const context = tracked({
+        value: '',
+      });
+
+      const onInput = (event: Event) => {
+        context.value = (event.target as HTMLInputElement).value;
+      };
+
       await render(
         <template>
-          <input id="input-minmax-length" value={{this.value}} {{on "input" this.update}} />
-          <CharacterCount @value={{this.value}} @minLength={{3}} @maxLength={{25}} @controlId="input-minmax-length" id="test-form-character-count" /></template>,
+          <input
+            id="input-minmax-length"
+            value={{context.value}}
+            {{on "input" onInput}}
+          />
+          <CharacterCount
+            @value={{context.value}}
+            @minLength={{3}}
+            @maxLength={{25}}
+            @controlId="input-minmax-length"
+            id="test-form-character-count"
+          />
+        </template>,
       );
       assert.dom('#test-form-character-count').hasText('3 characters required');
 
@@ -131,17 +201,29 @@ module(
         .hasText('Exceeded by 4 characters');
     });
     test('it renders a character count in custom format', async function (assert) {
-      this.set('value', 'with custom content');
       await render(
         <template>
-        <input type="hidden" value={{this.value}} id="input-2" {{on "input" this.update}} />
-        <CharacterCount @value={{this.value}} @minLength={{20}} @maxLength={{40}} @controlId="input-2" id="test-form-character-count" as |CC|>
-          maxLength {{CC.maxLength}}
-          minLength {{CC.minLength}}
-          remaining {{CC.remaining}}
-          shortfall {{CC.shortfall}}
-          currentLength {{CC.currentLength}}
-        </CharacterCount></template>,
+          <input type="hidden" value="with custom content" id="input-2" />
+          <CharacterCount
+            @value="with custom content"
+            @minLength={{20}}
+            @maxLength={{40}}
+            @controlId="input-2"
+            id="test-form-character-count"
+            as |CC|
+          >
+            maxLength
+            {{CC.maxLength}}
+            minLength
+            {{CC.minLength}}
+            remaining
+            {{CC.remaining}}
+            shortfall
+            {{CC.shortfall}}
+            currentLength
+            {{CC.currentLength}}
+          </CharacterCount>
+        </template>,
       );
       assert
         .dom('#test-form-character-count')
@@ -153,11 +235,15 @@ module(
     // A11y
 
     test('it should present the character count as a live region', async function (assert) {
-      this.set('value', 'with default content');
       await render(
         <template>
-          <input type="hidden" value={{this.value}} id="input-3" />
-          <CharacterCount @maxLength={{40}} @controlId="input-3" id="test-form-character-count" /></template>,
+          <input type="hidden" value="with default content" id="input-3" />
+          <CharacterCount
+            @maxLength={{40}}
+            @controlId="input-3"
+            id="test-form-character-count"
+          />
+        </template>,
       );
       assert
         .dom('#test-form-character-count')

From a1a2618229b114a6db61cc9ac3cb41c9839c5f4c Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:23:04 -0400
Subject: [PATCH 20/43] feat: convert rest of dropdown tests to gts

---
 .../components/hds/dropdown/index-test.gjs    | 259 -------------
 .../components/hds/dropdown/index-test.gts    | 341 ++++++++++++++++++
 .../{checkbox-test.gjs => checkbox-test.gts}  |  51 ++-
 ...{checkmark-test.gjs => checkmark-test.gts} |  44 ++-
 .../{radio-test.gjs => radio-test.gts}        |  51 ++-
 .../toggle/{icon-test.gjs => icon-test.gts}   |  94 ++++-
 6 files changed, 519 insertions(+), 321 deletions(-)
 delete mode 100644 showcase/tests/integration/components/hds/dropdown/index-test.gjs
 create mode 100644 showcase/tests/integration/components/hds/dropdown/index-test.gts
 rename showcase/tests/integration/components/hds/dropdown/list-item/{checkbox-test.gjs => checkbox-test.gts} (65%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{checkmark-test.gjs => checkmark-test.gts} (70%)
 rename showcase/tests/integration/components/hds/dropdown/list-item/{radio-test.gjs => radio-test.gts} (66%)
 rename showcase/tests/integration/components/hds/dropdown/toggle/{icon-test.gjs => icon-test.gts} (68%)

diff --git a/showcase/tests/integration/components/hds/dropdown/index-test.gjs b/showcase/tests/integration/components/hds/dropdown/index-test.gjs
deleted file mode 100644
index 44eb09edf56..00000000000
--- a/showcase/tests/integration/components/hds/dropdown/index-test.gjs
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, click } from '@ember/test-helpers';
-import { wait } from 'showcase/tests/helpers';
-import Dropdown from "@hashicorp/design-system-components/components/hds/dropdown/index";
-import style_ from "ember-style-modifier/modifiers/style";
-import { on } from "@ember/modifier";
-
-module('Integration | Component | hds/dropdown/index', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" />
-      </Dropdown>
-    </template>);
-    assert.dom('#test-dropdown').hasClass('hds-dropdown');
-  });
-
-  // NAMED YIELDS
-
-  test('it renders the "toggle" sub-components', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.ToggleIcon @icon="user" @text="toggle icon" id="test-toggle-icon" />
-      </Dropdown>
-    </template>);
-    assert.dom('#test-dropdown #test-toggle-button').exists();
-    assert.dom('#test-dropdown #test-toggle-icon').exists();
-  });
-  test('it renders the "list-item" sub-components', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Description @text="description" id="test-list-item-description" />
-        <D.Generic>
-          <div id="test-list-item-generic" />
-        </D.Generic>
-        <D.Interactive @route="page-components.dropdown" @text="interactive" id="test-list-item-interactive" />
-        <D.Separator id="test-list-item-separator" />
-        <D.Title @text="title" id="test-list-item-title" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown ul').exists();
-    assert.dom('#test-dropdown #test-list-item-description').exists();
-    assert.dom('#test-dropdown #test-list-item-generic').exists();
-    assert.dom('#test-dropdown #test-list-item-interactive').exists();
-    assert.dom('#test-dropdown #test-list-item-separator').exists();
-    assert.dom('#test-dropdown #test-list-item-title').exists();
-  });
-  test('it renders the "header"/"footer" sub-components', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Header id="test-header">Header</D.Header>
-        <D.Footer id="test-footer">Footer</D.Footer>
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown #test-header').hasText('Header');
-    assert.dom('#test-dropdown #test-footer').hasText('Footer');
-  });
-
-  test('it renders the "header"/"footer" sub-components with separators', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Header @hasDivider={{true}} id="test-header">Header</D.Header>
-        <D.Footer @hasDivider={{true}} id="test-footer">Footer</D.Footer>
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert
-      .dom('#test-dropdown #test-header')
-      .hasClass('hds-dropdown__header--with-divider');
-    assert
-      .dom('#test-dropdown #test-footer')
-      .hasClass('hds-dropdown__footer--with-divider');
-  });
-
-  test('it does not render the content sub-components when closed, by default', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Header id="test-header">Header</D.Header>
-        <D.Interactive @route="page-components.dropdown" @text="interactive" />
-        <D.Footer id="test-footer">Footer</D.Footer>
-      </Dropdown>
-    </template>);
-
-    // the container should exist in the DOM
-    assert.dom('#test-dropdown .hds-dropdown__content').exists();
-    // but the content should not
-    assert.dom('#test-dropdown #test-header').doesNotExist();
-    assert.dom('#test-dropdown .hds-dropdown__list').doesNotExist();
-    assert.dom('#test-dropdown #test-footer').doesNotExist();
-  });
-
-  test('it renders the content sub-components even when closed, when `@preserveContentInDom` is `true`', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" @preserveContentInDom={{true}} as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Header id="test-header">Header</D.Header>
-        <D.Interactive id="test-list-item" @route="page-components.dropdown" @text="interactive-always-rendered" />
-        <D.Footer id="test-footer">Footer</D.Footer>
-      </Dropdown>
-    </template>);
-
-    // the container should exist in the DOM
-    assert.dom('#test-dropdown .hds-dropdown__content').exists();
-    // the list content should too
-    assert.dom('#test-dropdown #test-header').exists();
-    assert.dom('#test-dropdown .hds-dropdown__list').exists();
-    assert.dom('#test-dropdown #test-list-item').exists();
-    assert.dom('#test-dropdown #test-footer').exists();
-  });
-
-  // POSITION
-
-  test('it should render the content aligned on the right by default', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert
-      .dom('#test-dropdown .hds-dropdown__content')
-      .hasClass('hds-dropdown__content--position-bottom-right');
-  });
-  test('it should render the content aligned on the left if the value of @listPosition is "bottom-left"', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" @listPosition="bottom-left" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert
-      .dom('#test-dropdown .hds-dropdown__content')
-      .hasClass('hds-dropdown__content--position-bottom-left');
-  });
-  test('it should render the element as `inline` if the value of @isInline is "true"', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" @isInline={{true}} as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown').hasClass('hds-dropdown--is-inline');
-  });
-
-  // WIDTH
-
-  test('it should render the content with a fixed width if a @width value is passed', async function (assert) {
-    await render(<template>
-      <Dropdown @width="248px" id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('.hds-dropdown__content').hasStyle({ width: '248px' });
-  });
-
-  test('it should render the content with the same width as the ToggleButton if @matchToggleWidth is set', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" @matchToggleWidth={{true}} as |D|>
-        <D.ToggleButton {{style_ width="200px"}} @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @route="page-components.dropdown" @text="interactive" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    await wait();
-    // the expected value is 200px, but the ember-testing frame has a `transform: scale(0.5);`
-    assert.dom('.hds-dropdown__content').hasStyle({ width: '100px' });
-  });
-
-  // PRESERVE DISCLOSED CONTENT WHEN INTERACTED WITH
-
-  test('it should preserve the content visible when interacted with', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @route="page-components.dropdown" id="test-list-item-interactive" @text="interactive" />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown #test-list-item-interactive').exists();
-    // click on the dropdown content container as a minimal interaction with the content;
-    // it could be followed by selection, a right click etc.
-    await click('.hds-dropdown__content');
-    assert.dom('#test-dropdown #test-list-item-interactive').exists();
-  });
-
-  // CLOSE DISCLOSED CONTENT ON CLICK
-
-  test('it should hide the content when an interactive element triggers `close`', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @text="interactive" id="test-list-item-interactive" {{on "click" D.close}} />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown #test-list-item-interactive').exists();
-    await click('#test-list-item-interactive');
-    assert.dom('#test-dropdown #test-list-item-interactive').doesNotExist();
-  });
-
-  // ACCESSIBILITY
-
-  test('it should render a list of items without a role if no selectable items are passed in', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Interactive @text="interactive" id="test-list-item-interactive" {{on "click" D.close}} />
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown ul').doesNotHaveAttribute('role');
-  });
-  test('it should render a list of items with a `listbox` role, refering an existing `id` via `aria-labelledby` if selectable items are passed in', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" id="test-toggle-button" />
-        <D.Checkmark>Checkmark</D.Checkmark>
-      </Dropdown>
-    </template>);
-    await click('button#test-toggle-button');
-    assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
-    assert
-      .dom('#test-dropdown ul')
-      .hasAttribute('aria-labelledby', 'test-toggle-button');
-  });
-  test('it should render a list of items with a `listbox` role, refering an generated `id` via `aria-labelledby` if selectable items are passed in', async function (assert) {
-    await render(<template>
-      <Dropdown id="test-dropdown" as |D|>
-        <D.ToggleButton @text="toggle button" />
-        <D.Checkmark>Checkmark</D.Checkmark>
-      </Dropdown>
-    </template>);
-    const button = this.element.querySelector('.hds-dropdown-toggle-button');
-    const buttonId = button.id;
-    await click('button.hds-dropdown-toggle-button');
-    assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
-    assert.dom('#test-dropdown ul').hasAttribute('aria-labelledby', buttonId);
-  });
-});
diff --git a/showcase/tests/integration/components/hds/dropdown/index-test.gts b/showcase/tests/integration/components/hds/dropdown/index-test.gts
new file mode 100644
index 00000000000..5ad49538fc9
--- /dev/null
+++ b/showcase/tests/integration/components/hds/dropdown/index-test.gts
@@ -0,0 +1,341 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render, click, find } from '@ember/test-helpers';
+import { wait } from 'showcase/tests/helpers';
+import Dropdown from '@hashicorp/design-system-components/components/hds/dropdown/index';
+import style_ from 'ember-style-modifier/modifiers/style';
+import { on } from '@ember/modifier';
+
+module('Integration | Component | hds/dropdown/index', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" />
+        </Dropdown>
+      </template>,
+    );
+    assert.dom('#test-dropdown').hasClass('hds-dropdown');
+  });
+
+  // NAMED YIELDS
+
+  test('it renders the "toggle" sub-components', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.ToggleIcon
+            @icon="user"
+            @text="toggle icon"
+            id="test-toggle-icon"
+          />
+        </Dropdown>
+      </template>,
+    );
+    assert.dom('#test-dropdown #test-toggle-button').exists();
+    assert.dom('#test-dropdown #test-toggle-icon').exists();
+  });
+  test('it renders the "list-item" sub-components', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Description @text="description" id="test-list-item-description" />
+          <D.Generic>
+            <div id="test-list-item-generic" />
+          </D.Generic>
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+            id="test-list-item-interactive"
+          />
+          <D.Separator id="test-list-item-separator" />
+          <D.Title @text="title" id="test-list-item-title" />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown ul').exists();
+    assert.dom('#test-dropdown #test-list-item-description').exists();
+    assert.dom('#test-dropdown #test-list-item-generic').exists();
+    assert.dom('#test-dropdown #test-list-item-interactive').exists();
+    assert.dom('#test-dropdown #test-list-item-separator').exists();
+    assert.dom('#test-dropdown #test-list-item-title').exists();
+  });
+  test('it renders the "header"/"footer" sub-components', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Header id="test-header">Header</D.Header>
+          <D.Footer id="test-footer">Footer</D.Footer>
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown #test-header').hasText('Header');
+    assert.dom('#test-dropdown #test-footer').hasText('Footer');
+  });
+
+  test('it renders the "header"/"footer" sub-components with separators', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Header @hasDivider={{true}} id="test-header">Header</D.Header>
+          <D.Footer @hasDivider={{true}} id="test-footer">Footer</D.Footer>
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert
+      .dom('#test-dropdown #test-header')
+      .hasClass('hds-dropdown__header--with-divider');
+    assert
+      .dom('#test-dropdown #test-footer')
+      .hasClass('hds-dropdown__footer--with-divider');
+  });
+
+  test('it does not render the content sub-components when closed, by default', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Header id="test-header">Header</D.Header>
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+          />
+          <D.Footer id="test-footer">Footer</D.Footer>
+        </Dropdown>
+      </template>,
+    );
+
+    // the container should exist in the DOM
+    assert.dom('#test-dropdown .hds-dropdown__content').exists();
+    // but the content should not
+    assert.dom('#test-dropdown #test-header').doesNotExist();
+    assert.dom('#test-dropdown .hds-dropdown__list').doesNotExist();
+    assert.dom('#test-dropdown #test-footer').doesNotExist();
+  });
+
+  test('it renders the content sub-components even when closed, when `@preserveContentInDom` is `true`', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" @preserveContentInDom={{true}} as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Header id="test-header">Header</D.Header>
+          <D.Interactive
+            id="test-list-item"
+            @route="page-components.dropdown"
+            @text="interactive-always-rendered"
+          />
+          <D.Footer id="test-footer">Footer</D.Footer>
+        </Dropdown>
+      </template>,
+    );
+
+    // the container should exist in the DOM
+    assert.dom('#test-dropdown .hds-dropdown__content').exists();
+    // the list content should too
+    assert.dom('#test-dropdown #test-header').exists();
+    assert.dom('#test-dropdown .hds-dropdown__list').exists();
+    assert.dom('#test-dropdown #test-list-item').exists();
+    assert.dom('#test-dropdown #test-footer').exists();
+  });
+
+  // POSITION
+
+  test('it should render the content aligned on the right by default', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert
+      .dom('#test-dropdown .hds-dropdown__content')
+      .hasClass('hds-dropdown__content--position-bottom-right');
+  });
+  test('it should render the content aligned on the left if the value of @listPosition is "bottom-left"', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" @listPosition="bottom-left" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert
+      .dom('#test-dropdown .hds-dropdown__content')
+      .hasClass('hds-dropdown__content--position-bottom-left');
+  });
+  test('it should render the element as `inline` if the value of @isInline is "true"', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" @isInline={{true}} as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown').hasClass('hds-dropdown--is-inline');
+  });
+
+  // WIDTH
+
+  test('it should render the content with a fixed width if a @width value is passed', async function (assert) {
+    await render(
+      <template>
+        <Dropdown @width="248px" id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('.hds-dropdown__content').hasStyle({ width: '248px' });
+  });
+
+  test('it should render the content with the same width as the ToggleButton if @matchToggleWidth is set', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" @matchToggleWidth={{true}} as |D|>
+          <D.ToggleButton
+            {{style_ width="200px"}}
+            @text="toggle button"
+            id="test-toggle-button"
+          />
+          <D.Interactive
+            @route="page-components.dropdown"
+            @text="interactive"
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    await wait();
+    // the expected value is 200px, but the ember-testing frame has a `transform: scale(0.5);`
+    assert.dom('.hds-dropdown__content').hasStyle({ width: '100px' });
+  });
+
+  // PRESERVE DISCLOSED CONTENT WHEN INTERACTED WITH
+
+  test('it should preserve the content visible when interacted with', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @route="page-components.dropdown"
+            id="test-list-item-interactive"
+            @text="interactive"
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown #test-list-item-interactive').exists();
+    // click on the dropdown content container as a minimal interaction with the content;
+    // it could be followed by selection, a right click etc.
+    await click('.hds-dropdown__content');
+    assert.dom('#test-dropdown #test-list-item-interactive').exists();
+  });
+
+  // CLOSE DISCLOSED CONTENT ON CLICK
+
+  test('it should hide the content when an interactive element triggers `close`', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @text="interactive"
+            id="test-list-item-interactive"
+            {{on "click" D.close}}
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown #test-list-item-interactive').exists();
+    await click('#test-list-item-interactive');
+    assert.dom('#test-dropdown #test-list-item-interactive').doesNotExist();
+  });
+
+  // ACCESSIBILITY
+
+  test('it should render a list of items without a role if no selectable items are passed in', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Interactive
+            @text="interactive"
+            id="test-list-item-interactive"
+            {{on "click" D.close}}
+          />
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown ul').doesNotHaveAttribute('role');
+  });
+  test('it should render a list of items with a `listbox` role, refering an existing `id` via `aria-labelledby` if selectable items are passed in', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" id="test-toggle-button" />
+          <D.Checkmark>Checkmark</D.Checkmark>
+        </Dropdown>
+      </template>,
+    );
+    await click('button#test-toggle-button');
+    assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
+    assert
+      .dom('#test-dropdown ul')
+      .hasAttribute('aria-labelledby', 'test-toggle-button');
+  });
+  test('it should render a list of items with a `listbox` role, refering an generated `id` via `aria-labelledby` if selectable items are passed in', async function (assert) {
+    await render(
+      <template>
+        <Dropdown id="test-dropdown" as |D|>
+          <D.ToggleButton @text="toggle button" />
+          <D.Checkmark>Checkmark</D.Checkmark>
+        </Dropdown>
+      </template>,
+    );
+    const button = find('.hds-dropdown-toggle-button');
+    await click('button.hds-dropdown-toggle-button');
+
+    assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
+    assert
+      .dom('#test-dropdown ul')
+      .hasAttribute('aria-labelledby', button?.id ?? '');
+  });
+});
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gts
similarity index 65%
rename from showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gts
index 44568e74e91..11b6aa9fc96 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render } from '@ember/test-helpers';
-import Checkbox from "@hashicorp/design-system-components/components/hds/dropdown/list-item/checkbox";
+import { render, find } from '@ember/test-helpers';
+import Checkbox from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkbox';
 
 module(
   'Integration | Component | hds/dropdown/list-item/checkbox',
@@ -15,14 +15,18 @@ module(
 
     test('it renders the "list-item/checkbox"', async function (assert) {
       await render(
-        <template><Checkbox>Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox id="test-checkbox-item">Checkbox item</Checkbox>
+        </template>,
       );
-      assert.dom(this.element).exists();
+      assert.dom('#test-checkbox-item').exists();
     });
 
     test('it should render the "list-item/checkbox" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Checkbox>Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox>Checkbox item</Checkbox>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -34,7 +38,9 @@ module(
 
     test('it should render the "list-item" with a checkbox control', async function (assert) {
       await render(
-        <template><Checkbox>Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox>Checkbox item</Checkbox>
+        </template>,
       );
       assert.dom('.hds-form-checkbox').exists();
     });
@@ -43,7 +49,10 @@ module(
 
     test('it should forward the `id` and `value` arguments to the input control', async function (assert) {
       await render(
-        <template><Checkbox @id="id" @value="value">Checkbox item</Checkbox></template>,
+        <template>
+          {{! @glint-expect-error - testing invalid component usage (@id arg doesn't exist) }}
+          <Checkbox @id="id" @value="value">Checkbox item</Checkbox>
+        </template>,
       );
       assert.dom('.hds-form-checkbox').hasAttribute('id', 'id');
       assert.dom('.hds-form-checkbox').hasValue('value');
@@ -52,22 +61,24 @@ module(
     // CONTROL-LABEL ASSOCIATION
     test('it automatically creates the control-label relationship via generated id', async function (assert) {
       await render(
-        <template><Checkbox @value="value">Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox @value="value">Checkbox item</Checkbox>
+        </template>,
       );
-      let control = this.element.querySelector(
-        '.hds-dropdown-list-item__control',
-      );
-      let controlId = control.id;
+
+      let control = find('.hds-dropdown-list-item__control');
       assert
         .dom('.hds-dropdown-list-item__label')
-        .hasAttribute('for', controlId);
+        .hasAttribute('for', control?.id ?? '');
     });
 
     // ICON
 
     test('if an icon is declared the flight icon should render in the component', async function (assert) {
       await render(
-        <template><Checkbox @icon="hexagon">Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox @icon="hexagon">Checkbox item</Checkbox>
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -76,7 +87,9 @@ module(
 
     test('it should render the content passed as block in a form label', async function (assert) {
       await render(
-        <template><Checkbox>Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox>Checkbox item</Checkbox>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item__control').exists();
       assert.dom('.hds-dropdown-list-item__label').hasText('Checkbox item');
@@ -86,7 +99,9 @@ module(
 
     test('it should render with a result count badge', async function (assert) {
       await render(
-        <template><Checkbox @count="10">Checkbox item</Checkbox></template>,
+        <template>
+          <Checkbox @count="10">Checkbox item</Checkbox>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item__count').hasText('10');
     });
@@ -95,7 +110,9 @@ module(
 
     test('it should render as checked if `checked` is true', async function (assert) {
       await render(
-        <template><Checkbox checked={{true}}>Checkbox</Checkbox></template>,
+        <template>
+          <Checkbox checked={{true}}>Checkbox</Checkbox>
+        </template>,
       );
       assert.dom('.hds-form-checkbox').isChecked();
     });
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gts
similarity index 70%
rename from showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gts
index daebf3dd70e..27f7c7da0f4 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/checkmark-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
-import Checkmark from "@hashicorp/design-system-components/components/hds/dropdown/list-item/checkmark";
+import Checkmark from '@hashicorp/design-system-components/components/hds/dropdown/list-item/checkmark';
 
 module(
   'Integration | Component | hds/dropdown/list-item/checkmark',
@@ -15,14 +15,18 @@ module(
 
     test('it renders the "list-item/checkmark"', async function (assert) {
       await render(
-        <template><Checkmark>Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark id="test-checkmark-item">Checkmark item</Checkmark>
+        </template>,
       );
-      assert.dom(this.element).exists();
+      assert.dom('#test-checkmark-item').exists();
     });
 
     test('it should render the "list-item/checkmark" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Checkmark>Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark>Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -34,19 +38,25 @@ module(
 
     test('it should render the "list-item" with a button by default"', async function (assert) {
       await render(
-        <template><Checkmark>Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark>Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('button.hds-dropdown-list-item__interactive').exists();
     });
     test('it should render the "list-item" with a link if it has a @route parameter"', async function (assert) {
       await render(
-        <template><Checkmark @route="index">Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark @route="index">Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('a.hds-dropdown-list-item__interactive').exists();
     });
     test('it should render the "list-item" with a link if it has a @href argument"', async function (assert) {
       await render(
-        <template><Checkmark @href="#">Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark @href="#">Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('a.hds-dropdown-list-item__interactive').exists();
     });
@@ -55,7 +65,9 @@ module(
 
     test('if an icon is declared the flight icon should render in the component', async function (assert) {
       await render(
-        <template><Checkmark @icon="hexagon">Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark @icon="hexagon">Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -64,7 +76,9 @@ module(
 
     test('it should render the content passed as block', async function (assert) {
       await render(
-        <template><Checkmark>Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark>Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item').hasText('Checkmark item');
     });
@@ -73,7 +87,9 @@ module(
 
     test('it should render with a result count badge', async function (assert) {
       await render(
-        <template><Checkmark @count="10">Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark @count="10">Checkmark item</Checkmark>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item__count').hasText('10');
     });
@@ -82,7 +98,9 @@ module(
 
     test('it should render as selected if `@selected` is true', async function (assert) {
       await render(
-        <template><Checkmark @selected={{true}}>Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark @selected={{true}}>Checkmark item</Checkmark>
+        </template>,
       );
       assert
         .dom('.hds-dropdown-list-item')
@@ -94,7 +112,9 @@ module(
 
     test('it should present the interactive element as a selectable option', async function (assert) {
       await render(
-        <template><Checkmark @selected={{true}}>Checkmark item</Checkmark></template>,
+        <template>
+          <Checkmark @selected={{true}}>Checkmark item</Checkmark>
+        </template>,
       );
       assert
         .dom('.hds-dropdown-list-item__interactive')
diff --git a/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gjs b/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gts
similarity index 66%
rename from showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gts
index d80cef6354a..5f702795f5f 100644
--- a/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render } from '@ember/test-helpers';
-import Radio from "@hashicorp/design-system-components/components/hds/dropdown/list-item/radio";
+import { render, find } from '@ember/test-helpers';
+import Radio from '@hashicorp/design-system-components/components/hds/dropdown/list-item/radio';
 
 module(
   'Integration | Component | hds/dropdown/list-item/radio',
@@ -15,14 +15,18 @@ module(
 
     test('it renders the "list-item/radio"', async function (assert) {
       await render(
-        <template><Radio>Radio item</Radio></template>,
+        <template>
+          <Radio id="test-radio-item">Radio item</Radio>
+        </template>,
       );
-      assert.dom(this.element).exists();
+      assert.dom('#test-radio-item').exists();
     });
 
     test('it should render the "list-item/radio" as a <li> element with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Radio>Radio item</Radio></template>,
+        <template>
+          <Radio>Radio item</Radio>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item').hasTagName('li');
       assert
@@ -34,7 +38,9 @@ module(
 
     test('it should render the "list-item" with a radio control', async function (assert) {
       await render(
-        <template><Radio>Radio item</Radio></template>,
+        <template>
+          <Radio>Radio item</Radio>
+        </template>,
       );
       assert.dom('.hds-form-radio').exists();
     });
@@ -43,7 +49,10 @@ module(
 
     test('it should forward the `id` and `value` arguments to the input control', async function (assert) {
       await render(
-        <template><Radio @id="id" @value="value">Radio item</Radio></template>,
+        <template>
+          {{! @glint-expect-error - testing invalid component usage (@id arg doesn't exist) }}
+          <Radio @id="id" @value="value">Radio item</Radio>
+        </template>,
       );
       assert.dom('.hds-form-radio').hasAttribute('id', 'id');
       assert.dom('.hds-form-radio').hasValue('value');
@@ -52,22 +61,24 @@ module(
     // CONTROL-LABEL ASSOCIATION
     test('it automatically creates the control-label relationship via generated id', async function (assert) {
       await render(
-        <template><Radio @value="value">Checkbox item</Radio></template>,
+        <template>
+          <Radio @value="value">Checkbox item</Radio>
+        </template>,
       );
-      let control = this.element.querySelector(
-        '.hds-dropdown-list-item__control',
-      );
-      let controlId = control.id;
+
+      let control = find('.hds-dropdown-list-item__control');
       assert
         .dom('.hds-dropdown-list-item__label')
-        .hasAttribute('for', controlId);
+        .hasAttribute('for', control?.id ?? '');
     });
 
     // ICON
 
     test('if an icon is declared the flight icon should render in the component', async function (assert) {
       await render(
-        <template><Radio @icon="hexagon">Radio item</Radio></template>,
+        <template>
+          <Radio @icon="hexagon">Radio item</Radio>
+        </template>,
       );
       assert.dom('.hds-icon.hds-icon-hexagon').exists();
     });
@@ -76,7 +87,9 @@ module(
 
     test('it should render the content passed as block in a form label', async function (assert) {
       await render(
-        <template><Radio>Radio item</Radio></template>,
+        <template>
+          <Radio>Radio item</Radio>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item__control').exists();
       assert.dom('.hds-dropdown-list-item__label').hasText('Radio item');
@@ -86,7 +99,9 @@ module(
 
     test('it should render with a result count badge', async function (assert) {
       await render(
-        <template><Radio @count="10">Radio item</Radio></template>,
+        <template>
+          <Radio @count="10">Radio item</Radio>
+        </template>,
       );
       assert.dom('.hds-dropdown-list-item__count').hasText('10');
     });
@@ -95,7 +110,9 @@ module(
 
     test('it should render as checked if `checked` is true', async function (assert) {
       await render(
-        <template><Radio checked={{true}}>Radio</Radio></template>,
+        <template>
+          <Radio checked={{true}}>Radio</Radio>
+        </template>,
       );
       assert.dom('.hds-form-radio').isChecked();
     });
diff --git a/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gjs b/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gts
similarity index 68%
rename from showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gjs
rename to showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gts
index aa41a1038da..53ef9710654 100644
--- a/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gjs
+++ b/showcase/tests/integration/components/hds/dropdown/toggle/icon-test.gts
@@ -5,8 +5,13 @@
 
 import { module, skip, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled, setupOnerror } from '@ember/test-helpers';
-import Icon from "@hashicorp/design-system-components/components/hds/dropdown/toggle/icon";
+import {
+  render,
+  resetOnerror,
+  settled,
+  setupOnerror,
+} from '@ember/test-helpers';
+import Icon from '@hashicorp/design-system-components/components/hds/dropdown/toggle/icon';
 
 module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
   setupRenderingTest(hooks);
@@ -19,7 +24,9 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="toggle text" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon @icon="user" @text="toggle text" id="test-toggle-icon" />
+      </template>,
     );
     assert.dom('#test-toggle-icon').hasClass('hds-dropdown-toggle-icon');
   });
@@ -28,7 +35,9 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('if an @icon is declared the flight icon should render in the component', async function (assert) {
     await render(
-      <template><Icon @icon="settings" @text="settings menu" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon @icon="settings" @text="settings menu" id="test-toggle-icon" />
+      </template>,
     );
     assert.dom('.hds-icon.hds-icon-settings').exists();
   });
@@ -37,15 +46,28 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('if an @imageSrc is declared and exists the image should render in the component', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" @imageSrc="/assets/images/avatar.png" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon
+          @icon="user"
+          @text="user menu"
+          @imageSrc="/assets/images/avatar.png"
+          id="test-toggle-icon"
+        />
+      </template>,
     );
     assert.dom('img').exists();
   });
 
   skip('if an @imageSrc is declared but does not exist, the flight icon should render in the component', async function (assert) {
-    this.set('imageSrc', '/assets/images/avatar.png');
     await render(
-      <template><Icon @icon="user" @text="user menu" @imageSrc={{this.imageSrc}} id="test-toggle-icon" /></template>,
+      <template>
+        <Icon
+          @icon="user"
+          @text="user menu"
+          @imageSrc="/assets/images/avatar.png"
+          id="test-toggle-icon"
+        />
+      </template>,
     );
     // we load the image dynamically to cover this usecase and also to prevent this test from intermittently failing for no obvious reason
     this.set('imageSrc', '/assets/images/avatar-broken.png');
@@ -58,13 +80,22 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render the chevron "down" by default', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon @icon="user" @text="user menu" id="test-toggle-icon" />
+      </template>,
     );
     assert.dom('.hds-icon.hds-icon-chevron-down').exists();
   });
   test('toggle-icon renders no chevron when hasChevron is set to false', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" @hasChevron={{false}} /></template>,
+      <template>
+        <Icon
+          @icon="user"
+          @text="user menu"
+          id="test-toggle-icon"
+          @hasChevron={{false}}
+        />
+      </template>,
     );
     assert.dom('.hds-icon.hds-icon-chevron-down').doesNotExist();
   });
@@ -73,7 +104,9 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render the medium size as the default if no size is declared', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon @icon="user" @text="user menu" id="test-toggle-icon" />
+      </template>,
     );
     assert
       .dom('#test-toggle-icon')
@@ -81,7 +114,14 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" @size="small" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon
+          @icon="user"
+          @text="user menu"
+          @size="small"
+          id="test-toggle-icon"
+        />
+      </template>,
     );
     assert
       .dom('#test-toggle-icon')
@@ -92,19 +132,35 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
 
   test('it should render with the correct aria attribute declared using the @text prop', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon @icon="user" @text="user menu" id="test-toggle-icon" />
+      </template>,
     );
     assert.dom('#test-toggle-icon').hasAria('label', 'user menu');
   });
   test('it should render the user "avatar" image with the correct role', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" @imageSrc="/assets/images/avatar.png" id="test-toggle-icon" /></template>,
+      <template>
+        <Icon
+          @icon="user"
+          @text="user menu"
+          @imageSrc="/assets/images/avatar.png"
+          id="test-toggle-icon"
+        />
+      </template>,
     );
     assert.dom('#test-toggle-icon img').hasAttribute('role', 'presentation');
   });
   test('it should render with the correct aria-expanded attribute on the toggle element', async function (assert) {
     await render(
-      <template><Icon @icon="user" @text="user menu" @isOpen={{true}} id="test-toggle-icon" /></template>,
+      <template>
+        <Icon
+          @icon="user"
+          @text="user menu"
+          @isOpen={{true}}
+          id="test-toggle-icon"
+        />
+      </template>,
     );
     assert.dom('#test-toggle-icon').hasAttribute('aria-expanded', 'true');
   });
@@ -118,7 +174,10 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Icon @icon="user" id="test-toggle-icon" /></template>,
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Icon @icon="user" id="test-toggle-icon" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -144,7 +203,10 @@ module('Integration | Component | hds/dropdown/toggle/icon', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Icon @icon="user" @text="user menu" @size="foo" /></template>,
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Icon @icon="user" @text="user menu" @size="foo" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);

From 6c6fa2b928fa9a779c0e8c9de320dbcdd2213f46 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:26:12 -0400
Subject: [PATCH 21/43] feat: convert rest of dialog primitive tests to gts

---
 .../{footer-test.gjs => footer-test.gts}      | 44 ++++++----
 .../{header-test.gjs => header-test.gts}      | 84 +++++++++++--------
 2 files changed, 74 insertions(+), 54 deletions(-)
 rename showcase/tests/integration/components/hds/dialog-primitive/{footer-test.gjs => footer-test.gts} (58%)
 rename showcase/tests/integration/components/hds/dialog-primitive/{header-test.gjs => header-test.gts} (71%)

diff --git a/showcase/tests/integration/components/hds/dialog-primitive/footer-test.gjs b/showcase/tests/integration/components/hds/dialog-primitive/footer-test.gts
similarity index 58%
rename from showcase/tests/integration/components/hds/dialog-primitive/footer-test.gjs
rename to showcase/tests/integration/components/hds/dialog-primitive/footer-test.gts
index 0c540a4420a..26228f7ef42 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/footer-test.gjs
+++ b/showcase/tests/integration/components/hds/dialog-primitive/footer-test.gts
@@ -6,9 +6,10 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror } from '@ember/test-helpers';
-import Footer from "@hashicorp/design-system-components/components/hds/dialog-primitive/footer";
-import Button from "@hashicorp/design-system-components/components/hds/button/index";
-import { on } from "@ember/modifier";
+import Footer from '@hashicorp/design-system-components/components/hds/dialog-primitive/footer';
+import Button from '@hashicorp/design-system-components/components/hds/button/index';
+import { on } from '@ember/modifier';
+import { tracked } from 'tracked-built-ins';
 
 module(
   'Integration | Component | hds/dialog-primitive/footer',
@@ -22,10 +23,10 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
         <template>
-        <Footer id="test-footer">
-          Footer
-        </Footer>
-      </template>,
+          <Footer id="test-footer">
+            Footer
+          </Footer>
+        </template>,
       );
       assert.dom('#test-footer').hasClass('hds-dialog-primitive__footer');
     });
@@ -35,10 +36,10 @@ module(
     test('it renders the passed in content', async function (assert) {
       await render(
         <template>
-        <Footer>
-          <Button type="submit" @text="Primary" />
-        </Footer>
-      </template>,
+          <Footer>
+            <Button type="submit" @text="Primary" />
+          </Footer>
+        </template>,
       );
       assert.dom('.hds-dialog-primitive__footer .hds-button').exists();
     });
@@ -46,17 +47,24 @@ module(
     // CALLBACK
 
     test('it should forwards the `onDismiss` callback function so it can be invoked as yielded function', async function (assert) {
-      let dismissed = false;
-      this.set('onDismiss', () => (dismissed = true));
+      const context = tracked({
+        isDismissed: false,
+      });
+
+      const onDismiss = () => {
+        context.isDismissed = true;
+      };
+
       await render(
         <template>
-        <Footer @onDismiss={{this.onDismiss}} as |F|>
-          <Button type="submit" @text="Primary" {{on "click" F.close}} />
-        </Footer>
-      </template>,
+          <Footer @onDismiss={{onDismiss}} as |F|>
+            <Button type="submit" @text="Primary" {{on "click" F.close}} />
+          </Footer>
+        </template>,
       );
+
       await click('.hds-dialog-primitive__footer .hds-button');
-      assert.ok(dismissed);
+      assert.ok(context.isDismissed);
     });
   },
 );
diff --git a/showcase/tests/integration/components/hds/dialog-primitive/header-test.gjs b/showcase/tests/integration/components/hds/dialog-primitive/header-test.gts
similarity index 71%
rename from showcase/tests/integration/components/hds/dialog-primitive/header-test.gjs
rename to showcase/tests/integration/components/hds/dialog-primitive/header-test.gts
index 23c8ad3a028..f709010aa84 100644
--- a/showcase/tests/integration/components/hds/dialog-primitive/header-test.gjs
+++ b/showcase/tests/integration/components/hds/dialog-primitive/header-test.gts
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror } from '@ember/test-helpers';
-import Header from "@hashicorp/design-system-components/components/hds/dialog-primitive/header";
+import Header from '@hashicorp/design-system-components/components/hds/dialog-primitive/header';
+import { tracked } from 'tracked-built-ins';
 
 module(
   'Integration | Component | hds/dialog-primitive/header',
@@ -20,8 +21,8 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
         <template>
-        <Header id="test-header">Title</Header>
-      </template>,
+          <Header id="test-header">Title</Header>
+        </template>,
       );
       assert.dom('#test-header').hasClass('hds-dialog-primitive__header');
     });
@@ -31,10 +32,10 @@ module(
     test('it renders the title without icon, tagline, or description', async function (assert) {
       await render(
         <template>
-        <Header>
-          Title
-        </Header>
-      </template>,
+          <Header>
+            Title
+          </Header>
+        </template>,
       );
       assert.dom('.hds-dialog-primitive__title').exists();
       assert.dom('.hds-dialog-primitive__title').hasText('Title');
@@ -45,10 +46,10 @@ module(
     test('it renders the title with icon and tagline if provided', async function (assert) {
       await render(
         <template>
-        <Header @icon="info" @tagline="Tagline">
-          Title
-        </Header>
-      </template>,
+          <Header @icon="info" @tagline="Tagline">
+            Title
+          </Header>
+        </template>,
       );
       assert.dom('.hds-dialog-primitive__title').exists();
       assert.dom('.hds-dialog-primitive__title').hasText('Tagline Title');
@@ -58,20 +59,24 @@ module(
     });
 
     test('it renders the title as a div when the @titleTag argument is not provided', async function (assert) {
-      await render(<template>
-        <Header @icon="info" @tagline="Tagline">
-          Title
-        </Header>
-      </template>);
+      await render(
+        <template>
+          <Header @icon="info" @tagline="Tagline">
+            Title
+          </Header>
+        </template>,
+      );
       assert.dom('.hds-dialog-primitive__title').hasTagName('div');
     });
 
     test('it renders the title as a custom title tag when the @titleTag argument is provided', async function (assert) {
-      await render(<template>
-        <Header @icon="info" @tagline="Tagline" @titleTag="h1">
-          Title
-        </Header>
-      </template>);
+      await render(
+        <template>
+          <Header @icon="info" @tagline="Tagline" @titleTag="h1">
+            Title
+          </Header>
+        </template>,
+      );
       assert.dom('.hds-dialog-primitive__title').hasTagName('h1');
     });
 
@@ -80,10 +85,10 @@ module(
     test('it adds contextual classes to different DOM nodes using the `@contextualClassPrefix`', async function (assert) {
       await render(
         <template>
-        <Header @icon="info" @tagline="Tagline" @contextualClassPrefix="abc">
-          Title
-        </Header>
-      </template>,
+          <Header @icon="info" @tagline="Tagline" @contextualClassPrefix="abc">
+            Title
+          </Header>
+        </template>,
       );
       assert.dom('.hds-dialog-primitive__header.abc__header').exists();
       assert.dom('.hds-dialog-primitive__icon.abc__icon').exists();
@@ -97,10 +102,10 @@ module(
     test('it should always render the "dismiss" button', async function (assert) {
       await render(
         <template>
-        <Header>
-          Title
-        </Header>
-      </template>,
+          <Header>
+            Title
+          </Header>
+        </template>,
       );
       assert.dom('button.hds-dialog-primitive__dismiss').exists();
     });
@@ -108,17 +113,24 @@ module(
     // CALLBACK
 
     test('the "dismiss" button should invoke the `onDismiss` callback function', async function (assert) {
-      let dismissed = false;
-      this.set('onDismiss', () => (dismissed = true));
+      const context = tracked({
+        isDismissed: false,
+      });
+
+      const onDismiss = () => {
+        context.isDismissed = true;
+      };
+
       await render(
         <template>
-        <Header @onDismiss={{this.onDismiss}}>
-          Title
-        </Header>
-      </template>,
+          <Header @onDismiss={{onDismiss}}>
+            Title
+          </Header>
+        </template>,
       );
+
       await click('button.hds-dialog-primitive__dismiss');
-      assert.ok(dismissed);
+      assert.ok(context.isDismissed);
     });
   },
 );

From 95a6670e049cec3f5f8d5e55a5159384b992aba3 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:33:34 -0400
Subject: [PATCH 22/43] feat: convert disclosure primitive tests to gts

---
 .../hds/disclosure-primitive/index-test.gjs   | 214 ------------
 .../hds/disclosure-primitive/index-test.gts   | 305 ++++++++++++++++++
 2 files changed, 305 insertions(+), 214 deletions(-)
 delete mode 100644 showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs
 create mode 100644 showcase/tests/integration/components/hds/disclosure-primitive/index-test.gts

diff --git a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs
deleted file mode 100644
index 4a9e92e716f..00000000000
--- a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gjs
+++ /dev/null
@@ -1,214 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, render, resetOnerror } from '@ember/test-helpers';
-import DisclosurePrimitive from "@hashicorp/design-system-components/components/hds/disclosure-primitive/index";
-import { on } from "@ember/modifier";
-
-module(
-  'Integration | Component | hds/disclosure-primitive/index',
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    hooks.afterEach(() => {
-      resetOnerror();
-    });
-
-    test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(
-        <template><DisclosurePrimitive id="test-disclosure-primitive" /></template>,
-      );
-      assert
-        .dom('div#test-disclosure-primitive')
-        .hasClass('hds-disclosure-primitive');
-    });
-
-    // TOGGLE + CONTENT
-
-    test('it should render the "toggle" block but not the "content', async function (assert) {
-      await render(<template>
-      <DisclosurePrimitive>
-        <:toggle>
-          <button type="button" id="test-disclosure-primitive-button" />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      assert.dom('.hds-disclosure-primitive__toggle').exists();
-      assert.dom('button#test-disclosure-primitive-button').exists();
-      assert.dom('.hds-disclosure-primitive__content').exists();
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-    });
-    test('it should render the "content" when the "toggle" is clicked', async function (assert) {
-      await render(<template>
-      <DisclosurePrimitive>
-        <:toggle as |t|>
-          <button type="button" id="test-disclosure-primitive-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      await click('button#test-disclosure-primitive-button');
-      assert.dom('a#test-disclosure-primitive-link').exists();
-    });
-
-    // isOpen
-
-    test('it should toggle the "content" when @isOpen is set', async function (assert) {
-      this.set('isOpen', true);
-      await render(<template>
-      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      assert.dom('a#test-disclosure-primitive-link').exists();
-
-      this.set('isOpen', false);
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-    });
-
-    test('it should allow @isOpen to override an internal _isOpen=true', async function (assert) {
-      await render(<template>
-      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      await click('button#test-toggle-button');
-      assert.dom('a#test-disclosure-primitive-link').exists();
-
-      this.set('isOpen', false);
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-    });
-
-    test('it should allow @isOpen to override an internal _isOpen=false', async function (assert) {
-      await render(<template>
-      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-
-      this.set('isOpen', true);
-      assert.dom('a#test-disclosure-primitive-link').exists();
-    });
-
-    test('it should allow the internal _isOpen to override @isOpen=true', async function (assert) {
-      this.set('isOpen', true);
-      await render(<template>
-      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      assert.dom('a#test-disclosure-primitive-link').exists();
-
-      await click('button#test-toggle-button');
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-    });
-
-    test('it should allow the internal _isOpen to override @isOpen=false', async function (assert) {
-      this.set('isOpen', false);
-      await render(<template>
-      <DisclosurePrimitive @isOpen={{this.isOpen}} id="test-disclosure-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-
-      await click('button#test-toggle-button');
-      assert.dom('a#test-disclosure-primitive-link').exists();
-    });
-
-    // contentId
-
-    test('it should set the contentId on the content block', async function (assert) {
-      await render(<template>
-      <DisclosurePrimitive>
-        <:toggle>
-          <button type="button" id="test-disclosure-primitive-button" />
-        </:toggle>
-        <:content>
-          <a id="test-disclosure-primitive-link" href="#">test</a>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      assert.dom('.hds-disclosure-primitive__content').hasAttribute('id');
-    });
-
-    // CLOSE DISCLOSED CONTENT ON CLICK
-
-    test('it should hide the "content" when an interactive element triggers `close`', async function (assert) {
-      await render(<template>
-      <DisclosurePrimitive id="test-disclosure-primitive">
-        <:toggle as |t|>
-          <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-        </:toggle>
-        <:content as |c|>
-          <button id="test-content-button" {{on "click" c.close}}>test</button>
-        </:content>
-      </DisclosurePrimitive>
-    </template>);
-      await click('button#test-toggle-button');
-      assert.dom('button#test-content-button').exists();
-      await click('button#test-content-button');
-      assert.dom('button#test-content-button').doesNotExist();
-    });
-
-    // CALLBACK
-
-    test('it should invoke the `onClickToggle` callback', async function (assert) {
-      let opened = false;
-      this.set('onClickToggle', () => (opened = !opened));
-      await render(<template>
-        <DisclosurePrimitive @onClickToggle={{this.onClickToggle}} id="test-disclosure-primitive">
-          <:toggle as |t|>
-            <button type="button" id="test-toggle-button" {{on "click" t.onClickToggle}} />
-          </:toggle>
-          <:content>
-            <a id="test-disclosure-primitive-link" href="#">test</a>
-          </:content>
-        </DisclosurePrimitive>
-      </template>);
-      // toggle to open
-      await click('button#test-toggle-button');
-      assert.true(opened);
-      assert.dom('a#test-disclosure-primitive-link').exists();
-      // toggle to close
-      await click('button#test-toggle-button');
-      assert.false(opened);
-      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
-    });
-  },
-);
diff --git a/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gts b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gts
new file mode 100644
index 00000000000..f9cb8fd4752
--- /dev/null
+++ b/showcase/tests/integration/components/hds/disclosure-primitive/index-test.gts
@@ -0,0 +1,305 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { click, render, resetOnerror, settled } from '@ember/test-helpers';
+import DisclosurePrimitive from '@hashicorp/design-system-components/components/hds/disclosure-primitive/index';
+import { on } from '@ember/modifier';
+import { tracked } from 'tracked-built-ins';
+
+module(
+  'Integration | Component | hds/disclosure-primitive/index',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    hooks.afterEach(() => {
+      resetOnerror();
+    });
+
+    test('it should render the component with a CSS class that matches the component name', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive id="test-disclosure-primitive" />
+        </template>,
+      );
+      assert
+        .dom('div#test-disclosure-primitive')
+        .hasClass('hds-disclosure-primitive');
+    });
+
+    // TOGGLE + CONTENT
+
+    test('it should render the "toggle" block but not the "content', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive>
+            <:toggle>
+              <button type="button" id="test-disclosure-primitive-button" />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      assert.dom('.hds-disclosure-primitive__toggle').exists();
+      assert.dom('button#test-disclosure-primitive-button').exists();
+      assert.dom('.hds-disclosure-primitive__content').exists();
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+    });
+    test('it should render the "content" when the "toggle" is clicked', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive>
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-disclosure-primitive-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      await click('button#test-disclosure-primitive-button');
+      assert.dom('a#test-disclosure-primitive-link').exists();
+    });
+
+    // isOpen
+
+    test('it should toggle the "content" when @isOpen is set', async function (assert) {
+      const context = tracked({
+        isOpen: true,
+      });
+
+      await render(
+        <template>
+          <DisclosurePrimitive
+            @isOpen={{context.isOpen}}
+            id="test-disclosure-primitive"
+          >
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      assert.dom('a#test-disclosure-primitive-link').exists();
+
+      context.isOpen = false;
+      await settled();
+
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+    });
+
+    test('it should allow @isOpen to override an internal _isOpen=true', async function (assert) {
+      const context = tracked<Record<'isOpen', boolean | undefined>>({
+        isOpen: undefined,
+      });
+
+      await render(
+        <template>
+          <DisclosurePrimitive
+            @isOpen={{context.isOpen}}
+            id="test-disclosure-primitive"
+          >
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      await click('button#test-toggle-button');
+      assert.dom('a#test-disclosure-primitive-link').exists();
+
+      context.isOpen = false;
+      await settled();
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+    });
+
+    test('it should allow @isOpen to override an internal _isOpen=false', async function (assert) {
+      const context = tracked<Record<'isOpen', boolean | undefined>>({
+        isOpen: undefined,
+      });
+
+      await render(
+        <template>
+          <DisclosurePrimitive
+            @isOpen={{context.isOpen}}
+            id="test-disclosure-primitive"
+          >
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+
+      context.isOpen = true;
+      await settled();
+
+      assert.dom('a#test-disclosure-primitive-link').exists();
+    });
+
+    test('it should allow the internal _isOpen to override @isOpen=true', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive @isOpen={{true}} id="test-disclosure-primitive">
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      assert.dom('a#test-disclosure-primitive-link').exists();
+
+      await click('button#test-toggle-button');
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+    });
+
+    test('it should allow the internal _isOpen to override @isOpen=false', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive @isOpen={{false}} id="test-disclosure-primitive">
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+
+      await click('button#test-toggle-button');
+      assert.dom('a#test-disclosure-primitive-link').exists();
+    });
+
+    // contentId
+
+    test('it should set the contentId on the content block', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive>
+            <:toggle>
+              <button type="button" id="test-disclosure-primitive-button" />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      assert.dom('.hds-disclosure-primitive__content').hasAttribute('id');
+    });
+
+    // CLOSE DISCLOSED CONTENT ON CLICK
+
+    test('it should hide the "content" when an interactive element triggers `close`', async function (assert) {
+      await render(
+        <template>
+          <DisclosurePrimitive id="test-disclosure-primitive">
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content as |c|>
+              <button
+                id="test-content-button"
+                type="button"
+                {{on "click" c.close}}
+              >test</button>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      await click('button#test-toggle-button');
+      assert.dom('button#test-content-button').exists();
+      await click('button#test-content-button');
+      assert.dom('button#test-content-button').doesNotExist();
+    });
+
+    // CALLBACK
+
+    test('it should invoke the `onClickToggle` callback', async function (assert) {
+      const context = tracked({
+        isOpen: false,
+      });
+
+      const onClickToggle = () => {
+        context.isOpen = !context.isOpen;
+      };
+
+      await render(
+        <template>
+          <DisclosurePrimitive
+            @onClickToggle={{onClickToggle}}
+            id="test-disclosure-primitive"
+          >
+            <:toggle as |t|>
+              <button
+                type="button"
+                id="test-toggle-button"
+                {{on "click" t.onClickToggle}}
+              />
+            </:toggle>
+            <:content>
+              <a id="test-disclosure-primitive-link" href="#">test</a>
+            </:content>
+          </DisclosurePrimitive>
+        </template>,
+      );
+      // toggle to open
+      await click('button#test-toggle-button');
+      assert.true(context.isOpen);
+      assert.dom('a#test-disclosure-primitive-link').exists();
+      // toggle to close
+      await click('button#test-toggle-button');
+      assert.false(context.isOpen);
+      assert.dom('a#test-disclosure-primitive-link').doesNotExist();
+    });
+  },
+);

From 1c3ee14bf2b295a49528aa5083ceff09190ac264 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:35:19 -0400
Subject: [PATCH 23/43] feat: convert button tests to gts

---
 .../button/{index-test.gjs => index-test.gts} | 143 ++++++++++++++----
 1 file changed, 115 insertions(+), 28 deletions(-)
 rename showcase/tests/integration/components/hds/button/{index-test.gjs => index-test.gts} (65%)

diff --git a/showcase/tests/integration/components/hds/button/index-test.gjs b/showcase/tests/integration/components/hds/button/index-test.gts
similarity index 65%
rename from showcase/tests/integration/components/hds/button/index-test.gjs
rename to showcase/tests/integration/components/hds/button/index-test.gts
index 41f92a8adfb..a9259da8324 100644
--- a/showcase/tests/integration/components/hds/button/index-test.gjs
+++ b/showcase/tests/integration/components/hds/button/index-test.gts
@@ -6,7 +6,7 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Button from "@hashicorp/design-system-components/components/hds/button/index";
+import Button from '@hashicorp/design-system-components/components/hds/button/index';
 
 module('Integration | Component | hds/button/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +17,9 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" id="test-button" /></template>,
+      <template>
+        <Button @text="Copy to clipboard" id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').hasClass('hds-button');
   });
@@ -26,13 +28,17 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should render the medium size if no size is declared', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" id="test-button" /></template>,
+      <template>
+        <Button @text="Copy to clipboard" id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').hasClass('hds-button--size-medium');
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" @size="small" id="test-button" /></template>,
+      <template>
+        <Button @text="Copy to clipboard" @size="small" id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').hasClass('hds-button--size-small');
   });
@@ -41,13 +47,17 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should render the primary color as the default if no color is declared', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" id="test-button" /></template>,
+      <template>
+        <Button @text="Copy to clipboard" id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').hasClass('hds-button--color-primary');
   });
   test('it should render the correct CSS color class if the @color prop is declared', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" @color="critical" id="test-button" /></template>,
+      <template>
+        <Button @text="Copy to clipboard" @color="critical" id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').hasClass('hds-button--color-critical');
   });
@@ -56,33 +66,58 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should not have visible icon if @icon is not declared', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" id="test-button" /></template>,
+      <template>
+        <Button @text="copy to clipboard" id="test-button" />
+      </template>,
     );
     assert.dom('.hds-button__icon').doesNotExist();
   });
   test('if an icon is declared the flight icon should render in the component', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" @icon="clipboard-copy" id="test-button" /></template>,
+      <template>
+        <Button
+          @text="Copy to clipboard"
+          @icon="clipboard-copy"
+          id="test-button"
+        />
+      </template>,
     );
-    assert
-      .dom(this.element.querySelector('.hds-icon.hds-icon-clipboard-copy'))
-      .exists();
+    assert.dom('.hds-icon.hds-icon-clipboard-copy').exists();
   });
   test('if an icon is declared the icon should be in leading position by default', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" @icon="clipboard-copy" id="test-button" /></template>,
+      <template>
+        <Button
+          @text="Copy to clipboard"
+          @icon="clipboard-copy"
+          id="test-button"
+        />
+      </template>,
     );
     assert.dom('.hds-button__icon').matchesSelector(':first-child');
   });
   test('if an icon is declared the icon should be in trailing position if @iconPosition is set to trailing', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" @icon="clipboard-copy" @iconPosition="trailing" id="test-button" /></template>,
+      <template>
+        <Button
+          @text="Copy to clipboard"
+          @icon="clipboard-copy"
+          @iconPosition="trailing"
+          id="test-button"
+        />
+      </template>,
     );
     assert.dom('.hds-button__icon').matchesSelector(':last-child');
   });
   test('it should ignore isIconOnly if icon is not defined', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" @isIconOnly={{true}} id="test-button" /></template>,
+      <template>
+        <Button
+          @text="copy to clipboard"
+          @isIconOnly={{true}}
+          id="test-button"
+        />
+      </template>,
     );
     assert
       .dom('#test-button')
@@ -93,9 +128,11 @@ module('Integration | Component | hds/button/index', function (hooks) {
   // ISINLINE
 
   test('it should render the element as `inline` if the value of @isInline is "true"', async function (assert) {
-    await render(<template>
-      <Button @text="Lorem ipsum" @isInline={{true}} id="test-button" />
-    </template>);
+    await render(
+      <template>
+        <Button @text="Lorem ipsum" @isInline={{true}} id="test-button" />
+      </template>,
+    );
     assert.dom('#test-button').hasClass('hds-button--is-inline');
   });
 
@@ -103,7 +140,9 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it renders a button with the defined text', async function (assert) {
     await render(
-      <template><Button @text="Copy to clipboard" id="test-toggle-button" /></template>,
+      <template>
+        <Button @text="Copy to clipboard" id="test-toggle-button" />
+      </template>,
     );
     assert.dom('#test-toggle-button').hasText('Copy to clipboard');
   });
@@ -112,13 +151,22 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should have aria-label on the button element if isIconOnly is set to true', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" @icon="clipboard-copy" @isIconOnly={{true}} id="test-button" /></template>,
+      <template>
+        <Button
+          @text="copy to clipboard"
+          @icon="clipboard-copy"
+          @isIconOnly={{true}}
+          id="test-button"
+        />
+      </template>,
     );
     assert.dom('#test-button').hasAria('label', 'copy to clipboard');
   });
   test('it should have "button" type by default', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" id="test-button" /></template>,
+      <template>
+        <Button @text="copy to clipboard" id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').hasAttribute('type', 'button');
   });
@@ -127,19 +175,34 @@ module('Integration | Component | hds/button/index', function (hooks) {
 
   test('it should not have visible text if isIconOnly is true', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" @icon="clipboard-copy" @isIconOnly={{true}} id="test-button" /></template>,
+      <template>
+        <Button
+          @text="copy to clipboard"
+          @icon="clipboard-copy"
+          @isIconOnly={{true}}
+          id="test-button"
+        />
+      </template>,
     );
     assert.dom('.hds-button__text').doesNotExist();
   });
   test('it should disable to the button if the `disabled` attribute is passed', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" disabled id="test-button" /></template>,
+      <template>
+        <Button @text="copy to clipboard" disabled id="test-button" />
+      </template>,
     );
     assert.dom('#test-button').isDisabled();
   });
   test('it should have the correct CSS class to support full-width button size if @isFullWidth prop is true', async function (assert) {
     await render(
-      <template><Button @text="copy to clipboard" @isFullWidth={{true}} id="test-button" /></template>,
+      <template>
+        <Button
+          @text="copy to clipboard"
+          @isFullWidth={{true}}
+          id="test-button"
+        />
+      </template>,
     );
     assert.dom('#test-button').hasClass('hds-button--width-full');
   });
@@ -152,7 +215,12 @@ module('Integration | Component | hds/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Button @icon="clipboard-copy" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Button @icon="clipboard-copy" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -164,7 +232,12 @@ module('Integration | Component | hds/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Button @text="copy to clipboard" @color="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Button @text="copy to clipboard" @color="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -176,7 +249,12 @@ module('Integration | Component | hds/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Button @text="copy to clipboard" @size="tiny" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Button @text="copy to clipboard" @size="tiny" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -189,7 +267,14 @@ module('Integration | Component | hds/button/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Button @icon="clipboard-copy" @text="copy to clipboard" @iconPosition="after" /></template>,
+      <template>
+        <Button
+          @icon="clipboard-copy"
+          @text="copy to clipboard"
+          {{! @glint-expect-error - assertion testing invalid value }}
+          @iconPosition="after"
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -203,7 +288,9 @@ module('Integration | Component | hds/button/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Button @text="copy to clipboard" @color="tertiary" /></template>,
+      <template>
+        <Button @text="copy to clipboard" @color="tertiary" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);

From 133f315dcb2a2198d435742d3f48ff21cddb7ed5 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:38:27 -0400
Subject: [PATCH 24/43] feat: convert form index tests to gts

---
 .../form/{index-test.gjs => index-test.gts}   | 56 +++++++++++--------
 1 file changed, 34 insertions(+), 22 deletions(-)
 rename showcase/tests/integration/components/hds/form/{index-test.gjs => index-test.gts} (78%)

diff --git a/showcase/tests/integration/components/hds/form/index-test.gjs b/showcase/tests/integration/components/hds/form/index-test.gts
similarity index 78%
rename from showcase/tests/integration/components/hds/form/index-test.gjs
rename to showcase/tests/integration/components/hds/form/index-test.gts
index 90d4a6202df..ebc8dd44310 100644
--- a/showcase/tests/integration/components/hds/form/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/index-test.gts
@@ -6,7 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, setupOnerror } from '@ember/test-helpers';
-import Form, { AVAILABLE_TAGS } from '@hashicorp/design-system-components/components/hds/form/index';
+import Form, {
+  AVAILABLE_TAGS,
+} from '@hashicorp/design-system-components/components/hds/form/index';
 
 module('Integration | Component | hds/form/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -26,7 +28,9 @@ module('Integration | Component | hds/form/index', function (hooks) {
   });
 
   test('it should render the component using a div tag if specified in the @tag prop', async function (assert) {
-    await render(<template><Form id="test-form-component" @tag="div" /></template>);
+    await render(
+      <template><Form id="test-form-component" @tag="div" /></template>,
+    );
     assert.dom('#test-form-component').hasTagName('div');
   });
 
@@ -34,7 +38,9 @@ module('Integration | Component | hds/form/index', function (hooks) {
 
   test('it should set an inline style for the section max-width custom property', async function (assert) {
     await render(
-      <template><Form id="test-form-component" @sectionMaxWidth="32em" /></template>,
+      <template>
+        <Form id="test-form-component" @sectionMaxWidth="32em" />
+      </template>,
     );
     assert.dom('#test-form-component').hasStyle(
       {
@@ -48,25 +54,26 @@ module('Integration | Component | hds/form/index', function (hooks) {
 
   test('it should yield the different subcomponents as children, for the different available tags', async function (assert) {
     for (const tag of AVAILABLE_TAGS) {
-      this.set('tag', tag);
       await render(
-        <template><Form id="test-form" @tag={{this.tag}} as |FORM|>
-              <FORM.Header>
-                <FORM.HeaderTitle />
-                <FORM.HeaderDescription />
-              </FORM.Header>
-              <FORM.Section>
-                <FORM.SectionHeader>
-                  <FORM.SectionHeaderTitle />
-                  <FORM.SectionHeaderDescription />
-                </FORM.SectionHeader>
-                <FORM.SectionMultiFieldGroup>
-                  <FORM.SectionMultiFieldGroupItem />
-                </FORM.SectionMultiFieldGroup>
-              </FORM.Section>
-              <FORM.Separator />
-              <FORM.Footer />
-            </Form></template>,
+        <template>
+          <Form id="test-form" @tag={{tag}} as |FORM|>
+            <FORM.Header>
+              <FORM.HeaderTitle />
+              <FORM.HeaderDescription />
+            </FORM.Header>
+            <FORM.Section>
+              <FORM.SectionHeader>
+                <FORM.SectionHeaderTitle />
+                <FORM.SectionHeaderDescription />
+              </FORM.SectionHeader>
+              <FORM.SectionMultiFieldGroup>
+                <FORM.SectionMultiFieldGroupItem />
+              </FORM.SectionMultiFieldGroup>
+            </FORM.Section>
+            <FORM.Separator />
+            <FORM.Footer />
+          </Form>
+        </template>,
       );
 
       // Form Header content
@@ -133,7 +140,12 @@ module('Integration | Component | hds/form/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
 
-    await render(<template><Form @tag="section" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Form @tag="section" />
+      </template>,
+    );
 
     assert.throws(function () {
       throw new Error(errorMessage);

From 6a67f35ccd13efbfd76a5c6d9e2e8bc5037b2e2a Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:41:01 -0400
Subject: [PATCH 25/43] feat: convert rest of form toggle tests to gts

---
 .../toggle/{field-test.gjs => field-test.gts} | 39 +++++---
 .../toggle/{group-test.gjs => group-test.gts} | 95 ++++++++++---------
 2 files changed, 73 insertions(+), 61 deletions(-)
 rename showcase/tests/integration/components/hds/form/toggle/{field-test.gjs => field-test.gts} (82%)
 rename showcase/tests/integration/components/hds/form/toggle/{group-test.gjs => group-test.gts} (55%)

diff --git a/showcase/tests/integration/components/hds/form/toggle/field-test.gjs b/showcase/tests/integration/components/hds/form/toggle/field-test.gts
similarity index 82%
rename from showcase/tests/integration/components/hds/form/toggle/field-test.gjs
rename to showcase/tests/integration/components/hds/form/toggle/field-test.gts
index fa9496eadd5..f3f0e892b6f 100644
--- a/showcase/tests/integration/components/hds/form/toggle/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/toggle/field-test.gts
@@ -5,8 +5,9 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, settled } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/toggle/field";
+import { render, resetOnerror, settled, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/toggle/field';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/toggle/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -39,11 +40,13 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field as |F|>
+      <template>
+        <Field as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -58,16 +61,18 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
     // Notice: the "toggle" component has a slightly different DOM structure than the other form controls
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control input');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -83,22 +88,28 @@ module('Integration | Component | hds/form/toggle/field', function (hooks) {
       .hasAttribute('id', `error-${controlId}`);
   });
   test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    const context = tracked({
+      showErrors: false,
+    });
+
     await render(
-      <template><Field @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
-          {{#if this.showErrors}}
+          {{#if context.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Field></template>,
+        </Field>
+      </template>,
     );
 
-    this.set('showErrors', true);
+    context.showErrors = true;
     await settled();
     // the control ID is dynamically generated
     // Notice: the "toggle" component has a slightly different DOM structure than the other form controls
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control input');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
diff --git a/showcase/tests/integration/components/hds/form/toggle/group-test.gjs b/showcase/tests/integration/components/hds/form/toggle/group-test.gts
similarity index 55%
rename from showcase/tests/integration/components/hds/form/toggle/group-test.gjs
rename to showcase/tests/integration/components/hds/form/toggle/group-test.gts
index 49e50b3d52f..4b975d59e0d 100644
--- a/showcase/tests/integration/components/hds/form/toggle/group-test.gjs
+++ b/showcase/tests/integration/components/hds/form/toggle/group-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror } from '@ember/test-helpers';
-import Group from "@hashicorp/design-system-components/components/hds/form/toggle/group";
+import { render, resetOnerror, find } from '@ember/test-helpers';
+import Group from '@hashicorp/design-system-components/components/hds/form/toggle/group';
 
 module('Integration | Component | hds/form/toggle/group', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,16 +24,18 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
 
   test('it renders the yielded contextual components and subcomponents', async function (assert) {
     await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.ToggleField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-              <F.HelperText>This is the control helper text</F.HelperText>
-              <F.Error>This is the control error</F.Error>
-            </G.ToggleField>
-            <G.Error>This is the group error</G.Error>
-        </Group></template>,
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.ToggleField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+            <F.HelperText>This is the control helper text</F.HelperText>
+            <F.Error>This is the control error</F.Error>
+          </G.ToggleField>
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
     );
     assert.dom('.hds-form-group__legend').exists();
     assert.dom('.hds-form-group__legend').hasText('This is the legend');
@@ -70,35 +72,30 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Group as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.HelperText>This is the group helper text</G.HelperText>
-            <G.ToggleField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-              <F.HelperText>This is the control helper text</F.HelperText>
-              <F.Error>This is the control error</F.Error>
-            </G.ToggleField>
-            <G.Error>This is the group error</G.Error>
-        </Group></template>,
+      <template>
+        <Group as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.HelperText>This is the group helper text</G.HelperText>
+          <G.ToggleField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+            <F.HelperText>This is the control helper text</F.HelperText>
+            <F.Error>This is the control error</F.Error>
+          </G.ToggleField>
+          <G.Error>This is the group error</G.Error>
+        </Group>
+      </template>,
     );
     // the IDs are dynamically generated
-    let groupHelperText = this.element.querySelector(
-      '.hds-form-group__helper-text',
-    );
-    let groupHelperTextId = groupHelperText.id;
-    let groupError = this.element.querySelector('.hds-form-group__error');
-    let groupErrorId = groupError.id;
-    let fieldHelperText = this.element.querySelector(
-      '.hds-form-field__helper-text',
-    );
-    let fieldHelperTextId = fieldHelperText.id;
-    let fieldError = this.element.querySelector('.hds-form-field__error');
-    let fieldErrorId = fieldError.id;
+    let groupHelperText = find('.hds-form-group__helper-text');
+    let groupError = find('.hds-form-group__error');
+    let fieldHelperText = find('.hds-form-field__helper-text');
+    let fieldError = find('.hds-form-field__error');
+
     assert
       .dom('input')
       .hasAttribute(
         'aria-describedby',
-        `${fieldHelperTextId} ${fieldErrorId} ${groupHelperTextId} ${groupErrorId}`,
+        `${fieldHelperText?.id} ${fieldError?.id} ${groupHelperText?.id} ${groupError?.id}`,
       );
   });
 
@@ -106,12 +103,14 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
 
   test('it should append an indicator to the legend text and set the required attribute when user input is required', async function (assert) {
     await render(
-      <template><Group @isRequired={{true}} as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.ToggleField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-            </G.ToggleField>
-          </Group></template>,
+      <template>
+        <Group @isRequired={{true}} as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.ToggleField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+          </G.ToggleField>
+        </Group>
+      </template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('Required');
@@ -119,12 +118,14 @@ module('Integration | Component | hds/form/toggle/group', function (hooks) {
   });
   test('it should append an indicator to the legend text when user input is optional', async function (assert) {
     await render(
-      <template><Group @isOptional={{true}} as |G|>
-            <G.Legend>This is the legend</G.Legend>
-            <G.ToggleField checked="checked" @value="abc123" as |F|>
-              <F.Label>This is the control label</F.Label>
-            </G.ToggleField>
-          </Group></template>,
+      <template>
+        <Group @isOptional={{true}} as |G|>
+          <G.Legend>This is the legend</G.Legend>
+          <G.ToggleField checked="checked" @value="abc123" as |F|>
+            <F.Label>This is the control label</F.Label>
+          </G.ToggleField>
+        </Group>
+      </template>,
     );
     assert.dom('legend .hds-form-indicator').exists();
     assert.dom('legend .hds-form-indicator').hasText('(Optional)');

From 9122cce2d706391bb83a752b043a6c9690d6c788 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:44:33 -0400
Subject: [PATCH 26/43] feat: convert text input tests to gts

---
 .../{base-test.gjs => base-test.gts}          | 42 +++++++++--
 .../{field-test.gjs => field-test.gts}        | 73 +++++++++++++------
 2 files changed, 83 insertions(+), 32 deletions(-)
 rename showcase/tests/integration/components/hds/form/text-input/{base-test.gjs => base-test.gts} (73%)
 rename showcase/tests/integration/components/hds/form/text-input/{field-test.gjs => field-test.gts} (83%)

diff --git a/showcase/tests/integration/components/hds/form/text-input/base-test.gjs b/showcase/tests/integration/components/hds/form/text-input/base-test.gts
similarity index 73%
rename from showcase/tests/integration/components/hds/form/text-input/base-test.gjs
rename to showcase/tests/integration/components/hds/form/text-input/base-test.gts
index 008b41012bb..3fd7306a158 100644
--- a/showcase/tests/integration/components/hds/form/text-input/base-test.gjs
+++ b/showcase/tests/integration/components/hds/form/text-input/base-test.gts
@@ -5,8 +5,15 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Base from "@hashicorp/design-system-components/components/hds/form/text-input/base";
+import {
+  render,
+  resetOnerror,
+  setupOnerror,
+  settled,
+} from '@ember/test-helpers';
+import Base from '@hashicorp/design-system-components/components/hds/form/text-input/base';
+import type { HdsFormTextInputTypes } from '@hashicorp/design-system-components/components/hds/form/text-input/types';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/text-input/base', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,7 +29,9 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should set aria-describedby and id arguments if pass @id or @ariaDescribedBy', async function (assert) {
     await render(
-      <template><Base @id="custom-id" @ariaDescribedBy="custom-description-id" /></template>,
+      <template>
+        <Base @id="custom-id" @ariaDescribedBy="custom-description-id" />
+      </template>,
     );
     assert
       .dom('#custom-id')
@@ -37,12 +46,20 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
     assert.dom('#test-form-text-input').hasAttribute('type', 'text');
   });
   test('it should render the correct type depending on the @type prop', async function (assert) {
+    const context = tracked<Record<'type', HdsFormTextInputTypes>>({
+      type: 'email',
+    });
+
     this.set('type', 'email');
     await render(
-      <template><Base @type={{this.type}} id="test-form-text-input" /></template>,
+      <template>
+        <Base @type={{context.type}} id="test-form-text-input" />
+      </template>,
     );
     assert.dom('#test-form-text-input').hasAttribute('type', 'email');
-    this.set('type', 'datetime-local');
+
+    context.type = 'datetime-local';
+    await settled();
     assert.dom('#test-form-text-input').hasAttribute('type', 'datetime-local');
   });
 
@@ -59,7 +76,9 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should render the correct CSS class if the @isInvalid prop is declared', async function (assert) {
     await render(
-      <template><Base id="test-form-text-input" @isInvalid={{true}} /></template>,
+      <template>
+        <Base id="test-form-text-input" @isInvalid={{true}} />
+      </template>,
     );
     assert
       .dom('#test-form-text-input')
@@ -70,7 +89,9 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
 
   test('it should render the correct CSS class if the @isLoading prop is declared', async function (assert) {
     await render(
-      <template><Base id="test-form-text-input" @type="search" @isLoading={{true}} /></template>,
+      <template>
+        <Base id="test-form-text-input" @type="search" @isLoading={{true}} />
+      </template>,
     );
     assert
       .dom('#test-form-text-input')
@@ -95,7 +116,12 @@ module('Integration | Component | hds/form/text-input/base', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Base @type="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Base @type="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/form/text-input/field-test.gjs b/showcase/tests/integration/components/hds/form/text-input/field-test.gts
similarity index 83%
rename from showcase/tests/integration/components/hds/form/text-input/field-test.gjs
rename to showcase/tests/integration/components/hds/form/text-input/field-test.gts
index fd1ceaa0b75..513739b958d 100644
--- a/showcase/tests/integration/components/hds/form/text-input/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/text-input/field-test.gts
@@ -5,8 +5,15 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, render, resetOnerror, settled } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/text-input/field";
+import {
+  click,
+  render,
+  resetOnerror,
+  settled,
+  find,
+} from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/text-input/field';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/form/text-input/field', function (hooks) {
   setupRenderingTest(hooks);
@@ -48,7 +55,9 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it should render the password input without visibility toggle when `hasVisibilityToggle` is false', async function (assert) {
     await render(
-      <template><Field @type="password" @hasVisibilityToggle={{false}} /></template>,
+      <template>
+        <Field @type="password" @hasVisibilityToggle={{false}} />
+      </template>,
     );
     assert.dom('input').hasAttribute('type', 'password');
     assert.dom('.hds-form-visibility-toggle').doesNotExist();
@@ -95,12 +104,14 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it renders the yielded contextual components', async function (assert) {
     await render(
-      <template><Field @value="abc123" as |F|>
+      <template>
+        <Field @value="abc123" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     assert.dom('.hds-form-field__label').exists();
     assert.dom('.hds-form-field__helper-text').exists();
@@ -117,16 +128,18 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   });
   test('it automatically provides all the ID relations between the elements', async function (assert) {
     await render(
-      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.CharacterCount @maxLength={{10}} />
           <F.Error>This is the error</F.Error>
-        </Field></template>,
+        </Field>
+      </template>,
     );
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control input');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -149,23 +162,29 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   });
 
   test('it automatically provides all the ID relations between the elements even when dynamically rendered', async function (assert) {
+    const context = tracked({
+      showErrors: false,
+    });
+
     await render(
-      <template><Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
+      <template>
+        <Field @value="abc123" @extraAriaDescribedBy="extra" as |F|>
           <F.Label>This is the label</F.Label>
           <F.HelperText>This is the helper text</F.HelperText>
           <F.CharacterCount @maxLength={{10}} />
-          {{#if this.showErrors}}
+          {{#if context.showErrors}}
             <F.Error>This is the error</F.Error>
           {{/if}}
-        </Field></template>,
+        </Field>
+      </template>,
     );
 
-    this.set('showErrors', true);
+    context.showErrors = true;
     await settled();
 
     // the control ID is dynamically generated
-    let control = this.element.querySelector('.hds-form-field__control input');
-    let controlId = control.id;
+    let control = find('.hds-form-field__control input');
+    let controlId = control?.id ?? '';
     assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
     assert
       .dom('.hds-form-field__helper-text')
@@ -191,9 +210,11 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
 
   test('it should append an indicator to the label text and set the required attribute when user input is required', async function (assert) {
     await render(
-      <template><Field @isRequired={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isRequired={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('Required');
@@ -201,18 +222,22 @@ module('Integration | Component | hds/form/text-input/field', function (hooks) {
   });
   test('it should append an indicator to the label text when user input is optional', async function (assert) {
     await render(
-      <template><Field @isOptional={{true}} as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field @isOptional={{true}} as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('label .hds-form-indicator').exists();
     assert.dom('label .hds-form-indicator').hasText('(Optional)');
   });
   test('it should not append an indicator to the label text when the required attribute is set', async function (assert) {
     await render(
-      <template><Field required as |F|>
-            <F.Label>This is the label</F.Label>
-          </Field></template>,
+      <template>
+        <Field required as |F|>
+          <F.Label>This is the label</F.Label>
+        </Field>
+      </template>,
     );
     assert.dom('input').hasAttribute('required');
     assert.dom('label .hds-form-indicator').doesNotExist();

From 24578b2ddb5221c47564a778523c32618e73b79d Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Sat, 25 Oct 2025 09:49:08 -0400
Subject: [PATCH 27/43] feat: convert super select single tests to gts

---
 .../single/{base-test.gjs => base-test.gts}   |  67 ++++++++---
 .../single/{field-test.gjs => field-test.gts} | 108 +++++++++---------
 2 files changed, 107 insertions(+), 68 deletions(-)
 rename showcase/tests/integration/components/hds/form/super-select/single/{base-test.gjs => base-test.gts} (71%)
 rename showcase/tests/integration/components/hds/form/super-select/single/{field-test.gjs => field-test.gts} (60%)

diff --git a/showcase/tests/integration/components/hds/form/super-select/single/base-test.gjs b/showcase/tests/integration/components/hds/form/super-select/single/base-test.gts
similarity index 71%
rename from showcase/tests/integration/components/hds/form/super-select/single/base-test.gjs
rename to showcase/tests/integration/components/hds/form/super-select/single/base-test.gts
index 4093e240172..c207e70de58 100644
--- a/showcase/tests/integration/components/hds/form/super-select/single/base-test.gjs
+++ b/showcase/tests/integration/components/hds/form/super-select/single/base-test.gts
@@ -7,9 +7,11 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
 // we're using this data for multiple tests so we'll define it here
-import Base from "@hashicorp/design-system-components/components/hds/form/super-select/single/base";
+import Base from '@hashicorp/design-system-components/components/hds/form/super-select/single/base';
+
+import NOOP from 'showcase/utils/noop';
+
 const setOptionsData = (context) => {
-  context.set('NOOP', () => {});
   context.set('OPTION', []);
   context.set('OPTIONS', ['Option 1', 'Option 2', 'Option 3']);
 };
@@ -22,7 +24,9 @@ module(
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} id="test-super-select-single" /></template>,
+        <template>
+          <Base @onChange={{NOOP}} id="test-super-select-single" />
+        </template>,
       );
       assert
         .dom('.hds-form-super-select-single #test-super-select-single')
@@ -34,7 +38,13 @@ module(
     test('it should render the options passed', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{NOOP}}
+            @options={{this.OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.ember-power-select-options').exists();
@@ -46,7 +56,13 @@ module(
     test('it should not render the after options block by default', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{NOOP}}
+            @options={{this.OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
@@ -55,7 +71,14 @@ module(
     test('it should render the after options block when showAfterOptions is set to true', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @showAfterOptions={{true}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{NOOP}}
+            @options={{this.OPTIONS}}
+            @showAfterOptions={{true}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert
@@ -68,7 +91,14 @@ module(
     test('it should render custom content in the after options block when `@afterOptionsContent` exists', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @afterOptionsContent="Custom content" @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @afterOptionsContent="Custom content"
+            @onChange={{NOOP}}
+            @options={{this.OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__result-count').doesNotExist();
@@ -80,7 +110,14 @@ module(
     test('it should not render the after options block when `@showAfterOptions` is false', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @showAfterOptions={{false}} @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @showAfterOptions={{false}}
+            @onChange={{NOOP}}
+            @options={{this.OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
@@ -90,9 +127,7 @@ module(
 
     test('`@matchTriggerWidth` should be true by default', async function (assert) {
       setOptionsData(this);
-      await render(
-        <template><Base @onChange={{this.NOOP}} /></template>,
-      );
+      await render(<template><Base @onChange={{NOOP}} /></template>);
       assert
         .dom('.hds-form-super-select')
         .doesNotHaveClass('hds-form-super-select--dropdown-content-auto-width');
@@ -101,7 +136,9 @@ module(
     test('it should render the correct CSS class when `@matchTriggerWidth` is false', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @matchTriggerWidth={{false}} /></template>,
+        <template>
+          <Base @onChange={{NOOP}} @matchTriggerWidth={{false}} />
+        </template>,
       );
       assert
         .dom('.hds-form-super-select')
@@ -113,7 +150,9 @@ module(
     test('it should set the correct CSS property value when `@dropdownMaxWidth` is set', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @dropdownMaxWidth="40em" /></template>,
+        <template>
+          <Base @onChange={{NOOP}} @dropdownMaxWidth="40em" />
+        </template>,
       );
 
       assert
@@ -130,7 +169,7 @@ module(
     test('it should render the correct CSS class when `@isInvalid` is true', async function (assert) {
       setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
+        <template><Base @onChange={{NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
diff --git a/showcase/tests/integration/components/hds/form/super-select/single/field-test.gjs b/showcase/tests/integration/components/hds/form/super-select/single/field-test.gts
similarity index 60%
rename from showcase/tests/integration/components/hds/form/super-select/single/field-test.gjs
rename to showcase/tests/integration/components/hds/form/super-select/single/field-test.gts
index 44e5b04f888..608aa36abe6 100644
--- a/showcase/tests/integration/components/hds/form/super-select/single/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/super-select/single/field-test.gts
@@ -5,12 +5,11 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, settled } from '@ember/test-helpers';
-// we're using this data for multiple tests so we'll define it here
-import Field from "@hashicorp/design-system-components/components/hds/form/super-select/single/field";
-const setOptionsData = (context) => {
-  context.set('NOOP', () => {});
-};
+import { render, settled, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/super-select/single/field';
+import { tracked } from 'tracked-built-ins';
+
+import NOOP from 'showcase/utils/noop';
 
 module(
   'Integration | Component | hds/form/super-select/single/field',
@@ -18,19 +17,15 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      setOptionsData(this);
-      await render(
-        <template><Field @onChange={{this.NOOP}} /></template>,
-      );
+      await render(<template><Field @onChange={{NOOP}} /></template>);
       assert.dom('.hds-form-field__control .hds-form-super-select').exists();
     });
 
     // INVALID
 
     test('it should render the correct CSS class if @isInvalid is true', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
+        <template><Field @onChange={{NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-field__control .hds-form-super-select')
@@ -40,9 +35,8 @@ module(
     // ID
 
     test('it should render the trigger with a custom id', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @id="my-super-select" @onChange={{this.NOOP}} /></template>,
+        <template><Field @id="my-super-select" @onChange={{NOOP}} /></template>,
       );
       assert
         .dom('.ember-basic-dropdown-trigger')
@@ -52,13 +46,14 @@ module(
     // YIELDED (CONTEXTUAL) COMPONENTS
 
     test('it renders the yielded contextual components', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @onChange={{this.NOOP}} as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.Error>This is the error</F.Error>
-        </Field></template>,
+        <template>
+          <Field @onChange={{NOOP}} as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.Error>This is the error</F.Error>
+          </Field>
+        </template>,
       );
       assert.dom('.hds-form-field__label').exists();
       assert.dom('.hds-form-field__helper-text').exists();
@@ -66,25 +61,23 @@ module(
       assert.dom('.hds-form-field__error').exists();
     });
     test('it does not render the yielded contextual components if not provided', async function (assert) {
-      setOptionsData(this);
-      await render(
-        <template><Field @onChange={{this.NOOP}} /></template>,
-      );
+      await render(<template><Field @onChange={{NOOP}} /></template>);
       assert.dom('.hds-form-field__label').doesNotExist();
       assert.dom('.hds-form-field__helper-text').doesNotExist();
       assert.dom('.hds-form-field__error').doesNotExist();
     });
     test('it automatically provides all the ID relations between the elements', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.Error>This is the error</F.Error>
-        </Field></template>,
+        <template>
+          <Field @extraAriaDescribedBy="extra" @onChange={{NOOP}} as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.Error>This is the error</F.Error>
+          </Field>
+        </template>,
       );
-      let control = this.element.querySelector('.ember-basic-dropdown-trigger');
-      let controlId = control.id;
+      let control = find('.ember-basic-dropdown-trigger');
+      let controlId = control?.id ?? '';
       assert
         .dom('.hds-form-field__label')
         .hasAttribute('id', `label-${controlId}`);
@@ -106,59 +99,66 @@ module(
     });
 
     test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
-      setOptionsData(this);
+      const context = tracked({
+        showErrors: false,
+      });
+
       await render(
-        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          {{#if this.showErrors}}
-            <F.Error>This is the error</F.Error>
-          {{/if}}
-        </Field></template>,
+        <template>
+          <Field @extraAriaDescribedBy="extra" @onChange={{NOOP}} as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            {{#if context.showErrors}}
+              <F.Error>This is the error</F.Error>
+            {{/if}}
+          </Field>
+        </template>,
       );
 
-      this.set('showErrors', true);
+      context.showErrors = true;
       await settled();
-      let control = this.element.querySelector('.ember-basic-dropdown-trigger');
-      let controlId = control.id;
+      let control = find('.ember-basic-dropdown-trigger');
+
       assert
         .dom('.hds-form-field__label')
-        .hasAttribute('id', `label-${controlId}`);
+        .hasAttribute('id', `label-${control?.id}`);
       assert
         .dom('.hds-form-field__helper-text')
-        .hasAttribute('id', `helper-text-${controlId}`);
+        .hasAttribute('id', `helper-text-${control?.id}`);
       assert
         .dom('.ember-basic-dropdown-trigger')
-        .hasAttribute('aria-labelledby', `label-${controlId}`);
+        .hasAttribute('aria-labelledby', `label-${control?.id}`);
       assert
         .dom('.ember-basic-dropdown-trigger')
         .hasAttribute(
           'aria-describedby',
-          `helper-text-${controlId} error-${controlId} extra`,
+          `helper-text-${control?.id} error-${control?.id} extra`,
         );
       assert
         .dom('.hds-form-field__error')
-        .hasAttribute('id', `error-${controlId}`);
+        .hasAttribute('id', `error-${control?.id}`);
     });
 
     // REQUIRED AND OPTIONAL
 
     test('it should append an indicator to the label text when user input is required', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @isRequired={{true}} @onChange={{this.NOOP}} as |F|>
+        <template>
+          <Field @isRequired={{true}} @onChange={{NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('Required');
     });
     test('it should append an indicator to the label text when user input is optional', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @isOptional={{true}} @onChange={{this.NOOP}} as |F|>
+        <template>
+          <Field @isOptional={{true}} @onChange={{NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('(Optional)');

From 0fb52198a6d1fd2e152ad30208c4f2a7d02d547c Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 09:55:10 -0400
Subject: [PATCH 28/43] feat: convert superselect multiple tests to gts

---
 .../multiple/{base-test.gjs => base-test.gts} | 115 +++++++++++------
 .../{field-test.gjs => field-test.gts}        | 118 +++++++++---------
 2 files changed, 137 insertions(+), 96 deletions(-)
 rename showcase/tests/integration/components/hds/form/super-select/multiple/{base-test.gjs => base-test.gts} (73%)
 rename showcase/tests/integration/components/hds/form/super-select/multiple/{field-test.gjs => field-test.gts} (55%)

diff --git a/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gjs b/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gts
similarity index 73%
rename from showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gjs
rename to showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gts
index 0aa1770725b..5a0cddcc890 100644
--- a/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gjs
+++ b/showcase/tests/integration/components/hds/form/super-select/multiple/base-test.gts
@@ -8,14 +8,13 @@ import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render } from '@ember/test-helpers';
 import { selectChoose } from 'ember-power-select/test-support';
 
-// we're using this data for multiple tests so we'll define it here
-import Base from "@hashicorp/design-system-components/components/hds/form/super-select/multiple/base";
-import { fn } from "@ember/helper";
-const setOptionsData = (context) => {
-  context.set('NOOP', () => {});
-  context.set('OPTION', []);
-  context.set('OPTIONS', ['Option 1', 'Option 2', 'Option 3']);
-};
+import Base from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
+import { fn } from '@ember/helper';
+
+import NOOP from 'showcase/utils/noop';
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+const OPTION: string[] = [];
 
 module(
   'Integration | Component | hds/form/super-select/multiple/base',
@@ -23,9 +22,10 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} id="test-super-select-multiple" /></template>,
+        <template>
+          <Base @onChange={{NOOP}} id="test-super-select-multiple" />
+        </template>,
       );
       assert
         .dom('.hds-form-super-select-multiple #test-super-select-multiple')
@@ -35,12 +35,12 @@ module(
     // OPTIONS
 
     test('it should render the options passed', async function (assert) {
-      setOptionsData(this);
       await render(
         <template>
-          <Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>
+          <Base @onChange={{NOOP}} @options={{OPTIONS}} as |option|>
             {{option}}
-          </Base></template>,
+          </Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.ember-power-select-options').exists();
@@ -50,9 +50,14 @@ module(
     // AFTER OPTIONS
 
     test('it should render the after options block by default', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{NOOP}}
+            @options={{OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert
@@ -69,9 +74,16 @@ module(
     });
 
     test('it should update the options view when "Show selected"/"Show all" is toggled', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{fn (mut this.OPTION)}} @selected={{this.OPTION}} @options={{this.OPTIONS}} id="test-super-select-multiple" as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{fn (mut OPTION)}}
+            @selected={{OPTION}}
+            @options={{OPTIONS}}
+            id="test-super-select-multiple"
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       await selectChoose('#test-super-select-multiple', 'Option 1');
@@ -92,9 +104,16 @@ module(
     });
 
     test('it should clear any existing selection when "Clear selected" is activated', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{fn (mut this.OPTION)}} @selected={{this.OPTION}} @options={{this.OPTIONS}} id="test-super-select-multiple" as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{fn (mut OPTION)}}
+            @selected={{OPTION}}
+            @options={{OPTIONS}}
+            id="test-super-select-multiple"
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       await selectChoose('#test-super-select-multiple', 'Option 1');
@@ -120,18 +139,30 @@ module(
     });
 
     test('it should not render the after options block when showAfterOptions is set to false', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @showAfterOptions={{false}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{NOOP}}
+            @options={{OPTIONS}}
+            @showAfterOptions={{false}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
     });
 
     test('it should render custom content in the after options block when `@afterOptionsContent` exists', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @afterOptionsContent="Custom content" @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @afterOptionsContent="Custom content"
+            @onChange={{NOOP}}
+            @options={{OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__result-count').doesNotExist();
@@ -141,18 +172,30 @@ module(
     });
 
     test('it should not render the after options block when `@showAfterOptions` is false', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @showAfterOptions={{false}} @onChange={{this.NOOP}} @options={{this.OPTIONS}} as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @showAfterOptions={{false}}
+            @onChange={{NOOP}}
+            @options={{OPTIONS}}
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert.dom('.hds-form-super-select__after-options').doesNotExist();
     });
 
     test('it should render the default after options block with custom result count message when `@resultCountMessage` exists', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @options={{this.OPTIONS}} @resultCountMessage="custom result count message" as |option|>{{option}}</Base></template>,
+        <template>
+          <Base
+            @onChange={{NOOP}}
+            @options={{OPTIONS}}
+            @resultCountMessage="custom result count message"
+            as |option|
+          >{{option}}</Base>
+        </template>,
       );
       await click('.hds-form-super-select .ember-basic-dropdown-trigger');
       assert
@@ -171,19 +214,17 @@ module(
     // MATCH TRIGGER WIDTH
 
     test('`@matchTriggerWidth` should be true by default', async function (assert) {
-      setOptionsData(this);
-      await render(
-        <template><Base @onChange={{this.NOOP}} /></template>,
-      );
+      await render(<template><Base @onChange={{NOOP}} /></template>);
       assert
         .dom('.hds-form-super-select')
         .doesNotHaveClass('hds-form-super-select--dropdown-content-auto-width');
     });
 
     test('it should render the correct CSS class when `@matchTriggerWidth` is false', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @matchTriggerWidth={{false}} /></template>,
+        <template>
+          <Base @onChange={{NOOP}} @matchTriggerWidth={{false}} />
+        </template>,
       );
       assert
         .dom('.hds-form-super-select')
@@ -193,9 +234,10 @@ module(
     // DROPDOWN MAX WIDTH
 
     test('it should set the correct CSS property value when `@dropdownMaxWidth` is set', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @dropdownMaxWidth="40em" /></template>,
+        <template>
+          <Base @onChange={{NOOP}} @dropdownMaxWidth="40em" />
+        </template>,
       );
 
       assert
@@ -210,9 +252,8 @@ module(
     // INVALID
 
     test('it should render the correct CSS class when `@isInvalid` is true', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Base @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
+        <template><Base @onChange={{NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-super-select')
diff --git a/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gjs b/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gts
similarity index 55%
rename from showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gjs
rename to showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gts
index df22501d79d..5214587615c 100644
--- a/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.gts
@@ -5,12 +5,11 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, settled } from '@ember/test-helpers';
-// we're using this data for multiple tests so we'll define it here
-import Field from "@hashicorp/design-system-components/components/hds/form/super-select/multiple/field";
-const setOptionsData = (context) => {
-  context.set('NOOP', () => {});
-};
+import { render, settled, find } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/field';
+import { tracked } from 'tracked-built-ins';
+
+import NOOP from 'showcase/utils/noop';
 
 module(
   'Integration | Component | hds/form/super-select/multiple/field',
@@ -18,19 +17,15 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      setOptionsData(this);
-      await render(
-        <template><Field @onChange={{this.NOOP}} /></template>,
-      );
+      await render(<template><Field @onChange={{NOOP}} /></template>);
       assert.dom('.hds-form-field__control .hds-form-super-select').exists();
     });
 
     // INVALID
 
     test('it should render the correct CSS class if @isInvalid is true', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @onChange={{this.NOOP}} @isInvalid={{true}} /></template>,
+        <template><Field @onChange={{NOOP}} @isInvalid={{true}} /></template>,
       );
       assert
         .dom('.hds-form-field__control .hds-form-super-select')
@@ -40,9 +35,8 @@ module(
     // ID
 
     test('it should render the trigger with a custom id', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @id="my-super-select" @onChange={{this.NOOP}} /></template>,
+        <template><Field @id="my-super-select" @onChange={{NOOP}} /></template>,
       );
       assert
         .dom('.ember-basic-dropdown-trigger')
@@ -52,13 +46,14 @@ module(
     // YIELDED (CONTEXTUAL) COMPONENTS
 
     test('it renders the yielded contextual components', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @onChange={{this.NOOP}} as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.Error>This is the error</F.Error>
-        </Field></template>,
+        <template>
+          <Field @onChange={{NOOP}} as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.Error>This is the error</F.Error>
+          </Field>
+        </template>,
       );
       assert.dom('.hds-form-field__label').exists();
       assert.dom('.hds-form-field__helper-text').exists();
@@ -66,98 +61,103 @@ module(
       assert.dom('.hds-form-field__error').exists();
     });
     test('it does not render the yielded contextual components if not provided', async function (assert) {
-      setOptionsData(this);
-      await render(
-        <template><Field @onChange={{this.NOOP}} /></template>,
-      );
+      await render(<template><Field @onChange={{NOOP}} /></template>);
       assert.dom('.hds-form-field__label').doesNotExist();
       assert.dom('.hds-form-field__helper-text').doesNotExist();
       assert.dom('.hds-form-field__error').doesNotExist();
     });
     test('it automatically provides all the ID relations between the elements', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          <F.Error>This is the error</F.Error>
-        </Field></template>,
+        <template>
+          <Field @extraAriaDescribedBy="extra" @onChange={{NOOP}} as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.Error>This is the error</F.Error>
+          </Field>
+        </template>,
       );
-      let control = this.element.querySelector('.ember-basic-dropdown-trigger');
-      let controlId = control.id;
+      let control = find('.ember-basic-dropdown-trigger');
+
       assert
         .dom('.hds-form-field__label')
-        .hasAttribute('id', `label-${controlId}`);
+        .hasAttribute('id', `label-${control?.id}`);
       assert
         .dom('.hds-form-field__helper-text')
-        .hasAttribute('id', `helper-text-${controlId}`);
+        .hasAttribute('id', `helper-text-${control?.id}`);
       assert
         .dom('.ember-basic-dropdown-trigger')
-        .hasAttribute('aria-labelledby', `label-${controlId}`);
+        .hasAttribute('aria-labelledby', `label-${control?.id}`);
       assert
         .dom('.ember-basic-dropdown-trigger')
         .hasAttribute(
           'aria-describedby',
-          `helper-text-${controlId} error-${controlId} extra`,
+          `helper-text-${control?.id} error-${control?.id} extra`,
         );
       assert
         .dom('.hds-form-field__error')
-        .hasAttribute('id', `error-${controlId}`);
+        .hasAttribute('id', `error-${control?.id}`);
     });
     test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
-      setOptionsData(this);
+      const context = tracked({
+        showErrors: false,
+      });
+
       await render(
-        <template><Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
-          <F.Label>This is the label</F.Label>
-          <F.HelperText>This is the helper text</F.HelperText>
-          {{#if this.showErrors}}
-            <F.Error>This is the error</F.Error>
-          {{/if}}
-        </Field></template>,
+        <template>
+          <Field @extraAriaDescribedBy="extra" @onChange={{NOOP}} as |F|>
+            <F.Label>This is the label</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            {{#if context.showErrors}}
+              <F.Error>This is the error</F.Error>
+            {{/if}}
+          </Field>
+        </template>,
       );
 
-      this.set('showErrors', true);
+      context.showErrors = true;
       await settled();
-      let control = this.element.querySelector('.ember-basic-dropdown-trigger');
-      let controlId = control.id;
+
+      let control = find('.ember-basic-dropdown-trigger');
       assert
         .dom('.hds-form-field__label')
-        .hasAttribute('id', `label-${controlId}`);
+        .hasAttribute('id', `label-${control?.id}`);
       assert
         .dom('.hds-form-field__helper-text')
-        .hasAttribute('id', `helper-text-${controlId}`);
+        .hasAttribute('id', `helper-text-${control?.id}`);
       assert
         .dom('.ember-basic-dropdown-trigger')
-        .hasAttribute('aria-labelledby', `label-${controlId}`);
+        .hasAttribute('aria-labelledby', `label-${control?.id}`);
       assert
         .dom('.ember-basic-dropdown-trigger')
         .hasAttribute(
           'aria-describedby',
-          `helper-text-${controlId} error-${controlId} extra`,
+          `helper-text-${control?.id} error-${control?.id} extra`,
         );
       assert
         .dom('.hds-form-field__error')
-        .hasAttribute('id', `error-${controlId}`);
+        .hasAttribute('id', `error-${control?.id}`);
     });
 
     // REQUIRED AND OPTIONAL
 
     test('it should append an indicator to the label text when user input is required', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @isRequired={{true}} @onChange={{this.NOOP}} as |F|>
+        <template>
+          <Field @isRequired={{true}} @onChange={{NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('Required');
     });
     test('it should append an indicator to the label text when user input is optional', async function (assert) {
-      setOptionsData(this);
       await render(
-        <template><Field @isOptional={{true}} @onChange={{this.NOOP}} as |F|>
+        <template>
+          <Field @isOptional={{true}} @onChange={{NOOP}} as |F|>
             <F.Label>This is the label</F.Label>
-          </Field></template>,
+          </Field>
+        </template>,
       );
       assert.dom('label .hds-form-indicator').exists();
       assert.dom('label .hds-form-indicator').hasText('(Optional)');

From f908bef547e3b3373a4ccf1c2fd55369a19b05d4 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 09:56:24 -0400
Subject: [PATCH 29/43] feat: convert tooltip tests to gts

---
 ...utton-test.gjs => tooltip-button-test.gts} | 108 ++++++++++++++----
 ...ier-test.gjs => tooltip-modifier-test.gts} |  30 +++--
 2 files changed, 102 insertions(+), 36 deletions(-)
 rename showcase/tests/integration/components/hds/tooltip/{tooltip-button-test.gjs => tooltip-button-test.gts} (61%)
 rename showcase/tests/integration/components/hds/tooltip/{tooltip-modifier-test.gjs => tooltip-modifier-test.gts} (54%)

diff --git a/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gjs b/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gts
similarity index 61%
rename from showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gjs
rename to showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gts
index 19c77f86a7a..328b8fd39ba 100644
--- a/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gjs
+++ b/showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gts
@@ -5,17 +5,28 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { focus, render, triggerKeyEvent, setupOnerror } from '@ember/test-helpers';
-import { wait } from 'showcase/tests/helpers';
-import TooltipButton from "@hashicorp/design-system-components/components/hds/tooltip-button/index";
-import { hash } from "@ember/helper";
+import {
+  focus,
+  render,
+  triggerKeyEvent,
+  setupOnerror,
+  find,
+  settled,
+} from '@ember/test-helpers';
+import TooltipButton from '@hashicorp/design-system-components/components/hds/tooltip-button/index';
+import { hash } from '@ember/helper';
 
 module('Integration | Component | hds/tooltip/index', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
     assert.dom('#test-tooltip-button').hasClass('hds-tooltip-button');
   });
@@ -24,7 +35,12 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it renders plain text content passed into the tooltip', async function (assert) {
     await render(
-      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-content').hasText('More info.');
@@ -33,7 +49,11 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
   test('when allowHTML to true is passed in as an extraTippyOption, it renders rich HTML and text content passed into the tooltip', async function (assert) {
     await render(
       <template>
-        <TooltipButton @extraTippyOptions={{hash allowHTML=true}} @text="<em>em</em> <strong>strong</strong>" id="test-tooltip-button">info</TooltipButton>
+        <TooltipButton
+          @extraTippyOptions={{hash allowHTML=true}}
+          @text="<em>em</em> <strong>strong</strong>"
+          id="test-tooltip-button"
+        >info</TooltipButton>
       </template>,
     );
     await focus('#test-tooltip-button');
@@ -44,10 +64,13 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
   // A11Y
 
   test('it displays the tooltip when focused and dismisses it if Escape key is triggered', async function (assert) {
-    const escapeKey = 27;
-
     await render(
-      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
 
     // Test that tooltip does not display by default:
@@ -58,15 +81,21 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
     assert.dom('.tippy-box').exists();
 
     // Trigger escape key to close the tooltip:
-    await triggerKeyEvent('#test-tooltip-button', 'keydown', escapeKey);
-    await wait(1000);
+    await triggerKeyEvent('#test-tooltip-button', 'keydown', 'Escape');
+    await settled();
+
     // test that the tooltip is now gone:
     assert.dom('.tippy-box').doesNotExist();
   });
 
   test('the tooltip has a role of "tooltip"', async function (assert) {
     await render(
-      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-box').hasAttribute('role', 'tooltip');
@@ -74,25 +103,34 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('the button has an aria-describedby and aria-controls attribute with a value matching the tooltip container', async function (assert) {
     await render(
-      <template><TooltipButton @text="Hello" data-test-tooltip-button>info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="Hello"
+          data-test-tooltip-button
+        >info</TooltipButton>
+      </template>,
     );
     await focus('[data-test-tooltip-button]');
-    const tooltipContainerId = this.element
-      .querySelector('.hds-tooltip-container')
-      .getAttribute('id');
+    const tooltipContainer = find('.hds-tooltip-container');
     assert
       .dom('[data-test-tooltip-button]')
-      .hasAttribute('aria-describedby', tooltipContainerId);
+      .hasAttribute('aria-describedby', tooltipContainer?.id ?? '');
     assert
       .dom('[data-test-tooltip-button]')
-      .hasAttribute('aria-controls', tooltipContainerId);
+      .hasAttribute('aria-controls', tooltipContainer?.id ?? '');
   });
 
   // PLACEMENT
 
   test('it should render the component with the passed in @placement', async function (assert) {
     await render(
-      <template><TooltipButton @text="Hello" @placement="right" id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="Hello"
+          @placement="right"
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
     await focus('#test-tooltip-button');
     assert.dom('.tippy-box').hasAttribute('data-placement', 'right');
@@ -102,7 +140,12 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it should render the component with isInline as true by default', async function (assert) {
     await render(
-      <template><TooltipButton @text="More info." id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
     assert
       .dom('#test-tooltip-button')
@@ -111,7 +154,13 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
 
   test('it should render the component with the correct class if isInline is set to false', async function (assert) {
     await render(
-      <template><TooltipButton @text="More info." @isInline={{false}} id="test-tooltip-button">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          @isInline={{false}}
+          id="test-tooltip-button"
+        >info</TooltipButton>
+      </template>,
     );
     assert.dom('#test-tooltip-button').hasClass('hds-tooltip-button--is-block');
   });
@@ -125,7 +174,12 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><TooltipButton>info</TooltipButton></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <TooltipButton>info</TooltipButton>
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -139,7 +193,13 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><TooltipButton @text="More info." @placement="invalid">info</TooltipButton></template>,
+      <template>
+        <TooltipButton
+          @text="More info."
+          {{! @glint-expect-error - testing invalid component usage }}
+          @placement="invalid"
+        >info</TooltipButton>
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gjs b/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gts
similarity index 54%
rename from showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gjs
rename to showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gts
index 4934282dbf1..f1346faca0b 100644
--- a/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gjs
+++ b/showcase/tests/integration/components/hds/tooltip/tooltip-modifier-test.gts
@@ -5,15 +5,21 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { focus, render } from '@ember/test-helpers';
-import hdsTooltip from "@hashicorp/design-system-components/modifiers/hds-tooltip";
+import { focus, render, find } from '@ember/test-helpers';
+import hdsTooltip from '@hashicorp/design-system-components/modifiers/hds-tooltip';
 
-module('Integration | Component | hds/tooltip/index', function (hooks) {
+module('Integration | Component | hds/tooltip/modifier', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it attaches a tooltip to the element it is invoked on', async function (assert) {
     await render(
-      <template><a href="#" {{hdsTooltip "More info."}} id="test-tooltip-modifier">Info</a></template>,
+      <template>
+        <a
+          href="#"
+          {{hdsTooltip "More info."}}
+          id="test-tooltip-modifier"
+        >Info</a>
+      </template>,
     );
     // activate the tooltip:
     await focus('#test-tooltip-modifier');
@@ -24,17 +30,17 @@ module('Integration | Component | hds/tooltip/index', function (hooks) {
     assert.dom('#test-tooltip-modifier').hasAttribute('aria-describedby');
     assert.dom('.hds-tooltip-container').exists();
     assert.dom('.hds-tooltip-container').hasAttribute('id');
+
+    const tooltipContainer = find('.hds-tooltip-container');
+    const tooltipModifier = find('#test-tooltip-modifier');
+
     assert.strictEqual(
-      this.element
-        .querySelector('#test-tooltip-modifier')
-        .getAttribute('aria-describedby'),
-      this.element.querySelector('.hds-tooltip-container').getAttribute('id'),
+      tooltipModifier?.getAttribute('aria-describedby'),
+      tooltipContainer?.id ?? '',
     );
     assert.strictEqual(
-      this.element
-        .querySelector('#test-tooltip-modifier')
-        .getAttribute('aria-controls'),
-      this.element.querySelector('.hds-tooltip-container').getAttribute('id'),
+      tooltipModifier?.getAttribute('aria-controls'),
+      tooltipContainer?.id ?? '',
     );
   });
 });

From e6c3b244ba911cdd94bd41dd90d5c5360db58b56 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:01:48 -0400
Subject: [PATCH 30/43] feat: convert pagination nav subcomponent tests to gts

---
 .../nav/{arrow-test.gjs => arrow-test.gts}    | 74 ++++++++++++-------
 .../nav/{number-test.gjs => number-test.gts}  | 68 +++++++++++++----
 2 files changed, 101 insertions(+), 41 deletions(-)
 rename showcase/tests/integration/components/hds/pagination/nav/{arrow-test.gjs => arrow-test.gts} (66%)
 rename showcase/tests/integration/components/hds/pagination/nav/{number-test.gjs => number-test.gts} (59%)

diff --git a/showcase/tests/integration/components/hds/pagination/nav/arrow-test.gjs b/showcase/tests/integration/components/hds/pagination/nav/arrow-test.gts
similarity index 66%
rename from showcase/tests/integration/components/hds/pagination/nav/arrow-test.gjs
rename to showcase/tests/integration/components/hds/pagination/nav/arrow-test.gts
index 23e7fed5188..0f0fd82c91c 100644
--- a/showcase/tests/integration/components/hds/pagination/nav/arrow-test.gjs
+++ b/showcase/tests/integration/components/hds/pagination/nav/arrow-test.gts
@@ -6,7 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Arrow from "@hashicorp/design-system-components/components/hds/pagination/nav/arrow";
+import Arrow from '@hashicorp/design-system-components/components/hds/pagination/nav/arrow';
+import { tracked } from 'tracked-built-ins';
+import type { HdsPaginationDirections } from '@hashicorp/design-system-components/components/hds/pagination/types';
 
 module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,19 +17,21 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-      <Arrow @direction="prev" id="test-nav-arrow" />
-    </template>);
+    await render(
+      <template><Arrow @direction="prev" id="test-nav-arrow" /></template>,
+    );
     assert.dom('#test-nav-arrow').hasClass('hds-pagination-nav__arrow');
   });
 
   // DIRECTION
 
   test('it should render a "Previous" or "Next" button matching the passed in direction', async function (assert) {
-    await render(<template>
-    <Arrow @direction="prev" id="test-nav-arrow-prev" />
-    <Arrow @direction="next" id="test-nav-arrow-next" />
-    </template>);
+    await render(
+      <template>
+        <Arrow @direction="prev" id="test-nav-arrow-prev" />
+        <Arrow @direction="next" id="test-nav-arrow-next" />
+      </template>,
+    );
     assert
       .dom('#test-nav-arrow-next')
       .hasClass('hds-pagination-nav__arrow--direction-next')
@@ -43,10 +47,12 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
   // LABEL
 
   test('it should render the appropriate text labels by default', async function (assert) {
-    await render(<template>
-      <Arrow @direction="prev" id="test-nav-arrow-prev" />
-      <Arrow @direction="next" id="test-nav-arrow-next" />
-    </template>);
+    await render(
+      <template>
+        <Arrow @direction="prev" id="test-nav-arrow-prev" />
+        <Arrow @direction="next" id="test-nav-arrow-next" />
+      </template>,
+    );
     assert
       .dom('#test-nav-arrow-prev .hds-pagination-nav__arrow-label')
       .hasText('Previous');
@@ -55,33 +61,39 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
       .hasText('Next');
   });
   test('it should not render the text label if @showLabel is set to false', async function (assert) {
-    await render(<template>
-      <Arrow @direction="prev" @showLabel={{false}} />
-    </template>);
+    await render(
+      <template><Arrow @direction="prev" @showLabel={{false}} /></template>,
+    );
     assert.dom('.hds-pagination-nav__arrow-label').doesNotExist();
   });
 
   // DISABLED
 
   test('it should render a disabled button when @disabled is set to true', async function (assert) {
-    await render(<template>
-        <Arrow @direction="prev" @disabled={{true}} />
-      </template>);
+    await render(
+      <template><Arrow @direction="prev" @disabled={{true}} /></template>,
+    );
     assert.dom('.hds-pagination-nav__control').hasAttribute('disabled');
   });
 
   // EVENTS
 
   test('it should call the onClick handler with the value of the direction of the button', async function (assert) {
-    let direction;
-    this.set('onClick', (dir) => (direction = dir));
+    const context = tracked<
+      Record<'direction', HdsPaginationDirections | undefined>
+    >({
+      direction: undefined,
+    });
+
+    const onClick = (dir: HdsPaginationDirections) => {
+      context.direction = dir;
+    };
+
     await render(
-      <template>
-          <Arrow @direction="prev" @onClick={{this.onClick}} />
-        </template>,
+      <template><Arrow @direction="prev" @onClick={{onClick}} /></template>,
     );
     await click('.hds-pagination-nav__control');
-    assert.strictEqual(direction, 'prev');
+    assert.strictEqual(context.direction, 'prev');
   });
 
   // ASSERTIONS
@@ -93,7 +105,12 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Arrow /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Arrow />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -105,7 +122,12 @@ module('Integration | Component | hds/pagination/nav/arrow', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Arrow @direction="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Arrow @direction="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
diff --git a/showcase/tests/integration/components/hds/pagination/nav/number-test.gjs b/showcase/tests/integration/components/hds/pagination/nav/number-test.gts
similarity index 59%
rename from showcase/tests/integration/components/hds/pagination/nav/number-test.gjs
rename to showcase/tests/integration/components/hds/pagination/nav/number-test.gts
index cc8b23fc943..6c5d87d5c17 100644
--- a/showcase/tests/integration/components/hds/pagination/nav/number-test.gjs
+++ b/showcase/tests/integration/components/hds/pagination/nav/number-test.gts
@@ -6,7 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Number0 from "@hashicorp/design-system-components/components/hds/pagination/nav/number";
+import { HdsPaginationNavNumber } from '@hashicorp/design-system-components/components';
+
+import NOOP from 'showcase/utils/noop';
 
 module('Integration | Component | hds/pagination/nav/number', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,9 +17,16 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-        <Number0 @page={{1}} id="test-pagination-number" />
-      </template>);
+    await render(
+      <template>
+        <HdsPaginationNavNumber
+          @page={{1}}
+          @onClick={{NOOP}}
+          @isSelected={{false}}
+          id="test-pagination-number"
+        />
+      </template>,
+    );
     assert
       .dom('#test-pagination-number')
       .hasClass('hds-pagination-nav__number');
@@ -26,19 +35,37 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
   // CONTENT
 
   test('it displays the passed in page number', async function (assert) {
-    await render(<template>
-        <Number0 @page={{5}} />
-      </template>);
+    await render(
+      <template>
+        <HdsPaginationNavNumber
+          @page={{5}}
+          @onClick={{NOOP}}
+          @isSelected={{false}}
+        />
+      </template>,
+    );
     assert.dom('.hds-pagination-nav__control').hasText('page 5');
   });
 
   // SELECTED
 
   test('it is selected if @isSelected is set to true', async function (assert) {
-    await render(<template>
-        <Number0 @page={{1}} @isSelected={{true}} id="test-is-selected" />
-        <Number0 @page={{3}} id="test-not-selected" />
-      </template>);
+    await render(
+      <template>
+        <HdsPaginationNavNumber
+          @page={{1}}
+          @isSelected={{true}}
+          id="test-is-selected"
+          @onClick={{NOOP}}
+        />
+        <HdsPaginationNavNumber
+          @page={{3}}
+          id="test-not-selected"
+          @onClick={{NOOP}}
+          @isSelected={{false}}
+        />
+      </template>,
+    );
     assert
       .dom('#test-is-selected')
       .hasClass('hds-pagination-nav__number--is-selected');
@@ -55,11 +82,17 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
 
   test('it should call the onClick handler with the value of the page number', async function (assert) {
     let pageNumber;
-    this.set('onClick', (pageNum) => (pageNumber = pageNum));
+    const onClick = (pageNum: number) => (pageNumber = pageNum);
+
     await render(
       <template>
-          <Number0 @page={{3}} id="test-pagination-number" @onClick={{this.onClick}} />
-        </template>,
+        <HdsPaginationNavNumber
+          @page={{3}}
+          id="test-pagination-number"
+          @onClick={{onClick}}
+          @isSelected={{false}}
+        />
+      </template>,
     );
     await click('#test-pagination-number');
     assert.strictEqual(pageNumber, 3);
@@ -74,7 +107,12 @@ module('Integration | Component | hds/pagination/nav/number', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Number0 /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <HdsPaginationNavNumber @onClick={{NOOP}} @isSelected={{false}} />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From a713cc2b72aa5095d0a6c1be91dc7ff779164505 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:13:03 -0400
Subject: [PATCH 31/43] feat: convert rest of pagination tests to gts

---
 .../{compact-test.gjs => compact-test.gts}    |  88 ++++---
 .../{numbered-test.gjs => numbered-test.gts}  | 241 ++++++++++++------
 ...lector-test.gjs => size-selector-test.gts} |  87 +++++--
 3 files changed, 273 insertions(+), 143 deletions(-)
 rename showcase/tests/integration/components/hds/pagination/{compact-test.gjs => compact-test.gts} (73%)
 rename showcase/tests/integration/components/hds/pagination/{numbered-test.gjs => numbered-test.gts} (75%)
 rename showcase/tests/integration/components/hds/pagination/{size-selector-test.gjs => size-selector-test.gts} (64%)

diff --git a/showcase/tests/integration/components/hds/pagination/compact-test.gjs b/showcase/tests/integration/components/hds/pagination/compact-test.gts
similarity index 73%
rename from showcase/tests/integration/components/hds/pagination/compact-test.gjs
rename to showcase/tests/integration/components/hds/pagination/compact-test.gts
index 8829a654751..bf85c852085 100644
--- a/showcase/tests/integration/components/hds/pagination/compact-test.gjs
+++ b/showcase/tests/integration/components/hds/pagination/compact-test.gts
@@ -6,8 +6,10 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Compact from "@hashicorp/design-system-components/components/hds/pagination/compact/index";
-import { array } from "@ember/helper";
+import Compact from '@hashicorp/design-system-components/components/hds/pagination/compact/index';
+import type { HdsPaginationDirections } from '@hashicorp/design-system-components/components/hds/pagination/types';
+
+import { array } from '@ember/helper';
 
 module('Integration | Component | hds/pagination/compact', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,9 +18,7 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-    <Compact id="test-pagination-compact" />
-    </template>);
+    await render(<template><Compact id="test-pagination-compact" /></template>);
     assert.dom('#test-pagination-compact').hasClass('hds-pagination');
   });
 
@@ -44,25 +44,19 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
       .exists();
   });
   test('it should not render the text labels if @showLabels is set to false', async function (assert) {
-    await render(<template>
-      <Compact @showLabels={{false}} />
-    </template>);
+    await render(<template><Compact @showLabels={{false}} /></template>);
     assert.dom('.hds-pagination-nav__arrow-label').doesNotExist();
   });
 
   // SIZE SELECTOR
 
   test('it shows the "size-selector" if @showSizeSelector is true', async function (assert) {
-    await render(<template>
-      <Compact @showSizeSelector={{true}} />
-    </template>);
+    await render(<template><Compact @showSizeSelector={{true}} /></template>);
     assert.dom('.hds-pagination .hds-pagination-size-selector').exists();
   });
 
   test('it renders the "size selector" content with default pageSizes values', async function (assert) {
-    await render(<template>
-      <Compact @showSizeSelector={{true}} />
-    </template>);
+    await render(<template><Compact @showSizeSelector={{true}} /></template>);
     assert
       .dom('.hds-pagination .hds-pagination-size-selector option[value="10"]')
       .hasText('10');
@@ -75,9 +69,11 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it renders custom options for passed in pageSizes and sets currentPageSize to the first PageSizes item', async function (assert) {
-    await render(<template>
-      <Compact @showSizeSelector={{true}} @pageSizes={{array 20 40 60}} />
-    </template>);
+    await render(
+      <template>
+        <Compact @showSizeSelector={{true}} @pageSizes={{array 20 40 60}} />
+      </template>,
+    );
     assert
       .dom('.hds-pagination .hds-pagination-size-selector option[value="20"]')
       .hasText('20');
@@ -90,27 +86,37 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it renders the passed in currentPageSize value', async function (assert) {
-    await render(<template>
-      <Compact @showSizeSelector={{true}} @currentPageSize={{40}} @pageSizes={{array 20 40 60}} />
-    </template>);
+    await render(
+      <template>
+        <Compact
+          @showSizeSelector={{true}}
+          @currentPageSize={{40}}
+          @pageSizes={{array 20 40 60}}
+        />
+      </template>,
+    );
     assert
       .dom('.hds-pagination .hds-pagination-size-selector select')
       .hasValue('40');
   });
 
   test('it displays the passed in custom text for the SizeSelector label text', async function (assert) {
-    await render(<template>
-      <Compact @showSizeSelector={{true}} @sizeSelectorLabel="Custom text" />
-    </template>);
+    await render(
+      <template>
+        <Compact @showSizeSelector={{true}} @sizeSelectorLabel="Custom text" />
+      </template>,
+    );
     assert.dom('.hds-pagination-size-selector label').hasText('Custom text');
   });
 
   // DISABLED
 
   test('it should render disabled buttons when @isDisabledPrev/Next are set to true', async function (assert) {
-    await render(<template>
+    await render(
+      <template>
         <Compact @isDisabledPrev={{true}} @isDisabledNext={{true}} />
-      </template>);
+      </template>,
+    );
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
       .hasAttribute('disabled');
@@ -123,11 +129,12 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
 
   test('it should invoke the onPageChange callback and return the value of the new page number and page size', async function (assert) {
     let direction;
-    this.set('onPageChange', (dir) => (direction = dir));
+    const onPageChange = (dir: HdsPaginationDirections) => {
+      direction = dir;
+    };
+
     await render(
-      <template>
-        <Compact @onPageChange={{this.onPageChange}} />
-        </template>,
+      <template><Compact @onPageChange={{onPageChange}} /></template>,
     );
     await click('.hds-pagination-nav__arrow--direction-prev');
     assert.strictEqual(direction, 'prev');
@@ -138,9 +145,15 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   // ROUTING
 
   test('it should render links instead of buttons, with the correct "href" values, if it has routing', async function (assert) {
-    this.set('myQueryFunction', (page) => ({ page }));
+    const myQueryFunction = (page: string) => ({ page });
+
     await render(
-      <template><Compact @route="page-components.pagination" @queryFunction={{this.myQueryFunction}} /></template>,
+      <template>
+        <Compact
+          @route="page-components.pagination"
+          @queryFunction={{myQueryFunction}}
+        />
+      </template>,
     );
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
@@ -160,7 +173,10 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Compact @queryFunction="foo" @model="test" /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Compact @queryFunction="foo" @model="test" />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -168,7 +184,8 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
   });
 
   test('it should throw an assertion if @queryFunction is provided without a routing argument', async function (assert) {
-    this.set('myQueryFunction', (page) => ({ page }));
+    const myQueryFunction = (page: string) => ({ page });
+
     const errorMessage =
       '@model, @models, or @route for "Hds::Pagination::Compact" must be provided when using the `@queryFunction` argument';
     assert.expect(2);
@@ -176,7 +193,10 @@ module('Integration | Component | hds/pagination/compact', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Compact @queryFunction={{this.myQueryFunction}} /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Compact @queryFunction={{myQueryFunction}} />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/pagination/numbered-test.gjs b/showcase/tests/integration/components/hds/pagination/numbered-test.gts
similarity index 75%
rename from showcase/tests/integration/components/hds/pagination/numbered-test.gjs
rename to showcase/tests/integration/components/hds/pagination/numbered-test.gts
index deaa7a4d678..847164262b3 100644
--- a/showcase/tests/integration/components/hds/pagination/numbered-test.gjs
+++ b/showcase/tests/integration/components/hds/pagination/numbered-test.gts
@@ -5,9 +5,15 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, select, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Numbered from "@hashicorp/design-system-components/components/hds/pagination/numbered/index";
-import { array } from "@ember/helper";
+import {
+  click,
+  select,
+  render,
+  resetOnerror,
+  setupOnerror,
+} from '@ember/test-helpers';
+import Numbered from '@hashicorp/design-system-components/components/hds/pagination/numbered/index';
+import { array } from '@ember/helper';
 
 module('Integration | Component | hds/pagination/numbered', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,27 +22,25 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} id="test-pagination-numbered" />
-    </template>);
+    await render(
+      <template>
+        <Numbered @totalItems={{100}} id="test-pagination-numbered" />
+      </template>,
+    );
     assert.dom('#test-pagination-numbered').hasClass('hds-pagination');
   });
 
   // CONTENT (AND ARGUMENTS DRILLING)
 
   test('it renders the main child components', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} />
-    </template>);
+    await render(<template><Numbered @totalItems={{100}} /></template>);
     assert.dom('.hds-pagination .hds-pagination-info').exists();
     assert.dom('.hds-pagination .hds-pagination-nav').exists();
     assert.dom('.hds-pagination .hds-pagination-size-selector').exists();
   });
 
   test('it renders the "info" and "size selector" content with default pageSizes and currentPageSize values', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} />
-    </template>);
+    await render(<template><Numbered @totalItems={{100}} /></template>);
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–10 of 100');
     assert
       .dom('.hds-pagination .hds-pagination-size-selector option[value="10"]')
@@ -50,9 +54,11 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it renders custom options for passed in pageSizes and sets currentPageSize to the first PageSizes item', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @pageSizes={{array 20 40 60}} />
-    </template>);
+    await render(
+      <template>
+        <Numbered @totalItems={{100}} @pageSizes={{array 20 40 60}} />
+      </template>,
+    );
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–20 of 100');
     assert
       .dom('.hds-pagination .hds-pagination-size-selector select')
@@ -70,7 +76,13 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
 
   test('it renders the passed in currentPageSize value', async function (assert) {
     await render(
-      <template><Numbered @totalItems={{100}} @currentPageSize={{40}} @pageSizes={{array 20 40 60}} /></template>,
+      <template>
+        <Numbered
+          @totalItems={{100}}
+          @currentPageSize={{40}}
+          @pageSizes={{array 20 40 60}}
+        />
+      </template>,
     );
 
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–40 of 100');
@@ -80,9 +92,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it renders the "nav" content', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} />
-    </template>);
+    await render(<template><Numbered @totalItems={{100}} /></template>);
     assert
       .dom('.hds-pagination .hds-pagination-nav__arrow--direction-prev')
       .exists();
@@ -97,33 +107,42 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it displays the passed in custom text for the SizeSelector label text', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @sizeSelectorLabel="Custom text" />
-    </template>);
+    await render(
+      <template>
+        <Numbered @totalItems={{100}} @sizeSelectorLabel="Custom text" />
+      </template>,
+    );
     assert.dom('.hds-pagination-size-selector label').hasText('Custom text');
   });
 
   // SHOW/HIDE ELEMENTS
   test('it hides the total items from the "info" content when @showTotalItems is false', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @showTotalItems={{false}} />
-    </template>);
+    await render(
+      <template>
+        <Numbered @totalItems={{100}} @showTotalItems={{false}} />
+      </template>,
+    );
     assert.dom('.hds-pagination .hds-pagination-info').hasText('1–10');
   });
 
   test('it hides "info", "page numbers" and "size-selector" @showInfo/@showPageNumbers/@showSizeSelector are false', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @showInfo={{false}} @showPageNumbers={{false}} @showSizeSelector={{false}} />
-    </template>);
+    await render(
+      <template>
+        <Numbered
+          @totalItems={{100}}
+          @showInfo={{false}}
+          @showPageNumbers={{false}}
+          @showSizeSelector={{false}}
+        />
+      </template>,
+    );
     assert.dom('.hds-pagination .hds-pagination-info').doesNotExist();
     assert.dom('.hds-pagination .hds-pagination-nav__page-list').doesNotExist();
     assert.dom('.hds-pagination .hds-pagination-size-selector').doesNotExist();
   });
 
   test('it hides the "prev/next" labels by default', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} />
-    </template>);
+    await render(<template><Numbered @totalItems={{100}} /></template>);
     assert
       .dom(
         '.hds-pagination-nav__arrow--direction-prev .hds-pagination-nav__arrow-label',
@@ -137,9 +156,11 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it show the "prev/next" labels is @showLabels is true', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @showLabels={{true}} />
-    </template>);
+    await render(
+      <template>
+        <Numbered @totalItems={{100}} @showLabels={{true}} />
+      </template>,
+    );
     assert
       .dom(
         '.hds-pagination-nav__arrow--direction-prev .hds-pagination-nav__arrow-label',
@@ -155,9 +176,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // CURRENT PAGE
 
   test('the selected page match the passed in @currentPage value', async function (assert) {
-    await render(<template>
-    <Numbered @totalItems={{100}} @currentPage={{2}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{2}} /></template>,
+    );
     assert.dom('.hds-pagination-nav__number--is-selected').exists();
     assert.dom('.hds-pagination-nav__number--is-selected').hasText('page 2');
   });
@@ -165,9 +186,7 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // TRUNCATION
 
   test('it truncates the page numbers by default', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} />
-    </template>);
+    await render(<template><Numbered @totalItems={{100}} /></template>);
     // displays 7 items (the max number displayed)
     assert
       .dom('.hds-pagination-nav .hds-pagination-nav__page-item')
@@ -175,18 +194,20 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it disable truncation if @isTruncated is false', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @isTruncated={{false}} />
-    </template>);
+    await render(
+      <template>
+        <Numbered @totalItems={{100}} @isTruncated={{false}} />
+      </template>,
+    );
     assert
       .dom('.hds-pagination .hds-pagination-nav .hds-pagination-nav__page-item')
       .exists({ count: 10 });
   });
 
   test('it should display an ellipsis for the 5th item when the first page number is selected', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @currentPage={{1}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{1}} /></template>,
+    );
     assert
       .dom('.hds-pagination-nav .hds-pagination-nav__page-item:nth-child(5)')
       .hasText('...');
@@ -198,9 +219,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it should display an ellipsis for the 2nd and 6th items when a middle page number is selected', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @currentPage={{4}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{4}} /></template>,
+    );
     assert.dom('.hds-pagination-nav__page-item:nth-child(2)').hasText('...');
     assert.dom('.hds-pagination-nav__page-item:nth-child(6)').hasText('...');
     assert
@@ -211,9 +232,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('it should display an ellipsis for the 3rd item when the last page number is selected', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @currentPage={{10}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{10}} /></template>,
+    );
     assert.dom('.hds-pagination-nav__page-item:nth-child(3)').hasText('...');
     assert
       .dom('.hds-pagination-nav__page-item:not(:nth-child(3))')
@@ -223,9 +244,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // DISABLED PREV/NEXT
 
   test('when on the first page, the "Previous" control should be disabled', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @currentPage={{1}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{1}} /></template>,
+    );
     // Test that the first page is selected:
     assert
       .dom(
@@ -236,9 +257,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('when on the last page, the "Next" control should be disabled', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @currentPage={{10}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{10}} /></template>,
+    );
     // Test that the last page is selected:
     assert
       .dom(
@@ -249,8 +270,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('clicking on the fist/last page disables the "Prev/Next" controls', async function (assert) {
-    await render(<template><Numbered @totalItems={{100}} @currentPage={{10}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{10}} /></template>,
+    );
     assert.dom('.hds-pagination-nav__arrow--direction-prev').isNotDisabled();
     assert.dom('.hds-pagination-nav__arrow--direction-prev').isNotDisabled();
     // Activate the first page:
@@ -280,9 +302,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // INTERACTION
 
   test('it should select the activated page number', async function (assert) {
-    await render(<template>
-    <Numbered @totalItems={{100}} @currentPage={{1}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{1}} /></template>,
+    );
     assert
       .dom(
         '.hds-pagination-nav__page-item:nth-child(3) .hds-pagination-nav__control',
@@ -301,9 +323,9 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   });
 
   test('selecting a pageSize option should change the page size', async function (assert) {
-    await render(<template>
-      <Numbered @totalItems={{100}} @currentPage={{1}} />
-    </template>);
+    await render(
+      <template><Numbered @totalItems={{100}} @currentPage={{1}} /></template>,
+    );
     // Check that items per page is initially set to 10:
     assert.dom('.hds-pagination-size-selector select').hasValue('10');
     assert.dom('.hds-pagination-info').hasText('1–10 of 100');
@@ -354,14 +376,16 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
 
   test('it should invoke the onPageChange callback and return the value of the new page number and page size', async function (assert) {
     let pageNumber, pageSize;
-    this.set('onPageChange', (page, size) => {
+
+    const onPageChange = (page: number, size: number) => {
       pageNumber = page;
       pageSize = size;
-    });
+    };
+
     await render(
       <template>
-        <Numbered @totalItems={{100}} @onPageChange={{this.onPageChange}} />
-        </template>,
+        <Numbered @totalItems={{100}} @onPageChange={{onPageChange}} />
+      </template>,
     );
     await click(
       '.hds-pagination-nav__page-item:nth-child(3) .hds-pagination-nav__control',
@@ -372,11 +396,15 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
 
   test('it should invoke the onPageSizeChange callback and return the value of the new page size', async function (assert) {
     let size;
-    this.set('onPageSizeChange', (pageSize) => (size = pageSize));
+
+    const onPageSizeChange = (pageSize: number) => {
+      size = pageSize;
+    };
+
     await render(
       <template>
-        <Numbered @totalItems={{100}} @onPageSizeChange={{this.onPageSizeChange}} />
-        </template>,
+        <Numbered @totalItems={{100}} @onPageSizeChange={{onPageSizeChange}} />
+      </template>,
     );
     await select('.hds-pagination-size-selector select', '30'); // notice: '30' needs to be a string to work
     assert.strictEqual(size, 30); // notice: it's converted to an integer by the callback function
@@ -385,9 +413,21 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
   // ROUTING
 
   test('it should render links instead of buttons, with the correct "href" values, if it has routing', async function (assert) {
-    this.set('myQueryFunction', (page, pageSize) => ({ page, pageSize }));
+    const myQueryFunction = (page: number, pageSize: number) => ({
+      page,
+      pageSize,
+    });
+
     await render(
-      <template><Numbered @totalItems={{30}} @currentPage={{2}} @currentPageSize={{10}} @route="page-components.pagination" @queryFunction={{this.myQueryFunction}} /></template>,
+      <template>
+        <Numbered
+          @totalItems={{30}}
+          @currentPage={{2}}
+          @currentPageSize={{10}}
+          @route="page-components.pagination"
+          @queryFunction={{myQueryFunction}}
+        />
+      </template>,
     );
     assert
       .dom('.hds-pagination-nav__arrow--direction-prev')
@@ -417,14 +457,29 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Numbered @totalItems={{100}} @queryFunction="foo" @model="test" /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Numbered
+          @totalItems={{100}}
+          @queryFunction="foo"
+          @model="test"
+          @currentPage={{2}}
+          @currentPageSize={{10}}
+          @route=""
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
   });
+
   test('it should throw an assertion if it has routing but @currentPage and @currentPageSize are not defined as number', async function (assert) {
-    this.set('myQueryFunction', (page, pageSize) => ({ page, pageSize }));
+    const myQueryFunction = (page: number, pageSize: number) => ({
+      page,
+      pageSize,
+    });
+
     const errorMessage =
       '@currentPage and @currentPageSize for "Hds::Pagination::Numbered" must be provided as numeric arguments when the pagination controls the routing';
     assert.expect(2);
@@ -432,7 +487,15 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Numbered @totalItems={{100}} @queryFunction={{this.myQueryFunction}} @model="test" /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Numbered
+          @totalItems={{100}}
+          @queryFunction={{myQueryFunction}}
+          @model="test"
+          @route=""
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -445,7 +508,12 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Numbered /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Numbered />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -457,13 +525,19 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Numbered @totalItems="foo" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Numbered @totalItems="foo" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
   });
   test('it should throw an assertion if @queryFunction is provided without a routing argument', async function (assert) {
-    this.set('myQueryFunction', (page) => ({ page }));
+    const myQueryFunction = (page: number) => ({ page });
+
     const errorMessage =
       '@model, @models, or @route for "Hds::Pagination::Numbered" must be provided when using the @queryFunction argument';
     assert.expect(2);
@@ -471,7 +545,10 @@ module('Integration | Component | hds/pagination/numbered', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Numbered @queryFunction={{this.myQueryFunction}} /></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Numbered @queryFunction={{myQueryFunction}} />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/pagination/size-selector-test.gjs b/showcase/tests/integration/components/hds/pagination/size-selector-test.gts
similarity index 64%
rename from showcase/tests/integration/components/hds/pagination/size-selector-test.gjs
rename to showcase/tests/integration/components/hds/pagination/size-selector-test.gts
index a8647792a35..c258c1d09f9 100644
--- a/showcase/tests/integration/components/hds/pagination/size-selector-test.gjs
+++ b/showcase/tests/integration/components/hds/pagination/size-selector-test.gts
@@ -5,9 +5,15 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { select, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import SizeSelector from "@hashicorp/design-system-components/components/hds/pagination/size-selector/index";
-import { array } from "@ember/helper";
+import {
+  select,
+  render,
+  resetOnerror,
+  setupOnerror,
+  find,
+} from '@ember/test-helpers';
+import SizeSelector from '@hashicorp/design-system-components/components/hds/pagination/size-selector/index';
+import { array } from '@ember/helper';
 
 module(
   'Integration | Component | hds/pagination/size-selector',
@@ -18,9 +24,14 @@ module(
     });
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(<template>
-      <SizeSelector @pageSizes={{array 10 30 50}} id="test-pagination-size-selector" />
-    </template>);
+      await render(
+        <template>
+          <SizeSelector
+            @pageSizes={{array 10 30 50}}
+            id="test-pagination-size-selector"
+          />
+        </template>,
+      );
       assert
         .dom('#test-pagination-size-selector')
         .hasClass('hds-pagination-size-selector');
@@ -29,9 +40,9 @@ module(
     // CONTENT
 
     test('it should display options for the passed in page sizes', async function (assert) {
-      await render(<template>
-      <SizeSelector @pageSizes={{array 10 30 50}} />
-    </template>);
+      await render(
+        <template><SizeSelector @pageSizes={{array 10 30 50}} /></template>,
+      );
       assert
         .dom('.hds-pagination-size-selector option[value="10"]')
         .hasText('10');
@@ -44,36 +55,45 @@ module(
     });
 
     test('it should display the passed in @selectedSize as selected value', async function (assert) {
-      await render(<template>
-        <SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{30}} />
-      </template>);
+      await render(
+        <template>
+          <SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{30}} />
+        </template>,
+      );
       assert.dom('.hds-pagination-size-selector select').hasValue('30');
     });
 
     test('it has a label with a "for" attribute value matching the select id value', async function (assert) {
-      await render(<template>
-        <SizeSelector @pageSizes={{array 10 30 50}} id="test-pagination-size-selector" />
-      </template>);
+      await render(
+        <template>
+          <SizeSelector
+            @pageSizes={{array 10 30 50}}
+            id="test-pagination-size-selector"
+          />
+        </template>,
+      );
 
-      let controlId = this.element.querySelector('.hds-form-select').id;
+      let control = find('.hds-form-select');
       assert
         .dom('.hds-pagination-size-selector label')
-        .hasAttribute('for', controlId);
+        .hasAttribute('for', control?.id ?? '');
     });
 
     test('the label text matches the default value if no custom value is set', async function (assert) {
-      await render(<template>
-        <SizeSelector @pageSizes={{array 10 30 50}} />
-      </template>);
+      await render(
+        <template><SizeSelector @pageSizes={{array 10 30 50}} /></template>,
+      );
       assert
         .dom('.hds-pagination-size-selector label')
         .hasText('Items per page');
     });
 
     test('it displays the passed in custom text for the label text', async function (assert) {
-      await render(<template>
-        <SizeSelector @pageSizes={{array 10 30 50}} @label="Custom text" />
-      </template>);
+      await render(
+        <template>
+          <SizeSelector @pageSizes={{array 10 30 50}} @label="Custom text" />
+        </template>,
+      );
       assert.dom('.hds-pagination-size-selector label').hasText('Custom text');
     });
 
@@ -81,10 +101,16 @@ module(
 
     test('it should call the onClick handler with the value of the page number', async function (assert) {
       let size;
-      this.set('onChange', (pageSize) => (size = pageSize));
+      const onChange = (pageSize: number) => (size = pageSize);
+
       await render(
         <template>
-        <SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{10}} id="test-pagination-size-selector" @onChange={{this.onChange}} />
+          <SizeSelector
+            @pageSizes={{array 10 30 50}}
+            @selectedSize={{10}}
+            id="test-pagination-size-selector"
+            @onChange={{onChange}}
+          />
         </template>,
       );
       await select('#test-pagination-size-selector select', '30'); // notice: '30' needs to be a string to work
@@ -100,7 +126,12 @@ module(
       setupOnerror(function (error) {
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
-      await render(<template><SizeSelector /></template>);
+      await render(
+        <template>
+          {{! @glint-expect-error - testing invalid component usage }}
+          <SizeSelector />
+        </template>,
+      );
       assert.throws(function () {
         throw new Error(errorMessage);
       });
@@ -113,7 +144,9 @@ module(
         assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
       });
       await render(
-        <template><SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{1234}} /></template>,
+        <template>
+          <SizeSelector @pageSizes={{array 10 30 50}} @selectedSize={{1234}} />
+        </template>,
       );
       assert.throws(function () {
         throw new Error(errorMessage);

From 40b547218f2c52555e607365a14e7d2aa8d705fa Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:18:15 -0400
Subject: [PATCH 32/43] feat: convert most of advanced table tests to gts

---
 .../{th-sort-test.gjs => th-sort-test.gts}    | 121 ++++++++++++++----
 .../{th-test.gjs => th-test.gts}              | 118 ++++++++++++-----
 .../{tr-test.gjs => tr-test.gts}              |  72 ++++++++---
 3 files changed, 232 insertions(+), 79 deletions(-)
 rename showcase/tests/integration/components/hds/advanced-table/{th-sort-test.gjs => th-sort-test.gts} (68%)
 rename showcase/tests/integration/components/hds/advanced-table/{th-test.gjs => th-test.gts} (69%)
 rename showcase/tests/integration/components/hds/advanced-table/{tr-test.gjs => tr-test.gts} (70%)

diff --git a/showcase/tests/integration/components/hds/advanced-table/th-sort-test.gjs b/showcase/tests/integration/components/hds/advanced-table/th-sort-test.gts
similarity index 68%
rename from showcase/tests/integration/components/hds/advanced-table/th-sort-test.gjs
rename to showcase/tests/integration/components/hds/advanced-table/th-sort-test.gts
index 2f425be4417..c0e8f60056f 100644
--- a/showcase/tests/integration/components/hds/advanced-table/th-sort-test.gjs
+++ b/showcase/tests/integration/components/hds/advanced-table/th-sort-test.gts
@@ -5,8 +5,8 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, click, focus, setupOnerror } from '@ember/test-helpers';
-import ThSort from "@hashicorp/design-system-components/components/hds/advanced-table/th-sort";
+import { render, click, focus, setupOnerror, find } from '@ember/test-helpers';
+import ThSort from '@hashicorp/design-system-components/components/hds/advanced-table/th-sort';
 
 module(
   'Integration | Component | hds/advanced-table/th-sort',
@@ -14,7 +14,9 @@ module(
     setupRenderingTest(hooks);
     test('it renders with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
+        <template>
+          <ThSort id="data-test-advanced-table-th-sort">Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -31,7 +33,9 @@ module(
 
     test('it renders text content yielded within the cell', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
+        <template>
+          <ThSort id="data-test-advanced-table-th-sort">Artist</ThSort>
+        </template>,
       );
       assert
         .dom(
@@ -44,7 +48,12 @@ module(
 
     test('it should render with the appropriate `@align` CSS class', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort" @align="right">Year</ThSort></template>,
+        <template>
+          <ThSort
+            id="data-test-advanced-table-th-sort"
+            @align="right"
+          >Year</ThSort>
+        </template>,
       );
       assert
         .dom('#data-test-advanced-table-th-sort')
@@ -55,7 +64,9 @@ module(
 
     test('if @sortOrder is not defined, the swap-vertical icon should be displayed', async function (assert) {
       await render(
-        <template><ThSort @sortBy="artist">Artist</ThSort></template>,
+        <template>
+          <ThSort>Artist</ThSort>
+        </template>,
       );
 
       assert.dom('[data-test-icon="swap-vertical"]').exists();
@@ -63,13 +74,17 @@ module(
 
     test('if sorted, and `@sortOrder` is set, the correct icon should be displayed', async function (assert) {
       await render(
-        <template><ThSort @sortOrder="asc">Artist</ThSort></template>,
+        <template>
+          <ThSort @sortOrder="asc">Artist</ThSort>
+        </template>,
       );
 
       assert.dom('[data-test-icon="arrow-up"]').exists();
 
       await render(
-        <template><ThSort @sortOrder="desc">Artist</ThSort></template>,
+        <template>
+          <ThSort @sortOrder="desc">Artist</ThSort>
+        </template>,
       );
 
       assert.dom('[data-test-icon="arrow-down"]').exists();
@@ -79,14 +94,18 @@ module(
 
     test('it should support splattributes', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th" lang="es">Artist</ThSort></template>,
+        <template>
+          <ThSort id="data-test-advanced-table-th" lang="es">Artist</ThSort>
+        </template>,
       );
       assert.dom('#data-test-advanced-table-th').hasAttribute('lang', 'es');
     });
 
     test('it has a role and it is set to columnheader by default', async function (assert) {
       await render(
-        <template><ThSort>Artist</ThSort></template>,
+        <template>
+          <ThSort>Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -95,7 +114,9 @@ module(
     });
     test('the default `scope` attribute can not be overwritten', async function (assert) {
       await render(
-        <template><ThSort scope="row">Artist</ThSort></template>,
+        <template>
+          <ThSort scope="row">Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -105,7 +126,9 @@ module(
 
     test('if unsorted, the aria-sort attribute value should be set to none', async function (assert) {
       await render(
-        <template><ThSort @sortBy="artist" id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
+        <template>
+          <ThSort id="data-test-advanced-table-th-sort">Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -114,7 +137,12 @@ module(
     });
     test('if sorted, the aria-sort attribute value should reflect the direction', async function (assert) {
       await render(
-        <template><ThSort @sortBy="artist" @sortOrder="desc" id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
+        <template>
+          <ThSort
+            @sortOrder="desc"
+            id="data-test-advanced-table-th-sort"
+          >Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -123,15 +151,20 @@ module(
     });
     test('it renders the `aria-labelledby` attribute for the sort button with the correct IDs', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort" @sortBy="artist" @sortOrder="desc">Artist</ThSort></template>,
+        <template>
+          <ThSort
+            id="data-test-advanced-table-th-sort"
+            @sortOrder="desc"
+          >Artist</ThSort>
+        </template>,
       );
-      const prefixLabel = this.element.querySelector(
+      const prefixLabel = find(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button-aria-label-hidden-segment:nth-of-type(1)',
       );
-      const buttonLabel = this.element.querySelector(
+      const buttonLabel = find(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-content > span',
       );
-      const suffixLabel = this.element.querySelector(
+      const suffixLabel = find(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button-aria-label-hidden-segment:nth-of-type(2)',
       );
       assert
@@ -140,7 +173,7 @@ module(
         )
         .hasAria(
           'labelledby',
-          `${prefixLabel.id} ${buttonLabel.id} ${suffixLabel.id}`,
+          `${prefixLabel?.id} ${buttonLabel?.id} ${suffixLabel?.id}`,
         );
       assert.dom(suffixLabel).hasText('ascending');
     });
@@ -154,7 +187,13 @@ module(
       });
 
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort" @rowspan={{3}} @isStickyColumn={{true}} /></template>,
+        <template>
+          <ThSort
+            id="data-test-advanced-table-th-sort"
+            @rowspan={{3}}
+            @isStickyColumn={{true}}
+          />
+        </template>,
       );
 
       assert.throws(function () {
@@ -172,7 +211,13 @@ module(
       });
 
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort" @colspan={{3}} @isStickyColumn={{true}} /></template>,
+        <template>
+          <ThSort
+            id="data-test-advanced-table-th-sort"
+            @colspan={{3}}
+            @isStickyColumn={{true}}
+          />
+        </template>,
       );
 
       assert.throws(function () {
@@ -184,9 +229,17 @@ module(
 
     test('it should call the `@onClickSort` function if provided', async function (assert) {
       let isClicked = false;
-      this.set('onClickSort', () => (isClicked = true));
+      const onClickSort = () => {
+        isClicked = true;
+      };
+
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort" @onClickSort={{this.onClickSort}}>Artist</ThSort></template>,
+        <template>
+          <ThSort
+            id="data-test-advanced-table-th-sort"
+            @onClickSort={{onClickSort}}
+          >Artist</ThSort>
+        </template>,
       );
       await click(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button--sort',
@@ -198,7 +251,9 @@ module(
 
     test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
+        <template>
+          <ThSort id="data-test-advanced-table-th-sort">Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -209,7 +264,12 @@ module(
     });
     test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
       await render(
-        <template><ThSort @tooltip="More info." id="data-test-advanced-table-th-sort">Artist</ThSort></template>,
+        <template>
+          <ThSort
+            @tooltip="More info."
+            id="data-test-advanced-table-th-sort"
+          >Artist</ThSort>
+        </template>,
       );
 
       assert
@@ -226,19 +286,24 @@ module(
     });
     test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
       await render(
-        <template><ThSort id="data-test-advanced-table-th-sort" @tooltip="More info.">Artist</ThSort></template>,
+        <template>
+          <ThSort
+            id="data-test-advanced-table-th-sort"
+            @tooltip="More info."
+          >Artist</ThSort>
+        </template>,
       );
-      let prefixLabel = this.element.querySelector(
+      let prefixLabel = find(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-button-aria-label-hidden-segment',
       );
-      let buttonLabel = this.element.querySelector(
+      let buttonLabel = find(
         '#data-test-advanced-table-th-sort .hds-advanced-table__th-content > span',
       );
       assert
         .dom(
           '#data-test-advanced-table-th-sort .hds-advanced-table__th-button--tooltip',
         )
-        .hasAria('labelledby', `${prefixLabel.id} ${buttonLabel.id}`);
+        .hasAria('labelledby', `${prefixLabel?.id} ${buttonLabel?.id}`);
     });
   },
 );
diff --git a/showcase/tests/integration/components/hds/advanced-table/th-test.gjs b/showcase/tests/integration/components/hds/advanced-table/th-test.gts
similarity index 69%
rename from showcase/tests/integration/components/hds/advanced-table/th-test.gjs
rename to showcase/tests/integration/components/hds/advanced-table/th-test.gts
index e42d8b7f388..25fef546d8d 100644
--- a/showcase/tests/integration/components/hds/advanced-table/th-test.gjs
+++ b/showcase/tests/integration/components/hds/advanced-table/th-test.gts
@@ -5,16 +5,18 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, focus, click, setupOnerror } from '@ember/test-helpers';
-import Th from "@hashicorp/design-system-components/components/hds/advanced-table/th";
-import AdvancedTable from "@hashicorp/design-system-components/components/hds/advanced-table/index";
+import { render, focus, click, setupOnerror, find } from '@ember/test-helpers';
+import Th from '@hashicorp/design-system-components/components/hds/advanced-table/th';
+import AdvancedTable from '@hashicorp/design-system-components/components/hds/advanced-table/index';
 
 module('Integration | Component | hds/advanced-table/th', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th">Artist</Th>
+      </template>,
     );
 
     assert
@@ -26,7 +28,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders text content yielded within the cell (no tooltip)', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th">Artist</Th>
+      </template>,
     );
     assert
       .dom(
@@ -37,7 +41,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders text content yielded within the cell (with tooltip)', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Th>
+      </template>,
     );
     assert
       .dom(
@@ -50,7 +56,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it does not render an expand button by default', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th">Artist</Th>
+      </template>,
     );
 
     assert.dom('.hds-advanced-table__th-button--expand').doesNotExist();
@@ -58,7 +66,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders an expand button when `@isExpandable` is true and defaults to collapsed', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th" @isExpandable={{true}}>Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th" @isExpandable={{true}}>Artist</Th>
+      </template>,
     );
     assert
       .dom(
@@ -70,7 +80,13 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it renders an expand button when `@isExpandable` is true and is expanded if `@isExpanded`', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th" @isExpandable={{true}} @isExpanded={{true}}>Artist</Th></template>,
+      <template>
+        <Th
+          id="data-advanced-test-table-th"
+          @isExpandable={{true}}
+          @isExpanded={{true}}
+        >Artist</Th>
+      </template>,
     );
     assert
       .dom(
@@ -84,10 +100,18 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should call the `@onClickToggle` function if provided', async function (assert) {
     let isClicked = false;
-    this.set('onClickToggle', () => (isClicked = true));
+    const onClickToggle = () => {
+      isClicked = true;
+    };
 
     await render(
-      <template><Th id="data-advanced-test-table-th" @isExpandable={{true}} @onClickToggle={{this.onClickToggle}}>Artist</Th></template>,
+      <template>
+        <Th
+          id="data-advanced-test-table-th"
+          @isExpandable={{true}}
+          @onClickToggle={{onClickToggle}}
+        >Artist</Th>
+      </template>,
     );
 
     await click(
@@ -101,7 +125,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th" @align="right">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th" @align="right">Artist</Th>
+      </template>,
     );
     assert
       .dom('#data-advanced-test-table-th')
@@ -111,9 +137,7 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
   // ATTRIBUTES
 
   test('it should render with the appropriate span information by default', async function (assert) {
-    await render(
-      <template><Th id="data-test-advanced-table-th" /></template>,
-    );
+    await render(<template><Th id="data-test-advanced-table-th" /></template>);
 
     assert.dom('#data-test-advanced-table-th').hasNoAttribute('aria-rowspan');
     assert.dom('#data-test-advanced-table-th').hasNoAttribute('aria-colspan');
@@ -125,7 +149,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should render with the appropriate span information when pass rowspan and colspan', async function (assert) {
     await render(
-      <template><Th id="data-test-advanced-table-th" @rowspan={{3}} @colspan={{5}} /></template>,
+      <template>
+        <Th id="data-test-advanced-table-th" @rowspan={{3}} @colspan={{5}} />
+      </template>,
     );
 
     assert
@@ -151,7 +177,13 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     });
 
     await render(
-      <template><Th id="data-test-advanced-table-th" @rowspan={{3}} @isStickyColumn={{true}} /></template>,
+      <template>
+        <Th
+          id="data-test-advanced-table-th"
+          @rowspan={{3}}
+          @isStickyColumn={{true}}
+        />
+      </template>,
     );
 
     assert.throws(function () {
@@ -169,7 +201,13 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     });
 
     await render(
-      <template><Th id="data-test-advanced-table-th" @colspan={{3}} @isStickyColumn={{true}} /></template>,
+      <template>
+        <Th
+          id="data-test-advanced-table-th"
+          @colspan={{3}}
+          @isStickyColumn={{true}}
+        />
+      </template>,
     );
 
     assert.throws(function () {
@@ -179,14 +217,18 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th" lang="es">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th" lang="es">Artist</Th>
+      </template>,
     );
     assert.dom('#data-advanced-test-table-th').hasAttribute('lang', 'es');
   });
 
   test('it has the role attribute set to columnheader by default', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th">Artist</Th>
+      </template>,
     );
     assert
       .dom('#data-advanced-test-table-th')
@@ -194,20 +236,28 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
   });
 
   test('it has the role rowheader if inside a tbody', async function (assert) {
-    this.set('model', [
+    const model = [
       { key: 'artist', name: 'Test 1', description: 'Test 1 description' },
       { key: 'album', name: 'Test 2', description: 'Test 2 description' },
       { key: 'year', name: 'Test 3', description: 'Test 3 description' },
-    ]);
+    ];
 
-    this.set('columns', [
+    const columns = [
       { key: 'artist', label: 'components.table.headers.artist' },
       { key: 'album', label: 'components.table.headers.album' },
       { key: 'year', label: 'components.table.headers.year' },
-    ]);
+    ];
 
     await render(
-      <template><AdvancedTable @model={{this.model}} @columns={{this.columns}}><:body as |B|><B.Tr><B.Th id="data-advanced-test-table-th">Artist</B.Th></B.Tr></:body></AdvancedTable></template>,
+      <template>
+        <AdvancedTable @model={{model}} @columns={{columns}}>
+          <:body as |B|>
+            <B.Tr>
+              <B.Th id="data-advanced-test-table-th">Artist</B.Th>
+            </B.Tr>
+          </:body>
+        </AdvancedTable>
+      </template>,
     );
     assert
       .dom('#data-advanced-test-table-th')
@@ -218,7 +268,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
 
   test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th">Artist</Th>
+      </template>,
     );
 
     assert
@@ -229,7 +281,9 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
   });
   test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
     await render(
-      <template><Th @tooltip="More info." id="data-advanced-test-table-th">Artist</Th></template>,
+      <template>
+        <Th @tooltip="More info." id="data-advanced-test-table-th">Artist</Th>
+      </template>,
     );
 
     assert
@@ -246,18 +300,20 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
     await render(
-      <template><Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Th></template>,
+      <template>
+        <Th id="data-advanced-test-table-th" @tooltip="More info.">Artist</Th>
+      </template>,
     );
-    let prefixLabel = this.element.querySelector(
+    let prefixLabel = find(
       '#data-advanced-test-table-th .hds-advanced-table__th-button-aria-label-hidden-segment',
     );
-    let buttonLabel = this.element.querySelector(
+    let buttonLabel = find(
       '#data-advanced-test-table-th .hds-advanced-table__th-content > span',
     );
     assert
       .dom(
         '#data-advanced-test-table-th .hds-advanced-table__th-button--tooltip',
       )
-      .hasAria('labelledby', `${prefixLabel.id} ${buttonLabel.id}`);
+      .hasAria('labelledby', `${prefixLabel?.id} ${buttonLabel?.id}`);
   });
 });
diff --git a/showcase/tests/integration/components/hds/advanced-table/tr-test.gjs b/showcase/tests/integration/components/hds/advanced-table/tr-test.gts
similarity index 70%
rename from showcase/tests/integration/components/hds/advanced-table/tr-test.gjs
rename to showcase/tests/integration/components/hds/advanced-table/tr-test.gts
index 9cf1013ed12..6596226ff33 100644
--- a/showcase/tests/integration/components/hds/advanced-table/tr-test.gjs
+++ b/showcase/tests/integration/components/hds/advanced-table/tr-test.gts
@@ -6,15 +6,15 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, setupOnerror } from '@ember/test-helpers';
-import Tr from "@hashicorp/design-system-components/components/hds/advanced-table/tr";
+import Tr from '@hashicorp/design-system-components/components/hds/advanced-table/tr';
+
+import NOOP from 'showcase/utils/noop';
 
 module('Integration | Component | hds/advanced-table/tr', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
-    await render(
-      <template><Tr id="data-test-advanced-table-tr" /></template>,
-    );
+    await render(<template><Tr id="data-test-advanced-table-tr" /></template>);
 
     assert
       .dom('#data-test-advanced-table-tr')
@@ -22,9 +22,7 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
   });
 
   test('it should render with the appropriate role', async function (assert) {
-    await render(
-      <template><Tr id="data-test-advanced-table-tr" /></template>,
-    );
+    await render(<template><Tr id="data-test-advanced-table-tr" /></template>);
     assert.dom('#data-test-advanced-table-tr').hasAttribute('role', 'row');
   });
 
@@ -32,7 +30,9 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      <template><Tr id="data-test-advanced-table-tr"><td></td></Tr></template>,
+      <template>
+        <Tr id="data-test-advanced-table-tr"><td></td></Tr>
+      </template>,
     );
     assert.dom('#data-test-advanced-table-tr > td').exists();
   });
@@ -43,36 +43,54 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
     '#data-test-advanced-table-tr > .hds-advanced-table__th--is-selectable input.hds-advanced-table__checkbox';
 
   test('it should not render a checkbox if `@isSelectable` is not set', async function (assert) {
-    await render(
-      <template><Tr id="data-test-advanced-table-tr" /></template>,
-    );
+    await render(<template><Tr id="data-test-advanced-table-tr" /></template>);
     assert.dom(checkboxSelector).doesNotExist();
   });
 
   test('it should render a checkbox if `@isSelectable` is `true`', async function (assert) {
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} /></template>,
+      <template>
+        <Tr id="data-test-advanced-table-tr" @isSelectable={{true}} />
+      </template>,
     );
     assert.dom(checkboxSelector).exists();
   });
 
   test('the checkbox should be checked if `@isSelected` is `true`', async function (assert) {
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @isSelected={{true}} /></template>,
+      <template>
+        <Tr
+          id="data-test-advanced-table-tr"
+          @isSelectable={{true}}
+          @isSelected={{true}}
+        />
+      </template>,
     );
     assert.dom(checkboxSelector).isChecked();
   });
 
   test('the checkbox contains the `@selectionAriaLabelSuffix` suffix', async function (assert) {
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @selectionAriaLabelSuffix="row 123" /></template>,
+      <template>
+        <Tr
+          id="data-test-advanced-table-tr"
+          @isSelectable={{true}}
+          @selectionAriaLabelSuffix="row 123"
+        />
+      </template>,
     );
     assert.dom(checkboxSelector).hasAria('label', 'Select row 123');
   });
 
   test('the `th` element has the correct `role` attribute value provided via `@selectionScope`', async function (assert) {
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @selectionScope="row" /></template>,
+      <template>
+        <Tr
+          id="data-test-advanced-table-tr"
+          @isSelectable={{true}}
+          @selectionScope="row"
+        />
+      </template>,
     );
     assert
       .dom(
@@ -88,17 +106,29 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
       (_checkbox, selectionKey) => (key = selectionKey),
     );
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @selectionScope="row" @selectionKey="row123" @onSelectionChange={{this.onSelectionChange}} /></template>,
+      <template>
+        <Tr
+          id="data-test-advanced-table-tr"
+          @isSelectable={{true}}
+          @selectionScope="row"
+          @selectionKey="row123"
+          @onSelectionChange={{this.onSelectionChange}}
+        />
+      </template>,
     );
     await click(checkboxSelector);
     assert.strictEqual(key, 'row123');
   });
 
   test('it should render a sort button in the checkbox cell if `@onClickSortBySelected` is provided and `@isSelectable` is `true`', async function (assert) {
-    this.set('noop', () => {});
-
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} @onClickSortBySelected={{this.noop}} /></template>,
+      <template>
+        <Tr
+          id="data-test-advanced-table-tr"
+          @isSelectable={{true}}
+          @onClickSortBySelected={{NOOP}}
+        />
+      </template>,
     );
 
     assert
@@ -108,7 +138,9 @@ module('Integration | Component | hds/advanced-table/tr', function (hooks) {
 
   test('it should not render a sort button in the checkbox cell if `@isSelectable` is `true`, and `@onClickSortBySelected` is undefined', async function (assert) {
     await render(
-      <template><Tr id="data-test-advanced-table-tr" @isSelectable={{true}} /></template>,
+      <template>
+        <Tr id="data-test-advanced-table-tr" @isSelectable={{true}} />
+      </template>,
     );
 
     assert

From e0a8ac8743ab1e580cf0cc72980e00c59e845b8b Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:23:45 -0400
Subject: [PATCH 33/43] feat: convert most of table tests to gts

---
 .../{th-sort-test.gjs => th-sort-test.gts}    | 98 ++++++++++++++-----
 .../hds/table/{th-test.gjs => th-test.gts}    | 60 ++++++++----
 .../hds/table/{tr-test.gjs => tr-test.gts}    | 73 +++++++++++---
 3 files changed, 170 insertions(+), 61 deletions(-)
 rename showcase/tests/integration/components/hds/table/{th-sort-test.gjs => th-sort-test.gts} (68%)
 rename showcase/tests/integration/components/hds/table/{th-test.gjs => th-test.gts} (66%)
 rename showcase/tests/integration/components/hds/table/{tr-test.gjs => tr-test.gts} (70%)

diff --git a/showcase/tests/integration/components/hds/table/th-sort-test.gjs b/showcase/tests/integration/components/hds/table/th-sort-test.gts
similarity index 68%
rename from showcase/tests/integration/components/hds/table/th-sort-test.gjs
rename to showcase/tests/integration/components/hds/table/th-sort-test.gts
index cd48182a0d9..ffdc8645dc8 100644
--- a/showcase/tests/integration/components/hds/table/th-sort-test.gjs
+++ b/showcase/tests/integration/components/hds/table/th-sort-test.gts
@@ -5,14 +5,16 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, click, focus } from '@ember/test-helpers';
-import ThSort from "@hashicorp/design-system-components/components/hds/table/th-sort";
+import { render, click, focus, find } from '@ember/test-helpers';
+import ThSort from '@hashicorp/design-system-components/components/hds/table/th-sort';
 
 module('Integration | Component | hds/table/th-sort', function (hooks) {
   setupRenderingTest(hooks);
   test('it renders with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th-sort">Artist</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th-sort">Artist</ThSort>
+      </template>,
     );
 
     assert.dom('#data-test-table-th-sort').hasClass('hds-table__th--sort');
@@ -23,7 +25,9 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it renders text content yielded within the cell', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th-sort">Artist</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th-sort">Artist</ThSort>
+      </template>,
     );
     assert
       .dom('#data-test-table-th-sort .hds-table__th-content > span')
@@ -34,7 +38,9 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th-sort" @align="right">Year</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th-sort" @align="right">Year</ThSort>
+      </template>,
     );
     assert
       .dom('#data-test-table-th-sort')
@@ -56,7 +62,9 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if @sortOrder is not defined, the swap-vertical icon should be displayed', async function (assert) {
     await render(
-      <template><ThSort @sortBy="artist">Artist</ThSort></template>,
+      <template>
+        <ThSort>Artist</ThSort>
+      </template>,
     );
 
     assert.dom('[data-test-icon="swap-vertical"]').exists();
@@ -64,13 +72,17 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if sorted, and `@sortOrder` is set, the correct icon should be displayed', async function (assert) {
     await render(
-      <template><ThSort @sortOrder="asc">Artist</ThSort></template>,
+      <template>
+        <ThSort @sortOrder="asc">Artist</ThSort>
+      </template>,
     );
 
     assert.dom('[data-test-icon="arrow-up"]').exists();
 
     await render(
-      <template><ThSort @sortOrder="desc">Artist</ThSort></template>,
+      <template>
+        <ThSort @sortOrder="desc">Artist</ThSort>
+      </template>,
     );
 
     assert.dom('[data-test-icon="arrow-down"]').exists();
@@ -80,19 +92,27 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th" lang="es">Artist</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th" lang="es">Artist</ThSort>
+      </template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('lang', 'es');
   });
 
   test('it has the `scope` attribute, and it is set to column by default', async function (assert) {
-    await render(<template><ThSort>Artist</ThSort></template>);
+    await render(
+      <template>
+        <ThSort>Artist</ThSort>
+      </template>,
+    );
 
     assert.dom('.hds-table__th--sort').hasAttribute('scope', 'col');
   });
   test('the default `scope` attribute can not be overwritten', async function (assert) {
     await render(
-      <template><ThSort scope="row">Artist</ThSort></template>,
+      <template>
+        <ThSort scope="row">Artist</ThSort>
+      </template>,
     );
 
     assert.dom('.hds-table__th--sort').hasAttribute('scope', 'col');
@@ -100,14 +120,18 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if unsorted, the aria-sort attribute value should be set to none', async function (assert) {
     await render(
-      <template><ThSort @sortBy="artist" id="data-test-table-th-sort">Artist</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th-sort">Artist</ThSort>
+      </template>,
     );
 
     assert.dom('#data-test-table-th-sort').hasAttribute('aria-sort', 'none');
   });
   test('if sorted, the aria-sort attribute value should reflect the direction', async function (assert) {
     await render(
-      <template><ThSort @sortBy="artist" @sortOrder="desc" id="data-test-table-th-sort">Artist</ThSort></template>,
+      <template>
+        <ThSort @sortOrder="desc" id="data-test-table-th-sort">Artist</ThSort>
+      </template>,
     );
 
     assert
@@ -116,22 +140,24 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the sort button with the correct IDs', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th-sort" @sortBy="artist" @sortOrder="desc">Artist</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th-sort" @sortOrder="desc">Artist</ThSort>
+      </template>,
     );
-    const prefixLabel = this.element.querySelector(
+    const prefixLabel = find(
       '#data-test-table-th-sort .hds-table__th-button-aria-label-hidden-segment:nth-of-type(1)',
     );
-    const buttonLabel = this.element.querySelector(
+    const buttonLabel = find(
       '#data-test-table-th-sort .hds-table__th-content > span',
     );
-    const suffixLabel = this.element.querySelector(
+    const suffixLabel = find(
       '#data-test-table-th-sort .hds-table__th-button-aria-label-hidden-segment:nth-of-type(2)',
     );
     assert
       .dom('#data-test-table-th-sort .hds-table__th-button--sort')
       .hasAria(
         'labelledby',
-        `${prefixLabel.id} ${buttonLabel.id} ${suffixLabel.id}`,
+        `${prefixLabel?.id} ${buttonLabel?.id} ${suffixLabel?.id}`,
       );
     assert.dom(suffixLabel).hasText('Ascending');
   });
@@ -140,9 +166,17 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('it should call the `@onClickSort` function if provided', async function (assert) {
     let isClicked = false;
-    this.set('onClickSort', () => (isClicked = true));
+    const onClickSort = () => {
+      isClicked = true;
+    };
+
     await render(
-      <template><ThSort id="data-test-table-th-sort" @onClickSort={{this.onClickSort}}>Artist</ThSort></template>,
+      <template>
+        <ThSort
+          id="data-test-table-th-sort"
+          @onClickSort={{onClickSort}}
+        >Artist</ThSort>
+      </template>,
     );
     await click('#data-test-table-th-sort .hds-table__th-button--sort');
     assert.ok(isClicked);
@@ -152,7 +186,9 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
 
   test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th-sort">Artist</ThSort></template>,
+      <template>
+        <ThSort id="data-test-table-th-sort">Artist</ThSort>
+      </template>,
     );
 
     assert
@@ -161,7 +197,12 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
   });
   test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
     await render(
-      <template><ThSort @tooltip="More info." id="data-test-table-th-sort">Artist</ThSort></template>,
+      <template>
+        <ThSort
+          @tooltip="More info."
+          id="data-test-table-th-sort"
+        >Artist</ThSort>
+      </template>,
     );
 
     assert
@@ -174,16 +215,21 @@ module('Integration | Component | hds/table/th-sort', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
     await render(
-      <template><ThSort id="data-test-table-th-sort" @tooltip="More info.">Artist</ThSort></template>,
+      <template>
+        <ThSort
+          id="data-test-table-th-sort"
+          @tooltip="More info."
+        >Artist</ThSort>
+      </template>,
     );
-    let prefixLabel = this.element.querySelector(
+    let prefixLabel = find(
       '#data-test-table-th-sort .hds-table__th-button-aria-label-hidden-segment',
     );
-    let buttonLabel = this.element.querySelector(
+    let buttonLabel = find(
       '#data-test-table-th-sort .hds-table__th-content > span',
     );
     assert
       .dom('#data-test-table-th-sort .hds-table__th-button--tooltip')
-      .hasAria('labelledby', `${prefixLabel.id} ${buttonLabel.id}`);
+      .hasAria('labelledby', `${prefixLabel?.id} ${buttonLabel?.id}`);
   });
 });
diff --git a/showcase/tests/integration/components/hds/table/th-test.gjs b/showcase/tests/integration/components/hds/table/th-test.gts
similarity index 66%
rename from showcase/tests/integration/components/hds/table/th-test.gjs
rename to showcase/tests/integration/components/hds/table/th-test.gts
index b083fdc2d03..7560a7a28de 100644
--- a/showcase/tests/integration/components/hds/table/th-test.gjs
+++ b/showcase/tests/integration/components/hds/table/th-test.gts
@@ -5,16 +5,18 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, focus } from '@ember/test-helpers';
-import Th from "@hashicorp/design-system-components/components/hds/table/th";
-import Table from "@hashicorp/design-system-components/components/hds/table/index";
+import { render, focus, find } from '@ember/test-helpers';
+import Th from '@hashicorp/design-system-components/components/hds/table/th';
+import Table from '@hashicorp/design-system-components/components/hds/table/index';
 
 module('Integration | Component | hds/table/th', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th">Artist</Th>
+      </template>,
     );
     assert.dom('#data-test-table-th').hasClass('hds-table__th');
   });
@@ -23,13 +25,17 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it renders text content yielded within the cell (no tooltip)', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th">Artist</Th>
+      </template>,
     );
     assert.dom('#data-test-table-th > span').hasText('Artist');
   });
   test('it renders text content yielded within the cell (with tooltip)', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th" @tooltip="More info.">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th" @tooltip="More info.">Artist</Th>
+      </template>,
     );
     assert
       .dom('#data-test-table-th .hds-table__th-content > span')
@@ -40,7 +46,9 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it should render with the appropriate `@align` CSS class', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th" @align="right">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th" @align="right">Artist</Th>
+      </template>,
     );
     assert.dom('#data-test-table-th').hasClass('hds-table__th--align-right');
   });
@@ -49,7 +57,9 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it should add inline styles if `@width` is declared', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th" @width="10%">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th" @width="10%">Artist</Th>
+      </template>,
     );
     assert
       .dom('#data-test-table-th')
@@ -60,20 +70,28 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('it should support splattributes', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th" lang="es">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th" lang="es">Artist</Th>
+      </template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('lang', 'es');
   });
 
   test('it has the scope attribute set to column by default', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th">Artist</Th>
+      </template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('scope', 'col');
   });
   test('it has the scope attribute set to row if inside a tbody', async function (assert) {
     await render(
-      <template><Table><:body as |B|><B.Tr><B.Th id="data-test-table-th">Artist</B.Th></B.Tr></:body></Table></template>,
+      <template>
+        <Table><:body as |B|><B.Tr><B.Th
+                id="data-test-table-th"
+              >Artist</B.Th></B.Tr></:body></Table>
+      </template>,
     );
     assert.dom('#data-test-table-th').hasAttribute('scope', 'row');
   });
@@ -82,7 +100,9 @@ module('Integration | Component | hds/table/th', function (hooks) {
 
   test('if @tooltip is undefined a tooltip button toggle should not be present', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th">Artist</Th>
+      </template>,
     );
 
     assert
@@ -91,7 +111,9 @@ module('Integration | Component | hds/table/th', function (hooks) {
   });
   test('if @tooltip is defined a tooltip should be added to the table cell header', async function (assert) {
     await render(
-      <template><Th @tooltip="More info." id="data-test-table-th">Artist</Th></template>,
+      <template>
+        <Th @tooltip="More info." id="data-test-table-th">Artist</Th>
+      </template>,
     );
 
     assert.dom('#data-test-table-th .hds-table__th-button--tooltip').exists();
@@ -102,16 +124,16 @@ module('Integration | Component | hds/table/th', function (hooks) {
   });
   test('it renders the `aria-labelledby` attribute for the tooltip button with the correct IDs', async function (assert) {
     await render(
-      <template><Th id="data-test-table-th" @tooltip="More info.">Artist</Th></template>,
+      <template>
+        <Th id="data-test-table-th" @tooltip="More info.">Artist</Th>
+      </template>,
     );
-    let prefixLabel = this.element.querySelector(
+    let prefixLabel = find(
       '#data-test-table-th .hds-table__th-button-aria-label-hidden-segment',
     );
-    let buttonLabel = this.element.querySelector(
-      '#data-test-table-th .hds-table__th-content > span',
-    );
+    let buttonLabel = find('#data-test-table-th .hds-table__th-content > span');
     assert
       .dom('#data-test-table-th .hds-table__th-button--tooltip')
-      .hasAria('labelledby', `${prefixLabel.id} ${buttonLabel.id}`);
+      .hasAria('labelledby', `${prefixLabel?.id} ${buttonLabel?.id}`);
   });
 });
diff --git a/showcase/tests/integration/components/hds/table/tr-test.gjs b/showcase/tests/integration/components/hds/table/tr-test.gts
similarity index 70%
rename from showcase/tests/integration/components/hds/table/tr-test.gjs
rename to showcase/tests/integration/components/hds/table/tr-test.gts
index 2b0408c3650..3ad3d4ab0c3 100644
--- a/showcase/tests/integration/components/hds/table/tr-test.gjs
+++ b/showcase/tests/integration/components/hds/table/tr-test.gts
@@ -6,7 +6,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click, setupOnerror } from '@ember/test-helpers';
-import Tr from "@hashicorp/design-system-components/components/hds/table/tr";
+import Tr from '@hashicorp/design-system-components/components/hds/table/tr';
+
+import NOOP from 'showcase/utils/noop';
 
 module('Integration | Component | hds/table/tr', function (hooks) {
   setupRenderingTest(hooks);
@@ -20,7 +22,9 @@ module('Integration | Component | hds/table/tr', function (hooks) {
 
   test('it should render the yielded content', async function (assert) {
     await render(
-      <template><Tr id="data-test-table-tr"><td></td></Tr></template>,
+      <template>
+        <Tr id="data-test-table-tr"><td></td></Tr>
+      </template>,
     );
     assert.dom('#data-test-table-tr > td').exists();
   });
@@ -37,52 +41,87 @@ module('Integration | Component | hds/table/tr', function (hooks) {
 
   test('it should render a checkbox if `@isSelectable` is `true`', async function (assert) {
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} /></template>,
+      <template>
+        <Tr id="data-test-table-tr" @isSelectable={{true}} />
+      </template>,
     );
     assert.dom(checkboxSelector).exists();
   });
 
   test('the checkbox should be checked if `@isSelected` is `true`', async function (assert) {
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @isSelected={{true}} /></template>,
+      <template>
+        <Tr
+          id="data-test-table-tr"
+          @isSelectable={{true}}
+          @isSelected={{true}}
+        />
+      </template>,
     );
     assert.dom(checkboxSelector).isChecked();
   });
 
   test('the checkbox contains the `@selectionAriaLabelSuffix` suffix', async function (assert) {
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @selectionAriaLabelSuffix="row 123" /></template>,
+      <template>
+        <Tr
+          id="data-test-table-tr"
+          @isSelectable={{true}}
+          @selectionAriaLabelSuffix="row 123"
+        />
+      </template>,
     );
     assert.dom(checkboxSelector).hasAria('label', 'Select row 123');
   });
 
   test('the `th` element has the correct `scope` attribute value provided via `@selectionScope`', async function (assert) {
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @selectionScope="test-selectionscope" /></template>,
+      <template>
+        <Tr
+          id="data-test-table-tr"
+          @isSelectable={{true}}
+          @selectionScope="row"
+        />
+      </template>,
     );
     assert
       .dom('#data-test-table-tr > .hds-table__th--is-selectable')
-      .hasAttribute('scope', 'test-selectionscope');
+      .hasAttribute('scope', 'row');
   });
 
   test('it should invoke the `onSelectionChange` callback when the checkbox is selected', async function (assert) {
     let key;
-    this.set(
-      'onSelectionChange',
-      (_checkbox, selectionKey) => (key = selectionKey),
-    );
+    const onSelectionChange = (
+      _checkbox?: HTMLInputElement,
+      selectionKey?: string,
+    ) => {
+      key = selectionKey;
+    };
+
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @selectionScope="row" @selectionKey="row123" @onSelectionChange={{this.onSelectionChange}} /></template>,
+      <template>
+        <Tr
+          id="data-test-table-tr"
+          @isSelectable={{true}}
+          @selectionScope="row"
+          @selectionKey="row123"
+          @onSelectionChange={{onSelectionChange}}
+        />
+      </template>,
     );
     await click(checkboxSelector);
     assert.strictEqual(key, 'row123');
   });
 
   test('it should render a sort button in the checkbox cell if `@onClickSortBySelected` is provided and `@isSelectable` is `true`', async function (assert) {
-    this.set('noop', () => {});
-
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} @onClickSortBySelected={{this.noop}} /></template>,
+      <template>
+        <Tr
+          id="data-test-table-tr"
+          @isSelectable={{true}}
+          @onClickSortBySelected={{NOOP}}
+        />
+      </template>,
     );
 
     assert.dom(checkboxSelector + ' ~ .hds-table__th-button--sort').exists();
@@ -90,7 +129,9 @@ module('Integration | Component | hds/table/tr', function (hooks) {
 
   test('it should not render a sort button in the checkbox cell if `@isSelectable` is `true`, and `@onClickSortBySelected` is undefined', async function (assert) {
     await render(
-      <template><Tr id="data-test-table-tr" @isSelectable={{true}} /></template>,
+      <template>
+        <Tr id="data-test-table-tr" @isSelectable={{true}} />
+      </template>,
     );
 
     assert

From 122880001271460c2f55fcf5be8b72ab13fee223 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:47:48 -0400
Subject: [PATCH 34/43] feat: convert rich tooltip tests to gts

---
 .../{bubble-test.gjs => bubble-test.gts}      | 163 ++++++++++-----
 .../{index-test.gjs => index-test.gts}        |  95 ++++++---
 .../{toggle-test.gjs => toggle-test.gts}      | 187 +++++++++++++++---
 3 files changed, 345 insertions(+), 100 deletions(-)
 rename showcase/tests/integration/components/hds/rich-tooltip/{bubble-test.gjs => bubble-test.gts} (50%)
 rename showcase/tests/integration/components/hds/rich-tooltip/{index-test.gjs => index-test.gts} (77%)
 rename showcase/tests/integration/components/hds/rich-tooltip/{toggle-test.gjs => toggle-test.gts} (50%)

diff --git a/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gjs b/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gts
similarity index 50%
rename from showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gjs
rename to showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gts
index fc1f13f7491..d1fa2452c65 100644
--- a/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gjs
+++ b/showcase/tests/integration/components/hds/rich-tooltip/bubble-test.gts
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { module, test, skip } from 'qunit';
+import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, setupOnerror, find } from '@ember/test-helpers';
 import { modifier } from 'ember-modifier';
-import Bubble from "@hashicorp/design-system-components/components/hds/rich-tooltip/bubble";
+import Bubble from '@hashicorp/design-system-components/components/hds/rich-tooltip/bubble';
 
 module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   setupRenderingTest(hooks);
@@ -18,7 +18,13 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Bubble @popoverId="test-rich-tooltip-bubble" /></template>,
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        />
+      </template>,
     );
     assert
       .dom('#test-rich-tooltip-bubble')
@@ -28,11 +34,17 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   // CONTENT
 
   test('it should render some elements but not the yielded content by default', async function (assert) {
-    await render(<template>
-      <Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-bubble-arrow">
-        <div id="test-rich-tooltip-bubble-content" />
-      </Bubble>
-    </template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        >
+          <div id="test-rich-tooltip-bubble-content" />
+        </Bubble>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__bubble').exists();
     assert
       .dom('.hds-rich-tooltip__bubble')
@@ -46,11 +58,18 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
 
   test('it should render the inner content if `@isOpen` is `true`', async function (assert) {
-    await render(<template>
-      <Bubble @isOpen={{true}}>
-        <div id="test-rich-tooltip-bubble-content" />
-      </Bubble>
-    </template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @isOpen={{true}}
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        >
+          <div id="test-rich-tooltip-bubble-content" />
+        </Bubble>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__bubble').exists();
     assert.dom('.hds-rich-tooltip__bubble-arrow').exists();
     assert.dom('.hds-rich-tooltip__bubble-inner-content').exists();
@@ -64,14 +83,23 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   // WIDTH/HEIGHT
 
   test('it should render the container with the provided with/height', async function (assert) {
-    await render(<template>
-      <Bubble @width="123px" @height="456px" @isOpen={{true}} />
-    </template>);
-    const container = this.element.querySelector('.hds-rich-tooltip__bubble');
-    const rect = container.getBoundingClientRect();
+    await render(
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @width="123px"
+          @height="456px"
+          @isOpen={{true}}
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        />
+      </template>,
+    );
+    const container = find('.hds-rich-tooltip__bubble');
+    const rect = container?.getBoundingClientRect();
     // we need to divide by 2 because ember testing scales the `#ember-testing` container by a factor 0.5;
-    assert.deepEqual(rect.width, 123 / 2);
-    assert.deepEqual(rect.height, 456 / 2);
+    assert.deepEqual(rect?.width, 123 / 2);
+    assert.deepEqual(rect?.height, 456 / 2);
   });
 
   // ANCHORED POSITION OPTIONS
@@ -79,14 +107,20 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
 
   test('it should return the default values for the `anchoredPositionOptions` object', async function (assert) {
     let anchoredPositionOptions;
-    this.set(
-      'fakeSetupPrimitivePopover',
-      modifier((_element, _positional, named) => {
+    const fakeSetupPrimitivePopover = modifier(
+      (_element, _positional, named) => {
         anchoredPositionOptions = named;
-      }),
+      },
     );
+
     await render(
-      <template><Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-arrow" @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}} /></template>,
+      <template>
+        <Bubble
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-arrow"
+          @setupPrimitivePopover={{fakeSetupPrimitivePopover}}
+        />
+      </template>,
     );
     assert.deepEqual(anchoredPositionOptions, {
       anchoredPositionOptions: {
@@ -100,21 +134,30 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
   test('it should return the values provided via arguments for the `anchoredPositionOptions` object', async function (assert) {
     let anchoredPositionOptions;
-    this.set(
-      'fakeSetupPrimitivePopover',
-      modifier((_element, _positional, named) => {
+    const fakeSetupPrimitivePopover = modifier(
+      (_element, _positional, named) => {
         anchoredPositionOptions = named;
-      }),
+      },
     );
+
     await render(
-      <template><Bubble @popoverId="test-rich-tooltip-bubble" @arrowId="test-rich-tooltip-arrow" @placement="top-start" @offsetOptions={{123}} @enableCollisionDetection={{false}} @arrowSelector="#test-arrow-selector" @arrowPadding={{987}} @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}} /></template>,
+      <template>
+        <Bubble
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-arrow"
+          @placement="top-start"
+          @offset={{123}}
+          @enableCollisionDetection={{false}}
+          @setupPrimitivePopover={{fakeSetupPrimitivePopover}}
+        />
+      </template>,
     );
     assert.deepEqual(anchoredPositionOptions, {
       anchoredPositionOptions: {
         arrowPadding: 12,
         arrowSelector: '#test-rich-tooltip-arrow',
         enableCollisionDetection: false,
-        offsetOptions: 12,
+        offsetOptions: 123,
         placement: 'top-start',
       },
     });
@@ -124,7 +167,13 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
 
   test('it should assign the ID value provided with @popoverId', async function (assert) {
     await render(
-      <template><Bubble @popoverId="test-rich-tooltip-bubble" /></template>,
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        />
+      </template>,
     );
     assert
       .dom('.hds-rich-tooltip__bubble')
@@ -132,7 +181,14 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
   test('it should not override the ID value provided with @popoverId with an attribute', async function (assert) {
     await render(
-      <template><Bubble @popoverId="test-rich-tooltip-bubble" id="the-other-id" /></template>,
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+          id="the-other-id"
+        />
+      </template>,
     );
     assert
       .dom('.hds-rich-tooltip__bubble')
@@ -140,35 +196,54 @@ module('Integration | Component | hds/rich-tooltip/bubble', function (hooks) {
   });
   test('it should have a set of attributes based on the arguments provided', async function (assert) {
     await render(
-      <template><Bubble @popoverId="popoverId" @isOpen={{true}} /></template>,
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          @popoverId="popoverId"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+          @isOpen={{true}}
+        />
+      </template>,
     );
     assert.dom('.hds-rich-tooltip__bubble').hasAttribute('id', 'popoverId');
     assert.dom('.hds-rich-tooltip__bubble').hasAttribute('tabindex', '-1');
     assert.dom('.hds-rich-tooltip__bubble').hasAttribute('role', 'tooltip');
     assert.dom('.hds-rich-tooltip__bubble').doesNotHaveAria('hidden');
+
     await render(
-      <template><Bubble id="test-rich-tooltip-bubble" /></template>,
+      <template>
+        {{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
+        <Bubble
+          id="test-rich-tooltip-bubble"
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        />
+      </template>,
     );
     assert.dom('.hds-rich-tooltip__bubble').hasAria('hidden', '');
   });
 
   // ASSERTIONS
 
-  // not sure why this one doesn't trigger an assertion
-  skip('it should throw an assertion if an incorrect value for @placement is provided', async function (assert) {
+  test('it should throw an assertion if an incorrect value for @placement is provided', async function (assert) {
     // this is used only to trigger the `anchoredPositionOptions` getter
-    this.set(
-      'fakeSetupPrimitivePopover',
-      modifier(() => {}),
-    );
+    const fakeSetupPrimitivePopover = modifier((_element, _positional) => {});
     const errorMessage =
       '@placement for "Hds::RichTooltip::Bubble" must be one of the following: top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end; received: foo';
-    assert.expect(2);
+    assert.expect(1);
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Bubble @placement="foo" @setupPrimitivePopover={{this.fakeSetupPrimitivePopover}} /></template>,
+      <template>
+        <Bubble
+          {{! @glint-expect-error - testing invalid component usage }}
+          @placement="foo"
+          @setupPrimitivePopover={{fakeSetupPrimitivePopover}}
+          @popoverId="test-rich-tooltip-bubble"
+          @arrowId="test-rich-tooltip-bubble-arrow"
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
diff --git a/showcase/tests/integration/components/hds/rich-tooltip/index-test.gjs b/showcase/tests/integration/components/hds/rich-tooltip/index-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/rich-tooltip/index-test.gjs
rename to showcase/tests/integration/components/hds/rich-tooltip/index-test.gts
index e5b0dce7ce5..7330603665e 100644
--- a/showcase/tests/integration/components/hds/rich-tooltip/index-test.gjs
+++ b/showcase/tests/integration/components/hds/rich-tooltip/index-test.gts
@@ -5,9 +5,16 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, resetOnerror, click, focus, blur } from '@ember/test-helpers';
+import {
+  render,
+  resetOnerror,
+  click,
+  focus,
+  blur,
+  find,
+} from '@ember/test-helpers';
 import { wait } from 'showcase/tests/helpers';
-import RichTooltip from "@hashicorp/design-system-components/components/hds/rich-tooltip/index";
+import RichTooltip from '@hashicorp/design-system-components/components/hds/rich-tooltip/index';
 
 module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -24,12 +31,16 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   // CONTENT + VISIBILITY + IS-OPEN
 
   test('it should render the toggle (visible) and bubble (not visible) but not the yielded content by default', async function (assert) {
-    await render(<template>
-      <RichTooltip as |RT|>
-        <RT.Toggle>Toggle</RT.Toggle>
-        <RT.Bubble><span id="test-rich-tooltip-content">Content</span></RT.Bubble>
-      </RichTooltip>
-    </template>);
+    await render(
+      <template>
+        <RichTooltip as |RT|>
+          <RT.Toggle>Toggle</RT.Toggle>
+          <RT.Bubble><span
+              id="test-rich-tooltip-content"
+            >Content</span></RT.Bubble>
+        </RichTooltip>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle').isVisible();
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
     assert.dom('.hds-rich-tooltip__bubble-arrow').isNotVisible();
@@ -40,12 +51,16 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   });
 
   test('it should render the toggle (visible) and bubble (visible) and the yielded content (visible) if `@isOpen` is `true`', async function (assert) {
-    await render(<template>
-      <RichTooltip @isOpen={{true}} as |RT|>
-        <RT.Toggle>Toggle</RT.Toggle>
-        <RT.Bubble><span id="test-rich-tooltip-content">Content</span></RT.Bubble>
-      </RichTooltip>
-    </template>);
+    await render(
+      <template>
+        <RichTooltip @isOpen={{true}} as |RT|>
+          <RT.Toggle>Toggle</RT.Toggle>
+          <RT.Bubble><span
+              id="test-rich-tooltip-content"
+            >Content</span></RT.Bubble>
+        </RichTooltip>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle').isVisible();
     assert.dom('.hds-rich-tooltip__bubble').isVisible();
     assert.dom('.hds-rich-tooltip__bubble-arrow').isVisible();
@@ -58,12 +73,14 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   // INTERACTIONS
 
   test('it should toggle the content visibility on focus in/out by default', async function (assert) {
-    await render(<template>
+    await render(
+      <template>
         <RichTooltip as |RT|>
           <RT.Toggle>Toggle</RT.Toggle>
           <RT.Bubble>Content</RT.Bubble>
         </RichTooltip>
-      </template>);
+      </template>,
+    );
     // it's hidden when closed
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
     // focus the toggle to show the content
@@ -77,12 +94,14 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
   });
   test('it should toggle the content visibility on click', async function (assert) {
-    await render(<template>
+    await render(
+      <template>
         <RichTooltip @enableClickEvents={{true}} as |RT|>
           <RT.Toggle>Toggle</RT.Toggle>
           <RT.Bubble>Content</RT.Bubble>
         </RichTooltip>
-      </template>);
+      </template>,
+    );
     // it's hidden when closed
     assert.dom('.hds-rich-tooltip__bubble').isNotVisible();
     // click the toggle to show the content
@@ -99,14 +118,26 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
 
   test('it should invoke the `onOpen/onClose` callbacks', async function (assert) {
     let status;
-    this.set('onOpen', () => (status = 'opened'));
-    this.set('onClose', () => (status = 'closed'));
-    await render(<template>
-        <RichTooltip @enableClickEvents={{true}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} as |RT|>
+    const onOpen = () => {
+      status = 'opened';
+    };
+    const onClose = () => {
+      status = 'closed';
+    };
+
+    await render(
+      <template>
+        <RichTooltip
+          @enableClickEvents={{true}}
+          @onOpen={{onOpen}}
+          @onClose={{onClose}}
+          as |RT|
+        >
           <RT.Toggle />
           <RT.Bubble />
         </RichTooltip>
-      </template>);
+      </template>,
+    );
     // toggle the visibility
     await click('button.hds-rich-tooltip__toggle');
     assert.strictEqual(status, 'opened');
@@ -121,14 +152,16 @@ module('Integration | Component | hds/rich-tooltip/index', function (hooks) {
   // A11Y
 
   test('it displays the correct aria attributes for the "toggle" and "bubble" elements', async function (assert) {
-    await render(<template>
-      <RichTooltip @enableClickEvents={{true}} as |RT|>
-        <RT.Toggle>Toggle</RT.Toggle>
-        <RT.Bubble>Content</RT.Bubble>
-      </RichTooltip>
-    </template>);
-    const bubbleElement = document.querySelector('.hds-rich-tooltip__bubble');
-    const bubbleId = bubbleElement.id;
+    await render(
+      <template>
+        <RichTooltip @enableClickEvents={{true}} as |RT|>
+          <RT.Toggle>Toggle</RT.Toggle>
+          <RT.Bubble>Content</RT.Bubble>
+        </RichTooltip>
+      </template>,
+    );
+    const bubbleElement = find('.hds-rich-tooltip__bubble');
+    const bubbleId = bubbleElement?.id ?? '';
     // when closed
     assert.dom('.hds-rich-tooltip__toggle').hasAttribute('type', 'button');
     assert.dom('.hds-rich-tooltip__toggle').hasAria('controls', bubbleId);
diff --git a/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gjs b/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gts
similarity index 50%
rename from showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gjs
rename to showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gts
index db2c9106700..3851e9c9a35 100644
--- a/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gjs
+++ b/showcase/tests/integration/components/hds/rich-tooltip/toggle-test.gts
@@ -6,7 +6,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
-import Toggle from "@hashicorp/design-system-components/components/hds/rich-tooltip/toggle";
+
+import {
+  HdsPopoverPrimitive,
+  HdsRichTooltipToggle,
+} from '@hashicorp/design-system-components/components';
 
 module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,7 +21,15 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Toggle id="test-rich-tooltip-toggle" /></template>,
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            id="test-rich-tooltip-toggle"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
     );
     assert
       .dom('#test-rich-tooltip-toggle')
@@ -27,25 +39,63 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // TEXT + ICON
 
   test('it should render the text and icon provided', async function (assert) {
-    await render(<template><Toggle @text="test" @icon="info" /></template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @text="test"
+            @icon="info"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle-text').hasText('test');
     assert.dom('.hds-rich-tooltip__toggle-icon.hds-icon-info').exists();
   });
   test('it should render only the text provided', async function (assert) {
-    await render(<template>
-        <Toggle @text="test" />
-      </template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @text="test"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle-text').hasText('test');
     assert.dom('.hds-rich-tooltip__toggle-icon').doesNotExist();
   });
   test('it should render only the icon provided (in the leading position by default)', async function (assert) {
-    await render(<template><Toggle @icon="info" /></template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @icon="info"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle-icon:first-child').exists();
     assert.dom('.hds-rich-tooltip__toggle-text').doesNotExist();
   });
   test('it should render the icon in the trailing position if @iconPosition is set to trailing', async function (assert) {
     await render(
-      <template><Toggle @icon="info" @iconPosition="trailing" /></template>,
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @icon="info"
+            @iconPosition="trailing"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
     );
     assert.dom('.hds-rich-tooltip__toggle-icon:last-child').exists();
     assert.dom('.hds-rich-tooltip__toggle-text').doesNotExist();
@@ -54,11 +104,20 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // YIELD
 
   test('it should yield the content provided', async function (assert) {
-    await render(<template>
-        <Toggle>
-          Lorem <strong>ipsum</strong> dolor
-        </Toggle>
-      </template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          >
+            Lorem
+            <strong>ipsum</strong>
+            dolor
+          </HdsRichTooltipToggle>
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle').exists();
     assert.dom('.hds-rich-tooltip__toggle').hasText('Lorem ipsum dolor');
     assert.dom('.hds-rich-tooltip__toggle strong').hasText('ipsum');
@@ -67,7 +126,17 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // DISPLAY
 
   test('it should render the element as block by default', async function (assert) {
-    await render(<template><Toggle @icon="info" /></template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @icon="info"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('.hds-rich-tooltip__toggle--is-block').exists();
     assert
       .dom('.hds-rich-tooltip__toggle-icon')
@@ -75,7 +144,16 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   });
   test('it should render the element as inline if `@isInline` is `true`', async function (assert) {
     await render(
-      <template><Toggle @isInline={{true}} @icon="info" /></template>,
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @isInline={{true}}
+            @icon="info"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
     );
     assert.dom('.hds-rich-tooltip__toggle--is-inline').exists();
     assert
@@ -86,21 +164,50 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
   // SIZE
 
   test('it should render the element with @text without sizing classes by default if no @size prop is declared', async function (assert) {
-    await render(<template><Toggle @text="test" /></template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @text="test"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('[class*="hds-rich-tooltip__toggle--size-"]').doesNotExist();
   });
   test('it should render the correct CSS size class if the @size prop is declared', async function (assert) {
-    await render(<template><Toggle @text="test" @size="large" /></template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @text="test"
+            @size="large"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert
       .dom('.hds-rich-tooltip__toggle')
       .hasClass('hds-rich-tooltip__toggle--size-large');
   });
   test('it should render the element with yielded content without sizing classes even if the @size prop is declared', async function (assert) {
-    await render(<template>
-      <Toggle @size="large">
-        test
-      </Toggle>
-    </template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @size="large"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          >
+            test
+          </HdsRichTooltipToggle>
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.dom('[class*="hds-rich-tooltip__toggle--size-"]').doesNotExist();
   });
 
@@ -108,7 +215,15 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
 
   test('it should have a set of attributes based on the arguments provided', async function (assert) {
     await render(
-      <template><Toggle @popoverId="popoverId" @isOpen={{true}} /></template>,
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @popoverId="popoverId"
+            @isOpen={{true}}
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+          />
+        </HdsPopoverPrimitive>
+      </template>,
     );
     assert.dom('.hds-rich-tooltip__toggle').hasAttribute('type', 'button');
     assert.dom('.hds-rich-tooltip__toggle').hasAria('describedby', 'popoverId');
@@ -125,7 +240,17 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Toggle @icon="info" @iconPosition="foo" /></template>,
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @icon="info"
+            {{! @glint-expect-error - testing invalid component usage }}
+            @iconPosition="foo"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -138,7 +263,19 @@ module('Integration | Component | hds/rich-tooltip/toggle', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Toggle @text="test" @size="foo" /></template>);
+    await render(
+      <template>
+        <HdsPopoverPrimitive as |PP|>
+          <HdsRichTooltipToggle
+            @text="test"
+            {{! @glint-expect-error - testing invalid component usage }}
+            @size="foo"
+            @setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
+            @popoverId="foo"
+          />
+        </HdsPopoverPrimitive>
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From 37b1e1c19699ff774a0d942c362411c362116b2f Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:51:09 -0400
Subject: [PATCH 35/43] chore: add sinon types as devdep

---
 pnpm-lock.yaml        | 15 +++++++++++++++
 showcase/package.json |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2a145ccb7f..e1f7d779658 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -565,6 +565,9 @@ importers:
       '@types/rsvp':
         specifier: ^4.0.9
         version: 4.0.9
+      '@types/sinon':
+        specifier: ^17.0.4
+        version: 17.0.4
       broccoli-asset-rev:
         specifier: ^3.0.0
         version: 3.0.0
@@ -3758,6 +3761,12 @@ packages:
   '@types/serve-static@1.15.7':
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
 
+  '@types/sinon@17.0.4':
+    resolution: {integrity: sha512-RHnIrhfPO3+tJT0s7cFaXGZvsL4bbR3/k7z3P312qMS4JaS2Tk+KiwiLx1S0rQ56ERj00u1/BtdyVd0FY+Pdew==}
+
+  '@types/sinonjs__fake-timers@15.0.0':
+    resolution: {integrity: sha512-lqKG4X0fO3aJF7Bz590vuCkFt/inbDyL7FXaVjPEYO+LogMZ2fwSDUiP7bJvdYHaCgCQGNOPxquzSrrnVH3fGw==}
+
   '@types/sizzle@2.3.9':
     resolution: {integrity: sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==}
 
@@ -15438,6 +15447,12 @@ snapshots:
       '@types/node': 22.17.0
       '@types/send': 0.17.4
 
+  '@types/sinon@17.0.4':
+    dependencies:
+      '@types/sinonjs__fake-timers': 15.0.0
+
+  '@types/sinonjs__fake-timers@15.0.0': {}
+
   '@types/sizzle@2.3.9': {}
 
   '@types/stack-utils@2.0.3': {}
diff --git a/showcase/package.json b/showcase/package.json
index 709b7965412..9b8f5185ef3 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -63,6 +63,7 @@
     "@tsconfig/ember": "^3.0.10",
     "@types/qunit": "^2.19.12",
     "@types/rsvp": "^4.0.9",
+    "@types/sinon": "^17.0.4",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^9.1.2",
     "ember-a11y-testing": "^7.1.2",
@@ -136,4 +137,4 @@
     "./tests/*": "./tests/*",
     "./*": "./app/*"
   }
-}
\ No newline at end of file
+}

From 268005d3f06ca9d047f0a7653c513aeeec6a24aa Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:54:15 -0400
Subject: [PATCH 36/43] feat: convert rest of code editor tests to gts

---
 ...cription-test.gjs => description-test.gts} | 15 ++++---
 ...n-test.gjs => full-screen-button-test.gts} | 42 ++++++++++++-------
 .../{title-test.gjs => title-test.gts}        | 25 +++++------
 3 files changed, 50 insertions(+), 32 deletions(-)
 rename showcase/tests/integration/components/hds/code-editor/{description-test.gjs => description-test.gts} (68%)
 rename showcase/tests/integration/components/hds/code-editor/{full-screen-button-test.gjs => full-screen-button-test.gts} (67%)
 rename showcase/tests/integration/components/hds/code-editor/{title-test.gjs => title-test.gts} (67%)

diff --git a/showcase/tests/integration/components/hds/code-editor/description-test.gjs b/showcase/tests/integration/components/hds/code-editor/description-test.gts
similarity index 68%
rename from showcase/tests/integration/components/hds/code-editor/description-test.gjs
rename to showcase/tests/integration/components/hds/code-editor/description-test.gts
index 8a38cdc9251..93d62d78fb8 100644
--- a/showcase/tests/integration/components/hds/code-editor/description-test.gjs
+++ b/showcase/tests/integration/components/hds/code-editor/description-test.gts
@@ -7,7 +7,9 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
 import sinon from 'sinon';
-import Description from "@hashicorp/design-system-components/components/hds/code-editor/description";
+import Description from '@hashicorp/design-system-components/components/hds/code-editor/description';
+
+import NOOP from 'showcase/utils/noop';
 
 module(
   'Integration | Component | hds/code-editor/description',
@@ -15,10 +17,10 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      this.set('noop', () => {});
-
       await render(
-        <template><Description @editorId="test" @onInsert={{this.noop}} /></template>,
+        <template>
+          <Description @editorId="test" @onInsert={{NOOP}} />
+        </template>,
       );
 
       assert.dom('.hds-code-editor__description').exists();
@@ -27,10 +29,11 @@ module(
     // @onInsert
     test('it should call the `@onInsert` action when the description is inserted', async function (assert) {
       const onInsert = sinon.spy();
-      this.set('onInsert', onInsert);
 
       await render(
-        <template><Description @editorId="test" @onInsert={{this.onInsert}}>Test description</Description></template>,
+        <template>
+          <Description @editorId="test" @onInsert={{onInsert}}>Test description</Description>
+        </template>,
       );
 
       assert.true(onInsert.calledOnce);
diff --git a/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gjs b/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gts
similarity index 67%
rename from showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gjs
rename to showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gts
index 69bcdfddf96..a0f7ff1565c 100644
--- a/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gjs
+++ b/showcase/tests/integration/components/hds/code-editor/full-screen-button-test.gts
@@ -5,9 +5,12 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { click, render } from '@ember/test-helpers';
+import { click, render, settled } from '@ember/test-helpers';
 import sinon from 'sinon';
-import FullScreenButton from "@hashicorp/design-system-components/components/hds/code-editor/full-screen-button";
+import FullScreenButton from '@hashicorp/design-system-components/components/hds/code-editor/full-screen-button';
+import { tracked } from 'tracked-built-ins';
+
+import NOOP from 'showcase/utils/noop';
 
 module(
   'Integration | Component | hds/code-editor/full-screen-button',
@@ -15,10 +18,13 @@ module(
     setupRenderingTest(hooks);
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      this.set('noop', () => {});
-
       await render(
-        <template><FullScreenButton @isFullScreen={{false}} @onToggleFullScreen={{this.noop}} /></template>,
+        <template>
+          <FullScreenButton
+            @isFullScreen={{false}}
+            @onToggleFullScreen={{NOOP}}
+          />
+        </template>,
       );
 
       assert.dom('.hds-code-editor__full-screen-button').exists();
@@ -26,13 +32,15 @@ module(
 
     // @isFullScreen
     test('it should render the component with the correct class and icon based on the `@isFullScreen` argument', async function (assert) {
-      this.setProperties({
-        noop: () => {},
-        isFullScreen: false,
-      });
+      let context = tracked({ isFullScreen: false });
 
       await render(
-        <template><FullScreenButton @isFullScreen={{this.isFullScreen}} @onToggleFullScreen={{this.noop}} /></template>,
+        <template>
+          <FullScreenButton
+            @isFullScreen={{context.isFullScreen}}
+            @onToggleFullScreen={{NOOP}}
+          />
+        </template>,
       );
       assert
         .dom('.hds-code-editor__full-screen-button')
@@ -45,7 +53,9 @@ module(
         .dom('.hds-code-editor__full-screen-button .hds-icon-minimize')
         .doesNotExist();
 
-      this.set('isFullScreen', true);
+      context.isFullScreen = true;
+      await settled();
+
       assert
         .dom('.hds-code-editor__full-screen-button')
         .doesNotHaveClass('hds-code-editor__full-screen-button--maximize')
@@ -62,10 +72,14 @@ module(
     test('it should call the `@onToggleFullScreen` action when the button is clicked', async function (assert) {
       const onToggleFullScreen = sinon.spy();
 
-      this.set('onToggleFullScreen', onToggleFullScreen);
-
       await render(
-        <template><FullScreenButton id="test-button" @isFullScreen={{false}} @onToggleFullScreen={{this.onToggleFullScreen}} /></template>,
+        <template>
+          <FullScreenButton
+            id="test-button"
+            @isFullScreen={{false}}
+            @onToggleFullScreen={{onToggleFullScreen}}
+          />
+        </template>,
       );
 
       await click('#test-button');
diff --git a/showcase/tests/integration/components/hds/code-editor/title-test.gjs b/showcase/tests/integration/components/hds/code-editor/title-test.gts
similarity index 67%
rename from showcase/tests/integration/components/hds/code-editor/title-test.gjs
rename to showcase/tests/integration/components/hds/code-editor/title-test.gts
index 40136d3785d..fb59c45e7b3 100644
--- a/showcase/tests/integration/components/hds/code-editor/title-test.gjs
+++ b/showcase/tests/integration/components/hds/code-editor/title-test.gts
@@ -7,26 +7,26 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render } from '@ember/test-helpers';
 import sinon from 'sinon';
-import Title from "@hashicorp/design-system-components/components/hds/code-editor/title";
+import Title from '@hashicorp/design-system-components/components/hds/code-editor/title';
+
+import NOOP from 'showcase/utils/noop';
 
 module('Integration | Component | hds/code-editor/title', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    this.set('noop', () => {});
-
     await render(
-      <template><Title @editorId="test" @onInsert={{this.noop}} /></template>,
+      <template><Title @editorId="test" @onInsert={{NOOP}} /></template>,
     );
 
     assert.dom('.hds-code-editor__title').exists();
   });
 
   test('it should render the component with a title using the default tag', async function (assert) {
-    this.set('noop', () => {});
-
     await render(
-      <template><Title @editorId="test" @onInsert={{this.noop}}>Test Title</Title></template>,
+      <template>
+        <Title @editorId="test" @onInsert={{NOOP}}>Test Title</Title>
+      </template>,
     );
 
     assert
@@ -37,10 +37,10 @@ module('Integration | Component | hds/code-editor/title', function (hooks) {
 
   // @tag
   test('it shoud render the component title with a custom tag when provided', async function (assert) {
-    this.set('noop', () => {});
-
     await render(
-      <template><Title @editorId="test" @tag="h1" @onInsert={{this.noop}}>Test Title</Title></template>,
+      <template>
+        <Title @editorId="test" @tag="h1" @onInsert={{NOOP}}>Test Title</Title>
+      </template>,
     );
 
     assert.dom('.hds-code-editor__title').hasTagName('h1');
@@ -49,10 +49,11 @@ module('Integration | Component | hds/code-editor/title', function (hooks) {
   // @onInsert
   test('it should call the `@onInsert` action when the title is inserted', async function (assert) {
     const onInsert = sinon.spy();
-    this.set('onInsert', onInsert);
 
     await render(
-      <template><Title @editorId="test" @onInsert={{this.onInsert}}>Test Title</Title></template>,
+      <template>
+        <Title @editorId="test" @onInsert={{onInsert}}>Test Title</Title>
+      </template>,
     );
 
     assert.true(onInsert.calledOnce);

From 2f020ae97fb04d88c55510cb3cf811abd19b75ff Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 10:57:16 -0400
Subject: [PATCH 37/43] feat: convert code block tests to gts

---
 .../{index-test.gjs => index-test.gts}        | 368 ++++++++++++------
 1 file changed, 253 insertions(+), 115 deletions(-)
 rename showcase/tests/integration/components/hds/code-block/{index-test.gjs => index-test.gts} (58%)

diff --git a/showcase/tests/integration/components/hds/code-block/index-test.gjs b/showcase/tests/integration/components/hds/code-block/index-test.gts
similarity index 58%
rename from showcase/tests/integration/components/hds/code-block/index-test.gjs
rename to showcase/tests/integration/components/hds/code-block/index-test.gts
index fd0d303417b..893341cd754 100644
--- a/showcase/tests/integration/components/hds/code-block/index-test.gjs
+++ b/showcase/tests/integration/components/hds/code-block/index-test.gts
@@ -5,9 +5,17 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, settled, resetOnerror, setupOnerror, click } from '@ember/test-helpers';
+import {
+  render,
+  settled,
+  resetOnerror,
+  setupOnerror,
+  click,
+  find,
+} from '@ember/test-helpers';
 import sinon from 'sinon';
-import CodeBlock from "@hashicorp/design-system-components/components/hds/code-block/index";
+import CodeBlock from '@hashicorp/design-system-components/components/hds/code-block/index';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/code-block/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -17,18 +25,22 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+      </template>,
+    );
     assert.dom('#test-code-block').hasClass('hds-code-block');
   });
 
   // CONTENT
 
   test('it renders the passed in code text content', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+      </template>,
+    );
     assert
       .dom('#test-code-block pre code')
       .containsText("console.log('Hello world');");
@@ -37,15 +49,22 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   // DYNAMIC CONTENT
 
   test('it renders the passed in dynamic content', async function (assert) {
-    this.set('value', "console.log('Hello world');");
-    await render(<template>
-      <CodeBlock @value={{this.value}} id="test-code-block" />
-    </template>);
+    const context = tracked({
+      value: "console.log('Hello world');",
+    });
+
+    await render(
+      <template>
+        <CodeBlock @value={{context.value}} id="test-code-block" />
+      </template>,
+    );
     assert
       .dom('#test-code-block pre code')
       .hasText("console.log('Hello world');");
-    this.set('value', "console.log('Lorem ipsum');");
+
+    context.value = "console.log('Lorem ipsum');";
     await settled();
+
     assert
       .dom('#test-code-block pre code')
       .hasText("console.log('Lorem ipsum');");
@@ -54,39 +73,56 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   // CONTEXTUAL COMPONENTS
 
   test('it renders the contextual components', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
-        <CB.Title>Title</CB.Title>
-        <CB.Description>Description</CB.Description>
-      </CodeBlock>
-    </template>);
-    let titleId = document
-      .querySelector('.hds-code-block__title')
-      .getAttribute('id');
-    assert.dom('.hds-code-block__code').hasAria('labelledby', titleId);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          id="test-code-block"
+          as |CB|
+        >
+          <CB.Title>Title</CB.Title>
+          <CB.Description>Description</CB.Description>
+        </CodeBlock>
+      </template>,
+    );
+    let title = find('.hds-code-block__title');
+    assert.dom('.hds-code-block__code').hasAria('labelledby', title?.id ?? '');
     assert.dom('.hds-code-block__title').hasText('Title');
-    let descriptionId = document
-      .querySelector('.hds-code-block__description')
-      .getAttribute('id');
-    assert.dom('.hds-code-block__code').hasAria('describedby', descriptionId);
+
+    let description = find('.hds-code-block__description');
+    assert
+      .dom('.hds-code-block__code')
+      .hasAria('describedby', description?.id ?? '');
     assert.dom('.hds-code-block__description').hasText('Description');
   });
 
   test('it renders the title as a p when the @tag argument is not provided', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
-        <CB.Title>Title</CB.Title>
-      </CodeBlock>
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          id="test-code-block"
+          as |CB|
+        >
+          <CB.Title>Title</CB.Title>
+        </CodeBlock>
+      </template>,
+    );
     assert.dom('.hds-code-block__title').hasTagName('p');
   });
 
   test('it renders the title as the custom title tag when the @tag argument is provided', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" as |CB|>
-        <CB.Title @tag="h2">Title</CB.Title>
-      </CodeBlock>
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          id="test-code-block"
+          as |CB|
+        >
+          <CB.Title @tag="h2">Title</CB.Title>
+        </CodeBlock>
+      </template>,
+    );
     assert.dom('.hds-code-block__title').hasTagName('h2');
   });
 
@@ -94,46 +130,79 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // ariaLabel
   test('it sets the aria-label property to the value provided', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @ariaLabel="test" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @ariaLabel="test"
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('.hds-code-block__code').hasAria('label', 'test');
   });
 
   // ariaLabelledBy
   test('it sets the aria-labelledby property to the value provided', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @ariaLabelledBy="test-id" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @ariaLabelledBy="test-id"
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('.hds-code-block__code').hasAria('labelledby', 'test-id');
   });
   test('it does not set the aria-labelledby property to the value provided if an ariaLabel argument is set', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @ariaLabel="test" @ariaLabelledBy="test-id" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @ariaLabel="test"
+          @ariaLabelledBy="test-id"
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('.hds-code-block__code').doesNotHaveAria('labelledby');
   });
 
   // ariaDescribedBy
   test('it sets the aria-describedby property to the value provided', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @ariaDescribedBy="test-id" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @ariaDescribedBy="test-id"
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('.hds-code-block__code').hasAria('describedby', 'test-id');
   });
 
   // isStandalone
   test('it has rounded corners by default', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+      </template>,
+    );
     assert.dom('#test-code-block').hasClass('hds-code-block--is-standalone');
   });
 
   test('it does not have rounded corners if `isStandalone` is set to false', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @isStandalone={{false}} id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @isStandalone={{false}}
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert
       .dom('#test-code-block')
       .doesNotHaveClass('hds-code-block--is-standalone');
@@ -141,39 +210,59 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // language
   test('it has no default language for syntax highlighting', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+      </template>,
+    );
     assert.dom('#test-code-block').doesNotHaveClass(/language-*/);
   });
 
   test('it uses the passed in language value for syntax highlighting', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @language="go" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @language="go"
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('#test-code-block').hasClass('language-go');
   });
 
   test('syntax highlighting fails gracefully if an invalid language is specified', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @language="foo" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          {{! @glint-expect-error - assertion testing invalid value }}
+          @language="foo"
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('#test-code-block').hasClass('language-foo');
     assert.dom('#test-code-block .token').doesNotExist();
   });
 
   // hasCopyButton
   test('it does not display a Copy button by default', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" />
-    </template>);
+    await render(
+      <template><CodeBlock @value="console.log('Hello world');" /></template>,
+    );
     assert.dom('.hds-code-block__copy-button').doesNotExist();
   });
 
   test(`it displays a Copy button if hasCopyButton is set to true`, async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @hasCopyButton={{true}}
+        />
+      </template>,
+    );
 
     assert
       .dom('.hds-code-block__copy-button')
@@ -182,9 +271,15 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it renders a Copy button with custom text', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @hasCopyButton={{true}} @copyButtonText="Foo" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @hasCopyButton={{true}}
+          @copyButtonText="Foo"
+        />
+      </template>,
+    );
 
     assert.dom('.hds-code-block__copy-button').exists().hasAria('label', 'Foo');
   });
@@ -194,11 +289,11 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
     const copySpy = sinon.spy();
 
-    this.set('onCopy', copySpy);
-
-    await render(<template>
-      <CodeBlock @value="test" @hasCopyButton={{true}} @onCopy={{this.onCopy}} />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="test" @hasCopyButton={{true}} @onCopy={{copySpy}} />
+      </template>,
+    );
 
     await click('.hds-code-block__copy-button');
     assert.ok(copySpy.calledOnce, 'onCopy action was called');
@@ -212,9 +307,9 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     const copySpy = sinon.spy();
     this.set('onCopy', copySpy);
 
-    await render(<template>
-      <CodeBlock @value="test" @hasCopyButton={{true}} />
-    </template>);
+    await render(
+      <template><CodeBlock @value="test" @hasCopyButton={{true}} /></template>,
+    );
 
     assert
       .dom('.hds-code-block__copy-button + .sr-only')
@@ -234,9 +329,15 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     const copySpy = sinon.spy();
     this.set('onCopy', copySpy);
 
-    await render(<template>
-      <CodeBlock @value="test" @hasCopyButton={{true}} @copySuccessMessageText="Custom success message" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="test"
+          @hasCopyButton={{true}}
+          @copySuccessMessageText="Custom success message"
+        />
+      </template>,
+    );
 
     assert
       .dom('.hds-code-block__copy-button + .sr-only')
@@ -253,33 +354,49 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // hasLineNumbers
   test('it displays line numbers by default', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+      </template>,
+    );
     assert.dom('#test-code-block').hasClass('line-numbers');
   });
 
   test('it does not display line numbers if hasLineNumbers is set to false', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @hasLineNumbers={{false}} id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @hasLineNumbers={{false}}
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert.dom('#test-code-block').doesNotHaveClass('line-numbers');
   });
 
   // hasLineWrapping
   test('it does not wrap code line by default', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" id="test-code-block" />
+      </template>,
+    );
     assert
       .dom('#test-code-block')
       .doesNotHaveClass('hds-code-block--has-line-wrapping');
   });
 
   test('it wraps code lines if hasLineWrapping is set to true', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @hasLineWrapping={{true}} id="test-code-block" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock
+          @value="console.log('Hello world');"
+          @hasLineWrapping={{true}}
+          id="test-code-block"
+        />
+      </template>,
+    );
     assert
       .dom('#test-code-block')
       .hasClass('hds-code-block--has-line-wrapping');
@@ -287,9 +404,15 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // highlightLines
   test('it highlights the passed in individual line numbers', async function (assert) {
-    await render(<template>
-    <CodeBlock id="test-code-block-highlight" @highlightLines="1" @value="console.log('Hello world');" />
-  </template>);
+    await render(
+      <template>
+        <CodeBlock
+          id="test-code-block-highlight"
+          @highlightLines="1"
+          @value="console.log('Hello world');"
+        />
+      </template>,
+    );
     assert
       .dom('#test-code-block-highlight [data-range="1"]')
       .exists()
@@ -298,9 +421,11 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   // maxHeight
   test('it uses the passed in maxHeight value', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @maxHeight="100px" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" @maxHeight="100px" />
+      </template>,
+    );
     assert
       .dom('.hds-code-block__code')
       .hasAttribute('style', 'max-height: 100px;');
@@ -308,9 +433,11 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   test('it displays a "Show more" button if the height of the code content is greater than the maxHeight', async function (assert) {
     // Note: We set a very small maxHeight to ensure the code block is scrollable
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
+      </template>,
+    );
     assert
       .dom('.hds-code-block__height-toggle-button')
       .exists()
@@ -319,16 +446,20 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
 
   test('it does not display a height toggle button if the height of the code content is less than the maxHeight', async function (assert) {
     // Note: We use ems since if they were incorrectly interpreted as pixels, the test would fail)
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @maxHeight="5em" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" @maxHeight="5em" />
+      </template>,
+    );
     assert.dom('.hds-code-block__height-toggle-button').doesNotExist();
   });
 
   test('it expands to show all content and displays a "Show less" button when "Show more" is clicked', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
+      </template>,
+    );
 
     assert
       .dom('.hds-code-block')
@@ -347,9 +478,11 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
   });
 
   test('it collapses to show less content and displays a "Show more" button when "Show less" is clicked', async function (assert) {
-    await render(<template>
-      <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
-    </template>);
+    await render(
+      <template>
+        <CodeBlock @value="console.log('Hello world');" @maxHeight="1em" />
+      </template>,
+    );
 
     await click('.hds-code-block__height-toggle-button');
 
@@ -377,7 +510,12 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><CodeBlock /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <CodeBlock />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From 0c6dfd0cf5d6b2fa29dfdd4545624271ee409390 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 11:04:30 -0400
Subject: [PATCH 38/43] feat: convert copy button tests to gts

---
 .../button/{index-test.gjs => index-test.gts} | 188 +++++++++++++++---
 1 file changed, 161 insertions(+), 27 deletions(-)
 rename showcase/tests/integration/components/hds/copy/button/{index-test.gjs => index-test.gts} (58%)

diff --git a/showcase/tests/integration/components/hds/copy/button/index-test.gjs b/showcase/tests/integration/components/hds/copy/button/index-test.gts
similarity index 58%
rename from showcase/tests/integration/components/hds/copy/button/index-test.gjs
rename to showcase/tests/integration/components/hds/copy/button/index-test.gts
index 5275a3f6e64..349c2efb1ed 100644
--- a/showcase/tests/integration/components/hds/copy/button/index-test.gjs
+++ b/showcase/tests/integration/components/hds/copy/button/index-test.gts
@@ -8,7 +8,8 @@ import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
 import sinon from 'sinon';
 import { wait } from 'showcase/tests/helpers';
-import Button from "@hashicorp/design-system-components/components/hds/copy/button/index";
+import Button from '@hashicorp/design-system-components/components/hds/copy/button/index';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/copy/button/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -16,21 +17,23 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
   // IMPORTANT: don't use an arrow function here or "this.set" will not be recognized
   hooks.beforeEach(function () {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves();
-    this.success = undefined;
-    this.set('onSuccess', () => (this.success = true));
-    this.set('onError', () => (this.success = false));
   });
 
   hooks.afterEach(() => {
     resetOnerror();
     // we need to restore the "window.navigator" methods
     sinon.restore();
-    this.success = undefined;
   });
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button');
   });
@@ -38,27 +41,70 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
   // @TEXT ARGUMENT
 
   test('it should allow to copy a `string` provided as `@text` argument', async function (assert) {
+    const context = tracked<Record<'success', boolean | undefined>>({
+      success: undefined,
+    });
+    const onSuccess = () => {
+      context.success = true;
+    };
+    const onError = () => {
+      context.success = false;
+    };
+
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+          @onSuccess={{onSuccess}}
+          @onError={{onError}}
+        />
+      </template>,
     );
     await click('button#test-copy-button');
-    assert.true(this.success);
+    assert.true(context.success);
   });
 
   // @TARGET ARGUMENT
 
   test('it should allow to target an element using a `string` selector for the `@target` argument', async function (assert) {
+    const context = tracked<Record<'success', boolean | undefined>>({
+      success: undefined,
+    });
+    const onSuccess = () => {
+      context.success = true;
+    };
+    const onError = () => {
+      context.success = false;
+    };
+
     await render(
-      <template><p id="test-copy-button-target">Hello world!</p><Button id="test-copy-button" @text="Copy your secret key" @targetToCopy="#test-copy-button-target" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <p id="test-copy-button-target">Hello world!</p><Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @targetToCopy="#test-copy-button-target"
+          @onSuccess={{onSuccess}}
+          @onError={{onError}}
+        />
+      </template>,
     );
     await click('button#test-copy-button');
-    assert.true(this.success);
+    assert.true(context.success);
   });
 
   // @ariaMessageText ARGUMENT
   test('it should set a custom success message in the aria-live region if passed', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @ariaMessageText="Custom success message" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+          @ariaMessageText="Custom success message"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     // Test the copy success message is not rendered before the button is clicked:
@@ -77,7 +123,13 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should render the correct default component variation: secondary color, medium size, idle status', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button');
     assert.dom('#test-copy-button').hasClass('hds-button--size-medium');
@@ -87,7 +139,14 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should only render an icon and also render an aria-label if isIconOnly is set to true', async function (assert) {
     await render(
-      <template><Button @text="Copy" @isIconOnly={{true}} @textToCopy="someSecretThingGoesHere" id="test-copy-button" /></template>,
+      <template>
+        <Button
+          @text="Copy"
+          @isIconOnly={{true}}
+          @textToCopy="someSecretThingGoesHere"
+          id="test-copy-button"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').doesNotIncludeText('Copy');
     assert.dom('#test-copy-button').hasAria('label', 'Copy');
@@ -95,14 +154,27 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should render the small size if @size small is defined', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="copy" @textToCopy="someSecretThingGoesHere" @size="small" /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="copy"
+          @textToCopy="someSecretThingGoesHere"
+          @size="small"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-button--size-small');
   });
 
   test('it always renders the text value, not the text to copy', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasText('Copy your secret key');
     assert
@@ -112,7 +184,14 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should have the correct CSS class to support full-width size if @isFullWidth prop is true', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="copy" @textToCopy="someSecretThingGoesHere" @isFullWidth={{true}} /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="copy"
+          @textToCopy="someSecretThingGoesHere"
+          @isFullWidth={{true}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-button--width-full');
   });
@@ -120,8 +199,26 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
   // COPY STATES
 
   test('it should update the status to success if the copy operation was successful', async function (assert) {
+    const context = tracked<Record<'success', boolean | undefined>>({
+      success: undefined,
+    });
+    const onSuccess = () => {
+      context.success = true;
+    };
+    const onError = () => {
+      context.success = false;
+    };
+
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+          @onSuccess={{onSuccess}}
+          @onError={{onError}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     // Test the copy success message is not rendered before the button is clicked:
@@ -130,7 +227,7 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
       .doesNotContainText('Copied to clipboard');
 
     await click('button#test-copy-button');
-    assert.true(this.success);
+    assert.true(context.success);
     // Test the copy success message is rendered after the button is clicked:
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-success');
     assert.dom('#test-copy-button + .sr-only').hasText('Copied to clipboard');
@@ -138,7 +235,13 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
 
   test('it should update the status back to idle after success', async function (assert) {
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     await click('button#test-copy-button');
@@ -151,16 +254,32 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
     sinon.restore();
     sinon
       .stub(window.navigator.clipboard, 'writeText')
-      .throws(
-        'Sinon throws (syntethic error)',
-        'this is a fake error message provided to the sinon.stub().throws() method',
-      );
+      .throws('Sinon throws (syntethic error)');
+
+    const context = tracked<Record<'success', boolean | undefined>>({
+      success: undefined,
+    });
+    const onSuccess = () => {
+      context.success = true;
+    };
+    const onError = () => {
+      context.success = false;
+    };
+
     await render(
-      <template><Button id="test-copy-button" @text="Copy your secret key" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          @textToCopy="someSecretThingGoesHere"
+          @onSuccess={{onSuccess}}
+          @onError={{onError}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
     await click('button#test-copy-button');
-    assert.false(this.success);
+    assert.false(context.success);
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-error');
     await wait(2000); // wait for the status to revert to "idle" automatically
     assert.dom('#test-copy-button').hasClass('hds-copy-button--status-idle');
@@ -174,7 +293,12 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Button id="test-copy-button" @textToCopy="someSecretThingGoesHere" /></template>);
+    await render(
+      <template>
+        {{! @glint-expect-error - assertion testing invalid value }}
+        <Button id="test-copy-button" @textToCopy="someSecretThingGoesHere" />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });
@@ -187,7 +311,17 @@ module('Integration | Component | hds/copy/button/index', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template><Button id="test-copy-button" @text="Copy your secret key" @size="tiny" @textToCopy="someSecretThingGoesHere" /></template>);
+    await render(
+      <template>
+        <Button
+          id="test-copy-button"
+          @text="Copy your secret key"
+          {{! @glint-expect-error - assertion testing invalid value }}
+          @size="tiny"
+          @textToCopy="someSecretThingGoesHere"
+        />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });

From bd95d6c59ff728b3b927e40837f2345ae54c6942 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 13:45:39 -0400
Subject: [PATCH 39/43] feat: convert copy snippet to gts, improve copy button
 tests too

---
 .../components/hds/copy/button/index-test.gts |   3 +-
 .../{index-test.gjs => index-test.gts}        | 105 ++++++++++++++----
 2 files changed, 84 insertions(+), 24 deletions(-)
 rename showcase/tests/integration/components/hds/copy/snippet/{index-test.gjs => index-test.gts} (63%)

diff --git a/showcase/tests/integration/components/hds/copy/button/index-test.gts b/showcase/tests/integration/components/hds/copy/button/index-test.gts
index 349c2efb1ed..5e6f8633370 100644
--- a/showcase/tests/integration/components/hds/copy/button/index-test.gts
+++ b/showcase/tests/integration/components/hds/copy/button/index-test.gts
@@ -14,8 +14,7 @@ import { tracked } from 'tracked-built-ins';
 module('Integration | Component | hds/copy/button/index', function (hooks) {
   setupRenderingTest(hooks);
 
-  // IMPORTANT: don't use an arrow function here or "this.set" will not be recognized
-  hooks.beforeEach(function () {
+  hooks.beforeEach(() => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves();
   });
 
diff --git a/showcase/tests/integration/components/hds/copy/snippet/index-test.gjs b/showcase/tests/integration/components/hds/copy/snippet/index-test.gts
similarity index 63%
rename from showcase/tests/integration/components/hds/copy/snippet/index-test.gjs
rename to showcase/tests/integration/components/hds/copy/snippet/index-test.gts
index e11b9a86fcb..ffe664674d8 100644
--- a/showcase/tests/integration/components/hds/copy/snippet/index-test.gjs
+++ b/showcase/tests/integration/components/hds/copy/snippet/index-test.gts
@@ -8,17 +8,14 @@ import { setupRenderingTest } from 'showcase/tests/helpers';
 import { click, render, resetOnerror, setupOnerror } from '@ember/test-helpers';
 import sinon from 'sinon';
 import { wait } from 'showcase/tests/helpers';
-import Snippet from "@hashicorp/design-system-components/components/hds/copy/snippet/index";
+import Snippet from '@hashicorp/design-system-components/components/hds/copy/snippet/index';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/copy/snippet/index', function (hooks) {
   setupRenderingTest(hooks);
 
-  // IMPORTANT: don't use an arrow function here or "this.set" will not be recognized
-  hooks.beforeEach(function () {
+  hooks.beforeEach(() => {
     sinon.stub(window.navigator.clipboard, 'writeText').resolves();
-    this.success = undefined;
-    this.set('onSuccess', () => (this.success = true));
-    this.set('onError', () => (this.success = false));
   });
 
   hooks.afterEach(() => {
@@ -29,14 +26,18 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet');
   });
 
   test('it should render the component with an aria-label that includes the correct copy text', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="this aria label" /></template>,
+      <template>
+        <Snippet id="test-copy-snippet" @textToCopy="this aria label" />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasAria('label', 'copy this aria label');
   });
@@ -45,7 +46,9 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should render the correct default component variation: primary color, idle status', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet');
     assert
@@ -56,7 +59,13 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should render the secondary color if defined', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @color="secondary" /></template>,
+      <template>
+        <Snippet
+          id="test-copy-snippet"
+          @textToCopy="someSecretThingGoesHere"
+          @color="secondary"
+        />
+      </template>,
     );
     assert
       .dom('#test-copy-snippet')
@@ -65,14 +74,26 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should support truncation if @isTruncated is set to true', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @isTruncated={{true}} /></template>,
+      <template>
+        <Snippet
+          id="test-copy-snippet"
+          @textToCopy="someSecretThingGoesHere"
+          @isTruncated={{true}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--is-truncated');
   });
 
   test('it should have the correct CSS class to support full-width size if @isFullWidth prop is true', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @isFullWidth={{true}} /></template>,
+      <template>
+        <Snippet
+          id="test-copy-snippet"
+          @textToCopy="someSecretThingGoesHere"
+          @isFullWidth={{true}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--width-full');
   });
@@ -80,12 +101,29 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
   // COPY STATES
 
   test('it should update the status to success if the copy operation was successful', async function (assert) {
+    const context = tracked<Record<'success', boolean | undefined>>({
+      success: undefined,
+    });
+    const onSuccess = () => {
+      context.success = true;
+    };
+    const onError = () => {
+      context.success = false;
+    };
+
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <Snippet
+          id="test-copy-snippet"
+          @textToCopy="someSecretThingGoesHere"
+          @onSuccess={{onSuccess}}
+          @onError={{onError}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
     await click('button#test-copy-snippet');
-    assert.true(this.success);
+    assert.true(context.success);
     assert
       .dom('#test-copy-snippet')
       .hasClass('hds-copy-snippet--status-success');
@@ -93,7 +131,9 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
 
   test('it should update the status back to idle after success', async function (assert) {
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" /></template>,
+      <template>
+        <Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
     await click('button#test-copy-snippet');
@@ -105,19 +145,33 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
   });
 
   test('it should update the status to an error after a failed "copy" operation', async function (assert) {
+    const context = tracked<Record<'success', boolean | undefined>>({
+      success: undefined,
+    });
+    const onSuccess = () => {
+      context.success = true;
+    };
+    const onError = () => {
+      context.success = false;
+    };
+
     sinon.restore();
     sinon
       .stub(window.navigator.clipboard, 'writeText')
-      .throws(
-        'Sinon throws (syntethic error)',
-        'this is a fake error message provided to the sinon.stub().throws() method',
-      );
+      .throws('Sinon throws (syntethic error)');
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @onSuccess={{this.onSuccess}} @onError={{this.onError}} /></template>,
+      <template>
+        <Snippet
+          id="test-copy-snippet"
+          @textToCopy="someSecretThingGoesHere"
+          @onSuccess={{onSuccess}}
+          @onError={{onError}}
+        />
+      </template>,
     );
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
     await click('button#test-copy-snippet');
-    assert.false(this.success);
+    assert.false(context.success);
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-error');
     await wait(2000); // wait for the status to revert to "idle" automatically
     assert.dom('#test-copy-snippet').hasClass('hds-copy-snippet--status-idle');
@@ -133,7 +187,14 @@ module('Integration | Component | hds/copy/snippet/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Snippet id="test-copy-snippet" @textToCopy="someSecretThingGoesHere" @color="tertiary" /></template>,
+      <template>
+        <Snippet
+          id="test-copy-snippet"
+          @textToCopy="someSecretThingGoesHere"
+          {{! @glint-expect-error - assertion testing invalid value }}
+          @color="tertiary"
+        />
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);

From f6cd1c6efc24578b9150c09ad85e23319309d3e9 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 14:18:02 -0400
Subject: [PATCH 40/43] feat: convert flyout tests to gts

---
 .../flyout/{index-test.gjs => index-test.gts} | 364 ++++++++++++------
 1 file changed, 246 insertions(+), 118 deletions(-)
 rename showcase/tests/integration/components/hds/flyout/{index-test.gjs => index-test.gts} (58%)

diff --git a/showcase/tests/integration/components/hds/flyout/index-test.gjs b/showcase/tests/integration/components/hds/flyout/index-test.gts
similarity index 58%
rename from showcase/tests/integration/components/hds/flyout/index-test.gjs
rename to showcase/tests/integration/components/hds/flyout/index-test.gts
index 39678cd428e..f1c416f3e05 100644
--- a/showcase/tests/integration/components/hds/flyout/index-test.gjs
+++ b/showcase/tests/integration/components/hds/flyout/index-test.gts
@@ -4,13 +4,24 @@
  */
 
 import { module, test, skip } from 'qunit';
-import { setupRenderingTest, cleanupBodyOverflow } from 'showcase/tests/helpers';
-import { click, render, triggerKeyEvent, resetOnerror, setupOnerror, settled } from '@ember/test-helpers';
-import Flyout from "@hashicorp/design-system-components/components/hds/flyout/index";
-import Button from "@hashicorp/design-system-components/components/hds/button/index";
-import { on } from "@ember/modifier";
-import set from "ember-set-helper/helpers/set";
-import Dropdown from "@hashicorp/design-system-components/components/hds/dropdown/index";
+import {
+  setupRenderingTest,
+  cleanupBodyOverflow,
+} from 'showcase/tests/helpers';
+import {
+  click,
+  render,
+  triggerKeyEvent,
+  resetOnerror,
+  setupOnerror,
+  settled,
+  find,
+} from '@ember/test-helpers';
+import Flyout from '@hashicorp/design-system-components/components/hds/flyout/index';
+import Button from '@hashicorp/design-system-components/components/hds/button/index';
+import { on } from '@ember/modifier';
+import Dropdown from '@hashicorp/design-system-components/components/hds/dropdown/index';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/flyout/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,7 +33,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').hasClass('hds-flyout');
   });
@@ -31,14 +44,19 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should render the component with default size if no arguments provided', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').hasClass('hds-flyout--size-medium');
   });
 
   test('it should render the component with custom size if provided', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" @size="large" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" @size="large" as |F|><F.Header
+          >Title</F.Header></Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').hasClass('hds-flyout--size-large');
   });
@@ -47,8 +65,11 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should render the component with an overlay element by default', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
+
     assert.dom('.hds-flyout__overlay').isVisible();
   });
 
@@ -56,11 +77,13 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|>
-            <F.Header>Title</F.Header>
-            <F.Body>Body</F.Body>
-            <F.Footer>Footer</F.Footer>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|>
+          <F.Header>Title</F.Header>
+          <F.Body>Body</F.Body>
+          <F.Footer>Footer</F.Footer>
+        </Flyout>
+      </template>,
     );
     assert.dom('.hds-flyout').exists();
     assert.dom('.hds-flyout__header').exists();
@@ -75,9 +98,11 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it renders the title without icon, tagline, and description', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|>
-            <F.Header>Title</F.Header>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|>
+          <F.Header>Title</F.Header>
+        </Flyout>
+      </template>,
     );
     assert.dom('.hds-flyout__title').exists();
     assert.dom('.hds-flyout__title').hasText('Title');
@@ -87,9 +112,11 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it renders the title with icon and tagline if provided', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|>
-            <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|>
+          <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
+        </Flyout>
+      </template>,
     );
     assert.dom('.hds-flyout__title').exists();
     assert.dom('.hds-flyout__title').hasText('Tagline Title');
@@ -99,10 +126,12 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it renders the description if provided', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|>
-            <F.Header>Title</F.Header>
-            <F.Description>Description</F.Description>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|>
+          <F.Header>Title</F.Header>
+          <F.Description>Description</F.Description>
+        </Flyout>
+      </template>,
     );
     assert.dom('.hds-flyout__title').exists();
     assert.dom('.hds-flyout__title').hasText('Title');
@@ -114,9 +143,11 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it renders the title as an h1', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|>
-            <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|>
+          <F.Header @icon="info" @tagline="Tagline">Title</F.Header>
+        </Flyout>
+      </template>,
     );
     assert.dom('.hds-flyout__title').hasTagName('h1');
   });
@@ -125,13 +156,17 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should always render the "dismiss" button', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     assert.dom('button.hds-flyout__dismiss').exists();
   });
   test('it should close the flyout when the "dismiss" button is pressed', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').isVisible();
     await click('button.hds-flyout__dismiss');
@@ -139,11 +174,19 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it should close the flyout when the "close" function is called', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |M|>
-            <M.Footer as |F|>
-              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
-            </M.Footer>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |M|>
+          <M.Footer as |F|>
+            <Button
+              id="cancel-button"
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </M.Footer>
+        </Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').isVisible();
     await click('#cancel-button');
@@ -151,7 +194,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it should close the flyout when the "esc" key is pressed', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').isVisible();
     await triggerKeyEvent('.hds-flyout', 'keydown', 'Escape');
@@ -159,7 +204,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
   test('it should close the flyout when clicking outside', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout>
+      </template>,
     );
     assert.dom('#test-flyout').isVisible();
     await click('.hds-flyout__overlay');
@@ -170,7 +217,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should close the flyout and remove the body overflow style - manual dismiss', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout>
+      </template>,
     );
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -185,7 +234,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should close the flyout and remove the body overflow style - click outside', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |M|><M.Header>Title</M.Header></Flyout>
+      </template>,
     );
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -200,12 +251,20 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it should close the flyout and remove the body overflow style - dismiss via `F.close`', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |M|>
-            <M.Header>Title</M.Header>
-            <M.Footer as |F|>
-              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
-            </M.Footer>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |M|>
+          <M.Header>Title</M.Header>
+          <M.Footer as |F|>
+            <Button
+              id="cancel-button"
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </M.Footer>
+        </Flyout>
+      </template>,
     );
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -219,21 +278,27 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
 
   test('it should close the flyout and remove the body overflow style - direct DOM removal', async function (assert) {
-    this.set('isFlyoutRendered', false);
-    this.set(
-      'deactivateFlyout',
-      function () {
-        this.set('isFlyoutRendered', false);
-      }.bind(this),
-    );
+    let context = tracked({
+      isFlyoutRendered: false,
+    });
+
+    const deactivateFlyout = () => {
+      context.isFlyoutRendered = false;
+    };
 
     await render(
       <template>
-        {{#if this.isFlyoutRendered}}
+        {{#if context.isFlyoutRendered}}
           <Flyout id="test-flyout" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer>
-              <Button id="confirm-button" type="button" @text="Confirm" @color="primary" {{on "click" this.deactivateFlyout}} />
+              <Button
+                id="confirm-button"
+                type="button"
+                @text="Confirm"
+                @color="primary"
+                {{on "click" deactivateFlyout}}
+              />
             </M.Footer>
           </Flyout>
         {{/if}}
@@ -241,7 +306,10 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     );
 
     assert.dom('#test-flyout').doesNotExist();
-    this.set('isFlyoutRendered', true);
+
+    context.isFlyoutRendered = true;
+    await settled();
+
     assert.dom('#test-flyout').exists();
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -255,25 +323,31 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   });
 
   test('it should close the flyout and remove the body overflow style - form submit', async function (assert) {
-    this.set('isFlyoutRendered', false);
-    this.set(
-      'deactivateFlyoutOnSubmit',
-      function (event) {
-        event.preventDefault(); // prevent page reload
-        this.set('isFlyoutRendered', false);
-      }.bind(this),
-    );
+    let context = tracked({
+      isFlyoutRendered: false,
+    });
+
+    const deactivateFlyoutOnSubmit = (event: SubmitEvent) => {
+      event.preventDefault(); // prevent page reload
+      context.isFlyoutRendered = false;
+    };
 
     await render(
       <template>
-        {{#if this.isFlyoutRendered}}
+        {{#if context.isFlyoutRendered}}
           <Flyout id="test-flyout" as |M|>
             <M.Header>Title</M.Header>
             <M.Body>
-              <form id="test-form" {{on "submit" this.deactivateFlyoutOnSubmit}} />
+              <form id="test-form" {{on "submit" deactivateFlyoutOnSubmit}} />
             </M.Body>
             <M.Footer>
-              <Button id="submit-button" form="test-form" type="submit" @text="Confirm" @color="primary" />
+              <Button
+                id="submit-button"
+                form="test-form"
+                type="submit"
+                @text="Confirm"
+                @color="primary"
+              />
             </M.Footer>
           </Flyout>
         {{/if}}
@@ -281,7 +355,8 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     );
 
     assert.dom('#test-flyout').doesNotExist();
-    this.set('isFlyoutRendered', true);
+    context.isFlyoutRendered = true;
+    await settled();
     assert.dom('#test-flyout').exists();
 
     // when the flyout is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -298,76 +373,111 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
 
   test('it uses the title as name for the dialog', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     // the IDs are dynamically generated
-    let titleElement = this.element.querySelector('.hds-flyout__title');
-    let titleElementId = titleElement.id;
-    assert.dom('dialog').hasAttribute('aria-labelledby', titleElementId);
+    let titleElement = find('.hds-flyout__title');
+    assert
+      .dom('dialog')
+      .hasAttribute('aria-labelledby', titleElement?.id ?? '');
   });
 
   // FOCUS MANAGEMENT
 
   test('it sets initial focus on the dimiss button, as first focusable element', async function (assert) {
     await render(
-      <template><Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        <Flyout id="test-flyout" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     assert.dom('button.hds-flyout__dismiss').isFocused();
   });
 
   test('it returns focus to the element that initiated the open event, if is still in the DOM', async function (assert) {
+    let context = tracked({
+      isFlyoutRendered: false,
+    });
+
+    const showFlyout = () => {
+      context.isFlyoutRendered = true;
+    };
+
     await render(
-      <template><button id="test-button" type="button" {{on "click" (set this "showFlyout" true)}}>open flyout</button>
-          {{#if this.showFlyout}}
-            <Flyout id="test-flyout" as |M|>
-              <M.Header>Title</M.Header>
-            </Flyout>
-          {{/if}}
-          </template>,
+      <template>
+        <button id="test-button" type="button" {{on "click" showFlyout}}>open
+          flyout</button>
+        {{#if context.isFlyoutRendered}}
+          <Flyout id="test-flyout" as |M|>
+            <M.Header>Title</M.Header>
+          </Flyout>
+        {{/if}}
+      </template>,
     );
     await click('#test-button');
-    assert.true(this.showFlyout);
+    assert.true(context.isFlyoutRendered);
     await click('button.hds-flyout__dismiss');
     assert.dom('#test-button').isFocused();
   });
 
   // this test is flaky in CI, so skipping for now
   skip('it returns focus to the `body` element, if the one that initiated the open event not anymore in the DOM', async function (assert) {
+    let context = tracked({
+      isFlyoutRendered: false,
+    });
+
+    const showFlyout = () => {
+      context.isFlyoutRendered = true;
+    };
+
     await render(
-      <template><Dropdown as |D|>
-            <D.ToggleButton id="test-toggle" @text="open flyout" />
-            <D.Interactive id="test-interactive" {{on "click" (set this "showFlyout" true)}}>open flyout</D.Interactive>
-          </Dropdown>
-          {{#if this.showFlyout}}
-            <Flyout id="test-flyout" as |M|>
-              <M.Header>Title</M.Header>
-            </Flyout>
-          {{/if}}
-          </template>,
+      <template>
+        <Dropdown as |D|>
+          <D.ToggleButton id="test-toggle" @text="open flyout" />
+          <D.Interactive id="test-interactive" {{on "click" showFlyout}}>open
+            flyout</D.Interactive>
+        </Dropdown>
+        {{#if context.isFlyoutRendered}}
+          <Flyout id="test-flyout" as |M|>
+            <M.Header>Title</M.Header>
+          </Flyout>
+        {{/if}}
+      </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
-    assert.true(this.showFlyout);
+    assert.true(context.isFlyoutRendered);
     await click('button.hds-flyout__dismiss');
-    assert.dom('body', 'document').isFocused();
+    assert.dom('body', document).isFocused();
   });
 
   test('it returns focus to a specific element if provided via`@returnFocusTo`', async function (assert) {
+    let context = tracked({
+      isFlyoutRendered: false,
+    });
+
+    const showFlyout = () => {
+      context.isFlyoutRendered = true;
+    };
+
     await render(
-      <template><Dropdown as |D|>
-            <D.ToggleButton id="test-toggle" @text="open flyout" />
-            <D.Interactive id="test-interactive" {{on "click" (set this "showFlyout" true)}}>open flyout</D.Interactive>
-          </Dropdown>
-          {{#if this.showFlyout}}
-            <Flyout id="test-flyout" @returnFocusTo="test-toggle" as |M|>
-              <M.Header>Title</M.Header>
-            </Flyout>
-          {{/if}}
-          </template>,
+      <template>
+        <Dropdown as |D|>
+          <D.ToggleButton id="test-toggle" @text="open flyout" />
+          <D.Interactive id="test-interactive" {{on "click" showFlyout}}>open
+            flyout</D.Interactive>
+        </Dropdown>
+        {{#if context.isFlyoutRendered}}
+          <Flyout id="test-flyout" @returnFocusTo="test-toggle" as |M|>
+            <M.Header>Title</M.Header>
+          </Flyout>
+        {{/if}}
+      </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
-    assert.true(this.showFlyout);
+    assert.true(context.isFlyoutRendered);
     await click('button.hds-flyout__dismiss');
     assert.dom('#test-toggle').isFocused();
   });
@@ -375,30 +485,45 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
   // CALLBACKS
 
   test('it should call `onOpen` function if provided', async function (assert) {
-    let opened = false;
-    this.set('onOpen', () => (opened = true));
+    let context = tracked({
+      isFlyoutOpen: false,
+    });
+
+    const onOpen = () => {
+      context.isFlyoutOpen = true;
+    };
+
     await render(
-      <template><Flyout id="test-onopen-callback" @onOpen={{this.onOpen}} as |F|>
-            <F.Header>Title</F.Header>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-onopen-callback" @onOpen={{onOpen}} as |F|>
+          <F.Header>Title</F.Header>
+        </Flyout>
+      </template>,
     );
     assert.dom('#test-onopen-callback').isVisible();
     await settled();
-    assert.ok(opened);
+    assert.ok(context.isFlyoutOpen);
   });
 
   test('it should call `onClose` function if provided', async function (assert) {
-    let closed = false;
-    this.set('onClose', () => (closed = true));
+    let context = tracked({
+      isFlyoutOpen: true,
+    });
+
+    const onClose = () => {
+      context.isFlyoutOpen = false;
+    };
+
     await render(
-      <template><Flyout id="test-close-callback" @onClose={{this.onClose}} as |F|>
-            <F.Header>Title</F.Header>
-          </Flyout></template>,
+      <template>
+        <Flyout id="test-close-callback" @onClose={{onClose}} as |F|>
+          <F.Header>Title</F.Header>
+        </Flyout>
+      </template>,
     );
     await click('button.hds-flyout__dismiss');
     assert.dom('#test-onclose-callback').isNotVisible();
-    await settled();
-    assert.ok(closed);
+    assert.ok(!context.isFlyoutOpen);
   });
 
   // ASSERTIONS
@@ -411,7 +536,10 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Flyout @size="foo" as |F|><F.Header>Title</F.Header></Flyout></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Flyout @size="foo" as |F|><F.Header>Title</F.Header></Flyout>
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);

From 24498641d25782afe891b6c56e43164638f51ac9 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 14:18:11 -0400
Subject: [PATCH 41/43] feat: convert modal tests to gts

---
 .../modal/{index-test.gjs => index-test.gts}  | 379 ++++++++++++------
 1 file changed, 252 insertions(+), 127 deletions(-)
 rename showcase/tests/integration/components/hds/modal/{index-test.gjs => index-test.gts} (59%)

diff --git a/showcase/tests/integration/components/hds/modal/index-test.gjs b/showcase/tests/integration/components/hds/modal/index-test.gts
similarity index 59%
rename from showcase/tests/integration/components/hds/modal/index-test.gjs
rename to showcase/tests/integration/components/hds/modal/index-test.gts
index 29df1ff9c78..235192065b1 100644
--- a/showcase/tests/integration/components/hds/modal/index-test.gjs
+++ b/showcase/tests/integration/components/hds/modal/index-test.gts
@@ -4,13 +4,25 @@
  */
 
 import { module, test, skip } from 'qunit';
-import { setupRenderingTest, cleanupBodyOverflow } from 'showcase/tests/helpers';
-import { click, render, rerender, triggerKeyEvent, resetOnerror, setupOnerror, settled } from '@ember/test-helpers';
-import Modal from "@hashicorp/design-system-components/components/hds/modal/index";
-import Button from "@hashicorp/design-system-components/components/hds/button/index";
-import { on } from "@ember/modifier";
-import set from "ember-set-helper/helpers/set";
-import Dropdown from "@hashicorp/design-system-components/components/hds/dropdown/index";
+import {
+  setupRenderingTest,
+  cleanupBodyOverflow,
+} from 'showcase/tests/helpers';
+import {
+  click,
+  render,
+  triggerKeyEvent,
+  resetOnerror,
+  setupOnerror,
+  settled,
+  find,
+} from '@ember/test-helpers';
+import Modal from '@hashicorp/design-system-components/components/hds/modal/index';
+import Button from '@hashicorp/design-system-components/components/hds/button/index';
+import { on } from '@ember/modifier';
+import set from 'ember-set-helper/helpers/set';
+import Dropdown from '@hashicorp/design-system-components/components/hds/dropdown/index';
+import { tracked } from 'tracked-built-ins';
 
 module('Integration | Component | hds/modal/index', function (hooks) {
   setupRenderingTest(hooks);
@@ -22,7 +34,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('#test-modal').hasClass('hds-modal');
   });
@@ -31,7 +45,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the default vaules if no arguments provided', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('#test-modal').hasClass('hds-modal--size-medium');
     assert.dom('#test-modal').hasClass('hds-modal--color-neutral');
@@ -39,7 +55,10 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with CSS classes that reflect the arguments provided', async function (assert) {
     await render(
-      <template><Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header
+          >Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('#test-modal').hasClass('hds-modal--size-small');
     assert.dom('#test-modal').hasClass('hds-modal--color-warning');
@@ -49,7 +68,10 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should render the component with an overlay element', async function (assert) {
     await render(
-      <template><Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal @size="small" @color="warning" id="test-modal" as |M|><M.Header
+          >Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('.hds-modal__overlay').isVisible();
   });
@@ -58,11 +80,13 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it renders the contextual components', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header>Title</M.Header>
-            <M.Body>Body</M.Body>
-            <M.Footer>Footer</M.Footer>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header>Title</M.Header>
+          <M.Body>Body</M.Body>
+          <M.Footer>Footer</M.Footer>
+        </Modal>
+      </template>,
     );
     assert.dom('.hds-modal').exists();
     assert.dom('.hds-modal__header').exists();
@@ -77,9 +101,11 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it renders the title without icon and tagline if not provided', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header>Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header>Title</M.Header>
+        </Modal>
+      </template>,
     );
     assert.dom('.hds-modal__title').exists();
     assert.dom('.hds-modal__title').hasText('Title');
@@ -88,9 +114,11 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
   test('it renders the title with icon and tagline if provided', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
+        </Modal>
+      </template>,
     );
     assert.dom('.hds-modal__title').exists();
     assert.dom('.hds-modal__title').hasText('Tagline Title');
@@ -101,9 +129,11 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it renders the title as an h1', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header @icon="info" @tagline="Tagline">Title</M.Header>
+        </Modal>
+      </template>,
     );
     assert.dom('.hds-modal__title').hasTagName('h1');
   });
@@ -112,13 +142,17 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should always render the "dismiss" button', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('button.hds-modal__dismiss').exists();
   });
   test('it should close the modal when the "dismiss" button is pressed', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('#test-modal').isVisible();
     await click('button.hds-modal__dismiss');
@@ -126,11 +160,19 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
   test('it should close the modal when the "close" function is called', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Footer as |F|>
-              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
-            </M.Footer>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Footer as |F|>
+            <Button
+              id="cancel-button"
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </M.Footer>
+        </Modal>
+      </template>,
     );
     assert.dom('#test-modal').isVisible();
     await click('#cancel-button');
@@ -138,7 +180,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
   test('it should close the modal when the "esc" key is pressed', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('#test-modal').isVisible();
     await triggerKeyEvent('.hds-modal', 'keydown', 'Escape');
@@ -147,7 +191,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal when clicking outside', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.dom('#test-modal').isVisible();
     await click('.hds-modal__overlay');
@@ -155,14 +201,27 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
 
   test('it should not close the modal when `@isDismissDisabled` is `true`', async function (assert) {
-    this.set('isDismissDisabled', true);
+    const context = tracked({ isDismissDisabled: true });
+
     await render(
-      <template><Modal @isDismissDisabled={{this.isDismissDisabled}} id="test-modal" as |M|>
-            <M.Header>Title</M.Header>
-            <M.Footer as |F|>
-              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
-            </M.Footer>
-          </Modal></template>,
+      <template>
+        <Modal
+          @isDismissDisabled={{context.isDismissDisabled}}
+          id="test-modal"
+          as |M|
+        >
+          <M.Header>Title</M.Header>
+          <M.Footer as |F|>
+            <Button
+              id="cancel-button"
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </M.Footer>
+        </Modal>
+      </template>,
     );
     // top right dismiss button
     await click('button.hds-modal__dismiss');
@@ -178,8 +237,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     assert.dom('#test-modal').isVisible();
 
     // now let's check that the state is reset and it can be closed
-    this.set('isDismissDisabled', false);
-    await rerender();
+    context.isDismissDisabled = false;
+    await settled();
+
     await click('button.hds-modal__dismiss');
     assert.dom('#test-modal').isNotVisible();
   });
@@ -188,7 +248,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal and remove the body overflow style - manual dismiss', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -203,7 +265,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal and remove the body overflow style - click outside', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -218,12 +282,20 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it should close the modal and remove the body overflow style - dismiss via `F.close`', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header>Title</M.Header>
-            <M.Footer as |F|>
-              <Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
-            </M.Footer>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header>Title</M.Header>
+          <M.Footer as |F|>
+            <Button
+              id="cancel-button"
+              type="button"
+              @text="Cancel"
+              @color="secondary"
+              {{on "click" F.close}}
+            />
+          </M.Footer>
+        </Modal>
+      </template>,
     );
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -237,21 +309,24 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
 
   test('it should close the modal and remove the body overflow style - direct DOM removal', async function (assert) {
-    this.set('isModalRendered', false);
-    this.set(
-      'deactivateModal',
-      function () {
-        this.set('isModalRendered', false);
-      }.bind(this),
-    );
+    const context = tracked({ isModalRendered: false });
+    const onCloseModal = () => {
+      context.isModalRendered = false;
+    };
 
     await render(
       <template>
-        {{#if this.isModalRendered}}
+        {{#if context.isModalRendered}}
           <Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Footer>
-              <Button id="confirm-button" type="button" @text="Confirm" @color="primary" {{on "click" this.deactivateModal}} />
+              <Button
+                id="confirm-button"
+                type="button"
+                @text="Confirm"
+                @color="primary"
+                {{on "click" onCloseModal}}
+              />
             </M.Footer>
           </Modal>
         {{/if}}
@@ -259,7 +334,10 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     );
 
     assert.dom('#test-modal').doesNotExist();
-    this.set('isModalRendered', true);
+
+    context.isModalRendered = true;
+    await settled();
+
     assert.dom('#test-modal').exists();
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -273,25 +351,28 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   });
 
   test('it should close the modal and remove the body overflow style - form submit', async function (assert) {
-    this.set('isModalRendered', false);
-    this.set(
-      'deactivateModalOnSubmit',
-      function (event) {
-        event.preventDefault(); // prevent page reload
-        this.set('isModalRendered', false);
-      }.bind(this),
-    );
+    const context = tracked({ isModalRendered: false });
+    const onCloseModalOnSubmit = (event: SubmitEvent) => {
+      event.preventDefault(); // prevent page reload
+      context.isModalRendered = false;
+    };
 
     await render(
       <template>
-        {{#if this.isModalRendered}}
+        {{#if context.isModalRendered}}
           <Modal id="test-modal" as |M|>
             <M.Header>Title</M.Header>
             <M.Body>
-              <form id="test-form" {{on "submit" this.deactivateModalOnSubmit}} />
+              <form id="test-form" {{on "submit" onCloseModalOnSubmit}} />
             </M.Body>
             <M.Footer>
-              <Button id="submit-button" form="test-form" type="submit" @text="Confirm" @color="primary" />
+              <Button
+                id="submit-button"
+                form="test-form"
+                type="submit"
+                @text="Confirm"
+                @color="primary"
+              />
             </M.Footer>
           </Modal>
         {{/if}}
@@ -299,7 +380,10 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     );
 
     assert.dom('#test-modal').doesNotExist();
-    this.set('isModalRendered', true);
+
+    context.isModalRendered = true;
+    await settled();
+
     assert.dom('#test-modal').exists();
 
     // when the modal is open the `<body>` element gets applied an overflow:hidden via inline style
@@ -316,80 +400,106 @@ module('Integration | Component | hds/modal/index', function (hooks) {
 
   test('it uses the title as name for the dialog', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header>Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header>Title</M.Header>
+        </Modal>
+      </template>,
     );
     // the IDs are dynamically generated
-    let titleElement = this.element.querySelector('.hds-modal__title');
-    let titleElementId = titleElement.id;
-    assert.dom('dialog').hasAttribute('aria-labelledby', titleElementId);
+    let titleElement = find('.hds-modal__title');
+    assert
+      .dom('dialog')
+      .hasAttribute('aria-labelledby', titleElement?.id ?? '');
   });
 
   // FOCUS MANAGEMENT
 
   test('it sets initial focus on the dimiss button, as first focusable element', async function (assert) {
     await render(
-      <template><Modal id="test-modal" as |M|>
-            <M.Header>Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal" as |M|>
+          <M.Header>Title</M.Header>
+        </Modal>
+      </template>,
     );
     assert.dom('button.hds-modal__dismiss').isFocused();
   });
 
   test('it returns focus to the element that initiated the open event, if is still in the DOM', async function (assert) {
+    const context = tracked({ isModalRendered: false });
+    const showModal = () => {
+      context.isModalRendered = true;
+    };
+
     await render(
-      <template><button id="test-button" type="button" {{on "click" (set this "showModal" true)}}>open modal</button>
-          {{#if this.showModal}}
-            <Modal id="test-modal" as |M|>
-              <M.Header>Title</M.Header>
-            </Modal>
-          {{/if}}
-          </template>,
+      <template>
+        <button id="test-button" type="button" {{on "click" showModal}}>open
+          modal</button>
+        {{#if context.isModalRendered}}
+          <Modal id="test-modal" as |M|>
+            <M.Header>Title</M.Header>
+          </Modal>
+        {{/if}}
+      </template>,
     );
     await click('#test-button');
-    assert.true(this.showModal);
+    assert.true(context.isModalRendered);
     await click('button.hds-modal__dismiss');
     assert.dom('#test-button').isFocused();
   });
 
   // this test is flaky in CI, so skipping for now
   skip('it returns focus to the `body` element, if the one that initiated the open event not anymore in the DOM', async function (assert) {
+    const context = tracked({ isModalRendered: false });
+    const showModal = () => {
+      context.isModalRendered = true;
+    };
+
     await render(
-      <template><Dropdown as |D|>
-            <D.ToggleButton id="test-toggle" @text="open modal" />
-            <D.Interactive id="test-interactive" {{on "click" (set this "showModal" true)}}>open modal</D.Interactive>
-          </Dropdown>
-          {{#if this.showModal}}
-            <Modal id="test-modal" as |M|>
-              <M.Header>Title</M.Header>
-            </Modal>
-          {{/if}}
-          </template>,
+      <template>
+        <Dropdown as |D|>
+          <D.ToggleButton id="test-toggle" @text="open modal" />
+          <D.Interactive id="test-interactive" {{on "click" showModal}}>open
+            modal</D.Interactive>
+        </Dropdown>
+        {{#if context.isModalRendered}}
+          <Modal id="test-modal" as |M|>
+            <M.Header>Title</M.Header>
+          </Modal>
+        {{/if}}
+      </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
-    assert.true(this.showModal);
+    assert.true(context.isModalRendered);
     await click('button.hds-modal__dismiss');
     assert.dom('body', document).isFocused();
   });
 
   test('it returns focus to a specific element if provided via`@returnFocusTo`', async function (assert) {
+    const context = tracked({ isModalRendered: false });
+    const showModal = () => {
+      context.isModalRendered = true;
+    };
+
     await render(
-      <template><Dropdown as |D|>
-            <D.ToggleButton id="test-toggle" @text="open modal" />
-            <D.Interactive id="test-interactive" {{on "click" (set this "showModal" true)}}>open modal</D.Interactive>
-          </Dropdown>
-          {{#if this.showModal}}
-            <Modal id="test-modal" @returnFocusTo="test-toggle" as |M|>
-              <M.Header>Title</M.Header>
-            </Modal>
-          {{/if}}
-          </template>,
+      <template>
+        <Dropdown as |D|>
+          <D.ToggleButton id="test-toggle" @text="open modal" />
+          <D.Interactive id="test-interactive" {{on "click" showModal}}>open
+            modal</D.Interactive>
+        </Dropdown>
+        {{#if context.isModalRendered}}
+          <Modal id="test-modal" @returnFocusTo="test-toggle" as |M|>
+            <M.Header>Title</M.Header>
+          </Modal>
+        {{/if}}
+      </template>,
     );
     await click('#test-toggle');
     await click('#test-interactive');
-    assert.true(this.showModal);
+    assert.true(context.isModalRendered);
     await click('button.hds-modal__dismiss');
     assert.dom('#test-toggle').isFocused();
   });
@@ -397,30 +507,39 @@ module('Integration | Component | hds/modal/index', function (hooks) {
   // CALLBACKS
 
   test('it should call `onOpen` function if provided', async function (assert) {
-    let opened = false;
-    this.set('onOpen', () => (opened = true));
+    const context = tracked({ isOpen: false });
+    const onOpen = () => {
+      context.isOpen = true;
+    };
+
     await render(
-      <template><Modal id="test-modal-onopen-callback" @onOpen={{this.onOpen}} as |M|>
-            <M.Header>Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal-onopen-callback" @onOpen={{onOpen}} as |M|>
+          <M.Header>Title</M.Header>
+        </Modal>
+      </template>,
     );
     assert.dom('#test-modal-onopen-callback').isVisible();
     await settled();
-    assert.ok(opened);
+    assert.ok(context.isOpen);
   });
 
   test('it should call `onClose` function if provided', async function (assert) {
-    let closed = false;
-    this.set('onClose', () => (closed = true));
+    const context = tracked({ isOpen: true });
+    const onClose = () => {
+      context.isOpen = false;
+    };
+
     await render(
-      <template><Modal id="test-modal-onclose-callback" @onClose={{this.onClose}} as |M|>
-            <M.Header>Title</M.Header>
-          </Modal></template>,
+      <template>
+        <Modal id="test-modal-onclose-callback" @onClose={{onClose}} as |M|>
+          <M.Header>Title</M.Header>
+        </Modal>
+      </template>,
     );
     await click('#test-modal-onclose-callback button.hds-modal__dismiss');
     assert.dom('#test-modal-onclose-callback').isNotVisible();
-    await settled();
-    assert.ok(closed);
+    assert.ok(!context.isOpen);
   });
 
   // ASSERTIONS
@@ -433,7 +552,10 @@ module('Integration | Component | hds/modal/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Modal @size="foo" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Modal @size="foo" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);
@@ -447,7 +569,10 @@ module('Integration | Component | hds/modal/index', function (hooks) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
     await render(
-      <template><Modal @color="foo" as |M|><M.Header>Title</M.Header></Modal></template>,
+      <template>
+        {{! @glint-expect-error - testing invalid component usage }}
+        <Modal @color="foo" as |M|><M.Header>Title</M.Header></Modal>
+      </template>,
     );
     assert.throws(function () {
       throw new Error(errorMessage);

From 30a2310e9bfc42e6a90851bbf0b04daeb03ba2a7 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 14:53:24 -0400
Subject: [PATCH 42/43] feat: converted key value input tests to gts

---
 ...utton-test.gjs => add-row-button-test.gts} |  40 ++-
 .../delete-row-button-test.gjs                | 150 ----------
 .../delete-row-button-test.gts                | 206 +++++++++++++
 .../{field-test.gjs => field-test.gts}        | 253 +++++++++-------
 .../form/key-value-inputs/generic-test.gjs    |  65 ----
 .../form/key-value-inputs/generic-test.gts    |  80 +++++
 .../{index-test.gjs => index-test.gts}        | 280 ++++++++++--------
 7 files changed, 619 insertions(+), 455 deletions(-)
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{add-row-button-test.gjs => add-row-button-test.gts} (62%)
 delete mode 100644 showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs
 create mode 100644 showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gts
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{field-test.gjs => field-test.gts} (54%)
 delete mode 100644 showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs
 create mode 100644 showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gts
 rename showcase/tests/integration/components/hds/form/key-value-inputs/{index-test.gjs => index-test.gts} (65%)

diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gjs b/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gts
similarity index 62%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gjs
rename to showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gts
index 39bc87135a1..1030bc02975 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gjs
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gts
@@ -6,7 +6,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
 import { render, click } from '@ember/test-helpers';
-import AddRowButton from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/add-row-button";
+import AddRowButton from '@hashicorp/design-system-components/components/hds/form/key-value-inputs/add-row-button';
+import { tracked } from 'tracked-built-ins';
 
 module(
   'Integration | Component | hds/form/key-value-inputs/add-row-button',
@@ -15,7 +16,9 @@ module(
 
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><AddRowButton id="test-form-key-value-add-row-button" /></template>,
+        <template>
+          <AddRowButton id="test-form-key-value-add-row-button" />
+        </template>,
       );
       assert
         .dom('#test-form-key-value-add-row-button')
@@ -26,14 +29,21 @@ module(
 
     test('it should render with default text', async function (assert) {
       await render(
-        <template><AddRowButton id="test-form-key-value-add-row-button" /></template>,
+        <template>
+          <AddRowButton id="test-form-key-value-add-row-button" />
+        </template>,
       );
       assert.dom('#test-form-key-value-add-row-button').hasText('Add row');
     });
 
     test('it should render text from `@text` argument', async function (assert) {
       await render(
-        <template><AddRowButton @text="Custom text" id="test-form-key-value-add-row-button" /></template>,
+        <template>
+          <AddRowButton
+            @text="Custom text"
+            id="test-form-key-value-add-row-button"
+          />
+        </template>,
       );
       assert.dom('#test-form-key-value-add-row-button').hasText('Custom text');
     });
@@ -41,24 +51,34 @@ module(
     // CALLBACKS
 
     test('it should call `@onClick` action when clicked', async function (assert) {
-      let clicked = false;
-      this.set('onClick', () => {
-        clicked = true;
+      const context = tracked({
+        isClicked: false,
       });
 
+      const onClick = () => {
+        context.isClicked = true;
+      };
+
       await render(
-        <template><AddRowButton @onClick={{this.onClick}} id="test-form-key-value-add-row-button" /></template>,
+        <template>
+          <AddRowButton
+            @onClick={{onClick}}
+            id="test-form-key-value-add-row-button"
+          />
+        </template>,
       );
 
       await click('#test-form-key-value-add-row-button');
-      assert.ok(clicked);
+      assert.ok(context.isClicked);
     });
 
     // ACCESSIBILITY
 
     test('it should provide an `aria-description` attribute', async function (assert) {
       await render(
-        <template><AddRowButton id="test-form-key-value-add-row-button" /></template>,
+        <template>
+          <AddRowButton id="test-form-key-value-add-row-button" />
+        </template>,
       );
       assert
         .dom('#test-form-key-value-add-row-button')
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs b/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs
deleted file mode 100644
index 79cf7f18912..00000000000
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gjs
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, click, fillIn } from '@ember/test-helpers';
-import DeleteRowButton from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/delete-row-button";
-import KeyValueInputs from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/index";
-
-module(
-  'Integration | Component | hds/form/key-value-inputs/delete-row-button',
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(
-        <template><DeleteRowButton id="test-form-key-value-delete-row-button" @rowIndex={{0}} /></template>,
-      );
-      assert
-        .dom('#test-form-key-value-delete-row-button')
-        .hasClass('hds-form-key-value-inputs__delete-row-button');
-    });
-
-    // TEXT
-
-    test('it should render with default text', async function (assert) {
-      await render(
-        <template><DeleteRowButton id="test-form-key-value-delete-row-button" @rowIndex={{0}} /></template>,
-      );
-      assert
-        .dom('#test-form-key-value-delete-row-button')
-        .hasAria('label', 'Delete row 1');
-    });
-
-    test('it should render text from `@text` argument', async function (assert) {
-      await render(
-        <template><DeleteRowButton @text="Custom text" id="test-form-key-value-delete-row-button" @rowIndex={{0}} /></template>,
-      );
-      assert
-        .dom('#test-form-key-value-delete-row-button')
-        .hasAria('label', 'Custom text');
-    });
-
-    // CALLBACKS
-
-    test('it should call `@onClick` action when clicked and return rowData/rowIndex as positional arguments', async function (assert) {
-      const rowData = { test: true };
-      const rowIndex = 5;
-      this.set('rowData', rowData);
-      this.set('rowIndex', rowIndex);
-      let clicked = false;
-      this.set(
-        'onClick',
-        function (passedRowData, passedRowIndex) {
-          clicked = true;
-          this.set('passedRowData', passedRowData);
-          this.set('passedRowIndex', passedRowIndex);
-        }.bind(this),
-      );
-
-      await render(
-        <template><DeleteRowButton @onClick={{this.onClick}} @rowData={{this.rowData}} @rowIndex={{this.rowIndex}} id="test-form-key-value-delete-row-button" /></template>,
-      );
-
-      await click('#test-form-key-value-delete-row-button');
-      assert.ok(clicked);
-      assert.strictEqual(
-        this.passedRowData,
-        rowData,
-        'rowData is passed as first argument',
-      );
-      assert.strictEqual(
-        this.passedRowIndex,
-        rowIndex,
-        'rowIndex is passed as second argument',
-      );
-    });
-
-    test('it should call `@onInsert/@onRemove` callbacks when added/removed', async function (assert) {
-      this.set('isRendered', false);
-      let inserted = false;
-      let removed = false;
-      this.set('onInsert', () => {
-        inserted = true;
-      });
-      this.set('onRemove', () => {
-        removed = true;
-      });
-
-      await render(
-        <template>
-          {{#if this.isRendered}}
-            <DeleteRowButton @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
-          {{/if}}
-        </template>,
-      );
-
-      assert.notOk(inserted);
-      assert.notOk(removed);
-      this.set('isRendered', true);
-      assert.ok(inserted);
-      this.set('isRendered', false);
-      assert.ok(removed);
-    });
-
-    // RETURN FOCUS
-
-    test('it returns focus to the main frameset when a row is deleted and the `DeleteRowButton` element removed from the DOM', async function (assert) {
-      this.data = [
-        { key: 'Test key', value: 'Test value' },
-        { key: 'Another key', value: 'Another value' },
-      ];
-      this.set(
-        'onClick',
-        function (_passedRowData, passedRowIndex) {
-          this.set(
-            'data',
-            this.data.filter((_row, idx) => idx !== passedRowIndex),
-          );
-        }.bind(this),
-      );
-
-      await render(<template>
-        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
-          <:row as |R|>
-            {{#let R.rowIndex as |index|}}
-              <R.Field as |F|>
-                <F.Label>Label</F.Label>
-                <F.TextInput data-test-input="row-{{index}}" />
-              </R.Field>
-              <R.Generic />
-              <R.DeleteRowButton data-test-button="row-{{index}}" @onClick={{this.onClick}} />
-            {{/let}}
-          </:row>
-        </KeyValueInputs>
-      </template>);
-
-      const inputSelector =
-        '#test-form-key-value-inputs [data-test-input="row-1"]';
-      const buttonSelector =
-        '#test-form-key-value-inputs [data-test-button="row-1"]';
-      await fillIn(inputSelector, 'test');
-      assert.dom(inputSelector).isFocused();
-      await click(buttonSelector);
-      assert.dom('#test-form-key-value-inputs').isFocused();
-    });
-  },
-);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gts b/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gts
new file mode 100644
index 00000000000..42c38609c89
--- /dev/null
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/delete-row-button-test.gts
@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render, click, fillIn, settled } from '@ember/test-helpers';
+import DeleteRowButton from '@hashicorp/design-system-components/components/hds/form/key-value-inputs/delete-row-button';
+import KeyValueInputs from '@hashicorp/design-system-components/components/hds/form/key-value-inputs/index';
+import { tracked } from 'tracked-built-ins';
+
+module(
+  'Integration | Component | hds/form/key-value-inputs/delete-row-button',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it should render the component with a CSS class that matches the component name', async function (assert) {
+      const rowData = { test: true };
+      await render(
+        <template>
+          <DeleteRowButton
+            id="test-form-key-value-delete-row-button"
+            @rowIndex={{0}}
+            @rowData={{rowData}}
+          />
+        </template>,
+      );
+      assert
+        .dom('#test-form-key-value-delete-row-button')
+        .hasClass('hds-form-key-value-inputs__delete-row-button');
+    });
+
+    // TEXT
+
+    test('it should render with default text', async function (assert) {
+      const rowData = { test: true };
+      await render(
+        <template>
+          <DeleteRowButton
+            id="test-form-key-value-delete-row-button"
+            @rowIndex={{0}}
+            @rowData={{rowData}}
+          />
+        </template>,
+      );
+      assert
+        .dom('#test-form-key-value-delete-row-button')
+        .hasAria('label', 'Delete row 1');
+    });
+
+    test('it should render text from `@text` argument', async function (assert) {
+      const rowData = { test: true };
+      await render(
+        <template>
+          <DeleteRowButton
+            @text="Custom text"
+            id="test-form-key-value-delete-row-button"
+            @rowIndex={{0}}
+            @rowData={{rowData}}
+          />
+        </template>,
+      );
+      assert
+        .dom('#test-form-key-value-delete-row-button')
+        .hasAria('label', 'Custom text');
+    });
+
+    // CALLBACKS
+
+    test('it should call `@onClick` action when clicked and return rowData/rowIndex as positional arguments', async function (assert) {
+      const rowData = { test: true };
+      const rowIndex = 5;
+
+      const context = tracked<{
+        isClicked: boolean;
+        passedRowData: unknown;
+        passedRowIndex: number | undefined;
+      }>({
+        isClicked: false,
+        passedRowData: undefined,
+        passedRowIndex: undefined,
+      });
+
+      const onClick = (rowData: unknown, rowIndex: number) => {
+        context.isClicked = true;
+        context.passedRowData = rowData;
+        context.passedRowIndex = rowIndex;
+      };
+
+      await render(
+        <template>
+          <DeleteRowButton
+            @onClick={{onClick}}
+            @rowData={{rowData}}
+            @rowIndex={{rowIndex}}
+            id="test-form-key-value-delete-row-button"
+          />
+        </template>,
+      );
+
+      await click('#test-form-key-value-delete-row-button');
+      assert.ok(context.isClicked);
+      assert.strictEqual(
+        context.passedRowData,
+        rowData,
+        'rowData is passed as first argument',
+      );
+      assert.strictEqual(
+        context.passedRowIndex,
+        rowIndex,
+        'rowIndex is passed as second argument',
+      );
+    });
+
+    test('it should call `@onInsert/@onRemove` callbacks when added/removed', async function (assert) {
+      const context = tracked({
+        isRendered: false,
+        isInserted: false,
+        isRemoved: false,
+      });
+      const onInsert = () => {
+        context.isInserted = true;
+      };
+      const onRemove = () => {
+        context.isRemoved = true;
+      };
+
+      await render(
+        <template>
+          {{#if context.isRendered}}
+            <DeleteRowButton
+              @onInsert={{onInsert}}
+              @onRemove={{onRemove}}
+              @rowIndex={{0}}
+              @rowData={{null}}
+            />
+          {{/if}}
+        </template>,
+      );
+
+      assert.notOk(context.isInserted);
+      assert.notOk(context.isRemoved);
+
+      context.isRendered = true;
+      await settled();
+      assert.ok(context.isInserted);
+
+      context.isRendered = false;
+      await settled();
+      assert.ok(context.isRemoved);
+    });
+
+    // RETURN FOCUS
+
+    test('it returns focus to the main frameset when a row is deleted and the `DeleteRowButton` element removed from the DOM', async function (assert) {
+      let context = tracked({
+        data: [
+          { key: 'Test key', value: 'Test value' },
+          { key: 'Another key', value: 'Another value' },
+        ],
+      });
+
+      const onClick = function (
+        _passedRowData: unknown,
+        passedRowIndex: number,
+      ) {
+        context.data = context.data.filter(
+          (_row, index) => index !== passedRowIndex,
+        );
+      };
+
+      await render(
+        <template>
+          <KeyValueInputs
+            id="test-form-key-value-inputs"
+            @data={{context.data}}
+          >
+            <:row as |R|>
+              {{#let R.rowIndex as |index|}}
+                <R.Field as |F|>
+                  <F.Label>Label</F.Label>
+                  <F.TextInput data-test-input="row-{{index}}" />
+                </R.Field>
+                <R.Generic />
+                <R.DeleteRowButton
+                  data-test-button="row-{{index}}"
+                  @onClick={{onClick}}
+                />
+              {{/let}}
+            </:row>
+          </KeyValueInputs>
+        </template>,
+      );
+
+      const inputSelector =
+        '#test-form-key-value-inputs [data-test-input="row-1"]';
+      const buttonSelector =
+        '#test-form-key-value-inputs [data-test-button="row-1"]';
+      await fillIn(inputSelector, 'test');
+      assert.dom(inputSelector).isFocused();
+      await click(buttonSelector);
+      assert.dom('#test-form-key-value-inputs').isFocused();
+    });
+  },
+);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gjs b/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gts
similarity index 54%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gjs
rename to showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gts
index 0dc96fa2e9a..f67ccdd418a 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gjs
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gts
@@ -5,9 +5,12 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render } from '@ember/test-helpers';
-import Field from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/field";
-import eq from "ember-truth-helpers/helpers/eq";
+import { render, find, settled } from '@ember/test-helpers';
+import Field from '@hashicorp/design-system-components/components/hds/form/key-value-inputs/field';
+import eq from 'ember-truth-helpers/helpers/eq';
+import { tracked } from 'tracked-built-ins';
+
+import NOOP from 'showcase/utils/noop';
 
 const YIELDED_INPUTS = [
   { type: 'FileInput', selector: '.hds-form-file-input' },
@@ -19,60 +22,78 @@ const YIELDED_INPUTS = [
   { type: 'Textarea', selector: '.hds-form-textarea' },
 ];
 
+const createKeyValueInputsField = async (options: {
+  type?: string;
+  isInvalid?: boolean;
+  id?: string;
+  extraAriaDescribedBy?: string;
+}) => {
+  const type = options.type ?? 'TextInput';
+  const superSelectOptions = ['Option 1', 'Option 2'];
+  const superSelectSelected = 'Option 1';
+
+  await render(
+    <template>
+      <Field
+        id="test-form-key-value-field"
+        @id={{options.id}}
+        @isInvalid={{options.isInvalid}}
+        @extraAriaDescribedBy={{options.extraAriaDescribedBy}}
+        @rowIndex={{0}}
+        as |F|
+      >
+        <F.Label>Label</F.Label>
+        <F.HelperText>Helper text</F.HelperText>
+        {{#if (eq type "FileInput")}}
+          <F.FileInput />
+        {{/if}}
+        {{#if (eq type "MaskedInput")}}
+          <F.MaskedInput />
+        {{/if}}
+        {{#if (eq type "SuperSelectSingle")}}
+          <F.SuperSelectSingle
+            @onChange={{NOOP}}
+            @options={{superSelectOptions}}
+            @selected={{superSelectSelected}}
+            as |option|
+          >
+            {{option}}
+          </F.SuperSelectSingle>
+        {{/if}}
+        {{#if (eq type "SuperSelectMultiple")}}
+          <F.SuperSelectMultiple
+            @onChange={{NOOP}}
+            @options={{superSelectOptions}}
+            as |option|
+          >
+            {{option}}
+          </F.SuperSelectMultiple>
+        {{/if}}
+        {{#if (eq type "Select")}}
+          <F.Select />
+        {{/if}}
+        {{#if (eq type "TextInput")}}
+          <F.TextInput />
+        {{/if}}
+        {{#if (eq type "Textarea")}}
+          <F.Textarea />
+        {{/if}}
+        <F.Error>Error text</F.Error>
+      </Field>
+    </template>,
+  );
+};
+
 module(
   'Integration | Component | hds/form/key-value-inputs/field',
   function (hooks) {
     setupRenderingTest(hooks);
 
-    hooks.beforeEach(function () {
-      this.set('createKeyValueInputsField', async (args = {}) => {
-        this.type = args.type ?? 'TextInput';
-        this.isInvalid = args.isInvalid;
-        this.controlId = args.id;
-        this.extraAriaDescribedBy = args.extraAriaDescribedBy;
-        // ---
-        this.options = ['Option 1', 'Option 2'];
-        this.selected_option = 'Option 1';
-        this.NOOP = () => {};
-
-        await render(<template>
-          <Field id="test-form-key-value-field" @id={{this.controlId}} @isInvalid={{this.isInvalid}} @extraAriaDescribedBy={{this.extraAriaDescribedBy}} @rowIndex={{0}} as |F|>
-            <F.Label>Label</F.Label>
-            <F.HelperText>Helper text</F.HelperText>
-            {{#if (eq this.type "FileInput")}}
-              <F.FileInput />
-            {{/if}}
-            {{#if (eq this.type "MaskedInput")}}
-              <F.MaskedInput />
-            {{/if}}
-            {{#if (eq this.type "SuperSelectSingle")}}
-              <F.SuperSelectSingle @onChange={{this.NOOP}} @options={{this.options}} @selected={{this.selected_option}} as |option|>
-                {{option}}
-              </F.SuperSelectSingle>
-            {{/if}}
-            {{#if (eq this.type "SuperSelectMultiple")}}
-              <F.SuperSelectMultiple @onChange={{this.NOOP}} @options={{this.options}} as |option|>
-                {{option}}
-              </F.SuperSelectMultiple>
-            {{/if}}
-            {{#if (eq this.type "Select")}}
-              <F.Select />
-            {{/if}}
-            {{#if (eq this.type "TextInput")}}
-              <F.TextInput />
-            {{/if}}
-            {{#if (eq this.type "Textarea")}}
-              <F.Textarea />
-            {{/if}}
-            <F.Error>Error text</F.Error>
-          </Field>
-        </template>);
-      });
-    });
-
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
       await render(
-        <template><Field id="test-form-key-value-field" /></template>,
+        <template>
+          <Field id="test-form-key-value-field" @rowIndex={{0}} />
+        </template>,
       );
       assert
         .dom('#test-form-key-value-field')
@@ -82,11 +103,13 @@ module(
     // LABEL HIDDEN TEXT
 
     test('it should render the label with screen-reader-only text based on the provided `@rowIndex` argument', async function (assert) {
-      await render(<template>
-        <Field id="test-form-key-value-field" @rowIndex={{0}} as |F|>
-          <F.Label>Label</F.Label>
-        </Field>
-      </template>);
+      await render(
+        <template>
+          <Field id="test-form-key-value-field" @rowIndex={{0}} as |F|>
+            <F.Label>Label</F.Label>
+          </Field>
+        </template>,
+      );
 
       assert
         .dom(
@@ -104,11 +127,18 @@ module(
     // REQUIRED/OPTIONAL
 
     test('it should render as required with `@isRequired` argument', async function (assert) {
-      await render(<template>
-        <Field id="test-form-key-value-field" @isRequired={{true}} @rowIndex={{0}} as |F|>
-          <F.Label>Label</F.Label>
-        </Field>
-      </template>);
+      await render(
+        <template>
+          <Field
+            id="test-form-key-value-field"
+            @isRequired={{true}}
+            @rowIndex={{0}}
+            as |F|
+          >
+            <F.Label>Label</F.Label>
+          </Field>
+        </template>,
+      );
 
       assert
         .dom(
@@ -118,11 +148,18 @@ module(
     });
 
     test('it should render as optional with `@isOptional` argument', async function (assert) {
-      await render(<template>
-        <Field id="test-form-key-value-field" @isOptional={{true}} @rowIndex={{0}} as |F|>
-          <F.Label>Label</F.Label>
-        </Field>
-      </template>);
+      await render(
+        <template>
+          <Field
+            id="test-form-key-value-field"
+            @isOptional={{true}}
+            @rowIndex={{0}}
+            as |F|
+          >
+            <F.Label>Label</F.Label>
+          </Field>
+        </template>,
+      );
 
       assert
         .dom(
@@ -134,7 +171,7 @@ module(
     // YIELDED (CONTEXTUAL) COMPONENTS
 
     test('it renders the yielded `Label`, `HelperText`, and `Error` contextual components', async function (assert) {
-      await this.createKeyValueInputsField();
+      await createKeyValueInputsField({});
       assert
         .dom(
           '#test-form-key-value-field .hds-form-key-value-inputs__field-label',
@@ -154,7 +191,7 @@ module(
 
     YIELDED_INPUTS.forEach(({ type, selector }) => {
       test(`it renders the yielded "${type}" input as contextual components`, async function (assert) {
-        await this.createKeyValueInputsField({ type });
+        await createKeyValueInputsField({ type });
         assert.dom(`#test-form-key-value-field ${selector}`).exists();
       });
     });
@@ -165,7 +202,7 @@ module(
       if (type !== 'FileInput') {
         // file input doesn't have an invalid state
         test(`it should render the "${type}" input as invalid if \`@isInvalid\` is true`, async function (assert) {
-          await this.createKeyValueInputsField({ type, isInvalid: true });
+          await createKeyValueInputsField({ type, isInvalid: true });
           assert
             .dom(`#test-form-key-value-field ${selector}`)
             // we need to remove the initial `.` from the selector string
@@ -178,7 +215,9 @@ module(
 
     test('it should add `data-width` if `@width` is provided', async function (assert) {
       await render(
-        <template><Field id="test-form-key-value-field" @width="50%" /></template>,
+        <template>
+          <Field id="test-form-key-value-field" @width="50%" @rowIndex={{0}} />
+        </template>,
       );
       assert
         .dom('#test-form-key-value-field')
@@ -188,30 +227,40 @@ module(
     // CALLBACKS
 
     test('it should call `@onInsert/@onRemove` callbacks when added/removed', async function (assert) {
-      this.set('isRendered', false);
-      let inserted = false;
-      let removed = false;
-      this.set('onInsert', () => {
-        inserted = true;
-      });
-      this.set('onRemove', () => {
-        removed = true;
+      const context = tracked({
+        isRendered: false,
+        isInserted: false,
+        isRemoved: false,
       });
+      const onInsert = () => {
+        context.isInserted = true;
+      };
+      const onRemove = () => {
+        context.isRemoved = true;
+      };
 
       await render(
         <template>
-          {{#if this.isRendered}}
-            <Field @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
+          {{#if context.isRendered}}
+            <Field
+              @onInsert={{onInsert}}
+              @onRemove={{onRemove}}
+              @rowIndex={{0}}
+            />
           {{/if}}
         </template>,
       );
 
-      assert.notOk(inserted);
-      assert.notOk(removed);
-      this.set('isRendered', true);
-      assert.ok(inserted);
-      this.set('isRendered', false);
-      assert.ok(removed);
+      assert.notOk(context.isInserted);
+      assert.notOk(context.isRemoved);
+
+      context.isRendered = true;
+      await settled();
+      assert.ok(context.isInserted);
+
+      context.isRendered = false;
+      await settled();
+      assert.ok(context.isRemoved);
     });
 
     // ACCESSIBILITY
@@ -220,46 +269,46 @@ module(
       ['default', 'custom'].forEach((mode) => {
         test(`it should associate the label and help text appropriately for the "${type}" input - ${mode === 'custom' ? 'with custom @id' : 'default'}`, async function (assert) {
           const extraAriaDescribedBy = 'extra';
-          const opts = { type, extraAriaDescribedBy };
+          const opts: {
+            type: string;
+            extraAriaDescribedBy: string;
+            id?: string;
+          } = { type, extraAriaDescribedBy };
           if (mode === 'custom') {
             opts.id = 'custom-id';
           }
-          await this.createKeyValueInputsField(opts);
-
-          const labelId = document.querySelector(
-            '#test-form-key-value-field .hds-form-label',
-          ).id;
-          const inputId = document.querySelector(
-            `#test-form-key-value-field ${selector}`,
-          ).id;
-          const helperId = document.querySelector(
+          await createKeyValueInputsField(opts);
+
+          const label = find('#test-form-key-value-field .hds-form-label');
+          const input = find(`#test-form-key-value-field ${selector}`);
+          const helper = find(
             '#test-form-key-value-field .hds-form-key-value-inputs__field-helper-text',
-          ).id;
-          const errorId = document.querySelector(
+          );
+          const error = find(
             '#test-form-key-value-field .hds-form-key-value-inputs__field-error',
-          ).id;
+          );
 
           if (type === 'SuperSelectSingle' || type === 'SuperSelectMultiple') {
             assert
               .dom('#test-form-key-value-field [role="combobox"]')
-              .hasAria('labelledby', labelId);
+              .hasAria('labelledby', label?.id ?? '');
             assert
               .dom('#test-form-key-value-field [role="combobox"]')
               .hasAria(
                 'describedby',
-                `${helperId} ${errorId} ${extraAriaDescribedBy}`,
+                `${helper?.id} ${error?.id} ${extraAriaDescribedBy}`,
               );
           } else {
             assert
               .dom(
                 '#test-form-key-value-field .hds-form-key-value-inputs__field-label',
               )
-              .hasAttribute('for', inputId);
+              .hasAttribute('for', input?.id ?? '');
             assert
               .dom(`#test-form-key-value-field ${selector}`)
               .hasAria(
                 'describedby',
-                `${helperId} ${errorId} ${extraAriaDescribedBy}`,
+                `${helper?.id} ${error?.id} ${extraAriaDescribedBy}`,
               );
           }
         });
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs b/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs
deleted file mode 100644
index 2db88b81e96..00000000000
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gjs
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render } from '@ember/test-helpers';
-import Generic from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/generic";
-
-module(
-  'Integration | Component | hds/form/key-value-inputs/generic',
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await render(<template><Generic id="test-form-key-value-generic">
-      <span id="foo">Generic content</span>
-    </Generic></template>);
-      assert
-        .dom('#test-form-key-value-generic')
-        .hasClass('hds-form-key-value-inputs__generic-container');
-    });
-
-    // YIELDING
-
-    test('it should render the content', async function (assert) {
-      await render(<template><Generic id="test-form-key-value-generic">
-      <span id="foo">Generic content</span>
-    </Generic></template>);
-      assert
-        .dom('#test-form-key-value-generic #foo')
-        .hasText('Generic content');
-    });
-
-    // CALLBACKS
-
-    test('it should call `@onInsert/@onRemove` callbacks when added/removed', async function (assert) {
-      this.set('isRendered', false);
-      let inserted = false;
-      let removed = false;
-      this.set('onInsert', () => {
-        inserted = true;
-      });
-      this.set('onRemove', () => {
-        removed = true;
-      });
-
-      await render(
-        <template>
-          {{#if this.isRendered}}
-            <Generic @onInsert={{this.onInsert}} @onRemove={{this.onRemove}} />
-          {{/if}}
-        </template>,
-      );
-
-      assert.notOk(inserted);
-      assert.notOk(removed);
-      this.set('isRendered', true);
-      assert.ok(inserted);
-      this.set('isRendered', false);
-      assert.ok(removed);
-    });
-  },
-);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gts b/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gts
new file mode 100644
index 00000000000..9eefb8ce09d
--- /dev/null
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/generic-test.gts
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'showcase/tests/helpers';
+import { render, settled } from '@ember/test-helpers';
+import Generic from '@hashicorp/design-system-components/components/hds/form/key-value-inputs/generic';
+import { tracked } from 'tracked-built-ins';
+
+module(
+  'Integration | Component | hds/form/key-value-inputs/generic',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it should render the component with a CSS class that matches the component name', async function (assert) {
+      await render(
+        <template>
+          <Generic id="test-form-key-value-generic">
+            <span id="foo">Generic content</span>
+          </Generic>
+        </template>,
+      );
+      assert
+        .dom('#test-form-key-value-generic')
+        .hasClass('hds-form-key-value-inputs__generic-container');
+    });
+
+    // YIELDING
+
+    test('it should render the content', async function (assert) {
+      await render(
+        <template>
+          <Generic id="test-form-key-value-generic">
+            <span id="foo">Generic content</span>
+          </Generic>
+        </template>,
+      );
+      assert
+        .dom('#test-form-key-value-generic #foo')
+        .hasText('Generic content');
+    });
+
+    // CALLBACKS
+
+    test('it should call `@onInsert/@onRemove` callbacks when added/removed', async function (assert) {
+      const context = tracked({
+        isRendered: false,
+        isInserted: false,
+        isRemoved: false,
+      });
+      const onInsert = () => {
+        context.isInserted = true;
+      };
+      const onRemove = () => {
+        context.isRemoved = true;
+      };
+
+      await render(
+        <template>
+          {{#if context.isRendered}}
+            <Generic @onInsert={{onInsert}} @onRemove={{onRemove}} />
+          {{/if}}
+        </template>,
+      );
+
+      assert.notOk(context.isInserted);
+      assert.notOk(context.isRemoved);
+
+      context.isRendered = true;
+      await settled();
+      assert.ok(context.isInserted);
+
+      context.isRendered = false;
+      await settled();
+      assert.ok(context.isRemoved);
+    });
+  },
+);
diff --git a/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gjs b/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gts
similarity index 65%
rename from showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gjs
rename to showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gts
index bba817897a7..be40a5f9083 100644
--- a/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gjs
+++ b/showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gts
@@ -5,56 +5,64 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render } from '@ember/test-helpers';
-import KeyValueInputs from "@hashicorp/design-system-components/components/hds/form/key-value-inputs/index";
+import { render, find } from '@ember/test-helpers';
+import KeyValueInputs from '@hashicorp/design-system-components/components/hds/form/key-value-inputs/index';
+
+const createKeyValueInputs = async (options: {
+  data?: any[];
+  isFieldsetRequired?: boolean;
+  isFieldsetOptional?: boolean;
+  extraAriaDescribedBy?: string;
+}) => {
+  const data = options?.data ?? [];
+
+  return await render(
+    <template>
+      <KeyValueInputs
+        id="test-form-key-value-inputs"
+        @data={{data}}
+        @isRequired={{options.isFieldsetRequired}}
+        @isOptional={{options.isFieldsetOptional}}
+        @extraAriaDescribedBy={{options.extraAriaDescribedBy}}
+      >
+        <:header as |H|>
+          <H.Legend>Legend</H.Legend>
+          <H.HelperText>Helper text</H.HelperText>
+          <H.Generic>
+            <span id="header-generic">Generic content</span>
+          </H.Generic>
+        </:header>
+
+        <:row as |R|>
+          <R.DeleteRowButton />
+          <R.Field as |F|>
+            <F.Label>Value</F.Label>
+            <F.HelperText>Helper text</F.HelperText>
+            <F.Textarea @value={{R.rowData.value}} />
+            <F.Error>Error text</F.Error>
+          </R.Field>
+          <R.Generic>Generic content</R.Generic>
+        </:row>
+
+        <:footer as |F|>
+          <F.AddRowButton />
+          <F.Alert as |A|>
+            <A.Description>Alert content</A.Description>
+          </F.Alert>
+          <F.Error>Error text</F.Error>
+        </:footer>
+      </KeyValueInputs>
+    </template>,
+  );
+};
 
 module(
   'Integration | Component | hds/form/key-value-inputs/index',
   function (hooks) {
     setupRenderingTest(hooks);
 
-    hooks.beforeEach(function () {
-      this.set('createKeyValueInputs', async (args = {}) => {
-        this.data = args.data ?? [];
-        this.isFieldsetRequired = args.isFieldsetRequired;
-        this.isFieldsetOptional = args.isFieldsetOptional;
-        this.extraAriaDescribedBy = args.extraAriaDescribedBy;
-        return await render(<template>
-          <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}} @isRequired={{this.isFieldsetRequired}} @isOptional={{this.isFieldsetOptional}} @extraAriaDescribedBy={{this.extraAriaDescribedBy}}>
-            <:header as |H|>
-              <H.Legend>Legend</H.Legend>
-              <H.HelperText>Helper text</H.HelperText>
-              <H.Generic>
-                <span id="header-generic">Generic content</span>
-              </H.Generic>
-            </:header>
-
-            <:row as |R|>
-              {{!-- for testing purposes, we specifically move it first so we can validate that is rendered last --}}
-              <R.DeleteRowButton />
-              <R.Field as |F|>
-                <F.Label>Value</F.Label>
-                <F.HelperText>Helper text</F.HelperText>
-                <F.Textarea @value={{R.rowData.value}} />
-                <F.Error>Error text</F.Error>
-              </R.Field>
-              <R.Generic>Generic content</R.Generic>
-            </:row>
-
-            <:footer as |F|>
-              <F.AddRowButton />
-              <F.Alert as |A|>
-                <A.Description>Alert content</A.Description>
-              </F.Alert>
-              <F.Error>Error text</F.Error>
-            </:footer>
-          </KeyValueInputs>
-        </template>);
-      });
-    });
-
     test('it should render the component with a CSS class that matches the component name', async function (assert) {
-      await this.createKeyValueInputs();
+      await createKeyValueInputs({});
       assert
         .dom('#test-form-key-value-inputs')
         .hasClass('hds-form-key-value-inputs');
@@ -63,7 +71,7 @@ module(
     // HEADER
 
     test('it should render the header content', async function (assert) {
-      await this.createKeyValueInputs();
+      await createKeyValueInputs({});
       assert
         .dom('#test-form-key-value-inputs .hds-form-key-value-inputs__header')
         .exists();
@@ -84,7 +92,7 @@ module(
         .hasText('Generic content');
     });
     test('it should render the "required" indicator in the legend', async function (assert) {
-      await this.createKeyValueInputs({ isFieldsetRequired: true });
+      await createKeyValueInputs({ isFieldsetRequired: true });
       assert
         .dom(
           '#test-form-key-value-inputs .hds-form-key-value-inputs__header legend .hds-form-indicator.hds-badge--color-neutral',
@@ -92,7 +100,7 @@ module(
         .exists();
     });
     test('it should render the "optional" indicator in the legend', async function (assert) {
-      await this.createKeyValueInputs({ isFieldsetOptional: true });
+      await createKeyValueInputs({ isFieldsetOptional: true });
       assert
         .dom(
           '#test-form-key-value-inputs .hds-form-key-value-inputs__header legend .hds-form-indicator.hds-form-indicator--optional',
@@ -103,7 +111,7 @@ module(
     // ROW
 
     test('it should render the row content if the data argument is an empty array', async function (assert) {
-      await this.createKeyValueInputs();
+      await createKeyValueInputs({});
       assert
         .dom('#test-form-key-value-inputs .hds-form-key-value-inputs__row')
         .exists({ count: 1 });
@@ -132,7 +140,7 @@ module(
     });
 
     test('it should render the row content if the data argument has entries', async function (assert) {
-      await this.createKeyValueInputs({
+      await createKeyValueInputs({
         data: [{ value: 'Test value' }, { value: 'Another value' }],
       });
       assert
@@ -157,29 +165,33 @@ module(
     });
 
     test('it should yield `rowData` and `rowIndex`', async function (assert) {
-      this.data = [{ key: 'Test key', value: 'Test value' }];
-      await render(<template>
-        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
-          <:row as |R|>
-            <R.Generic>
-              This row has R.rowIndex={{R.rowIndex}} / R.rowData.key={{R.rowData.key}} / R.rowData.value={{R.rowData.value}}
-            </R.Generic>
-          </:row>
-        </KeyValueInputs>
-      </template>);
+      const data = [{ key: 'Test key', value: 'Test value' }];
+      await render(
+        <template>
+          <KeyValueInputs id="test-form-key-value-inputs" @data={{data}}>
+            <:row as |R|>
+              <R.Generic>
+                This row has R.rowIndex={{R.rowIndex}}
+                / R.rowData.key={{R.rowData.key}}
+                / R.rowData.value={{R.rowData.value}}
+              </R.Generic>
+            </:row>
+          </KeyValueInputs>
+        </template>,
+      );
       assert
         .dom(
           '#test-form-key-value-inputs .hds-form-key-value-inputs__generic-container',
         )
         .hasText(
-          `This row has R.rowIndex=0 / R.rowData.key=${this.data[0].key} / R.rowData.value=${this.data[0].value}`,
+          `This row has R.rowIndex=0 / R.rowData.key=${data[0] ? data[0].key : ''} / R.rowData.value=${data[0] ? data[0].value : ''}`,
         );
     });
 
     // FOOTER
 
     test('it should render the footer content', async function (assert) {
-      await this.createKeyValueInputs();
+      await createKeyValueInputs({});
       assert
         .dom('#test-form-key-value-inputs .hds-form-key-value-inputs__footer')
         .exists();
@@ -202,7 +214,7 @@ module(
     // INLINE STYLES FOR GRID LAYOUT
 
     test('it should set the appropriate column indexes for some row children (generic + button) if there is no data', async function (assert) {
-      await this.createKeyValueInputs();
+      await createKeyValueInputs({});
       assert
         .dom(
           '#test-form-key-value-inputs .hds-form-key-value-inputs__generic-container',
@@ -216,35 +228,38 @@ module(
     });
 
     test('it should set the appropriate column indexes for some row children (generic + button) when there is complex row content and data', async function (assert) {
-      this.data = [
+      const data = [
         { key: 'Test key', value: 'Test value' },
         { key: 'Another key', value: 'Another value' },
       ];
-      await render(<template>
-        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
-          <:header as |H|>
-            <H.Legend>Legend</H.Legend>
-          </:header>
-          <:row as |R|>
-            <R.Field as |F|>
-              <F.Label>Key</F.Label>
-              <F.TextInput />
-            </R.Field>
-            <R.Generic data-test-generic-1>
-              Generic content
-            </R.Generic>
-            <R.Field as |F|>
-              <F.Label>Value</F.Label>
-              <F.Textarea />
-            </R.Field>
-            <R.DeleteRowButton />
-            {{!-- Adding generic content after the delete row button to ensure it is actually rendered in a column before the delete icon --}}
-            <R.Generic data-test-generic-2>
-              Generic content
-            </R.Generic>
-          </:row>
-        </KeyValueInputs>
-      </template>);
+
+      await render(
+        <template>
+          <KeyValueInputs id="test-form-key-value-inputs" @data={{data}}>
+            <:header as |H|>
+              <H.Legend>Legend</H.Legend>
+            </:header>
+            <:row as |R|>
+              <R.Field as |F|>
+                <F.Label>Key</F.Label>
+                <F.TextInput />
+              </R.Field>
+              <R.Generic data-test-generic-1>
+                Generic content
+              </R.Generic>
+              <R.Field as |F|>
+                <F.Label>Value</F.Label>
+                <F.Textarea />
+              </R.Field>
+              <R.DeleteRowButton />
+              {{! Adding generic content after the delete row button to ensure it is actually rendered in a column before the delete icon }}
+              <R.Generic data-test-generic-2>
+                Generic content
+              </R.Generic>
+            </:row>
+          </KeyValueInputs>
+        </template>,
+      );
       assert
         .dom('#test-form-key-value-inputs [data-test-generic-1]')
         .hasStyle({ '--hds-key-value-inputs-column-index': '2' });
@@ -262,7 +277,7 @@ module(
     // CUSTOM WIDTHS
 
     test('it should set the appropriate `grid-template-columns` CSS property via `--hds-key-value-inputs-columns` for the rows without custom widths', async function (assert) {
-      await this.createKeyValueInputs({
+      await createKeyValueInputs({
         data: [{ value: 'Test value' }, { value: 'Another value' }],
       });
 
@@ -272,36 +287,41 @@ module(
     });
 
     test('it should set the appropriate `grid-template-columns` CSS property via `--hds-key-value-inputs-columns` for the rows with complex structure', async function (assert) {
-      this.data = [
+      const data = [
         { key: 'Test key', value: 'Test value' },
         { key: 'Another key', value: 'Another value' },
       ];
-      await render(<template>
-        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
-          <:row as |R|>
-            <R.Field />
-            <R.Generic />
-            <R.Field />
-            <R.Generic />
-            <R.DeleteRowButton />
-          </:row>
-        </KeyValueInputs>
-      </template>);
+      await render(
+        <template>
+          <KeyValueInputs id="test-form-key-value-inputs" @data={{data}}>
+            <:row as |R|>
+              <R.Field />
+              <R.Generic />
+              <R.Field />
+              <R.Generic />
+              <R.DeleteRowButton />
+            </:row>
+          </KeyValueInputs>
+        </template>,
+      );
       assert.dom('#test-form-key-value-inputs').hasStyle({
         '--hds-key-value-inputs-columns': '1fr auto 1fr auto 2.25rem',
       });
     });
 
     test('it should set the appropriate `grid-template-columns` CSS property via `--hds-key-value-inputs-columns` for the row when there is no data and no yielded delete button', async function (assert) {
-      this.data = [];
-      await render(<template>
-        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
-          <:row as |R|>
-            <R.Field />
-            <R.Generic />
-          </:row>
-        </KeyValueInputs>
-      </template>);
+      const data: never[] = [];
+
+      await render(
+        <template>
+          <KeyValueInputs id="test-form-key-value-inputs" @data={{data}}>
+            <:row as |R|>
+              <R.Field />
+              <R.Generic />
+            </:row>
+          </KeyValueInputs>
+        </template>,
+      );
       assert
         .dom('#test-form-key-value-inputs')
         // per design specs, the last column is always set to provide space for the delete button, even if the button is not rendered, to avoid layout shifts
@@ -309,16 +329,18 @@ module(
     });
 
     test('it should set the appropriate `grid-template-columns` CSS property via `--hds-key-value-inputs-columns` for the rows with custom widths', async function (assert) {
-      this.data = [{ value: 'Test value' }, { value: 'Another value' }];
-      await render(<template>
-        <KeyValueInputs id="test-form-key-value-inputs" @data={{this.data}}>
-          <:row as |R|>
-            <R.Field @width="200px" />
-            <R.Generic />
-            <R.DeleteRowButton />
-          </:row>
-        </KeyValueInputs>
-      </template>);
+      const data = [{ value: 'Test value' }, { value: 'Another value' }];
+      await render(
+        <template>
+          <KeyValueInputs id="test-form-key-value-inputs" @data={{data}}>
+            <:row as |R|>
+              <R.Field @width="200px" />
+              <R.Generic />
+              <R.DeleteRowButton />
+            </:row>
+          </KeyValueInputs>
+        </template>,
+      );
 
       assert
         .dom('#test-form-key-value-inputs .hds-form-key-value-inputs__field')
@@ -333,24 +355,26 @@ module(
 
     test('it should associate together the fieldset and its legend, help text and error', async function (assert) {
       const extraAriaDescribedBy = 'extra';
-      await this.createKeyValueInputs({ extraAriaDescribedBy });
+      await createKeyValueInputs({ extraAriaDescribedBy });
 
-      const legendId = document.querySelector(
+      const legend = find(
         '#test-form-key-value-inputs .hds-form-key-value-inputs__header legend',
-      ).id;
-      const helperId = document.querySelector(
+      );
+      const helper = find(
         '#test-form-key-value-inputs .hds-form-key-value-inputs__header .hds-form-key-value-inputs__helper-text',
-      ).id;
-      const errorId = document.querySelector(
+      );
+      const error = find(
         '#test-form-key-value-inputs .hds-form-key-value-inputs__error',
-      ).id;
+      );
 
-      assert.dom('#test-form-key-value-inputs').hasAria('labelledby', legendId);
+      assert
+        .dom('#test-form-key-value-inputs')
+        .hasAria('labelledby', legend?.id ?? '');
       assert
         .dom('#test-form-key-value-inputs')
         .hasAria(
           'describedby',
-          `${helperId} ${errorId} ${extraAriaDescribedBy}`,
+          `${helper?.id} ${error?.id} ${extraAriaDescribedBy}`,
         );
     });
   },

From 4ecc8f25920e63ef9fb3d57c4979c06f97155dc6 Mon Sep 17 00:00:00 2001
From: shleewhite <lee.white@hahicorp.com>
Date: Mon, 27 Oct 2025 15:17:53 -0400
Subject: [PATCH 43/43] feat: convert rest of stepper tests to gts

---
 ...{nav-panel-test.gjs => nav-panel-test.gts} |  52 ++---
 .../{nav-step-test.gjs => nav-step-test.gts}  |  93 +++++----
 .../stepper/{nav-test.gjs => nav-test.gts}    | 185 +++++++++++-------
 3 files changed, 201 insertions(+), 129 deletions(-)
 rename showcase/tests/integration/components/hds/stepper/{nav-panel-test.gjs => nav-panel-test.gts} (66%)
 rename showcase/tests/integration/components/hds/stepper/{nav-step-test.gjs => nav-step-test.gts} (77%)
 rename showcase/tests/integration/components/hds/stepper/{nav-test.gjs => nav-test.gts} (60%)

diff --git a/showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs b/showcase/tests/integration/components/hds/stepper/nav-panel-test.gts
similarity index 66%
rename from showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs
rename to showcase/tests/integration/components/hds/stepper/nav-panel-test.gts
index 5962a59668a..1e2e7c81ae5 100644
--- a/showcase/tests/integration/components/hds/stepper/nav-panel-test.gjs
+++ b/showcase/tests/integration/components/hds/stepper/nav-panel-test.gts
@@ -10,45 +10,53 @@ import { render } from '@ember/test-helpers';
 // Because of how the `panel` subcomponent is built,
 // it's practically impossible to test in isolation, so in our tests
 // in this file it will be wrapped inside its parent component.
-import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
-import Panel from "@hashicorp/design-system-components/components/hds/stepper/nav/panel";
+import Nav from '@hashicorp/design-system-components/components/hds/stepper/nav/index';
+import Panel from '@hashicorp/design-system-components/components/hds/stepper/nav/panel';
+
+const createNavPanel = async (options: {
+  currentStep?: number;
+  isNavInteractive?: boolean;
+}) => {
+  return await render(
+    <template>
+      <Nav
+        @ariaLabel="Sample stepper"
+        @currentStep={{options.currentStep}}
+        @isInteractive={{options.isNavInteractive}}
+        as |S|
+      >
+        <S.Step />
+        <S.Panel>
+          <div id="test-panel-content">Test</div>
+        </S.Panel>
+      </Nav>
+    </template>,
+  );
+};
 
 module('Integration | Component | hds/stepper/nav/panel', function (hooks) {
   setupRenderingTest(hooks);
 
-  hooks.beforeEach(function () {
-    this.set('createNavPanel', async (args = {}) => {
-      this.currentStep = args.currentStep ?? undefined;
-      this.isNavInteractive = args.isNavInteractive ?? undefined;
-      return await render(<template>
-        <Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
-          <S.Step></S.Step>
-          <S.Panel>
-            <div id="test-panel-content">Test</div>
-          </S.Panel>
-        </Nav>
-      </template>);
-    });
-  });
-
   // CLASSES
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template><Panel data-test="panel-1" /></template>);
+    await render(
+      <template><Panel @currentStep={{1}} data-test="panel-1" /></template>,
+    );
     assert.dom('[data-test="panel-1"]').hasClass('hds-stepper-nav__panel');
   });
 
   // VISIBILITY
 
   test('it sets the panel content to not visible when the @currentStep argument does not match the panel index in the @panelIds argument', async function (assert) {
-    await this.createNavPanel({ currentStep: 1 });
+    await createNavPanel({ currentStep: 1 });
     assert.dom('.hds-stepper-nav__panel').hasAttribute('hidden');
     assert.dom('#test-panel-content').doesNotExist();
     assert.dom('.hds-stepper-nav__panel').hasAttribute('aria-labelledby');
   });
 
   test('it sets the panel content to visible when the @currentStep argument matches the panel index in the @panelIds argument', async function (assert) {
-    await this.createNavPanel({ currentStep: 0 });
+    await createNavPanel({ currentStep: 0 });
     assert.dom('.hds-stepper-nav__panel').hasNoAttribute('hidden');
     assert.dom('#test-panel-content').exists();
     assert.dom('.hds-stepper-nav__panel').hasAttribute('aria-labelledby');
@@ -57,12 +65,12 @@ module('Integration | Component | hds/stepper/nav/panel', function (hooks) {
   // INTERACTIVITY
 
   test('it sets the panel to interactive when the @isNavInteractive argument is not provided', async function (assert) {
-    await this.createNavPanel({ currentStep: 0 });
+    await createNavPanel({ currentStep: 0 });
     assert.dom('.hds-stepper-nav__panel').hasAttribute('role', 'tabpanel');
   });
 
   test('it sets the panel to non-interactive when the @isNavInteractive argument is provided', async function (assert) {
-    await this.createNavPanel({ isNavInteractive: false });
+    await createNavPanel({ isNavInteractive: false });
     assert.dom('.hds-stepper-nav__panel').hasNoAttribute('role');
   });
 });
diff --git a/showcase/tests/integration/components/hds/stepper/nav-step-test.gjs b/showcase/tests/integration/components/hds/stepper/nav-step-test.gts
similarity index 77%
rename from showcase/tests/integration/components/hds/stepper/nav-step-test.gjs
rename to showcase/tests/integration/components/hds/stepper/nav-step-test.gts
index 8879c5e7533..b4cd1cda5b0 100644
--- a/showcase/tests/integration/components/hds/stepper/nav-step-test.gjs
+++ b/showcase/tests/integration/components/hds/stepper/nav-step-test.gts
@@ -10,50 +10,63 @@ import { render } from '@ember/test-helpers';
 // Because of how the `step` subcomponent is built,
 // it's practically impossible to test in isolation, so in our tests
 // in this file it will be wrapped inside its parent comoponent.
-import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
-import Step from "@hashicorp/design-system-components/components/hds/stepper/nav/step";
+import Nav from '@hashicorp/design-system-components/components/hds/stepper/nav/index';
+import Step from '@hashicorp/design-system-components/components/hds/stepper/nav/step';
+import type { HdsStepperTitleTags } from '@hashicorp/design-system-components/components/hds/stepper/types';
+
+const createNavStep = async (options: {
+  title?: string;
+  description?: string;
+  currentStep?: number;
+  stepNumber?: number;
+  isNavInteractive?: boolean;
+  titleTag?: HdsStepperTitleTags;
+}) => {
+  const currentStep = options.currentStep ?? 0;
+
+  return await render(
+    <template>
+      <Nav
+        @ariaLabel="Sample stepper"
+        @currentStep={{currentStep}}
+        @isInteractive={{options.isNavInteractive}}
+        as |S|
+      >
+        <S.Step @titleTag={{options.titleTag}}>
+          <:title>{{options.title}}</:title>
+          <:description>{{options.description}}</:description>
+        </S.Step>
+        <S.Panel />
+      </Nav>
+    </template>,
+  );
+};
 
 module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   setupRenderingTest(hooks);
 
-  hooks.beforeEach(function () {
-    this.set('createNavStep', async (args = {}) => {
-      this.title = args.title ?? undefined;
-      this.description = args.description ?? undefined;
-      this.currentStep = args.currentStep ?? undefined;
-      this.stepNumber = args.stepNumber ?? undefined;
-      this.isNavInteractive = args.isNavInteractive ?? undefined;
-      this.titleTag = args.titleTag ?? undefined;
-      return await render(<template>
-        <Nav @currentStep={{this.currentStep}} @isInteractive={{this.isNavInteractive}} as |S|>
-          <S.Step @stepNumber={{this.stepNumber}} @titleTag={{this.titleTag}}>
-            <:title>{{this.title}}</:title>
-            <:description>{{this.description}}</:description>
-          </S.Step>
-          <S.Panel />
-        </Nav>
-      </template>);
-    });
-  });
-
   // CLASSES
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await render(<template><Step id="test-stepper-nav-step" /></template>);
+    await render(
+      <template>
+        <Step id="test-stepper-nav-step" @currentStep={{0}} />
+      </template>,
+    );
     assert.dom('#test-stepper-nav-step').hasClass('hds-stepper-nav__step');
   });
 
   // STEP NUMBER
 
   test('it sets the step number automatically based on the step ids provided', async function (assert) {
-    await this.createNavStep();
+    await createNavStep({});
     assert.dom('.hds-stepper-indicator-step__text').hasText('1');
   });
 
   // NAV INTERACTIVE
 
   test('it sets the step to interactive when the @isNavInteractive argument is not provided to the parent', async function (assert) {
-    await this.createNavStep();
+    await createNavStep({});
     assert.dom('.hds-stepper-nav__step').hasAttribute('role', 'presentation');
     assert
       .dom('.hds-stepper-nav__step')
@@ -67,7 +80,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   });
 
   test('it sets the step to non-interactive when the @isNavInteractive argument is provided to the parent', async function (assert) {
-    await this.createNavStep({ isNavInteractive: false });
+    await createNavStep({ isNavInteractive: false });
     assert.dom('.hds-stepper-nav__step').hasNoAttribute('role');
     assert
       .dom('.hds-stepper-nav__step')
@@ -85,10 +98,11 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   test('it sets the step to incomplete when the @currentStep is less than the nodeIndex and @isNavInteractive is true', async function (assert) {
     await render(
       <template>
-        <Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{true}}>
+        <Step @currentStep={{2}} @isNavInteractive={{true}}>
           <:title>Title</:title>
           <:description>Description</:description>
-        </Step></template>,
+        </Step>
+      </template>,
     );
     assert
       .dom('.hds-stepper-nav__step')
@@ -104,7 +118,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   });
 
   test('it sets the step to complete when the @currentStep is greater than the nodeIndex and @isNavInteractive is true', async function (assert) {
-    await this.createNavStep({ currentStep: 1 });
+    await createNavStep({ currentStep: 1 });
     assert
       .dom('.hds-stepper-nav__step')
       .hasClass('hds-stepper-nav__step--complete');
@@ -119,7 +133,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   });
 
   test('it sets the step to active when the @currentStep is equal to the nodeIndex and @isNavInteractive is true', async function (assert) {
-    await this.createNavStep({ currentStep: 0 });
+    await createNavStep({ currentStep: 0 });
     assert
       .dom('.hds-stepper-nav__step')
       .hasClass('hds-stepper-nav__step--active');
@@ -138,10 +152,11 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   test('it sets the step to incomplete when the @currentStep is less than the nodeIndex and @isNavInteractive is false', async function (assert) {
     await render(
       <template>
-        <Step @stepNumber={{1}} @currentStep={{2}} @isNavInteractive={{false}}>
+        <Step @currentStep={{2}} @isNavInteractive={{false}}>
           <:title>Title</:title>
           <:description>Description</:description>
-        </Step></template>,
+        </Step>
+      </template>,
     );
     assert
       .dom('.hds-stepper-nav__step')
@@ -154,7 +169,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   });
 
   test('it sets the step to complete when the @currentStep is greater than the nodeIndex and @isNavInteractive is false', async function (assert) {
-    await this.createNavStep({ currentStep: 1, isNavInteractive: false });
+    await createNavStep({ currentStep: 1, isNavInteractive: false });
     assert
       .dom('.hds-stepper-nav__step')
       .hasClass('hds-stepper-nav__step--complete');
@@ -166,7 +181,7 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   });
 
   test('it sets the step to active when the @currentStep is equal to the nodeIndex and @isNavInteractive is false', async function (assert) {
-    await this.createNavStep({ currentStep: 0, isNavInteractive: false });
+    await createNavStep({ currentStep: 0, isNavInteractive: false });
     assert
       .dom('.hds-stepper-nav__step')
       .hasClass('hds-stepper-nav__step--active');
@@ -180,31 +195,31 @@ module('Integration | Component | hds/stepper/nav/step', function (hooks) {
   // TITLE TAG
 
   test('it renders a div when the @titleTag argument is not provided', async function (assert) {
-    await this.createNavStep();
+    await createNavStep({});
     assert.dom('.hds-stepper-nav__step-title').hasTagName('div');
   });
 
   test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
-    await this.createNavStep({ titleTag: 'h2' });
+    await createNavStep({ titleTag: 'h2' });
     assert.dom('.hds-stepper-nav__step-title').hasTagName('h2');
   });
 
   // TITLE
 
   test('it renders the title when the title contextual component block is used', async function (assert) {
-    await this.createNavStep({ title: 'Test' });
+    await createNavStep({ title: 'Test' });
     assert.dom('.hds-stepper-nav__step-title').containsText('Test');
   });
 
   // DESCRIPTION
 
   test('it does not render the description when the description contextual component block is not used', async function (assert) {
-    await render(<template><Step></Step></template>);
+    await render(<template><Step @currentStep={{0}} /></template>);
     assert.dom('.hds-stepper-nav__step-description').doesNotExist();
   });
 
   test('it renders the description when the description contextual component block is used', async function (assert) {
-    await this.createNavStep({ description: 'Test' });
+    await createNavStep({ description: 'Test' });
     assert.dom('.hds-stepper-nav__step-description').exists();
     assert.dom('.hds-stepper-nav__step-description').containsText('Test');
   });
diff --git a/showcase/tests/integration/components/hds/stepper/nav-test.gjs b/showcase/tests/integration/components/hds/stepper/nav-test.gts
similarity index 60%
rename from showcase/tests/integration/components/hds/stepper/nav-test.gjs
rename to showcase/tests/integration/components/hds/stepper/nav-test.gts
index be463ddfbf4..79bde52ae90 100644
--- a/showcase/tests/integration/components/hds/stepper/nav-test.gjs
+++ b/showcase/tests/integration/components/hds/stepper/nav-test.gts
@@ -5,78 +5,117 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'showcase/tests/helpers';
-import { render, click, focus, setupOnerror, triggerKeyEvent } from '@ember/test-helpers';
-import Nav from "@hashicorp/design-system-components/components/hds/stepper/nav/index";
-import { array, hash } from "@ember/helper";
+import {
+  render,
+  click,
+  focus,
+  setupOnerror,
+  triggerKeyEvent,
+} from '@ember/test-helpers';
+import Nav from '@hashicorp/design-system-components/components/hds/stepper/nav/index';
+import type { HdsStepperTitleTags } from '@hashicorp/design-system-components/components/hds/stepper/types';
+import { array, hash } from '@ember/helper';
+import { tracked } from 'tracked-built-ins';
 
-module('Integration | Component | hds/stepper/nav', function (hooks) {
-  setupRenderingTest(hooks);
+const createStepperNav = async (options: {
+  currentStep?: number;
+  isInteractive?: boolean;
+  titleTag?: HdsStepperTitleTags;
+  onStepChange?: (event: Event, stepIndex: number) => void;
+  ariaLabel?: string;
+}) => {
+  const ariaLabel = options.ariaLabel ?? 'Label';
+  return await render(
+    <template>
+      <Nav
+        id="test-stepper-nav"
+        @currentStep={{options.currentStep}}
+        @titleTag={{options.titleTag}}
+        @isInteractive={{options.isInteractive}}
+        @ariaLabel={{ariaLabel}}
+        @onStepChange={{options.onStepChange}}
+        as |S|
+      >
+        <S.Step data-test="step-1" />
+        <S.Step data-test="step-2" />
+        <S.Panel />
+        <S.Panel />
+      </Nav>
+    </template>,
+  );
+};
 
-  hooks.beforeEach(function () {
-    this.set('createStepperNav', async (args = {}) => {
-      this.currentStep = args.currentStep ?? undefined;
-      this.titleTag = args.titleTag ?? undefined;
-      this.onStepChange = args.onStepChange ?? undefined;
-      this.isInteractive = args.isInteractive ?? undefined;
-      this.ariaLabel = args.ariaLabel ?? 'Label';
-      return await render(<template>
-          <Nav id="test-stepper-nav" @currentStep={{this.currentStep}} @titleTag={{this.titleTag}} @isInteractive={{this.isInteractive}} @ariaLabel={{this.ariaLabel}} @onStepChange={{this.onStepChange}} as |S|>
-            <S.Step data-test="step-1">
-            </S.Step>
-            <S.Step data-test="step-2">
-            </S.Step>
-            <S.Panel></S.Panel>
-            <S.Panel></S.Panel>
-          </Nav>
-        </template>);
-    });
+const createStepperNavArray = async (options: {
+  currentStep?: number;
+  titleTag?: HdsStepperTitleTags;
+  onStepChange?: (event: Event, stepIndex: number) => void;
+  step1Title?: string;
+  step1Description?: string;
+  ariaLabel?: string;
+}) => {
+  const ariaLabel = options.ariaLabel ?? 'Label';
+  const step1Title = options.step1Title ?? 'Step 1';
 
-    this.set('createStepperNavArray', async (args = {}) => {
-      this.currentStep = args.currentStep ?? undefined;
-      this.titleTag = args.titleTag ?? undefined;
-      this.onStepChange = args.onStepChange ?? undefined;
-      this.step1Title = args.step1Title ?? undefined;
-      this.step1Description = args.step1Description ?? undefined;
-      this.ariaLabel = args.ariaLabel ?? 'Label';
-      return await render(<template>
-          <Nav id="test-stepper-nav" @steps={{array (hash title=this.step1Title description=this.step1Description) (hash title="Step 2")}} @currentStep={{this.currentStep}} @titleTag={{this.titleTag}} @ariaLabel={{this.ariaLabel}} @onStepChange={{this.onStepChange}}>
-            <:body>
-            </:body>
-          </Nav>
-        </template>);
-    });
-  });
+  return await render(
+    <template>
+      <Nav
+        id="test-stepper-nav"
+        @steps={{array
+          (hash title=step1Title description=options.step1Description)
+          (hash title="Step 2")
+        }}
+        @currentStep={{options.currentStep}}
+        @titleTag={{options.titleTag}}
+        @ariaLabel={{ariaLabel}}
+        @onStepChange={{options.onStepChange}}
+      >
+        <:body>
+        </:body>
+      </Nav>
+    </template>,
+  );
+};
+
+module('Integration | Component | hds/stepper/nav', function (hooks) {
+  setupRenderingTest(hooks);
 
   // CLASSES
 
   test('it should render the component with a CSS class that matches the component name', async function (assert) {
-    await this.createStepperNav();
+    await createStepperNav({});
     assert.dom('#test-stepper-nav').hasClass('hds-stepper-nav');
   });
 
   // STEPS
 
   test('it sets the step title when using the @steps argument', async function (assert) {
-    await this.createStepperNavArray({ step1Title: 'Test' });
+    await createStepperNavArray({ step1Title: 'Test' });
     assert.dom('.hds-stepper-nav__step-title').containsText('Test');
   });
 
   test('it sets the step description when using the @steps argument', async function (assert) {
-    await this.createStepperNavArray({ step1Description: 'Test' });
+    await createStepperNavArray({ step1Description: 'Test' });
     assert.dom('.hds-stepper-nav__step-description').containsText('Test');
   });
 
   test('it should have 2 Steps and 2 Panels', async function (assert) {
-    await this.createStepperNavArray();
+    await createStepperNavArray({});
     assert.dom('.hds-stepper-nav__step').exists({ count: 2 });
     assert.dom('.hds-stepper-nav__panel').exists({ count: 2 });
   });
 
   test('it should have 2 Steps and no Panels if no :body named block is added', async function (assert) {
-    await render(<template>
-      <Nav id="test-stepper-nav" @steps={{array (hash title=this.step1Title description=this.step1Description) (hash title="Step 2")}} @currentStep={{this.currentStep}} @isInteractive={{false}} @titleTag={{this.titleTag}} @onStepChange={{this.onStepChange}}>
-      </Nav>
-    </template>);
+    await render(
+      <template>
+        <Nav
+          id="test-stepper-nav"
+          @steps={{array (hash title="Step 1") (hash title="Step 2")}}
+          @currentStep={{0}}
+          @isInteractive={{false}}
+          @ariaLabel="Sample stepper"
+        />
+      </template>,
+    );
     assert.dom('.hds-stepper-nav__step').exists({ count: 2 });
     assert.dom('.hds-stepper-nav__panel').doesNotExist();
   });
@@ -84,26 +123,26 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
   // TITLE TAG
 
   test('it renders a div when the @titleTag argument is not provided', async function (assert) {
-    await this.createStepperNav();
+    await createStepperNav({});
     assert.dom('.hds-stepper-nav__step-title').hasTagName('div');
   });
 
   test('it renders the custom title tag when the @titleTag argument is provided', async function (assert) {
-    await this.createStepperNav({ titleTag: 'h2' });
+    await createStepperNav({ titleTag: 'h2' });
     assert.dom('.hds-stepper-nav__step-title').hasTagName('h2');
   });
 
   // CURRENT STEP
 
   test('it sets the first step to active when the @currentStep argument is not provided', async function (assert) {
-    await this.createStepperNav();
+    await createStepperNav({});
     assert
       .dom('[data-test="step-1"]')
       .hasClass('hds-stepper-nav__step--active');
   });
 
   test('it sets the step number provided active when the @currentStep argument is provided', async function (assert) {
-    await this.createStepperNav({ currentStep: 1 });
+    await createStepperNav({ currentStep: 1 });
     assert
       .dom('[data-test="step-2"]')
       .hasClass('hds-stepper-nav__step--active');
@@ -112,7 +151,7 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
   // ISINTERACTIVE
 
   test('it sets the steps to interactive when the @isInteractive argument is not provided', async function (assert) {
-    await this.createStepperNav();
+    await createStepperNav({});
     assert.dom('.hds-stepper-nav__list').hasAttribute('role', 'tablist');
     assert
       .dom('[data-test="step-1"]')
@@ -121,7 +160,7 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
   });
 
   test('it sets the steps to non-interactive when the @isInteractive argument is provided', async function (assert) {
-    await this.createStepperNav({ isInteractive: false });
+    await createStepperNav({ isInteractive: false });
     assert.dom('.hds-stepper-nav__list').hasNoAttribute('role');
     assert
       .dom('[data-test="step-1"]')
@@ -132,27 +171,31 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
   // ARIA LABEL
 
   test('it sets the aria-label of the ol to the value provided to the @ariaLabel argument', async function (assert) {
-    await this.createStepperNav({ ariaLabel: 'test' });
+    await createStepperNav({ ariaLabel: 'test' });
     assert.dom('.hds-stepper-nav__list').hasAttribute('aria-label', 'test');
   });
 
   // CALLBACKS: ONSTEPCHANGE
 
   test('on step click it should invoke the `onStepChange` callback function', async function (assert) {
-    let clicked = false;
-    let stepNumber = 1;
-    this.set('onClick', (_event, index) => {
-      clicked = true;
-      stepNumber = index;
+    const context = tracked({
+      isClicked: false,
+      stepNumber: 1,
     });
-    await this.createStepperNav({
-      currentStep: stepNumber,
-      onStepChange: this.onClick,
+
+    const onClick = (_event: Event, index: number) => {
+      context.isClicked = true;
+      context.stepNumber = index;
+    };
+
+    await createStepperNav({
+      currentStep: context.stepNumber,
+      onStepChange: onClick,
       isInteractive: true,
     });
     await click('[data-test="step-1"] .hds-stepper-nav__step-button');
-    assert.ok(clicked);
-    assert.strictEqual(stepNumber, 0);
+    assert.ok(context.isClicked);
+    assert.strictEqual(context.stepNumber, 0);
   });
 
   // KEYBOARD CONTROLS
@@ -160,7 +203,7 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
   test('it should focus interactive steps and navigate through them using left and right arrow keys', async function (assert) {
     const leftArrowKey = 37;
     const rightArrowKey = 39;
-    await this.createStepperNav({
+    await createStepperNav({
       isInteractive: true,
       currentStep: 1,
     });
@@ -205,10 +248,16 @@ module('Integration | Component | hds/stepper/nav', function (hooks) {
     setupOnerror(function (error) {
       assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);
     });
-    await render(<template>
-      <Nav id="test-stepper-nav" @steps={{array (hash title=this.step1Title description=this.step1Description) (hash title="Step 2")}} @currentStep={{this.currentStep}} @titleTag={{this.titleTag}} @onStepChange={{this.onStepChange}}>
-      </Nav>
-    </template>);
+    await render(
+      <template>
+        <Nav
+          id="test-stepper-nav"
+          @steps={{array (hash title="Step 1") (hash title="Step 2")}}
+          @currentStep={{0}}
+          @ariaLabel="Sample stepper"
+        />
+      </template>,
+    );
     assert.throws(function () {
       throw new Error(errorMessage);
     });