diff --git a/addon/components/au-hr.gjs b/addon/components/au-hr.gts
similarity index 62%
rename from addon/components/au-hr.gjs
rename to addon/components/au-hr.gts
index 168407f7c..d7c1506e0 100644
--- a/addon/components/au-hr.gjs
+++ b/addon/components/au-hr.gts
@@ -1,6 +1,13 @@
 import Component from '@glimmer/component';
 
-export default class AuHr extends Component {
+export interface AuHrSignature {
+  Args: {
+    size?: 'large' | 'huge';
+  };
+  Element: HTMLHRElement;
+}
+
+export default class AuHr extends Component<AuHrSignature> {
   get size() {
     if (this.args.size == 'large') return 'au-c-hr--large';
     if (this.args.size == 'huge') return 'au-c-hr--huge';
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 788ee07d1..cb2c377d4 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -13,6 +13,7 @@ import type AuCheckboxGroup from '@appuniversum/ember-appuniversum/components/au
 import type AuContentHeader from '@appuniversum/ember-appuniversum/components/au-content-header';
 import type AuContent from '@appuniversum/ember-appuniversum/components/au-content';
 import type AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
+import type AuHr from '@appuniversum/ember-appuniversum/components/au-hr';
 import type AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
 import type AuInput from '@appuniversum/ember-appuniversum/components/au-input';
 import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
@@ -40,6 +41,7 @@ export default interface AppuniversumRegistry {
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
+  AuHr: typeof AuHr;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;
   AuLinkExternal: typeof AuLinkExternal;
diff --git a/tests/integration/components/au-hr-test.gts b/tests/integration/components/au-hr-test.gts
new file mode 100644
index 000000000..51766208a
--- /dev/null
+++ b/tests/integration/components/au-hr-test.gts
@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuHr from '@appuniversum/ember-appuniversum/components/au-hr';
+
+module('Integration | Component | au-hr', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it passes through extra attributes', async function (assert) {
+    await render(<template><AuHr data-test-hr /></template>);
+
+    assert.dom('[data-test-hr]').exists();
+  });
+});
diff --git a/tests/integration/components/au-hr-test.js b/tests/integration/components/au-hr-test.js
deleted file mode 100644
index 084117f2a..000000000
--- a/tests/integration/components/au-hr-test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | au-hr', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<AuHr />`);
-
-    assert.dom(this.element).hasText('');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 977bb5a2f..a778aa075 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -107,6 +107,12 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-date-input]').exists();
   });
 
+  test('`<AuHr>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuHr data-test-hr />`);
+
+    assert.dom('[data-test-hr]').exists();
+  });
+
   test('`<AuIcon>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuIcon data-test-icon @icon="test" />`);