@abgov/angular-components 4.9.0-alpha.2 → 4.9.0

package/fesm2022/abgov-angular-components.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { forwardRef, HostListener, Directive, CUSTOM_ELEMENTS_SCHEMA, NgModule, Input, Component, booleanAttribute, EventEmitter, Output, numberAttribute, TemplateRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgIf } from '@angular/common';
 import { NG_VALUE_ACCESSOR, CheckboxControlValueAccessor } from '@angular/forms';
-import { NgTemplateOutlet, NgIf } from '@angular/common';
 export * from '@abgov/ui-components-common';
 
 // @deprecated: Use the new <goab-input .. /> component
@@ -42,17 +43,19 @@ class ValueDirective {
     listenForDisabledChange(isDisabled) {
         this.setDisabledState(isDisabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ValueDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: ValueDirective, selector: "[goaValue]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)", "disabledChange": "listenForDisabledChange($event.detail.disabled)" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: ValueDirective, isStandalone: true, selector: "[goaValue]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)", "disabledChange": "listenForDisabledChange($event.detail.disabled)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueDirective),
                 multi: true,
             }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ValueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[goaValue]", providers: [{
+                    standalone: true,
+                    selector: "[goaValue]",
+                    providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ValueDirective),
                             multi: true,
@@ -111,16 +114,17 @@ class ValueListDirective {
         this.onChange(value);
         this.onTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ValueListDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: ValueListDirective, selector: "[goaValueList]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueListDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: ValueListDirective, isStandalone: true, selector: "[goaValueList]", host: { listeners: { "_change": "listenForValueChange($event.detail.value)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueListDirective),
                 multi: true,
             }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ValueListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: ValueListDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: "[goaValueList]",
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -165,8 +169,8 @@ class CheckedDirective extends CheckboxControlValueAccessor {
     listenForValueChange(checked) {
         this.value = checked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CheckedDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: CheckedDirective, selector: "[goaChecked]", host: { listeners: { "_change": "listenForValueChange($event.detail.checked)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckedDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.6", type: CheckedDirective, isStandalone: true, selector: "[goaChecked]", host: { listeners: { "_change": "listenForValueChange($event.detail.checked)" } }, providers: [
             {
                 useExisting: forwardRef(() => CheckedDirective),
                 provide: NG_VALUE_ACCESSOR,
@@ -174,9 +178,10 @@ class CheckedDirective extends CheckboxControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: CheckedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CheckedDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: "[goaChecked]",
                     providers: [
                         {
@@ -192,24 +197,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class AngularComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: AngularComponentsModule, declarations: [ValueDirective, ValueListDirective, CheckedDirective], exports: [ValueDirective, ValueListDirective, CheckedDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AngularComponentsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, imports: [CommonModule, ValueDirective, ValueListDirective, CheckedDirective], exports: [ValueDirective, ValueListDirective, CheckedDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AngularComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AngularComponentsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ValueDirective, ValueListDirective, CheckedDirective],
+                    imports: [CommonModule, ValueDirective, ValueListDirective, CheckedDirective],
                     exports: [ValueDirective, ValueListDirective, CheckedDirective],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }] });
 
 class GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBaseComponent, isStandalone: true, selector: "ng-component", inputs: { mt: "mt", mb: "mb", ml: "ml", mr: "mr", testId: "testId" }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabBaseComponent, isStandalone: true, selector: "ng-component", inputs: { mt: "mt", mb: "mb", ml: "ml", mr: "mr", testId: "testId" }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBaseComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -300,10 +305,10 @@ class GoabControlValueAccessor extends GoabBaseComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabControlValueAccessor, isStandalone: true, selector: "ng-component", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], value: "value" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabControlValueAccessor, isStandalone: true, selector: "ng-component", inputs: { id: "id", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], value: "value" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabControlValueAccessor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabControlValueAccessor, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -322,17 +327,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabAccordion extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.onChange = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onChange(e) {
         const detail = e.detail;
         this.onChange.emit(detail.open);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabAccordion, isStandalone: true, selector: "goab-accordion", inputs: { heading: "heading", secondaryText: "secondaryText", open: ["open", "open", booleanAttribute], headingSize: "headingSize", headingContent: "headingContent", maxWidth: "maxWidth", iconPosition: "iconPosition" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAccordion, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabAccordion, isStandalone: true, selector: "goab-accordion", inputs: { heading: "heading", secondaryText: "secondaryText", open: ["open", "open", booleanAttribute], headingSize: "headingSize", headingContent: "headingContent", maxWidth: "maxWidth", iconPosition: "iconPosition" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
     <goa-accordion
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.secondarytext]="secondaryText"
       [attr.open]="open"
@@ -351,16 +367,17 @@ class GoabAccordion extends GoabBaseComponent {
       </div>
       <ng-content></ng-content>
     </goa-accordion>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAccordion, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-accordion",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `
     <goa-accordion
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.secondarytext]="secondaryText"
       [attr.open]="open"
@@ -382,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { heading: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
                 type: Input
             }], secondaryText: [{
                 type: Input
@@ -402,9 +419,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabBadge extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBadge, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabBadge, isStandalone: true, selector: "goab-badge", inputs: { type: "type", content: "content", icon: ["icon", "icon", booleanAttribute], iconType: "iconType", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBadge, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabBadge, isStandalone: true, selector: "goab-badge", inputs: { type: "type", content: "content", icon: ["icon", "icon", booleanAttribute], iconType: "iconType", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
     <goa-badge
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.icon]="icon"
       [attr.icontype]="iconType"
@@ -417,12 +448,13 @@ class GoabBadge extends GoabBaseComponent {
       [attr.mr]="mr"
     >
     </goa-badge>
-  `, isInline: true, styles: [":host{display:contents}\n"] }); }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBadge, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "goab-badge", template: `
     <goa-badge
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.icon]="icon"
       [attr.icontype]="iconType"
@@ -435,8 +467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       [attr.mr]="mr"
     >
     </goa-badge>
-  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { type: [{
+  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -450,9 +482,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabBlock extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBlock, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabBlock, isStandalone: true, selector: "goab-block", inputs: { gap: "gap", direction: "direction", alignment: "alignment" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBlock, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabBlock, isStandalone: true, selector: "goab-block", inputs: { gap: "gap", direction: "direction", alignment: "alignment" }, usesInheritance: true, ngImport: i0, template: `
     <goa-block
+      *ngIf="isReady"
       [attr.gap]="gap"
       [attr.direction]="direction"
       [attr.alignment]="alignment"
@@ -464,15 +510,17 @@ class GoabBlock extends GoabBaseComponent {
     >
       <ng-content />
     </goa-block>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabBlock, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-block",
+                    imports: [CommonModule],
                     template: `
     <goa-block
+      *ngIf="isReady"
       [attr.gap]="gap"
       [attr.direction]="direction"
       [attr.alignment]="alignment"
@@ -487,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { gap: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { gap: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -496,18 +544,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabButton extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.type = "primary";
         this.onClick = new EventEmitter();
+        this.isReady = false;
         this.JSON = JSON;
     }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabButton, isStandalone: true, selector: "goab-button", inputs: { type: "type", size: "size", variant: "variant", disabled: ["disabled", "disabled", booleanAttribute], leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", width: "width", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabButton, isStandalone: true, selector: "goab-button", inputs: { type: "type", size: "size", variant: "variant", disabled: ["disabled", "disabled", booleanAttribute], leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", width: "width", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
     <goa-button
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.size]="size"
       [attr.variant]="variant"
@@ -527,15 +586,17 @@ class GoabButton extends GoabBaseComponent {
     >
       <ng-content />
     </goa-button>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButton, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-button",
+                    imports: [CommonModule],
                     template: `
     <goa-button
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.size]="size"
       [attr.variant]="variant"
@@ -558,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -584,9 +645,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabButtonGroup extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButtonGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabButtonGroup, isStandalone: true, selector: "goab-button-group", inputs: { alignment: "alignment", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButtonGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabButtonGroup, isStandalone: true, selector: "goab-button-group", inputs: { alignment: "alignment", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
     <goa-button-group
+      *ngIf="isReady"
       [attr.alignment]="alignment"
       [attr.gap]="gap"
       [attr.testid]="testId"
@@ -597,15 +672,17 @@ class GoabButtonGroup extends GoabBaseComponent {
     >
       <ng-content />
     </goa-button-group>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabButtonGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabButtonGroup, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-button-group",
+                    imports: [CommonModule],
                     template: `
     <goa-button-group
+      *ngIf="isReady"
       [attr.alignment]="alignment"
       [attr.gap]="gap"
       [attr.testid]="testId"
@@ -619,24 +696,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { alignment: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { alignment: [{
                 type: Input
             }], gap: [{
                 type: Input
             }] } });
 
+class GoabCalendar extends GoabBaseComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.onChange = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    _onChange(e) {
+        const details = e.detail;
+        this.onChange.emit(details);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCalendar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCalendar, isStandalone: true, selector: "goab-calendar", inputs: { name: "name", value: "value", min: "min", max: "max" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
+    <goa-calendar
+      *ngIf="isReady"
+      [attr.name]="name"
+      [value]="value"
+      [attr.min]="min"
+      [attr.max]="max"
+      [attr.testid]="testId"
+      [attr.mt]="mt"
+      [attr.mb]="mb"
+      [attr.ml]="ml"
+      [attr.mr]="mr"
+      (_change)="_onChange($event)"
+    >
+      <ng-content />
+    </goa-calendar>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCalendar, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: "goab-calendar",
+                    imports: [CommonModule],
+                    template: `
+    <goa-calendar
+      *ngIf="isReady"
+      [attr.name]="name"
+      [value]="value"
+      [attr.min]="min"
+      [attr.max]="max"
+      [attr.testid]="testId"
+      [attr.mt]="mt"
+      [attr.mb]="mb"
+      [attr.ml]="ml"
+      [attr.mr]="mr"
+      (_change)="_onChange($event)"
+    >
+      <ng-content />
+    </goa-calendar>
+  `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
 class GoabCallout extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.type = "information";
         this.heading = "";
         this.size = "large";
         this.ariaLive = "off";
         this.iconTheme = "outline";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCallout, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCallout, isStandalone: true, selector: "goab-callout", inputs: { type: "type", heading: "heading", size: "size", maxWidth: "maxWidth", ariaLive: "ariaLive", iconTheme: "iconTheme" }, usesInheritance: true, ngImport: i0, template: `
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCallout, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCallout, isStandalone: true, selector: "goab-callout", inputs: { type: "type", heading: "heading", size: "size", maxWidth: "maxWidth", ariaLive: "ariaLive", iconTheme: "iconTheme" }, usesInheritance: true, ngImport: i0, template: `
     <goa-callout
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.heading]="heading"
       [attr.size]="size"
@@ -651,15 +814,17 @@ class GoabCallout extends GoabBaseComponent {
     >
       <ng-content />
     </goa-callout>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCallout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCallout, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-callout",
+                    imports: [CommonModule],
                     template: `
     <goa-callout
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.heading]="heading"
       [attr.size]="size"
@@ -677,7 +842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], heading: [{
                 type: Input
@@ -692,9 +857,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabCard extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCard, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabCard, isStandalone: true, selector: "goab-card", inputs: { elevation: ["elevation", "elevation", numberAttribute], width: "width" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCard, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabCard, isStandalone: true, selector: "goab-card", inputs: { elevation: ["elevation", "elevation", numberAttribute], width: "width" }, usesInheritance: true, ngImport: i0, template: `
     <goa-card
+      *ngIf="isReady"
       [attr.elevation]="elevation"
       [attr.width]="width"
       [attr.testid]="testId"
@@ -705,15 +884,17 @@ class GoabCard extends GoabBaseComponent {
     >
       <ng-content />
     </goa-card>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCard, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-card",
+                    imports: [CommonModule],
                     template: `
     <goa-card
+      *ngIf="isReady"
       [attr.elevation]="elevation"
       [attr.width]="width"
       [attr.testid]="testId"
@@ -727,7 +908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { elevation: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { elevation: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], width: [{
@@ -735,76 +916,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabCardContent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCardContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCardContent, isStandalone: true, selector: "goab-card-content", ngImport: i0, template: `
-    <goa-card-content>
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardContent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCardContent, isStandalone: true, selector: "goab-card-content", ngImport: i0, template: `
+    <goa-card-content *ngIf="isReady">
       <ng-content />
     </goa-card-content>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCardContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardContent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-card-content",
                     template: `
-    <goa-card-content>
+    <goa-card-content *ngIf="isReady">
       <ng-content />
     </goa-card-content>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class GoabCardActions {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCardActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCardActions, isStandalone: true, selector: "goab-card-actions", ngImport: i0, template: `
-    <goa-card-actions>
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardActions, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCardActions, isStandalone: true, selector: "goab-card-actions", ngImport: i0, template: `
+    <goa-card-actions *ngIf="isReady">
       <ng-content />
     </goa-card-actions>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCardActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardActions, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-card-actions",
                     template: `
-    <goa-card-actions>
+    <goa-card-actions *ngIf="isReady">
       <ng-content />
     </goa-card-actions>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class GoabCardImage {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCardImage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCardImage, isStandalone: true, selector: "goab-card-image", inputs: { src: "src", height: "height" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardImage, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCardImage, isStandalone: true, selector: "goab-card-image", inputs: { src: "src", height: "height" }, ngImport: i0, template: `
     <goa-card-image
+      *ngIf="isReady"
       [attr.src]="src"
       [attr.height]="height"
     >
       <ng-content />
     </goa-card-image>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCardImage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCardImage, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-card-image",
                     template: `
     <goa-card-image
+      *ngIf="isReady"
       [attr.src]="src"
       [attr.height]="height"
     >
       <ng-content />
     </goa-card-image>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { src: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { src: [{
                 type: Input,
                 args: [{ required: true }]
             }], height: [{
@@ -813,10 +1035,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabCheckbox extends GoabControlValueAccessor {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.onChange = new EventEmitter();
     }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
     getDescriptionAsString() {
         return typeof this.description === "string" ? this.description : "";
     }
@@ -832,75 +1064,77 @@ class GoabCheckbox extends GoabControlValueAccessor {
         this.markAsTouched();
         this.fcChange?.(detail.binding === "check" ? detail.checked : detail.value || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabCheckbox, isStandalone: true, selector: "goab-checkbox", inputs: { name: "name", checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], text: "text", value: "value", ariaLabel: "ariaLabel", description: "description", reveal: "reveal", revealArialLabel: "revealArialLabel", maxWidth: "maxWidth" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabCheckbox, isStandalone: true, selector: "goab-checkbox", inputs: { name: "name", checked: ["checked", "checked", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], text: "text", value: "value", ariaLabel: "ariaLabel", description: "description", reveal: "reveal", revealArialLabel: "revealArialLabel", maxWidth: "maxWidth" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabCheckbox),
             },
         ], usesInheritance: true, ngImport: i0, template: ` <goa-checkbox
-    [attr.name]="name"
-    [checked]="checked"
-    [disabled]="disabled"
-    [attr.indeterminate]="indeterminate ? 'true' : undefined"
-    [attr.error]="error"
-    [attr.text]="text"
-    [value]="value"
-    [attr.testid]="testId"
-    [attr.arialabel]="ariaLabel"
-    [attr.description]="getDescriptionAsString()"
-    [attr.revealarialabel]="revealArialLabel"
-    [id]="id"
-    [attr.maxwidth]="maxWidth"
-    [attr.mt]="mt"
-    [attr.mb]="mb"
-    [attr.ml]="ml"
-    [attr.mr]="mr"
-    (_change)="_onChange($event)"
-  >
-    <ng-content />
-    <div slot="description">
-      <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
-    </div>
-    <div slot="reveal">
-      <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
-    </div>
-  </goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+      *ngIf="isReady"
+      [attr.name]="name"
+      [checked]="checked"
+      [disabled]="disabled"
+      [attr.indeterminate]="indeterminate ? 'true' : undefined"
+      [attr.error]="error"
+      [attr.text]="text"
+      [value]="value"
+      [attr.testid]="testId"
+      [attr.arialabel]="ariaLabel"
+      [attr.description]="getDescriptionAsString()"
+      [attr.revealarialabel]="revealArialLabel"
+      [id]="id"
+      [attr.maxwidth]="maxWidth"
+      [attr.mt]="mt"
+      [attr.mb]="mb"
+      [attr.ml]="ml"
+      [attr.mr]="mr"
+      (_change)="_onChange($event)"
+      >
+      <ng-content />
+      <div slot="description">
+        <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
+      </div>
+      <div slot="reveal">
+        <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
+      </div>
+    </goa-checkbox>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckbox, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-checkbox",
                     template: ` <goa-checkbox
-    [attr.name]="name"
-    [checked]="checked"
-    [disabled]="disabled"
-    [attr.indeterminate]="indeterminate ? 'true' : undefined"
-    [attr.error]="error"
-    [attr.text]="text"
-    [value]="value"
-    [attr.testid]="testId"
-    [attr.arialabel]="ariaLabel"
-    [attr.description]="getDescriptionAsString()"
-    [attr.revealarialabel]="revealArialLabel"
-    [id]="id"
-    [attr.maxwidth]="maxWidth"
-    [attr.mt]="mt"
-    [attr.mb]="mb"
-    [attr.ml]="ml"
-    [attr.mr]="mr"
-    (_change)="_onChange($event)"
-  >
-    <ng-content />
-    <div slot="description">
-      <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
-    </div>
-    <div slot="reveal">
-      <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
-    </div>
-  </goa-checkbox>`,
+      *ngIf="isReady"
+      [attr.name]="name"
+      [checked]="checked"
+      [disabled]="disabled"
+      [attr.indeterminate]="indeterminate ? 'true' : undefined"
+      [attr.error]="error"
+      [attr.text]="text"
+      [value]="value"
+      [attr.testid]="testId"
+      [attr.arialabel]="ariaLabel"
+      [attr.description]="getDescriptionAsString()"
+      [attr.revealarialabel]="revealArialLabel"
+      [id]="id"
+      [attr.maxwidth]="maxWidth"
+      [attr.mt]="mt"
+      [attr.mb]="mb"
+      [attr.ml]="ml"
+      [attr.mr]="mr"
+      (_change)="_onChange($event)"
+      >
+      <ng-content />
+      <div slot="description">
+        <ng-container [ngTemplateOutlet]="getDescriptionAsTemplate()"></ng-container>
+      </div>
+      <div slot="reveal">
+        <ng-container *ngIf="reveal" [ngTemplateOutlet]="reveal"></ng-container>
+      </div>
+    </goa-checkbox>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     providers: [
                         {
@@ -909,9 +1143,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                             useExisting: forwardRef(() => GoabCheckbox),
                         },
                     ],
-                    imports: [NgTemplateOutlet, NgIf],
+                    imports: [NgTemplateOutlet, CommonModule],
                 }]
-        }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], checked: [{
                 type: Input,
@@ -938,10 +1172,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabCheckboxList extends GoabControlValueAccessor {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.onChange = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onChange(e) {
         try {
             const detail = e.detail;
@@ -968,14 +1210,15 @@ class GoabCheckboxList extends GoabControlValueAccessor {
             this.value = [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckboxList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabCheckboxList, isStandalone: true, selector: "goab-checkbox-list", inputs: { name: "name", maxWidth: "maxWidth", value: "value" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckboxList, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabCheckboxList, isStandalone: true, selector: "goab-checkbox-list", inputs: { name: "name", maxWidth: "maxWidth", value: "value" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabCheckboxList),
             },
         ], usesInheritance: true, ngImport: i0, template: ` <goa-checkbox-list
+    *ngIf="isReady"
     [attr.name]="name"
     [value]="value"
     [disabled]="disabled"
@@ -990,14 +1233,15 @@ class GoabCheckboxList extends GoabControlValueAccessor {
     (_change)="_onChange($event)"
   >
     <ng-content />
-  </goa-checkbox-list>`, isInline: true }); }
+  </goa-checkbox-list>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCheckboxList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCheckboxList, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-checkbox-list",
                     template: ` <goa-checkbox-list
+    *ngIf="isReady"
     [attr.name]="name"
     [value]="value"
     [disabled]="disabled"
@@ -1014,6 +1258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     <ng-content />
   </goa-checkbox-list>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1022,7 +1267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], maxWidth: [{
                 type: Input
@@ -1033,16 +1278,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabChip extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.content = "";
         this.onClick = new EventEmitter();
     }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabChip, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabChip, isStandalone: true, selector: "goab-chip", inputs: { leadingIcon: "leadingIcon", error: ["error", "error", booleanAttribute], deletable: ["deletable", "deletable", booleanAttribute], content: "content", variant: "variant", iconTheme: "iconTheme" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `<goa-chip
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabChip, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabChip, isStandalone: true, selector: "goab-chip", inputs: { leadingIcon: "leadingIcon", error: ["error", "error", booleanAttribute], deletable: ["deletable", "deletable", booleanAttribute], content: "content", variant: "variant", iconTheme: "iconTheme" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `<goa-chip
+    *ngIf="isReady"
     [attr.leadingicon]="leadingIcon"
     [attr.variant]="variant"
     [attr.error]="error"
@@ -1057,14 +1313,16 @@ class GoabChip extends GoabBaseComponent {
     (_click)="_onClick()"
   >
     <ng-content />
-  </goa-chip>`, isInline: true }); }
+  </goa-chip>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabChip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabChip, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-chip",
+                    imports: [CommonModule],
                     template: `<goa-chip
+    *ngIf="isReady"
     [attr.leadingicon]="leadingIcon"
     [attr.variant]="variant"
     [attr.error]="error"
@@ -1082,7 +1340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   </goa-chip>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { leadingIcon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leadingIcon: [{
                 type: Input
             }], error: [{
                 type: Input,
@@ -1101,28 +1359,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabCircularProgress {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCircularProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabCircularProgress, isStandalone: true, selector: "goab-circular-progress", inputs: { variant: "variant", size: "size", message: "message", visible: ["visible", "visible", booleanAttribute], progress: ["progress", "progress", numberAttribute], testId: "testId" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCircularProgress, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabCircularProgress, isStandalone: true, selector: "goab-circular-progress", inputs: { variant: "variant", size: "size", message: "message", visible: ["visible", "visible", booleanAttribute], progress: ["progress", "progress", numberAttribute], testId: "testId" }, ngImport: i0, template: `
     <goa-circular-progress
-      [attr.variant]="variant"
-      [attr.size]="size"
+      *ngIf="isReady"
+      [attr.variant]="variant || 'inline'"
+      [attr.size]="size || 'large'"
       [attr.message]="message"
       [attr.visible]="visible"
       [attr.progress]="progress"
       [attr.testid]="testId"
     >
     </goa-circular-progress>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabCircularProgress, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabCircularProgress, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-circular-progress",
                     template: `
     <goa-circular-progress
-      [attr.variant]="variant"
-      [attr.size]="size"
+      *ngIf="isReady"
+      [attr.variant]="variant || 'inline'"
+      [attr.size]="size || 'large'"
       [attr.message]="message"
       [attr.visible]="visible"
       [attr.progress]="progress"
@@ -1131,8 +1403,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     </goa-circular-progress>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { variant: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -1149,37 +1422,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabColumnLayout {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabColumnLayout, isStandalone: true, selector: "goab-column-layout", ngImport: i0, template: `
-    <goa-one-column-layout>
+    constructor(cdr) {
+        this.cdr = cdr;
+        /** no props **/
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabColumnLayout, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabColumnLayout, isStandalone: true, selector: "goab-column-layout", ngImport: i0, template: `
+    <goa-one-column-layout *ngIf="isReady">
       <ng-content />
     </goa-one-column-layout>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabColumnLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabColumnLayout, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-column-layout",
                     template: `
-    <goa-one-column-layout>
+    <goa-one-column-layout *ngIf="isReady">
       <ng-content />
     </goa-one-column-layout>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class GoabContainer extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.type = "interactive";
         this.accent = "filled";
         this.padding = "relaxed";
         this.width = "full";
+        this.isReady = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabContainer, isStandalone: true, selector: "goab-container", inputs: { type: "type", accent: "accent", padding: "padding", width: "width", maxWidth: "maxWidth", title: "title", actions: "actions" }, usesInheritance: true, ngImport: i0, template: `<goa-container
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabContainer, isStandalone: true, selector: "goab-container", inputs: { type: "type", accent: "accent", padding: "padding", width: "width", maxWidth: "maxWidth", title: "title", actions: "actions" }, usesInheritance: true, ngImport: i0, template: `<goa-container
+    *ngIf="isReady"
     [attr.type]="type"
     [attr.accent]="accent"
     [attr.padding]="padding"
@@ -1198,15 +1496,16 @@ class GoabContainer extends GoabBaseComponent {
     <div slot="actions">
       <ng-container [ngTemplateOutlet]="actions"></ng-container>
     </div>
-  </goa-container>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  </goa-container>`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabContainer, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-container",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `<goa-container
+    *ngIf="isReady"
     [attr.type]="type"
     [attr.accent]="accent"
     [attr.padding]="padding"
@@ -1228,7 +1527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   </goa-container>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], accent: [{
                 type: Input
@@ -1259,11 +1558,21 @@ class GoabDatePicker extends GoabControlValueAccessor {
         this.markAsTouched();
         this.fcChange?.(detail.value);
     }
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         super();
         this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.isReady = false;
         this.onChange = new EventEmitter();
     }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.elementRef.nativeElement.disabled = isDisabled;
@@ -1283,14 +1592,15 @@ class GoabDatePicker extends GoabControlValueAccessor {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDatePicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDatePicker, isStandalone: true, selector: "goab-date-picker", inputs: { name: "name", value: "value", min: "min", max: "max", type: "type", relative: "relative" }, outputs: { onChange: "onChange" }, host: { listeners: { "disabledChange": "listenDisabledChange($event.detail.disabled)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDatePicker, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabDatePicker, isStandalone: true, selector: "goab-date-picker", inputs: { name: "name", value: "value", min: "min", max: "max", type: "type", relative: "relative" }, outputs: { onChange: "onChange" }, host: { listeners: { "disabledChange": "listenDisabledChange($event.detail.disabled)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
                 useExisting: forwardRef(() => GoabDatePicker),
             },
         ], usesInheritance: true, ngImport: i0, template: ` <goa-date-picker
+    *ngIf="isReady"
     [attr.name]="name"
     [attr.value]="formatValue(value)"
     [attr.min]="min"
@@ -1306,14 +1616,16 @@ class GoabDatePicker extends GoabControlValueAccessor {
     [attr.mr]="mr"
     (_change)="_onChange($event)"
   >
-  </goa-date-picker>`, isInline: true }); }
+  </goa-date-picker>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDatePicker, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-date-picker",
+                    imports: [CommonModule],
                     template: ` <goa-date-picker
+    *ngIf="isReady"
     [attr.name]="name"
     [attr.value]="formatValue(value)"
     [attr.min]="min"
@@ -1339,7 +1651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1359,9 +1671,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabDetails extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDetails, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabDetails, isStandalone: true, selector: "goab-details", inputs: { heading: "heading", open: ["open", "open", booleanAttribute], maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDetails, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabDetails, isStandalone: true, selector: "goab-details", inputs: { heading: "heading", open: ["open", "open", booleanAttribute], maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
     <goa-details
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.testid]="testId"
       [attr.open]="open"
@@ -1373,15 +1699,17 @@ class GoabDetails extends GoabBaseComponent {
     >
       <ng-content />
     </goa-details>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDetails, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDetails, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-details",
+                    imports: [CommonModule],
                     template: `
     <goa-details
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.testid]="testId"
       [attr.open]="open"
@@ -1396,7 +1724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { heading: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
                 type: Input,
                 args: [{ required: true }]
             }], open: [{
@@ -1407,9 +1735,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabDivider extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDivider, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDivider, isStandalone: true, selector: "goab-divider", usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDivider, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabDivider, isStandalone: true, selector: "goab-divider", usesInheritance: true, ngImport: i0, template: `
     <goa-divider
+      *ngIf="isReady"
       [attr.testid]="testId"
       [attr.mt]="mt"
       [attr.mb]="mb"
@@ -1417,15 +1759,17 @@ class GoabDivider extends GoabBaseComponent {
       [attr.mr]="mr"
     >
     </goa-divider>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDivider, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-divider",
+                    imports: [CommonModule],
                     template: `
     <goa-divider
+      *ngIf="isReady"
       [attr.testid]="testId"
       [attr.mt]="mt"
       [attr.mb]="mb"
@@ -1436,11 +1780,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class GoabDrawer {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.onClose = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onClose() {
         this.onClose.emit();
@@ -1453,9 +1807,10 @@ class GoabDrawer {
             return null;
         return this.heading instanceof TemplateRef ? this.heading : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabDrawer, isStandalone: true, selector: "goab-drawer", inputs: { open: ["open", "open", booleanAttribute], position: "position", heading: "heading", maxSize: "maxSize", testId: "testId", actions: "actions" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDrawer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabDrawer, isStandalone: true, selector: "goab-drawer", inputs: { open: ["open", "open", booleanAttribute], position: "position", heading: "heading", maxSize: "maxSize", testId: "testId", actions: "actions" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
     <goa-drawer
+      *ngIf="isReady"
       [open]="open"
       [attr.position]="position"
       [attr.heading]="getHeadingAsString()"
@@ -1471,16 +1826,17 @@ class GoabDrawer {
         <ng-container [ngTemplateOutlet]="actions"></ng-container>
       </div>
     </goa-drawer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDrawer, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-drawer",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `
     <goa-drawer
+      *ngIf="isReady"
       [open]="open"
       [attr.position]="position"
       [attr.heading]="getHeadingAsString()"
@@ -1499,7 +1855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { open: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { open: [{
                 type: Input,
                 args: [{ required: true, transform: booleanAttribute }]
             }], position: [{
@@ -1519,9 +1875,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
 
 // "disabled", "value", "id" is an exposed property of HTMLInputElement, no need to bind with attr
 class GoabDropdown extends GoabControlValueAccessor {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.onChange = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onChange(e) {
         const detail = e.detail;
@@ -1529,8 +1895,8 @@ class GoabDropdown extends GoabControlValueAccessor {
         this.markAsTouched();
         this.fcChange?.(detail.value || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDropdown, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabDropdown, isStandalone: true, selector: "goab-dropdown", inputs: { name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterable: ["filterable", "filterable", booleanAttribute], leadingIcon: "leadingIcon", maxHeight: "maxHeight", multiselect: ["multiselect", "multiselect", booleanAttribute], native: ["native", "native", booleanAttribute], placeholder: "placeholder", width: "width", maxWidth: "maxWidth", autoComplete: "autoComplete", relative: "relative" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDropdown, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabDropdown, isStandalone: true, selector: "goab-dropdown", inputs: { name: "name", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterable: ["filterable", "filterable", booleanAttribute], leadingIcon: "leadingIcon", maxHeight: "maxHeight", multiselect: ["multiselect", "multiselect", booleanAttribute], native: ["native", "native", booleanAttribute], placeholder: "placeholder", width: "width", maxWidth: "maxWidth", autoComplete: "autoComplete", relative: "relative" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -1538,6 +1904,7 @@ class GoabDropdown extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-dropdown
+      *ngIf="isReady"
       [attr.name]="name"
       [value]="value"
       [attr.arialabel]="ariaLabel"
@@ -1564,15 +1931,17 @@ class GoabDropdown extends GoabControlValueAccessor {
     >
       <ng-content />
     </goa-dropdown>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDropdown, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-dropdown",
+                    imports: [CommonModule],
                     template: `
     <goa-dropdown
+      *ngIf="isReady"
       [attr.name]="name"
       [value]="value"
       [attr.arialabel]="ariaLabel"
@@ -1609,7 +1978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -1643,9 +2012,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabDropdownItem {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabDropdownItem, isStandalone: true, selector: "goab-dropdown-item", inputs: { value: "value", filter: "filter", label: "label", name: "name", mountType: "mountType" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDropdownItem, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabDropdownItem, isStandalone: true, selector: "goab-dropdown-item", inputs: { value: "value", filter: "filter", label: "label", name: "name", mountType: "mountType" }, ngImport: i0, template: `
     <goa-dropdown-item
+      *ngIf="isReady"
       [value]="value"
       [label]="label"
       [attr.filter]="filter"
@@ -1653,15 +2035,16 @@ class GoabDropdownItem {
       [attr.mount]="mountType"
     >
     </goa-dropdown-item>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabDropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabDropdownItem, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-dropdown-item",
                     template: `
     <goa-dropdown-item
+      *ngIf="isReady"
       [value]="value"
       [label]="label"
       [attr.filter]="filter"
@@ -1670,9 +2053,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     >
     </goa-dropdown-item>
   `,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -1685,9 +2069,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabFileUploadCard {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.onCancel = new EventEmitter();
         this.onDelete = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onCancel() {
         this.onCancel.emit({ filename: this.filename });
@@ -1695,8 +2089,9 @@ class GoabFileUploadCard {
     _onDelete() {
         this.onDelete.emit({ filename: this.filename });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFileUploadCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabFileUploadCard, isStandalone: true, selector: "goab-file-upload-card", inputs: { filename: "filename", size: ["size", "size", numberAttribute], type: "type", progress: ["progress", "progress", numberAttribute], error: "error", testId: "testId" }, outputs: { onCancel: "onCancel", onDelete: "onDelete" }, ngImport: i0, template: `<goa-file-upload-card
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFileUploadCard, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabFileUploadCard, isStandalone: true, selector: "goab-file-upload-card", inputs: { filename: "filename", size: ["size", "size", numberAttribute], type: "type", progress: ["progress", "progress", numberAttribute], error: "error", testId: "testId" }, outputs: { onCancel: "onCancel", onDelete: "onDelete" }, ngImport: i0, template: `<goa-file-upload-card
+    *ngIf="isReady"
     [attr.filename]="filename"
     [attr.size]="size"
     [attr.type]="type"
@@ -1706,14 +2101,15 @@ class GoabFileUploadCard {
     (_cancel)="_onCancel()"
     (_delete)="_onDelete()"
   >
-  </goa-file-upload-card>`, isInline: true }); }
+  </goa-file-upload-card>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFileUploadCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFileUploadCard, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-file-upload-card",
                     template: `<goa-file-upload-card
+    *ngIf="isReady"
     [attr.filename]="filename"
     [attr.size]="size"
     [attr.type]="type"
@@ -1725,8 +2121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   >
   </goa-file-upload-card>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { filename: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { filename: [{
                 type: Input,
                 args: [{ required: true }]
             }], size: [{
@@ -1748,18 +2145,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabFileUploadInput extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.id = "";
         this.maxFileSize = "5MB";
         this.onSelectFile = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onSelectFile(e) {
         const detail = e.detail;
         this.onSelectFile.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFileUploadInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFileUploadInput, isStandalone: true, selector: "goab-file-upload-input", inputs: { id: "id", variant: "variant", maxFileSize: "maxFileSize", accept: "accept" }, outputs: { onSelectFile: "onSelectFile" }, usesInheritance: true, ngImport: i0, template: `<goa-file-upload-input
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFileUploadInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabFileUploadInput, isStandalone: true, selector: "goab-file-upload-input", inputs: { id: "id", variant: "variant", maxFileSize: "maxFileSize", accept: "accept" }, outputs: { onSelectFile: "onSelectFile" }, usesInheritance: true, ngImport: i0, template: `<goa-file-upload-input
+    *ngIf="isReady"
     [attr.variant]="variant"
     [attr.accept]="accept"
     [attr.maxfilesize]="maxFileSize"
@@ -1771,14 +2179,15 @@ class GoabFileUploadInput extends GoabBaseComponent {
     [attr.ml]="ml"
     (_selectFile)="_onSelectFile($event)"
   >
-  </goa-file-upload-input>`, isInline: true }); }
+  </goa-file-upload-input>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFileUploadInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFileUploadInput, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-file-upload-input",
                     template: `<goa-file-upload-input
+    *ngIf="isReady"
     [attr.variant]="variant"
     [attr.accept]="accept"
     [attr.maxfilesize]="maxFileSize"
@@ -1792,8 +2201,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   >
   </goa-file-upload-input>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
                 type: Input
             }], variant: [{
                 type: Input,
@@ -1807,16 +2217,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabFilterChip extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.content = "";
         this.onClick = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFilterChip, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabFilterChip, isStandalone: true, selector: "goab-filter-chip", inputs: { error: ["error", "error", booleanAttribute], deletable: ["deletable", "deletable", booleanAttribute], content: "content", iconTheme: "iconTheme" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `<goa-filter-chip
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFilterChip, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabFilterChip, isStandalone: true, selector: "goab-filter-chip", inputs: { error: ["error", "error", booleanAttribute], deletable: ["deletable", "deletable", booleanAttribute], content: "content", iconTheme: "iconTheme" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `<goa-filter-chip
+    *ngIf="isReady"
     [attr.error]="error"
     [attr.icontheme]="iconTheme"
     [attr.content]="content"
@@ -1828,14 +2249,15 @@ class GoabFilterChip extends GoabBaseComponent {
     (_click)="_onClick()"
   >
     <ng-content />
-  </goa-filter-chip>`, isInline: true }); }
+  </goa-filter-chip>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFilterChip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFilterChip, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-filter-chip",
                     template: `<goa-filter-chip
+    *ngIf="isReady"
     [attr.error]="error"
     [attr.icontheme]="iconTheme"
     [attr.content]="content"
@@ -1849,8 +2271,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     <ng-content />
   </goa-filter-chip>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { error: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { error: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], deletable: [{
@@ -1865,9 +2288,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabAppFooter {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabAppFooter, isStandalone: true, selector: "goab-app-footer", inputs: { maxContentWidth: "maxContentWidth", testId: "testId", url: "url" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppFooter, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabAppFooter, isStandalone: true, selector: "goab-app-footer", inputs: { maxContentWidth: "maxContentWidth", testId: "testId", url: "url" }, ngImport: i0, template: `
     <goa-app-footer
+      *ngIf="isReady"
       [attr.maxcontentwidth]="maxContentWidth"
       [attr.url]="url"
       [attr.testid]="testId"
@@ -1876,15 +2312,16 @@ class GoabAppFooter {
       <ng-content select="goab-app-footer-meta-section"></ng-content>
       <ng-content></ng-content>
     </goa-app-footer>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppFooter, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-app-footer",
                     template: `
     <goa-app-footer
+      *ngIf="isReady"
       [attr.maxcontentwidth]="maxContentWidth"
       [attr.url]="url"
       [attr.testid]="testId"
@@ -1895,8 +2332,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     </goa-app-footer>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { maxContentWidth: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { maxContentWidth: [{
                 type: Input
             }], testId: [{
                 type: Input
@@ -1905,21 +2343,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabAppFooterMetaSection {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppFooterMetaSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabAppFooterMetaSection, isStandalone: true, selector: "goab-app-footer-meta-section", inputs: { testId: "testId", slot: "slot" }, ngImport: i0, template: `
-    <goa-app-footer-meta-section [attr.testid]="testId">
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppFooterMetaSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabAppFooterMetaSection, isStandalone: true, selector: "goab-app-footer-meta-section", inputs: { testId: "testId", slot: "slot" }, ngImport: i0, template: `
+    <goa-app-footer-meta-section *ngIf="isReady" [attr.testid]="testId">
       <ng-content />
     </goa-app-footer-meta-section>
-  `, isInline: true, styles: [":host{width:100%}\n"] }); }
+  `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppFooterMetaSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppFooterMetaSection, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "goab-app-footer-meta-section", template: `
-    <goa-app-footer-meta-section [attr.testid]="testId">
+    <goa-app-footer-meta-section *ngIf="isReady" [attr.testid]="testId">
       <ng-content />
     </goa-app-footer-meta-section>
-  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { testId: [{
+  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], styles: [":host{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: Input
             }], slot: [{
                 type: Input,
@@ -1927,32 +2377,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabAppFooterNavSection {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.maxColumnCount = 1;
+        this.isReady = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppFooterNavSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabAppFooterNavSection, isStandalone: true, selector: "goab-app-footer-nav-section", inputs: { heading: "heading", maxColumnCount: "maxColumnCount", testId: "testId", slot: "slot" }, ngImport: i0, template: `
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppFooterNavSection, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabAppFooterNavSection, isStandalone: true, selector: "goab-app-footer-nav-section", inputs: { heading: "heading", maxColumnCount: "maxColumnCount", testId: "testId", slot: "slot" }, ngImport: i0, template: `
     <goa-app-footer-nav-section
+      *ngIf="isReady"
       [attr.maxcolumncount]="maxColumnCount"
       [attr.heading]="heading"
       [attr.testid]="testId"
     >
       <ng-content />
     </goa-app-footer-nav-section>
-  `, isInline: true, styles: [":host{width:100%}\n"] }); }
+  `, isInline: true, styles: [":host{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppFooterNavSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppFooterNavSection, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "goab-app-footer-nav-section", template: `
     <goa-app-footer-nav-section
+      *ngIf="isReady"
       [attr.maxcolumncount]="maxColumnCount"
       [attr.heading]="heading"
       [attr.testid]="testId"
     >
       <ng-content />
     </goa-app-footer-nav-section>
-  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host{width:100%}\n"] }]
-        }], propDecorators: { heading: [{
+  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], styles: [":host{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
                 type: Input
             }], maxColumnCount: [{
                 type: Input
@@ -1981,8 +2443,8 @@ class GoabPublicForm {
         const detail = e.detail;
         this.onStateChange.emit(detail.data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicForm, isStandalone: true, selector: "goab-public-form", inputs: { status: "status", name: "name" }, outputs: { onInit: "onInit", onComplete: "onComplete", onStateChange: "onStateChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicForm, isStandalone: true, selector: "goab-public-form", inputs: { status: "status", name: "name" }, outputs: { onInit: "onInit", onComplete: "onComplete", onStateChange: "onStateChange" }, ngImport: i0, template: `
   <goa-public-form
     [attr.status]="status"
     [attr.name]="name"
@@ -1994,7 +2456,7 @@ class GoabPublicForm {
   </goa-public-form>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicForm, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-form",
@@ -2044,8 +2506,8 @@ class GoabPublicFormPage extends GoabBaseComponent {
     _onContinue(event) {
         this.onContinue.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicFormPage, isStandalone: true, selector: "goab-public-form-page", inputs: { id: "id", heading: "heading", subHeading: "subHeading", summaryHeading: "summaryHeading", sectionTitle: "sectionTitle", backUrl: "backUrl", type: "type", buttonText: "buttonText", buttonVisibility: "buttonVisibility" }, outputs: { onContinue: "onContinue" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicFormPage, isStandalone: true, selector: "goab-public-form-page", inputs: { id: "id", heading: "heading", subHeading: "subHeading", summaryHeading: "summaryHeading", sectionTitle: "sectionTitle", backUrl: "backUrl", type: "type", buttonText: "buttonText", buttonVisibility: "buttonVisibility" }, outputs: { onContinue: "onContinue" }, usesInheritance: true, ngImport: i0, template: `
    <goa-public-form-page
      [id]="id"
      [attr.heading]="heading"
@@ -2066,7 +2528,7 @@ class GoabPublicFormPage extends GoabBaseComponent {
    </goa-public-form-page>
  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormPage, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-form-page",
@@ -2116,8 +2578,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabPublicFormSummary {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormSummary, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicFormSummary, isStandalone: true, selector: "goab-public-form-summary", inputs: { heading: "heading" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormSummary, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicFormSummary, isStandalone: true, selector: "goab-public-form-summary", inputs: { heading: "heading" }, ngImport: i0, template: `
   <goa-public-form-summary
     [attr.heading]="heading"
   >
@@ -2125,7 +2587,7 @@ class GoabPublicFormSummary {
   </goa-public-form-summary>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormSummary, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormSummary, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-form-summary",
@@ -2158,8 +2620,8 @@ class GoabPublicSubform extends GoabBaseComponent {
     _onStateChange(e) {
         this.onStateChange.emit(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicSubform, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicSubform, isStandalone: true, selector: "goab-public-subform", inputs: { id: "id", name: "name", continueMsg: "continueMsg" }, outputs: { onInit: "onInit", onStateChange: "onStateChange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicSubform, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicSubform, isStandalone: true, selector: "goab-public-subform", inputs: { id: "id", name: "name", continueMsg: "continueMsg" }, outputs: { onInit: "onInit", onStateChange: "onStateChange" }, usesInheritance: true, ngImport: i0, template: `
   <goa-public-subform
     [attr.id]="id"
     [attr.name]="name"
@@ -2175,7 +2637,7 @@ class GoabPublicSubform extends GoabBaseComponent {
   </goa-public-subform>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicSubform, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicSubform, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-subform",
@@ -2217,8 +2679,8 @@ class GoabPublicSubformIndex extends GoabBaseComponent {
         this.actionButtonText = "";
         this.buttonVisibility = "hidden";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicSubformIndex, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicSubformIndex, isStandalone: true, selector: "goab-public-subform-index", inputs: { heading: "heading", sectionTitle: "sectionTitle", actionButtonText: "actionButtonText", buttonVisibility: "buttonVisibility" }, host: { attributes: { "slot": "subform-index" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicSubformIndex, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicSubformIndex, isStandalone: true, selector: "goab-public-subform-index", inputs: { heading: "heading", sectionTitle: "sectionTitle", actionButtonText: "actionButtonText", buttonVisibility: "buttonVisibility" }, host: { attributes: { "slot": "subform-index" } }, usesInheritance: true, ngImport: i0, template: `
   <goa-public-subform-index
     [attr.heading]="heading"
     [attr.section-title]="sectionTitle"
@@ -2233,7 +2695,7 @@ class GoabPublicSubformIndex extends GoabBaseComponent {
   </goa-public-subform-index>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicSubformIndex, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicSubformIndex, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-subform-index",
@@ -2268,8 +2730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabPublicFormTask {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormTask, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicFormTask, isStandalone: true, selector: "goab-public-form-task", inputs: { status: "status" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormTask, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicFormTask, isStandalone: true, selector: "goab-public-form-task", inputs: { status: "status" }, ngImport: i0, template: `
   <goa-public-form-task
     [attr.status]="status"
   >
@@ -2277,7 +2739,7 @@ class GoabPublicFormTask {
   </goa-public-form-task>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormTask, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormTask, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-form-task",
@@ -2296,8 +2758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabPublicFormTaskList extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormTaskList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPublicFormTaskList, isStandalone: true, selector: "goab-public-form-task-list", inputs: { heading: "heading" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormTaskList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPublicFormTaskList, isStandalone: true, selector: "goab-public-form-task-list", inputs: { heading: "heading" }, usesInheritance: true, ngImport: i0, template: `
   <goa-public-form-task-list
     [attr.heading]="heading"
     [attr.mt]="mt"
@@ -2309,7 +2771,7 @@ class GoabPublicFormTaskList extends GoabBaseComponent {
   </goa-public-form-task-list>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPublicFormTaskList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPublicFormTaskList, decorators: [{
             type: Component,
             args: [{
                     selector: "goab-public-form-task-list",
@@ -2340,8 +2802,8 @@ class GoabFieldset {
         const detail = event.detail;
         this.onContinue.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFieldset, isStandalone: true, selector: "goab-fieldset", inputs: { id: "id", sectionTitle: "sectionTitle", dispatchOn: "dispatchOn" }, outputs: { onContinue: "onContinue" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabFieldset, isStandalone: true, selector: "goab-fieldset", inputs: { id: "id", sectionTitle: "sectionTitle", dispatchOn: "dispatchOn" }, outputs: { onContinue: "onContinue" }, ngImport: i0, template: `
     <goa-fieldset
       [attr.section-title]="sectionTitle"
       [attr.dispatch-on]="dispatchOn"
@@ -2351,7 +2813,7 @@ class GoabFieldset {
       <ng-content></ng-content>
     </goa-fieldset>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFieldset, decorators: [{
             type: Component,
             args: [{
                     selector: 'goab-fieldset',
@@ -2378,9 +2840,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabFormItem extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormItem, isStandalone: true, selector: "goab-form-item", inputs: { label: "label", labelSize: "labelSize", helpText: "helpText", error: "error", requirement: "requirement", maxWidth: "maxWidth", id: "id", publicFormSummaryOrder: "publicFormSummaryOrder", name: "name" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormItem, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabFormItem, isStandalone: true, selector: "goab-form-item", inputs: { label: "label", labelSize: "labelSize", helpText: "helpText", error: "error", requirement: "requirement", maxWidth: "maxWidth", id: "id", publicFormSummaryOrder: "publicFormSummaryOrder", name: "name" }, usesInheritance: true, ngImport: i0, template: `
     <goa-form-item
+      *ngIf="isReady"
       [attr.label]="label"
       [attr.labelsize]="labelSize"
       [attr.helptext]="helpText"
@@ -2399,15 +2875,16 @@ class GoabFormItem extends GoabBaseComponent {
       <ng-content />
       <ng-content select="goab-form-item-slot"></ng-content>
     </goa-form-item>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormItem, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-form-item",
                     template: `
     <goa-form-item
+      *ngIf="isReady"
       [attr.label]="label"
       [attr.labelsize]="labelSize"
       [attr.helptext]="helpText"
@@ -2428,8 +2905,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     </goa-form-item>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [CommonModule],
                 }]
-        }], propDecorators: { label: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], labelSize: [{
                 type: Input
@@ -2456,10 +2934,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * // similar to app-footer-meta-section & app-footer-nav-section
  */
 class GoabFormItemSlot {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormItemSlot, isStandalone: true, selector: "goab-form-item-slot", inputs: { slot: "slot" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormItemSlot, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabFormItemSlot, isStandalone: true, selector: "goab-form-item-slot", inputs: { slot: "slot" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormItemSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormItemSlot, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -2472,44 +2950,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabFormStep {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormStep, isStandalone: true, selector: "goab-form-step", inputs: { text: "text", status: "status" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormStep, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabFormStep, isStandalone: true, selector: "goab-form-step", inputs: { text: "text", status: "status" }, ngImport: i0, template: `
     <goa-form-step
+      *ngIf="isReady"
       [attr.text]="text"
       [attr.status]="status"
-    ></goa-form-step> `, isInline: true }); }
+    ></goa-form-step> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormStep, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormStep, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-form-step",
                     template: `
     <goa-form-step
+      *ngIf="isReady"
       [attr.text]="text"
       [attr.status]="status"
     ></goa-form-step> `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { text: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
                 type: Input
             }], status: [{
                 type: Input
             }] } });
 
 class GoabFormStepper extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.step = -1;
         this.onChange = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
     }
     _onChange(e) {
         const detail = e.detail;
         this.onChange.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormStepper, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabFormStepper, isStandalone: true, selector: "goab-form-stepper", inputs: { step: "step" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormStepper, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabFormStepper, isStandalone: true, selector: "goab-form-stepper", inputs: { step: "step" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
     <goa-form-stepper
+      *ngIf="isReady"
       [attr.step]="step"
       [attr.testid]="testId"
       [attr.mt]="mt"
@@ -2520,15 +3020,16 @@ class GoabFormStepper extends GoabBaseComponent {
     >
       <ng-content />
     </goa-form-stepper>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabFormStepper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabFormStepper, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-form-stepper",
                     template: `
     <goa-form-stepper
+      *ngIf="isReady"
       [attr.step]="step"
       [attr.testid]="testId"
       [attr.mt]="mt"
@@ -2540,18 +3041,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-form-stepper>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { step: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { step: [{
                 type: Input
             }], onChange: [{
                 type: Output
             }] } });
 
 class GoabGrid extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabGrid, isStandalone: true, selector: "goab-grid", inputs: { minChildWidth: "minChildWidth", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabGrid, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabGrid, isStandalone: true, selector: "goab-grid", inputs: { minChildWidth: "minChildWidth", gap: "gap" }, usesInheritance: true, ngImport: i0, template: `
     <goa-grid
+      *ngIf="isReady"
       [attr.gap]="gap"
       [attr.minchildwidth]="minChildWidth"
       [attr.testid]="testId"
@@ -2562,15 +3076,16 @@ class GoabGrid extends GoabBaseComponent {
     >
       <ng-content />
     </goa-grid>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabGrid, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-grid",
                     template: `
     <goa-grid
+      *ngIf="isReady"
       [attr.gap]="gap"
       [attr.minchildwidth]="minChildWidth"
       [attr.testid]="testId"
@@ -2582,9 +3097,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-grid>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { minChildWidth: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { minChildWidth: [{
                 type: Input,
                 args: [{ required: true }]
             }], gap: [{
@@ -2592,15 +3108,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabAppHeader {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.onMenuClick = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onMenuClick() {
         this.onMenuClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabAppHeader, isStandalone: true, selector: "goab-app-header", inputs: { url: "url", heading: "heading", maxContentWidth: "maxContentWidth", testId: "testId", fullMenuBreakpoint: ["fullMenuBreakpoint", "fullMenuBreakpoint", numberAttribute] }, outputs: { onMenuClick: "onMenuClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppHeader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabAppHeader, isStandalone: true, selector: "goab-app-header", inputs: { url: "url", heading: "heading", maxContentWidth: "maxContentWidth", testId: "testId", fullMenuBreakpoint: ["fullMenuBreakpoint", "fullMenuBreakpoint", numberAttribute] }, outputs: { onMenuClick: "onMenuClick" }, ngImport: i0, template: `
     <goa-app-header
+      *ngIf="isReady"
       [attr.url]="url"
       [attr.heading]="heading"
       [attr.maxcontentwidth]="maxContentWidth"
@@ -2611,15 +3136,16 @@ class GoabAppHeader {
     >
       <ng-content />
     </goa-app-header>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppHeader, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-app-header",
                     template: `
     <goa-app-header
+      *ngIf="isReady"
       [attr.url]="url"
       [attr.heading]="heading"
       [attr.maxcontentwidth]="maxContentWidth"
@@ -2631,9 +3157,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-app-header>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { url: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { url: [{
                 type: Input
             }], heading: [{
                 type: Input
@@ -2649,24 +3176,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabAppHeaderMenu {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppHeaderMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabAppHeaderMenu, isStandalone: true, selector: "goab-app-header-menu", inputs: { leadingIcon: "leadingIcon", heading: "heading", testId: "testId" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppHeaderMenu, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabAppHeaderMenu, isStandalone: true, selector: "goab-app-header-menu", inputs: { leadingIcon: "leadingIcon", heading: "heading", testId: "testId" }, ngImport: i0, template: `
     <goa-app-header-menu
+      *ngIf="isReady"
       [attr.leadingicon]="leadingIcon"
       [attr.heading]="heading"
       [attr.testid]="testId"
     >
       <ng-content />
     </goa-app-header-menu>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabAppHeaderMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabAppHeaderMenu, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-app-header-menu",
                     template: `
     <goa-app-header-menu
+      *ngIf="isReady"
       [attr.leadingicon]="leadingIcon"
       [attr.heading]="heading"
       [attr.testid]="testId"
@@ -2674,9 +3213,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-app-header-menu>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 }]
-        }], propDecorators: { leadingIcon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leadingIcon: [{
                 type: Input
             }], heading: [{
                 type: Input
@@ -2685,9 +3225,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabHeroBanner {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabHeroBanner, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabHeroBanner, isStandalone: true, selector: "goab-hero-banner", inputs: { heading: "heading", backgroundUrl: "backgroundUrl", minHeight: "minHeight", testId: "testId", maxContentWidth: "maxContentWidth", backgroundColor: "backgroundColor", textColor: "textColor", actions: "actions" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabHeroBanner, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabHeroBanner, isStandalone: true, selector: "goab-hero-banner", inputs: { heading: "heading", backgroundUrl: "backgroundUrl", minHeight: "minHeight", testId: "testId", maxContentWidth: "maxContentWidth", backgroundColor: "backgroundColor", textColor: "textColor", actions: "actions" }, ngImport: i0, template: `
     <goa-hero-banner
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.backgroundurl]="backgroundUrl"
       [attr.minheight]="minHeight"
@@ -2701,16 +3252,17 @@ class GoabHeroBanner {
         <ng-container [ngTemplateOutlet]="actions"></ng-container>
       </div>
     </goa-hero-banner>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabHeroBanner, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabHeroBanner, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-hero-banner",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `
     <goa-hero-banner
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.backgroundurl]="backgroundUrl"
       [attr.minheight]="minHeight"
@@ -2727,7 +3279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { heading: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
                 type: Input
             }], backgroundUrl: [{
                 type: Input
@@ -2746,9 +3298,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabIcon extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabIcon, isStandalone: true, selector: "goab-icon", inputs: { type: "type", size: "size", theme: "theme", inverted: ["inverted", "inverted", booleanAttribute], fillColor: "fillColor", opacity: ["opacity", "opacity", numberAttribute], title: "title", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabIcon, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabIcon, isStandalone: true, selector: "goab-icon", inputs: { type: "type", size: "size", theme: "theme", inverted: ["inverted", "inverted", booleanAttribute], fillColor: "fillColor", opacity: ["opacity", "opacity", numberAttribute], title: "title", ariaLabel: "ariaLabel" }, usesInheritance: true, ngImport: i0, template: `
     <goa-icon
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.theme]="theme"
       [attr.size]="size"
@@ -2764,12 +3330,13 @@ class GoabIcon extends GoabBaseComponent {
       [attr.testid]="testId"
     >
     </goa-icon>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}\n"] }); }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabIcon, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: "goab-icon", template: `
     <goa-icon
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.theme]="theme"
       [attr.size]="size"
@@ -2785,8 +3352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       [attr.testid]="testId"
     >
     </goa-icon>
-  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host{display:inline-flex;align-items:center}\n"] }]
-        }], propDecorators: { type: [{
+  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [CommonModule], styles: [":host{display:inline-flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input,
                 args: [{ required: true }]
             }], size: [{
@@ -2808,18 +3375,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabIconButton extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+        this.JSON = JSON;
         this.size = "medium";
         this.onClick = new EventEmitter();
-        this.JSON = JSON;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
     }
     _onClick() {
         this.onClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIconButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabIconButton, isStandalone: true, selector: "goab-icon-button", inputs: { icon: "icon", size: "size", variant: "variant", title: "title", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabIconButton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabIconButton, isStandalone: true, selector: "goab-icon-button", inputs: { icon: "icon", size: "size", variant: "variant", title: "title", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel", action: "action", actionArg: "actionArg", actionArgs: "actionArgs" }, outputs: { onClick: "onClick" }, usesInheritance: true, ngImport: i0, template: `
     <goa-icon-button
+      *ngIf="isReady"
       [attr.icon]="icon"
       [disabled]="disabled"
       [attr.size]="size"
@@ -2838,15 +3414,16 @@ class GoabIconButton extends GoabBaseComponent {
     >
       <ng-content></ng-content>
     </goa-icon-button>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabIconButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabIconButton, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-icon-button",
                     template: `
     <goa-icon-button
+      *ngIf="isReady"
       [attr.icon]="icon"
       [disabled]="disabled"
       [attr.size]="size"
@@ -2866,9 +3443,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content></ng-content>
     </goa-icon-button>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
                 type: Input,
                 args: [{ required: true }]
             }], size: [{
@@ -2893,8 +3471,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabInput extends GoabControlValueAccessor {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.type = "text";
         this.textAlign = "left";
         this.onTrailingIconClick = new EventEmitter();
@@ -2902,9 +3481,16 @@ class GoabInput extends GoabControlValueAccessor {
         this.onBlur = new EventEmitter();
         this.onKeyPress = new EventEmitter();
         this.onChange = new EventEmitter();
+        this.isReady = false;
         this.handleTrailingIconClick = false;
     }
     ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
         this.handleTrailingIconClick = this.onTrailingIconClick.observed;
         if (typeof this.value === "number") {
             console.warn("For numeric values use goab-input-number.");
@@ -2952,8 +3538,8 @@ class GoabInput extends GoabControlValueAccessor {
             return null;
         return this.trailingContent instanceof TemplateRef ? this.trailingContent : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInput, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabInput, isStandalone: true, selector: "goab-input", inputs: { type: "type", name: "name", debounce: ["debounce", "debounce", numberAttribute], autoCapitalize: "autoCapitalize", autoComplete: "autoComplete", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: ["focused", "focused", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], width: "width", prefix: "prefix", suffix: "suffix", ariaLabel: "ariaLabel", maxLength: ["maxLength", "maxLength", numberAttribute], min: "min", max: "max", step: ["step", "step", numberAttribute], ariaLabelledBy: "ariaLabelledBy", trailingIconAriaLabel: "trailingIconAriaLabel", textAlign: "textAlign", leadingContent: "leadingContent", trailingContent: "trailingContent" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabInput, isStandalone: true, selector: "goab-input", inputs: { type: "type", name: "name", debounce: ["debounce", "debounce", numberAttribute], autoCapitalize: "autoCapitalize", autoComplete: "autoComplete", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: ["focused", "focused", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], width: "width", prefix: "prefix", suffix: "suffix", ariaLabel: "ariaLabel", maxLength: ["maxLength", "maxLength", numberAttribute], min: "min", max: "max", step: ["step", "step", numberAttribute], ariaLabelledBy: "ariaLabelledBy", trailingIconAriaLabel: "trailingIconAriaLabel", textAlign: "textAlign", leadingContent: "leadingContent", trailingContent: "trailingContent" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -2961,6 +3547,7 @@ class GoabInput extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-input
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.name]="name"
       [attr.focused]="focused"
@@ -3023,16 +3610,17 @@ class GoabInput extends GoabControlValueAccessor {
         </ng-container>
       </div>
     </goa-input>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabInput, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-input",
-                    imports: [NgIf, NgTemplateOutlet],
+                    imports: [NgIf, NgTemplateOutlet, CommonModule],
                     template: `
     <goa-input
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.name]="name"
       [attr.focused]="focused"
@@ -3105,7 +3693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -3171,7 +3759,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabInputNumber {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.type = "number";
         this.textAlign = "right"; // Default to right for numbers
         this.value = null;
@@ -3185,6 +3775,10 @@ class GoabInputNumber {
     }
     ngOnInit() {
         this.handleTrailingIconClick = this.onTrailingIconClick.observed;
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
     }
     _onTrailingIconClick(_) {
         if (this.handleTrailingIconClick) {
@@ -3255,8 +3849,8 @@ class GoabInputNumber {
             return null;
         return this.trailingContent instanceof TemplateRef ? this.trailingContent : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabInputNumber, isStandalone: true, selector: "goab-input-number", inputs: { type: "type", name: "name", id: "id", debounce: ["debounce", "debounce", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], autoCapitalize: "autoCapitalize", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: ["focused", "focused", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], error: ["error", "error", booleanAttribute], width: "width", prefix: "prefix", suffix: "suffix", testId: "testId", ariaLabel: "ariaLabel", maxLength: ["maxLength", "maxLength", numberAttribute], min: "min", max: "max", step: ["step", "step", numberAttribute], ariaLabelledBy: "ariaLabelledBy", mt: "mt", mr: "mr", mb: "mb", ml: "ml", trailingIconAriaLabel: "trailingIconAriaLabel", textAlign: "textAlign", value: "value", leadingContent: "leadingContent", trailingContent: "trailingContent" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabInputNumber, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabInputNumber, isStandalone: true, selector: "goab-input-number", inputs: { type: "type", name: "name", id: "id", debounce: ["debounce", "debounce", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute], autoCapitalize: "autoCapitalize", placeholder: "placeholder", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", variant: "variant", focused: ["focused", "focused", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], error: ["error", "error", booleanAttribute], width: "width", prefix: "prefix", suffix: "suffix", testId: "testId", ariaLabel: "ariaLabel", maxLength: ["maxLength", "maxLength", numberAttribute], min: "min", max: "max", step: ["step", "step", numberAttribute], ariaLabelledBy: "ariaLabelledBy", mt: "mt", mr: "mr", mb: "mb", ml: "ml", trailingIconAriaLabel: "trailingIconAriaLabel", textAlign: "textAlign", value: "value", leadingContent: "leadingContent", trailingContent: "trailingContent" }, outputs: { onTrailingIconClick: "onTrailingIconClick", onFocus: "onFocus", onBlur: "onBlur", onKeyPress: "onKeyPress", onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -3265,6 +3859,7 @@ class GoabInputNumber {
             },
         ], ngImport: i0, template: `
     <goa-input
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.name]="name"
       [attr.focused]="focused"
@@ -3326,16 +3921,17 @@ class GoabInputNumber {
         </ng-container>
       </div>
     </goa-input>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabInputNumber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabInputNumber, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-input-number",
-                    imports: [NgIf, NgTemplateOutlet],
+                    imports: [NgIf, NgTemplateOutlet, CommonModule],
                     template: `
     <goa-input
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.name]="name"
       [attr.focused]="focused"
@@ -3408,7 +4004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -3492,12 +4088,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabLink {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.JSON = JSON;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabLink, isStandalone: true, selector: "goab-link", inputs: { leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", testId: "testId", action: "action", actionArg: "actionArg", actionArgs: "actionArgs", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabLink, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabLink, isStandalone: true, selector: "goab-link", inputs: { leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", testId: "testId", action: "action", actionArg: "actionArg", actionArgs: "actionArgs", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
     <goa-link
+      *ngIf="isReady"
       [attr.leadingicon]="leadingIcon"
       [attr.trailingicon]="trailingIcon"
       [attr.testid]="testId"
@@ -3511,15 +4116,16 @@ class GoabLink {
     >
       <ng-content />
     </goa-link>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabLink, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-link",
                     template: `
     <goa-link
+      *ngIf="isReady"
       [attr.leadingicon]="leadingIcon"
       [attr.trailingicon]="trailingIcon"
       [attr.testid]="testId"
@@ -3534,9 +4140,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-link>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { leadingIcon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { leadingIcon: [{
                 type: Input
             }], trailingIcon: [{
                 type: Input
@@ -3559,9 +4166,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabMicrositeHeader {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.onFeedbackClick = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     getVersionAsString() {
         return typeof this.version === "string" ? this.version : "";
     }
@@ -3573,9 +4188,10 @@ class GoabMicrositeHeader {
     _onFeedbackClick() {
         this.onFeedbackClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabMicrositeHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabMicrositeHeader, isStandalone: true, selector: "goab-microsite-header", inputs: { type: "type", version: "version", feedbackUrl: "feedbackUrl", testId: "testId", maxContentWidth: "maxContentWidth", feedbackUrlTarget: "feedbackUrlTarget", headerUrlTarget: "headerUrlTarget" }, outputs: { onFeedbackClick: "onFeedbackClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabMicrositeHeader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabMicrositeHeader, isStandalone: true, selector: "goab-microsite-header", inputs: { type: "type", version: "version", feedbackUrl: "feedbackUrl", testId: "testId", maxContentWidth: "maxContentWidth", feedbackUrlTarget: "feedbackUrlTarget", headerUrlTarget: "headerUrlTarget" }, outputs: { onFeedbackClick: "onFeedbackClick" }, ngImport: i0, template: `
     <goa-microsite-header
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.version]="getVersionAsString()"
       [attr.feedbackurl]="feedbackUrl"
@@ -3590,15 +4206,16 @@ class GoabMicrositeHeader {
         <ng-container [ngTemplateOutlet]="getVersionAsTemplate()"></ng-container>
       </div>
     </goa-microsite-header>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabMicrositeHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabMicrositeHeader, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-microsite-header",
                     template: `
     <goa-microsite-header
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.version]="getVersionAsString()"
       [attr.feedbackurl]="feedbackUrl"
@@ -3614,10 +4231,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       </div>
     </goa-microsite-header>
   `,
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input,
                 args: [{ required: true }]
             }], version: [{
@@ -3637,10 +4254,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabModal {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.closable = false;
         this.onClose = new EventEmitter();
     }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
     getHeadingAsString() {
         return this.heading instanceof TemplateRef ? "" : this.heading;
     }
@@ -3652,9 +4279,10 @@ class GoabModal {
     _onClose() {
         this.onClose.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabModal, isStandalone: true, selector: "goab-modal", inputs: { calloutVariant: "calloutVariant", open: ["open", "open", booleanAttribute], maxWidth: "maxWidth", closable: "closable", transition: "transition", testId: "testId", role: "role", heading: "heading", actions: "actions" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabModal, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabModal, isStandalone: true, selector: "goab-modal", inputs: { calloutVariant: "calloutVariant", open: ["open", "open", booleanAttribute], maxWidth: "maxWidth", closable: "closable", transition: "transition", testId: "testId", role: "role", heading: "heading", actions: "actions" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
     <goa-modal
+      *ngIf="isReady"
       [attr.calloutvariant]="calloutVariant"
       [attr.open]="open"
       [attr.maxwidth]="maxWidth"
@@ -3664,7 +4292,7 @@ class GoabModal {
       [attr.transition]="transition"
       [attr.heading]="getHeadingAsString()"
       (_close)="_onClose()"
-    >
+      >
       <div slot="heading">
         <ng-container *ngIf="this.heading !== '' && getHeadingAsTemplate() !== null" [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
       </div>
@@ -3675,16 +4303,17 @@ class GoabModal {
         <ng-container *ngIf="this.actions" [ngTemplateOutlet]="actions"></ng-container>
       </div>
     </goa-modal>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabModal, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-modal",
-                    imports: [NgIf, NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `
     <goa-modal
+      *ngIf="isReady"
       [attr.calloutvariant]="calloutVariant"
       [attr.open]="open"
       [attr.maxwidth]="maxWidth"
@@ -3694,7 +4323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       [attr.transition]="transition"
       [attr.heading]="getHeadingAsString()"
       (_close)="_onClose()"
-    >
+      >
       <div slot="heading">
         <ng-container *ngIf="this.heading !== '' && getHeadingAsTemplate() !== null" [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
       </div>
@@ -3705,10 +4334,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
         <ng-container *ngIf="this.actions" [ngTemplateOutlet]="actions"></ng-container>
       </div>
     </goa-modal>
-  `,
+    `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { calloutVariant: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { calloutVariant: [{
                 type: Input
             }], open: [{
                 type: Input,
@@ -3739,8 +4368,8 @@ class GoabMenuButton {
         const detail = e.detail;
         this.onAction.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabMenuButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabMenuButton, isStandalone: true, selector: "goab-menu-button", inputs: { text: "text", type: "type", testId: "testId" }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabMenuButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabMenuButton, isStandalone: true, selector: "goab-menu-button", inputs: { text: "text", type: "type", testId: "testId" }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
     <goa-menu-button
       [attr.text]="text"
       [attr.type]="type"
@@ -3751,7 +4380,7 @@ class GoabMenuButton {
     </goa-menu-button>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabMenuButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabMenuButton, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3780,8 +4409,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabMenuAction {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabMenuAction, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabMenuAction, isStandalone: true, selector: "goab-menu-action", inputs: { text: "text", action: "action", icon: "icon", testId: "testId" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabMenuAction, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabMenuAction, isStandalone: true, selector: "goab-menu-action", inputs: { text: "text", action: "action", icon: "icon", testId: "testId" }, ngImport: i0, template: `
     <goa-menu-action
       [attr.text]="text"
       [attr.action]="action"
@@ -3791,7 +4420,7 @@ class GoabMenuAction {
     </goa-menu-action>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabMenuAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabMenuAction, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -3821,16 +4450,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabNotification {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.type = "information";
         this.onDismiss = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onDismiss() {
         this.onDismiss.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabNotification, isStandalone: true, selector: "goab-notification", inputs: { type: "type", ariaLive: "ariaLive", maxContentWidth: "maxContentWidth", testId: "testId" }, outputs: { onDismiss: "onDismiss" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabNotification, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabNotification, isStandalone: true, selector: "goab-notification", inputs: { type: "type", ariaLive: "ariaLive", maxContentWidth: "maxContentWidth", testId: "testId" }, outputs: { onDismiss: "onDismiss" }, ngImport: i0, template: `
     <goa-notification
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.arialive]="ariaLive"
       [attr.maxcontentwidth]="maxContentWidth"
@@ -3839,15 +4477,16 @@ class GoabNotification {
     >
       <ng-content />
     </goa-notification>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabNotification, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-notification",
                     template: `
     <goa-notification
+      *ngIf="isReady"
       [attr.type]="type"
       [attr.arialive]="ariaLive"
       [attr.maxcontentwidth]="maxContentWidth"
@@ -3857,9 +4496,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-notification>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input
             }], ariaLive: [{
                 type: Input
@@ -3872,41 +4512,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabPageBlock {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPageBlock, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPageBlock, isStandalone: true, selector: "goab-page-block", inputs: { width: "width", testId: "testId" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPageBlock, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPageBlock, isStandalone: true, selector: "goab-page-block", inputs: { width: "width", testId: "testId" }, ngImport: i0, template: `
     <goa-page-block
+      *ngIf="isReady"
       [attr.width]="width"
       [attr.testid]="testId"
     >
       <ng-content></ng-content>
     </goa-page-block>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPageBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPageBlock, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-page-block",
                     template: `
     <goa-page-block
+      *ngIf="isReady"
       [attr.width]="width"
       [attr.testid]="testId"
     >
       <ng-content></ng-content>
     </goa-page-block>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { width: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { width: [{
                 type: Input
             }], testId: [{
                 type: Input
             }] } });
 
 class GoabPages extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPages, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabPages, isStandalone: true, selector: "goab-pages", inputs: { current: ["current", "current", numberAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPages, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabPages, isStandalone: true, selector: "goab-pages", inputs: { current: ["current", "current", numberAttribute] }, usesInheritance: true, ngImport: i0, template: `
     <goa-pages
+      *ngIf="isReady"
       [attr.current]="current"
       [attr.mt]="mt"
       [attr.mb]="mb"
@@ -3915,15 +4580,16 @@ class GoabPages extends GoabBaseComponent {
     >
       <ng-content />
     </goa-pages>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPages, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-pages",
                     template: `
     <goa-pages
+      *ngIf="isReady"
       [attr.current]="current"
       [attr.mt]="mt"
       [attr.mb]="mb"
@@ -3933,27 +4599,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-pages>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { current: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { current: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }] } });
 
 class GoabPagination extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.perPageCount = 10;
         this.variant = "all";
         this.onChange = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onChange(e) {
         const detail = e.detail;
         this.onChange.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPagination, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPagination, isStandalone: true, selector: "goab-pagination", inputs: { itemCount: "itemCount", pageNumber: "pageNumber", perPageCount: "perPageCount", variant: "variant" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPagination, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPagination, isStandalone: true, selector: "goab-pagination", inputs: { itemCount: "itemCount", pageNumber: "pageNumber", perPageCount: "perPageCount", variant: "variant" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: `
     <goa-pagination
+      *ngIf="isReady"
       [attr.itemcount]="itemCount"
       [attr.perpagecount]="perPageCount"
       [attr.pagenumber]="pageNumber"
@@ -3966,15 +4642,16 @@ class GoabPagination extends GoabBaseComponent {
       (_change)="_onChange($event)"
     >
     </goa-pagination>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPagination, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-pagination",
                     template: `
     <goa-pagination
+      *ngIf="isReady"
       [attr.itemcount]="itemCount"
       [attr.perpagecount]="perPageCount"
       [attr.pagenumber]="pageNumber"
@@ -3988,9 +4665,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     >
     </goa-pagination>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { itemCount: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { itemCount: [{
                 type: Input,
                 args: [{ required: true }]
             }], pageNumber: [{
@@ -4005,14 +4683,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabPopover extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.maxWidth = "320px";
         this.padded = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPopover, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabPopover, isStandalone: true, selector: "goab-popover", inputs: { maxWidth: "maxWidth", minWidth: "minWidth", padded: "padded", position: "position", relative: "relative", target: "target" }, usesInheritance: true, ngImport: i0, template: `
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPopover, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabPopover, isStandalone: true, selector: "goab-popover", inputs: { maxWidth: "maxWidth", minWidth: "minWidth", padded: "padded", position: "position", relative: "relative", target: "target" }, usesInheritance: true, ngImport: i0, template: `
     <goa-popover
+      *ngIf="isReady"
       [attr.maxwidth]="maxWidth"
       [attr.minwidth]="minWidth"
       [attr.padded]="padded"
@@ -4029,16 +4716,17 @@ class GoabPopover extends GoabBaseComponent {
         <ng-container [ngTemplateOutlet]="target"></ng-container>
       </div>
     </goa-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabPopover, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-popover",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `
     <goa-popover
+      *ngIf="isReady"
       [attr.maxwidth]="maxWidth"
       [attr.minwidth]="minWidth"
       [attr.padded]="padded"
@@ -4058,7 +4746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { maxWidth: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { maxWidth: [{
                 type: Input
             }], minWidth: [{
                 type: Input
@@ -4074,18 +4762,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabRadioGroup extends GoabControlValueAccessor {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.onChange = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onChange(e) {
         const detail = e.detail;
         this.markAsTouched();
         this.onChange.emit(detail);
         this.fcChange?.(detail.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabRadioGroup, isStandalone: true, selector: "goab-radio-group", inputs: { name: "name", orientation: "orientation", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabRadioGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabRadioGroup, isStandalone: true, selector: "goab-radio-group", inputs: { name: "name", orientation: "orientation", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -4093,6 +4789,7 @@ class GoabRadioGroup extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-radio-group
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
       [disabled]="disabled"
@@ -4109,15 +4806,16 @@ class GoabRadioGroup extends GoabControlValueAccessor {
     >
       <ng-content />
     </goa-radio-group>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabRadioGroup, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-radio-group",
                     template: `
     <goa-radio-group
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
       [disabled]="disabled"
@@ -4135,6 +4833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-radio-group>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     providers: [
                         {
@@ -4144,7 +4843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], orientation: [{
                 type: Input
@@ -4155,6 +4854,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabRadioItem extends GoabBaseComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
     getDescriptionAsString() {
         return !this.description || this.description instanceof TemplateRef
             ? ""
@@ -4165,9 +4877,10 @@ class GoabRadioItem extends GoabBaseComponent {
             return null;
         return this.description instanceof TemplateRef ? this.description : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabRadioItem, isStandalone: true, selector: "goab-radio-item", inputs: { value: "value", label: "label", name: "name", description: "description", reveal: "reveal", ariaLabel: "ariaLabel", revealAriaLabel: "revealAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], checked: ["checked", "checked", booleanAttribute], error: ["error", "error", booleanAttribute], maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabRadioItem, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabRadioItem, isStandalone: true, selector: "goab-radio-item", inputs: { value: "value", label: "label", name: "name", description: "description", reveal: "reveal", ariaLabel: "ariaLabel", revealAriaLabel: "revealAriaLabel", disabled: ["disabled", "disabled", booleanAttribute], checked: ["checked", "checked", booleanAttribute], error: ["error", "error", booleanAttribute], maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
     <goa-radio-item
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
       [attr.label]="label"
@@ -4194,15 +4907,16 @@ class GoabRadioItem extends GoabBaseComponent {
         ></ng-container>
       </div>
     </goa-radio-item>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabRadioItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabRadioItem, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-radio-item",
                     template: `
     <goa-radio-item
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
       [attr.label]="label"
@@ -4229,11 +4943,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
         ></ng-container>
       </div>
     </goa-radio-item>
-  `,
-                    imports: [NgTemplateOutlet, NgIf],
+    `,
+                    imports: [NgTemplateOutlet, CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -4261,33 +4975,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabSideMenu {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSideMenu, isStandalone: true, selector: "goab-side-menu", inputs: { testId: "testId" }, ngImport: i0, template: `
-    <goa-side-menu [attr.testid]="testId">
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSideMenu, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabSideMenu, isStandalone: true, selector: "goab-side-menu", inputs: { testId: "testId" }, ngImport: i0, template: `
+    <goa-side-menu *ngIf="isReady" [attr.testid]="testId">
       <ng-content />
     </goa-side-menu>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSideMenu, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-side-menu",
                     template: `
-    <goa-side-menu [attr.testid]="testId">
+    <goa-side-menu *ngIf="isReady" [attr.testid]="testId">
       <ng-content />
     </goa-side-menu>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 }]
-        }], propDecorators: { testId: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { testId: [{
                 type: Input
             }] } });
 
 class GoabSideMenuGroup extends GoabBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenuGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSideMenuGroup, isStandalone: true, selector: "goab-side-menu-group", inputs: { heading: "heading", icon: "icon" }, usesInheritance: true, ngImport: i0, template: `
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSideMenuGroup, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabSideMenuGroup, isStandalone: true, selector: "goab-side-menu-group", inputs: { heading: "heading", icon: "icon" }, usesInheritance: true, ngImport: i0, template: `
     <goa-side-menu-group
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.testid]="testId"
       [attr.icon]="icon"
@@ -4298,15 +5035,16 @@ class GoabSideMenuGroup extends GoabBaseComponent {
     >
       <ng-content />
     </goa-side-menu-group>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenuGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSideMenuGroup, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-side-menu-group",
                     template: `
     <goa-side-menu-group
+      *ngIf="isReady"
       [attr.heading]="heading"
       [attr.testid]="testId"
       [attr.icon]="icon"
@@ -4318,9 +5056,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-side-menu-group>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { heading: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
                 type: Input,
                 args: [{ required: true }]
             }], icon: [{
@@ -4328,24 +5067,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabSideMenuHeading {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenuHeading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSideMenuHeading, isStandalone: true, selector: "goab-side-menu-heading", inputs: { icon: "icon", testId: "testId", meta: "meta" }, ngImport: i0, template: `
-    <goa-side-menu-heading [attr.testid]="testId" [attr.icon]="icon">
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSideMenuHeading, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabSideMenuHeading, isStandalone: true, selector: "goab-side-menu-heading", inputs: { icon: "icon", testId: "testId", meta: "meta" }, ngImport: i0, template: `
+    <goa-side-menu-heading *ngIf="isReady" [attr.testid]="testId" [attr.icon]="icon">
       <ng-content />
       <span slot="meta">
         <ng-container [ngTemplateOutlet]="meta"></ng-container>
       </span>
     </goa-side-menu-heading>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSideMenuHeading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSideMenuHeading, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-side-menu-heading",
-                    imports: [NgTemplateOutlet],
+                    imports: [NgTemplateOutlet, CommonModule],
                     template: `
-    <goa-side-menu-heading [attr.testid]="testId" [attr.icon]="icon">
+    <goa-side-menu-heading *ngIf="isReady" [attr.testid]="testId" [attr.icon]="icon">
       <ng-content />
       <span slot="meta">
         <ng-container [ngTemplateOutlet]="meta"></ng-container>
@@ -4354,7 +5103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { icon: [{
                 type: Input
             }], testId: [{
                 type: Input
@@ -4363,13 +5112,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabSkeleton extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.maxWidth = "300px";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabSkeleton, isStandalone: true, selector: "goab-skeleton", inputs: { type: "type", maxWidth: "maxWidth", size: "size", lineCount: ["lineCount", "lineCount", numberAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSkeleton, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabSkeleton, isStandalone: true, selector: "goab-skeleton", inputs: { type: "type", maxWidth: "maxWidth", size: "size", lineCount: ["lineCount", "lineCount", numberAttribute] }, usesInheritance: true, ngImport: i0, template: `
     <goa-skeleton
+      *ngIf="isReady"
       [attr.maxwidth]="maxWidth"
       [attr.size]="size"
       [attr.linecount]="lineCount"
@@ -4381,15 +5139,16 @@ class GoabSkeleton extends GoabBaseComponent {
       [attr.mr]="mr"
     >
     </goa-skeleton>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSkeleton, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-skeleton",
                     template: `
     <goa-skeleton
+      *ngIf="isReady"
       [attr.maxwidth]="maxWidth"
       [attr.size]="size"
       [attr.linecount]="lineCount"
@@ -4402,9 +5161,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     >
     </goa-skeleton>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
                 type: Input,
                 args: [{ required: true }]
             }], maxWidth: [{
@@ -4417,32 +5177,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabSpacer {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSpacer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabSpacer, isStandalone: true, selector: "goab-spacer", inputs: { hSpacing: "hSpacing", vSpacing: "vSpacing", testId: "testId" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSpacer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabSpacer, isStandalone: true, selector: "goab-spacer", inputs: { hSpacing: "hSpacing", vSpacing: "vSpacing", testId: "testId" }, ngImport: i0, template: `
     <goa-spacer
+      *ngIf="isReady"
       [attr.hspacing]="hSpacing"
       [attr.vspacing]="vSpacing"
       [attr.testid]="testId"
     >
     </goa-spacer>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabSpacer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabSpacer, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-spacer",
                     template: `
     <goa-spacer
+      *ngIf="isReady"
       [attr.hspacing]="hSpacing"
       [attr.vspacing]="vSpacing"
       [attr.testid]="testId"
     >
     </goa-spacer>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { hSpacing: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { hSpacing: [{
                 type: Input
             }], vSpacing: [{
                 type: Input
@@ -4451,6 +5224,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabTab {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     getHeadingAsString() {
         return this.heading instanceof TemplateRef ? "" : this.heading;
     }
@@ -4459,24 +5242,24 @@ class GoabTab {
             return null;
         return this.heading instanceof TemplateRef ? this.heading : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTab, isStandalone: true, selector: "goab-tab", inputs: { heading: "heading" }, ngImport: i0, template: `
-    <goa-tab>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTab, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabTab, isStandalone: true, selector: "goab-tab", inputs: { heading: "heading" }, ngImport: i0, template: `
+    <goa-tab *ngIf="isReady">
       <ng-content />
       <div slot="heading">
         <ng-container [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
         {{getHeadingAsString()}}
       </div>
     </goa-tab>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTab, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-tab",
                     template: `
-    <goa-tab>
+    <goa-tab *ngIf="isReady">
       <ng-content />
       <div slot="heading">
         <ng-container [ngTemplateOutlet]="getHeadingAsTemplate()"></ng-container>
@@ -4485,24 +5268,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     </goa-tab>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    imports: [NgTemplateOutlet]
+                    imports: [NgTemplateOutlet, CommonModule]
                 }]
-        }], propDecorators: { heading: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { heading: [{
                 type: Input
             }] } });
 
 class GoabTable extends GoabBaseComponent {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
         this.onSort = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onSort(e) {
         const detail = e.detail;
         this.onSort.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTable, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTable, isStandalone: true, selector: "goab-table", inputs: { width: "width", variant: "variant" }, outputs: { onSort: "onSort" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTable, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabTable, isStandalone: true, selector: "goab-table", inputs: { width: "width", variant: "variant" }, outputs: { onSort: "onSort" }, usesInheritance: true, ngImport: i0, template: `
     <goa-table
+      *ngIf="isReady"
       [attr.width]="width"
       [attr.variant]="variant"
       [attr.testid]="testId"
@@ -4516,15 +5308,16 @@ class GoabTable extends GoabBaseComponent {
         <ng-content />
       </table>
     </goa-table>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTable, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-table",
                     template: `
     <goa-table
+      *ngIf="isReady"
       [attr.width]="width"
       [attr.variant]="variant"
       [attr.testid]="testId"
@@ -4539,9 +5332,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       </table>
     </goa-table>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { width: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { width: [{
                 type: Input
             }], variant: [{
                 type: Input
@@ -4550,66 +5344,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabTableSortHeader {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.direction = "none";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTableSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTableSortHeader, isStandalone: true, selector: "goab-table-sort-header", inputs: { name: "name", direction: "direction" }, ngImport: i0, template: `
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTableSortHeader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabTableSortHeader, isStandalone: true, selector: "goab-table-sort-header", inputs: { name: "name", direction: "direction" }, ngImport: i0, template: `
     <goa-table-sort-header
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.direction]="direction"
     >
       <ng-content />
     </goa-table-sort-header>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTableSortHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTableSortHeader, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-table-sort-header",
                     template: `
     <goa-table-sort-header
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.direction]="direction"
     >
       <ng-content />
     </goa-table-sort-header>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 }]
-        }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], direction: [{
                 type: Input
             }] } });
 
 class GoabTabs {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.onChange = new EventEmitter();
     }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     _onChange(e) {
         const detail = e.detail;
         this.onChange.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabTabs, isStandalone: true, selector: "goab-tabs", inputs: { initialTab: ["initialTab", "initialTab", numberAttribute], testId: "testId" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTabs, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabTabs, isStandalone: true, selector: "goab-tabs", inputs: { initialTab: ["initialTab", "initialTab", numberAttribute], testId: "testId" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
     <goa-tabs
+      *ngIf="isReady"
       [attr.initialtab]="initialTab"
       [attr.testid]="testId"
       (_change)="_onChange($event)"
     >
       <ng-content />
     </goa-tabs>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTabs, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-tabs",
                     template: `
     <goa-tabs
+      *ngIf="isReady"
       [attr.initialtab]="initialTab"
       [attr.testid]="testId"
       (_change)="_onChange($event)"
@@ -4617,9 +5432,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
       <ng-content />
     </goa-tabs>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { initialTab: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { initialTab: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], testId: [{
@@ -4629,36 +5445,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabTemporaryNotificationCtrl {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
         this.verticalPosition = "bottom";
         this.horizontalPosition = "center";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTemporaryNotificationCtrl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTemporaryNotificationCtrl, isStandalone: true, selector: "goab-temporary-notification-ctrl", inputs: { verticalPosition: "verticalPosition", horizontalPosition: "horizontalPosition", testId: "testId" }, ngImport: i0, template: `
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTemporaryNotificationCtrl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabTemporaryNotificationCtrl, isStandalone: true, selector: "goab-temporary-notification-ctrl", inputs: { verticalPosition: "verticalPosition", horizontalPosition: "horizontalPosition", testId: "testId" }, ngImport: i0, template: `
     <goa-temp-notification-ctrl
+      *ngIf="isReady"
       [attr.vertical-position]="verticalPosition"
       [attr.horizontal-position]="horizontalPosition"
       [attr.testid]="testId"
     >
     </goa-temp-notification-ctrl>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTemporaryNotificationCtrl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTemporaryNotificationCtrl, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-temporary-notification-ctrl",
                     template: `
     <goa-temp-notification-ctrl
+      *ngIf="isReady"
       [attr.vertical-position]="verticalPosition"
       [attr.horizontal-position]="horizontalPosition"
       [attr.testid]="testId"
     >
     </goa-temp-notification-ctrl>
   `,
+                    imports: [CommonModule],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { verticalPosition: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { verticalPosition: [{
                 type: Input
             }], horizontalPosition: [{
                 type: Input
@@ -4667,9 +5494,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabText {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabText, isStandalone: true, selector: "goab-text", inputs: { tag: "tag", size: "size", maxWidth: "maxWidth", color: "color", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabText, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabText, isStandalone: true, selector: "goab-text", inputs: { tag: "tag", size: "size", maxWidth: "maxWidth", color: "color", mt: "mt", mb: "mb", ml: "ml", mr: "mr" }, ngImport: i0, template: `
     <goa-text
+      *ngIf="isReady"
       [attr.as]="tag"
       [attr.size]="size"
       [attr.maxwidth]="maxWidth"
@@ -4680,15 +5520,17 @@ class GoabText {
       [attr.mr]="mr">
       <ng-content />
     </goa-text>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabText, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: 'goab-text',
+                    imports: [CommonModule],
                     template: `
     <goa-text
+      *ngIf="isReady"
       [attr.as]="tag"
       [attr.size]="size"
       [attr.maxwidth]="maxWidth"
@@ -4702,7 +5544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 }]
-        }], propDecorators: { tag: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { tag: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -4721,14 +5563,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabTextArea extends GoabControlValueAccessor {
-    constructor() {
-        super(...arguments);
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
         this.countBy = "";
         this.maxCount = -1;
         this.autoComplete = "on";
         this.onChange = new EventEmitter();
         this.onKeyPress = new EventEmitter();
         this.onBlur = new EventEmitter();
+        this.isReady = false;
+    }
+    ngOnInit() {
+        // For Angular 20, we need to delay rendering the web component
+        // to ensure all attributes are properly bound before the component initializes
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        }, 0);
     }
     _onChange(e) {
         const detail = e.detail;
@@ -4746,8 +5598,8 @@ class GoabTextArea extends GoabControlValueAccessor {
         this.markAsTouched();
         this.onBlur.emit(detail);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTextArea, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.3", type: GoabTextArea, isStandalone: true, selector: "goab-textarea", inputs: { name: "name", placeholder: "placeholder", rows: ["rows", "rows", numberAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], width: "width", ariaLabel: "ariaLabel", countBy: "countBy", maxCount: "maxCount", maxWidth: "maxWidth", autoComplete: "autoComplete" }, outputs: { onChange: "onChange", onKeyPress: "onKeyPress", onBlur: "onBlur" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTextArea, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.1.6", type: GoabTextArea, isStandalone: true, selector: "goab-textarea", inputs: { name: "name", placeholder: "placeholder", rows: ["rows", "rows", numberAttribute], readOnly: ["readOnly", "readOnly", booleanAttribute], width: "width", ariaLabel: "ariaLabel", countBy: "countBy", maxCount: "maxCount", maxWidth: "maxWidth", autoComplete: "autoComplete" }, outputs: { onChange: "onChange", onKeyPress: "onKeyPress", onBlur: "onBlur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -4755,6 +5607,7 @@ class GoabTextArea extends GoabControlValueAccessor {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <goa-textarea
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
       [attr.placeholder]="placeholder"
@@ -4778,15 +5631,17 @@ class GoabTextArea extends GoabControlValueAccessor {
       (_blur)="_onBlur($event)"
     >
     </goa-textarea>
-  `, isInline: true }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTextArea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTextArea, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-textarea",
+                    imports: [CommonModule],
                     template: `
     <goa-textarea
+      *ngIf="isReady"
       [attr.name]="name"
       [attr.value]="value"
       [attr.placeholder]="placeholder"
@@ -4820,7 +5675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -4851,6 +5706,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
             }] } });
 
 class GoabTooltip extends GoabBaseComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.isReady = false;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.isReady = true;
+            this.cdr.detectChanges();
+        });
+    }
     getContentAsString() {
         return this.content instanceof TemplateRef ? "" : this.content || "";
     }
@@ -4859,9 +5725,10 @@ class GoabTooltip extends GoabBaseComponent {
             return null;
         return this.content instanceof TemplateRef ? this.content : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTooltip, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: GoabTooltip, isStandalone: true, selector: "goab-tooltip", inputs: { position: "position", content: "content", hAlign: "hAlign", maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTooltip, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: GoabTooltip, isStandalone: true, selector: "goab-tooltip", inputs: { position: "position", content: "content", hAlign: "hAlign", maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `
     <goa-tooltip
+      *ngIf="isReady"
       [attr.position]="position"
       [attr.content]="getContentAsString()"
       [attr.halign]="hAlign"
@@ -4881,15 +5748,16 @@ class GoabTooltip extends GoabBaseComponent {
       </div>
       <ng-content />
     </goa-tooltip>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: GoabTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: GoabTooltip, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     selector: "goab-tooltip",
                     template: `
     <goa-tooltip
+      *ngIf="isReady"
       [attr.position]="position"
       [attr.content]="getContentAsString()"
       [attr.halign]="hAlign"
@@ -4911,9 +5779,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
     </goa-tooltip>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    imports: [NgTemplateOutlet, NgIf],
+                    imports: [NgTemplateOutlet, NgIf, CommonModule],
                 }]
-        }], propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { position: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -4927,5 +5795,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularComponentsModule, CheckedDirective, GoabAccordion, GoabAppFooter, GoabAppFooterMetaSection, GoabAppFooterNavSection, GoabAppHeader, GoabAppHeaderMenu, GoabBadge, GoabBlock, GoabButton, GoabButtonGroup, GoabCallout, GoabCard, GoabCardActions, GoabCardContent, GoabCardImage, GoabCheckbox, GoabCheckboxList, GoabChip, GoabCircularProgress, GoabColumnLayout, GoabContainer, GoabDatePicker, GoabDetails, GoabDivider, GoabDrawer, GoabDropdown, GoabDropdownItem, GoabFieldset, GoabFileUploadCard, GoabFileUploadInput, GoabFilterChip, GoabFormItem, GoabFormItemSlot, GoabFormStep, GoabFormStepper, GoabGrid, GoabHeroBanner, GoabIcon, GoabIconButton, GoabInput, GoabInputNumber, GoabLink, GoabMenuAction, GoabMenuButton, GoabMicrositeHeader, GoabModal, GoabNotification, GoabPageBlock, GoabPages, GoabPagination, GoabPopover, GoabPublicForm, GoabPublicFormPage, GoabPublicFormSummary, GoabPublicFormTask, GoabPublicFormTaskList, GoabPublicSubform, GoabPublicSubformIndex, GoabRadioGroup, GoabRadioItem, GoabSideMenu, GoabSideMenuGroup, GoabSideMenuHeading, GoabSkeleton, GoabSpacer, GoabTab, GoabTable, GoabTableSortHeader, GoabTabs, GoabTemporaryNotificationCtrl, GoabText, GoabTextArea, GoabTooltip, ValueDirective, ValueListDirective };
+export { AngularComponentsModule, CheckedDirective, GoabAccordion, GoabAppFooter, GoabAppFooterMetaSection, GoabAppFooterNavSection, GoabAppHeader, GoabAppHeaderMenu, GoabBadge, GoabBlock, GoabButton, GoabButtonGroup, GoabCalendar, GoabCallout, GoabCard, GoabCardActions, GoabCardContent, GoabCardImage, GoabCheckbox, GoabCheckboxList, GoabChip, GoabCircularProgress, GoabColumnLayout, GoabContainer, GoabDatePicker, GoabDetails, GoabDivider, GoabDrawer, GoabDropdown, GoabDropdownItem, GoabFieldset, GoabFileUploadCard, GoabFileUploadInput, GoabFilterChip, GoabFormItem, GoabFormItemSlot, GoabFormStep, GoabFormStepper, GoabGrid, GoabHeroBanner, GoabIcon, GoabIconButton, GoabInput, GoabInputNumber, GoabLink, GoabMenuAction, GoabMenuButton, GoabMicrositeHeader, GoabModal, GoabNotification, GoabPageBlock, GoabPages, GoabPagination, GoabPopover, GoabPublicForm, GoabPublicFormPage, GoabPublicFormSummary, GoabPublicFormTask, GoabPublicFormTaskList, GoabPublicSubform, GoabPublicSubformIndex, GoabRadioGroup, GoabRadioItem, GoabSideMenu, GoabSideMenuGroup, GoabSideMenuHeading, GoabSkeleton, GoabSpacer, GoabTab, GoabTable, GoabTableSortHeader, GoabTabs, GoabTemporaryNotificationCtrl, GoabText, GoabTextArea, GoabTooltip, ValueDirective, ValueListDirective };
 //# sourceMappingURL=abgov-angular-components.mjs.map