diff --git a/projects/canopy-test-app/src/app/app.component.html b/projects/canopy-test-app/src/app/app.component.html
index d35ebebda..205403ed8 100644
--- a/projects/canopy-test-app/src/app/app.component.html
+++ b/projects/canopy-test-app/src/app/app.component.html
@@ -403,7 +403,6 @@ <h3>Carousel item 3</h3>
                     <lg-filter-container-panel-body>
                       <lg-date-field>
                         Date of birth
-                        <lg-hint>e.g. 05 12 1980</lg-hint>
                       </lg-date-field>
 
                       <lg-checkbox-group>
@@ -505,7 +504,6 @@ <h3>Carousel item 3</h3>
 
                   <lg-date-field formControlName="date">
                     Date of birth
-                    <lg-hint>e.g. 05 12 1980</lg-hint>
                   </lg-date-field>
 
                   <lg-checkbox-group formControlName="colors" lgMarginBottom="none">
@@ -556,7 +554,7 @@ <h3>Carousel item 3</h3>
 
                   <lg-input-field>
                     Sort Code
-                    <lg-hint>Must be 6 digits long</lg-hint>
+                    <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
                     <input lgInput lgSortCode formControlName="sortCode" />
                   </lg-input-field>
 
diff --git a/projects/canopy/src/lib/accordion/docs/accordion.stories.ts b/projects/canopy/src/lib/accordion/docs/accordion.stories.ts
index 234993787..224fddf89 100644
--- a/projects/canopy/src/lib/accordion/docs/accordion.stories.ts
+++ b/projects/canopy/src/lib/accordion/docs/accordion.stories.ts
@@ -14,7 +14,12 @@ const accordionItems = `
 <lg-accordion-item [isActive]="itemOneActive"
                    (opened)="toggle('Item 1 opened')"
                    (closed)="toggle('Item 1 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForFirstAccordionItem" [name]="iconForFirstAccordionItem"></lg-icon>Item 1</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForFirstAccordionItem) {
+      <lg-icon [name]="iconForFirstAccordionItem"></lg-icon>
+    }
+    Item 1
+  </lg-accordion-panel-heading>
 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua.</p>
@@ -22,7 +27,12 @@ const accordionItems = `
 <lg-accordion-item [isActive]="itemTwoActive"
                    (opened)="toggle('Item 3 opened')"
                    (closed)="toggle('Item 2 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForSecondAccordionItem" [name]="iconForSecondAccordionItem"></lg-icon>Item 2</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForSecondAccordionItem) {
+      <lg-icon [name]="iconForSecondAccordionItem"></lg-icon>
+    }
+    Item 2
+  </lg-accordion-panel-heading>
 
   <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in
@@ -33,7 +43,12 @@ const accordionItems = `
   </button>
 </lg-accordion-item>
 <lg-accordion-item [isActive]="itemThreeActive">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForThirdAccordionItem" [name]="iconForThirdAccordionItem"></lg-icon>Item 3 is Lazy</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForThirdAccordionItem) {
+      <lg-icon [name]="iconForThirdAccordionItem"></lg-icon>
+    }
+    Item 3 is Lazy
+  </lg-accordion-panel-heading>
 
   <ng-template lgAccordionItemContent>
     <p>This panel content is only initialised when opened</p>
diff --git a/projects/canopy/src/lib/card/docs/card/card.stories.ts b/projects/canopy/src/lib/card/docs/card/card.stories.ts
index 23ce34af7..f3e064ac7 100644
--- a/projects/canopy/src/lib/card/docs/card/card.stories.ts
+++ b/projects/canopy/src/lib/card/docs/card/card.stories.ts
@@ -71,7 +71,9 @@ const formJourneyTemplate = `
 
                     <lg-input-field [block]="true">
                       {{label}}
-                      <lg-hint *ngIf="hint">{{hint}}</lg-hint>
+                      @if (hint) {
+                        <lg-hint>{{hint}}</lg-hint>
+                      }
                       <input lgInput formControlName="accountNumber" size="8" />
                     </lg-input-field>
                   </div>
@@ -177,12 +179,12 @@ const showMoreCardTemplate = `
       <div lgMarginTop="5">
         <button lg-button type="button" variant="link" lgButtonToggle (toggleActive)="toggleActive($event)"
                 lgMarginBottom="none">
-          <ng-container *ngIf="isToggleActive">
+          @if (isToggleActive) {
             Show less
-          </ng-container>
-          <ng-container *ngIf="!isToggleActive">
+          }
+          @if (!isToggleActive) {
             Show more
-          </ng-container>
+          }
         </button>
       </div>
     </lg-card-content>
@@ -257,14 +259,16 @@ const dataPointsCardTemplate = `
   </lg-card-header>
   <lg-card-content>
     <lg-card-content-inner-data-points>
-      <lg-data-point *ngFor="let number of [].constructor(dataPoints); let i = index;">
-        <lg-data-point-label [headingLevel]="3">
-          {{data[i].label}}
-        </lg-data-point-label>
-        <lg-data-point-value>
-          {{data[i].value}}
-        </lg-data-point-value>
-      </lg-data-point>
+      @for (number of [].constructor(dataPoints); track $index; let i = $index) {
+        <lg-data-point>
+          <lg-data-point-label [headingLevel]="3">
+            {{data[i].label}}
+          </lg-data-point-label>
+          <lg-data-point-value>
+            {{data[i].value}}
+          </lg-data-point-value>
+        </lg-data-point>
+      }
     </lg-card-content-inner-data-points>
   </lg-card-content>
   <lg-card-footer lgPaddingTop="none">
@@ -328,15 +332,16 @@ const cardGroupTemplate = `
             explicabo.
           </lg-card-content>
         </lg-card>
-        <lg-card *ngFor="let i of [].constructor(additionalCards)">
-          <lg-card-header>
-            <lg-card-navigation-title title="External link title" link="https://www.landg.com"
-                                      headingLevel="2"></lg-card-navigation-title>
-          </lg-card-header>
-          <lg-card-content>
-            {{ cardContent }} <a href="#">Test link</a>.
-          </lg-card-content>
-          <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
+        @for (i of [].constructor(additionalCards); track $index) {
+          <lg-card>
+            <lg-card-header>
+              <lg-card-navigation-title title="External link title" link="https://www.landg.com"
+                                        headingLevel="2"></lg-card-navigation-title>
+            </lg-card-header>
+            <lg-card-content>
+              {{ cardContent }} <a href="#">Test link</a>.
+            </lg-card-content>
+            <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
             <lg-link-menu>
               <a href="" target="_blank">
                 <lg-link-menu-item>
diff --git a/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts b/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts
index 35b303968..367c96046 100644
--- a/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts
+++ b/projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts
@@ -26,7 +26,9 @@ const promotionsGeneralCardTemplate = `
   <lg-card-hero-img
     [cover]="true"
     [src]="hasIcon ? '' : imgUrl">
-    <lg-brand-icon *ngIf="hasIcon" [name]="iconName" size="xs"></lg-brand-icon>
+    @if (hasIcon) {
+      <lg-brand-icon [name]="iconName" size="xs"></lg-brand-icon>
+    }
   </lg-card-hero-img>
   <lg-card-content>
     <h3 lgMarginBottom="2" class="lg-font--expressive">{{ title }}</h3>
diff --git a/projects/canopy/src/lib/footer/docs/footer.stories.ts b/projects/canopy/src/lib/footer/docs/footer.stories.ts
index f279057af..057af9ee1 100644
--- a/projects/canopy/src/lib/footer/docs/footer.stories.ts
+++ b/projects/canopy/src/lib/footer/docs/footer.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgFor, NgIf } from '@angular/common';
 
 import { LgFooterComponent } from '../footer.component';
 import { LgFooterNavComponent } from '../footer-nav/footer-nav.component';
@@ -51,8 +50,6 @@ export default {
         LgFooterNavItemComponent,
         LgFooterLogoComponent,
         LgFooterCopyrightComponent,
-        NgIf,
-        NgFor,
       ],
     }),
   ],
@@ -96,19 +93,23 @@ export default {
 const template = `
 <footer lg-footer>
   <lg-footer-nav variant="primary">
-    <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-      <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (primaryLink of primaryLinks; track primaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a *ngIf="!secondaryLink.isButton; else button" [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-
-      <ng-template #button>
-        <button [class]="secondaryLink.class" [id]="secondaryLink.id">{{ secondaryLink.text }}</button>
-      </ng-template>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        @if (!secondaryLink.isButton) {
+          <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+        } @else {
+          <button [class]="secondaryLink.class" [id]="secondaryLink.id">{{ secondaryLink.text }}</button>
+        }
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
@@ -154,9 +155,11 @@ export const StandardFooter = {
 const compactTemplate = `
 <footer lg-footer>
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-copyright>{{ copyright }}</lg-footer-copyright>
@@ -212,15 +215,19 @@ export const CompactFooter = {
 const coBrandedTemplate = `
 <footer lg-footer>
   <lg-footer-nav variant="primary">
-    <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-      <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (primaryLink of primaryLinks; track primaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
diff --git a/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts b/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
index 9556d9035..d46497a9c 100644
--- a/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
+++ b/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
@@ -11,7 +11,6 @@ import {
 } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents } from 'ng-mocks';
-import { NgIf } from '@angular/common';
 
 import { LgHintComponent } from '../hint';
 import { LgErrorStateMatcher } from '../validation';
@@ -99,7 +98,6 @@ describe('LgCheckboxGroupComponent', () => {
         LgToggleComponent,
         LgValidationComponent,
         LgHintComponent,
-        NgIf,
         MockComponents(LgIconComponent),
       ],
       providers: [
diff --git a/projects/canopy/src/lib/forms/date/date-field.component.html b/projects/canopy/src/lib/forms/date/date-field.component.html
index 97fcd63c2..0ea3199f6 100644
--- a/projects/canopy/src/lib/forms/date/date-field.component.html
+++ b/projects/canopy/src/lib/forms/date/date-field.component.html
@@ -6,7 +6,7 @@
   <legend lg-label>
     <ng-content />
   </legend>
-  <ng-content select="lg-hint" />
+  <lg-hint>For example, 27 12 1977</lg-hint>
   <div
     class="lg-date-field__fields"
     [formGroup]="dateFormGroup"
@@ -22,7 +22,6 @@
           formControlName="date"
           inputmode="numeric"
           maxlength="2"
-          placeholder="DD"
           size="2"
           type="text"
         />
@@ -39,7 +38,6 @@
           formControlName="month"
           inputmode="numeric"
           maxlength="2"
-          placeholder="MM"
           size="3"
           type="text"
         />
@@ -56,7 +54,6 @@
           formControlName="year"
           inputmode="numeric"
           maxlength="4"
-          placeholder="YYYY"
           size="4"
           type="text"
         />
diff --git a/projects/canopy/src/lib/forms/date/date-field.component.spec.ts b/projects/canopy/src/lib/forms/date/date-field.component.spec.ts
index 75c63a7ae..79dc0acc4 100644
--- a/projects/canopy/src/lib/forms/date/date-field.component.spec.ts
+++ b/projects/canopy/src/lib/forms/date/date-field.component.spec.ts
@@ -27,13 +27,13 @@ import { LgDateFieldComponent } from './date-field.component';
 
 const errorId = 'test-error-id';
 const hintId = 'test-hint-id';
+const customAriaDescribedById = 'custom-aria-described-by-id';
 
 @Component({
   template: `
     <form (ngSubmit)="submit()" [formGroup]="form" #testForm="ngForm">
       <lg-date-field formControlName="dateOfBirth">
         Date of birth
-        <lg-hint id="${hintId}">Hint</lg-hint>
         <lg-validation id="${errorId}">Error</lg-validation>
       </lg-date-field>
     </form>
@@ -41,7 +41,6 @@ const hintId = 'test-hint-id';
   imports: [
     FormsModule,
     ReactiveFormsModule,
-    LgHintComponent,
     LgValidationComponent,
     LgDateFieldComponent,
   ],
@@ -78,6 +77,48 @@ class TestDateInputComponent {
       this.dateChange.emit(val);
     });
   }
+
+  submit() {
+    // Form submit handler
+  }
+}
+
+@Component({
+  template: `
+    <form (ngSubmit)="submit()" [formGroup]="form" #testForm="ngForm">
+      <p id="${customAriaDescribedById}">Additional description for accessibility</p>
+      <lg-date-field formControlName="dateOfBirth" [ariaDescribedBy]="customAriaId">
+        Date of birth
+        <lg-hint id="${hintId}">Hint</lg-hint>
+        <lg-validation id="${errorId}">Error</lg-validation>
+      </lg-date-field>
+    </form>
+  `,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    LgHintComponent,
+    LgValidationComponent,
+    LgDateFieldComponent,
+  ],
+})
+class TestDateInputWithCustomAriaComponent {
+  private fb = inject(UntypedFormBuilder);
+  customAriaId = customAriaDescribedById;
+  form: UntypedFormGroup;
+
+  @ViewChild('testForm')
+  testFormDirective: FormGroupDirective;
+
+  constructor() {
+    this.form = this.fb.group({
+      dateOfBirth: [ '' ],
+    });
+  }
+
+  submit() {
+    // Form submit handler
+  }
 }
 
 describe('LgDateFieldComponent', () => {
@@ -102,7 +143,8 @@ describe('LgDateFieldComponent', () => {
         ReactiveFormsModule,
         TestDateInputComponent,
         LgDateFieldComponent,
-        MockComponents(LgHintComponent, LgValidationComponent),
+        LgHintComponent,
+        MockComponents(LgValidationComponent),
       ],
       providers: [
         {
@@ -137,9 +179,11 @@ describe('LgDateFieldComponent', () => {
     });
 
     it('links the hint to the fieldset with the correct aria attributes', () => {
-      expect(fieldsetElement.nativeElement.getAttribute('aria-describedby')).toContain(
-        hintId,
-      );
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // The hardcoded hint gets an auto-generated ID like 'lg-hint-1'
+      expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
     });
 
     it('links custom error messages to the input field with the correct aria attributes', () => {
@@ -149,10 +193,111 @@ describe('LgDateFieldComponent', () => {
     });
 
     it('combines both the hint and error ids to create the aria described attribute', () => {
-      expect(fieldsetElement.nativeElement.getAttribute('aria-describedby')).toBe(
-        `${hintId} ${errorId}`,
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // Should match pattern: 'lg-hint-{number} test-error-id'
+      expect(ariaDescribedBy).toMatch(/^lg-hint-\d+ test-error-id$/);
+    });
+  });
+
+  describe('custom ariaDescribedBy', () => {
+    it('should preserve custom ariaDescribedBy value when provided via @Input', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customId);
+    });
+
+    it('should merge custom ariaDescribedBy with hint ID', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customId);
+      expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
+    });
+
+    it('should merge custom ariaDescribedBy with error ID', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customId);
+      expect(ariaDescribedBy).toContain(errorId);
+    });
+
+    it('should merge custom ariaDescribedBy with both hint and error IDs', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // Should match pattern: 'custom-description-id lg-hint-{number} test-error-id'
+      expect(ariaDescribedBy).toMatch(
+        new RegExp(`^${customId} lg-hint-\\d+ ${errorId}$`),
       );
     });
+
+    it('should place custom ariaDescribedBy first in the merged list', () => {
+      const customId = 'custom-description-id';
+
+      dateFieldInstance.ariaDescribedBy = customId;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy.split(' ')[0]).toBe(customId);
+    });
+
+    it('should handle multiple space-separated custom IDs', () => {
+      const customIds = 'custom-id-1 custom-id-2';
+
+      dateFieldInstance.ariaDescribedBy = customIds;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      expect(ariaDescribedBy).toContain(customIds);
+      expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
+      expect(ariaDescribedBy).toContain(errorId);
+    });
+
+    it('should not add custom ariaDescribedBy if not provided', () => {
+      dateFieldInstance.ariaDescribedBy = null;
+      dateFieldInstance.ngAfterViewInit();
+      fixture.detectChanges();
+
+      const ariaDescribedBy =
+        fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+      // Should only have hint and error IDs
+      expect(ariaDescribedBy).toMatch(/^lg-hint-\d+ test-error-id$/);
+    });
   });
 
   it('adds the tabindex attribute to the fieldset element', () => {
@@ -398,3 +543,84 @@ describe('LgDateFieldComponent', () => {
     });
   });
 });
+
+describe('LgDateFieldComponent with custom ariaDescribedBy', () => {
+  let fixture: ComponentFixture<TestDateInputWithCustomAriaComponent>;
+  let fieldsetElement: DebugElement;
+  let component: TestDateInputWithCustomAriaComponent;
+  let errorStateMatcherMock: LgErrorStateMatcher;
+
+  beforeEach(waitForAsync(() => {
+    errorStateMatcherMock = {
+      isControlInvalid: jest.fn().mockReturnValue(false),
+    } as unknown as LgErrorStateMatcher;
+
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        TestDateInputWithCustomAriaComponent,
+        LgDateFieldComponent,
+        LgHintComponent,
+        MockComponents(LgValidationComponent),
+      ],
+      providers: [
+        {
+          provide: LgErrorStateMatcher,
+          useValue: errorStateMatcherMock,
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestDateInputWithCustomAriaComponent);
+    component = fixture.componentInstance;
+
+    fieldsetElement = fixture.debugElement.query(By.css('fieldset'));
+  }));
+
+  it('should create component with custom ariaDescribedBy', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should include custom ariaDescribedBy ID in the aria-describedby attribute', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+    expect(ariaDescribedBy).toContain(customAriaDescribedById);
+  });
+
+  it('should merge custom ariaDescribedBy with hint and error IDs', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+    expect(ariaDescribedBy).toContain(customAriaDescribedById);
+    expect(ariaDescribedBy).toMatch(/lg-hint-\d+/);
+    expect(ariaDescribedBy).toContain(errorId);
+  });
+
+  it('should place custom ariaDescribedBy first in the list', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+    const ids = ariaDescribedBy.split(' ');
+
+    expect(ids[0]).toBe(customAriaDescribedById);
+  });
+
+  it('should maintain all IDs in correct order: custom, hint, error', () => {
+    fixture.detectChanges();
+
+    const ariaDescribedBy =
+      fieldsetElement.nativeElement.getAttribute('aria-describedby');
+
+    // Should match pattern: 'custom-aria-described-by-id lg-hint-{number} test-error-id'
+    expect(ariaDescribedBy).toMatch(
+      new RegExp(`^${customAriaDescribedById} lg-hint-\\d+ ${errorId}$`),
+    );
+  });
+});
diff --git a/projects/canopy/src/lib/forms/date/date-field.component.ts b/projects/canopy/src/lib/forms/date/date-field.component.ts
index 34329b6d4..68a5d7e4e 100644
--- a/projects/canopy/src/lib/forms/date/date-field.component.ts
+++ b/projects/canopy/src/lib/forms/date/date-field.component.ts
@@ -1,4 +1,6 @@
 import {
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   HostBinding,
@@ -23,7 +25,6 @@ import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isValid, parseISO } from 'date-fns';
 
-import { LgDomService } from '../../utils';
 import { LgHintComponent } from '../hint';
 import { LgErrorStateMatcher } from '../validation';
 import { LgValidationComponent } from '../validation';
@@ -56,16 +57,18 @@ const labelFieldMap = {
     LgInputFieldComponent,
     LgMarginDirective,
     LgInputDirective,
+    LgHintComponent,
   ],
 })
-export class LgDateFieldComponent implements OnInit, ControlValueAccessor, OnDestroy {
-  private domService = inject(LgDomService);
+export class LgDateFieldComponent
+implements OnInit, AfterViewInit, ControlValueAccessor, OnDestroy {
   private errorState = inject(LgErrorStateMatcher);
   private ngControl = inject(NgControl, { self: true, optional: true });
   private parentFormGroupDirective = inject(FormGroupDirective, {
     optional: true,
     skipSelf: true,
   });
+  private cdr = inject(ChangeDetectorRef);
 
   private uniqueId = nextUniqueId++;
   dateFormGroup: UntypedFormGroup;
@@ -86,25 +89,13 @@ export class LgDateFieldComponent implements OnInit, ControlValueAccessor, OnDes
 
   @HostBinding('class.lg-date-field') class = true;
 
-  @ContentChild(LgHintComponent)
+  @ViewChild(LgHintComponent)
   set hintElement(element: LgHintComponent) {
-    this.ariaDescribedBy = this.domService.toggleIdInStringProperty(
-      this.ariaDescribedBy,
-      this._hintElement,
-      element,
-    );
-
     this._hintElement = element;
   }
 
   @ContentChild(LgValidationComponent)
   set errorContentElement(element: LgValidationComponent) {
-    this.ariaDescribedBy = this.domService.toggleIdInStringProperty(
-      this.ariaDescribedBy,
-      this._validationElement,
-      element,
-    );
-
     this._validationElement = element;
   }
 
@@ -189,6 +180,29 @@ export class LgDateFieldComponent implements OnInit, ControlValueAccessor, OnDes
     );
   }
 
+  ngAfterViewInit(): void {
+    const ids: Array<string> = [];
+
+    // Preserve any custom ariaDescribedBy value provided via @Input
+    if (this.ariaDescribedBy) {
+      ids.push(this.ariaDescribedBy);
+    }
+
+    if (this._hintElement?.id) {
+      ids.push(this._hintElement.id);
+    }
+
+    if (this._validationElement?.id) {
+      ids.push(this._validationElement.id);
+    }
+
+    this.ariaDescribedBy = ids.length
+      ? ids.join(' ')
+      : null;
+
+    this.cdr.detectChanges();
+  }
+
   isControlInvalid(control: NgControl, form: FormGroupDirective): boolean {
     return this.errorState.isControlInvalid(control, form);
   }
diff --git a/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts b/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts
index b0047bdc8..7f5ca8e7b 100644
--- a/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts
+++ b/projects/canopy/src/lib/forms/date/docs/date-field.stories.ts
@@ -7,24 +7,21 @@ import {
 import { moduleMetadata } from '@storybook/angular';
 
 import { LgDateFieldComponent } from '../date-field.component';
-import { LgHintComponent } from '../../hint';
 
 const template = `
 <lg-date-field [focus]="focus" formControlName="date">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
 </lg-date-field>
 `;
 
 @Component({
   selector: 'lg-reactive-form',
   template: ` <form [formGroup]="form">${template}</form> `,
-  imports: [ ReactiveFormsModule, LgDateFieldComponent, LgHintComponent ],
+  imports: [ ReactiveFormsModule, LgDateFieldComponent ],
 })
 class ReactiveFormComponent {
   fb = inject(UntypedFormBuilder);
 
-  @Input() hint: string;
   @Input() label: string;
   @Input() focus: boolean;
 
@@ -156,6 +153,11 @@ export default {
         disable: true,
       },
     },
+    ngAfterViewInit: {
+      table: {
+        disable: true,
+      },
+    },
     onBlur: {
       table: {
         disable: true,
@@ -227,7 +229,6 @@ export const DateInput = {
       <lg-reactive-form
         (inputChange)="inputChange($event)"
         [disabled]="disabled"
-        [hint]="hint"
         [label]="label"
         [focus]="focus"
       ></lg-reactive-form>
@@ -236,7 +237,6 @@ export const DateInput = {
   args: {
     disabled: false,
     label: 'Date of birth',
-    hint: 'For example, 12 06 1983',
     focus: false,
   },
   parameters: {
diff --git a/projects/canopy/src/lib/forms/date/docs/guide.mdx b/projects/canopy/src/lib/forms/date/docs/guide.mdx
index 723a1a9c7..eca55df9d 100644
--- a/projects/canopy/src/lib/forms/date/docs/guide.mdx
+++ b/projects/canopy/src/lib/forms/date/docs/guide.mdx
@@ -16,10 +16,7 @@ The output is a concatenation of individual string values into a valid ISO 8601
 Import the date input component into your application:
 
 ```js
-@NgModule({
-  ...
   imports: [ ..., LgDateFieldComponent ],
-});
 ```
 
 and in your HTML:
@@ -28,32 +25,33 @@ and in your HTML:
 <form [formGroup]="form" (ngSubmit)="..." #validationForm="ngForm">
   <lg-date-field formControlName="date">
     Date of birth
-    <lg-hint>For example, 12 06 1983</lg-hint>
-    <lg-validation *ngIf="isControlInvalid(date, validationForm)">
-      <ng-container *ngIf="date.hasError('invalidField')">
-        Enter a valid {{ date.errors.invalidField }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('invalidFields')">
-        Enter a valid {{ date.errors.invalidFields[0] }} and
-        {{ date.errors.invalidFields[1] }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('requiredField')">
-        Date of birth must include a {{ date.errors.requiredField }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('requiredFields')">
-        Date of birth must include a {{ date.errors.requiredFields[0] }} and
-        {{ date.errors.requiredFields[1] }}
-      </ng-container>
-      <ng-container *ngIf="date.hasError('invalidDate')">
-        Enter a valid date of birth
-      </ng-container>
-      <ng-container *ngIf="date.hasError('futureDate')">
-        Date must be in the past
-      </ng-container>
-      <ng-container *ngIf="date.hasError('required')">
-        Enter a date of birth
-      </ng-container>
-    </lg-validation>
+    @if (isControlInvalid(date, validationForm)) {
+      <lg-validation>
+        @if (date.hasError('invalidField')) {
+          Enter a valid {{ date.errors.invalidField }}
+        }
+        @if (date.hasError('invalidFields')) {
+          Enter a valid {{ date.errors.invalidFields[0] }} and
+          {{ date.errors.invalidFields[1] }}
+        }
+        @if (date.hasError('requiredField')) {
+          Date of birth must include a {{ date.errors.requiredField }}
+        }
+        @if (date.hasError('requiredFields')) {
+          Date of birth must include a {{ date.errors.requiredFields[0] }} and
+          {{ date.errors.requiredFields[1] }}
+        }
+        @if (date.hasError('invalidDate')) {
+          Enter a valid date of birth
+        }
+        @if (date.hasError('futureDate')) {
+          Date must be in the past
+        }
+        @if (date.hasError('required')) {
+          Enter a date of birth
+        }
+      </lg-validation>
+    }
   </lg-date-field>
 
   <button type="submit">Submit</button>
@@ -103,22 +101,24 @@ const form = new FormGroup({
 <!-- child component -->
 <ng-container formGroupName="childFormGroup">
   <lg-date-field formControlName="date">
-      <ng-container *ngIf="date.hasError('required')">
+      @if (date.hasError('required')) {
         Enter a date of birth
-      </ng-container>
+      }
   </lg-date-field>
 </ng-container>
 ```
 
 ### LgDateFieldComponent inputs
 
-| Name              | Description                                                                                                                       |   Type    |              Default               | Required |
-|-------------------|-----------------------------------------------------------------------------------------------------------------------------------|:---------:|:----------------------------------:|:--------:|
-| `dateId`          | HTML ID attribute for the date input, auto generated if not provided                                                              | `string`  | `lg-input-date-${nextUniqueId++}`  |    No    |
-| `monthId`         | HTML ID attribute for the month input, auto generated if not provided                                                             | `string`  | `lg-input-month-${nextUniqueId++}` |    No    |
-| `yearId`          | HTML ID attribute for the year input, auto generated if not provided                                                              | `string`  | `lg-input-year-${nextUniqueId++}`  |    No    |
-| `ariaDescribedBy` | HTML ID for the corresponding element that describes the date field, if not provided it will use the hint field where appropriate | `string`  |               `null`               |    No    |
-| `focus`           | Set the focus on the fieldset                                                                                                     | `boolean` |               `null`               |    No    |
+| Name              | Description                                                                                                                                    |   Type    |              Default               | Required |
+|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:----------------------------------:|:--------:|
+| `dateId`          | HTML ID attribute for the date input, auto generated if not provided                                                                           | `string`  | `lg-input-date-${nextUniqueId++}`  |    No    |
+| `monthId`         | HTML ID attribute for the month input, auto generated if not provided                                                                          | `string`  | `lg-input-month-${nextUniqueId++}` |    No    |
+| `yearId`          | HTML ID attribute for the year input, auto generated if not provided                                                                           | `string`  | `lg-input-year-${nextUniqueId++}`  |    No    |
+| `ariaDescribedBy` | HTML ID for the corresponding element that describes the date field, it will always use the hint plus anything passed to the aria described by | `string`  |               `null`               |    No    |
+| `focus`           | Set the focus on the fieldset                                                                                                                  | `boolean` |               `null`               |    No    |
+
+Note that this component automatically adds an `lg-hint` component that cannot be modified.
 
 ## Validation
 
@@ -220,10 +220,11 @@ const date = new FormControl('', [notMondayValidator()])
 ```html
 <lg-date-field formControlName="date">
   Date of appointment
-  <lg-hint>For example, 12 06 1983</lg-hint>
-  <lg-validation *ngIf="isControlInvalid(date, validationForm) && date.hasError('notMonday')">
-    Date cannot be a Monday
-  </lg-validation>
+  @if (isControlInvalid(date, validationForm) && date.hasError('notMonday')) {
+    <lg-validation>
+      Date cannot be a Monday
+    </lg-validation>
+  }
  </lg-date-field>
 ```
 
@@ -244,9 +245,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('futureDate')">
+@if (date.hasError('futureDate')) {
   Date must be in the future
-</ng-container>
+}
 ```
 
 #### Past date validator
@@ -262,9 +263,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('pastDate')">
+@if (date.hasError('pastDate')) {
   Date must be in the past
-</ng-container>
+}
 ```
 
 #### Before date validator
@@ -282,9 +283,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('beforeDate')">
+@if (date.hasError('beforeDate')) {
   Date must be before {{ date.errors.beforeDate.required }}
-</ng-container>
+}
 ```
 
 #### After date validator
@@ -302,9 +303,9 @@ const control = new FormControl('', {
 ```
 
 ```html
-<ng-container *ngIf="date.hasError('afterDate')">
+@if (date.hasError('afterDate')) {
   Date must be after {{ date.errors.afterDate.required }}
-</ng-container>
+}
 ```
 
 ***
diff --git a/projects/canopy/src/lib/forms/input/docs/input.stories.ts b/projects/canopy/src/lib/forms/input/docs/input.stories.ts
index 36a3c7dc2..309521170 100644
--- a/projects/canopy/src/lib/forms/input/docs/input.stories.ts
+++ b/projects/canopy/src/lib/forms/input/docs/input.stories.ts
@@ -93,32 +93,42 @@ function setupInputStoryValues(obj, code, config?: Config) {
 const inputTemplate = `
 <lg-input-field [block]="block" [showLabel]="showLabel">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
-  <span lgPrefix *ngIf="showTextPrefix">{{ prefix }}</span>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
+  @if (showTextPrefix) {
+    <span lgPrefix>{{ prefix }}</span>
+  }
   <input lgInput formControlName="name" [size]="size" />
-  <button
-    lg-button
-    lgSuffix
-    size="sm"
-    [iconButton]="true"
-    variant="add-on"
-    *ngIf="showButtonFirstSuffix"
-  >
-    Close
-    <lg-icon name="close"></lg-icon>
-  </button>
-  <button
-    lg-button
-    lgSuffix
-    size="sm"
-    [iconButton]="iconButton"
-    [variant]="buttonVariant"
-    *ngIf="showButtonSecondSuffix"
-  >
-    {{ buttonText }}
-    <lg-icon [name]="icon" *ngIf="iconButton"></lg-icon>
-  </button>
-  <span lgSuffix *ngIf="showTextSuffix">{{ suffix }}</span>
+  @if (showButtonFirstSuffix) {
+    <button
+      lg-button
+      lgSuffix
+      size="sm"
+      [iconButton]="true"
+      variant="add-on"
+    >
+      Close
+      <lg-icon name="close"></lg-icon>
+    </button>
+  }
+  @if (showButtonSecondSuffix) {
+    <button
+      lg-button
+      lgSuffix
+      size="sm"
+      [iconButton]="iconButton"
+      [variant]="buttonVariant"
+    >
+      {{ buttonText }}
+      @if (iconButton) {
+        <lg-icon [name]="icon"></lg-icon>
+      }
+    </button>
+  }
+  @if (showTextSuffix) {
+    <span lgSuffix>{{ suffix }}</span>
+  }
 </lg-input-field>
 `;
 
diff --git a/projects/canopy/src/lib/forms/input/input-field.component.spec.ts b/projects/canopy/src/lib/forms/input/input-field.component.spec.ts
index d2ab5117e..29bbfee12 100644
--- a/projects/canopy/src/lib/forms/input/input-field.component.spec.ts
+++ b/projects/canopy/src/lib/forms/input/input-field.component.spec.ts
@@ -3,13 +3,11 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents, MockedComponentFixture, MockRender, ngMocks } from 'ng-mocks';
-import { NgIf } from '@angular/common';
 
 import { LgHintComponent } from '../hint';
 import { LgLabelComponent } from '../label';
-import { LgValidationComponent } from '../validation';
+import { LgErrorStateMatcher, LgValidationComponent } from '../validation';
 import { LgButtonComponent } from '../../button';
-import { LgErrorStateMatcher } from '../validation';
 import { LgPrefixDirective } from '../../prefix';
 import { LgSuffixDirective } from '../../suffix';
 import { LgIconComponent } from '../../icon';
@@ -51,7 +49,6 @@ describe('LgInputFieldComponent', () => {
         LgSuffixDirective,
         LgPrefixDirective,
         LgLabelComponent,
-        NgIf,
         MockComponents(LgButtonComponent, LgIconComponent),
       ],
       providers: [
diff --git a/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts b/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts
index ec46501ab..5c64d4e2a 100644
--- a/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts
+++ b/projects/canopy/src/lib/forms/radio/docs/radio/radio.stories.ts
@@ -14,7 +14,9 @@ const formTemplate = `
 <form [formGroup]="form">
   <lg-radio-group [inline]="inline" [focus]="focus" formControlName="color">
     {{ label }}
-    <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+    @if (hint) {
+      <lg-hint>{{ hint }}</lg-hint>
+    }
     <lg-radio-button value="red" [size]="size" (blur)="radioBlur.emit($event)">Red</lg-radio-button>
     <lg-radio-button value="yellow" [size]="size" (blur)="radioBlur.emit($event)"
       >Yellow
diff --git a/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts b/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts
index 1a318431a..496e960ed 100644
--- a/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts
+++ b/projects/canopy/src/lib/forms/radio/docs/segment/segment.stories.ts
@@ -14,7 +14,9 @@ import { LgHintComponent } from '../../../hint';
 const segmentTemplate = `
 <lg-segment-group [inline]="inline" [focus]="focus" [stack]="stack" formControlName="color">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <lg-segment-button value="red" (blur)="segmentBlur.emit($event)">Red</lg-segment-button>
   <lg-segment-button value="yellow" (blur)="segmentBlur.emit($event)">Yellow</lg-segment-button>
   <lg-segment-button value="green" (blur)="segmentBlur.emit($event)">Green</lg-segment-button>
diff --git a/projects/canopy/src/lib/forms/select/docs/select.stories.ts b/projects/canopy/src/lib/forms/select/docs/select.stories.ts
index 9b8dbf954..e3dc44ffa 100644
--- a/projects/canopy/src/lib/forms/select/docs/select.stories.ts
+++ b/projects/canopy/src/lib/forms/select/docs/select.stories.ts
@@ -13,9 +13,13 @@ import { LgSelectDirective } from '../select.directive';
 const template = `
 <lg-select-field [block]="block">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <select lgSelect formControlName="color">
-    <option *ngFor="let option of options" [value]="option">{{ option }}</option>
+    @for (option of options; track option) {
+      <option [value]="option">{{ option }}</option>
+    }
   </select>
 </lg-select-field>
 `;
diff --git a/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx b/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx
index be7c0caf3..c0a967f76 100644
--- a/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx
+++ b/projects/canopy/src/lib/forms/sort-code/docs/guide.mdx
@@ -16,10 +16,7 @@ import { CustomBadge } from 'storybook-addon-tag-badges';
 Import the sort code and the [text input component](./?path=/docs/components-forms-text-input-guide--docs) into your application:
 
 ```js
-@NgModule({
-  ...
-  imports: [ ..., LgSortCodeComponent, LgInputComponent ],
-});
+  imports: [ ..., LgSortCodeDirective, LgInputComponent, LgHintComponent ],
 ```
 
 and in your HTML:
@@ -28,6 +25,8 @@ and in your HTML:
 
 Both the `lgInput` and `lgSortCode` directives have to be present on the input element.
 
+The exact `lg-hint` should be copied as well to ensure the correct context is provided to the user.
+
 **We recommend using <a href="https://angular.io/guide/reactive-forms" target="_blank">Angular's reactive forms</a>.**
 
 ### Validators
diff --git a/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts b/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
index 823c7e89e..d7f29a3ca 100644
--- a/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
+++ b/projects/canopy/src/lib/forms/sort-code/docs/sort-code.stories.ts
@@ -13,7 +13,7 @@ import { LgHintComponent } from '../../hint';
 const template = `
 <lg-input-field>
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
   <input lgInput lgSortCode formControlName="sortCode" />
 </lg-input-field>
 `;
@@ -86,6 +86,11 @@ export default {
         disable: true,
       },
     },
+    inputmode: {
+      table: {
+        disable: true,
+      },
+    },
     required: {
       table: {
         disable: true,
diff --git a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts
index 27727ece1..65fded53d 100644
--- a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts
+++ b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.spec.ts
@@ -55,12 +55,6 @@ describe('LgSortCodeDirective', () => {
       inputDebugElement.injector.get<LgSortCodeDirective>(LgSortCodeDirective);
   }));
 
-  it('adds a placeholder', () => {
-    fixture.detectChanges();
-
-    expect(inputDebugElement.nativeElement.placeholder).toContain('00-00-00');
-  });
-
   it('adds a required attribute', () => {
     fixture.detectChanges();
 
diff --git a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts
index ec05a0557..34b7dd586 100644
--- a/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts
+++ b/projects/canopy/src/lib/forms/sort-code/sort-code.directive.ts
@@ -8,7 +8,6 @@ import { NgControl, Validators } from '@angular/forms';
 export class LgSortCodeDirective implements OnInit {
   private ngControl = inject(NgControl);
 
-  @HostBinding('placeholder') placeholder = '00-00-00';
   @HostBinding('required') required = true;
   @HostBinding('attr.inputmode') inputmode = 'numeric';
   // 8 because we allow for the two dashes
diff --git a/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts b/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts
index d6e336595..3194f21a9 100644
--- a/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts
+++ b/projects/canopy/src/lib/forms/toggle/docs/checkbox/checkbox-group.stories.ts
@@ -14,7 +14,9 @@ const formTemplate = `
 <form [formGroup]="form">
   <lg-checkbox-group [inline]="inline" [focus]="focus" formControlName="colors">
     {{ label }}
-    <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+    @if (hint) {
+      <lg-hint>{{ hint }}</lg-hint>
+    }
     <lg-toggle value="red" (blur)="checkboxBlur.emit($event)">Red</lg-toggle>
     <lg-toggle value="yellow" (blur)="checkboxBlur.emit($event)">Yellow</lg-toggle>
   </lg-checkbox-group>
diff --git a/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx b/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx
index 0dfdc474d..bebd855b8 100644
--- a/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx
+++ b/projects/canopy/src/lib/forms/toggle/docs/checkbox/guide.mdx
@@ -57,7 +57,9 @@ and in your HTML:
 ```html
 <lg-checkbox-group [inline]="inline" [focus]="focus" formControlName="colors">
   {{ label }}
-  <lg-hint *ngIf="hint">{{ hint }}</lg-hint>
+  @if (hint) {
+    <lg-hint>{{ hint }}</lg-hint>
+  }
   <lg-toggle value="red" (blur)="checkboxBlur.emit($event)">Red</lg-toggle>
   <lg-toggle value="yellow" (blur)="checkboxBlur.emit($event)">Yellow</lg-toggle>
 </lg-checkbox-group>
diff --git a/projects/canopy/src/lib/forms/validation/docs/form.stories.ts b/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
index e980d6f30..93c8af4ea 100644
--- a/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
+++ b/projects/canopy/src/lib/forms/validation/docs/form.stories.ts
@@ -211,7 +211,6 @@ class FormGroupChildComponent implements OnInit {
 
       <lg-date-field formControlName="date">
         Date of birth
-        <lg-hint>For example, 15 06 1983</lg-hint>
         @if (isControlInvalid(date, validationForm)) {
           <lg-validation>
             @if (date.hasError('invalidField')) {
@@ -245,7 +244,7 @@ class FormGroupChildComponent implements OnInit {
 
       <lg-input-field>
         Sort Code
-        <lg-hint>Must be 6 digits long</lg-hint>
+        <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
         <input lgInput lgSortCode formControlName="sortCode" />
         @if (isControlInvalid(sortCode, validationForm)) {
           <lg-validation>
diff --git a/projects/canopy/src/lib/forms/validation/docs/guide.mdx b/projects/canopy/src/lib/forms/validation/docs/guide.mdx
index 17775c34a..87196bce1 100644
--- a/projects/canopy/src/lib/forms/validation/docs/guide.mdx
+++ b/projects/canopy/src/lib/forms/validation/docs/guide.mdx
@@ -66,12 +66,16 @@ In your HTML, add the validation components with the appropriate structural dire
       Text
       <input lgInput formControlName="username" />
       <lg-hint>This is a standard input field</lg-hint>
-    <lg-validation *ngIf="isControlInvalid(text, userForm) && text.hasError('required')">
-      Username is a required field
-    </lg-validation>
-    <lg-validation *ngIf="isControlInvalid(text, validationForm) && text.hasError('minlength')">
-      Username needs to be at least 4 characters
-    </lg-validation>
+    @if (isControlInvalid(text, userForm) && text.hasError('required')) {
+      <lg-validation>
+        Username is a required field
+      </lg-validation>
+    }
+    @if (isControlInvalid(text, validationForm) && text.hasError('minlength')) {
+      <lg-validation>
+        Username needs to be at least 4 characters
+      </lg-validation>
+    }
   </lg-input-field>
 </form>
 ```
diff --git a/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts b/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts
index fa4391782..28d3d6efc 100644
--- a/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts
+++ b/projects/canopy/src/lib/link-menu/docs/link-menu.stories.ts
@@ -1,6 +1,5 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Component, Input } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
 
 import { LgIconComponent } from '../../icon';
 import { LgLinkMenuComponent } from '../link-menu.component';
@@ -9,15 +8,21 @@ import { LgLinkMenuItemTextComponent } from '../link-menu-item-text/link-menu-it
 
 const template = `
 <lg-link-menu>
-  <a href="#" *ngFor="let item of menuItems" [attr.target]="item.target">
-    <lg-link-menu-item>
-      <lg-icon [name]="item.icon" *ngIf="item.icon"></lg-icon>
-      <lg-link-menu-item-text isBold="true">{{ item.title }}</lg-link-menu-item-text>
-      <lg-link-menu-item-text *ngIf="item.description">
-        {{ item.description }}
-      </lg-link-menu-item-text>
-    </lg-link-menu-item>
-  </a>
+  @for (item of menuItems; track item.title) {
+    <a href="#" [attr.target]="item.target">
+      <lg-link-menu-item>
+        @if (item.icon) {
+          <lg-icon [name]="item.icon"></lg-icon>
+        }
+        <lg-link-menu-item-text isBold="true">{{ item.title }}</lg-link-menu-item-text>
+        @if (item.description) {
+          <lg-link-menu-item-text>
+            {{ item.description }}
+          </lg-link-menu-item-text>
+        }
+      </lg-link-menu-item>
+    </a>
+  }
 </lg-link-menu>`;
 
 @Component({
@@ -29,8 +34,6 @@ const template = `
     LgLinkMenuItemComponent,
     LgIconComponent,
     LgLinkMenuItemTextComponent,
-    NgFor,
-    NgIf,
   ],
 })
 class LinkMenuStoryComponent {
diff --git a/projects/canopy/src/lib/list/docs/lists.stories.ts b/projects/canopy/src/lib/list/docs/lists.stories.ts
index 35e878da3..1d301316d 100644
--- a/projects/canopy/src/lib/list/docs/lists.stories.ts
+++ b/projects/canopy/src/lib/list/docs/lists.stories.ts
@@ -1,6 +1,6 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 
 import { ListWithIconsVariant } from '../list-with-icons.interface';
 import { LgListWithIconsComponent } from '../list-with-icons.component';
@@ -9,14 +9,20 @@ import { LgListWithExpressiveStylingDirective } from '../list-with-expressive-st
 
 const template = `
 <ul lg-list-with-icons [variant]="variant">
-  <li lg-list-with-icons-item *ngFor="let item of listItems" [iconName]="item.iconName" [iconColour]="colouredIcons ? item.iconColour : null"
-  ><ng-container [ngTemplateOutlet]="item.isLink ? linkText : text" [ngTemplateOutletContext]="{text: item.text}"></ng-container>
-    <ul lg-list-with-icons *ngIf="item.children as children">
-      <li lg-list-with-icons-item *ngFor="let child of children" [iconName]="child.iconName" [iconColour]="colouredIcons ? child.iconColour : null"
-      ><ng-container [ngTemplateOutlet]="child.isLink ? linkText : text" [ngTemplateOutletContext]="{text: child.text}"></ng-container>
-      </li>
-    </ul>
-  </li>
+  @for (item of listItems; track item.text) {
+    <li lg-list-with-icons-item [iconName]="item.iconName" [iconColour]="colouredIcons ? item.iconColour : null"
+    ><ng-container [ngTemplateOutlet]="item.isLink ? linkText : text" [ngTemplateOutletContext]="{text: item.text}"></ng-container>
+      @if (item.children as children) {
+        <ul lg-list-with-icons>
+          @for (child of children; track child.text) {
+            <li lg-list-with-icons-item [iconName]="child.iconName" [iconColour]="colouredIcons ? child.iconColour : null"
+            ><ng-container [ngTemplateOutlet]="child.isLink ? linkText : text" [ngTemplateOutletContext]="{text: child.text}"></ng-container>
+            </li>
+          }
+        </ul>
+      }
+    </li>
+  }
 </ul>
 
 <ng-template #text let-text="text">{{ text }}</ng-template>
@@ -35,13 +41,7 @@ const template = `
     `,
   ],
   standalone: true,
-  imports: [
-    LgListWithIconsComponent,
-    LgListWithIconsItemComponent,
-    NgFor,
-    NgIf,
-    NgTemplateOutlet,
-  ],
+  imports: [ LgListWithIconsComponent, LgListWithIconsItemComponent, NgTemplateOutlet ],
 })
 class ListWithIconsWrapperComponent {
   @Input() variant: ListWithIconsVariant;
diff --git a/projects/canopy/src/lib/page/docs/page.stories.ts b/projects/canopy/src/lib/page/docs/page.stories.ts
index 41ef1dcde..1255991a8 100644
--- a/projects/canopy/src/lib/page/docs/page.stories.ts
+++ b/projects/canopy/src/lib/page/docs/page.stories.ts
@@ -1,6 +1,5 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Component, Input } from '@angular/core';
-import { NgFor, NgIf } from '@angular/common';
 
 import { primaryLinks, secondaryLinks } from '../../footer/docs/footer.stories';
 import { productHeroHTML } from '../../hero/docs/hero.stories';
@@ -71,15 +70,19 @@ const header = `
 const footer = `
   <footer lg-footer>
     <lg-footer-nav variant="primary">
-      <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-      </lg-footer-nav-item>
+      @for (primaryLink of primaryLinks; track primaryLink.id) {
+        <lg-footer-nav-item>
+          <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+        </lg-footer-nav-item>
+      }
     </lg-footer-nav>
 
     <lg-footer-nav variant="secondary">
-      <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-      </lg-footer-nav-item>
+      @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+        <lg-footer-nav-item>
+          <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+        </lg-footer-nav-item>
+      }
     </lg-footer-nav>
 
     <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
@@ -192,8 +195,6 @@ export default {
         LgFooterNavItemComponent,
         LgFooterLogoComponent,
         LgFooterCopyrightComponent,
-        NgIf,
-        NgFor,
       ],
     }),
   ],
diff --git a/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts b/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts
index 12db5e380..7b7ac87fe 100644
--- a/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts
+++ b/projects/canopy/src/lib/promo-card/docs/promo-card.stories.ts
@@ -163,26 +163,27 @@ const examplePromoCardTemplate = `
   <lg-promo-card-list-title headingLevel="1">
     {{ title }}
   </lg-promo-card-list-title>
-  <lg-promo-card
-    *ngFor="let card of cards; let i = index"
-    [variant]="variant[i]">
-    <lg-promo-card-image [imageUrl]="card.imageUrl"></lg-promo-card-image>
-    <lg-promo-card-title headingLevel="2">
-      {{ card.title }}
-    </lg-promo-card-title>
-    <lg-promo-card-content>
-      <p>{{ card.content }}</p>
-    </lg-promo-card-content>
-    <lg-promo-card-footer>
-      <button
-        lgMarginBottom="none"
-        lg-button
-        type="button"
-        [variant]="buttonVariants[variants[i]]">
-        {{ card.ctaText }}
-      </button>
-    </lg-promo-card-footer>
-  </lg-promo-card>
+  @for (card of cards; track $index; let i = $index) {
+    <lg-promo-card
+      [variant]="variant[i]">
+      <lg-promo-card-image [imageUrl]="card.imageUrl"></lg-promo-card-image>
+      <lg-promo-card-title headingLevel="2">
+        {{ card.title }}
+      </lg-promo-card-title>
+      <lg-promo-card-content>
+        <p>{{ card.content }}</p>
+      </lg-promo-card-content>
+      <lg-promo-card-footer>
+        <button
+          lgMarginBottom="none"
+          lg-button
+          type="button"
+          [variant]="buttonVariants[variants[i]]">
+          {{ card.ctaText }}
+        </button>
+      </lg-promo-card-footer>
+    </lg-promo-card>
+  }
 </lg-promo-card-list>
 `;
 
diff --git a/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts b/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts
index f6ecb241a..f2b419ee1 100644
--- a/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts
+++ b/projects/canopy/src/lib/side-nav/docs/side-nav.stories.ts
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
 import { moduleMetadata } from '@storybook/angular';
-import { NgFor, NgIf } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 
 import { SideNavBarItem } from '../side-nav.interface';
@@ -18,21 +17,24 @@ import { LgMarginDirective } from '../../spacing';
 const template = `
 <lg-side-nav>
   <lg-side-nav-bar label="Side Nav Demo">
-    <a
-      *ngFor="let item of navItems; index as i"
-      id="side-nav-{{ i }}"
-      href=""
-      (click)="onClick($event, i)"
-      [isActive]="i == selectedNavIndex"
-      lgSideBarNavLink
-    >
-      <lg-side-nav-bar-item>
-        <lg-side-nav-bar-item-heading>{{ item.title }}</lg-side-nav-bar-item-heading>
-        <lg-side-nav-bar-item-content *ngIf="item.description">{{
-          item.description
-        }}</lg-side-nav-bar-item-content>
-      </lg-side-nav-bar-item>
-    </a>
+    @for (item of navItems; track $index; let i = $index) {
+      <a
+        id="side-nav-{{ i }}"
+        href=""
+        (click)="onClick($event, i)"
+        [isActive]="i == selectedNavIndex"
+        lgSideBarNavLink
+      >
+        <lg-side-nav-bar-item>
+          <lg-side-nav-bar-item-heading>{{ item.title }}</lg-side-nav-bar-item-heading>
+          @if (item.description) {
+            <lg-side-nav-bar-item-content>{{
+              item.description
+            }}</lg-side-nav-bar-item-content>
+          }
+        </lg-side-nav-bar-item>
+      </a>
+    }
     <lg-side-nav-bar-footer>
       <a
         lg-button
@@ -66,8 +68,6 @@ const template = `
     LgMarginDirective,
     RouterOutlet,
     LgButtonComponent,
-    NgFor,
-    NgIf,
   ],
 })
 export class StorySideNavComponent {
diff --git a/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts b/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts
index 2aa238a37..2ecee0075 100644
--- a/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts
+++ b/projects/canopy/src/lib/spacing/margin/docs/margin.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgIf } from '@angular/common';
 
 import { LgMarginDirective } from '../margin.directive';
 import { LgCardComponent, LgCardContentComponent } from '../../../card';
@@ -14,10 +13,7 @@ export default {
   tags: [ 'pending' ],
   decorators: [
     moduleMetadata({
-      imports: [ LgCardComponent, LgCardContentComponent, LgMarginDirective, NgIf ],
-    }),
-    moduleMetadata({
-      imports: [ LgMarginDirective, NgIf ],
+      imports: [ LgCardComponent, LgCardContentComponent, LgMarginDirective ],
     }),
   ],
   parameters: {
@@ -122,11 +118,21 @@ export const Margin = {
         [lgMarginLeft]="marginLeft !== 'undefined' ? marginLeft : null">
           <lg-card-content>
             <strong>Spacing variant</strong> applied using directive
-            <div *ngIf="margin"><code>margin: {{margin | json}}</code></div>
-            <div *ngIf="marginTop !== 'undefined'"><code>marginTop: {{marginTop | json}}</code></div>
-            <div *ngIf="marginRight !== 'undefined'"><code>marginRight: {{marginRight | json}}</code></div>
-            <div *ngIf="marginBottom !== 'undefined'"><code>marginBottom: {{marginBottom | json}}</code></div>
-            <div *ngIf="marginLeft !== 'undefined'"><code>marginLeft: {{marginLeft | json}}</code></div>
+            @if (margin) {
+              <div><code>margin: {{margin | json}}</code></div>
+            }
+            @if (marginTop !== 'undefined') {
+              <div><code>marginTop: {{marginTop | json}}</code></div>
+            }
+            @if (marginRight !== 'undefined') {
+              <div><code>marginRight: {{marginRight | json}}</code></div>
+            }
+            @if (marginBottom !== 'undefined') {
+              <div><code>marginBottom: {{marginBottom | json}}</code></div>
+            }
+            @if (marginLeft !== 'undefined') {
+              <div><code>marginLeft: {{marginLeft | json}}</code></div>
+            }
           </lg-card-content>
       </lg-card>
       <lg-card><lg-card-content>Card without directive applied</lg-card-content></lg-card>
diff --git a/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts b/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts
index cb8de82f7..c56580d6c 100644
--- a/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts
+++ b/projects/canopy/src/lib/spacing/padding/docs/padding.stories.ts
@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgIf } from '@angular/common';
 
 import { LgPaddingDirective } from '../padding.directive';
 import { LgCardComponent, LgCardContentComponent } from '../../../card';
@@ -14,7 +13,7 @@ export default {
   tags: [ 'pending' ],
   decorators: [
     moduleMetadata({
-      imports: [ LgCardComponent, LgCardContentComponent, LgPaddingDirective, NgIf ],
+      imports: [ LgCardComponent, LgCardContentComponent, LgPaddingDirective ],
     }),
   ],
   parameters: {
@@ -119,11 +118,21 @@ export const Padding = {
         [lgPaddingLeft]="paddingLeft !== 'undefined' ? paddingLeft : null">
           <lg-card-content>
             <strong>Spacing variant</strong> applied using directive
-            <div *ngIf="padding"><code>padding: {{padding | json}}</code></div>
-            <div *ngIf="paddingTop !== 'undefined'"><code>paddingTop: {{paddingTop | json}}</code></div>
-            <div *ngIf="paddingRight !== 'undefined'"><code>paddingRight: {{paddingRight | json}}</code></div>
-            <div *ngIf="paddingBottom !== 'undefined'"><code>paddingBottom: {{paddingBottom | json}}</code></div>
-            <div *ngIf="paddingLeft !== 'undefined'"><code>paddingLeft: {{paddingLeft | json}}</code></div>
+            @if (padding) {
+              <div><code>padding: {{padding | json}}</code></div>
+            }
+            @if (paddingTop !== 'undefined') {
+              <div><code>paddingTop: {{paddingTop | json}}</code></div>
+            }
+            @if (paddingRight !== 'undefined') {
+              <div><code>paddingRight: {{paddingRight | json}}</code></div>
+            }
+            @if (paddingBottom !== 'undefined') {
+              <div><code>paddingBottom: {{paddingBottom | json}}</code></div>
+            }
+            @if (paddingLeft !== 'undefined') {
+              <div><code>paddingLeft: {{paddingLeft | json}}</code></div>
+            }
           </lg-card-content>
       </lg-card>
       <lg-card><lg-card-content>Card without directive applied</lg-card-content></lg-card>
diff --git a/projects/canopy/src/lib/spinner/docs/spinner.stories.ts b/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
index c18ad38e8..4c16bf229 100644
--- a/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
+++ b/projects/canopy/src/lib/spinner/docs/spinner.stories.ts
@@ -91,7 +91,9 @@ export const StandardSpinner = {
       source: {
         code: `
           # Display a spinner while loading
-          <lg-spinner *ngIf="!loaded" [size]="size" [variant]="variant" [text]="text ? text : null"></lg-spinner>
+          @if (!loaded) {
+            <lg-spinner [size]="size" [variant]="variant" [text]="text ? text : null"></lg-spinner>
+          }
 
           # Tell screen reader to read a message when loading is finished
           <p [lgSrAlertMessage]="loaded">Loading complete</p>
diff --git a/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx b/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
index c25b68664..e147cdf88 100644
--- a/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
+++ b/projects/canopy/src/lib/sr-alert-message/docs/guide.mdx
@@ -29,7 +29,9 @@ This directive can be used together with the `LgSpinnerComponent` to show a spin
 
 ```html
 # Display a spinner while loading
-<lg-spinner *ngIf="!loaded"></lg-spinner>
+@if (!loaded) {
+  <lg-spinner></lg-spinner>
+}
 
 # Tell the screen reader to read a message when loading is finished
 <p [lgSrAlertMessage]="loaded">Loading complete</p>
diff --git a/projects/canopy/src/lib/table/docs/table.stories.ts b/projects/canopy/src/lib/table/docs/table.stories.ts
index 457b93324..c69a23281 100644
--- a/projects/canopy/src/lib/table/docs/table.stories.ts
+++ b/projects/canopy/src/lib/table/docs/table.stories.ts
@@ -1,6 +1,5 @@
-import { ChangeDetectorRef, Component, Input, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
 import { moduleMetadata } from '@storybook/angular';
-import { NgFor } from '@angular/common';
 
 import type { TableVariant } from '../table.interface';
 import { AlignmentOptions, TableColumnLayoutBreakpoints } from '../table.interface';
@@ -98,7 +97,7 @@ const expandableTableTemplate = `
     </thead>
 
     <tbody lg-table-body>
-    <ng-container *ngFor="let book of books; index as i">
+    @for (book of books; track $index; let i = $index) {
       <tr lg-table-row>
         <td lg-table-cell>
           <lg-table-row-toggle
@@ -119,7 +118,7 @@ const expandableTableTemplate = `
           </lg-table-expanded-detail>
         </td>
       </tr>
-    </ng-container>
+    }
     </tbody>
   </table>
 `;
@@ -446,7 +445,6 @@ export default {
         LgInputDirective,
         LgMarginDirective,
         LgSuffixDirective,
-        NgFor,
       ],
     }),
   ],
@@ -464,11 +462,13 @@ const standardTableTemplate = `
   </thead>
 
   <tbody lg-table-body>
-    <tr lg-table-row *ngFor="let book of books">
-      <td lg-table-cell [stack]="stack">{{ book.author }}</td>
-      <td lg-table-cell [stack]="stack">{{ book.title }}</td>
-      <td lg-table-cell [stack]="stack">{{ book.published }}</td>
-    </tr>
+    @for (book of books; track book.title) {
+      <tr lg-table-row>
+        <td lg-table-cell [stack]="stack">{{ book.author }}</td>
+        <td lg-table-cell [stack]="stack">{{ book.title }}</td>
+        <td lg-table-cell [stack]="stack">{{ book.published }}</td>
+      </tr>
+    }
   </tbody>
 </table>
 `;
@@ -546,15 +546,17 @@ const withInputTableTemplate = `
   </thead>
 
   <tbody lg-table-body>
-    <tr lg-table-row *ngFor="let book of books">
-      <td lg-table-cell>{{ book.author }}</td>
-      <td lg-table-cell>
-        <lg-input-field lgMarginBottom="none" showLabel="false">
-          <input lgInput size="2" />
-          <span lgSuffix>%</span>
-        </lg-input-field>
-      </td>
-    </tr>
+    @for (book of books; track book.author) {
+      <tr lg-table-row>
+        <td lg-table-cell>{{ book.author }}</td>
+        <td lg-table-cell>
+          <lg-input-field lgMarginBottom="none" showLabel="false">
+            <input lgInput size="2" />
+            <span lgSuffix>%</span>
+          </lg-input-field>
+        </td>
+      </tr>
+    }
   </tbody>
 </table>
 `;
diff --git a/projects/canopy/src/lib/table/table/table.component.spec.ts b/projects/canopy/src/lib/table/table/table.component.spec.ts
index 363b1d27a..765bada4a 100644
--- a/projects/canopy/src/lib/table/table/table.component.spec.ts
+++ b/projects/canopy/src/lib/table/table/table.component.spec.ts
@@ -1,8 +1,7 @@
 import { DebugElement } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MockRender, MockComponents, ngMocks } from 'ng-mocks';
-import { NgFor } from '@angular/common';
+import { MockComponents, MockRender, ngMocks } from 'ng-mocks';
 
 import { LgTableCellComponent } from '../table-cell/table-cell.component';
 import { LgTableHeadComponent } from '../table-head/table-head.component';
@@ -45,7 +44,6 @@ describe('TableComponent', () => {
         LgTableHeadCellComponent,
         LgTableCellComponent,
         LgTableRowToggleComponent,
-        NgFor,
         MockComponents(LgIconComponent, LgTableExpandedDetailComponent),
       ],
     }).compileComponents();
@@ -64,11 +62,13 @@ describe('TableComponent', () => {
       </thead>
 
       <tbody lg-table-body>
-        <tr lg-table-row *ngFor="let book of books">
-          <td lg-table-cell>{{book.author}}</td>
-          <td lg-table-cell>{{book.title}}</td>
-          <td lg-table-cell>{{book.published}}</td>
-        </tr>
+        @for (book of books; track book.title) {
+          <tr lg-table-row>
+            <td lg-table-cell>{{book.author}}</td>
+            <td lg-table-cell>{{book.title}}</td>
+            <td lg-table-cell>{{book.published}}</td>
+          </tr>
+        }
       </tbody>
     </table>
     `,
diff --git a/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts b/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
index 6c8b51371..5f5c74f0b 100644
--- a/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
+++ b/projects/canopy/src/lib/tabs/docs/tab-nav-bar.stories.ts
@@ -1,5 +1,4 @@
 import { moduleMetadata } from '@storybook/angular';
-import { NgFor } from '@angular/common';
 
 import { LgTabsComponent } from '../tabs.component';
 import { LgTabNavBarComponent } from '../tab-nav-bar/tab-nav-bar.component';
@@ -12,12 +11,7 @@ export default {
   component: LgTabsComponent,
   decorators: [
     moduleMetadata({
-      imports: [
-        LgTabNavBarComponent,
-        LgTabNavBarLinkDirective,
-        LgTabNavContentComponent,
-        NgFor,
-      ],
+      imports: [ LgTabNavBarComponent, LgTabNavBarLinkDirective, LgTabNavContentComponent ],
     }),
   ],
   argTypes: {
@@ -103,11 +97,13 @@ export default {
 function getTemplate(preventDefault?: boolean) {
   return `
 <lg-tab-nav-bar label="Tabbed navigation demo">
-  <a *ngFor="let tab of tabs; index as i" lgTabNavBarLink href="" (click)="${
+  @for (tab of tabs; track $index; let i = $index) {
+    <a lgTabNavBarLink href="" (click)="${
   preventDefault
     ? '$event.preventDefault();'
     : ''
 }onClick($event)" id="tabbed-nav-{{i}}" [isActive]="i === selectedTabNavIndex">{{tab}}</a>
+  }
 </lg-tab-nav-bar>
 
 <lg-tab-nav-content [selectedTabId]="'tabbed-nav-' + selectedTabNavIndex">
diff --git a/projects/canopy/src/lib/tabs/docs/tabs.stories.ts b/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
index 0589f9f59..0ea45cad3 100644
--- a/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
+++ b/projects/canopy/src/lib/tabs/docs/tabs.stories.ts
@@ -103,12 +103,14 @@ const template = `
   [lgMarginBottom]="'none'"
   [lgMarginLeft]="'none'"
 >
-  <lg-tab-item *ngFor="let tab of tabs">
-    <lg-tab-item-heading>{{ tab.header }}</lg-tab-item-heading>
-    <lg-tab-item-content>
-      <div class="lg-tabs__content-section">{{ tab.content }}</div>
-    </lg-tab-item-content>
-  </lg-tab-item>
+  @for (tab of tabs; track tab.header) {
+    <lg-tab-item>
+      <lg-tab-item-heading>{{ tab.header }}</lg-tab-item-heading>
+      <lg-tab-item-content>
+        <div class="lg-tabs__content-section">{{ tab.content }}</div>
+      </lg-tab-item-content>
+    </lg-tab-item>
+  }
 </lg-tabs>
 `;