diff --git a/docs-app/app/assets/app.css b/docs-app/app/assets/app.css
index 264908e0..439c8230 100644
--- a/docs-app/app/assets/app.css
+++ b/docs-app/app/assets/app.css
@@ -92,6 +92,12 @@ ul {
   list-style-type: none;
 }
 
+:global(.input-disabled) {
+  background-color: #9ea4b0 !important;
+  color: #546e7a !important;
+  cursor: not-allowed !important;
+}
+
 :global(#ember-testing-container) {
   background-color: #020e1c !important;
   border: 0.0625rem solid rgb(211 211 211 / 15%) !important;
diff --git a/docs-app/app/components/navigation-menu.gts b/docs-app/app/components/navigation-menu.gts
index 6e140b01..40d52a14 100644
--- a/docs-app/app/components/navigation-menu.gts
+++ b/docs-app/app/components/navigation-menu.gts
@@ -1,5 +1,6 @@
 import type { TOC } from '@ember/component/template-only';
 import { LinkTo } from '@ember/routing';
+import { local } from 'embroider-css-modules';
 
 import styles from './navigation-menu.css';
 
@@ -23,7 +24,7 @@ const NavigationMenuComponent: TOC<NavigationMenuSignature> =
           <li>
             <LinkTo
               @route={{menuItem.route}}
-              class={{styles.link}}
+              class={{local styles "link"}}
               data-test-link={{menuItem.label}}
             >
               {{menuItem.label}}
diff --git a/docs-app/app/components/products/product/card.gts b/docs-app/app/components/products/product/card.gts
index 960744d9..57d760b5 100644
--- a/docs-app/app/components/products/product/card.gts
+++ b/docs-app/app/components/products/product/card.gts
@@ -3,7 +3,7 @@ import { hash } from '@ember/helper';
 import { LinkTo } from '@ember/routing';
 import { ContainerQuery, width } from 'ember-container-query';
 
-import type { Product } from '../../../data/products';
+import type { Product } from '../../../data';
 import styles from './card.css';
 import ProductsProductImage from './image';
 
diff --git a/docs-app/app/components/tracks.gts b/docs-app/app/components/tracks.gts
new file mode 100644
index 00000000..372fa8dd
--- /dev/null
+++ b/docs-app/app/components/tracks.gts
@@ -0,0 +1,50 @@
+import type { TOC } from '@ember/component/template-only';
+import { hash } from '@ember/helper';
+import { ContainerQuery, height, width } from 'ember-container-query';
+import { and } from 'ember-truth-helpers';
+
+import type { Track } from '../data';
+import TracksList from './tracks/list';
+import TracksTable from './tracks/table';
+
+interface TracksSignature {
+  Args: {
+    tracks?: Track[];
+  };
+}
+
+const TracksComponent: TOC<TracksSignature> =
+  <template>
+    <ContainerQuery
+      @features={{hash
+        small=(width max=480)
+        medium=(width min=480 max=640)
+        large=(width min=640)
+        tall=(height min=320)
+      }}
+      as |CQ|
+    >
+      {{#if (and CQ.features.large CQ.features.tall)}}
+        <TracksTable @tracks={{@tracks}} />
+
+      {{else}}
+        <TracksList
+          @numColumns={{if
+            CQ.features.small
+            1
+            (if CQ.features.medium 2 3)
+          }}
+          @tracks={{@tracks}}
+        />
+
+      {{/if}}
+    </ContainerQuery>
+  </template>
+
+export default TracksComponent;
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    Tracks: typeof TracksComponent;
+  }
+}
diff --git a/docs-app/app/components/tracks.hbs b/docs-app/app/components/tracks.hbs
deleted file mode 100644
index 8292c474..00000000
--- a/docs-app/app/components/tracks.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-<ContainerQuery
-  @features={{hash
-    small=(width max=480)
-    medium=(width min=480 max=640)
-    large=(width min=640)
-    tall=(height min=320)
-  }}
-  as |CQ|
->
-  {{#if (strict-and CQ.features.large CQ.features.tall)}}
-    <Tracks::Table @tracks={{@tracks}} />
-
-  {{else}}
-    <Tracks::List
-      @numColumns={{if
-        CQ.features.small
-        1
-        (if CQ.features.medium 2 3)
-      }}
-      @tracks={{@tracks}}
-    />
-
-  {{/if}}
-</ContainerQuery>
\ No newline at end of file
diff --git a/docs-app/app/components/tracks.ts b/docs-app/app/components/tracks.ts
deleted file mode 100644
index ae08031c..00000000
--- a/docs-app/app/components/tracks.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import templateOnlyComponent from '@ember/component/template-only';
-
-import type { Track } from '../data/album';
-
-interface TracksSignature {
-  Args: {
-    tracks?: Track[];
-  };
-}
-
-const TracksComponent = templateOnlyComponent<TracksSignature>();
-
-export default TracksComponent;
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    Tracks: typeof TracksComponent;
-  }
-}
diff --git a/docs-app/app/components/tracks/list.ts b/docs-app/app/components/tracks/list.ts
index 365402a8..758d0032 100644
--- a/docs-app/app/components/tracks/list.ts
+++ b/docs-app/app/components/tracks/list.ts
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-import type { Track } from '../../data/album';
+import type { Track } from '../../data';
 import styles from './list.css';
 
 interface TracksListSignature {
diff --git a/docs-app/app/components/tracks/table.gts b/docs-app/app/components/tracks/table.gts
index 33c621f4..08ddf695 100644
--- a/docs-app/app/components/tracks/table.gts
+++ b/docs-app/app/components/tracks/table.gts
@@ -1,6 +1,6 @@
 import type { TOC } from '@ember/component/template-only';
 
-import type { Track } from '../../data/album';
+import type { Track } from '../../data';
 import add from '../../helpers/add';
 import styles from './table.css';
 
diff --git a/docs-app/app/components/ui/form.hbs b/docs-app/app/components/ui/form.hbs
index 7ebdfd60..91907340 100644
--- a/docs-app/app/components/ui/form.hbs
+++ b/docs-app/app/components/ui/form.hbs
@@ -33,6 +33,12 @@
           isWide=CQ.features.wide
           onUpdate=this.updateChangeset
         )
+        Number=(component
+          "ui/form/number"
+          changeset=this.changeset
+          isWide=CQ.features.wide
+          onUpdate=this.updateChangeset
+        )
         Textarea=(component
           "ui/form/textarea"
           changeset=this.changeset
diff --git a/docs-app/app/components/ui/form.ts b/docs-app/app/components/ui/form.ts
index 0b8d9587..7159d9cd 100644
--- a/docs-app/app/components/ui/form.ts
+++ b/docs-app/app/components/ui/form.ts
@@ -2,17 +2,19 @@ import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { WithBoundArgs } from '@glint/template';
+import type { WithBoundArgs } from '@glint/template';
 
 import styles from './form.css';
 import type UiFormCheckboxComponent from './form/checkbox';
 import type UiFormInputComponent from './form/input';
+import type UiFormNumberComponent from './form/number';
 import type UiFormTextareaComponent from './form/textarea';
 
 interface UiFormSignature {
   Args: {
     data?: Record<string, any>;
     instructions?: string;
+    onSubmit: (data: Record<string, any>) => Promise<void>;
     title?: string;
   };
   Blocks: {
@@ -26,6 +28,10 @@ interface UiFormSignature {
           typeof UiFormInputComponent,
           'changeset' | 'isWide' | 'onUpdate'
         >;
+        Number: WithBoundArgs<
+          typeof UiFormNumberComponent,
+          'changeset' | 'isWide' | 'onUpdate'
+        >;
         Textarea: WithBoundArgs<
           typeof UiFormTextareaComponent,
           'changeset' | 'isWide' | 'onUpdate'
@@ -41,10 +47,10 @@ export default class UiFormComponent extends Component<UiFormSignature> {
 
   @tracked changeset = this.args.data ?? ({} as Record<string, any>);
 
-  @action submitForm(event: SubmitEvent): void {
+  @action async submitForm(event: SubmitEvent): Promise<void> {
     event.preventDefault();
 
-    console.table(this.changeset);
+    await this.args.onSubmit(this.changeset);
   }
 
   @action updateChangeset({ key, value }: { key: string; value: any }): void {
diff --git a/docs-app/app/components/ui/form/checkbox.css b/docs-app/app/components/ui/form/checkbox.css
index bc12045f..af645357 100644
--- a/docs-app/app/components/ui/form/checkbox.css
+++ b/docs-app/app/components/ui/form/checkbox.css
@@ -19,19 +19,18 @@
   border-color: transparent;
 }
 
-.checkbox.is-checked {
-  background-color: #1976d2;
+.checkmark-icon {
+  color: white;
 }
 
-.checkbox.is-disabled {
-  background-color: #b2c9d4;
-  cursor: not-allowed;
+.checkbox.is-checked {
+  background-color: #1976d2;
 }
 
-.checkmark-icon {
-  color: white;
+.is-disabled {
+  composes: input-disabled from global;
 }
 
-.checkbox.is-disabled .checkmark-icon {
+.is-disabled .checkmark-icon {
   color: #546e7a;
 }
diff --git a/docs-app/app/components/ui/form/checkbox.hbs b/docs-app/app/components/ui/form/checkbox.hbs
index b1d7ab6e..eec3c914 100644
--- a/docs-app/app/components/ui/form/checkbox.hbs
+++ b/docs-app/app/components/ui/form/checkbox.hbs
@@ -22,11 +22,11 @@
       aria-labelledby={{concat f.inputId "-label"}}
       aria-readonly={{if @isReadOnly "true" "false"}}
       aria-required={{if @isRequired "true" "false"}}
-      class={{local-class
+      class={{local
         this.styles
         "checkbox"
         (if this.isChecked "is-checked")
-        (if (strict-or @isDisabled @isReadOnly) "is-disabled")
+        (if (or @isDisabled @isReadOnly) "is-disabled")
       }}
       data-test-field={{@label}}
       role="checkbox"
diff --git a/docs-app/app/components/ui/form/checkbox.ts b/docs-app/app/components/ui/form/checkbox.ts
index 24fbf9fe..5518216a 100644
--- a/docs-app/app/components/ui/form/checkbox.ts
+++ b/docs-app/app/components/ui/form/checkbox.ts
@@ -1,6 +1,7 @@
 import { action, get } from '@ember/object';
 import Component from '@glimmer/component';
 
+import { generateErrorMessage } from '../../../utils/components/ui/form';
 import styles from './checkbox.css';
 
 interface UiFormCheckboxSignature {
@@ -23,15 +24,11 @@ export default class UiFormCheckboxComponent extends Component<UiFormCheckboxSig
   get errorMessage(): string | undefined {
     const { isRequired } = this.args;
 
-    if (!isRequired) {
-      return undefined;
-    }
-
-    if (!this.isChecked) {
-      return 'Please select the checkbox.';
-    }
-
-    return undefined;
+    return generateErrorMessage({
+      isRequired,
+      value: this.isChecked,
+      valueType: 'boolean',
+    });
   }
 
   get isChecked(): boolean {
diff --git a/docs-app/app/components/ui/form/field.gts b/docs-app/app/components/ui/form/field.gts
index 6e014bd8..a20eb701 100644
--- a/docs-app/app/components/ui/form/field.gts
+++ b/docs-app/app/components/ui/form/field.gts
@@ -4,7 +4,7 @@ import Component from '@glimmer/component';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Could not find a declaration file for module 'ember-svg-jar/helpers/svg-jar'.
 import svgJar from 'ember-svg-jar/helpers/svg-jar';
-import { localClass } from 'embroider-css-modules';
+import { local } from 'embroider-css-modules';
 
 import styles from './field.css';
 
@@ -33,7 +33,7 @@ export default class UiFormFieldComponent extends Component<UiFormFieldSignature
 
   <template>
     <div
-      class={{localClass
+      class={{local
         styles
         "container"
         (if @isInline "is-inline")
@@ -52,7 +52,7 @@ export default class UiFormFieldComponent extends Component<UiFormFieldSignature
 
       {{#if @errorMessage}}
         <div
-          class={{localClass styles "feedback" "is-error"}}
+          class={{local styles "feedback" "is-error"}}
         >
           {{svgJar
             "alert"
diff --git a/docs-app/app/components/ui/form/information.gts b/docs-app/app/components/ui/form/information.gts
index 0c78cd8c..9e330e30 100644
--- a/docs-app/app/components/ui/form/information.gts
+++ b/docs-app/app/components/ui/form/information.gts
@@ -1,7 +1,7 @@
 import type { TOC } from '@ember/component/template-only';
 import { concat } from '@ember/helper';
+import { or } from 'ember-truth-helpers';
 
-import strictOr from '../../../helpers/strict-or';
 import styles from './information.css';
 
 interface UiFormInformationSignature {
@@ -14,7 +14,7 @@ interface UiFormInformationSignature {
 
 const UiFormInformationComponent: TOC<UiFormInformationSignature> =
   <template>
-    {{#if (strictOr @title @instructions)}}
+    {{#if (or @title @instructions)}}
       <div class={{styles.container}}>
         {{#if @title}}
           <div
diff --git a/docs-app/app/components/ui/form/input.css b/docs-app/app/components/ui/form/input.css
index 86fb4239..b1e7afe5 100644
--- a/docs-app/app/components/ui/form/input.css
+++ b/docs-app/app/components/ui/form/input.css
@@ -17,8 +17,6 @@
   font-style: italic;
 }
 
-.input.is-disabled {
-  background-color: #b2c9d4;
-  color: #546e7a;
-  cursor: not-allowed;
+.is-disabled {
+  composes: input-disabled from global;
 }
diff --git a/docs-app/app/components/ui/form/input.hbs b/docs-app/app/components/ui/form/input.hbs
index 0160ea61..14915795 100644
--- a/docs-app/app/components/ui/form/input.hbs
+++ b/docs-app/app/components/ui/form/input.hbs
@@ -16,10 +16,10 @@
 
   <:field as |f|>
     <input
-      class={{local-class
+      class={{local
         this.styles
         "input"
-        (if (strict-or @isDisabled @isReadOnly) "is-disabled")
+        (if (or @isDisabled @isReadOnly) "is-disabled")
       }}
       data-test-field={{@label}}
       disabled={{@isDisabled}}
diff --git a/docs-app/app/components/ui/form/input.ts b/docs-app/app/components/ui/form/input.ts
index de71b2a9..2d6174cd 100644
--- a/docs-app/app/components/ui/form/input.ts
+++ b/docs-app/app/components/ui/form/input.ts
@@ -1,6 +1,8 @@
+import { assert } from '@ember/debug';
 import { action, get } from '@ember/object';
 import Component from '@glimmer/component';
 
+import { generateErrorMessage } from '../../../utils/components/ui/form';
 import styles from './input.css';
 
 interface UiFormInputSignature {
@@ -24,18 +26,21 @@ export default class UiFormInputComponent extends Component<UiFormInputSignature
   get errorMessage(): string | undefined {
     const { isRequired } = this.args;
 
-    if (!isRequired) {
-      return undefined;
-    }
-
-    if (!this.value) {
-      return 'Please provide a value.';
-    }
-
-    return undefined;
+    return generateErrorMessage({
+      isRequired,
+      value: this.value,
+      valueType: 'string',
+    });
   }
 
   get type(): string {
+    const { type } = this.args;
+
+    assert(
+      'To render a number input, please use <Ui::Form::Number> instead.',
+      type !== 'number',
+    );
+
     return this.args.type ?? 'text';
   }
 
diff --git a/docs-app/app/components/ui/form/number.css b/docs-app/app/components/ui/form/number.css
new file mode 100644
index 00000000..5ee17371
--- /dev/null
+++ b/docs-app/app/components/ui/form/number.css
@@ -0,0 +1,7 @@
+.input {
+  composes: input from "./input.css";
+}
+
+.is-disabled {
+  composes: input-disabled from global;
+}
diff --git a/docs-app/app/components/ui/form/number.css.d.ts b/docs-app/app/components/ui/form/number.css.d.ts
new file mode 100644
index 00000000..a9bdc606
--- /dev/null
+++ b/docs-app/app/components/ui/form/number.css.d.ts
@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly 'input': string;
+  readonly 'is-disabled': string;
+};
+
+export default styles;
diff --git a/docs-app/app/components/ui/form/number.hbs b/docs-app/app/components/ui/form/number.hbs
new file mode 100644
index 00000000..0bbf8961
--- /dev/null
+++ b/docs-app/app/components/ui/form/number.hbs
@@ -0,0 +1,38 @@
+<Ui::Form::Field
+  @errorMessage={{this.errorMessage}}
+  @isWide={{@isWide}}
+>
+  <:label as |l|>
+    <label data-test-label for={{l.inputId}}>
+      {{@label}}
+
+      {{#if @isRequired}}
+        <span aria-hidden="true">
+          *
+        </span>
+      {{/if}}
+    </label>
+  </:label>
+
+  <:field as |f|>
+    <input
+      class={{local
+        this.styles
+        "input"
+        (if (or @isDisabled @isReadOnly) "is-disabled")
+      }}
+      data-test-field={{@label}}
+      disabled={{@isDisabled}}
+      id={{f.inputId}}
+      max={{@maxValue}}
+      min={{@minValue}}
+      placeholder={{@placeholder}}
+      readonly={{@isReadOnly}}
+      required={{@isRequired}}
+      step={{if @step @step "any"}}
+      type="number"
+      value={{this.value}}
+      {{on "input" this.updateValue}}
+    />
+  </:field>
+</Ui::Form::Field>
\ No newline at end of file
diff --git a/docs-app/app/components/ui/form/number.ts b/docs-app/app/components/ui/form/number.ts
new file mode 100644
index 00000000..20f921bf
--- /dev/null
+++ b/docs-app/app/components/ui/form/number.ts
@@ -0,0 +1,64 @@
+import { action, get } from '@ember/object';
+import Component from '@glimmer/component';
+
+import { generateErrorMessage } from '../../../utils/components/ui/form';
+import styles from './number.css';
+
+interface UiFormNumberSignature {
+  Args: {
+    changeset: Record<string, any>;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isWide?: boolean;
+    key: string;
+    label: string;
+    maxValue?: number;
+    minValue?: number;
+    onUpdate: ({ key, value }: { key: string; value: any }) => void;
+    placeholder?: string;
+    step?: number | 'any';
+    type?: string;
+  };
+}
+
+export default class UiFormNumberComponent extends Component<UiFormNumberSignature> {
+  styles = styles;
+
+  get errorMessage(): string | undefined {
+    const { isRequired } = this.args;
+
+    return generateErrorMessage({
+      isRequired,
+      value: this.value,
+      valueType: 'number',
+    });
+  }
+
+  get value(): string {
+    const { changeset, key } = this.args;
+
+    return ((get(changeset, key) as string) ?? '').toString();
+  }
+
+  @action updateValue(event: Event): void {
+    const { key, onUpdate } = this.args;
+    const { value } = event.target as HTMLInputElement;
+
+    const valueAsNumber = Number.parseFloat(value);
+
+    if (Number.isNaN(valueAsNumber)) {
+      onUpdate({ key, value: undefined });
+      return;
+    }
+
+    onUpdate({ key, value: valueAsNumber });
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Ui::Form::Number': typeof UiFormNumberComponent;
+    'ui/form/number': typeof UiFormNumberComponent;
+  }
+}
diff --git a/docs-app/app/components/ui/form/textarea.css b/docs-app/app/components/ui/form/textarea.css
index dae135db..04cf7f48 100644
--- a/docs-app/app/components/ui/form/textarea.css
+++ b/docs-app/app/components/ui/form/textarea.css
@@ -1,24 +1,7 @@
 .textarea {
-  border: 0.125rem solid #ffd54f;
-  padding: 0.125rem 0.25rem;
-  width: calc(100% - 0.75rem);
+  composes: input from "./input.css";
 }
 
-.textarea:focus {
-  background-color: #ffecb3;
-  outline: 0;
-}
-
-.textarea:not(:focus) {
-  border-color: transparent;
-}
-
-.textarea::placeholder {
-  font-style: italic;
-}
-
-.textarea.is-disabled {
-  background-color: #b2c9d4;
-  color: #546e7a;
-  cursor: not-allowed;
+.is-disabled {
+  composes: input-disabled from global;
 }
diff --git a/docs-app/app/components/ui/form/textarea.hbs b/docs-app/app/components/ui/form/textarea.hbs
index 4f5528e7..d50fb3e6 100644
--- a/docs-app/app/components/ui/form/textarea.hbs
+++ b/docs-app/app/components/ui/form/textarea.hbs
@@ -16,10 +16,10 @@
 
   <:field as |f|>
     <textarea
-      class={{local-class
+      class={{local
         this.styles
         "textarea"
-        (if (strict-or @isDisabled @isReadOnly) "is-disabled")
+        (if (or @isDisabled @isReadOnly) "is-disabled")
       }}
       data-test-field={{@label}}
       disabled={{@isDisabled}}
diff --git a/docs-app/app/components/ui/form/textarea.ts b/docs-app/app/components/ui/form/textarea.ts
index d948112b..eefd2f25 100644
--- a/docs-app/app/components/ui/form/textarea.ts
+++ b/docs-app/app/components/ui/form/textarea.ts
@@ -1,6 +1,7 @@
 import { action, get } from '@ember/object';
 import Component from '@glimmer/component';
 
+import { generateErrorMessage } from '../../../utils/components/ui/form';
 import styles from './textarea.css';
 
 interface UiFormTextareaSignature {
@@ -23,15 +24,11 @@ export default class UiFormTextareaComponent extends Component<UiFormTextareaSig
   get errorMessage(): string | undefined {
     const { isRequired } = this.args;
 
-    if (!isRequired) {
-      return undefined;
-    }
-
-    if (!this.value) {
-      return 'Please provide a value.';
-    }
-
-    return undefined;
+    return generateErrorMessage({
+      isRequired,
+      value: this.value,
+      valueType: 'string',
+    });
   }
 
   get value(): string {
@@ -42,7 +39,7 @@ export default class UiFormTextareaComponent extends Component<UiFormTextareaSig
 
   @action updateValue(event: Event): void {
     const { key, onUpdate } = this.args;
-    const { value } = event.target as HTMLInputElement;
+    const { value } = event.target as HTMLTextAreaElement;
 
     onUpdate({ key, value });
   }
diff --git a/docs-app/app/components/ui/page.css b/docs-app/app/components/ui/page.css
index ee54620b..24409c1a 100644
--- a/docs-app/app/components/ui/page.css
+++ b/docs-app/app/components/ui/page.css
@@ -1,8 +1,8 @@
 .container {
   display: grid;
   grid-template-areas:
-    "header"
-    "body";
+    "title"
+    "content";
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   height: calc(100% - 3em);
@@ -11,10 +11,10 @@
   scrollbar-gutter: stable;
 }
 
-.header {
-  grid-area: header;
+.title {
+  grid-area: title;
 }
 
-.body {
-  grid-area: body;
+.content {
+  grid-area: content;
 }
diff --git a/docs-app/app/components/ui/page.css.d.ts b/docs-app/app/components/ui/page.css.d.ts
index 9d7e65cc..caca99b7 100644
--- a/docs-app/app/components/ui/page.css.d.ts
+++ b/docs-app/app/components/ui/page.css.d.ts
@@ -1,7 +1,7 @@
 declare const styles: {
-  readonly 'body': string;
   readonly 'container': string;
-  readonly 'header': string;
+  readonly 'content': string;
+  readonly 'title': string;
 };
 
 export default styles;
diff --git a/docs-app/app/components/ui/page.gts b/docs-app/app/components/ui/page.gts
index a3a72ee8..66c0fc4a 100644
--- a/docs-app/app/components/ui/page.gts
+++ b/docs-app/app/components/ui/page.gts
@@ -1,5 +1,4 @@
 import type { TOC } from '@ember/component/template-only';
-import { localClass } from 'embroider-css-modules';
 
 import styles from './page.css';
 
@@ -14,13 +13,13 @@ interface UiPageSignature {
 
 const UiPageComponent: TOC<UiPageSignature> =
   <template>
-    <div class={{localClass styles "container"}}>
-      <h1 class={{styles.header}}>
+    <div class={{styles.container}}>
+      <h1 class={{styles.title}}>
         {{@title}}
       </h1>
 
       <div
-        class="{{styles.body}}"
+        class={{styles.content}}
         id="main-content"
         tabindex="-1"
       >
diff --git a/docs-app/app/components/widgets/widget-2.ts b/docs-app/app/components/widgets/widget-2.ts
index 9d87dd96..983e7c86 100644
--- a/docs-app/app/components/widgets/widget-2.ts
+++ b/docs-app/app/components/widgets/widget-2.ts
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import musicRevenue from '../../data/music-revenue';
+import { musicRevenues } from '../../data';
 import type { Data, Summary } from '../../utils/components/widgets/widget-2';
 import {
   createDataForVisualization,
@@ -27,7 +27,7 @@ export default class WidgetsWidget2Component extends Component<WidgetsWidget2Sig
   }
 
   loadData(): void {
-    this.data = createDataForVisualization(musicRevenue);
+    this.data = createDataForVisualization(musicRevenues);
     this.summaries = createSummariesForCaptions(this.data);
   }
 }
diff --git a/docs-app/app/components/widgets/widget-2/captions.hbs b/docs-app/app/components/widgets/widget-2/captions.hbs
index 12c4b063..315b7c37 100644
--- a/docs-app/app/components/widgets/widget-2/captions.hbs
+++ b/docs-app/app/components/widgets/widget-2/captions.hbs
@@ -3,7 +3,7 @@
   as |CQ|
 >
   <div
-    class={{local-class
+    class={{local
       this.styles
       "container"
       (unless CQ.features.tall "flat")
@@ -11,7 +11,7 @@
   >
     {{#if this.summary}}
       <div
-        class={{local-class
+        class={{local
           this.styles
           "summary"
           (if CQ.features.large "horizontal-layout")
@@ -19,7 +19,7 @@
         tabindex="0"
       >
         <h3
-          class={{local-class
+          class={{local
             this.styles
             "music-format"
             (unless CQ.features.large "small-font-size")
@@ -45,7 +45,7 @@
           class={{this.styles.annual-revenue}}
           data-test-field="Annual Revenue"
         >
-          {{#if (strict-or CQ.features.tall CQ.features.large)}}
+          {{#if (or CQ.features.tall CQ.features.large)}}
             <span>Annual revenue:</span>
           {{/if}}
 
@@ -58,7 +58,7 @@
           class={{this.styles.relevant-years}}
           data-test-field="Relevant Years"
         >
-          {{#if (strict-or CQ.features.tall CQ.features.large)}}
+          {{#if (or CQ.features.tall CQ.features.large)}}
             <span>Relevant years:</span>
           {{/if}}
 
@@ -84,7 +84,7 @@
           {{else}}
             {{svg-jar
               "chevron-left"
-              class=(local-class this.styles "icon")
+              class=(local this.styles "icon")
               desc="A chevron arrow pointing left"
               role="img"
             }}
@@ -107,7 +107,7 @@
           {{else}}
             {{svg-jar
               "chevron-right"
-              class=(local-class this.styles "icon")
+              class=(local this.styles "icon")
               desc="A chevron arrow pointing right"
               role="img"
             }}
diff --git a/docs-app/app/components/widgets/widget-3.hbs b/docs-app/app/components/widgets/widget-3.hbs
index 3b06986f..7daf4686 100644
--- a/docs-app/app/components/widgets/widget-3.hbs
+++ b/docs-app/app/components/widgets/widget-3.hbs
@@ -14,7 +14,7 @@
     data-test-tour-schedule
   >
     <Widgets::Widget-3::TourSchedule
-      @concert={{this.concertData}}
+      @concert={{this.concert}}
     />
   </div>
 </section>
\ No newline at end of file
diff --git a/docs-app/app/components/widgets/widget-3.ts b/docs-app/app/components/widgets/widget-3.ts
index 99be5fb2..ed491332 100644
--- a/docs-app/app/components/widgets/widget-3.ts
+++ b/docs-app/app/components/widgets/widget-3.ts
@@ -1,8 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import type { Concert } from '../../data/concert';
-import concertData from '../../data/concert';
+import { type Concert, concert } from '../../data';
 import styles from './widget-3.css';
 
 interface WidgetsWidget3Signature {
@@ -13,7 +12,7 @@ interface WidgetsWidget3Signature {
 export default class WidgetsWidget3Component extends Component<WidgetsWidget3Signature> {
   styles = styles;
 
-  @tracked concertData = {} as Concert;
+  @tracked concert = {} as Concert;
 
   constructor(owner: unknown, args: WidgetsWidget3Signature['Args']) {
     super(owner, args);
@@ -22,7 +21,7 @@ export default class WidgetsWidget3Component extends Component<WidgetsWidget3Sig
   }
 
   loadData(): void {
-    this.concertData = concertData;
+    this.concert = concert;
   }
 }
 
diff --git a/docs-app/app/components/widgets/widget-3/tour-schedule.gts b/docs-app/app/components/widgets/widget-3/tour-schedule.gts
index 27fd7e86..7304011d 100644
--- a/docs-app/app/components/widgets/widget-3/tour-schedule.gts
+++ b/docs-app/app/components/widgets/widget-3/tour-schedule.gts
@@ -2,7 +2,7 @@ import type { TOC } from '@ember/component/template-only';
 import { hash } from '@ember/helper';
 import { ContainerQuery, width } from 'ember-container-query';
 
-import type { Concert } from '../../../data/concert';
+import type { Concert } from '../../../data';
 import styles from './tour-schedule.css';
 import WidgetsWidget3TourScheduleResponsiveImage from './tour-schedule/responsive-image';
 
diff --git a/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.gts b/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.gts
index 8a2c61f8..91e0abda 100644
--- a/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.gts
+++ b/docs-app/app/components/widgets/widget-3/tour-schedule/responsive-image.gts
@@ -3,13 +3,13 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { containerQuery, type Dimensions } from 'ember-container-query';
 
-import type { Image } from '../../../../data/concert';
+import type { ConcertImage } from '../../../../data';
 import { findBestFittingImage } from '../../../../utils/components/widgets/widget-3';
 import styles from './responsive-image.css';
 
 interface WidgetsWidget3TourScheduleResponsiveImageSignature {
   Args: {
-    images: Image[];
+    images: ConcertImage[];
   };
 }
 
diff --git a/docs-app/app/components/widgets/widget-4/memo/actions.gts b/docs-app/app/components/widgets/widget-4/memo/actions.gts
index f034d663..5be612cc 100644
--- a/docs-app/app/components/widgets/widget-4/memo/actions.gts
+++ b/docs-app/app/components/widgets/widget-4/memo/actions.gts
@@ -3,9 +3,9 @@ import type { QueryResults } from 'ember-container-query';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Could not find a declaration file for module 'ember-svg-jar/helpers/svg-jar'.
 import svgJar from 'ember-svg-jar/helpers/svg-jar';
-import { localClass } from 'embroider-css-modules';
+import { or } from 'ember-truth-helpers';
+import { local } from 'embroider-css-modules';
 
-import strictOr from '../../../../helpers/strict-or';
 import styles from './actions.css';
 
 interface WidgetsWidget4MemoActionsSignature {
@@ -17,11 +17,11 @@ interface WidgetsWidget4MemoActionsSignature {
 const WidgetsWidget4MemoActionsComponent: TOC<WidgetsWidget4MemoActionsSignature> =
   <template>
     <div
-      class={{localClass
+      class={{local
         styles
         "actions"
         (if
-          (strictOr @cqFeatures.small @cqFeatures.short)
+          (or @cqFeatures.small @cqFeatures.short)
           "minimal-layout"
         )
       }}
@@ -34,7 +34,7 @@ const WidgetsWidget4MemoActionsComponent: TOC<WidgetsWidget4MemoActionsSignature
       >
         {{svgJar
           "message-processing-outline"
-          class=(localClass styles "icon" "icon-comment")
+          class=(local styles "icon" "icon-comment")
           desc="A speech bubble"
           role="img"
         }}
@@ -47,7 +47,7 @@ const WidgetsWidget4MemoActionsComponent: TOC<WidgetsWidget4MemoActionsSignature
       >
         {{svgJar
           "sync"
-          class=(localClass styles "icon" "icon-repost")
+          class=(local styles "icon" "icon-repost")
           desc="Two circular arrows pointing to each other"
           role="img"
         }}
diff --git a/docs-app/app/components/widgets/widget-4/memo/body.gts b/docs-app/app/components/widgets/widget-4/memo/body.gts
index 0b1b0540..3a486d19 100644
--- a/docs-app/app/components/widgets/widget-4/memo/body.gts
+++ b/docs-app/app/components/widgets/widget-4/memo/body.gts
@@ -1,8 +1,8 @@
 import type { TOC } from '@ember/component/template-only';
 import type { QueryResults } from 'ember-container-query';
-import { localClass } from 'embroider-css-modules';
+import { or } from 'ember-truth-helpers';
+import { local } from 'embroider-css-modules';
 
-import strictOr from '../../../../helpers/strict-or';
 import styles from './body.css';
 
 interface WidgetsWidget4MemoBodySignature {
@@ -14,11 +14,11 @@ interface WidgetsWidget4MemoBodySignature {
 const WidgetsWidget4MemoBodyComponent: TOC<WidgetsWidget4MemoBodySignature> =
   <template>
     <div
-      class={{localClass
+      class={{local
         styles
         "body"
         (if
-          (strictOr @cqFeatures.small @cqFeatures.short)
+          (or @cqFeatures.small @cqFeatures.short)
           "minimal-layout"
         )
       }}
diff --git a/docs-app/app/components/widgets/widget-4/memo/header.gts b/docs-app/app/components/widgets/widget-4/memo/header.gts
index cdf1a573..c109c37b 100644
--- a/docs-app/app/components/widgets/widget-4/memo/header.gts
+++ b/docs-app/app/components/widgets/widget-4/memo/header.gts
@@ -1,9 +1,8 @@
 import type { TOC } from '@ember/component/template-only';
 import type { QueryResults } from 'ember-container-query';
-import { localClass } from 'embroider-css-modules';
+import { and, or } from 'ember-truth-helpers';
+import { local } from 'embroider-css-modules';
 
-import strictAnd from '../../../../helpers/strict-and';
-import strictOr from '../../../../helpers/strict-or';
 import styles from './header.css';
 
 interface WidgetsWidget4MemoHeaderSignature {
@@ -15,12 +14,12 @@ interface WidgetsWidget4MemoHeaderSignature {
 const WidgetsWidget4MemoHeaderComponent: TOC<WidgetsWidget4MemoHeaderSignature> =
   <template>
     {{#let
-      (strictAnd @cqFeatures.large @cqFeatures.short)
-      (strictOr @cqFeatures.small @cqFeatures.short)
+      (and @cqFeatures.large @cqFeatures.short)
+      (or @cqFeatures.small @cqFeatures.short)
       as |showHorizontalLayout showMinimalLayout|
     }}
       <div
-        class={{localClass
+        class={{local
           styles
           "header"
           (if showMinimalLayout "minimal-layout")
diff --git a/docs-app/app/components/widgets/widget-5.gts b/docs-app/app/components/widgets/widget-5.gts
index 748c88c0..8cfb282f 100644
--- a/docs-app/app/components/widgets/widget-5.gts
+++ b/docs-app/app/components/widgets/widget-5.gts
@@ -1,8 +1,8 @@
 import type { TOC } from '@ember/component/template-only';
 import { hash } from '@ember/helper';
 import { ContainerQuery, height, width } from 'ember-container-query';
+import { and } from 'ember-truth-helpers';
 
-import strictAnd from '../../helpers/strict-and';
 import styles from './widget-5.css';
 
 interface WidgetsWidget5Signature {}
@@ -16,7 +16,7 @@ const WidgetsWidget5Component: TOC<WidgetsWidget5Signature> =
       as |CQ|
     >
       {{#let
-        (strictAnd CQ.features.large CQ.features.tall)
+        (and CQ.features.large CQ.features.tall)
         as |showFullText|
       }}
         <div
diff --git a/docs-app/app/controllers/form.ts b/docs-app/app/controllers/form.ts
index 5ca7d37a..cea3ef73 100644
--- a/docs-app/app/controllers/form.ts
+++ b/docs-app/app/controllers/form.ts
@@ -1,7 +1,12 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 
 import styles from './form.css';
 
 export default class FormController extends Controller {
   styles = styles;
+
+  @action async submitForm(data: Record<string, any>): Promise<void> {
+    console.table(data);
+  }
 }
diff --git a/docs-app/app/controllers/products.ts b/docs-app/app/controllers/products.ts
index b54f2b13..be113124 100644
--- a/docs-app/app/controllers/products.ts
+++ b/docs-app/app/controllers/products.ts
@@ -5,8 +5,6 @@ import { tracked } from '@glimmer/tracking';
 import type { Model } from '../routes/products';
 import styles from './products.css';
 
-type SupportedKey = 'name';
-
 export default class ProductsController extends Controller {
   declare model: Model;
 
@@ -34,13 +32,17 @@ export default class ProductsController extends Controller {
     });
   }
 
-  @action noOp({ key, value }: { key: string; value: any }) {
+  @action updateQueryParameters({ key, value }: { key: string; value: any }) {
+    if (key !== 'name') {
+      return;
+    }
+
     if (value === undefined || value === '') {
-      this[key as SupportedKey] = null;
+      this[key] = null;
 
       return;
     }
 
-    this[key as SupportedKey] = value;
+    this[key] = value;
   }
 }
diff --git a/docs-app/app/data/album.ts b/docs-app/app/data/album.ts
index 498f8d4e..189db20a 100644
--- a/docs-app/app/data/album.ts
+++ b/docs-app/app/data/album.ts
@@ -14,7 +14,7 @@ export type Album = {
   tracks: Track[];
 };
 
-const album: Album = {
+export const album: Album = {
   name: 'How to Be a Human Being',
   publicationDate: '2016',
   totalLengthInMinutes: 43,
@@ -79,5 +79,3 @@ const album: Album = {
     },
   ],
 };
-
-export default album;
diff --git a/docs-app/app/data/concert.ts b/docs-app/app/data/concert.ts
index 18f2de77..3a54925f 100644
--- a/docs-app/app/data/concert.ts
+++ b/docs-app/app/data/concert.ts
@@ -1,4 +1,4 @@
-export type Image = {
+export type ConcertImage = {
   metadata: {
     height: number;
     width: number;
@@ -8,7 +8,7 @@ export type Image = {
 
 export type Concert = {
   date: string;
-  images: Image[];
+  images: ConcertImage[];
   location: {
     city: string;
     state: string;
@@ -16,7 +16,7 @@ export type Concert = {
   name: string;
 };
 
-const concert: Concert = {
+export const concert: Concert = {
   name: 'ACL Live',
   date: 'Jun 01',
   location: {
@@ -89,5 +89,3 @@ const concert: Concert = {
     },
   ],
 };
-
-export default concert;
diff --git a/docs-app/app/data/index.ts b/docs-app/app/data/index.ts
new file mode 100644
index 00000000..9cbc214d
--- /dev/null
+++ b/docs-app/app/data/index.ts
@@ -0,0 +1,4 @@
+export * from './album';
+export * from './concert';
+export * from './music-revenue';
+export * from './products';
diff --git a/docs-app/app/data/music-revenue.ts b/docs-app/app/data/music-revenue.ts
index 4687d7f5..8414bb18 100644
--- a/docs-app/app/data/music-revenue.ts
+++ b/docs-app/app/data/music-revenue.ts
@@ -1,4 +1,4 @@
-export type Revenue = {
+export type MusicRevenue = {
   Format: string;
   Revenue: number;
   'Revenue (Inflation Adjusted)': number;
@@ -6,7 +6,7 @@ export type Revenue = {
   Year: number;
 };
 
-const revenues: Revenue[] = [
+export const musicRevenues: MusicRevenue[] = [
   {
     Format: '8 - Track',
     Year: 1973,
@@ -7414,5 +7414,3 @@ const revenues: Revenue[] = [
     'Revenue (Inflation Adjusted)': 5300000,
   },
 ];
-
-export default revenues;
diff --git a/docs-app/app/data/products.ts b/docs-app/app/data/products.ts
index 63553e48..259ba163 100644
--- a/docs-app/app/data/products.ts
+++ b/docs-app/app/data/products.ts
@@ -1,4 +1,22 @@
+type CategoryId =
+  | 'bacon'
+  | 'balloon'
+  | 'cake'
+  | 'chair'
+  | 'fish'
+  | 'gloves'
+  | 'hat'
+  | 'mug'
+  | 'pants'
+  | 'pasta'
+  | 'pizza'
+  | 'sausages'
+  | 'shoes'
+  | 'soap'
+  | 'towel';
+
 export type Product = {
+  categoryId: CategoryId;
   description: string;
   id: string;
   imageUrl: string;
@@ -9,8 +27,9 @@ export type Product = {
   shortDescription: string;
 };
 
-const products: Product[] = [
+export const products: Product[] = [
   {
+    categoryId: 'cake',
     description: 'Made with organic herbs',
     id: '1',
     imageUrl:
@@ -22,17 +41,19 @@ const products: Product[] = [
     shortDescription: 'Made with organic herbs',
   },
   {
-    description: 'Decorate your laptop with Tomster and Zoey!',
+    categoryId: 'mug',
+    description: 'A good day starts with a good cup of coffee',
     id: '2',
     imageUrl:
       'https://images.pexels.com/photos/1516415/pexels-photo-1516415.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=256',
-    name: 'Ember.js Stickers',
+    name: 'Ember.js Mug',
     price: 8,
     rating: 5,
     seller: 'Ember',
-    shortDescription: 'Decorate your laptop with Tomster and Zoey!',
+    shortDescription: 'A good day starts with a good cup of coffee',
   },
   {
+    categoryId: 'cake',
     description: 'A chocolate sponge cake with a rich cherry filling',
     id: '3',
     imageUrl:
@@ -44,6 +65,7 @@ const products: Product[] = [
     shortDescription: 'A chocolate sponge cake with a rich cherry filling',
   },
   {
+    categoryId: 'sausages',
     description:
       'Tempore culpa repellat voluptatum blanditiis recusandae voluptatum similique sint aliquid. Saepe enim pariatur eaque eaque reprehenderit voluptates. Iure voluptate sequi harum. Voluptate asperiores placeat itaque nemo molestiae ducimus provident. Repellendus vel eius nihil minus similique quam nobis iste assumenda.',
     id: '4',
@@ -56,6 +78,7 @@ const products: Product[] = [
     shortDescription: 'Visionary executive local area network',
   },
   {
+    categoryId: 'pants',
     description:
       'Minus explicabo expedita voluptas inventore dicta dignissimos earum. Architecto voluptatibus omnis doloremque autem. Maxime sunt laudantium sit totam. Incidunt consequatur totam animi consectetur. Tenetur velit nihil quas officia maiores modi. Soluta a culpa fuga animi nam recusandae assumenda quas laudantium.',
     id: '5',
@@ -68,6 +91,7 @@ const products: Product[] = [
     shortDescription: 'Seamless fault-tolerant synergy',
   },
   {
+    categoryId: 'chair',
     description:
       'Dicta dolorum ea est accusamus accusamus et dolorum repellat. Sed rem pariatur pariatur animi assumenda deserunt. Laborum aspernatur optio quo aliquam.',
     id: '6',
@@ -80,6 +104,7 @@ const products: Product[] = [
     shortDescription: 'Customizable zero administration challenge',
   },
   {
+    categoryId: 'sausages',
     description:
       'Magni natus qui facere. Numquam illum voluptate. Voluptates provident inventore expedita veritatis. Itaque quae perspiciatis aliquid. Quas consequatur facere quia reprehenderit eos vel.',
     id: '7',
@@ -92,6 +117,7 @@ const products: Product[] = [
     shortDescription: 'Fully-configurable client-driven neural-net',
   },
   {
+    categoryId: 'pants',
     description:
       'Quae ipsum ducimus atque distinctio similique voluptatum sequi ea. Officiis adipisci fugiat possimus. Tenetur eligendi voluptatem nulla magnam itaque fugiat enim laudantium voluptate. Voluptatem eaque nostrum quibusdam at. Cum itaque ipsa assumenda reprehenderit dolor animi inventore rem. Reprehenderit nesciunt non itaque labore accusamus maxime.',
     id: '8',
@@ -104,6 +130,7 @@ const products: Product[] = [
     shortDescription: 'Total responsive attitude',
   },
   {
+    categoryId: 'sausages',
     description:
       'Reprehenderit eos esse pariatur soluta tempore tempora. Rem consequuntur excepturi officiis mollitia eos sint dolor nisi tempore. Culpa maxime nihil odit. Aliquam sapiente illum quos magnam odio aliquid provident illo sint.',
     id: '9',
@@ -116,6 +143,7 @@ const products: Product[] = [
     shortDescription: 'Intuitive reciprocal solution',
   },
   {
+    categoryId: 'pants',
     description:
       'Ipsa minima consectetur reprehenderit labore qui earum numquam praesentium. Consectetur corporis expedita similique nobis. Numquam ipsa officiis consequatur itaque. Maxime modi vero nam aut optio aut.',
     id: '10',
@@ -128,6 +156,7 @@ const products: Product[] = [
     shortDescription: 'Monitored eco-centric installation',
   },
   {
+    categoryId: 'soap',
     description:
       'Aliquam explicabo fugiat quidem libero tenetur nobis aliquid voluptas. Modi ab ipsa quisquam numquam rem molestiae. Molestiae pariatur unde perferendis fugit itaque temporibus quo ducimus. Natus cum quibusdam harum in perspiciatis perspiciatis. Magni quis quaerat reprehenderit facere.',
     id: '11',
@@ -140,6 +169,7 @@ const products: Product[] = [
     shortDescription: 'Vision-oriented encompassing encoding',
   },
   {
+    categoryId: 'towel',
     description:
       'Dolores perspiciatis enim. Eligendi dolores dolorum ratione quasi quae quas commodi incidunt. Dolore assumenda impedit optio quam explicabo. Laudantium accusamus asperiores assumenda excepturi at non iure consequatur repudiandae. Id vitae quo. Illo architecto dolores quisquam quia labore magni optio nulla est.',
     id: '12',
@@ -152,6 +182,7 @@ const products: Product[] = [
     shortDescription: 'Reactive scalable circuit',
   },
   {
+    categoryId: 'mug',
     description:
       'Odit provident earum eum tenetur ab perspiciatis minima quia impedit. Eos debitis qui atque officiis accusamus ullam maiores dolor. Aperiam eligendi deserunt tempora. Provident odit debitis voluptas provident sit. Magni quia quas voluptas voluptas aut officiis cum aliquid.',
     id: '13',
@@ -164,6 +195,7 @@ const products: Product[] = [
     shortDescription: 'Universal zero defect conglomeration',
   },
   {
+    categoryId: 'pasta',
     description:
       'Sapiente voluptates tempore quia nam sed iste blanditiis. Non quam modi veniam nemo doloribus rem est. Suscipit qui quibusdam. Temporibus reiciendis alias dolorem nemo odio blanditiis deleniti. Porro suscipit nam labore reprehenderit quidem. Sed aperiam hic tenetur quidem.',
     id: '14',
@@ -176,6 +208,7 @@ const products: Product[] = [
     shortDescription: 'Triple-buffered system-worthy emulation',
   },
   {
+    categoryId: 'gloves',
     description:
       'Dolore necessitatibus dolor voluptates quidem. Maiores aspernatur eius possimus odio recusandae et asperiores. Dolorum explicabo inventore placeat consequatur repudiandae est quidem adipisci qui. Nihil laboriosam laborum ratione dolore minus. Ipsum doloremque quaerat dolore. Sequi hic quod.',
     id: '15',
@@ -188,6 +221,7 @@ const products: Product[] = [
     shortDescription: 'Focused neutral product',
   },
   {
+    categoryId: 'pizza',
     description: 'Odit laborum a. Alias molestias quia quasi ratione enim.',
     id: '16',
     imageUrl:
@@ -199,6 +233,7 @@ const products: Product[] = [
     shortDescription: 'Devolved asymmetric frame',
   },
   {
+    categoryId: 'chair',
     description:
       'Voluptatum commodi magnam corporis id laboriosam necessitatibus dicta explicabo. Ut magnam expedita suscipit ea. Autem maxime nobis minus tenetur impedit labore officia. Amet qui blanditiis quod est at doloribus. Possimus earum odit debitis totam veniam neque amet. Molestiae error vel vel ipsum.',
     id: '17',
@@ -211,6 +246,7 @@ const products: Product[] = [
     shortDescription: 'Switchable scalable time-frame',
   },
   {
+    categoryId: 'pants',
     description:
       'Corrupti labore at labore cumque odio. Quos mollitia id aliquid hic esse expedita odit iste. Officia reprehenderit dolores. Amet itaque velit quae voluptatum.',
     id: '18',
@@ -223,6 +259,7 @@ const products: Product[] = [
     shortDescription: 'Innovative uniform monitoring',
   },
   {
+    categoryId: 'sausages',
     description:
       'Ipsum veniam aliquam. Reiciendis temporibus unde repellat tempora quod deleniti necessitatibus quos. Eaque quas sint perspiciatis vel impedit dolore.',
     id: '19',
@@ -235,6 +272,7 @@ const products: Product[] = [
     shortDescription: 'Integrated intangible superstructure',
   },
   {
+    categoryId: 'pasta',
     description:
       'Totam amet vel ex ullam iste sint hic exercitationem. Perspiciatis eos commodi quia impedit quam recusandae laborum vitae nulla. Debitis quae non ea accusamus harum fuga tempore facilis recusandae. Voluptates ex perspiciatis fugiat sint nemo deleniti incidunt rerum architecto.',
     id: '20',
@@ -247,6 +285,7 @@ const products: Product[] = [
     shortDescription: 'Stand-alone full-range toolset',
   },
   {
+    categoryId: 'shoes',
     description:
       'Earum veritatis autem similique amet. Numquam asperiores corporis sapiente quis repellat reiciendis aut ipsa. Labore natus nobis. Eos laboriosam iure praesentium occaecati quisquam exercitationem. Consequuntur repudiandae exercitationem voluptas excepturi voluptatum vitae earum quia odit.',
     id: '21',
@@ -259,6 +298,7 @@ const products: Product[] = [
     shortDescription: 'Profound 4th generation project',
   },
   {
+    categoryId: 'pants',
     description:
       'Dolore exercitationem error dicta quos fuga excepturi et. Libero quis voluptate dolorem blanditiis accusamus porro quisquam dolorum perspiciatis. Ea repellendus saepe quia ipsam esse odio.',
     id: '22',
@@ -271,6 +311,7 @@ const products: Product[] = [
     shortDescription: 'Organized fresh-thinking data-warehouse',
   },
   {
+    categoryId: 'towel',
     description:
       'Voluptatibus tempora officia debitis ducimus cumque. Nisi voluptate veritatis nam harum. Error voluptate nulla cumque culpa ullam expedita hic.',
     id: '23',
@@ -283,6 +324,7 @@ const products: Product[] = [
     shortDescription: 'Operative transitional methodology',
   },
   {
+    categoryId: 'cake',
     description:
       'Fugiat vero distinctio porro animi doloremque tenetur esse maiores. Quisquam illo eum facere adipisci doloremque quidem pariatur. Modi maxime nisi fugiat cum et. Consequatur accusantium doloribus quod numquam explicabo libero eos totam. Fuga suscipit laudantium.',
     id: '24',
@@ -295,6 +337,7 @@ const products: Product[] = [
     shortDescription: 'Managed didactic access',
   },
   {
+    categoryId: 'chair',
     description:
       'Nisi dolorum sit voluptatum veritatis error consequatur. Minima dicta quo dolores omnis rerum dolore voluptatem accusantium officiis.',
     id: '25',
@@ -307,6 +350,7 @@ const products: Product[] = [
     shortDescription: 'Horizontal bandwidth-monitored parallelism',
   },
   {
+    categoryId: 'pasta',
     description:
       'Mollitia est non mollitia doloribus a. Error incidunt tempora modi exercitationem. Distinctio eaque beatae at exercitationem vitae assumenda. Reiciendis impedit voluptas non officia nemo. Tenetur quos libero vero explicabo laborum optio.',
     id: '26',
@@ -319,6 +363,7 @@ const products: Product[] = [
     shortDescription: 'Total attitude-oriented moderator',
   },
   {
+    categoryId: 'shoes',
     description: 'Neque voluptates asperiores aliquid. Odit alias id.',
     id: '27',
     imageUrl:
@@ -330,6 +375,7 @@ const products: Product[] = [
     shortDescription: 'Grass-roots static orchestration',
   },
   {
+    categoryId: 'hat',
     description:
       'Tenetur maxime aliquid beatae sequi. Aspernatur sapiente aut alias corporis officia.',
     id: '28',
@@ -342,6 +388,7 @@ const products: Product[] = [
     shortDescription: 'Mandatory eco-centric structure',
   },
   {
+    categoryId: 'shoes',
     description:
       'Reprehenderit alias accusantium voluptate iure illum sequi. Nam consectetur at autem quaerat ea totam aspernatur possimus fugit. Debitis dolorem non vero quasi. Cupiditate optio facere mollitia earum eveniet laboriosam libero doloremque quod.',
     id: '29',
@@ -354,6 +401,7 @@ const products: Product[] = [
     shortDescription: 'Up-sized secondary archive',
   },
   {
+    categoryId: 'hat',
     description:
       'Sint minus aliquid tenetur vitae sit soluta. Ab ea ex ratione amet aliquid deleniti est. Repudiandae deleniti officiis et repellat mollitia nihil facilis provident. Nemo debitis dignissimos quaerat. Totam placeat officiis occaecati voluptatum ad adipisci ab.',
     id: '30',
@@ -366,6 +414,7 @@ const products: Product[] = [
     shortDescription: 'Open-source 4th generation leverage',
   },
   {
+    categoryId: 'balloon',
     description:
       'Fuga libero sed quidem repellat dolores. Est eaque distinctio laborum ad sit. Pariatur tenetur dolorem cumque repellendus cupiditate sed ut quae. Tempora accusantium cumque ipsam dolores provident inventore doloribus molestias. Alias dolor deleniti nemo repudiandae corrupti omnis perspiciatis at.',
     id: '31',
@@ -378,6 +427,7 @@ const products: Product[] = [
     shortDescription: 'Realigned bifurcated Graphical User Interface',
   },
   {
+    categoryId: 'gloves',
     description:
       'Iusto nobis natus illum ipsum provident quis. Officia dolor autem ipsum assumenda. Asperiores qui error. Dolorem animi nisi animi voluptate amet. A corporis ea.',
     id: '32',
@@ -390,6 +440,7 @@ const products: Product[] = [
     shortDescription: 'Centralized logistical matrix',
   },
   {
+    categoryId: 'shoes',
     description:
       'Explicabo omnis ad error commodi. Vel atque harum illum porro suscipit. Sequi praesentium cumque accusamus dolorum deserunt suscipit totam debitis assumenda. Ad aspernatur deserunt alias nesciunt saepe provident dignissimos commodi. Excepturi reprehenderit vel minus.',
     id: '33',
@@ -402,5 +453,3 @@ const products: Product[] = [
     shortDescription: 'Phased clear-thinking projection',
   },
 ];
-
-export default products;
diff --git a/docs-app/app/helpers/strict-and.ts b/docs-app/app/helpers/strict-and.ts
deleted file mode 100644
index 22cadd97..00000000
--- a/docs-app/app/helpers/strict-and.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-type MaybeConditional = boolean | string | undefined;
-
-interface StrictAndSignature {
-  Args: {
-    Positional: MaybeConditional[];
-  };
-  Return: boolean;
-}
-
-const StrictAndHelper = helper<StrictAndSignature>((conditionals) => {
-  return conditionals.every(Boolean);
-});
-
-export default StrictAndHelper;
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    'strict-and': typeof StrictAndHelper;
-  }
-}
diff --git a/docs-app/app/helpers/strict-or.ts b/docs-app/app/helpers/strict-or.ts
deleted file mode 100644
index 7340fea9..00000000
--- a/docs-app/app/helpers/strict-or.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-type MaybeConditional = boolean | string | undefined;
-
-interface StrictOrSignature {
-  Args: {
-    Positional: MaybeConditional[];
-  };
-  Return: boolean;
-}
-
-const StrictOrHelper = helper<StrictOrSignature>((conditionals) => {
-  return conditionals.some(Boolean);
-});
-
-export default StrictOrHelper;
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    'strict-or': typeof StrictOrHelper;
-  }
-}
diff --git a/docs-app/app/routes/album.ts b/docs-app/app/routes/album.ts
index 8756c059..1caf1f9f 100644
--- a/docs-app/app/routes/album.ts
+++ b/docs-app/app/routes/album.ts
@@ -1,12 +1,11 @@
 import Route from '@ember/routing/route';
 
-import type { Album } from '../data/album';
-import albumData from '../data/album';
+import { type Album, album } from '../data';
 import type { ModelFrom } from '../utils/routes';
 
 export default class AlbumRoute extends Route {
   model(): Album {
-    return albumData;
+    return album;
   }
 }
 
diff --git a/docs-app/app/routes/products.ts b/docs-app/app/routes/products.ts
index e9c917bd..417ae0f2 100644
--- a/docs-app/app/routes/products.ts
+++ b/docs-app/app/routes/products.ts
@@ -1,10 +1,10 @@
 import Route from '@ember/routing/route';
 
-import products from '../data/products';
+import { type Product, products } from '../data';
 import type { ModelFrom } from '../utils/routes';
 
 export default class ProductsRoute extends Route {
-  model() {
+  model(): Product[] {
     return products;
   }
 }
diff --git a/docs-app/app/templates/album.hbs b/docs-app/app/templates/album.hbs
index 3fb30bfb..4ed4d18e 100644
--- a/docs-app/app/templates/album.hbs
+++ b/docs-app/app/templates/album.hbs
@@ -9,11 +9,11 @@
     as |CQ|
   >
     {{#let
-      (strict-and CQ.features.large CQ.features.tall)
+      (and CQ.features.large CQ.features.tall)
       as |showLyrics|
     }}
       <div
-        class={{local-class
+        class={{local
           this.styles
           "container"
           (if showLyrics "with-lyrics")
diff --git a/docs-app/app/templates/form.hbs b/docs-app/app/templates/form.hbs
index 3f2111cc..506ccffa 100644
--- a/docs-app/app/templates/form.hbs
+++ b/docs-app/app/templates/form.hbs
@@ -3,12 +3,14 @@
 <Ui::Page @title="Form">
   <Ui::Form
     @data={{hash
+      donation=undefined
       email=undefined
       message="I 🧡 container queries!"
       name=undefined
       subscribe=true
     }}
     @instructions="Still have questions about ember-container-query? Try sending me a message."
+    @onSubmit={{this.submitForm}}
     @title="Contact me"
     as |F|
   >
@@ -41,5 +43,15 @@
         @label="Subscribe to The Ember Times?"
       />
     </div>
+
+    <div class={{this.styles.field}}>
+      <F.Number
+        @key="donation"
+        @label="Donation amount ($)"
+        @minValue={{0}}
+        @placeholder="100"
+        @step={{10}}
+      />
+    </div>
   </Ui::Form>
 </Ui::Page>
\ No newline at end of file
diff --git a/docs-app/app/templates/not-found.hbs b/docs-app/app/templates/not-found.hbs
index 19205c1d..234d00e6 100644
--- a/docs-app/app/templates/not-found.hbs
+++ b/docs-app/app/templates/not-found.hbs
@@ -10,7 +10,7 @@
       as |CQ|
     >
       <div
-        class={{local-class
+        class={{local
           this.styles
           "metaphor"
           (if CQ.features.small "small-layout")
diff --git a/docs-app/app/templates/products.hbs b/docs-app/app/templates/products.hbs
index 9e28ea8f..1c1111b2 100644
--- a/docs-app/app/templates/products.hbs
+++ b/docs-app/app/templates/products.hbs
@@ -2,7 +2,7 @@
 
 <Ui::Page @title="Products">
   <div
-    class={{local-class
+    class={{local
       this.styles
       (if
         this.isPartOfNestProductDetailsExperiment
@@ -18,7 +18,7 @@
           @changeset={{hash name=this.name}}
           @key="name"
           @label="Filter by"
-          @onUpdate={{this.noOp}}
+          @onUpdate={{this.updateQueryParameters}}
           @placeholder="Cake, pasta, etc."
         />
       </div>
diff --git a/docs-app/app/utils/components/ui/form/index.ts b/docs-app/app/utils/components/ui/form/index.ts
new file mode 100644
index 00000000..9c7dfd43
--- /dev/null
+++ b/docs-app/app/utils/components/ui/form/index.ts
@@ -0,0 +1,34 @@
+type Options = {
+  isRequired?: boolean;
+  value: any;
+  valueType: 'boolean' | 'number' | 'string';
+};
+
+export function generateErrorMessage({
+  isRequired,
+  value,
+  valueType,
+}: Options): string | undefined {
+  if (isRequired) {
+    switch (valueType) {
+      case 'boolean': {
+        if (value === undefined || value === false) {
+          return 'Please select the checkbox.';
+        }
+
+        break;
+      }
+
+      case 'number':
+      case 'string': {
+        if (value === undefined || value === '') {
+          return 'Please provide a value.';
+        }
+
+        break;
+      }
+    }
+  }
+
+  return undefined;
+}
diff --git a/docs-app/app/utils/components/widgets/widget-2.ts b/docs-app/app/utils/components/widgets/widget-2.ts
index be9faa8e..a86be924 100644
--- a/docs-app/app/utils/components/widgets/widget-2.ts
+++ b/docs-app/app/utils/components/widgets/widget-2.ts
@@ -1,4 +1,4 @@
-import type { Revenue } from '../../../data/music-revenue';
+import type { MusicRevenue } from '../../../data';
 
 export type Data = {
   musicFormat: string;
@@ -81,7 +81,7 @@ export function formatRevenue(revenue: number): string {
 /*
   Transform the raw data into something useful for visualization
 */
-export function createDataForVisualization(rawData: Revenue[]): Data[] {
+export function createDataForVisualization(rawData: MusicRevenue[]): Data[] {
   return rawData.map((datum) => {
     return {
       musicFormat: datum['Format'],
diff --git a/docs-app/app/utils/components/widgets/widget-3.ts b/docs-app/app/utils/components/widgets/widget-3.ts
index 733a079c..beac6e5b 100644
--- a/docs-app/app/utils/components/widgets/widget-3.ts
+++ b/docs-app/app/utils/components/widgets/widget-3.ts
@@ -1,4 +1,4 @@
-import type { Image } from '../../../data/concert';
+import type { ConcertImage } from '../../../data/concert';
 
 export type ContainerDimensions = {
   aspectRatio: number;
@@ -16,7 +16,7 @@ export type ContainerDimensions = {
     container's the closest.
 */
 export function findBestFittingImage(
-  images: Image[],
+  images: ConcertImage[],
   containerDimensions: ContainerDimensions,
 ): string | undefined {
   if (images.length === 0) {
diff --git a/docs-app/package.json b/docs-app/package.json
index 447a67a9..382d0f98 100644
--- a/docs-app/package.json
+++ b/docs-app/package.json
@@ -96,6 +96,7 @@
     "ember-template-lint": "^5.11.2",
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-test-selectors": "^6.0.0",
+    "ember-truth-helpers": "^4.0.3",
     "embroider-css-modules": "^1.1.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
diff --git a/docs-app/tests/acceptance/album/accessibility-test.ts b/docs-app/tests/acceptance/album/accessibility-test.ts
index bd8c8554..c00df50c 100644
--- a/docs-app/tests/acceptance/album/accessibility-test.ts
+++ b/docs-app/tests/acceptance/album/accessibility-test.ts
@@ -1,9 +1,8 @@
 import { visit } from '@ember/test-helpers';
+import { setupApplicationTest, timeout } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, timeout } from '../../helpers';
-
 module('Acceptance | album', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/album/visual-regression-test.ts b/docs-app/tests/acceptance/album/visual-regression-test.ts
index 3186175d..648182fc 100644
--- a/docs-app/tests/acceptance/album/visual-regression-test.ts
+++ b/docs-app/tests/acceptance/album/visual-regression-test.ts
@@ -1,9 +1,11 @@
-/* eslint-disable qunit/require-expect */
 import { visit } from '@ember/test-helpers';
+import {
+  setupApplicationTest,
+  takeSnapshot,
+  timeout,
+} from 'docs-app/tests/helpers';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, takeSnapshot, timeout } from '../../helpers';
-
 module('Acceptance | album', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/dashboard/accessibility-test.ts b/docs-app/tests/acceptance/dashboard/accessibility-test.ts
index 2546df86..25b6bd51 100644
--- a/docs-app/tests/acceptance/dashboard/accessibility-test.ts
+++ b/docs-app/tests/acceptance/dashboard/accessibility-test.ts
@@ -1,9 +1,8 @@
 import { visit } from '@ember/test-helpers';
+import { setupApplicationTest, timeout } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, timeout } from '../../helpers';
-
 module('Acceptance | dashboard', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/dashboard/visual-regression-test.ts b/docs-app/tests/acceptance/dashboard/visual-regression-test.ts
index 2931fb0c..757cc0ec 100644
--- a/docs-app/tests/acceptance/dashboard/visual-regression-test.ts
+++ b/docs-app/tests/acceptance/dashboard/visual-regression-test.ts
@@ -1,9 +1,11 @@
-/* eslint-disable qunit/require-expect */
 import { visit } from '@ember/test-helpers';
+import {
+  setupApplicationTest,
+  takeSnapshot,
+  timeout,
+} from 'docs-app/tests/helpers';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, takeSnapshot, timeout } from '../../helpers';
-
 module('Acceptance | dashboard', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/form/accessibility-test.ts b/docs-app/tests/acceptance/form/accessibility-test.ts
index ab1d5355..14fd9eb7 100644
--- a/docs-app/tests/acceptance/form/accessibility-test.ts
+++ b/docs-app/tests/acceptance/form/accessibility-test.ts
@@ -1,9 +1,8 @@
 import { visit } from '@ember/test-helpers';
+import { setupApplicationTest, timeout } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, timeout } from '../../helpers';
-
 module('Acceptance | form', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/form/visual-regression-test.ts b/docs-app/tests/acceptance/form/visual-regression-test.ts
index 8c851bfb..69472805 100644
--- a/docs-app/tests/acceptance/form/visual-regression-test.ts
+++ b/docs-app/tests/acceptance/form/visual-regression-test.ts
@@ -1,9 +1,11 @@
-/* eslint-disable qunit/require-expect */
 import { visit } from '@ember/test-helpers';
+import {
+  setupApplicationTest,
+  takeSnapshot,
+  timeout,
+} from 'docs-app/tests/helpers';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, takeSnapshot, timeout } from '../../helpers';
-
 module('Acceptance | form', function (hooks) {
   setupApplicationTest(hooks);
 
@@ -17,7 +19,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -31,7 +33,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -45,7 +47,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -59,7 +61,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -73,7 +75,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -87,7 +89,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -101,7 +103,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -115,7 +117,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
@@ -129,7 +131,7 @@ module('Acceptance | form', function (hooks) {
       .dom('[data-test-form="Contact me"]')
       .exists('We see the contact form.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
diff --git a/docs-app/tests/acceptance/index/accessibility-test.ts b/docs-app/tests/acceptance/index/accessibility-test.ts
index f52a7a4c..3af09786 100644
--- a/docs-app/tests/acceptance/index/accessibility-test.ts
+++ b/docs-app/tests/acceptance/index/accessibility-test.ts
@@ -1,9 +1,8 @@
 import { visit } from '@ember/test-helpers';
+import { setupApplicationTest, timeout } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, timeout } from '../../helpers';
-
 module('Acceptance | index', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/index/visual-regression-test.ts b/docs-app/tests/acceptance/index/visual-regression-test.ts
index c9ddfe57..093cd46f 100644
--- a/docs-app/tests/acceptance/index/visual-regression-test.ts
+++ b/docs-app/tests/acceptance/index/visual-regression-test.ts
@@ -1,9 +1,11 @@
-/* eslint-disable qunit/require-expect */
 import { visit } from '@ember/test-helpers';
+import {
+  setupApplicationTest,
+  takeSnapshot,
+  timeout,
+} from 'docs-app/tests/helpers';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, takeSnapshot, timeout } from '../../helpers';
-
 module('Acceptance | index', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/not-found/accessibility-test.ts b/docs-app/tests/acceptance/not-found/accessibility-test.ts
index 30d9f557..e1ce23ae 100644
--- a/docs-app/tests/acceptance/not-found/accessibility-test.ts
+++ b/docs-app/tests/acceptance/not-found/accessibility-test.ts
@@ -1,9 +1,8 @@
 import { visit } from '@ember/test-helpers';
+import { setupApplicationTest, timeout } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, timeout } from '../../helpers';
-
 module('Acceptance | not-found', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/products/accessibility-test.ts b/docs-app/tests/acceptance/products/accessibility-test.ts
index 17b3e32f..391b510c 100644
--- a/docs-app/tests/acceptance/products/accessibility-test.ts
+++ b/docs-app/tests/acceptance/products/accessibility-test.ts
@@ -1,9 +1,8 @@
 import { visit } from '@ember/test-helpers';
+import { setupApplicationTest, timeout } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, timeout } from '../../helpers';
-
 module('Acceptance | products', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/acceptance/products/visual-regression-test.ts b/docs-app/tests/acceptance/products/visual-regression-test.ts
index 11924224..9d6aef48 100644
--- a/docs-app/tests/acceptance/products/visual-regression-test.ts
+++ b/docs-app/tests/acceptance/products/visual-regression-test.ts
@@ -1,9 +1,11 @@
-/* eslint-disable qunit/require-expect */
 import { visit } from '@ember/test-helpers';
+import {
+  setupApplicationTest,
+  takeSnapshot,
+  timeout,
+} from 'docs-app/tests/helpers';
 import { module, test } from 'qunit';
 
-import { setupApplicationTest, takeSnapshot, timeout } from '../../helpers';
-
 module('Acceptance | products', function (hooks) {
   setupApplicationTest(hooks);
 
diff --git a/docs-app/tests/integration/components/navigation-menu-test.gts b/docs-app/tests/integration/components/navigation-menu-test.gts
index fb208ccf..6b6d5d0e 100644
--- a/docs-app/tests/integration/components/navigation-menu-test.gts
+++ b/docs-app/tests/integration/components/navigation-menu-test.gts
@@ -1,23 +1,19 @@
 import { array, hash } from '@ember/helper';
 import { findAll, render } from '@ember/test-helpers';
 import NavigationMenu from 'docs-app/components/navigation-menu';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../helpers';
-
 module('Integration | Component | navigation-menu', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders a navigation menu', async function (assert) {
+  test('it renders', async function (assert) {
     await render(
       <template>
         <NavigationMenu
           @menuItems={{array
             (hash label="Home" route="index")
-            (hash label="Album" route="album")
-            (hash label="Dashboard" route="dashboard")
-            (hash label="Form" route="form")
-            (hash label="Products" route="products")
           }}
           @name="Main Navigation"
         />
@@ -29,53 +25,21 @@ module('Integration | Component | navigation-menu', function (hooks) {
       .hasAria(
         'label',
         'Main Navigation',
-        'We can pass @name to specify the navigation.'
+        'We can pass @name to specify the navigation.',
       )
       .hasTagName('nav', 'We see the correct tag name.');
 
     const links = findAll('[data-test-link]');
 
-    assert.strictEqual(links.length, 5, 'We see 5 links.');
+    assert.strictEqual(links.length, 1, 'We see 1 link.');
 
     assert
       .dom(links[0])
       .hasAttribute('href', '/', 'We see the correct href for the 1st link.')
       .hasText('Home', 'We see the correct label for the 1st link.');
 
-    assert
-      .dom(links[1])
-      .hasAttribute(
-        'href',
-        '/album',
-        'We see the correct href for the 2nd link.'
-      )
-      .hasText('Album', 'We see the correct label for the 2nd link.');
-
-    assert
-      .dom(links[2])
-      .hasAttribute(
-        'href',
-        '/dashboard',
-        'We see the correct href for the 3rd link.'
-      )
-      .hasText('Dashboard', 'We see the correct label for the 3rd link.');
+    await a11yAudit();
 
-    assert
-      .dom(links[3])
-      .hasAttribute(
-        'href',
-        '/form',
-        'We see the correct href for the 4th link.'
-      )
-      .hasText('Form', 'We see the correct label for the 4th link.');
-
-    assert
-      .dom(links[4])
-      .hasAttribute(
-        'href',
-        '/products',
-        'We see the correct href for the 5th link.'
-      )
-      .hasText('Products', 'We see the correct label for the 5th link.');
+    assert.ok(true, 'We passed the accessibility audit.');
   });
 });
diff --git a/docs-app/tests/integration/components/products/product/card-test.ts b/docs-app/tests/integration/components/products/product/card-test.ts
index c8402119..37c1f9a5 100644
--- a/docs-app/tests/integration/components/products/product/card-test.ts
+++ b/docs-app/tests/integration/components/products/product/card-test.ts
@@ -1,9 +1,11 @@
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
-import type { Product } from 'docs-app/data/products';
+import {
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import type { Product } from 'docs-app/data';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { hbs } from 'ember-cli-htmlbars';
-import { setupRenderingTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 
 interface TestContext extends BaseTestContext {
@@ -15,10 +17,10 @@ module('Integration | Component | products/product/card', function (hooks) {
 
   hooks.beforeEach(function (this: TestContext) {
     this.product = {
+      categoryId: 'cake',
       description: 'Made with organic herbs',
       id: '1',
-      imageUrl:
-        'https://images.pexels.com/photos/414645/pexels-photo-414645.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=256',
+      imageUrl: '',
       name: 'Vanilla Ice Cream Cake',
       price: 40,
       rating: 4.5,
@@ -27,7 +29,7 @@ module('Integration | Component | products/product/card', function (hooks) {
     };
   });
 
-  test('The component renders a product', async function (this: TestContext, assert) {
+  test('it renders', async function (this: TestContext, assert) {
     await render<TestContext>(hbs`
       <Products::Product::Card
         @product={{this.product}}
diff --git a/docs-app/tests/integration/components/products/product/image-test.ts b/docs-app/tests/integration/components/products/product/image-test.ts
index 2bbc1f8d..a99c1a7c 100644
--- a/docs-app/tests/integration/components/products/product/image-test.ts
+++ b/docs-app/tests/integration/components/products/product/image-test.ts
@@ -1,7 +1,6 @@
-import type { TestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
+import { render, type TestContext } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import { setupRenderingTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 
 module('Integration | Component | products/product/image', function (hooks) {
diff --git a/docs-app/tests/integration/components/tracks-test.ts b/docs-app/tests/integration/components/tracks-test.ts
index d12ee13b..404c4e1e 100644
--- a/docs-app/tests/integration/components/tracks-test.ts
+++ b/docs-app/tests/integration/components/tracks-test.ts
@@ -1,12 +1,12 @@
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
-import type { Album } from 'docs-app/data/album';
-import albumData from 'docs-app/data/album';
+import {
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { type Album, album } from 'docs-app/data';
+import { resizeContainer, setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { resizeContainer, setupRenderingTest } from '../../helpers';
-
 interface TestContext extends BaseTestContext {
   album: Album;
 }
@@ -15,7 +15,7 @@ module('Integration | Component | tracks', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function (this: TestContext) {
-    this.album = albumData;
+    this.album = album;
   });
 
   test('uses container queries to render tracks', async function (this: TestContext, assert) {
diff --git a/docs-app/tests/integration/components/tracks/list-test.ts b/docs-app/tests/integration/components/tracks/list-test.ts
index 87265ee9..cef8d2cb 100644
--- a/docs-app/tests/integration/components/tracks/list-test.ts
+++ b/docs-app/tests/integration/components/tracks/list-test.ts
@@ -1,12 +1,13 @@
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { findAll, render } from '@ember/test-helpers';
-import type { Track } from 'docs-app/data/album';
-import albumData from 'docs-app/data/album';
+import {
+  findAll,
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { album, type Track } from 'docs-app/data';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 type TrackProperties = {
   explicit: boolean;
   length: string;
@@ -68,7 +69,7 @@ module('Integration | Component | tracks/list', function (hooks) {
 
   module('When @tracks is a non-empty array', function () {
     test('The component renders a non-empty list', async function (this: TestContext, assert: CustomAssert) {
-      this.tracks = albumData.tracks;
+      this.tracks = album.tracks;
 
       await render<TestContext>(hbs`
         <Tracks::List
diff --git a/docs-app/tests/integration/components/tracks/table-test.ts b/docs-app/tests/integration/components/tracks/table-test.ts
index 6c085a8d..ae98c8c5 100644
--- a/docs-app/tests/integration/components/tracks/table-test.ts
+++ b/docs-app/tests/integration/components/tracks/table-test.ts
@@ -1,12 +1,13 @@
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { findAll, render } from '@ember/test-helpers';
-import type { Track } from 'docs-app/data/album';
-import albumData from 'docs-app/data/album';
+import {
+  findAll,
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { album, type Track } from 'docs-app/data';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 type TrackProperties = {
   explicit: boolean;
   length: string;
@@ -75,7 +76,7 @@ module('Integration | Component | tracks/table', function (hooks) {
 
   module('When @tracks is a non-empty array', function () {
     test('The component renders a non-empty table', async function (this: TestContext, assert: CustomAssert) {
-      this.tracks = albumData.tracks;
+      this.tracks = album.tracks;
 
       await render<TestContext>(hbs`
         <Tracks::Table
diff --git a/docs-app/tests/integration/components/ui/form-test.ts b/docs-app/tests/integration/components/ui/form-test.ts
index 05a8ad71..6605266f 100644
--- a/docs-app/tests/integration/components/ui/form-test.ts
+++ b/docs-app/tests/integration/components/ui/form-test.ts
@@ -1,23 +1,38 @@
-import type { TestContext } from '@ember/test-helpers';
-import { find, render } from '@ember/test-helpers';
+import {
+  click,
+  fillIn,
+  find,
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
+interface TestContext extends BaseTestContext {
+  submitForm: (data: Record<string, any>) => Promise<void>;
+}
 
 module('Integration | Component | ui/form', function (hooks) {
   setupRenderingTest(hooks);
 
   test('The component renders a form', async function (this: TestContext, assert) {
+    this.submitForm = async () => {
+      assert.step('Submit form');
+    };
+
     await render<TestContext>(hbs`
       <Ui::Form
         @data={{hash
+          donation=undefined
           email=undefined
           message="I 🧡 container queries!"
           name=undefined
           subscribe=true
         }}
         @instructions="Still have questions about ember-container-query? Try sending me a message."
+        @onSubmit={{this.submitForm}}
         @title="Contact me"
         as |F|
       >
@@ -53,6 +68,16 @@ module('Integration | Component | ui/form', function (hooks) {
             @label="Subscribe to The Ember Times?"
           />
         </div>
+
+        <div>
+          <F.Number
+            @key="donation"
+            @label="Donation amount ($)"
+            @minValue={{0}}
+            @placeholder="100"
+            @step={{10}}
+          />
+        </div>
       </Ui::Form>
     `);
 
@@ -70,12 +95,103 @@ module('Integration | Component | ui/form', function (hooks) {
       )
       .hasAria('labelledby', titleId, 'We see the correct aria-labelledby.');
 
-    assert.dom('[data-test-field]').exists({ count: 4 }, 'We see 4 fields.');
+    assert.dom('[data-test-field]').exists({ count: 5 }, 'We see 5 fields.');
 
     assert
       .dom('[data-test-button="Submit"]')
       .hasAttribute('type', 'submit', 'We see the correct type.')
       .hasTagName('button', 'We see the correct tag name.')
       .hasText('Submit', 'We see the submit button.');
+
+    assert.verifySteps([], 'We should not call @onSubmit.');
+
+    await a11yAudit();
+
+    assert.ok(true, 'We passed the accessibility audit.');
+  });
+
+  test('We can submit the form', async function (this: TestContext, assert) {
+    this.submitForm = async (data: Record<string, any>) => {
+      assert.deepEqual(
+        data,
+        {
+          donation: 10000,
+          email: 'zoey@emberjs.com',
+          message: 'Gude!',
+          name: 'Zoey',
+          subscribe: false,
+        },
+        'We send the correct data.',
+      );
+
+      assert.step('Submit form');
+    };
+
+    await render<TestContext>(hbs`
+      <Ui::Form
+        @data={{hash
+          donation=undefined
+          email=undefined
+          message="I 🧡 container queries!"
+          name=undefined
+          subscribe=true
+        }}
+        @onSubmit={{this.submitForm}}
+        as |F|
+      >
+        <div>
+          <F.Input
+            @isRequired={{true}}
+            @key="name"
+            @label="Name"
+            @placeholder="Zoey"
+          />
+        </div>
+
+        <div>
+          <F.Input
+            @isRequired={{true}}
+            @key="email"
+            @label="Email"
+            @placeholder="zoey@emberjs.com"
+            @type="email"
+          />
+        </div>
+
+        <div>
+          <F.Textarea
+            @key="message"
+            @label="Message"
+          />
+        </div>
+
+        <div>
+          <F.Checkbox
+            @key="subscribe"
+            @label="Subscribe to The Ember Times?"
+          />
+        </div>
+
+        <div>
+          <F.Number
+            @key="donation"
+            @label="Donation amount ($)"
+            @minValue={{0}}
+            @placeholder="100"
+            @step={{10}}
+          />
+        </div>
+      </Ui::Form>
+    `);
+
+    await fillIn('[data-test-field="Name"]', 'Zoey');
+    await fillIn('[data-test-field="Email"]', 'zoey@emberjs.com');
+    await fillIn('[data-test-field="Message"]', 'Gude!');
+    await click('[data-test-field="Subscribe to The Ember Times?"]');
+    await fillIn('[data-test-field="Donation amount ($)"]', '10000');
+
+    await click('[data-test-button="Submit"]');
+
+    assert.verifySteps(['Submit form'], 'We called @onSubmit once.');
   });
 });
diff --git a/docs-app/tests/integration/components/ui/form/checkbox-test.ts b/docs-app/tests/integration/components/ui/form/checkbox-test.ts
index 04a5e12c..19f464b2 100644
--- a/docs-app/tests/integration/components/ui/form/checkbox-test.ts
+++ b/docs-app/tests/integration/components/ui/form/checkbox-test.ts
@@ -1,11 +1,14 @@
 import { set } from '@ember/object';
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { click, render, triggerKeyEvent } from '@ember/test-helpers';
+import {
+  click,
+  render,
+  type TestContext as BaseTestContext,
+  triggerKeyEvent,
+} from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../../helpers';
-
 interface TestContext extends BaseTestContext {
   changeset: Record<string, any>;
   updateChangeset: ({ key, value }: { key: string; value: any }) => void;
@@ -44,11 +47,11 @@ module('Integration | Component | ui/form/checkbox', function (hooks) {
     assert
       .dom('[data-test-field="Subscribe to The Ember Times?"]')
       .hasAria('checked', 'true', 'We see the correct value.')
-      .hasAria('disabled', 'false', 'The input should be enabled.')
-      .hasAria('readonly', 'false', 'The input should not be readonly.')
-      .hasAria('required', 'false', 'The input should not be required.')
+      .hasAria('disabled', 'false', 'The checkbox should be enabled.')
+      .hasAria('readonly', 'false', 'The checkbox should not be readonly.')
+      .hasAria('required', 'false', 'The checkbox should not be required.')
       .hasAttribute('role', 'checkbox', 'We see the correct role.')
-      .hasAttribute('tabindex', '0', 'The input is focusable.')
+      .hasAttribute('tabindex', '0', 'The checkbox is focusable.')
       .hasTagName('span', 'We see the correct tag name.');
 
     assert
@@ -56,7 +59,7 @@ module('Integration | Component | ui/form/checkbox', function (hooks) {
       .doesNotExist('We should not see an error message.');
   });
 
-  test('We can pass @isDisabled to disable the input', async function (this: TestContext, assert) {
+  test('We can pass @isDisabled to disable the checkbox', async function (this: TestContext, assert) {
     await render<TestContext>(hbs`
       <Ui::Form::Checkbox
         @changeset={{this.changeset}}
@@ -69,8 +72,8 @@ module('Integration | Component | ui/form/checkbox', function (hooks) {
 
     assert
       .dom('[data-test-field="Subscribe to The Ember Times?"]')
-      .doesNotHaveAttribute('tabindex', 'The input should not be focusable.')
-      .hasAria('disabled', 'true', 'The input is disabled.');
+      .doesNotHaveAttribute('tabindex', 'The checkbox should not be focusable.')
+      .hasAria('disabled', 'true', 'The checkbox is disabled.');
   });
 
   test('We can pass @isReadOnly to display the value', async function (this: TestContext, assert) {
@@ -88,7 +91,7 @@ module('Integration | Component | ui/form/checkbox', function (hooks) {
       .dom('[data-test-field="Subscribe to The Ember Times?"]')
       .hasAria('checked', 'true', 'We see the correct value.')
       .hasAria('readonly', 'true', 'We see the aria-readonly attribute.')
-      .hasAttribute('tabindex', '0', 'The input is focusable.');
+      .hasAttribute('tabindex', '0', 'The checkbox is focusable.');
   });
 
   test('We can pass @isRequired to require a value', async function (this: TestContext, assert) {
@@ -111,7 +114,7 @@ module('Integration | Component | ui/form/checkbox', function (hooks) {
 
     assert
       .dom('[data-test-field="Subscribe to The Ember Times?"]')
-      .hasAria('required', 'true', 'The input should be required.');
+      .hasAria('required', 'true', 'The checkbox is required.');
   });
 
   test('We can click on the checkbox to toggle the value', async function (this: TestContext, assert) {
diff --git a/docs-app/tests/integration/components/ui/form/field-test.ts b/docs-app/tests/integration/components/ui/form/field-test.ts
index de692763..9dcfec93 100644
--- a/docs-app/tests/integration/components/ui/form/field-test.ts
+++ b/docs-app/tests/integration/components/ui/form/field-test.ts
@@ -1,16 +1,14 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../../helpers';
-
 module('Integration | Component | ui/form/field', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component handles the field layout', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component handles the field layout', async function (assert) {
+    await render(hbs`
       <Ui::Form::Field>
         <:label as |l|>
           <label
@@ -44,8 +42,8 @@ module('Integration | Component | ui/form/field', function (hooks) {
     assert.ok(true, 'We passed the accessibility audit.');
   });
 
-  test('We can pass @errorMessage to show an error message', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('We can pass @errorMessage to show an error message', async function (assert) {
+    await render(hbs`
       <Ui::Form::Field
         @errorMessage="Please provide a value."
       >
diff --git a/docs-app/tests/integration/components/ui/form/information-test.ts b/docs-app/tests/integration/components/ui/form/information-test.ts
index 90003f24..9080773f 100644
--- a/docs-app/tests/integration/components/ui/form/information-test.ts
+++ b/docs-app/tests/integration/components/ui/form/information-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../../helpers';
-
 module('Integration | Component | ui/form/information', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders nothing when we do not pass @title or @instructions', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component renders nothing when we do not pass @title or @instructions', async function (assert) {
+    await render(hbs`
       <Ui::Form::Information
         @formId="ember123"
       />
@@ -24,8 +22,8 @@ module('Integration | Component | ui/form/information', function (hooks) {
       .doesNotExist('We should not see the form instructions.');
   });
 
-  test('We can pass @title to display the form title', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('We can pass @title to display the form title', async function (assert) {
+    await render(hbs`
       <Ui::Form::Information
         @formId="ember123"
         @title="Contact me"
@@ -42,8 +40,8 @@ module('Integration | Component | ui/form/information', function (hooks) {
       .doesNotExist('We should not see the form instructions.');
   });
 
-  test('We can pass @instructions to display the form instructions', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('We can pass @instructions to display the form instructions', async function (assert) {
+    await render(hbs`
       <Ui::Form::Information
         @formId="ember123"
         @instructions="Still have questions about ember-container-query? Try sending me a message."
diff --git a/docs-app/tests/integration/components/ui/form/input-test.ts b/docs-app/tests/integration/components/ui/form/input-test.ts
index e81bae20..9a31ee0c 100644
--- a/docs-app/tests/integration/components/ui/form/input-test.ts
+++ b/docs-app/tests/integration/components/ui/form/input-test.ts
@@ -1,11 +1,13 @@
 import { set } from '@ember/object';
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { fillIn, render } from '@ember/test-helpers';
+import {
+  fillIn,
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../../helpers';
-
 interface TestContext extends BaseTestContext {
   changeset: Record<string, any>;
   updateChangeset: ({ key, value }: { key: string; value: any }) => void;
@@ -101,9 +103,7 @@ module('Integration | Component | ui/form/input', function (hooks) {
       .dom('[data-test-label]')
       .hasText('Name *', 'The label shows that the field is required.');
 
-    assert
-      .dom('[data-test-field="Name"]')
-      .isRequired('The input should be required.');
+    assert.dom('[data-test-field="Name"]').isRequired('The input is required.');
   });
 
   test('We can pass @onUpdate to get the updated value', async function (this: TestContext, assert) {
diff --git a/docs-app/tests/integration/components/ui/form/number-test.ts b/docs-app/tests/integration/components/ui/form/number-test.ts
new file mode 100644
index 00000000..b2cc3f22
--- /dev/null
+++ b/docs-app/tests/integration/components/ui/form/number-test.ts
@@ -0,0 +1,178 @@
+import { set } from '@ember/object';
+import {
+  fillIn,
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
+
+interface TestContext extends BaseTestContext {
+  changeset: Record<string, any>;
+  updateChangeset: ({ key, value }: { key: string; value: any }) => void;
+}
+
+module('Integration | Component | ui/form/number', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function (this: TestContext) {
+    this.changeset = {
+      donation: 1000,
+      email: 'zoey@emberjs.com',
+      message: 'I 🧡 container queries!',
+      name: 'Zoey',
+      subscribe: false,
+    };
+
+    this.updateChangeset = () => {
+      // Do nothing
+    };
+  });
+
+  test('The component renders a label and an input', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
+      <Ui::Form::Number
+        @changeset={{this.changeset}}
+        @key="donation"
+        @label="Donation amount ($)"
+        @minValue={{0}}
+        @onUpdate={{this.updateChangeset}}
+        @placeholder="100"
+      />
+    `);
+
+    assert
+      .dom('[data-test-label]')
+      .hasText('Donation amount ($)', 'We see the correct label.');
+
+    assert
+      .dom('[data-test-field="Donation amount ($)"]')
+      .doesNotHaveAttribute('readonly', 'The input should not be readonly.')
+      .hasAttribute('type', 'number', 'We see the correct type.')
+      .hasTagName('input', 'We see the correct tag name.')
+      .hasValue('1000', 'We see the correct value.')
+      .isEnabled('The input should be enabled.')
+      .isNotRequired('The input should not be required.');
+
+    assert
+      .dom('[data-test-feedback]')
+      .doesNotExist('We should not see an error message.');
+  });
+
+  test('We can pass @isDisabled to disable the input', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
+      <Ui::Form::Number
+        @changeset={{this.changeset}}
+        @isDisabled={{true}}
+        @key="donation"
+        @label="Donation amount ($)"
+        @minValue={{0}}
+        @onUpdate={{this.updateChangeset}}
+        @placeholder="100"
+      />
+    `);
+
+    assert
+      .dom('[data-test-field="Donation amount ($)"]')
+      .isDisabled('The input is disabled.');
+  });
+
+  test('We can pass @isReadOnly to display the value', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
+      <Ui::Form::Number
+        @changeset={{this.changeset}}
+        @isReadOnly={{true}}
+        @key="donation"
+        @label="Donation amount ($)"
+        @minValue={{0}}
+        @onUpdate={{this.updateChangeset}}
+        @placeholder="100"
+      />
+    `);
+
+    assert
+      .dom('[data-test-field="Donation amount ($)"]')
+      .hasAttribute('readonly', '', 'We see the readonly attribute.')
+      .hasValue('1000', 'We see the correct value.');
+  });
+
+  test('We can pass @isRequired to require a value', async function (this: TestContext, assert) {
+    await render<TestContext>(hbs`
+      <Ui::Form::Number
+        @changeset={{this.changeset}}
+        @isRequired={{true}}
+        @key="donation"
+        @label="Donation amount ($)"
+        @minValue={{0}}
+        @onUpdate={{this.updateChangeset}}
+        @placeholder="100"
+      />
+    `);
+
+    assert
+      .dom('[data-test-label]')
+      .hasText(
+        'Donation amount ($) *',
+        'The label shows that the field is required.',
+      );
+
+    assert
+      .dom('[data-test-field="Donation amount ($)"]')
+      .isRequired('The input is required.');
+  });
+
+  test('We can pass @onUpdate to get the updated value', async function (this: TestContext, assert) {
+    let expectedValue: any = undefined;
+
+    this.updateChangeset = ({ key, value }) => {
+      assert.step('onUpdate');
+
+      assert.strictEqual(
+        value,
+        expectedValue,
+        'The changeset has the correct value.',
+      );
+
+      set(this.changeset, key, value);
+    };
+
+    await render<TestContext>(hbs`
+      <Ui::Form::Number
+        @changeset={{this.changeset}}
+        @isRequired={{true}}
+        @key="donation"
+        @label="Donation amount ($)"
+        @minValue={{0}}
+        @onUpdate={{this.updateChangeset}}
+        @placeholder="100"
+      />
+    `);
+
+    // Update the value
+    await fillIn('[data-test-field="Donation amount ($)"]', '');
+
+    assert
+      .dom('[data-test-field="Donation amount ($)"]')
+      .hasValue('', 'We see the correct value.');
+
+    assert
+      .dom('[data-test-feedback]')
+      .hasText('Please provide a value.', 'We see an error message.');
+
+    // Update the value again
+    expectedValue = 10000;
+
+    await fillIn('[data-test-field="Donation amount ($)"]', '10000');
+
+    assert
+      .dom('[data-test-field="Donation amount ($)"]')
+      .hasValue('10000', 'We see the correct value.');
+
+    assert
+      .dom('[data-test-feedback]')
+      .doesNotExist('We should not see an error message.');
+
+    assert.verifySteps(['onUpdate', 'onUpdate']);
+  });
+});
diff --git a/docs-app/tests/integration/components/ui/form/textarea-test.ts b/docs-app/tests/integration/components/ui/form/textarea-test.ts
index a8e29ab3..bf9b9552 100644
--- a/docs-app/tests/integration/components/ui/form/textarea-test.ts
+++ b/docs-app/tests/integration/components/ui/form/textarea-test.ts
@@ -1,11 +1,13 @@
 import { set } from '@ember/object';
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { fillIn, render } from '@ember/test-helpers';
+import {
+  fillIn,
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../../helpers';
-
 interface TestContext extends BaseTestContext {
   changeset: Record<string, any>;
   updateChangeset: ({ key, value }: { key: string; value: any }) => void;
@@ -43,7 +45,7 @@ module('Integration | Component | ui/form/textarea', function (hooks) {
 
     assert
       .dom('[data-test-field="Message"]')
-      .doesNotHaveAttribute('readonly', 'The input should not be readonly.')
+      .doesNotHaveAttribute('readonly', 'The textarea should not be readonly.')
       .hasTagName('textarea', 'We see the correct tag name.')
       .hasValue('I 🧡 container queries!', 'We see the correct value.')
       .isEnabled('The textarea should be enabled.')
@@ -104,7 +106,7 @@ module('Integration | Component | ui/form/textarea', function (hooks) {
 
     assert
       .dom('[data-test-field="Message"]')
-      .isRequired('The textarea should be required.');
+      .isRequired('The textarea is required.');
   });
 
   test('We can pass @onUpdate to get the updated value', async function (this: TestContext, assert) {
diff --git a/docs-app/tests/integration/components/ui/page-test.ts b/docs-app/tests/integration/components/ui/page-test.ts
index 8364d437..8d36e453 100644
--- a/docs-app/tests/integration/components/ui/page-test.ts
+++ b/docs-app/tests/integration/components/ui/page-test.ts
@@ -1,25 +1,27 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 module('Integration | Component | ui/page', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component handles the page layout', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
-      <Ui::Page
-        @title="Form"
-      >
-        <div data-test-body>
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <Ui::Page @title="Form">
+        <div data-test-content>
+          Content goes here.
         </div>
       </Ui::Page>
     `);
 
     assert.dom('h1').hasText('Form', 'We see the title.');
 
-    assert.dom('[data-test-body]').exists('We see the yielded content.');
+    assert.dom('[data-test-content]').exists('We see the yielded content.');
+
+    await a11yAudit();
+
+    assert.ok(true, 'We passed the accessibility audit.');
   });
 });
diff --git a/docs-app/tests/integration/components/widgets/widget-1-test.ts b/docs-app/tests/integration/components/widgets/widget-1-test.ts
index 8398352a..b30fced3 100644
--- a/docs-app/tests/integration/components/widgets/widget-1-test.ts
+++ b/docs-app/tests/integration/components/widgets/widget-1-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { findAll, render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 module('Integration | Component | widgets/widget-1', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component renders', async function (assert) {
+    await render(hbs`
       <Widgets::Widget-1 />
     `);
 
diff --git a/docs-app/tests/integration/components/widgets/widget-2-test.ts b/docs-app/tests/integration/components/widgets/widget-2-test.ts
index 810b0369..31d000a0 100644
--- a/docs-app/tests/integration/components/widgets/widget-2-test.ts
+++ b/docs-app/tests/integration/components/widgets/widget-2-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 module('Integration | Component | widgets/widget-2', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component renders', async function (assert) {
+    await render(hbs`
       <Widgets::Widget-2 />
     `);
 
diff --git a/docs-app/tests/integration/components/widgets/widget-3-test.ts b/docs-app/tests/integration/components/widgets/widget-3-test.ts
index 090ff16d..62c2d9cd 100644
--- a/docs-app/tests/integration/components/widgets/widget-3-test.ts
+++ b/docs-app/tests/integration/components/widgets/widget-3-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 module('Integration | Component | widgets/widget-3', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component renders', async function (assert) {
+    await render(hbs`
       <Widgets::Widget-3 />
     `);
 
diff --git a/docs-app/tests/integration/components/widgets/widget-4-test.ts b/docs-app/tests/integration/components/widgets/widget-4-test.ts
index 9b0f4297..f6e891df 100644
--- a/docs-app/tests/integration/components/widgets/widget-4-test.ts
+++ b/docs-app/tests/integration/components/widgets/widget-4-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 module('Integration | Component | widgets/widget-4', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component renders', async function (assert) {
+    await render(hbs`
       <Widgets::Widget-4 />
     `);
 
diff --git a/docs-app/tests/integration/components/widgets/widget-5-test.ts b/docs-app/tests/integration/components/widgets/widget-5-test.ts
index 4700b117..3b4b903a 100644
--- a/docs-app/tests/integration/components/widgets/widget-5-test.ts
+++ b/docs-app/tests/integration/components/widgets/widget-5-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../../helpers';
-
 module('Integration | Component | widgets/widget-5', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('The component renders', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('The component renders', async function (assert) {
+    await render(hbs`
       <Widgets::Widget-5 />
     `);
 
diff --git a/docs-app/tests/integration/helpers/strict-and-test.ts b/docs-app/tests/integration/helpers/strict-and-test.ts
deleted file mode 100644
index e018f4ea..00000000
--- a/docs-app/tests/integration/helpers/strict-and-test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render } from '@ember/test-helpers';
-import { setupRenderingTest } from 'docs-app/tests/helpers';
-import { hbs } from 'ember-cli-htmlbars';
-import { module, test } from 'qunit';
-
-module('Integration | Helper | strict-and', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('returns true when there are no conditionals', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-and) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('true');
-  });
-
-  test('returns true when all conditionals are true', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-and true true true) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('true');
-  });
-
-  test('returns true when all conditionals are truthy', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-and "some-title" "some-instructions") "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('true');
-  });
-
-  test('returns false when at least 1 conditional is false', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-and true true false) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('false');
-  });
-
-  test('returns false when at least 1 conditional is falsey', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-and "some-title" "") "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('false');
-  });
-});
diff --git a/docs-app/tests/integration/helpers/strict-or-test.ts b/docs-app/tests/integration/helpers/strict-or-test.ts
deleted file mode 100644
index a43f4428..00000000
--- a/docs-app/tests/integration/helpers/strict-or-test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { render } from '@ember/test-helpers';
-import { setupRenderingTest } from 'docs-app/tests/helpers';
-import { hbs } from 'ember-cli-htmlbars';
-import { module, test } from 'qunit';
-
-module('Integration | Helper | strict-or', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('returns false when there are no conditionals', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-or) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('false');
-  });
-
-  test('returns false when all conditionals are false', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-or false false false) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('false');
-  });
-
-  test('returns false when all conditionals are falsey', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-or "" undefined) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('false');
-  });
-
-  test('returns true when at least one conditional is true', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-or false false true) "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('true');
-  });
-
-  test('returns true when at least one conditional is truthy', async function (assert) {
-    await render(hbs`
-      <p data-test-value>
-        {{if (strict-or "" "some-instructions") "true" "false"}}
-      </p>
-    `);
-
-    assert.dom('[data-test-value]').hasText('true');
-  });
-});
diff --git a/docs-app/tests/integration/modifiers/draw-stacked-chart-test.ts b/docs-app/tests/integration/modifiers/draw-stacked-chart-test.ts
index 9a553e77..426f74c2 100644
--- a/docs-app/tests/integration/modifiers/draw-stacked-chart-test.ts
+++ b/docs-app/tests/integration/modifiers/draw-stacked-chart-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../helpers';
-
 module('Integration | Modifier | draw-stacked-chart', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('We can draw a chart', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('We can draw a chart', async function (assert) {
+    await render(hbs`
       <div {{draw-stacked-chart}}>
         <svg></svg>
       </div>
diff --git a/docs-app/tests/integration/modifiers/dynamic-css-grid-test.ts b/docs-app/tests/integration/modifiers/dynamic-css-grid-test.ts
index b435deda..61549d6a 100644
--- a/docs-app/tests/integration/modifiers/dynamic-css-grid-test.ts
+++ b/docs-app/tests/integration/modifiers/dynamic-css-grid-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'docs-app/tests/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 
-import { setupRenderingTest } from '../../helpers';
-
 module('Integration | Modifier | dynamic-css-grid', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('We can dynamically style the CSS grid', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('We can dynamically style the CSS grid', async function (assert) {
+    await render(hbs`
       <div
         data-test-list="Tracks"
         {{dynamic-css-grid
diff --git a/docs-app/tests/unit/utils/components/ui/form/index-test.ts b/docs-app/tests/unit/utils/components/ui/form/index-test.ts
new file mode 100644
index 00000000..52ec7cfa
--- /dev/null
+++ b/docs-app/tests/unit/utils/components/ui/form/index-test.ts
@@ -0,0 +1,238 @@
+import { generateErrorMessage } from 'docs-app/utils/components/ui/form';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | components/ui/form/index', function () {
+  module('generateErrorMessage', function () {
+    module('When isRequired is false', function () {
+      test('When the value type is boolean', function (assert) {
+        let errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: undefined,
+          valueType: 'boolean',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (1)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: false,
+          valueType: 'boolean',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (2)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: true,
+          valueType: 'boolean',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (3)',
+        );
+      });
+
+      test('When the value type is number', function (assert) {
+        let errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: undefined,
+          valueType: 'number',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (1)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: '',
+          valueType: 'number',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (2)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: '0',
+          valueType: 'number',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (3)',
+        );
+      });
+
+      test('When the value type is string', function (assert) {
+        let errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: undefined,
+          valueType: 'string',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (1)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: '',
+          valueType: 'string',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (2)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: false,
+          value: 'Zoey',
+          valueType: 'string',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (3)',
+        );
+      });
+    });
+
+    module('When isRequired is true', function () {
+      test('When the value type is boolean', function (assert) {
+        let errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: undefined,
+          valueType: 'boolean',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          'Please select the checkbox.',
+          'We get the correct value. (1)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: false,
+          valueType: 'boolean',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          'Please select the checkbox.',
+          'We get the correct value. (2)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: true,
+          valueType: 'boolean',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (3)',
+        );
+      });
+
+      test('When the value type is number', function (assert) {
+        let errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: undefined,
+          valueType: 'number',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          'Please provide a value.',
+          'We get the correct value. (1)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: '',
+          valueType: 'number',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          'Please provide a value.',
+          'We get the correct value. (2)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: '0',
+          valueType: 'number',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (3)',
+        );
+      });
+
+      test('When the value type is string', function (assert) {
+        let errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: undefined,
+          valueType: 'string',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          'Please provide a value.',
+          'We get the correct value. (1)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: '',
+          valueType: 'string',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          'Please provide a value.',
+          'We get the correct value. (2)',
+        );
+
+        errorMessage = generateErrorMessage({
+          isRequired: true,
+          value: 'Zoey',
+          valueType: 'string',
+        });
+
+        assert.strictEqual(
+          errorMessage,
+          undefined,
+          'We get the correct value. (3)',
+        );
+      });
+    });
+  });
+});
diff --git a/docs-app/tests/unit/utils/components/widgets/widget-2-test.ts b/docs-app/tests/unit/utils/components/widgets/widget-2-test.ts
index fa748915..1bca958c 100644
--- a/docs-app/tests/unit/utils/components/widgets/widget-2-test.ts
+++ b/docs-app/tests/unit/utils/components/widgets/widget-2-test.ts
@@ -1,4 +1,4 @@
-import musicRevenue from 'docs-app/data/music-revenue';
+import { musicRevenues } from 'docs-app/data';
 import {
   createDataForVisualization,
   createSummariesForCaptions,
@@ -23,7 +23,7 @@ module('Unit | Utility | components/widgets/widget-2', function () {
 
   module('createDataForVisualization', function () {
     test('works', function (assert) {
-      const data = createDataForVisualization(musicRevenue);
+      const data = createDataForVisualization(musicRevenues);
 
       assert.strictEqual(data.length, 1058, 'There are 1058 data points.');
 
@@ -51,7 +51,7 @@ module('Unit | Utility | components/widgets/widget-2', function () {
 
   module('createSummariesForCaptions', function () {
     test('works', function (assert) {
-      const data = createDataForVisualization(musicRevenue);
+      const data = createDataForVisualization(musicRevenues);
       const summaries = createSummariesForCaptions(data);
 
       assert.strictEqual(summaries.length, 23, 'There are 23 summaries.');
diff --git a/docs-app/tests/unit/utils/components/widgets/widget-3-test.ts b/docs-app/tests/unit/utils/components/widgets/widget-3-test.ts
index 4fbfe9c6..fcbef750 100644
--- a/docs-app/tests/unit/utils/components/widgets/widget-3-test.ts
+++ b/docs-app/tests/unit/utils/components/widgets/widget-3-test.ts
@@ -1,7 +1,9 @@
 import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import concertData from 'docs-app/data/concert';
-import type { ContainerDimensions } from 'docs-app/utils/components/widgets/widget-3';
-import { findBestFittingImage } from 'docs-app/utils/components/widgets/widget-3';
+import { concert } from 'docs-app/data';
+import {
+  type ContainerDimensions,
+  findBestFittingImage,
+} from 'docs-app/utils/components/widgets/widget-3';
 import { module, test } from 'qunit';
 
 type TestMatrix = Map<string, ContainerDimensions>;
@@ -110,7 +112,7 @@ module('Unit | Utility | components/widgets/widget-3', function () {
 
     module('When images is an array with more than 1 element', function () {
       test('returns the image that fits the container well', function (this: TestContext, assert) {
-        const images = concertData.images;
+        const images = concert.images;
 
         const expectedUrls = new Map([
           ['h100,w50', '/images/widgets/widget-3/venue-square@1x.jpg'],
diff --git a/docs-app/types/docs-app/index.d.ts b/docs-app/types/docs-app/index.d.ts
index e33f4c0f..dfe7538f 100644
--- a/docs-app/types/docs-app/index.d.ts
+++ b/docs-app/types/docs-app/index.d.ts
@@ -9,6 +9,7 @@ import 'ember-source/types/preview';
 import { ComponentLike, HelperLike } from '@glint/template';
 import type EmberContainerQueryRegistry from 'ember-container-query/template-registry';
 import type EmberSvgJarRegistry from 'ember-svg-jar/template-registry';
+import type EmberTruthHelpersRegistry from 'ember-truth-helpers/template-registry';
 import type EmbroiderCssModulesRegistry from 'embroider-css-modules/template-registry';
 
 type NavigationNarratorComponent = ComponentLike<{
@@ -26,6 +27,7 @@ declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry
     extends EmberContainerQueryRegistry,
       EmberSvgJarRegistry,
+      EmberTruthHelpersRegistry,
       EmbroiderCssModulesRegistry {
     // Add any registry entries from other addons here that your addon itself uses (in non-strict mode templates)
     // See https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5560d708..312931a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,6 +182,9 @@ importers:
       ember-test-selectors:
         specifier: ^6.0.0
         version: 6.0.0
+      ember-truth-helpers:
+        specifier: ^4.0.3
+        version: 4.0.3(ember-source@5.3.0)
       embroider-css-modules:
         specifier: ^1.1.0
         version: 1.1.0
@@ -7303,6 +7306,24 @@ packages:
       - supports-color
     dev: true
 
+  /ember-cli-typescript@5.2.1:
+    resolution: {integrity: sha512-qqp5TAIuPHxHiGXJKL+78Euyhy0zSKQMovPh8sJpN/ZBYx0H90pONufHR3anaMcp1snVfx4B+mb9+7ijOik8ZA==}
+    engines: {node: '>= 12.*'}
+    dependencies:
+      ansi-to-html: 0.6.15
+      broccoli-stew: 3.0.0
+      debug: 4.3.4(supports-color@8.1.1)
+      execa: 4.1.0
+      fs-extra: 9.1.0
+      resolve: 1.22.8
+      rsvp: 4.8.5
+      semver: 7.5.4
+      stagehand: 1.0.1
+      walk-sync: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /ember-cli-version-checker@3.1.3:
     resolution: {integrity: sha512-PZNSvpzwWgv68hcXxyjREpj3WWb81A7rtYNQq1lLEgrWIchF8ApKJjWP3NBpHjaatwILkZAV8klair5WFlXAKg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -7520,6 +7541,20 @@ packages:
       - supports-color
     dev: false
 
+  /ember-functions-as-helper-polyfill@2.1.2(ember-source@5.3.0):
+    resolution: {integrity: sha512-yvW6xykvZEIYzzwlrC/g9yu6LtLkkj5F+ho6U+BDxN1uREMgoMOZnji7sSILn5ITVpaJ055DPcO+utEFD7IZOA==}
+    engines: {node: '>= 14.0.0'}
+    peerDependencies:
+      ember-source: ^3.25.0 || >=4.0.0
+    dependencies:
+      ember-cli-babel: 7.26.11
+      ember-cli-typescript: 5.2.1
+      ember-cli-version-checker: 5.1.2
+      ember-source: 5.3.0(@babel/core@7.23.2)(@glimmer/component@1.1.2)(@glint/template@1.2.1)(rsvp@4.8.5)(webpack@5.89.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /ember-load-initializers@2.1.2(@babel/core@7.23.2):
     resolution: {integrity: sha512-CYR+U/wRxLbrfYN3dh+0Tb6mFaxJKfdyz+wNql6cqTrA0BBi9k6J3AaKXj273TqvEpyyXegQFFkZEiuZdYtgJw==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -7791,6 +7826,18 @@ packages:
       - supports-color
     dev: true
 
+  /ember-truth-helpers@4.0.3(ember-source@5.3.0):
+    resolution: {integrity: sha512-T6Ogd3pk9FxYiZfSxdjgn3Hb3Ksqgw7CD23V9qfig9jktNdkNEHo4+3PA3cSD/+3a2kdH3KmNvKyarVuzdtEkA==}
+    peerDependencies:
+      ember-source: '>=3.28.0'
+    dependencies:
+      '@embroider/addon-shim': 1.8.6
+      ember-functions-as-helper-polyfill: 2.1.2(ember-source@5.3.0)
+      ember-source: 5.3.0(@babel/core@7.23.2)(@glimmer/component@1.1.2)(@glint/template@1.2.1)(rsvp@4.8.5)(webpack@5.89.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /ember-try-config@4.0.0:
     resolution: {integrity: sha512-jAv7fqYJK7QYYekPc/8Nr7KOqDpv/asqM6F8xcRnbmf9UrD35BkSffY63qUuiD9e0aR5qiMNBIQzH8f65rGDqw==}
     engines: {node: 10.* || 12.* || >= 14}
diff --git a/test-app/tests/acceptance/index/accessibility-test.ts b/test-app/tests/acceptance/index/accessibility-test.ts
index 3b4825a1..71b3fdb2 100644
--- a/test-app/tests/acceptance/index/accessibility-test.ts
+++ b/test-app/tests/acceptance/index/accessibility-test.ts
@@ -1,8 +1,7 @@
 import { visit } from '@ember/test-helpers';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
 import { module, test } from 'qunit';
-
-import { setupApplicationTest, timeout } from '../../helpers';
+import { setupApplicationTest, timeout } from 'test-app/tests/helpers';
 
 module('Acceptance | index', function (hooks) {
   setupApplicationTest(hooks);
diff --git a/test-app/tests/helpers/container-query.ts b/test-app/tests/helpers/container-query.ts
index c8e7ce8b..7807aeb8 100644
--- a/test-app/tests/helpers/container-query.ts
+++ b/test-app/tests/helpers/container-query.ts
@@ -1,136 +1,3 @@
-import { find } from '@ember/test-helpers';
-
-type DataAttributes = {
-  [dataAttributeName: string]: string | undefined;
-};
-
-type Dimensions = {
-  height: number;
-  width: number;
-};
-
-type Features = {
-  [featureName: string]: boolean | undefined;
-};
-
-export interface CustomAssert extends Assert {
-  areDataAttributesCorrect?: (dataAttributes: DataAttributes) => void;
-  areDimensionsCorrect?: (dimensions: Dimensions) => void;
-  areFeaturesCorrect?: (features: Features) => void;
-}
-
-export function setupContainerQueryTest(hooks: NestedHooks): void {
-  hooks.beforeEach(setupCustomAssertions);
-  hooks.afterEach(cleanupCustomAssertions);
-}
-
-function setupCustomAssertions(assert: CustomAssert): void {
-  assert.areDataAttributesCorrect = (dataAttributes = {}) => {
-    const containerQuery = find('[data-test-container-query]');
-
-    for (const [dataAttributeName, expectedValue] of Object.entries(
-      dataAttributes,
-    )) {
-      switch (expectedValue) {
-        case undefined: {
-          assert
-            .dom(containerQuery)
-            .doesNotHaveAttribute(
-              dataAttributeName,
-              `The container doesn't have the attribute "${dataAttributeName}".`,
-            );
-
-          break;
-        }
-
-        default: {
-          assert
-            .dom(containerQuery)
-            .hasAttribute(
-              dataAttributeName,
-              expectedValue,
-              `The container has the attribute "${dataAttributeName}".`,
-            );
-        }
-      }
-    }
-  };
-
-  assert.areDimensionsCorrect = (dimensions) => {
-    const { height: expectedHeight, width: expectedWidth } = dimensions;
-
-    // Check width and height
-    assert
-      .dom('[data-test-width-height]')
-      .hasText(
-        `${expectedWidth} x ${expectedHeight}`,
-        'Width and height are correct.',
-      );
-
-    // Check aspect ratio
-    const targetElement = find('[data-test-aspect-ratio]') as HTMLElement;
-
-    const aspectRatio = parseFloat(targetElement.textContent!.trim());
-    const expectedAspectRatio = expectedWidth / expectedHeight;
-    const tolerance = 0.001;
-
-    if (expectedAspectRatio === Infinity) {
-      assert.true(
-        aspectRatio === expectedAspectRatio,
-        'Aspect ratio is correct.',
-      );
-
-      return;
-    }
-
-    const relativeError =
-      Math.abs(aspectRatio - expectedAspectRatio) /
-      Math.abs(expectedAspectRatio);
-
-    assert.true(relativeError < tolerance, 'Aspect ratio is correct.');
-  };
-
-  assert.areFeaturesCorrect = (features = {}) => {
-    for (const [featureName, meetsFeature] of Object.entries(features)) {
-      switch (meetsFeature) {
-        case true: {
-          assert
-            .dom(`[data-test-feature="${featureName}"]`)
-            .hasText(
-              'true',
-              `The container meets the feature "${featureName}".`,
-            );
-
-          break;
-        }
-
-        case false: {
-          assert
-            .dom(`[data-test-feature="${featureName}"]`)
-            .hasText(
-              'false',
-              `The container doesn't meet the feature "${featureName}".`,
-            );
-
-          break;
-        }
-
-        case undefined: {
-          assert
-            .dom(`[data-test-feature="${featureName}"]`)
-            .hasNoText(
-              `The container doesn't meet the feature "${featureName}".`,
-            );
-
-          break;
-        }
-      }
-    }
-  };
-}
-
-function cleanupCustomAssertions(assert: CustomAssert): void {
-  delete assert.areDataAttributesCorrect;
-  delete assert.areDimensionsCorrect;
-  delete assert.areFeaturesCorrect;
-}
+export * from './container-query/assert-data-attributes';
+export * from './container-query/assert-dimensions';
+export * from './container-query/assert-features';
diff --git a/test-app/tests/helpers/container-query/assert-data-attributes.ts b/test-app/tests/helpers/container-query/assert-data-attributes.ts
new file mode 100644
index 00000000..4e26a960
--- /dev/null
+++ b/test-app/tests/helpers/container-query/assert-data-attributes.ts
@@ -0,0 +1,37 @@
+import { find } from '@ember/test-helpers';
+
+type DataAttributes = Record<string, string | undefined>;
+
+export function assertDataAttributes(
+  assert: Assert,
+  dataAttributes: DataAttributes = {},
+): void {
+  const containerQuery = find('[data-test-container-query]');
+
+  for (const [dataAttributeName, expectedValue] of Object.entries(
+    dataAttributes,
+  )) {
+    switch (expectedValue) {
+      case undefined: {
+        assert
+          .dom(containerQuery)
+          .doesNotHaveAttribute(
+            dataAttributeName,
+            `The container doesn't have the attribute "${dataAttributeName}".`,
+          );
+
+        break;
+      }
+
+      default: {
+        assert
+          .dom(containerQuery)
+          .hasAttribute(
+            dataAttributeName,
+            expectedValue,
+            `The container has the attribute "${dataAttributeName}".`,
+          );
+      }
+    }
+  }
+}
diff --git a/test-app/tests/helpers/container-query/assert-dimensions.ts b/test-app/tests/helpers/container-query/assert-dimensions.ts
new file mode 100644
index 00000000..a10e2b23
--- /dev/null
+++ b/test-app/tests/helpers/container-query/assert-dimensions.ts
@@ -0,0 +1,39 @@
+import { find } from '@ember/test-helpers';
+
+type Dimensions = {
+  height: number;
+  width: number;
+};
+
+export function assertDimensions(assert: Assert, dimensions: Dimensions): void {
+  const { height: expectedHeight, width: expectedWidth } = dimensions;
+
+  // Check width and height
+  assert
+    .dom('[data-test-width-height]')
+    .hasText(
+      `${expectedWidth} x ${expectedHeight}`,
+      'Width and height are correct.',
+    );
+
+  // Check aspect ratio
+  const targetElement = find('[data-test-aspect-ratio]') as HTMLElement;
+
+  const aspectRatio = parseFloat(targetElement.textContent!.trim());
+  const expectedAspectRatio = expectedWidth / expectedHeight;
+  const tolerance = 0.001;
+
+  if (expectedAspectRatio === Infinity) {
+    assert.true(
+      aspectRatio === expectedAspectRatio,
+      'Aspect ratio is correct.',
+    );
+
+    return;
+  }
+
+  const relativeError =
+    Math.abs(aspectRatio - expectedAspectRatio) / Math.abs(expectedAspectRatio);
+
+  assert.true(relativeError < tolerance, 'Aspect ratio is correct.');
+}
diff --git a/test-app/tests/helpers/container-query/assert-features.ts b/test-app/tests/helpers/container-query/assert-features.ts
new file mode 100644
index 00000000..854f949f
--- /dev/null
+++ b/test-app/tests/helpers/container-query/assert-features.ts
@@ -0,0 +1,36 @@
+type Features = Record<string, boolean | undefined>;
+
+export function assertFeatures(assert: Assert, features: Features = {}): void {
+  for (const [featureName, meetsFeature] of Object.entries(features)) {
+    switch (meetsFeature) {
+      case true: {
+        assert
+          .dom(`[data-test-feature="${featureName}"]`)
+          .hasText('true', `The container meets the feature "${featureName}".`);
+
+        break;
+      }
+
+      case false: {
+        assert
+          .dom(`[data-test-feature="${featureName}"]`)
+          .hasText(
+            'false',
+            `The container doesn't meet the feature "${featureName}".`,
+          );
+
+        break;
+      }
+
+      case undefined: {
+        assert
+          .dom(`[data-test-feature="${featureName}"]`)
+          .hasNoText(
+            `The container doesn't meet the feature "${featureName}".`,
+          );
+
+        break;
+      }
+    }
+  }
+}
diff --git a/test-app/tests/integration/components/container-query/dataAttributePrefix-test.ts b/test-app/tests/integration/components/container-query/dataAttributePrefix-test.ts
index 44b2a0fc..a68d9c4f 100644
--- a/test-app/tests/integration/components/container-query/dataAttributePrefix-test.ts
+++ b/test-app/tests/integration/components/container-query/dataAttributePrefix-test.ts
@@ -1,16 +1,16 @@
 import { set } from '@ember/object';
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
+import {
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import type { CustomAssert } from '../../../helpers';
 import {
+  assertDataAttributes,
   resizeContainer,
-  setupContainerQueryTest,
   setupRenderingTest,
   timeout,
-} from '../../../helpers';
+} from 'test-app/tests/helpers';
 
 interface TestContext extends BaseTestContext {
   dataAttributePrefix?: string;
@@ -18,7 +18,6 @@ interface TestContext extends BaseTestContext {
 
 module('Integration | Component | container-query', function (hooks) {
   setupRenderingTest(hooks);
-  setupContainerQueryTest(hooks);
 
   module('When @dataAttributePrefix is undefined', function (hooks) {
     hooks.beforeEach(async function () {
@@ -62,8 +61,8 @@ module('Integration | Component | container-query', function (hooks) {
       await timeout();
     });
 
-    test('The component creates data attributes when it is rendered', async function (this: TestContext, assert: CustomAssert) {
-      assert.areDataAttributesCorrect!({
+    test('The component creates data attributes when it is rendered', async function (this: TestContext, assert) {
+      assertDataAttributes(assert, {
         'data-container-query-small': '',
         'data-container-query-medium': undefined,
         'data-container-query-large': undefined,
@@ -75,10 +74,10 @@ module('Integration | Component | container-query', function (hooks) {
       });
     });
 
-    test('The component updates data attributes when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates data attributes when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-container-query-small': undefined,
         'data-container-query-medium': '',
         'data-container-query-large': undefined,
@@ -91,7 +90,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-container-query-small': undefined,
         'data-container-query-medium': undefined,
         'data-container-query-large': '',
@@ -104,7 +103,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-container-query-small': undefined,
         'data-container-query-medium': undefined,
         'data-container-query-large': undefined,
@@ -162,8 +161,8 @@ module('Integration | Component | container-query', function (hooks) {
         await timeout();
       });
 
-      test('The component creates data attributes when it is rendered', async function (this: TestContext, assert: CustomAssert) {
-        assert.areDataAttributesCorrect!({
+      test('The component creates data attributes when it is rendered', async function (this: TestContext, assert) {
+        assertDataAttributes(assert, {
           'data-small': '',
           'data-medium': undefined,
           'data-large': undefined,
@@ -175,10 +174,10 @@ module('Integration | Component | container-query', function (hooks) {
         });
       });
 
-      test('The component updates data attributes when it is resized', async function (this: TestContext, assert: CustomAssert) {
+      test('The component updates data attributes when it is resized', async function (this: TestContext, assert) {
         await resizeContainer({ height: 300, width: 500 });
 
-        assert.areDataAttributesCorrect!({
+        assertDataAttributes(assert, {
           'data-small': undefined,
           'data-medium': '',
           'data-large': undefined,
@@ -191,7 +190,7 @@ module('Integration | Component | container-query', function (hooks) {
 
         await resizeContainer({ height: 400, width: 800 });
 
-        assert.areDataAttributesCorrect!({
+        assertDataAttributes(assert, {
           'data-small': undefined,
           'data-medium': undefined,
           'data-large': '',
@@ -204,7 +203,7 @@ module('Integration | Component | container-query', function (hooks) {
 
         await resizeContainer({ height: 600, width: 1000 });
 
-        assert.areDataAttributesCorrect!({
+        assertDataAttributes(assert, {
           'data-small': undefined,
           'data-medium': undefined,
           'data-large': undefined,
@@ -263,8 +262,8 @@ module('Integration | Component | container-query', function (hooks) {
         await timeout();
       });
 
-      test('The component creates data attributes when it is rendered', async function (this: TestContext, assert: CustomAssert) {
-        assert.areDataAttributesCorrect!({
+      test('The component creates data attributes when it is rendered', async function (this: TestContext, assert) {
+        assertDataAttributes(assert, {
           'data-cq-small': '',
           'data-cq-medium': undefined,
           'data-cq-large': undefined,
@@ -276,10 +275,10 @@ module('Integration | Component | container-query', function (hooks) {
         });
       });
 
-      test('The component updates data attributes when it is resized', async function (this: TestContext, assert: CustomAssert) {
+      test('The component updates data attributes when it is resized', async function (this: TestContext, assert) {
         await resizeContainer({ height: 300, width: 500 });
 
-        assert.areDataAttributesCorrect!({
+        assertDataAttributes(assert, {
           'data-cq-small': undefined,
           'data-cq-medium': '',
           'data-cq-large': undefined,
@@ -292,7 +291,7 @@ module('Integration | Component | container-query', function (hooks) {
 
         await resizeContainer({ height: 400, width: 800 });
 
-        assert.areDataAttributesCorrect!({
+        assertDataAttributes(assert, {
           'data-cq-small': undefined,
           'data-cq-medium': undefined,
           'data-cq-large': '',
@@ -305,7 +304,7 @@ module('Integration | Component | container-query', function (hooks) {
 
         await resizeContainer({ height: 600, width: 1000 });
 
-        assert.areDataAttributesCorrect!({
+        assertDataAttributes(assert, {
           'data-cq-small': undefined,
           'data-cq-medium': undefined,
           'data-cq-large': undefined,
@@ -366,8 +365,8 @@ module('Integration | Component | container-query', function (hooks) {
       set(this, 'dataAttributePrefix', 'cq2');
     });
 
-    test('The component updates the data attributes', async function (this: TestContext, assert: CustomAssert) {
-      assert.areDataAttributesCorrect!({
+    test('The component updates the data attributes', async function (this: TestContext, assert) {
+      assertDataAttributes(assert, {
         'data-cq1-small': undefined,
         'data-cq1-medium': undefined,
         'data-cq1-large': undefined,
@@ -378,7 +377,7 @@ module('Integration | Component | container-query', function (hooks) {
         'data-cq1-ratio-type-C': undefined,
       });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq2-small': '',
         'data-cq2-medium': undefined,
         'data-cq2-large': undefined,
@@ -390,10 +389,10 @@ module('Integration | Component | container-query', function (hooks) {
       });
     });
 
-    test('The component updates the data attributes when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates the data attributes when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq1-small': undefined,
         'data-cq1-medium': undefined,
         'data-cq1-large': undefined,
@@ -404,7 +403,7 @@ module('Integration | Component | container-query', function (hooks) {
         'data-cq1-ratio-type-C': undefined,
       });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq2-small': undefined,
         'data-cq2-medium': '',
         'data-cq2-large': undefined,
@@ -417,7 +416,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq1-small': undefined,
         'data-cq1-medium': undefined,
         'data-cq1-large': undefined,
@@ -428,7 +427,7 @@ module('Integration | Component | container-query', function (hooks) {
         'data-cq1-ratio-type-C': undefined,
       });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq2-small': undefined,
         'data-cq2-medium': undefined,
         'data-cq2-large': '',
@@ -441,7 +440,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq1-small': undefined,
         'data-cq1-medium': undefined,
         'data-cq1-large': undefined,
@@ -452,7 +451,7 @@ module('Integration | Component | container-query', function (hooks) {
         'data-cq1-ratio-type-C': undefined,
       });
 
-      assert.areDataAttributesCorrect!({
+      assertDataAttributes(assert, {
         'data-cq2-small': undefined,
         'data-cq2-medium': undefined,
         'data-cq2-large': undefined,
diff --git a/test-app/tests/integration/components/container-query/debounce-test.ts b/test-app/tests/integration/components/container-query/debounce-test.ts
index 24f16282..f13441ab 100644
--- a/test-app/tests/integration/components/container-query/debounce-test.ts
+++ b/test-app/tests/integration/components/container-query/debounce-test.ts
@@ -1,15 +1,15 @@
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
+import {
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import type { CustomAssert } from '../../../helpers';
 import {
+  assertFeatures,
   resizeContainer,
-  setupContainerQueryTest,
   setupRenderingTest,
   timeout,
-} from '../../../helpers';
+} from 'test-app/tests/helpers';
 
 interface TestContext extends BaseTestContext {
   debounce?: number;
@@ -17,10 +17,9 @@ interface TestContext extends BaseTestContext {
 
 module('Integration | Component | container-query', function (hooks) {
   setupRenderingTest(hooks);
-  setupContainerQueryTest(hooks);
 
   module('When @debounce is passed', function () {
-    test('Container queries are debounced until the @debounce time passes', async function (this: TestContext, assert: CustomAssert) {
+    test('Container queries are debounced until the @debounce time passes', async function (this: TestContext, assert) {
       /*
         Caution:
 
@@ -71,7 +70,7 @@ module('Integration | Component | container-query', function (hooks) {
         </div>
       `);
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: true,
         medium: false,
         large: false,
@@ -86,7 +85,7 @@ module('Integration | Component | container-query', function (hooks) {
       // same as before.
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: true,
         medium: false,
         large: false,
@@ -99,7 +98,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: true,
         medium: false,
         large: false,
@@ -112,7 +111,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: true,
         medium: false,
         large: false,
@@ -127,7 +126,7 @@ module('Integration | Component | container-query', function (hooks) {
       // will update.
       await timeout(this.debounce);
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: false,
         medium: false,
         large: false,
diff --git a/test-app/tests/integration/components/container-query/features-test.ts b/test-app/tests/integration/components/container-query/features-test.ts
index 15d8fd8b..0682f05f 100644
--- a/test-app/tests/integration/components/container-query/features-test.ts
+++ b/test-app/tests/integration/components/container-query/features-test.ts
@@ -1,17 +1,18 @@
 import { set } from '@ember/object';
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
+import {
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import type { Features } from 'ember-container-query';
 import { module, test } from 'qunit';
-
-import type { CustomAssert } from '../../../helpers';
 import {
+  assertDimensions,
+  assertFeatures,
   resizeContainer,
-  setupContainerQueryTest,
   setupRenderingTest,
   timeout,
-} from '../../../helpers';
+} from 'test-app/tests/helpers';
 
 type FeatureNames =
   | 'small'
@@ -29,7 +30,6 @@ interface TestContext extends BaseTestContext {
 
 module('Integration | Component | container-query', function (hooks) {
   setupRenderingTest(hooks);
-  setupContainerQueryTest(hooks);
 
   module('When @features is undefined', function (hooks) {
     hooks.beforeEach(async function () {
@@ -67,8 +67,8 @@ module('Integration | Component | container-query', function (hooks) {
       await timeout();
     });
 
-    test('The component renders', async function (this: TestContext, assert: CustomAssert) {
-      assert.areFeaturesCorrect!({
+    test('The component renders', async function (this: TestContext, assert) {
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         large: undefined,
@@ -79,13 +79,13 @@ module('Integration | Component | container-query', function (hooks) {
         'ratio-type-C': undefined,
       });
 
-      assert.areDimensionsCorrect!({ height: 500, width: 250 });
+      assertDimensions(assert, { height: 500, width: 250 });
     });
 
-    test('The component updates features when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates features when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         large: undefined,
@@ -98,7 +98,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         large: undefined,
@@ -111,7 +111,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         large: undefined,
@@ -123,18 +123,18 @@ module('Integration | Component | container-query', function (hooks) {
       });
     });
 
-    test('The component updates dimensions when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates dimensions when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areDimensionsCorrect!({ height: 300, width: 500 });
+      assertDimensions(assert, { height: 300, width: 500 });
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areDimensionsCorrect!({ height: 400, width: 800 });
+      assertDimensions(assert, { height: 400, width: 800 });
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areDimensionsCorrect!({ height: 600, width: 1000 });
+      assertDimensions(assert, { height: 600, width: 1000 });
     });
   });
 
@@ -180,8 +180,8 @@ module('Integration | Component | container-query', function (hooks) {
       await timeout();
     });
 
-    test('The component renders', async function (this: TestContext, assert: CustomAssert) {
-      assert.areFeaturesCorrect!({
+    test('The component renders', async function (this: TestContext, assert) {
+      assertFeatures(assert, {
         small: true,
         medium: false,
         large: false,
@@ -192,13 +192,13 @@ module('Integration | Component | container-query', function (hooks) {
         'ratio-type-C': false,
       });
 
-      assert.areDimensionsCorrect!({ height: 500, width: 250 });
+      assertDimensions(assert, { height: 500, width: 250 });
     });
 
-    test('The component updates features when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates features when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: false,
         medium: true,
         large: false,
@@ -211,7 +211,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: false,
         medium: false,
         large: true,
@@ -224,7 +224,7 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: false,
         medium: false,
         large: false,
@@ -236,18 +236,18 @@ module('Integration | Component | container-query', function (hooks) {
       });
     });
 
-    test('The component updates dimensions when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates dimensions when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areDimensionsCorrect!({ height: 300, width: 500 });
+      assertDimensions(assert, { height: 300, width: 500 });
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areDimensionsCorrect!({ height: 400, width: 800 });
+      assertDimensions(assert, { height: 400, width: 800 });
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areDimensionsCorrect!({ height: 600, width: 1000 });
+      assertDimensions(assert, { height: 600, width: 1000 });
     });
   });
 
@@ -331,15 +331,15 @@ module('Integration | Component | container-query', function (hooks) {
       });
     });
 
-    test('The component updates the features', async function (this: TestContext, assert: CustomAssert) {
-      assert.areFeaturesCorrect!({
+    test('The component updates the features', async function (this: TestContext, assert) {
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         short: undefined,
         'ratio-type-C': undefined,
       });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         large: false,
         tall: true,
         'ratio-type-A': true,
@@ -347,17 +347,17 @@ module('Integration | Component | container-query', function (hooks) {
       });
     });
 
-    test('The component updates features when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component updates features when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         short: undefined,
         'ratio-type-C': undefined,
       });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         large: false,
         tall: false,
         'ratio-type-A': false,
@@ -366,14 +366,14 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 400, width: 800 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         short: undefined,
         'ratio-type-C': undefined,
       });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         large: true,
         tall: false,
         'ratio-type-A': false,
@@ -382,14 +382,14 @@ module('Integration | Component | container-query', function (hooks) {
 
       await resizeContainer({ height: 600, width: 1000 });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         small: undefined,
         medium: undefined,
         short: undefined,
         'ratio-type-C': undefined,
       });
 
-      assert.areFeaturesCorrect!({
+      assertFeatures(assert, {
         large: false,
         tall: true,
         'ratio-type-A': false,
diff --git a/test-app/tests/integration/components/container-query/splattributes-test.ts b/test-app/tests/integration/components/container-query/splattributes-test.ts
index e8120602..bb589f52 100644
--- a/test-app/tests/integration/components/container-query/splattributes-test.ts
+++ b/test-app/tests/integration/components/container-query/splattributes-test.ts
@@ -1,22 +1,14 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import type { CustomAssert } from '../../../helpers';
-import {
-  setupContainerQueryTest,
-  setupRenderingTest,
-  timeout,
-} from '../../../helpers';
+import { setupRenderingTest, timeout } from 'test-app/tests/helpers';
 
 module('Integration | Component | container-query', function (hooks) {
   setupRenderingTest(hooks);
-  setupContainerQueryTest(hooks);
 
   module('...attributes', function () {
-    test('The component accepts splattributes', async function (this: TestContext, assert: CustomAssert) {
-      await render<TestContext>(hbs`
+    test('The component accepts splattributes', async function (assert) {
+      await render(hbs`
         {{!-- template-lint-disable no-inline-styles --}}
         <div style="width: 500px; height: 800px;">
           <ContainerQuery
diff --git a/test-app/tests/integration/components/container-query/tagName-test.ts b/test-app/tests/integration/components/container-query/tagName-test.ts
index 1d1039a6..31ecbe08 100644
--- a/test-app/tests/integration/components/container-query/tagName-test.ts
+++ b/test-app/tests/integration/components/container-query/tagName-test.ts
@@ -1,16 +1,15 @@
 import { set } from '@ember/object';
-import type { TestContext as BaseTestContext } from '@ember/test-helpers';
-import { render } from '@ember/test-helpers';
+import {
+  render,
+  type TestContext as BaseTestContext,
+} from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import type { CustomAssert } from '../../../helpers';
 import {
   resizeContainer,
-  setupContainerQueryTest,
   setupRenderingTest,
   timeout,
-} from '../../../helpers';
+} from 'test-app/tests/helpers';
 
 interface TestContext extends BaseTestContext {
   tagName?: string;
@@ -18,7 +17,6 @@ interface TestContext extends BaseTestContext {
 
 module('Integration | Component | container-query', function (hooks) {
   setupRenderingTest(hooks);
-  setupContainerQueryTest(hooks);
 
   module('When @tagName is undefined', function (hooks) {
     hooks.beforeEach(async function () {
@@ -62,13 +60,13 @@ module('Integration | Component | container-query', function (hooks) {
       await timeout();
     });
 
-    test('The component has the <div> tag', async function (this: TestContext, assert: CustomAssert) {
+    test('The component has the <div> tag', async function (this: TestContext, assert) {
       assert
         .dom('[data-test-container-query]')
         .hasTagName('div', 'We see the correct tag name.');
     });
 
-    test('The component continues to have the <div> tag when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component continues to have the <div> tag when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
       assert
@@ -132,13 +130,13 @@ module('Integration | Component | container-query', function (hooks) {
       await timeout();
     });
 
-    test('The component has the correct tag', async function (this: TestContext, assert: CustomAssert) {
+    test('The component has the correct tag', async function (this: TestContext, assert) {
       assert
         .dom('[data-test-container-query]')
         .hasTagName('section', 'We see the correct tag name.');
     });
 
-    test('The component continues to have the correct tag when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component continues to have the correct tag when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
       assert
@@ -206,14 +204,14 @@ module('Integration | Component | container-query', function (hooks) {
       set(this, 'tagName', 'article');
     });
 
-    test("The component doesn't update the tag", async function (this: TestContext, assert: CustomAssert) {
+    test("The component doesn't update the tag", async function (this: TestContext, assert) {
       assert
         .dom('[data-test-container-query]')
         .hasTagName('section', 'We see the correct tag name.')
         .doesNotHaveTagName('article', 'The tag name should not change.');
     });
 
-    test('The component continues to not update the tag when it is resized', async function (this: TestContext, assert: CustomAssert) {
+    test('The component continues to not update the tag when it is resized', async function (this: TestContext, assert) {
       await resizeContainer({ height: 300, width: 500 });
 
       assert
diff --git a/test-app/tests/integration/helpers/aspect-ratio-test.ts b/test-app/tests/integration/helpers/aspect-ratio-test.ts
index a3ad9a03..bdc23e20 100644
--- a/test-app/tests/integration/helpers/aspect-ratio-test.ts
+++ b/test-app/tests/integration/helpers/aspect-ratio-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import { setupRenderingTest } from '../../helpers';
+import { setupRenderingTest } from 'test-app/tests/helpers';
 
 module('Integration | Helper | aspect-ratio', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('can return a hash with default values', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('can return a hash with default values', async function (assert) {
+    await render(hbs`
       {{#let (aspect-ratio) as |output|}}
         <p data-test-value="dimension">{{output.dimension}}</p>
         <p data-test-value="min">{{output.min}}</p>
@@ -22,8 +20,8 @@ module('Integration | Helper | aspect-ratio', function (hooks) {
     assert.dom('[data-test-value="max"]').hasText('Infinity');
   });
 
-  test('if min and max are provided, returns them as they are', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('if min and max are provided, returns them as they are', async function (assert) {
+    await render(hbs`
       {{#let (aspect-ratio min=0.25 max=0.75) as |output|}}
         <p data-test-value="dimension">{{output.dimension}}</p>
         <p data-test-value="min">{{output.min}}</p>
diff --git a/test-app/tests/integration/helpers/height-test.ts b/test-app/tests/integration/helpers/height-test.ts
index 416eea41..0b8132a6 100644
--- a/test-app/tests/integration/helpers/height-test.ts
+++ b/test-app/tests/integration/helpers/height-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import { setupRenderingTest } from '../../helpers';
+import { setupRenderingTest } from 'test-app/tests/helpers';
 
 module('Integration | Helper | height', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('can return a hash with default values', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('can return a hash with default values', async function (assert) {
+    await render(hbs`
       {{#let (height) as |output|}}
         <p data-test-value="dimension">{{output.dimension}}</p>
         <p data-test-value="min">{{output.min}}</p>
@@ -22,8 +20,8 @@ module('Integration | Helper | height', function (hooks) {
     assert.dom('[data-test-value="max"]').hasText('Infinity');
   });
 
-  test('if min and max are provided, returns them as they are', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('if min and max are provided, returns them as they are', async function (assert) {
+    await render(hbs`
       {{#let (height min=100 max=200) as |output|}}
         <p data-test-value="dimension">{{output.dimension}}</p>
         <p data-test-value="min">{{output.min}}</p>
diff --git a/test-app/tests/integration/helpers/width-test.ts b/test-app/tests/integration/helpers/width-test.ts
index a1c96b85..5d684ced 100644
--- a/test-app/tests/integration/helpers/width-test.ts
+++ b/test-app/tests/integration/helpers/width-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import { setupRenderingTest } from '../../helpers';
+import { setupRenderingTest } from 'test-app/tests/helpers';
 
 module('Integration | Helper | width', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('can return a hash with default values', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('can return a hash with default values', async function (assert) {
+    await render(hbs`
       {{#let (width) as |output|}}
         <p data-test-value="dimension">{{output.dimension}}</p>
         <p data-test-value="min">{{output.min}}</p>
@@ -22,8 +20,8 @@ module('Integration | Helper | width', function (hooks) {
     assert.dom('[data-test-value="max"]').hasText('Infinity');
   });
 
-  test('if min and max are provided, returns them as they are', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('if min and max are provided, returns them as they are', async function (assert) {
+    await render(hbs`
       {{#let (width min=100 max=200) as |output|}}
         <p data-test-value="dimension">{{output.dimension}}</p>
         <p data-test-value="min">{{output.min}}</p>
diff --git a/test-app/tests/integration/modifiers/container-query-test.ts b/test-app/tests/integration/modifiers/container-query-test.ts
index 027acd3f..b158a09a 100644
--- a/test-app/tests/integration/modifiers/container-query-test.ts
+++ b/test-app/tests/integration/modifiers/container-query-test.ts
@@ -1,15 +1,13 @@
-import type { TestContext } from '@ember/test-helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
-import { setupRenderingTest } from '../../helpers';
+import { setupRenderingTest } from 'test-app/tests/helpers';
 
 module('Integration | Modifier | container-query', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('We can call the modifier without passing arguments', async function (this: TestContext, assert) {
-    await render<TestContext>(hbs`
+  test('We can call the modifier without passing arguments', async function (assert) {
+    await render(hbs`
       {{!-- template-lint-disable no-inline-styles --}}
       <div
         data-test-parent-element