From 6459205df4b308c724e869551a3fc837b1e790f5 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 22 Feb 2024 16:10:49 +0100
Subject: [PATCH 01/11] Add Glint support to the `AuFileCard` component

---
 .../{au-file-card.gjs => au-file-card.gts}    | 19 ++++-
 addon/template-registry.ts                    |  2 +
 ...ile-card-test.js => au-file-card-test.gts} | 73 ++++++++++++-------
 .../integration/components/loose-mode-test.ts |  6 ++
 4 files changed, 71 insertions(+), 29 deletions(-)
 rename addon/components/{au-file-card.gjs => au-file-card.gts} (79%)
 rename tests/integration/components/{au-file-card-test.js => au-file-card-test.gts} (50%)

diff --git a/addon/components/au-file-card.gjs b/addon/components/au-file-card.gts
similarity index 79%
rename from addon/components/au-file-card.gjs
rename to addon/components/au-file-card.gts
index 24aa3fcf5..cc3ae0ef3 100644
--- a/addon/components/au-file-card.gjs
+++ b/addon/components/au-file-card.gts
@@ -1,9 +1,20 @@
-import { AuHeading, AuIcon } from '@appuniversum/ember-appuniversum';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
+import AuHeading from './au-heading';
+import AuIcon from './au-icon';
 
-export default class AuFileCard extends Component {
+export interface AuFileCardSignature {
+  Args: {
+    filename: string;
+    fileSize?: string;
+    downloadLink?: string;
+    onDelete?: () => void;
+  };
+  Element: HTMLElement;
+}
+
+export default class AuFileCard extends Component<AuFileCardSignature> {
   get isRemovable() {
     return typeof this.args.onDelete === 'function';
   }
@@ -16,9 +27,9 @@ export default class AuFileCard extends Component {
   }
 
   @action
-  delete(event) {
+  delete(event: Event) {
     event.preventDefault();
-    this.args.onDelete();
+    this.args.onDelete?.();
   }
 
   <template>
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 93edd2135..d31a61bd9 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 AuFileCard from '@appuniversum/ember-appuniversum/components/au-file-card';
 import type AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
 import type AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
 import type AuHelpText from '@appuniversum/ember-appuniversum/components/au-help-text';
@@ -44,6 +45,7 @@ export default interface AppuniversumRegistry {
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
+  AuFileCard: typeof AuFileCard;
   AuFormRow: typeof AuFormRow;
   AuHeading: typeof AuHeading;
   AuHelpText: typeof AuHelpText;
diff --git a/tests/integration/components/au-file-card-test.js b/tests/integration/components/au-file-card-test.gts
similarity index 50%
rename from tests/integration/components/au-file-card-test.js
rename to tests/integration/components/au-file-card-test.gts
index 505b58fd5..73d0108d4 100644
--- a/tests/integration/components/au-file-card-test.js
+++ b/tests/integration/components/au-file-card-test.gts
@@ -1,5 +1,7 @@
+import AuFileCard from '@appuniversum/ember-appuniversum/components/au-file-card';
+import { settled } from '@ember/test-helpers';
 import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { tracked } from '@glimmer/tracking';
 import { setupRenderingTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 
@@ -10,36 +12,43 @@ const FILE_CARD = {
   DOWNLOAD: '[data-test-file-card-download]',
 };
 
+class TestState {
+  @tracked downloadLink?: string;
+  @tracked handleDeletion?: () => void;
+}
+
 module('Integration | Component | au-file-card', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders a basic card', async function (assert) {
-    await render(hbs`
-      <AuFileCard
-        @filename="test.txt"
-        @fileSize="2kb"
-      />
-    `);
+    await render(
+      <template><AuFileCard @filename="test.txt" @fileSize="2kb" /></template>,
+    );
 
     assert.dom(FILE_CARD.FILENAME).containsText('test.txt');
     assert.dom(FILE_CARD.FILE_SIZE).containsText('2kb');
   });
 
   test('it shows a download link if it is provided as an argument', async function (assert) {
-    await render(hbs`
-      <AuFileCard
-        @filename="test.txt"
-        @fileSize="2kb"
-        @downloadLink={{this.downloadLink}}
-      />
-    `);
+    const state = new TestState();
+    await render(
+      <template>
+        <AuFileCard
+          @filename="test.txt"
+          @fileSize="2kb"
+          @downloadLink={{state.downloadLink}}
+        />
+      </template>,
+    );
 
     assert.dom(FILE_CARD.DOWNLOAD).doesNotExist();
 
-    this.set('downloadLink', '');
+    state.downloadLink = '';
+    await settled();
     assert.dom(FILE_CARD.DOWNLOAD).doesNotExist();
 
-    this.set('downloadLink', 'https://foo.bar/test.txt');
+    state.downloadLink = 'https://foo.bar/test.txt';
+    await settled();
     assert
       .dom(FILE_CARD.DOWNLOAD)
       .hasTagName('a')
@@ -48,22 +57,36 @@ module('Integration | Component | au-file-card', function (hooks) {
   });
 
   test('it shows a delete button if a handler was passed in', async function (assert) {
-    await render(hbs`
-      <AuFileCard
-        @filename="test.txt"
-        @fileSize="2kb"
-        @onDelete={{this.handleDeletion}}
-      />
-    `);
+    const state = new TestState();
+    await render(
+      <template>
+        <AuFileCard
+          @filename="test.txt"
+          @fileSize="2kb"
+          @onDelete={{state.handleDeletion}}
+        />
+      </template>,
+    );
 
     assert.dom(FILE_CARD.DELETE).doesNotExist();
 
-    this.set('handleDeletion', () => {
+    state.handleDeletion = () => {
       assert.step('handler was called');
-    });
+    };
+    await settled();
     assert.dom(FILE_CARD.DELETE).exists();
 
     await click(FILE_CARD.DELETE);
     assert.verifySteps(['handler was called']);
   });
+
+  test('it accepts extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuFileCard @filename="test.txt" @fileSize="2kb" data-test-file-card />
+      </template>,
+    );
+
+    assert.dom('[data-test-file-card]').exists();
+  });
 });
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 7ab7ecf8c..bce9073f2 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('`<AuFileCard>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuFileCard @filename="test.txt" data-test-file-card />`);
+
+    assert.dom('[data-test-file-card]').exists();
+  });
+
   test('`<AuFormRow>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuFormRow data-test-form-row />`);
 

From 36538dcd85885d7429162c3475b995f5bf70e1eb Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 22 Feb 2024 17:52:10 +0100
Subject: [PATCH 02/11] Add Glint support to the `AuFileUpload` component

---
 ...{au-file-upload.gjs => au-file-upload.gts} | 129 ++++++++++++------
 addon/template-registry.ts                    |   2 +
 .../components/au-file-upload-test.gts        |  14 ++
 .../integration/components/loose-mode-test.ts |   6 +
 ...ype-test.js => is-valid-file-type-test.ts} |   6 +-
 5 files changed, 111 insertions(+), 46 deletions(-)
 rename addon/components/{au-file-upload.gjs => au-file-upload.gts} (63%)
 create mode 100644 tests/integration/components/au-file-upload-test.gts
 rename tests/unit/utils/{is-valid-file-type-test.js => is-valid-file-type-test.ts} (96%)

diff --git a/addon/components/au-file-upload.gjs b/addon/components/au-file-upload.gts
similarity index 63%
rename from addon/components/au-file-upload.gjs
rename to addon/components/au-file-upload.gts
index 5fb9bf202..f75b5d87d 100644
--- a/addon/components/au-file-upload.gjs
+++ b/addon/components/au-file-upload.gts
@@ -1,17 +1,51 @@
-import { AuAlert, AuHelpText, AuIcon } from '@appuniversum/ember-appuniversum';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
-import perform from 'ember-concurrency/helpers/perform';
 import FileDropzone from 'ember-file-upload/components/file-dropzone';
 import fileQueue from 'ember-file-upload/helpers/file-queue';
+import type { FileQueueService, UploadFile } from 'ember-file-upload';
+import AuAlert from './au-alert';
+import AuHelpText from './au-help-text';
+import AuIcon from './au-icon';
+
+export interface AuFileUploadSignature {
+  Args: {
+    accept?: string;
+    endPoint?: string;
+    helpTextDragDrop?: string;
+    helpTextFileNotSupported?: string;
+    maxFileSizeMB?: number;
+    multiple?: boolean;
+    onFinishUpload?: (uploadedFile: number, queueInfo: QueueInfo) => void;
+    onQueueUpdate?: (queueInfo: QueueInfo) => void;
+    title?: string;
+  };
+  // ember-file-upload doesn't seem to expose the signature of the FileDropzone component
+  // We just hardcode what they have defined in the addon for now.
+  Element: HTMLElement;
+}
+
+export type QueueInfo = {
+  isQueueEmpty: boolean;
+};
+
+// A simpler version of the File and UploadFile types
+type BasicFile = {
+  name: string;
+  type: string;
+};
+
+type UploadError = {
+  filename: string;
+  error?: string;
+};
 
-export default class AuFileUpload extends Component {
-  @service fileQueue;
-  @tracked uploadErrorData = [];
+export default class AuFileUpload extends Component<AuFileUploadSignature> {
+  @service declare fileQueue: FileQueueService;
+  @tracked uploadErrorData: UploadError[] = [];
 
   get uploadingMsg() {
     return `Bezig met het opladen van ${this.queue.files.length} bestand(en). (${this.queue.progress}%)`;
@@ -55,37 +89,43 @@ export default class AuFileUpload extends Component {
     return this.uploadErrorData.length > 0;
   }
 
-  @task
-  *upload(file) {
+  @action
+  upload(file: UploadFile): void | undefined {
+    this.uploadTask.perform(file);
+  }
+
+  uploadTask = task(async (file: UploadFile) => {
     this.resetErrors();
-    let uploadedFile = yield this.uploadFileTask.perform(file);
+    const uploadedFile = await this.uploadFileTask.perform(file);
 
     this.notifyQueueUpdate();
 
     if (uploadedFile && this.args.onFinishUpload)
       this.args.onFinishUpload(uploadedFile, this.calculateQueueInfo());
-  }
+  });
 
-  @task({ enqueue: true, maxConcurrency: 3 })
-  *uploadFileTask(file) {
-    this.notifyQueueUpdate();
-    try {
-      const response = yield file.upload(this.endPoint, {
-        'Content-Type': 'multipart/form-data',
-      });
-      const body = yield response.json();
-      const fileId = body?.data?.id;
-      return fileId;
-    } catch (e) {
-      this.addError(file);
-      this.removeFileFromQueue(file);
-      return null;
-    }
-  }
+  uploadFileTask = task(
+    { enqueue: true, maxConcurrency: 3 },
+    async (file: UploadFile): Promise<number | null> => {
+      this.notifyQueueUpdate();
+      try {
+        const response = await file.upload(this.endPoint, {
+          contentType: 'multipart/form-data',
+        });
+        const body = await response.json();
+        const fileId = body?.data?.id;
+        return fileId;
+      } catch (e) {
+        this.addError(file);
+        this.removeFileFromQueue(file);
+        return null;
+      }
+    },
+  );
 
   @action
-  filter(file, files, index) {
-    let isFirstFile = index === 0;
+  filter(file: File, files: File[], index: number) {
+    const isFirstFile = index === 0;
 
     if (isFirstFile) {
       this.resetErrors();
@@ -115,14 +155,14 @@ export default class AuFileUpload extends Component {
     }
   }
 
-  calculateQueueInfo() {
+  calculateQueueInfo(): QueueInfo {
     const filesQueueInfo = {
       isQueueEmpty: this.uploadFileTask.isIdle,
     };
     return filesQueueInfo;
   }
 
-  addError(file, errorMessage) {
+  addError(file: BasicFile, errorMessage?: string) {
     this.uploadErrorData = [
       ...this.uploadErrorData,
       {
@@ -136,13 +176,13 @@ export default class AuFileUpload extends Component {
     this.uploadErrorData = [];
   }
 
-  removeFileFromQueue(file) {
+  removeFileFromQueue(file: UploadFile) {
     this.queue.remove(file);
   }
 
   <template>
     {{#let
-      (fileQueue name=this.queueName onFileAdded=(perform this.upload))
+      (fileQueue name=this.queueName onFileAdded=this.uploadTask.perform)
       as |queue|
     }}
       <FileDropzone
@@ -212,39 +252,39 @@ export default class AuFileUpload extends Component {
 }
 
 // Private util that is exported for testing purposes
-export function isValidFileType(file, accept) {
+export function isValidFileType(file: Partial<BasicFile>, accept?: string) {
   if (!accept) {
     return true;
   }
 
-  let tokens = accept.split(',').map(function (token) {
+  const tokens = accept.split(',').map(function (token) {
     return token.trim().toLowerCase();
   });
 
-  let validMimeTypes = tokens.filter(function (token) {
+  const validMimeTypes = tokens.filter(function (token) {
     return !token.startsWith('.');
   });
-  let type = file.type?.toLowerCase();
+  const type = file.type?.toLowerCase();
 
-  let validExtensions = tokens.filter(function (token) {
+  const validExtensions = tokens.filter(function (token) {
     return token.startsWith('.');
   });
 
   let extension = null;
   if (file.name && /(\.[^.]+)$/.test(file.name)) {
-    extension = file.name.toLowerCase().match(/(\.[^.]+)$/)[1];
+    extension = file.name.toLowerCase().match(/(\.[^.]+)$/)?.[1];
   }
 
   return (
-    isValidMimeType(type, validMimeTypes) ||
-    isValidExtension(extension, validExtensions)
+    (!!type && isValidMimeType(type, validMimeTypes)) ||
+    (!!extension && isValidExtension(extension, validExtensions))
   );
 }
 
-function isValidMimeType(type, validMimeTypes = []) {
+function isValidMimeType(type: string, validMimeTypes: string[] = []) {
   return validMimeTypes.some(function (validType) {
     if (['audio/*', 'video/*', 'image/*'].includes(validType)) {
-      let genericType = validType.split('/')[0];
+      const genericType = validType.split('/')[0] as string;
 
       return type.startsWith(genericType);
     } else {
@@ -253,10 +293,13 @@ function isValidMimeType(type, validMimeTypes = []) {
   });
 }
 
-function isValidExtension(extension, validExtensions = []) {
+function isValidExtension(
+  extension: string,
+  validExtensions: string[] = [],
+): boolean {
   return validExtensions.includes(extension);
 }
 
-function isValidFileSize(fileSize, maximumSize) {
+function isValidFileSize(fileSize: number, maximumSize: number): boolean {
   return fileSize < maximumSize * Math.pow(1024, 2);
 }
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index d31a61bd9..751b3130c 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -14,6 +14,7 @@ import type AuContentHeader from '@appuniversum/ember-appuniversum/components/au
 import type AuContent from '@appuniversum/ember-appuniversum/components/au-content';
 import type AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
 import type AuFileCard from '@appuniversum/ember-appuniversum/components/au-file-card';
+import type AuFileUpload from '@appuniversum/ember-appuniversum/components/au-file-upload';
 import type AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
 import type AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
 import type AuHelpText from '@appuniversum/ember-appuniversum/components/au-help-text';
@@ -46,6 +47,7 @@ export default interface AppuniversumRegistry {
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
   AuFileCard: typeof AuFileCard;
+  AuFileUpload: typeof AuFileUpload;
   AuFormRow: typeof AuFormRow;
   AuHeading: typeof AuHeading;
   AuHelpText: typeof AuHelpText;
diff --git a/tests/integration/components/au-file-upload-test.gts b/tests/integration/components/au-file-upload-test.gts
new file mode 100644
index 000000000..5ce8c62b3
--- /dev/null
+++ b/tests/integration/components/au-file-upload-test.gts
@@ -0,0 +1,14 @@
+import AuFileUpload from '@appuniversum/ember-appuniversum/components/au-file-upload';
+import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-file-upload', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts extra attributes', async function (assert) {
+    await render(<template><AuFileUpload data-test-file-upload /></template>);
+
+    assert.dom('[data-test-file-upload]').exists();
+  });
+});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index bce9073f2..2af520724 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -113,6 +113,12 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-file-card]').exists();
   });
 
+  test('`<AuFileUpload>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuFileUpload data-test-file-upload />`);
+
+    assert.dom('[data-test-file-upload]').exists();
+  });
+
   test('`<AuFormRow>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuFormRow data-test-form-row />`);
 
diff --git a/tests/unit/utils/is-valid-file-type-test.js b/tests/unit/utils/is-valid-file-type-test.ts
similarity index 96%
rename from tests/unit/utils/is-valid-file-type-test.js
rename to tests/unit/utils/is-valid-file-type-test.ts
index b017c4403..4c4ddceef 100644
--- a/tests/unit/utils/is-valid-file-type-test.js
+++ b/tests/unit/utils/is-valid-file-type-test.ts
@@ -36,12 +36,12 @@ const TEST_FILE = {
 
 module('Unit | Private Utility | is-valid-file-type', function () {
   test('it returns true if no `accept` value is passed', function (assert) {
-    let file = {
+    const file = {
       name: 'test.png',
       type: 'image/png',
     };
 
-    let isValid = isValidFileType(file, undefined);
+    const isValid = isValidFileType(file, undefined);
     assert.true(isValid);
   });
 
@@ -97,7 +97,7 @@ module('Unit | Private Utility | is-valid-file-type', function () {
   });
 
   test('it supports combining extensions and MIME types', function (assert) {
-    let accept = [MIME_TYPE.IMAGE, MIME_TYPE.VIDEO, '.pdf'].join();
+    const accept = [MIME_TYPE.IMAGE, MIME_TYPE.VIDEO, '.pdf'].join();
 
     assert.true(isValidFileType(TEST_FILE.PNG, accept));
     assert.true(isValidFileType(TEST_FILE.MP4, accept));

From dee5da8099db986c5eafa1d73ae82012f86e5c62 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Wed, 6 Mar 2024 17:02:13 +0100
Subject: [PATCH 03/11] Add Glint support to the `AuMainContainer` component

---
 ...in-container.gjs => au-main-container.gts} |  53 ++++++---
 addon/template-registry.ts                    |   2 +
 .../components/au-main-container-test.gts     | 108 ++++++++++++++++++
 .../components/au-main-container-test.js      |  92 ---------------
 .../integration/components/loose-mode-test.ts |   7 ++
 5 files changed, 157 insertions(+), 105 deletions(-)
 rename addon/components/{au-main-container.gjs => au-main-container.gts} (55%)
 create mode 100644 tests/integration/components/au-main-container-test.gts
 delete mode 100644 tests/integration/components/au-main-container-test.js

diff --git a/addon/components/au-main-container.gjs b/addon/components/au-main-container.gts
similarity index 55%
rename from addon/components/au-main-container.gjs
rename to addon/components/au-main-container.gts
index fe8619ebf..67f219123 100644
--- a/addon/components/au-main-container.gjs
+++ b/addon/components/au-main-container.gts
@@ -1,20 +1,39 @@
+import type { TOC } from '@ember/component/template-only';
 import { hash } from '@ember/helper';
 import Component from '@glimmer/component';
 
-<template>
-  <main
-    id="main"
-    class="au-c-main-container"
-    tabindex="-1"
-    data-test-main-container
-    ...attributes
-  >
+export interface AuMainContainerSignature {
+  Element: HTMLElement;
+  Blocks: {
+    default: [
+      {
+        sidebar?: typeof Sidebar;
+        content?: typeof Content;
+      },
+    ];
+  };
+}
+
+const AuMainContainer: TOC<AuMainContainerSignature> = <template>
+  <main id="main" class="au-c-main-container" tabindex="-1" ...attributes>
     {{yield (hash sidebar=Sidebar)}}
     {{yield (hash content=Content)}}
   </main>
-</template>
+</template>;
 
-class Sidebar extends Component {
+export default AuMainContainer;
+
+interface SidebarSignature {
+  Args: {
+    size?: 'collapsed' | 'small' | 'large';
+  };
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+class Sidebar extends Component<SidebarSignature> {
   get size() {
     if (this.args.size == 'collapsed')
       return 'au-c-main-container__sidebar--collapsed';
@@ -27,7 +46,6 @@ class Sidebar extends Component {
     {{#if (has-block)}}
       <div
         class="au-c-main-container__sidebar {{this.size}} au-u-hide-on-print"
-        data-test-main-container-sidebar
         ...attributes
       >
         {{yield}}
@@ -36,7 +54,17 @@ class Sidebar extends Component {
   </template>
 }
 
-class Content extends Component {
+interface ContentSignature {
+  Args: {
+    scroll?: boolean;
+  };
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+class Content extends Component<ContentSignature> {
   get scroll() {
     if (this.args.scroll) return 'au-c-main-container__content--scroll';
     return '';
@@ -48,7 +76,6 @@ class Content extends Component {
         id="content"
         class="au-c-main-container__content {{this.scroll}} au-u-wide-on-print"
         tabindex="-1"
-        data-test-main-container-content
         ...attributes
       >
         {{yield}}
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 751b3130c..bb71c4d84 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -25,6 +25,7 @@ import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-
 import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -58,6 +59,7 @@ export default interface AppuniversumRegistry {
   AuLink: typeof AuLink;
   AuList: typeof AuList;
   AuLoader: typeof AuLoader;
+  AuMainContainer: typeof AuMainContainer;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-main-container-test.gts b/tests/integration/components/au-main-container-test.gts
new file mode 100644
index 000000000..60ee10206
--- /dev/null
+++ b/tests/integration/components/au-main-container-test.gts
@@ -0,0 +1,108 @@
+import AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
+import { render, settled } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+const MAIN_CONTAINER = {
+  CONTAINER: '[data-test-main-container]',
+  SIDEBAR: '[data-test-main-container-sidebar]',
+  CONTENT: '[data-test-main-container-content]',
+};
+
+module('Integration | Component | au-main-container', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it's possible to pass extra html attributes", async function (assert) {
+    await render(
+      <template>
+        <AuMainContainer data-test-main-container class="test" />
+      </template>,
+    );
+
+    assert.dom(MAIN_CONTAINER.CONTAINER).exists().hasClass('test');
+  });
+
+  test('it yields a sidebar component that is only visible when it has block contents', async function (assert) {
+    await render(
+      <template>
+        <AuMainContainer as |main|>
+          <main.sidebar data-test-main-container-sidebar>Sidebar contents</main.sidebar>
+        </AuMainContainer>
+      </template>,
+    );
+
+    assert.dom(MAIN_CONTAINER.SIDEBAR).exists().hasText('Sidebar contents');
+
+    await render(
+      <template>
+        <AuMainContainer as |main|>
+          <main.sidebar data-test-main-container-sidebar />
+        </AuMainContainer>
+      </template>,
+    );
+
+    assert.dom(MAIN_CONTAINER.SIDEBAR).doesNotExist();
+
+    await render(<template><AuMainContainer /></template>);
+
+    assert.dom(MAIN_CONTAINER.SIDEBAR).doesNotExist();
+  });
+
+  test('it yields a content component that is only visible when it has block contents', async function (assert) {
+    await render(
+      <template>
+        <AuMainContainer as |main|>
+          <main.content data-test-main-container-content>Main contents</main.content>
+        </AuMainContainer>
+      </template>,
+    );
+
+    assert.dom(MAIN_CONTAINER.CONTENT).exists().hasText('Main contents');
+
+    await render(
+      <template>
+        <AuMainContainer as |main|>
+          <main.content data-test-main-container-content />
+        </AuMainContainer>
+      </template>,
+    );
+
+    assert.dom(MAIN_CONTAINER.CONTENT).doesNotExist();
+  });
+
+  test("it's possible to force the content to scroll if its larger than its parent", async function (assert) {
+    class TestState {
+      @tracked shouldScroll: boolean = false;
+    }
+
+    const state = new TestState();
+
+    await render(
+      <template>
+        <AuMainContainer as |main|>
+          <main.content
+            @scroll={{state.shouldScroll}}
+            data-test-main-container-content
+          >Main contents</main.content>
+        </AuMainContainer>
+      </template>,
+    );
+
+    let containerElement = document.querySelector(
+      MAIN_CONTAINER.CONTENT,
+    ) as HTMLElement;
+    assert.notStrictEqual(
+      getComputedStyle(containerElement).getPropertyValue('overflow-y'),
+      'auto',
+    );
+
+    state.shouldScroll = true;
+    await settled();
+
+    assert.strictEqual(
+      getComputedStyle(containerElement).getPropertyValue('overflow-y'),
+      'auto',
+    );
+  });
+});
diff --git a/tests/integration/components/au-main-container-test.js b/tests/integration/components/au-main-container-test.js
deleted file mode 100644
index bae658ad6..000000000
--- a/tests/integration/components/au-main-container-test.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-const MAIN_CONTAINER = {
-  CONTAINER: '[data-test-main-container]',
-  SIDEBAR: '[data-test-main-container-sidebar]',
-  CONTENT: '[data-test-main-container-content]',
-};
-
-module('Integration | Component | au-main-container', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("it's possible to pass extra html attributes", async function (assert) {
-    await render(hbs`
-      <AuMainContainer class="test"></AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.CONTAINER).exists().hasClass('test');
-  });
-
-  test('it yields a sidebar component that is only visible when it has block contents', async function (assert) {
-    await render(hbs`
-      <AuMainContainer as |main|>
-        <main.sidebar>Sidebar contents</main.sidebar>
-      </AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.SIDEBAR).exists().hasText('Sidebar contents');
-
-    await render(hbs`
-      <AuMainContainer as |main|>
-        <main.sidebar/>
-      </AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.SIDEBAR).doesNotExist();
-
-    await render(hbs`
-      <AuMainContainer></AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.SIDEBAR).doesNotExist();
-  });
-
-  test('it yields a content component that is only visible when it has block contents', async function (assert) {
-    await render(hbs`
-      <AuMainContainer as |main|>
-        <main.content>Main contents</main.content>
-      </AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.CONTENT).exists().hasText('Main contents');
-
-    await render(hbs`
-      <AuMainContainer as |main|>
-        <main.content/>
-      </AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.CONTENT).doesNotExist();
-
-    await render(hbs`
-      <AuMainContainer></AuMainContainer>
-    `);
-
-    assert.dom(MAIN_CONTAINER.CONTENT).doesNotExist();
-  });
-
-  test("it's possible to force the content to scroll if its larger than its parent", async function (assert) {
-    this.shouldScroll = false;
-
-    await render(hbs`
-      <AuMainContainer as |main|>
-        <main.content @scroll={{this.shouldScroll}}>Main contents</main.content>
-      </AuMainContainer>
-    `);
-
-    let containerElement = document.querySelector(MAIN_CONTAINER.CONTENT);
-    assert.notStrictEqual(
-      getComputedStyle(containerElement).getPropertyValue('overflow-y'),
-      'auto',
-    );
-
-    this.set('shouldScroll', true);
-    assert.strictEqual(
-      getComputedStyle(containerElement).getPropertyValue('overflow-y'),
-      'auto',
-    );
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 2af520724..b1bb6c661 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -186,6 +186,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-loader]').exists();
   });
 
+  test('`<AuMainContainer>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuMainContainer data-test-main-container />
+    `);
+    assert.dom('[data-test-main-container]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From 3aa3f57454eb47adc650d745490421b3512eb335 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Wed, 6 Mar 2024 17:45:12 +0100
Subject: [PATCH 04/11] Add Glint support to the `AuMainFooter` component

---
 addon/components/au-main-footer.gjs           | 12 --------
 addon/components/au-main-footer.gts           | 22 +++++++++++++++
 addon/template-registry.ts                    |  2 ++
 .../components/au-main-footer-test.gts        | 20 +++++++++++++
 .../components/au-main-footer-test.js         | 28 -------------------
 .../integration/components/loose-mode-test.ts |  7 +++++
 6 files changed, 51 insertions(+), 40 deletions(-)
 delete mode 100644 addon/components/au-main-footer.gjs
 create mode 100644 addon/components/au-main-footer.gts
 create mode 100644 tests/integration/components/au-main-footer-test.gts
 delete mode 100644 tests/integration/components/au-main-footer-test.js

diff --git a/addon/components/au-main-footer.gjs b/addon/components/au-main-footer.gjs
deleted file mode 100644
index e6581f368..000000000
--- a/addon/components/au-main-footer.gjs
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AuBrand } from '@appuniversum/ember-appuniversum';
-
-<template>
-  <footer class="au-c-main-footer" ...attributes>
-    <div class="au-c-main-footer__brand">
-      <AuBrand @tagline="verbeelding werkt" />
-    </div>
-    <div class="au-c-main-footer__content">
-      {{yield}}
-    </div>
-  </footer>
-</template>
diff --git a/addon/components/au-main-footer.gts b/addon/components/au-main-footer.gts
new file mode 100644
index 000000000..d7c43e8b9
--- /dev/null
+++ b/addon/components/au-main-footer.gts
@@ -0,0 +1,22 @@
+import type { TOC } from '@ember/component/template-only';
+import AuBrand from './au-brand';
+
+export interface AuMainFooterSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+const AuMainFooter: TOC<AuMainFooterSignature> = <template>
+  <footer class="au-c-main-footer" ...attributes>
+    <div class="au-c-main-footer__brand">
+      <AuBrand @tagline="verbeelding werkt" />
+    </div>
+    <div class="au-c-main-footer__content">
+      {{yield}}
+    </div>
+  </footer>
+</template>;
+
+export default AuMainFooter;
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index bb71c4d84..d26a73e9c 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -26,6 +26,7 @@ import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
 import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
+import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -60,6 +61,7 @@ export default interface AppuniversumRegistry {
   AuList: typeof AuList;
   AuLoader: typeof AuLoader;
   AuMainContainer: typeof AuMainContainer;
+  AuMainFooter: typeof AuMainFooter;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-main-footer-test.gts b/tests/integration/components/au-main-footer-test.gts
new file mode 100644
index 000000000..c494ce1d4
--- /dev/null
+++ b/tests/integration/components/au-main-footer-test.gts
@@ -0,0 +1,20 @@
+import AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
+import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-main-footer', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts block content and extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuMainFooter data-test-main-footer>
+          Footer content
+        </AuMainFooter>
+      </template>,
+    );
+
+    assert.dom('[data-test-main-footer]').containsText('Footer content');
+  });
+});
diff --git a/tests/integration/components/au-main-footer-test.js b/tests/integration/components/au-main-footer-test.js
deleted file mode 100644
index 17a535ec0..000000000
--- a/tests/integration/components/au-main-footer-test.js
+++ /dev/null
@@ -1,28 +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-main-footer', 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`<AuMainFooter />`);
-
-    assert
-      .dom(this.element)
-      .hasText('Logo Vlaanderen Vlaanderen verbeelding werkt');
-
-    // Template block usage:
-    await render(hbs`
-      <AuMainFooter>
-        template block text
-      </AuMainFooter>
-    `);
-
-    assert.dom(this.element).containsText('template block text');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index b1bb6c661..343536806 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -193,6 +193,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-main-container]').exists();
   });
 
+  test('`<AuMainFooter>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuMainFooter data-test-main-footer />
+    `);
+    assert.dom('[data-test-main-footer]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From f6dd3d8242eeba8068ed1e0d10782727f50eb676 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Wed, 6 Mar 2024 18:43:50 +0100
Subject: [PATCH 05/11] Add Glint support to the `AuMainHeader` component

---
 ...{au-main-header.gjs => au-main-header.gts} | 27 ++++--
 addon/template-registry.ts                    |  2 +
 .../components/au-main-header-test.gts        | 91 +++++++++++++++++++
 .../components/au-main-header-test.js         | 26 ------
 .../integration/components/loose-mode-test.ts |  7 ++
 5 files changed, 121 insertions(+), 32 deletions(-)
 rename addon/components/{au-main-header.gjs => au-main-header.gts} (74%)
 create mode 100644 tests/integration/components/au-main-header-test.gts
 delete mode 100644 tests/integration/components/au-main-header-test.js

diff --git a/addon/components/au-main-header.gjs b/addon/components/au-main-header.gts
similarity index 74%
rename from addon/components/au-main-header.gjs
rename to addon/components/au-main-header.gts
index 85ef9b99b..152186ae7 100644
--- a/addon/components/au-main-header.gjs
+++ b/addon/components/au-main-header.gts
@@ -1,18 +1,33 @@
-import { AuBrand, AuLink } from '@appuniversum/ember-appuniversum';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { LinkTo } from '@ember/routing';
-import { inject as service } from '@ember/service';
+import type RouterService from '@ember/routing/router-service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import AuBrand from './au-brand';
+import AuLink from './au-link';
 
-export default class AuMainHeader extends Component {
+export interface AuMainHeaderSignature {
+  Args: {
+    appTitle: string;
+    brandLink?: string;
+    contactRoute?: string;
+    homeRoute?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+export default class AuMainHeader extends Component<AuMainHeaderSignature> {
   @action
   headerLinkFocus() {
-    document.querySelector('#main')?.focus();
+    document.querySelector<HTMLElement>('#main')?.focus();
   }
 
   <template>
-    <header class="au-c-main-header">
+    <header class="au-c-main-header" ...attributes>
       <div class="au-c-main-header__title-group">
         <NavigationNarrator />
         <AuBrand @link="{{@brandLink}}" />
@@ -56,7 +71,7 @@ export default class AuMainHeader extends Component {
 }
 
 class NavigationNarrator extends Component {
-  @service router;
+  @service declare router: RouterService;
 
   get activeRoute() {
     return 'Nieuwe pagina: ' + this.router.currentRouteName;
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index d26a73e9c..ee73e22e8 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -27,6 +27,7 @@ import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
 import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
 import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
+import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -62,6 +63,7 @@ export default interface AppuniversumRegistry {
   AuLoader: typeof AuLoader;
   AuMainContainer: typeof AuMainContainer;
   AuMainFooter: typeof AuMainFooter;
+  AuMainHeader: typeof AuMainHeader;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-main-header-test.gts b/tests/integration/components/au-main-header-test.gts
new file mode 100644
index 000000000..528cfde81
--- /dev/null
+++ b/tests/integration/components/au-main-header-test.gts
@@ -0,0 +1,91 @@
+import AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
+import { getRootElement } from '@ember/test-helpers';
+import { click } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
+import { queryByText } from '@testing-library/dom';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-main-header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it requires an `@appTitle`', async function (assert) {
+    await render(
+      <template><AuMainHeader @appTitle="Appuniversum" /></template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const title = queryByText(testContainer, 'Appuniversum');
+    assert.dom(title).exists();
+  });
+
+  test('it can display the title as a link by setting the `@homeRoute` argument', async function (assert) {
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" @homeRoute="application" />
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const title = queryByText(testContainer, 'Appuniversum');
+    assert
+      .dom(title)
+      .hasTagName('a', 'The title element is a link if `@homeRoute` is set');
+  });
+
+  test('it focuses the #main element after clicking the title link', async function (assert) {
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" @homeRoute="application" />
+        <main id="main" tabindex="-1">Main content</main>
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const title = queryByText(testContainer, 'Appuniversum') as HTMLElement;
+
+    assert.dom('#main').isNotFocused();
+    await click(title);
+    assert.dom('#main').isFocused();
+  });
+
+  test('it supports showing a link to the contact route', async function (assert) {
+    await render(
+      <template><AuMainHeader @appTitle="Appuniversum" /></template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    let contactLink = queryByText(testContainer, 'Contacteer ons');
+    assert.notOk(
+      contactLink,
+      "The contact link isn't displayed without the `@contactRoute` argument",
+    );
+
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" @contactRoute="application" />
+      </template>,
+    );
+
+    contactLink = queryByText(testContainer, 'Contacteer ons');
+
+    assert.dom(contactLink).hasTagName('a');
+  });
+
+  test('it accepts extra block contents', async function (assert) {
+    await render(
+      <template>
+        <AuMainHeader @appTitle="Appuniversum" data-test-main-header>
+          extra header content
+        </AuMainHeader>
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const extraHeaderContent = queryByText(
+      testContainer,
+      'extra header content',
+    );
+    assert.ok(extraHeaderContent);
+  });
+});
diff --git a/tests/integration/components/au-main-header-test.js b/tests/integration/components/au-main-header-test.js
deleted file mode 100644
index 830faceef..000000000
--- a/tests/integration/components/au-main-header-test.js
+++ /dev/null
@@ -1,26 +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-main-header', 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`<AuMainHeader />`);
-
-    assert.dom(this.element).containsText('Naar de hoofdinhoud');
-
-    // Template block usage:
-    await render(hbs`
-      <AuMainHeader>
-        template block text
-      </AuMainHeader>
-    `);
-
-    assert.dom(this.element).containsText('template block text');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 343536806..bcd2904f7 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -200,6 +200,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-main-footer]').exists();
   });
 
+  test('`<AuMainHeader>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuMainHeader @appTitle="Appuniversum" data-test-main-header />
+    `);
+    assert.dom('[data-test-main-header]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From 427e4581455d1ecde447f6a6b7ad07350e5bee60 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 09:25:05 +0100
Subject: [PATCH 06/11] Add Glint support to the `AuModalContainer` component

---
 addon/components/au-modal-container.gjs            |  3 ---
 addon/components/au-modal-container.gts            | 11 +++++++++++
 addon/template-registry.ts                         |  2 ++
 ...ntainer-test.js => au-modal-container-test.gts} | 14 ++++----------
 tests/integration/components/loose-mode-test.ts    |  7 +++++++
 5 files changed, 24 insertions(+), 13 deletions(-)
 delete mode 100644 addon/components/au-modal-container.gjs
 create mode 100644 addon/components/au-modal-container.gts
 rename tests/integration/components/{au-modal-container-test.js => au-modal-container-test.gts} (55%)

diff --git a/addon/components/au-modal-container.gjs b/addon/components/au-modal-container.gjs
deleted file mode 100644
index e456010be..000000000
--- a/addon/components/au-modal-container.gjs
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div data-au-modal-container ...attributes></div>
-</template>
diff --git a/addon/components/au-modal-container.gts b/addon/components/au-modal-container.gts
new file mode 100644
index 000000000..25da79866
--- /dev/null
+++ b/addon/components/au-modal-container.gts
@@ -0,0 +1,11 @@
+import type { TOC } from '@ember/component/template-only';
+
+export interface AuModalContainerSignature {
+  Element: HTMLDivElement;
+}
+
+const AuModalContainer: TOC<AuModalContainerSignature> = <template>
+  <div data-au-modal-container ...attributes></div>
+</template>;
+
+export default AuModalContainer;
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index ee73e22e8..a7bb7dcef 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -28,6 +28,7 @@ import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader
 import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
 import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
 import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
+import type AuModalContainer from '@appuniversum/ember-appuniversum/components/au-modal-container';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -64,6 +65,7 @@ export default interface AppuniversumRegistry {
   AuMainContainer: typeof AuMainContainer;
   AuMainFooter: typeof AuMainFooter;
   AuMainHeader: typeof AuMainHeader;
+  AuModalContainer: typeof AuModalContainer;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-modal-container-test.js b/tests/integration/components/au-modal-container-test.gts
similarity index 55%
rename from tests/integration/components/au-modal-container-test.js
rename to tests/integration/components/au-modal-container-test.gts
index 80cf3ebc4..ff2ca7e35 100644
--- a/tests/integration/components/au-modal-container-test.js
+++ b/tests/integration/components/au-modal-container-test.gts
@@ -1,20 +1,14 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'dummy/tests/helpers';
+import AuModalContainer from '@appuniversum/ember-appuniversum/components/au-modal-container';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { module, test } from 'qunit';
 
 module('Integration | Component | au-modal-container', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it passes through attributes', async function (assert) {
-    await render(hbs`<AuModalContainer foo="bar" />`);
+    await render(<template><AuModalContainer foo="bar" /></template>);
 
     assert.dom('[foo]').hasAttribute('foo', 'bar');
   });
-
-  test("it doesn't render default block contents", async function (assert) {
-    await render(hbs`<AuModalContainer>Foo</AuModalContainer>`);
-
-    assert.dom(this.element).doesNotContainText('Foo');
-  });
 });
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index bcd2904f7..faa85ff1f 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -207,6 +207,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-main-header]').exists();
   });
 
+  test('`<AuModalContainer>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuModalContainer data-test-modal-container />
+    `);
+    assert.dom('[data-test-modal-container]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From f483389e23ec7a21db5097b68a19909c62221dbe Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 12:21:44 +0100
Subject: [PATCH 07/11] Add Glint support to the `AuNavigationLink` component

---
 ...gation-link.gjs => au-navigation-link.gts} | 18 +++++++--
 addon/template-registry.ts                    |  2 +
 .../components/au-navigation-link-test.gts    | 39 +++++++++++++++++++
 .../components/au-navigation-link-test.js     | 26 -------------
 .../integration/components/loose-mode-test.ts |  7 ++++
 5 files changed, 63 insertions(+), 29 deletions(-)
 rename addon/components/{au-navigation-link.gjs => au-navigation-link.gts} (63%)
 create mode 100644 tests/integration/components/au-navigation-link-test.gts
 delete mode 100644 tests/integration/components/au-navigation-link-test.js

diff --git a/addon/components/au-navigation-link.gjs b/addon/components/au-navigation-link.gts
similarity index 63%
rename from addon/components/au-navigation-link.gjs
rename to addon/components/au-navigation-link.gts
index f9e5699ec..a7039d900 100644
--- a/addon/components/au-navigation-link.gjs
+++ b/addon/components/au-navigation-link.gts
@@ -4,7 +4,20 @@ import { action } from '@ember/object';
 import { LinkTo } from '@ember/routing';
 import Component from '@glimmer/component';
 
-export default class AuNavigationLink extends Component {
+export interface AuNavigationLinkSignature {
+  Args: {
+    model?: unknown;
+    models?: unknown[];
+    query?: Record<string, unknown>;
+    route: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLAnchorElement; // TODO: Retrieve this from the LinkTo component types in some way
+}
+
+export default class AuNavigationLink extends Component<AuNavigationLinkSignature> {
   // this is a workaround for https://github.com/emberjs/ember.js/issues/19693
   get queryParams() {
     if (this.args.query) {
@@ -16,8 +29,7 @@ export default class AuNavigationLink extends Component {
 
   @action
   linkFocus() {
-    // Focus content window
-    document.querySelectorAll('#content')[0].focus();
+    document.querySelector<HTMLElement>('#content')?.focus?.();
   }
 
   <template>
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index a7bb7dcef..54194a9d7 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -29,6 +29,7 @@ import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au
 import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
 import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
 import type AuModalContainer from '@appuniversum/ember-appuniversum/components/au-modal-container';
+import type AuNavigationLink from '@appuniversum/ember-appuniversum/components/au-navigation-link';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -66,6 +67,7 @@ export default interface AppuniversumRegistry {
   AuMainFooter: typeof AuMainFooter;
   AuMainHeader: typeof AuMainHeader;
   AuModalContainer: typeof AuModalContainer;
+  AuNavigationLink: typeof AuNavigationLink;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-navigation-link-test.gts b/tests/integration/components/au-navigation-link-test.gts
new file mode 100644
index 000000000..230c6326f
--- /dev/null
+++ b/tests/integration/components/au-navigation-link-test.gts
@@ -0,0 +1,39 @@
+import AuNavigationLink from '@appuniversum/ember-appuniversum/components/au-navigation-link';
+import { click, getRootElement, render } from '@ember/test-helpers';
+import { queryByText } from '@testing-library/dom';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-navigation-link', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts block contents and extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuNavigationLink @route="application" data-test-navigation-link>
+          Navigation link
+        </AuNavigationLink>
+      </template>,
+    );
+
+    assert.dom('[data-test-navigation-link]').hasText('Navigation link');
+  });
+
+  test('it focuses the element with the `#content` id after being clicked', async function (assert) {
+    await render(
+      <template>
+        <AuNavigationLink @route="application">
+          Navigation link
+        </AuNavigationLink>
+        <div id="content" tabindex="-1">Content</div>
+      </template>,
+    );
+
+    const testContainer = getRootElement() as HTMLElement;
+    const link = queryByText(testContainer, 'Navigation link') as HTMLElement;
+
+    assert.dom('#content').isNotFocused();
+    await click(link);
+    assert.dom('#content').isFocused();
+  });
+});
diff --git a/tests/integration/components/au-navigation-link-test.js b/tests/integration/components/au-navigation-link-test.js
deleted file mode 100644
index d74a1fb6b..000000000
--- a/tests/integration/components/au-navigation-link-test.js
+++ /dev/null
@@ -1,26 +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-navigation-link', 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`<AuNavigationLink />`);
-
-    assert.dom(this.element).hasText('');
-
-    // Template block usage:
-    await render(hbs`
-      <AuNavigationLink>
-        template block text
-      </AuNavigationLink>
-    `);
-
-    assert.dom(this.element).hasText('template block text');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index faa85ff1f..063a12792 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -214,6 +214,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-modal-container]').exists();
   });
 
+  test('`<AuNavigationLink>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuNavigationLink @route="index" data-test-navigation-link>Foo</AuNavigationLink>
+    `);
+    assert.dom('[data-test-navigation-link]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From 1a455435b7063b4a88c0de916425328ab6b142c0 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 12:58:52 +0100
Subject: [PATCH 08/11] Add Glint support to the `AuPanel` component

---
 addon/components/au-panel.gjs                 | 11 -------
 addon/components/au-panel.gts                 | 31 +++++++++++++++++++
 addon/template-registry.ts                    |  2 ++
 .../{au-panel-test.js => au-panel-test.gts}   | 20 ++++++------
 .../integration/components/loose-mode-test.ts |  7 +++++
 5 files changed, 51 insertions(+), 20 deletions(-)
 delete mode 100644 addon/components/au-panel.gjs
 create mode 100644 addon/components/au-panel.gts
 rename tests/integration/components/{au-panel-test.js => au-panel-test.gts} (62%)

diff --git a/addon/components/au-panel.gjs b/addon/components/au-panel.gjs
deleted file mode 100644
index b0850e7ec..000000000
--- a/addon/components/au-panel.gjs
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="au-c-panel {{if @active 'au-c-panel--active'}}" ...attributes>
-    {{yield Section}}
-  </div>
-</template>
-
-const Section = <template>
-  <div class="au-c-panel__section au-o-box au-o-box--small" ...attributes>
-    {{yield}}
-  </div>
-</template>;
diff --git a/addon/components/au-panel.gts b/addon/components/au-panel.gts
new file mode 100644
index 000000000..97c1c6e69
--- /dev/null
+++ b/addon/components/au-panel.gts
@@ -0,0 +1,31 @@
+import type { TOC } from '@ember/component/template-only';
+
+export interface AuPanelSignature {
+  Args: {
+    active?: boolean;
+  };
+  Blocks: {
+    default: [typeof Section];
+  };
+  Element: HTMLDivElement;
+}
+
+const AuPanel: TOC<AuPanelSignature> = <template>
+  <div class="au-c-panel {{if @active 'au-c-panel--active'}}" ...attributes>
+    {{yield Section}}
+  </div>
+</template>;
+
+export default AuPanel;
+
+interface SectionSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+const Section: TOC<SectionSignature> = <template>
+  <div class="au-c-panel__section au-o-box au-o-box--small" ...attributes>
+    {{yield}}
+  </div>
+</template>;
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 54194a9d7..fe8f594cb 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -30,6 +30,7 @@ import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-ma
 import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
 import type AuModalContainer from '@appuniversum/ember-appuniversum/components/au-modal-container';
 import type AuNavigationLink from '@appuniversum/ember-appuniversum/components/au-navigation-link';
+import type AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -68,6 +69,7 @@ export default interface AppuniversumRegistry {
   AuMainHeader: typeof AuMainHeader;
   AuModalContainer: typeof AuModalContainer;
   AuNavigationLink: typeof AuNavigationLink;
+  AuPanel: typeof AuPanel;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-panel-test.js b/tests/integration/components/au-panel-test.gts
similarity index 62%
rename from tests/integration/components/au-panel-test.js
rename to tests/integration/components/au-panel-test.gts
index f4abaebe5..6ce6d09d9 100644
--- a/tests/integration/components/au-panel-test.js
+++ b/tests/integration/components/au-panel-test.gts
@@ -1,18 +1,20 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
+import AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 module('Integration | Component | au-panel', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it yields a `Section` component', async function (assert) {
-    await render(hbs`
-      <AuPanel data-test-panel as |Section|>
-        <Section data-test-panel-section="foo">Foo</Section>
-        <Section data-test-panel-section="bar">Bar</Section>
-      </AuPanel>
-    `);
+    await render(
+      <template>
+        <AuPanel data-test-panel as |Section|>
+          <Section data-test-panel-section="foo">Foo</Section>
+          <Section data-test-panel-section="bar">Bar</Section>
+        </AuPanel>
+      </template>,
+    );
 
     assert
       .dom('[data-test-panel] [data-test-panel-section]')
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 063a12792..b763ef592 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -221,6 +221,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-navigation-link]').exists();
   });
 
+  test('`<AuPanel>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuPanel data-test-panel />
+    `);
+    assert.dom('[data-test-panel]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From 865bae6debdd61e8a877db7cf08093f69b137bff Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 15:08:02 +0100
Subject: [PATCH 09/11] Add Glint support to the `AuPill` component

---
 addon/components/{au-pill.gjs => au-pill.gts} | 94 ++++++++++++++-----
 addon/template-registry.ts                    |  2 +
 tests/integration/components/au-pill-test.gts | 39 ++++++++
 tests/integration/components/au-pill-test.js  | 45 ---------
 .../integration/components/loose-mode-test.ts |  7 ++
 5 files changed, 117 insertions(+), 70 deletions(-)
 rename addon/components/{au-pill.gjs => au-pill.gts} (64%)
 create mode 100644 tests/integration/components/au-pill-test.gts
 delete mode 100644 tests/integration/components/au-pill-test.js

diff --git a/addon/components/au-pill.gjs b/addon/components/au-pill.gts
similarity index 64%
rename from addon/components/au-pill.gjs
rename to addon/components/au-pill.gts
index a842f3bb5..02dabec5a 100644
--- a/addon/components/au-pill.gjs
+++ b/addon/components/au-pill.gts
@@ -1,16 +1,39 @@
-import { AuIcon } from '@appuniversum/ember-appuniversum';
-import linkToModels from '@appuniversum/ember-appuniversum/private/helpers/link-to-models';
 import { on } from '@ember/modifier';
 import { LinkTo } from '@ember/routing';
 import Component from '@glimmer/component';
-
-// TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
-import eq from 'ember-truth-helpers/helpers/eq';
-import notEq from 'ember-truth-helpers/helpers/not-eq';
+import AuIcon from './au-icon';
+import linkToModels from '../private/helpers/link-to-models';
 
 const PILL_SIZES = ['small'];
 
-export default class AuPill extends Component {
+export interface AuPillSignature {
+  Args: {
+    actionIcon?: string;
+    actionText?: string;
+    draft?: boolean;
+    href?: string;
+    model?: unknown;
+    models?: unknown[];
+    onClickAction?: () => void;
+    route?: string;
+    size?: 'small';
+    skin?:
+      | 'action'
+      | 'border'
+      | 'error'
+      | 'link'
+      | 'ongoing'
+      | 'success'
+      | 'warning';
+    query?: Record<string, unknown>;
+  } & InnerSignature['Args'];
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLSpanElement | HTMLAnchorElement;
+}
+
+export default class AuPill extends Component<AuPillSignature> {
   get skin() {
     if (this.args.skin == 'border') return 'au-c-pill--border';
     if (this.args.skin == 'action') return 'au-c-pill--ongoing';
@@ -23,13 +46,13 @@ export default class AuPill extends Component {
   }
 
   get size() {
-    if (PILL_SIZES.includes(this.args.size))
+    if (this.args.size && PILL_SIZES.includes(this.args.size))
       return `au-c-pill--${this.args.size}`;
     return '';
   }
 
   get actionSize() {
-    if (PILL_SIZES.includes(this.args.size))
+    if (this.args.size && PILL_SIZES.includes(this.args.size))
       return `au-c-pill-action--${this.args.size}`;
     return '';
   }
@@ -66,7 +89,7 @@ export default class AuPill extends Component {
           type="button"
           {{on "click" @onClickAction}}
         >
-          <AuIcon @icon={{@actionIcon}} />
+          {{#if @actionIcon}}<AuIcon @icon={{@actionIcon}} />{{/if}}
           <span class="au-u-hidden-visually">{{@actionText}}</span>
         </button>
       </span>
@@ -119,20 +142,41 @@ export default class AuPill extends Component {
   </template>
 }
 
-const Inner = <template>
-  {{#if @icon}}
-    {{#if (notEq @iconAlignment "right")}}
-      <AuIcon @icon={{@icon}} />
+interface InnerSignature {
+  Args: {
+    icon?: string;
+    iconAlignment?: 'left' | 'right';
+    hideText?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+class Inner extends Component<InnerSignature> {
+  get isIconLeft() {
+    return !!this.args.icon && this.args.iconAlignment !== 'right';
+  }
+
+  get isIconRight() {
+    return !!this.args.icon && this.args.iconAlignment === 'right';
+  }
+
+  <template>
+    {{#if @icon}}
+      {{#if this.isIconLeft}}
+        <AuIcon @icon={{@icon}} />
+      {{/if}}
+    {{/if}}
+    {{#if @hideText}}
+      <span class="au-u-hidden-visually">{{yield}}</span>
+    {{else}}
+      {{yield}}
     {{/if}}
-  {{/if}}
-  {{#if @hideText}}
-    <span class="au-u-hidden-visually">{{yield}}</span>
-  {{else}}
-    {{yield}}
-  {{/if}}
-  {{#if @icon}}
-    {{#if (eq @iconAlignment "right")}}
-      <AuIcon @icon={{@icon}} />
+    {{#if @icon}}
+      {{#if this.isIconRight}}
+        <AuIcon @icon={{@icon}} />
+      {{/if}}
     {{/if}}
-  {{/if}}
-</template>;
+  </template>
+}
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index fe8f594cb..102ab52c5 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -31,6 +31,7 @@ import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-ma
 import type AuModalContainer from '@appuniversum/ember-appuniversum/components/au-modal-container';
 import type AuNavigationLink from '@appuniversum/ember-appuniversum/components/au-navigation-link';
 import type AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
+import type AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -70,6 +71,7 @@ export default interface AppuniversumRegistry {
   AuModalContainer: typeof AuModalContainer;
   AuNavigationLink: typeof AuNavigationLink;
   AuPanel: typeof AuPanel;
+  AuPill: typeof AuPill;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers
diff --git a/tests/integration/components/au-pill-test.gts b/tests/integration/components/au-pill-test.gts
new file mode 100644
index 000000000..864064d1c
--- /dev/null
+++ b/tests/integration/components/au-pill-test.gts
@@ -0,0 +1,39 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, render } from '@ember/test-helpers';
+import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+
+module('Integration | Component | au-pill', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts block contents and extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuPill data-test-pill>
+          foo
+        </AuPill>
+      </template>,
+    );
+
+    assert.dom('[data-test-pill]').hasText('foo');
+  });
+
+  test('it calls the provided @onClickAction action when the action button is clicked', async function (assert) {
+    let isButtonClicked = false;
+
+    const handleClick = () => {
+      isButtonClicked = !isButtonClicked;
+    };
+
+    await render(
+      <template>
+        <AuPill @onClickAction={{handleClick}}>
+          template block text
+        </AuPill>
+      </template>,
+    );
+    await click('button');
+
+    assert.true(isButtonClicked, 'action button is clicked');
+  });
+});
diff --git a/tests/integration/components/au-pill-test.js b/tests/integration/components/au-pill-test.js
deleted file mode 100644
index 4337a7d8b..000000000
--- a/tests/integration/components/au-pill-test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | au-pill', 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`<AuPill />`);
-
-    assert.dom(this.element).hasText('');
-
-    // Template block usage:
-    await render(hbs`
-      <AuPill>
-        template block text
-      </AuPill>
-    `);
-
-    assert.dom(this.element).hasText('template block text');
-  });
-
-  test('it calls the provided @onClickAction action when the action button is clicked', async function (assert) {
-    let isButtonClicked = false;
-
-    this.handleClick = () => {
-      isButtonClicked = !isButtonClicked;
-    };
-
-    await render(hbs`
-      <AuPill
-        @onClickAction={{this.handleClick}}
-      >
-        template block text
-      </AuPill>
-    `);
-    await click('button');
-
-    assert.true(isButtonClicked, 'action button is clicked');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index b763ef592..4c8f3498d 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -228,6 +228,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-panel]').exists();
   });
 
+  test('`<AuPill>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuPill data-test-pill />
+    `);
+    assert.dom('[data-test-pill]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>

From 5edb3cde164414f6fd6c1343b426eb1e76a85a8a Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 17:56:35 +0100
Subject: [PATCH 10/11] Add Glint support to the `AuLabel` component

---
 .../components/{au-label.gjs => au-label.gts} | 19 ++++++++++++--
 addon/template-registry.ts                    |  2 ++
 .../integration/components/au-label-test.gts  | 20 ++++++++++++++
 tests/integration/components/au-label-test.js | 26 -------------------
 .../integration/components/loose-mode-test.ts |  7 +++++
 5 files changed, 46 insertions(+), 28 deletions(-)
 rename addon/components/{au-label.gjs => au-label.gts} (76%)
 create mode 100644 tests/integration/components/au-label-test.gts
 delete mode 100644 tests/integration/components/au-label-test.js

diff --git a/addon/components/au-label.gjs b/addon/components/au-label.gts
similarity index 76%
rename from addon/components/au-label.gjs
rename to addon/components/au-label.gts
index 9ca5c5562..6d7a4b6dc 100644
--- a/addon/components/au-label.gjs
+++ b/addon/components/au-label.gts
@@ -1,7 +1,22 @@
 import Component from '@glimmer/component';
-import { AuBadge, AuPill } from '@appuniversum/ember-appuniversum';
+import AuBadge from './au-badge';
+import AuPill from './au-pill';
 
-export default class AuLabel extends Component {
+export interface AuLabelSignature {
+  Args: {
+    error?: boolean;
+    inline?: boolean;
+    required?: boolean;
+    requiredLabel?: string;
+    warning?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLabelElement;
+}
+
+export default class AuLabel extends Component<AuLabelSignature> {
   get inline() {
     if (this.args.inline) return 'au-c-label--inline';
     else return '';
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 102ab52c5..2020dab61 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -21,6 +21,7 @@ import type AuHelpText from '@appuniversum/ember-appuniversum/components/au-help
 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 AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
 import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
 import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
@@ -61,6 +62,7 @@ export default interface AppuniversumRegistry {
   AuHr: typeof AuHr;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;
+  AuLabel: typeof AuLabel;
   AuLinkExternal: typeof AuLinkExternal;
   AuLink: typeof AuLink;
   AuList: typeof AuList;
diff --git a/tests/integration/components/au-label-test.gts b/tests/integration/components/au-label-test.gts
new file mode 100644
index 000000000..686b23326
--- /dev/null
+++ b/tests/integration/components/au-label-test.gts
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+
+module('Integration | Component | au-label', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it displays block contents and accepts extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuLabel data-test-label>
+          Some label
+        </AuLabel>
+      </template>,
+    );
+
+    assert.dom('[data-test-label]').hasText('Some label');
+  });
+});
diff --git a/tests/integration/components/au-label-test.js b/tests/integration/components/au-label-test.js
deleted file mode 100644
index a692daf49..000000000
--- a/tests/integration/components/au-label-test.js
+++ /dev/null
@@ -1,26 +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-label', 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`<AuLabel />`);
-
-    assert.dom(this.element).hasText('');
-
-    // Template block usage:
-    await render(hbs`
-      <AuLabel>
-        template block text
-      </AuLabel>
-    `);
-
-    assert.dom(this.element).hasText('template block text');
-  });
-});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 4c8f3498d..ccdf3392a 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -158,6 +158,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-input]').exists();
   });
 
+  test('`<AuLabel>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuLabel data-test-label>Some label</AuLabel>
+    `);
+    assert.dom('[data-test-label]').exists();
+  });
+
   test('`<AuLinkExternal>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuLinkExternal data-test-link-external>Foo</AuLinkExternal>

From c03bca1a750f052ee1699a5e41cc371b92f42441 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 18:13:34 +0100
Subject: [PATCH 11/11] Add Glint support to the `AuFieldset` component

---
 .../{au-fieldset.gjs => au-fieldset.gts}      | 46 +++++++++++++++++--
 addon/template-registry.ts                    |  2 +
 .../components/au-fieldset-test.gts           | 23 ++++++++++
 .../integration/components/loose-mode-test.ts |  6 +++
 4 files changed, 73 insertions(+), 4 deletions(-)
 rename addon/components/{au-fieldset.gjs => au-fieldset.gts} (71%)
 create mode 100644 tests/integration/components/au-fieldset-test.gts

diff --git a/addon/components/au-fieldset.gjs b/addon/components/au-fieldset.gts
similarity index 71%
rename from addon/components/au-fieldset.gjs
rename to addon/components/au-fieldset.gts
index 005a10ed1..f76235afe 100644
--- a/addon/components/au-fieldset.gjs
+++ b/addon/components/au-fieldset.gts
@@ -1,8 +1,25 @@
-import { AuBadge, AuPill } from '@appuniversum/ember-appuniversum';
+import type { TOC } from '@ember/component/template-only';
 import { hash } from '@ember/helper';
 import Component from '@glimmer/component';
+import AuBadge from './au-badge';
+import AuPill from './au-pill';
 
-export default class AuFieldset extends Component {
+export interface AuFieldsetSignature {
+  Args: {
+    alignment?: 'inline';
+  };
+  Blocks: {
+    default: [
+      {
+        legend?: typeof Legend;
+        content?: typeof Content;
+      },
+    ];
+  };
+  Element: HTMLFieldSetElement;
+}
+
+export default class AuFieldset extends Component<AuFieldsetSignature> {
   get alignment() {
     if (this.args.alignment == 'inline') return 'au-c-fieldset--inline';
     else return '';
@@ -16,7 +33,22 @@ export default class AuFieldset extends Component {
   </template>
 }
 
-class Legend extends Component {
+interface LegendSignature {
+  Args: {
+    error?: boolean;
+    inline?: boolean;
+    required?: boolean;
+    requiredLabel?: string;
+    skin?: '1' | '2' | '3' | '4' | '5' | '6' | 'functional';
+    warning?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+class Legend extends Component<LegendSignature> {
   get skin() {
     if (this.args.skin == '1') return 'au-u-h1';
     if (this.args.skin == '2') return 'au-u-h2';
@@ -86,7 +118,13 @@ class Legend extends Component {
   </template>
 }
 
-const Content = <template>
+interface ContentSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+const Content: TOC<ContentSignature> = <template>
   {{#if (has-block)}}
     <div class="au-c-fieldset__content" ...attributes>
       {{yield}}
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 2020dab61..34e850a41 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 AuFieldset from '@appuniversum/ember-appuniversum/components/au-fieldset';
 import type AuFileCard from '@appuniversum/ember-appuniversum/components/au-file-card';
 import type AuFileUpload from '@appuniversum/ember-appuniversum/components/au-file-upload';
 import type AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
@@ -54,6 +55,7 @@ export default interface AppuniversumRegistry {
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
+  AuFieldset: typeof AuFieldset;
   AuFileCard: typeof AuFileCard;
   AuFileUpload: typeof AuFileUpload;
   AuFormRow: typeof AuFormRow;
diff --git a/tests/integration/components/au-fieldset-test.gts b/tests/integration/components/au-fieldset-test.gts
new file mode 100644
index 000000000..dff16e28f
--- /dev/null
+++ b/tests/integration/components/au-fieldset-test.gts
@@ -0,0 +1,23 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuFieldset from '@appuniversum/ember-appuniversum/components/au-fieldset';
+
+module('Integration | Component | au-fieldset', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it yields a legend and content component', async function (assert) {
+    await render(
+      <template>
+        <AuFieldset data-test-fieldset as |f|>
+          <f.legend data-test-legend>Legend</f.legend>
+          <f.content data-test-content>Content</f.content>
+        </AuFieldset>
+      </template>,
+    );
+
+    assert.dom('[data-test-fieldset]').exists();
+    assert.dom('[data-test-legend]').hasText('Legend');
+    assert.dom('[data-test-content]').hasText('Content');
+  });
+});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index ccdf3392a..eeddc784c 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('`<AuFieldset>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuFieldset data-test-fieldset />`);
+
+    assert.dom('[data-test-fieldset]').exists();
+  });
+
   test('`<AuFileCard>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuFileCard @filename="test.txt" data-test-file-card />`);