diff --git a/test-app/tests/integration/components/buttons/button-group-test.ts b/test-app/tests/integration/components/buttons/button-group-test.gts
similarity index 65%
rename from test-app/tests/integration/components/buttons/button-group-test.ts
rename to test-app/tests/integration/components/buttons/button-group-test.gts
index d9f75500..b58febc8 100644
--- a/test-app/tests/integration/components/buttons/button-group-test.ts
+++ b/test-app/tests/integration/components/buttons/button-group-test.gts
@@ -1,9 +1,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { ButtonGroup } from '@frontile/buttons';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 module(
   'Integration | Component | ButtonGroup | @frontile/buttons',
@@ -61,10 +63,12 @@ module(
 
     test('it renders', async function (assert) {
       await render(
-        hbs`<ButtonGroup data-test-id="group" as |g|>
-          <g.Button data-test-id="button">Button</g.Button>
-          <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
-        </ButtonGroup>`
+        <template>
+          <ButtonGroup data-test-id="group" as |g|>
+            <g.Button data-test-id="button">Button</g.Button>
+            <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+          </ButtonGroup>
+        </template>
       );
 
       assert.dom('[data-test-id="group"]').exists();
@@ -75,12 +79,13 @@ module(
     module('Style classes', () => {
       module('@appearance', () => {
         test('it adds class for default appearance', async function (assert) {
-          this.set('appearance', '');
           await render(
-            hbs`<ButtonGroup data-test-id="group" @appearance={{this.appearance}} as |g|>
-              <g.Button data-test-id="button">Button</g.Button>
-              <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
-            </ButtonGroup>`
+            <template>
+              <ButtonGroup data-test-id="group" as |g|>
+                <g.Button data-test-id="button">Button</g.Button>
+                <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+              </ButtonGroup>
+            </template>
           );
 
           assert
@@ -92,12 +97,18 @@ module(
         });
 
         test('it adds class for outlined appearance', async function (assert) {
-          this.set('appearance', 'outlined');
+          const appearance = cell<'outlined'>('outlined');
           await render(
-            hbs`<ButtonGroup data-test-id="group" @appearance={{this.appearance}} as |g|>
-              <g.Button data-test-id="button">Button</g.Button>
-              <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
-            </ButtonGroup>`
+            <template>
+              <ButtonGroup
+                data-test-id="group"
+                @appearance={{appearance.current}}
+                as |g|
+              >
+                <g.Button data-test-id="button">Button</g.Button>
+                <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+              </ButtonGroup>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -109,17 +120,24 @@ module(
 
       module('@intent', () => {
         test('it adds class for the an intent', async function (assert) {
-          this.set('intent', 'primary');
+          const intent = cell<'primary' | 'danger'>('primary');
           await render(
-            hbs`<ButtonGroup data-test-id="group" @intent={{this.intent}} as |g|>
-              <g.Button data-test-id="button">Button</g.Button>
-              <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
-            </ButtonGroup>`
+            <template>
+              <ButtonGroup
+                data-test-id="group"
+                @intent={{intent.current}}
+                as |g|
+              >
+                <g.Button data-test-id="button">Button</g.Button>
+                <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+              </ButtonGroup>
+            </template>
           );
           assert.dom('[data-test-id="button"]').hasClass('intent-primary');
           assert.dom('[data-test-id="toggle"]').hasClass('intent-primary');
 
-          this.set('intent', 'danger');
+          intent.current = 'danger';
+          await settled();
           assert.dom('[data-test-id="button"]').hasClass('intent-danger');
           assert.dom('[data-test-id="toggle"]').hasClass('intent-danger');
         });
@@ -127,17 +145,20 @@ module(
 
       module('@size', () => {
         test('it adds class for the an intent', async function (assert) {
-          this.set('size', 'sm');
+          const size = cell<'sm' | 'lg'>('sm');
           await render(
-            hbs`<ButtonGroup data-test-id="group" @size={{this.size}} as |g|>
-              <g.Button data-test-id="button">Button</g.Button>
-              <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
-            </ButtonGroup>`
+            <template>
+              <ButtonGroup data-test-id="group" @size={{size.current}} as |g|>
+                <g.Button data-test-id="button">Button</g.Button>
+                <g.ToggleButton data-test-id="toggle">Toggle</g.ToggleButton>
+              </ButtonGroup>
+            </template>
           );
           assert.dom('[data-test-id="button"]').hasClass('btn-sm');
           assert.dom('[data-test-id="toggle"]').hasClass('toggle-button-sm');
 
-          this.set('size', 'lg');
+          size.current = 'lg';
+          await settled();
           assert.dom('[data-test-id="button"]').hasClass('btn-lg');
           assert.dom('[data-test-id="toggle"]').hasClass('toggle-button-lg');
         });
diff --git a/test-app/tests/integration/components/buttons/buttons-test.ts b/test-app/tests/integration/components/buttons/buttons-test.gts
similarity index 76%
rename from test-app/tests/integration/components/buttons/buttons-test.ts
rename to test-app/tests/integration/components/buttons/buttons-test.gts
index 0d98de8e..4d912a31 100644
--- a/test-app/tests/integration/components/buttons/buttons-test.ts
+++ b/test-app/tests/integration/components/buttons/buttons-test.gts
@@ -1,9 +1,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { Button } from '@frontile/buttons';
 
 registerCustomStyles({
   button: tv({
@@ -44,7 +44,11 @@ module(
     setupRenderingTest(hooks);
 
     test('it renders', async function (assert) {
-      await render(hbs`<Button data-test-id="button">My Button</Button>`);
+      await render(
+        <template>
+          <Button data-test-id="button">My Button</Button>
+        </template>
+      );
 
       assert.dom('[data-test-id="button"]').hasText('My Button');
       assert.dom('[data-test-id="button"]').hasAttribute('type', 'button');
@@ -52,7 +56,9 @@ module(
 
     test('it accepts @type argument', async function (assert) {
       await render(
-        hbs`<Button @type="submit" data-test-id="button">My Button</Button>`
+        <template>
+          <Button @type="submit" data-test-id="button">My Button</Button>
+        </template>
       );
 
       assert.dom('[data-test-id="button"]').hasAttribute('type', 'submit');
@@ -61,7 +67,11 @@ module(
     module('Style classes', () => {
       module('@appearance', () => {
         test('it adds class for default appearance', async function (assert) {
-          await render(hbs`<Button data-test-id="button">My Button</Button>`);
+          await render(
+            <template>
+              <Button data-test-id="button">My Button</Button>
+            </template>
+          );
 
           assert
             .dom('[data-test-id="button"]')
@@ -73,7 +83,9 @@ module(
 
         test('it adds class for outlined appearance', async function (assert) {
           await render(
-            hbs`<Button @appearance="outlined" data-test-id="button">My Button</Button>`
+            <template>
+              <Button @appearance="outlined" data-test-id="button">My Button</Button>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -84,7 +96,9 @@ module(
 
         test('it adds class for minimal appearance', async function (assert) {
           await render(
-            hbs`<Button @appearance="minimal" data-test-id="button">My Button</Button>`
+            <template>
+              <Button @appearance="minimal" data-test-id="button">My Button</Button>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -97,7 +111,9 @@ module(
 
         test('it adds class for custom appearance', async function (assert) {
           await render(
-            hbs`<Button @appearance="custom" data-test-id="button">My Button</Button>`
+            <template>
+              <Button @appearance="custom" data-test-id="button">My Button</Button>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').doesNotHaveClass('btn');
@@ -112,7 +128,9 @@ module(
       module('@intent', () => {
         test('it adds class for the an intent', async function (assert) {
           await render(
-            hbs`<Button @intent="primary" data-test-id="button">My Button</Button>`
+            <template>
+              <Button @intent="primary" data-test-id="button">My Button</Button>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').hasClass('intent-primary');
@@ -122,7 +140,9 @@ module(
       module('sizes', () => {
         test('it adds class size xs"', async function (assert) {
           await render(
-            hbs`<Button @size="xs" data-test-id="button">My Button</Button>`
+            <template>
+              <Button @size="xs" data-test-id="button">My Button</Button>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').hasClass('btn-xs');
@@ -130,7 +150,9 @@ module(
 
         test('it adds class size xl', async function (assert) {
           await render(
-            hbs`<Button @size="xl" data-test-id="button">My Button</Button>`
+            <template>
+              <Button @size="xl" data-test-id="button">My Button</Button>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').hasClass('btn-xl');
@@ -140,9 +162,11 @@ module(
 
     test('it yields classNames when renderless', async function (assert) {
       await render(
-        hbs`<Button @isRenderless={{true}} as |btn|>
+        <template>
+          <Button @isRenderless={{true}} as |btn|>
             <div data-test-id="my-div">{{btn.classNames}}</div>
-          </Button>`
+          </Button>
+        </template>
       );
       assert
         .dom('[data-test-id="my-div"]')
diff --git a/test-app/tests/integration/components/buttons/chip-test.ts b/test-app/tests/integration/components/buttons/chip-test.gts
similarity index 75%
rename from test-app/tests/integration/components/buttons/chip-test.ts
rename to test-app/tests/integration/components/buttons/chip-test.gts
index 68180925..450d6094 100644
--- a/test-app/tests/integration/components/buttons/chip-test.ts
+++ b/test-app/tests/integration/components/buttons/chip-test.gts
@@ -1,9 +1,9 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { Chip } from '@frontile/buttons';
 
 registerCustomStyles({
   chip: tv({
@@ -49,7 +49,11 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    await render(hbs`<Chip data-test-id="button">My Chip</Chip>`);
+    await render(
+      <template>
+        <Chip data-test-id="button">My Chip</Chip>
+      </template>
+    );
 
     assert.dom('[data-test-id="button"]').hasText('My Chip');
   });
@@ -57,7 +61,11 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
   module('Style classes', () => {
     module('@appearance', () => {
       test('it adds class for default appearance', async function (assert) {
-        await render(hbs`<Chip data-test-id="button">My Chip</Chip>`);
+        await render(
+          <template>
+            <Chip data-test-id="button">My Chip</Chip>
+          </template>
+        );
 
         assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-outlined');
         assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-faded');
@@ -66,7 +74,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
 
       test('it adds class for outlined appearance', async function (assert) {
         await render(
-          hbs`<Chip @appearance="outlined" data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @appearance="outlined" data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-default');
@@ -76,29 +86,23 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
 
       test('it adds class for faded appearance', async function (assert) {
         await render(
-          hbs`<Chip @appearance="faded" data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @appearance="faded" data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-default');
         assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-outlined');
         assert.dom('[data-test-id="button"]').hasClass('chip-faded');
       });
-
-      test('it adds class for custom appearance', async function (assert) {
-        await render(
-          hbs`<Chip @appearance="custom" data-test-id="button">My Chip</Chip>`
-        );
-
-        assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-default');
-        assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-outlined');
-        assert.dom('[data-test-id="button"]').doesNotHaveClass('chip-faded');
-      });
     });
 
     module('@intent', () => {
       test('it adds class for the an intent', async function (assert) {
         await render(
-          hbs`<Chip @intent="primary" data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @intent="primary" data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"]').hasClass('intent-primary');
@@ -108,7 +112,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
     module('@size', () => {
       test('it adds class size sm"', async function (assert) {
         await render(
-          hbs`<Chip @size="sm" data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @size="sm" data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"]').hasClass('chip-sm');
@@ -116,7 +122,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
 
       test('it adds class size lg', async function (assert) {
         await render(
-          hbs`<Chip @size="lg" data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @size="lg" data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"]').hasClass('chip-lg');
@@ -126,7 +134,9 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
     module('@withDot', () => {
       test('it adds dot when argument is passed in', async function (assert) {
         await render(
-          hbs`<Chip @withDot={{true}} data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @withDot={{true}} data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"] .chip-dot').exists();
@@ -135,8 +145,11 @@ module('Integration | Component | Chip | @frontile/buttons', function (hooks) {
 
     module('@onClose', () => {
       test('adds close button when onClose argument is passed in', async function (assert) {
+        const onClose = () => {};
         await render(
-          hbs`<Chip @onClose={{true}} data-test-id="button">My Chip</Chip>`
+          <template>
+            <Chip @onClose={{onClose}} data-test-id="button">My Chip</Chip>
+          </template>
         );
 
         assert.dom('[data-test-id="button"] .chip-close-button').exists();
diff --git a/test-app/tests/integration/components/buttons/close-button-test.ts b/test-app/tests/integration/components/buttons/close-button-test.gts
similarity index 55%
rename from test-app/tests/integration/components/buttons/close-button-test.ts
rename to test-app/tests/integration/components/buttons/close-button-test.gts
index 5f8829d9..50b8cdff 100644
--- a/test-app/tests/integration/components/buttons/close-button-test.ts
+++ b/test-app/tests/integration/components/buttons/close-button-test.gts
@@ -1,9 +1,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, RenderingTestContext } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { CloseButton } from '@frontile/buttons';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 registerCustomStyles({
   closeButton: tv({
@@ -24,7 +26,7 @@ registerCustomStyles({
     defaultVariants: {
       size: 'md'
     }
-  })
+  } as never)
 });
 
 module(
@@ -32,18 +34,27 @@ module(
   function (hooks) {
     setupRenderingTest(hooks);
 
-    test('it renders title', async function (this: RenderingTestContext, assert) {
-      await render(hbs`<CloseButton @title={{this.title}} />`);
+    test('it renders title', async function (assert) {
+      const title = cell('');
+      await render(
+        <template>
+          <div data-test-element><CloseButton @title={{title.current}} /></div>
+        </template>
+      );
+
+      assert.dom('[data-test-element]').hasText('Close');
 
-      assert.equal(this.element.textContent?.trim(), 'Close');
+      title.current = 'Fechar Menu';
+      await settled();
 
-      this.set('title', 'Fechar Menu');
-      assert.equal(this.element.textContent?.trim(), 'Fechar Menu');
+      assert.dom('[data-test-element]').hasText('Fechar Menu');
     });
 
     test('it allows to yield', async function (assert) {
       await render(
-        hbs`<CloseButton><div class="icon">Here is my icon</div></CloseButton>`
+        <template>
+          <CloseButton><div class="icon">Here is my icon</div></CloseButton>
+        </template>
       );
       assert.dom('.close-button .icon').exists();
 
@@ -52,34 +63,44 @@ module(
 
     test('it yields the icon classes', async function (assert) {
       await render(
-        hbs`<CloseButton as |class|><div class="icon">{{class}}</div></CloseButton>`
+        <template>
+          <CloseButton as |class|><div
+              class="icon"
+            >{{class}}</div></CloseButton>
+        </template>
       );
       assert.dom('.close-button .icon').hasText('close-button__icon');
     });
 
     test('it adds size classes', async function (assert) {
-      await render(hbs`<CloseButton @size={{this.size}} />`);
+      const size = cell<undefined | 'xs' | 'sm' | 'md' | 'lg' | 'xl'>();
+      await render(<template><CloseButton @size={{size.current}} /></template>);
 
       assert.dom('.close-button').hasClass('close-button--md');
 
-      this.set('size', 'xs');
+      size.current = 'xs';
+      await settled();
       assert.dom('.close-button').hasClass('close-button--xs');
 
-      this.set('size', 'sm');
+      size.current = 'sm';
+      await settled();
       assert.dom('.close-button').hasClass('close-button--sm');
 
-      this.set('size', 'md');
+      size.current = 'md';
+      await settled();
       assert.dom('.close-button').hasClass('close-button--md');
 
-      this.set('size', 'lg');
+      size.current = 'lg';
+      await settled();
       assert.dom('.close-button').hasClass('close-button--lg');
 
-      this.set('size', 'xl');
+      size.current = 'xl';
+      await settled();
       assert.dom('.close-button').hasClass('close-button--xl');
     });
 
     test('it allows to pass @class for component curlying', async function (assert) {
-      await render(hbs`<CloseButton @class="some-class" />`);
+      await render(<template><CloseButton @class="some-class" /></template>);
       assert.dom('.close-button').hasClass('some-class');
     });
   }
diff --git a/test-app/tests/integration/components/buttons/toggle-button-test.ts b/test-app/tests/integration/components/buttons/toggle-button-test.gts
similarity index 65%
rename from test-app/tests/integration/components/buttons/toggle-button-test.ts
rename to test-app/tests/integration/components/buttons/toggle-button-test.gts
index 2cc0a323..941fccae 100644
--- a/test-app/tests/integration/components/buttons/toggle-button-test.ts
+++ b/test-app/tests/integration/components/buttons/toggle-button-test.gts
@@ -1,9 +1,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { ToggleButton } from '@frontile/buttons';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 module(
   'Integration | Component | ToggleButton | @frontile/buttons',
@@ -39,7 +41,9 @@ module(
 
     test('it renders', async function (assert) {
       await render(
-        hbs`<ToggleButton data-test-id="button">My ToggleButton</ToggleButton>`
+        <template>
+          <ToggleButton data-test-id="button">My ToggleButton</ToggleButton>
+        </template>
       );
 
       assert.dom('[data-test-id="button"]').hasText('My ToggleButton');
@@ -47,13 +51,19 @@ module(
 
     module('@isSelected', () => {
       test('adds aria-pressed', async function (assert) {
-        this.set('isSelected', false);
+        const isSelected = cell(false);
         await render(
-          hbs`<ToggleButton @isSelected={{this.isSelected}} data-test-id="button">My ToggleButton</ToggleButton>`
+          <template>
+            <ToggleButton
+              @isSelected={{isSelected.current}}
+              data-test-id="button"
+            >My ToggleButton</ToggleButton>
+          </template>
         );
 
         assert.dom('[data-test-id="button"]').hasAria('pressed', 'false');
-        this.set('isSelected', true);
+        isSelected.current = true;
+        await settled();
 
         assert.dom('[data-test-id="button"]').hasAria('pressed', 'true');
       });
@@ -61,11 +71,19 @@ module(
 
     module('@onChange', () => {
       test('calls onChange argument', async function (assert) {
-        this.set('onChange', (val: boolean) => {
+        const onChange = (val: boolean) => {
           assert.equal(val, true);
-        });
+        };
         await render(
-          hbs`<ToggleButton @isSelected={{false}} @onChange={{this.onChange}} data-test-id="button">My ToggleButton</ToggleButton>`
+          <template>
+            <ToggleButton
+              @isSelected={{false}}
+              @onChange={{onChange}}
+              data-test-id="button"
+            >
+              My ToggleButton
+            </ToggleButton>
+          </template>
         );
         await click('[data-test-id="button"]');
 
@@ -77,7 +95,11 @@ module(
       module('@intent', () => {
         test('it adds class for the an intent', async function (assert) {
           await render(
-            hbs`<ToggleButton @intent="primary" data-test-id="button">My ToggleButton</ToggleButton>`
+            <template>
+              <ToggleButton @intent="primary" data-test-id="button">
+                My ToggleButton
+              </ToggleButton>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').hasClass('intent-primary');
@@ -87,7 +109,9 @@ module(
       module('@size', () => {
         test('it adds class size sm"', async function (assert) {
           await render(
-            hbs`<ToggleButton @size="sm" data-test-id="button">My ToggleButton</ToggleButton>`
+            <template>
+              <ToggleButton @size="sm" data-test-id="button">My ToggleButton</ToggleButton>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').hasClass('toggle-button-sm');
@@ -95,7 +119,9 @@ module(
 
         test('it adds class size lg', async function (assert) {
           await render(
-            hbs`<ToggleButton @size="lg" data-test-id="button">My ToggleButton</ToggleButton>`
+            <template>
+              <ToggleButton @size="lg" data-test-id="button">My ToggleButton</ToggleButton>
+            </template>
           );
 
           assert.dom('[data-test-id="button"]').hasClass('toggle-button-lg');
diff --git a/test-app/tests/integration/components/collections/dropdown-test.ts b/test-app/tests/integration/components/collections/dropdown-test.gts
similarity index 81%
rename from test-app/tests/integration/components/collections/dropdown-test.ts
rename to test-app/tests/integration/components/collections/dropdown-test.gts
index dcf03e08..723d4c30 100644
--- a/test-app/tests/integration/components/collections/dropdown-test.ts
+++ b/test-app/tests/integration/components/collections/dropdown-test.gts
@@ -1,9 +1,11 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render, triggerKeyEvent } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { Dropdown } from '@frontile/collections';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 module(
   'Integration | Component | Dropdown | @frontile/collections',
@@ -24,17 +26,17 @@ module(
 
     test('it renders the trigger and menu when opened', async function (assert) {
       const clickedOn: string[] = [];
-      this.set('onAction', function (key: string) {
+      const onAction = (key: string) => {
         clickedOn.push(key);
-      });
+      };
 
       await render(
-        hbs`
+        <template>
           <Dropdown as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
             <d.Menu
-              @onAction={{this.onAction}}
+              @onAction={{onAction}}
               @intent="primary"
               @disableTransitions={{true}}
               as |Item|
@@ -42,7 +44,8 @@ module(
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -60,18 +63,16 @@ module(
 
     test('it renders accessibility attributes', async function (assert) {
       await render(
-        hbs`
+        <template>
           <Dropdown as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
-            <d.Menu
-              @disableTransitions={{true}}
-              as |Item|
-            >
+            <d.Menu @disableTransitions={{true}} as |Item|>
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       assert
@@ -92,52 +93,52 @@ module(
     });
 
     test('it shows backdrop when @backdrop=none', async function (assert) {
-      this.set('backdrop', 'none');
+      const backdrop = cell<'none' | 'faded'>('none');
 
       await render(
-        hbs`
+        <template>
           <Dropdown as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
             <d.Menu
-              @backdrop={{this.backdrop}}
+              @backdrop={{backdrop.current}}
               @disableTransitions={{true}}
               as |Item|
             >
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       await click('[data-test-id="dropdown-trigger"]');
 
       assert.dom('.overlay__backdrop').doesNotExist();
 
-      this.set('backdrop', 'faded');
+      backdrop.current = 'faded';
+      await settled();
 
       assert.dom('.overlay__backdrop').exists();
     });
 
     test('on item click, closes menu, calls @didClose', async function (assert) {
       let calledClosed = false;
-      this.set('didClose', () => {
+      const didClose = () => {
         calledClosed = true;
-      });
+      };
 
       await render(
-        hbs`
-          <Dropdown @didClose={{this.didClose}} as |d|>
+        <template>
+          <Dropdown @didClose={{didClose}} as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
-            <d.Menu
-              @disableTransitions={{true}}
-              as |Item|
-            >
+            <d.Menu @disableTransitions={{true}} as |Item|>
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -151,18 +152,16 @@ module(
 
     test('on item click, does not close menu when @closeOnItemSelect=false', async function (assert) {
       await render(
-        hbs`
+        <template>
           <Dropdown @closeOnItemSelect={{false}} as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
-            <d.Menu
-              @disableTransitions={{true}}
-              as |Item|
-            >
+            <d.Menu @disableTransitions={{true}} as |Item|>
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -175,24 +174,22 @@ module(
 
     test('clicking outside closes menu', async function (assert) {
       let calledClosed = false;
-      this.set('didClose', () => {
+      const didClose = () => {
         calledClosed = true;
-      });
+      };
 
       await render(
-        hbs`
+        <template>
           <div id="outside" tabindex="0"></div>
-          <Dropdown @didClose={{this.didClose}} as |d|>
+          <Dropdown @didClose={{didClose}} as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
-            <d.Menu
-              @disableTransitions={{true}}
-              as |Item|
-            >
+            <d.Menu @disableTransitions={{true}} as |Item|>
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').doesNotExist();
@@ -206,18 +203,16 @@ module(
 
     test('on pressing arrow up/down key, opens the menu', async function (assert) {
       await render(
-        hbs`
+        <template>
           <Dropdown as |d|>
             <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>
 
-            <d.Menu
-              @disableTransitions={{true}}
-              as |Item|
-            >
+            <d.Menu @disableTransitions={{true}} as |Item|>
               <Item @key="profile">My Profile</Item>
               <Item @key="settings">Settings</Item>
             </d.Menu>
-          </Dropdown>`
+          </Dropdown>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').doesNotExist();
diff --git a/test-app/tests/integration/components/collections/listbox-test.ts b/test-app/tests/integration/components/collections/listbox-test.gts
similarity index 72%
rename from test-app/tests/integration/components/collections/listbox-test.ts
rename to test-app/tests/integration/components/collections/listbox-test.gts
index bd615211..d1a73fc8 100644
--- a/test-app/tests/integration/components/collections/listbox-test.ts
+++ b/test-app/tests/integration/components/collections/listbox-test.gts
@@ -1,10 +1,13 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render, triggerKeyEvent, fillIn } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
 import { modifier } from 'ember-modifier';
+import { Listbox, type ListboxSignature } from '@frontile/collections';
+import { array } from '@ember/helper';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 module(
   'Integration | Component | Listbox | @frontile/collections',
@@ -13,15 +16,15 @@ module(
 
     test('it render static items', async function (assert) {
       const clickedOn: string[] = [];
-      this.set('onAction', function (key: string) {
+      const onAction = (key: string) => {
         clickedOn.push(key);
-      });
+      };
 
       await render(
-        hbs`
+        <template>
           <Listbox
             @selectionMode="none"
-            @onAction={{this.onAction}}
+            @onAction={{onAction}}
             @disabledKeys={{(array "item-3" "item-4")}}
             as |l|
           >
@@ -48,7 +51,8 @@ module(
             >
               Item 5
             </l.Item>
-          </Listbox>`
+          </Listbox>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').exists();
@@ -92,26 +96,25 @@ module(
     });
 
     test('it render dynamic items without yield of item selectionMode = single / multiple', async function (assert) {
-      this.set('selectionMode', 'single');
-      this.set('allowEmpty', false);
-      this.set('animals', ['cheetah', 'crocodile', 'elephant']);
-      let selectedKeys: string[] = [];
-
-      this.set('selectedKeys', []);
-      this.set('onSelectionChange', (keys: string[]) => {
-        this.set('selectedKeys', keys);
-        selectedKeys = keys;
-      });
+      const selectionMode = cell<'single' | 'multiple' | 'none'>('single');
+      const allowEmpty = cell(false);
+      const animals = ['cheetah', 'crocodile', 'elephant'];
+      const selectedKeys = cell<string[]>([]);
+
+      const onSelectionChange = (keys: string[]) => {
+        selectedKeys.current = keys;
+      };
 
       await render(
-        hbs`
-        <Listbox
-          @allowEmpty={{this.allowEmpty}}
-          @selectionMode={{this.selectionMode}}
-          @items={{this.animals}}
-          @selectedKeys={{this.selectedKeys}}
-          @onSelectionChange={{this.onSelectionChange}}
-        />`
+        <template>
+          <Listbox
+            @allowEmpty={{allowEmpty.current}}
+            @selectionMode={{selectionMode.current}}
+            @items={{animals}}
+            @selectedKeys={{selectedKeys.current}}
+            @onSelectionChange={{onSelectionChange}}
+          />
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').exists();
@@ -123,16 +126,16 @@ module(
       // Selection Mode single
       await click('[data-key="cheetah"]');
 
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'cheetah');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'cheetah');
       assert.dom('[data-key="cheetah"]').hasAttribute('data-selected', 'true');
       assert
         .dom('[data-key="cheetah"] [data-test-id="listbox-item-selected-icon"]')
         .exists('should render icon on selected item');
 
       await click('[data-key="crocodile"]');
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'crocodile');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'crocodile');
       assert
         .dom('[data-key="crocodile"]')
         .hasAttribute('data-selected', 'true');
@@ -140,83 +143,89 @@ module(
 
       // Toggle when allowEmpty = false
       await click('[data-key="crocodile"]');
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'crocodile');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'crocodile');
 
       // Toggle when allowEmpty = true
-      this.set('allowEmpty', true);
+      allowEmpty.current = true;
+      await settled();
       await click('[data-key="crocodile"]');
-      assert.equal(selectedKeys.length, 0);
+      assert.equal(selectedKeys.current.length, 0);
 
       // Selection Mode multiple
-      this.set('selectionMode', 'multiple');
-      this.set('selectedKeys', []);
-      selectedKeys = [];
+      selectionMode.current = 'multiple';
+      selectedKeys.current = [];
+      selectedKeys.current = [];
+      await settled();
 
       await click('[data-key="elephant"]');
 
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'elephant');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'elephant');
       assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
 
       await click('[data-key="crocodile"]');
-      assert.equal(selectedKeys.length, 2);
-      assert.equal(selectedKeys[1], 'crocodile');
+      assert.equal(selectedKeys.current.length, 2);
+      assert.equal(selectedKeys.current[1], 'crocodile');
       assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
       assert
         .dom('[data-key="crocodile"]')
         .hasAttribute('data-selected', 'true');
 
       // Toggle when allowEmpty = false
-      this.set('allowEmpty', false);
+      allowEmpty.current = false;
+      await settled();
       await click('[data-key="crocodile"]');
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'elephant');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'elephant');
       assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
       assert
         .dom('[data-key="crocodile"]')
         .hasAttribute('data-selected', 'false');
 
       await click('[data-key="elephant"]');
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'elephant');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'elephant');
       assert.dom('[data-key="elephant"]').hasAttribute('data-selected', 'true');
 
       // Toggle when allowEmpty = true
-      this.set('allowEmpty', true);
+      allowEmpty.current = true;
+      await settled();
       await click('[data-key="elephant"]');
-      assert.equal(selectedKeys.length, 0);
+      assert.equal(selectedKeys.current.length, 0);
     });
 
     test('it render dynamic items yielding of item', async function (assert) {
-      this.set('selectionMode', 'single');
-      this.set('allowEmpty', false);
-      this.set('animals', [
+      const animals = [
         { key: 'cheetah-key', value: 'cheetah-value' },
         { key: 'crocodile-key', value: 'crocodile-value' },
         { key: 'elephant-key', value: 'elephant-value' }
-      ]);
+      ];
 
-      this.set('selectedKeys', []);
-      this.set('onSelectionChange', (keys: string[]) => {
-        this.set('selectedKeys', keys);
-      });
+      const selectionMode = cell<'single' | 'multiple' | 'none'>('single');
+      const allowEmpty = cell(false);
+      const selectedKeys = cell<string[]>([]);
+
+      const onSelectionChange = (keys: string[]) => {
+        selectedKeys.current = keys;
+      };
 
       await render(
-        hbs`
-        <Listbox
-          @allowEmpty={{this.allowEmpty}}
-          @selectionMode={{this.selectionMode}}
-          @items={{this.animals}}
-          @selectedKeys={{this.selectedKeys}}
-          @onSelectionChange={{this.onSelectionChange}}
-        >
-          <:item as |o|>
-            <o.Item @key={{o.item.key}}>
-              {{o.item.value}}
-            </o.Item>
-          </:item>
-        </Listbox>`
+        <template>
+          <Listbox
+            @allowEmpty={{allowEmpty.current}}
+            @selectionMode={{selectionMode.current}}
+            @items={{animals}}
+            @selectedKeys={{selectedKeys.current}}
+            @onSelectionChange={{onSelectionChange}}
+          >
+            <:item as |o|>
+              <o.Item @key={{o.item.key}}>
+                {{o.item.value}}
+              </o.Item>
+            </:item>
+          </Listbox>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').exists();
@@ -231,28 +240,28 @@ module(
     });
 
     test('keyboard navigation works', async function (assert) {
-      this.set('selectionMode', 'single');
-      this.set('allowEmpty', false);
-      this.set('animals', ['cheetah', 'crocodile', 'elephant']);
-      let selectedKeys: string[] = [];
-
-      this.set('selectedKeys', []);
-      this.set('onSelectionChange', (keys: string[]) => {
-        this.set('selectedKeys', keys);
-        selectedKeys = keys;
-      });
+      const animals = ['cheetah', 'crocodile', 'elephant'];
+
+      const selectionMode = cell<'single' | 'multiple' | 'none'>('single');
+      const allowEmpty = cell(false);
+      const selectedKeys = cell<string[]>([]);
+
+      const onSelectionChange = (keys: string[]) => {
+        selectedKeys.current = keys;
+      };
 
       await render(
-        hbs`
-        <Listbox
-          @isKeyboardEventsEnabled={{true}}
-          @allowEmpty={{this.allowEmpty}}
-          @selectionMode={{this.selectionMode}}
-          @items={{this.animals}}
-          @selectedKeys={{this.selectedKeys}}
-          @onSelectionChange={{this.onSelectionChange}}
-          @autoActivateMode="none"
-        />`
+        <template>
+          <Listbox
+            @isKeyboardEventsEnabled={{true}}
+            @allowEmpty={{allowEmpty.current}}
+            @selectionMode={{selectionMode.current}}
+            @items={{animals}}
+            @selectedKeys={{selectedKeys.current}}
+            @onSelectionChange={{onSelectionChange}}
+            @autoActivateMode="none"
+          />
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').exists();
@@ -287,8 +296,8 @@ module(
 
       // select active item
       await triggerKeyEvent('[data-test-id="listbox"]', 'keypress', 'Enter');
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'cheetah');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'cheetah');
 
       // search
       await triggerKeyEvent('[data-test-id="listbox"]', 'keypress', 'E');
@@ -317,15 +326,15 @@ module(
 
     test('it render item with blocks', async function (assert) {
       const clickedOn: string[] = [];
-      this.set('onAction', function (key: string) {
+      const onAction = (key: string) => {
         clickedOn.push(key);
-      });
+      };
 
       await render(
-        hbs`
+        <template>
           <Listbox
             @selectionMode="none"
-            @onAction={{this.onAction}}
+            @onAction={{onAction}}
             @disabledKeys={{(array "item-3" "item-4")}}
             as |l|
           >
@@ -346,7 +355,8 @@ module(
                 <div data-test-id="end">End content</div>
               </:end>
             </l.Item>
-          </Listbox>`
+          </Listbox>
+        </template>
       );
 
       assert.dom('[data-test-id="listbox"]').exists();
@@ -369,38 +379,36 @@ module(
     });
 
     test('automatically activate first item', async function (assert) {
-      this.set('autoActivateMode', 'first');
-      this.set('animals', ['cheetah', 'crocodile', 'elephant']);
+      const animals = cell<string[]>(['cheetah', 'crocodile', 'elephant']);
 
       await render(
-        hbs`
-        <Listbox
-          @items={{this.animals}}
-          @autoActivateMode={{this.autoActivateMode}}
-        />`
+        <template>
+          <Listbox @items={{animals.current}} @autoActivateMode="first" />
+        </template>
       );
       assert.dom('[data-key="cheetah"]').hasAttribute('data-active', 'true');
-      this.set('animals', ['crocodile', 'elephant']);
+      animals.current = ['crocodile', 'elephant'];
+      await settled();
 
       assert.dom('[data-key="crocodile"]').hasAttribute('data-active', 'true');
     });
 
     test('it calls onActiveItemChange when a new item is activated', async function (assert) {
       const activeItems: string[] = [];
-      this.set('onActiveItemChange', (key?: string) => {
+      const onActiveItemChange = (key?: string) => {
         activeItems.push(key || '');
-      });
-      this.set('autoActivateMode', 'first');
-      this.set('animals', ['cheetah', 'crocodile', 'elephant']);
+      };
+      const animals = ['cheetah', 'crocodile', 'elephant'];
 
       await render(
-        hbs`
-        <Listbox
-          @items={{this.animals}}
-          @autoActivateMode={{this.autoActivateMode}}
-          @isKeyboardEventsEnabled={{true}}
-          @onActiveItemChange={{this.onActiveItemChange}}
-        />`
+        <template>
+          <Listbox
+            @items={{animals}}
+            @autoActivateMode="first"
+            @isKeyboardEventsEnabled={{true}}
+            @onActiveItemChange={{onActiveItemChange}}
+          />
+        </template>
       );
 
       assert.dom('[data-key="cheetah"]').hasAttribute('data-active', 'true');
@@ -411,26 +419,24 @@ module(
     });
 
     test('it adds keyboard events to element passed in args', async function (assert) {
-      this.set('elementToAddKeyboardEvents', undefined);
+      const elementToAddKeyboardEvents = cell<HTMLElement>(undefined);
 
-      this.set(
-        'modifier',
-        modifier((element: HTMLElement) => {
-          this.set('elementToAddKeyboardEvents', element);
-        })
-      );
+      const myModifier = modifier((element: HTMLElement) => {
+        elementToAddKeyboardEvents.current = element;
+      });
 
-      this.set('animals', ['cheetah', 'crocodile', 'elephant']);
+      const animals = ['cheetah', 'crocodile', 'elephant'];
 
       await render(
-        hbs`
-        <input type="text" data-test-input {{this.modifier}} />
-        <Listbox
-          @items={{this.animals}}
-          @autoActivateMode="none"
-          @isKeyboardEventsEnabled={{true}}
-          @elementToAddKeyboardEvents={{this.elementToAddKeyboardEvents}}
-        />`
+        <template>
+          <input type="text" data-test-input {{myModifier}} />
+          <Listbox
+            @items={{animals}}
+            @autoActivateMode="none"
+            @isKeyboardEventsEnabled={{true}}
+            @elementToAddKeyboardEvents={{elementToAddKeyboardEvents.current}}
+          />
+        </template>
       );
 
       assert.dom('[data-key="cheetah"]').hasAttribute('data-active', 'false');
@@ -502,17 +508,18 @@ module(
           }) as never
         });
 
-        this.set('appearance', '');
-        this.set('intent', '');
-        this.set('selectedKeys', ['item-5']);
-        this.set('disabledKeys', ['item-6']);
+        const appearance =
+          cell<ListboxSignature<unknown>['Args']['appearance']>();
+        const intent = cell<ListboxSignature<unknown>['Args']['intent']>();
+        const selectedKeys = ['item-5'];
+        const disabledKeys = ['item-6'];
         await render(
-          hbs`
+          <template>
             <Listbox
-              @selectedKeys={{this.selectedKeys}}
-              @disabledKeys={{this.disabledKeys}}
-              @appearance={{this.appearance}}
-              @intent={{this.intent}}
+              @selectedKeys={{selectedKeys}}
+              @disabledKeys={{disabledKeys}}
+              @appearance={{appearance.current}}
+              @intent={{intent.current}}
               as |l|
             >
               <l.Item @key="item-1">Item 1</l.Item>
@@ -521,7 +528,8 @@ module(
               <l.Item @key="item-4" @withDivider={{true}}>Item 4</l.Item>
               <l.Item @key="item-5">Item 5</l.Item>
               <l.Item @key="item-6">Item 6</l.Item>
-            </Listbox>`
+            </Listbox>
+          </template>
         );
 
         // no appearance or intent set
@@ -529,8 +537,9 @@ module(
         assert.dom('[data-key="item-1"]').hasClass('intent-default');
 
         // appearance and intent set
-        this.set('appearance', 'faded');
-        this.set('intent', 'warning');
+        appearance.current = 'faded';
+        intent.current = 'warning';
+        await settled();
         assert.dom('[data-key="item-1"]').hasClass('appearance-faded');
         assert.dom('[data-key="item-1"]').hasClass('intent-warning');
 
diff --git a/test-app/tests/integration/components/forms/native-select-test.ts b/test-app/tests/integration/components/forms/native-select-test.gts
similarity index 61%
rename from test-app/tests/integration/components/forms/native-select-test.ts
rename to test-app/tests/integration/components/forms/native-select-test.gts
index 0ef70ec6..fb416387 100644
--- a/test-app/tests/integration/components/forms/native-select-test.ts
+++ b/test-app/tests/integration/components/forms/native-select-test.gts
@@ -1,11 +1,14 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import {
   selectOptionByKey,
   toggleOptionByKey
 } from '@frontile/forms/test-support';
+import { cell } from 'ember-resources';
+import { NativeSelect } from '@frontile/forms';
+import { array } from '@ember/helper';
+import { settled } from '@ember/test-helpers';
 
 module(
   'Integration | Component | NativeSelect | @frontile/forms',
@@ -32,21 +35,19 @@ module(
 
     test('it render static items', async function (assert) {
       let selectedKeys: string[] = [];
-      this.set('onSelectionChange', function (keys: string[]) {
+      const onSelectionChange = (keys: string[]) => {
         selectedKeys = keys;
-      });
+      };
 
       await render(
-        hbs`
+        <template>
           <NativeSelect
-            @onSelectionChange={{this.onSelectionChange}}
+            @onSelectionChange={{onSelectionChange}}
             @disabledKeys={{(array "item-3" "item-4")}}
             @allowEmpty={{true}}
             as |l|
           >
-            <l.Item
-              @key="item-1"
-            >
+            <l.Item @key="item-1">
               Item 1
             </l.Item>
             <l.Item @key="item-2">Item 2</l.Item>
@@ -55,7 +56,8 @@ module(
             <l.Item @key="item-5">
               Item 5
             </l.Item>
-          </NativeSelect>`
+          </NativeSelect>
+        </template>
       );
 
       assert.dom('[data-test-id="native-select"]').exists();
@@ -83,26 +85,25 @@ module(
     });
 
     test('it render dynamic items without yield of item selectionMode = single / multiple', async function (assert) {
-      this.set('selectionMode', 'single');
-      this.set('allowEmpty', false);
-      this.set('animals', ['cheetah', 'crocodile', 'elephant']);
-      let selectedKeys: string[] = [];
+      const selectionMode = cell<'single' | 'multiple'>('single');
+      const allowEmpty = cell(false);
+      const animals = ['cheetah', 'crocodile', 'elephant'];
+      const selectedKeys = cell<string[]>([]);
 
-      this.set('selectedKeys', []);
-      this.set('onSelectionChange', (keys: string[]) => {
-        this.set('selectedKeys', keys);
-        selectedKeys = keys;
-      });
+      const onSelectionChange = (keys: string[]) => {
+        selectedKeys.current = keys;
+      };
 
       await render(
-        hbs`
-        <NativeSelect
-          @allowEmpty={{this.allowEmpty}}
-          @selectionMode={{this.selectionMode}}
-          @items={{this.animals}}
-          @selectedKeys={{this.selectedKeys}}
-          @onSelectionChange={{this.onSelectionChange}}
-        />`
+        <template>
+          <NativeSelect
+            @allowEmpty={{allowEmpty.current}}
+            @selectionMode={{selectionMode.current}}
+            @items={{animals}}
+            @selectedKeys={{selectedKeys.current}}
+            @onSelectionChange={{onSelectionChange}}
+          />
+        </template>
       );
 
       assert.dom('[data-test-id="native-select"]').exists();
@@ -114,73 +115,76 @@ module(
       // Selection Mode single
       await selectOptionByKey('[data-test-id="native-select"]', 'cheetah');
 
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'cheetah');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'cheetah');
 
       await selectOptionByKey('[data-test-id="native-select"]', 'crocodile');
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'crocodile');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'crocodile');
 
-      // Slect empty option when  allowEmpty = true
-      this.set('allowEmpty', true);
+      // Slect empty option when allowEmpty = true
+      allowEmpty.current = true;
+      await settled();
       await selectOptionByKey('[data-test-id="native-select"]', '');
-      assert.equal(selectedKeys.length, 0);
+      assert.equal(selectedKeys.current.length, 0);
 
       // Selection Mode multiple
-      this.set('selectionMode', 'multiple');
-      this.set('selectedKeys', []);
-      selectedKeys = [];
+      selectionMode.current = 'multiple';
+      selectedKeys.current = [];
+      await settled();
 
       await selectOptionByKey('[data-test-id="native-select"]', 'elephant');
 
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'elephant');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'elephant');
 
       await selectOptionByKey('[data-test-id="native-select"]', 'crocodile');
-      assert.equal(selectedKeys.length, 2);
+      assert.equal(selectedKeys.current.length, 2);
 
-      assert.ok(selectedKeys.includes('elephant'));
-      assert.ok(selectedKeys.includes('crocodile'));
+      assert.ok(selectedKeys.current.includes('elephant'));
+      assert.ok(selectedKeys.current.includes('crocodile'));
 
       await toggleOptionByKey('[data-test-id="native-select"]', 'crocodile');
 
-      assert.equal(selectedKeys.length, 1);
-      assert.equal(selectedKeys[0], 'elephant');
+      assert.equal(selectedKeys.current.length, 1);
+      assert.equal(selectedKeys.current[0], 'elephant');
 
       await toggleOptionByKey('[data-test-id="native-select"]', 'elephant');
 
-      assert.equal(selectedKeys.length, 0);
+      assert.equal(selectedKeys.current.length, 0);
     });
 
     test('it render dynamic items yielding of item', async function (assert) {
-      this.set('selectionMode', 'single');
-      this.set('allowEmpty', false);
-      this.set('animals', [
+      const animals = [
         { key: 'cheetah-key', value: 'cheetah-value' },
         { key: 'crocodile-key', value: 'crocodile-value' },
         { key: 'elephant-key', value: 'elephant-value' }
-      ]);
+      ];
+
+      const selectionMode = cell<'single' | 'multiple'>('single');
+      const allowEmpty = cell(false);
+      const selectedKeys = cell<string[]>([]);
 
-      this.set('selectedKeys', []);
-      this.set('onSelectionChange', (keys: string[]) => {
-        this.set('selectedKeys', keys);
-      });
+      const onSelectionChange = (keys: string[]) => {
+        selectedKeys.current = keys;
+      };
 
       await render(
-        hbs`
-        <NativeSelect
-          @allowEmpty={{this.allowEmpty}}
-          @selectionMode={{this.selectionMode}}
-          @items={{this.animals}}
-          @selectedKeys={{this.selectedKeys}}
-          @onSelectionChange={{this.onSelectionChange}}
-        >
-          <:item as |o|>
-            <o.Item @key={{o.item.key}}>
-              {{o.item.value}}
-            </o.Item>
-          </:item>
-        </NativeSelect>`
+        <template>
+          <NativeSelect
+            @allowEmpty={{allowEmpty.current}}
+            @selectionMode={{selectionMode.current}}
+            @items={{animals}}
+            @selectedKeys={{selectedKeys.current}}
+            @onSelectionChange={{onSelectionChange}}
+          >
+            <:item as |o|>
+              <o.Item @key={{o.item.key}}>
+                {{o.item.value}}
+              </o.Item>
+            </:item>
+          </NativeSelect>
+        </template>
       );
 
       assert.dom('[data-test-id="native-select"]').exists();
@@ -196,18 +200,18 @@ module(
 
     test('it renders named blocks startContent and endContent', async function (assert) {
       const classes = { innerContainer: 'input-container' };
-      this.set('animals', ['tiger']);
-      this.set('classes', classes);
+      const animals = ['tiger'];
       await render(
-        hbs`
-        <NativeSelect
-          @items={{this.animals}}
-          @placeholder="Select an animal"
-          @classes={{this.classes}}
-        >
-          <:startContent>Start</:startContent>
-          <:endContent>End</:endContent>
-      </NativeSelect>`
+        <template>
+          <NativeSelect
+            @items={{animals}}
+            @placeholder="Select an animal"
+            @classes={{classes}}
+          >
+            <:startContent>Start</:startContent>
+            <:endContent>End</:endContent>
+          </NativeSelect>
+        </template>
       );
 
       assert.dom('.input-container div:first-child').exists();
diff --git a/test-app/tests/integration/components/notifications/notification-card-test.ts b/test-app/tests/integration/components/notifications/notification-card-test.gts
similarity index 67%
rename from test-app/tests/integration/components/notifications/notification-card-test.ts
rename to test-app/tests/integration/components/notifications/notification-card-test.gts
index b4cbeff4..2fccf669 100644
--- a/test-app/tests/integration/components/notifications/notification-card-test.ts
+++ b/test-app/tests/integration/components/notifications/notification-card-test.gts
@@ -1,11 +1,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click, triggerEvent } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-import { Notification, NotificationsService } from '@frontile/notifications';
+import {
+  Notification,
+  NotificationCard,
+  type NotificationsService
+} from '@frontile/notifications';
 import sinon from 'sinon';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 registerCustomStyles({
   notificationCard: tv({
@@ -47,26 +52,22 @@ registerCustomStyles({
   })
 });
 
-declare module '@ember/test-helpers' {
-  interface TestContext {
-    notification?: Notification;
-  }
-}
-
 module(
   'Integration | Component | @frontile/notifications/NotificationCard',
   function (hooks) {
     setupRenderingTest(hooks);
 
-    const template = hbs`
-    <NotificationCard
-      data-test-notification
-      @notification={{this.notification}}
-    />`;
+    const notification = cell<Notification>(new Notification({}, ''));
+    const template = <template>
+      <NotificationCard
+        data-test-notification
+        @placement="top-right"
+        @notification={{notification.current}}
+      />
+    </template>;
 
     test('it renders the notification content & close button', async function (assert) {
-      this;
-      this.set('notification', new Notification({}, 'My message'));
+      notification.current = new Notification({}, 'My message');
 
       await render(template);
 
@@ -77,7 +78,7 @@ module(
     });
 
     test('it renders the correct appearance', async function (assert) {
-      this.set('notification', new Notification({}, 'My message'));
+      notification.current = new Notification({}, 'My message');
 
       await render(template);
 
@@ -85,44 +86,38 @@ module(
         .dom('[data-test-notification]')
         .hasClass('notification-card--info');
 
-      this.set(
-        'notification',
-        new Notification({}, 'My message', {
-          appearance: 'success'
-        })
-      );
+      notification.current = new Notification({}, 'My message', {
+        appearance: 'success'
+      });
+      await settled();
+
       assert
         .dom('[data-test-notification]')
         .hasClass('notification-card--success');
 
-      this.set(
-        'notification',
-        new Notification({}, 'My message', {
-          appearance: 'warning'
-        })
-      );
+      notification.current = new Notification({}, 'My message', {
+        appearance: 'warning'
+      });
+      await settled();
+
       assert
         .dom('[data-test-notification]')
         .hasClass('notification-card--warning');
 
-      this.set(
-        'notification',
-        new Notification({}, 'My message', {
-          appearance: 'error'
-        })
-      );
+      notification.current = new Notification({}, 'My message', {
+        appearance: 'error'
+      });
+      await settled();
+
       assert
         .dom('[data-test-notification]')
         .hasClass('notification-card--error');
     });
 
     test('it does not render close button when allowClosing=false', async function (assert) {
-      this.set(
-        'notification',
-        new Notification({}, 'My message', {
-          allowClosing: false
-        })
-      );
+      notification.current = new Notification({}, 'My message', {
+        allowClosing: false
+      });
 
       await render(template);
 
@@ -134,17 +129,16 @@ module(
     test('it calls remove function from service on close-btn click', async function (assert) {
       assert.expect(1);
 
-      this.set(
-        'notification',
-        new Notification({}, 'My message', { transitionDuration: 1 })
-      );
+      notification.current = new Notification({}, 'My message', {
+        transitionDuration: 1
+      });
 
       const service = this.owner.lookup(
         'service:notifications'
       ) as NotificationsService;
 
-      sinon.stub(service, 'remove').callsFake((n: Notification): void => {
-        assert.equal(n, this.notification);
+      sinon.stub(service, 'remove').callsFake((n?: Notification): void => {
+        assert.equal(n, notification.current);
       });
 
       await render(template);
@@ -157,33 +151,30 @@ module(
     test('it renders and calls custom actions', async function (assert) {
       assert.expect(5);
 
-      this.set(
-        'notification',
-        new Notification({}, 'My message', {
-          transitionDuration: 1,
-          customActions: [
-            {
-              label: 'Undo',
-              onClick: () => {
-                assert.ok(true);
-              }
-            },
-            {
-              label: 'Ok',
-              onClick: () => {
-                assert.ok(true);
-              }
+      notification.current = new Notification({}, 'My message', {
+        transitionDuration: 1,
+        customActions: [
+          {
+            label: 'Undo',
+            onClick: () => {
+              assert.ok(true);
             }
-          ]
-        })
-      );
+          },
+          {
+            label: 'Ok',
+            onClick: () => {
+              assert.ok(true);
+            }
+          }
+        ]
+      });
 
       const service = this.owner.lookup(
         'service:notifications'
       ) as NotificationsService;
 
-      sinon.stub(service, 'remove').callsFake((n: Notification): void => {
-        assert.equal(n, this.notification);
+      sinon.stub(service, 'remove').callsFake((n?: Notification): void => {
+        assert.equal(n, notification.current);
       });
 
       await render(template);
@@ -214,13 +205,12 @@ module(
     test('it pauses/resumes the timer on mouseenter/mouseleave', async function (assert) {
       assert.expect(2);
 
-      this.set(
-        'notification',
-        new Notification({}, 'My message', { transitionDuration: 1 })
-      );
+      notification.current = new Notification({}, 'My message', {
+        transitionDuration: 1
+      });
 
       // @ts-ignore
-      this.notification.timer = {
+      notification.current.timer = {
         pause() {
           assert.ok('should have paused');
         },
diff --git a/test-app/tests/integration/components/notifications/notifications-container-test.ts b/test-app/tests/integration/components/notifications/notifications-container-test.gts
similarity index 78%
rename from test-app/tests/integration/components/notifications/notifications-container-test.ts
rename to test-app/tests/integration/components/notifications/notifications-container-test.gts
index 6d33bd63..48f94163 100644
--- a/test-app/tests/integration/components/notifications/notifications-container-test.ts
+++ b/test-app/tests/integration/components/notifications/notifications-container-test.gts
@@ -1,13 +1,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import {
-  NotificationsService,
-  NotificationOptions
+  NotificationsContainer,
+  type NotificationsService,
+  type NotificationOptions,
+  type NotificationsContainerSignature
 } from '@frontile/notifications';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { cell } from 'ember-resources';
+import { settled } from '@ember/test-helpers';
 
 registerCustomStyles({
   notificationsContainer: tv({
@@ -38,11 +41,15 @@ module(
       preserve: true
     };
 
-    const template = hbs`
-    <NotificationsContainer
-      @placement={{this.placement}}
-      data-test-notifications
-    />`;
+    const placement =
+      cell<NotificationsContainerSignature['Args']['placement']>();
+
+    const template = <template>
+      <NotificationsContainer
+        @placement={{placement.current}}
+        data-test-notifications
+      />
+    </template>;
 
     test('it does not render if there are no notifications', async function (assert) {
       await render(template);
@@ -70,7 +77,7 @@ module(
         options
       );
 
-      this.set('placement', undefined);
+      placement.current = undefined;
 
       await render(template);
 
@@ -78,32 +85,38 @@ module(
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--bottom-right');
 
-      this.set('placement', 'top-left');
+      placement.current = 'top-left';
+      await settled();
       assert
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--top-left');
 
-      this.set('placement', 'top-center');
+      placement.current = 'top-center';
+      await settled();
       assert
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--top-center');
 
-      this.set('placement', 'top-right');
+      placement.current = 'top-right';
+      await settled();
       assert
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--top-right');
 
-      this.set('placement', 'bottom-left');
+      placement.current = 'bottom-left';
+      await settled();
       assert
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--bottom-left');
 
-      this.set('placement', 'bottom-center');
+      placement.current = 'bottom-center';
+      await settled();
       assert
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--bottom-center');
 
-      this.set('placement', 'bottom-right');
+      placement.current = 'bottom-right';
+      await settled();
       assert
         .dom('[data-test-notifications]')
         .hasClass('notifications-container--bottom-right');
diff --git a/test-app/tests/integration/components/buttons/progress-bar-test.ts b/test-app/tests/integration/components/status/progress-bar-test.gts
similarity index 68%
rename from test-app/tests/integration/components/buttons/progress-bar-test.ts
rename to test-app/tests/integration/components/status/progress-bar-test.gts
index 13fb9577..e1b5958f 100644
--- a/test-app/tests/integration/components/buttons/progress-bar-test.ts
+++ b/test-app/tests/integration/components/status/progress-bar-test.gts
@@ -1,9 +1,10 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
 import { registerCustomStyles } from '@frontile/theme';
 import { tv } from 'tailwind-variants';
+import { ProgressBar } from '@frontile/status';
+import { hash } from '@ember/helper';
 
 registerCustomStyles({
   progressBar: tv({
@@ -47,12 +48,14 @@ registerCustomStyles({
 });
 
 module(
-  'Integration | Component | ProgressBar | @frontile/progress-bar',
+  'Integration | Component | ProgressBar | @frontile/status',
   function (hooks) {
     setupRenderingTest(hooks);
 
     test('it renders', async function (assert) {
-      await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+      await render(
+        <template><ProgressBar data-test-id="progress-bar" /></template>
+      );
       assert.dom('[data-test-id="progress-bar"]').exists();
       assert.dom('[data-test-id="progress-bar"] [role="progressbar"]').exists();
     });
@@ -61,7 +64,9 @@ module(
       module('intent', () => {
         test('it adds class for the intent', async function (assert) {
           await render(
-            hbs`<ProgressBar @intent="primary" data-test-id="progress-bar" />`
+            <template>
+              <ProgressBar @intent="primary" data-test-id="progress-bar" />
+            </template>
           );
 
           assert
@@ -70,7 +75,9 @@ module(
         });
 
         test('it adds class for the default intent', async function (assert) {
-          await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+          await render(
+            <template><ProgressBar data-test-id="progress-bar" /></template>
+          );
 
           assert
             .dom('[data-test-id="progress-bar"] > div.pb-base')
@@ -80,7 +87,9 @@ module(
 
       module('sizes', () => {
         test('it adds class for default size"', async function (assert) {
-          await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+          await render(
+            <template><ProgressBar data-test-id="progress-bar" /></template>
+          );
 
           assert
             .dom('[data-test-id="progress-bar"] > div.pb-base')
@@ -89,7 +98,9 @@ module(
 
         test('it adds class size xs"', async function (assert) {
           await render(
-            hbs`<ProgressBar @size="xs" data-test-id="progress-bar" />`
+            <template>
+              <ProgressBar @size="xs" data-test-id="progress-bar" />
+            </template>
           );
 
           assert
@@ -99,7 +110,9 @@ module(
 
         test('it adds class size lg', async function (assert) {
           await render(
-            hbs`<ProgressBar @size="lg" data-test-id="progress-bar" />`
+            <template>
+              <ProgressBar @size="lg" data-test-id="progress-bar" />
+            </template>
           );
 
           assert
@@ -110,7 +123,9 @@ module(
 
       module('radius', () => {
         test('it adds class default radius size sm"', async function (assert) {
-          await render(hbs`<ProgressBar data-test-id="progress-bar" />`);
+          await render(
+            <template><ProgressBar data-test-id="progress-bar" /></template>
+          );
 
           assert
             .dom('[data-test-id="progress-bar"] > div.pb-base')
@@ -119,7 +134,9 @@ module(
 
         test('it adds class radius size lg"', async function (assert) {
           await render(
-            hbs`<ProgressBar @radius="lg" data-test-id="progress-bar" />`
+            <template>
+              <ProgressBar @radius="lg" data-test-id="progress-bar" />
+            </template>
           );
 
           assert
@@ -129,7 +146,9 @@ module(
 
         test('it adds class radius full', async function (assert) {
           await render(
-            hbs`<ProgressBar @radius="full" data-test-id="progress-bar" />`
+            <template>
+              <ProgressBar @radius="full" data-test-id="progress-bar" />
+            </template>
           );
 
           assert
@@ -141,7 +160,12 @@ module(
       module('is-indeterminate', () => {
         test('it adds class for indeterminate state "', async function (assert) {
           await render(
-            hbs`<ProgressBar @isIndeterminate={{true}} data-test-id="progress-bar" />`
+            <template>
+              <ProgressBar
+                @isIndeterminate={{true}}
+                data-test-id="progress-bar"
+              />
+            </template>
           );
 
           assert
@@ -156,7 +180,9 @@ module(
     module('progress value', () => {
       test('it renders value and arias', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar" @progress={{50}} />`
+          <template>
+            <ProgressBar data-test-id="progress-bar" @progress={{50}} />
+          </template>
         );
 
         const selector = '[data-test-id="progress-bar"] div.pb-progress';
@@ -172,7 +198,14 @@ module(
 
       test('it interpolates values', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar" @progress={{20}} @minValue={{10}} @maxValue={{30}} />`
+          <template>
+            <ProgressBar
+              data-test-id="progress-bar"
+              @progress={{20}}
+              @minValue={{10}}
+              @maxValue={{30}}
+            />
+          </template>
         );
 
         const selector = '[data-test-id="progress-bar"] div.pb-progress';
@@ -189,7 +222,13 @@ module(
     module('progress label', () => {
       test('it renders label and arias', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar" @progress={{50}} @label="Progress" />`
+          <template>
+            <ProgressBar
+              data-test-id="progress-bar"
+              @progress={{50}}
+              @label="Progress"
+            />
+          </template>
         );
 
         assert
@@ -206,7 +245,14 @@ module(
 
       test('it renders value label', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar" @progress={{50}} @label="Progress" @valueLabel="value 2/4" />`
+          <template>
+            <ProgressBar
+              data-test-id="progress-bar"
+              @progress={{50}}
+              @label="Progress"
+              @valueLabel="value 2/4"
+            />
+          </template>
         );
         assert
           .dom('[data-test-id="progress-bar"] div.pb-label > div')
@@ -215,10 +261,14 @@ module(
 
       test('it formats value label', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar"
-                @progress={{50}} @label="Progress"
-                @formatOptions={{(hash style='currency' currency='USD')}}
-              />`
+          <template>
+            <ProgressBar
+              data-test-id="progress-bar"
+              @progress={{50}}
+              @label="Progress"
+              @formatOptions={{(hash style="currency" currency="USD")}}
+            />
+          </template>
         );
         assert
           .dom('[data-test-id="progress-bar"] div.pb-label > div')
@@ -227,13 +277,16 @@ module(
 
       test('it formats value label interpolated', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar"
-                @progress={{20}}
-                @label="Progress"
-                @minValue={{10}}
-                @maxValue={{30}}
-                @formatOptions={{(hash style='currency' currency='USD')}}
-              />`
+          <template>
+            <ProgressBar
+              data-test-id="progress-bar"
+              @progress={{20}}
+              @label="Progress"
+              @minValue={{10}}
+              @maxValue={{30}}
+              @formatOptions={{(hash style="currency" currency="USD")}}
+            />
+          </template>
         );
         assert
           .dom('[data-test-id="progress-bar"] div.pb-label > div')
@@ -242,11 +295,14 @@ module(
 
       test('it hides value label if showValueLabel false', async function (assert) {
         await render(
-          hbs`<ProgressBar data-test-id="progress-bar"
-                @progress={{20}}
-                @label="Progress"
-                @showValueLabel={{false}}
-              />`
+          <template>
+            <ProgressBar
+              data-test-id="progress-bar"
+              @progress={{20}}
+              @label="Progress"
+              @showValueLabel={{false}}
+            />
+          </template>
         );
         assert
           .dom('[data-test-id="progress-bar"] div.pb-label > div')
diff --git a/test-app/tests/integration/components/utilities/collapsible-test.ts b/test-app/tests/integration/components/utilities/collapsible-test.gts
similarity index 77%
rename from test-app/tests/integration/components/utilities/collapsible-test.ts
rename to test-app/tests/integration/components/utilities/collapsible-test.gts
index 09c5e411..67abdf50 100644
--- a/test-app/tests/integration/components/utilities/collapsible-test.ts
+++ b/test-app/tests/integration/components/utilities/collapsible-test.gts
@@ -1,7 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, settled } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { Collapsible } from '@frontile/utilities';
+import { cell } from 'ember-resources';
 
 module(
   'Integration | Component | @frontile/utilities/Collapsible',
@@ -9,14 +10,13 @@ module(
     setupRenderingTest(hooks);
 
     test('renders content and starts closed', async function (assert) {
-      this.set('isOpen', false);
+      const isOpen = cell(false);
       await render(
-        hbs`<Collapsible
-            @isOpen={{this.isOpen}}
-            data-test-id="collapsible"
-          >
+        <template>
+          <Collapsible @isOpen={{isOpen.current}} data-test-id="collapsible">
             Content
-          </Collapsible>`
+          </Collapsible>
+        </template>
       );
 
       assert.dom('[data-test-id=collapsible]').hasText('Content');
@@ -26,14 +26,13 @@ module(
     });
 
     test('renders content and starts open', async function (assert) {
-      this.set('isOpen', true);
+      const isOpen = cell(true);
       await render(
-        hbs`<Collapsible
-            @isOpen={{this.isOpen}}
-            data-test-id="collapsible"
-          >
+        <template>
+          <Collapsible @isOpen={{isOpen.current}} data-test-id="collapsible">
             Content
-          </Collapsible>`
+          </Collapsible>
+        </template>
       );
 
       assert.dom('[data-test-id=collapsible]').hasText('Content');
@@ -47,17 +46,16 @@ module(
     });
 
     test('expands content when opened; closes content when closed', async function (assert) {
-      this.set('isOpen', false);
+      const isOpen = cell(false);
       await render(
-        hbs`<Collapsible
-            @isOpen={{this.isOpen}}
-            data-test-id="collapsible"
-          >
+        <template>
+          <Collapsible @isOpen={{isOpen.current}} data-test-id="collapsible">
             Content
-          </Collapsible>`
+          </Collapsible>
+        </template>
       );
 
-      this.set('isOpen', true);
+      isOpen.current = true;
       await settled();
 
       assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
@@ -69,7 +67,7 @@ module(
         .dom('[data-test-id=collapsible]')
         .doesNotHaveStyle({ height: '0px' });
 
-      this.set('isOpen', false);
+      isOpen.current = false;
       await settled();
 
       assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '0' });
@@ -78,15 +76,17 @@ module(
     });
 
     test('renders initial height when set', async function (assert) {
-      this.set('isOpen', false);
+      const isOpen = cell(false);
       await render(
-        hbs`<Collapsible
-            @isOpen={{this.isOpen}}
+        <template>
+          <Collapsible
+            @isOpen={{isOpen.current}}
             @initialHeight="2px"
             data-test-id="collapsible"
           >
             Content
-          </Collapsible>`
+          </Collapsible>
+        </template>
       );
 
       assert.dom('[data-test-id=collapsible]').hasText('Content');
@@ -94,7 +94,7 @@ module(
       assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
       assert.dom('[data-test-id=collapsible]').hasStyle({ overflow: 'hidden' });
 
-      this.set('isOpen', true);
+      isOpen.current = true;
       await settled();
 
       assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
@@ -106,7 +106,7 @@ module(
         .dom('[data-test-id=collapsible]')
         .doesNotHaveStyle({ height: '2px' });
 
-      this.set('isOpen', false);
+      isOpen.current = false;
       await settled();
 
       assert.dom('[data-test-id=collapsible]').hasStyle({ opacity: '1' });
diff --git a/test-app/tests/integration/components/utilities/visually-hidden-test.gts b/test-app/tests/integration/components/utilities/visually-hidden-test.gts
new file mode 100644
index 00000000..fdc7c246
--- /dev/null
+++ b/test-app/tests/integration/components/utilities/visually-hidden-test.gts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { VisuallyHidden } from '@frontile/utilities';
+
+module(
+  'Integration | Component | @frontile/utilities/VisuallyHidden',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+      await render(
+        <template>
+          <VisuallyHidden data-test-id="my-element">
+            This text will be visually hidden
+          </VisuallyHidden>
+        </template>
+      );
+
+      assert
+        .dom('[data-test-id="my-element"]')
+        .hasText('This text will be visually hidden');
+      assert.dom('[data-test-id="my-element"]').hasClass('sr-only');
+    });
+  }
+);
diff --git a/test-app/tests/integration/components/utilities/visually-hidden-test.ts b/test-app/tests/integration/components/utilities/visually-hidden-test.ts
deleted file mode 100644
index 39f420c2..00000000
--- a/test-app/tests/integration/components/utilities/visually-hidden-test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, RenderingTestContext } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module(
-  'Integration | Component | @frontile/utilities/VisuallyHidden',
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    test('it renders', async function (this: RenderingTestContext, assert) {
-      await render(hbs`
-      <VisuallyHidden data-test-id="my-element">
-        This text will be visually hidden
-      </VisuallyHidden>
-    `);
-
-      assert.equal(
-        this.element.textContent?.trim(),
-        'This text will be visually hidden'
-      );
-      assert.dom('[data-test-id="my-element"]').hasClass('sr-only');
-    });
-  }
-);