@firebase-oss/ui-angular 0.0.1 → 0.0.2-exp.ed61394

package/dist/fesm2022/firebase-oss-ui-angular.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Component, computed, InjectionToken, inject, makeEnvironmentProviders, signal, effect, output, viewChild, model, isDevMode } from '@angular/core';
-import { getBehavior, getTranslation, createSignInAuthFormSchema, createSignUpAuthFormSchema, createForgotPasswordAuthFormSchema, createEmailLinkAuthFormSchema, createPhoneAuthNumberFormSchema, createPhoneAuthVerifyFormSchema, createMultiFactorPhoneAuthNumberFormSchema, createMultiFactorPhoneAuthVerifyFormSchema, createMultiFactorTotpAuthNumberFormSchema, createMultiFactorTotpAuthVerifyFormSchema, sendSignInLinkToEmail, FirebaseUIError, completeEmailLinkSignIn, sendPasswordResetEmail, verifyPhoneNumber, signInWithMultiFactorAssertion, countryData, formatPhoneNumber, confirmPhoneNumber, signInWithEmailAndPassword, hasBehavior, createUserWithEmailAndPassword, signInWithProvider, registerFramework } from '@firebase-oss/ui-core';
-import { CommonModule } from '@angular/common';
+import { input, HostBinding, Component, computed, InjectionToken, Optional, inject, makeEnvironmentProviders, signal, effect, PLATFORM_ID, EventEmitter, Output, viewChild, model, output, isDevMode } from '@angular/core';
+import { getBehavior, getTranslation, createSignInAuthFormSchema, createSignUpAuthFormSchema, createForgotPasswordAuthFormSchema, createEmailLinkAuthFormSchema, createPhoneAuthNumberFormSchema, createPhoneAuthVerifyFormSchema, createMultiFactorPhoneAuthNumberFormSchema, createMultiFactorPhoneAuthAssertionFormSchema, createMultiFactorPhoneAuthVerifyFormSchema, createMultiFactorTotpAuthNumberFormSchema, createMultiFactorTotpAuthVerifyFormSchema, sendSignInLinkToEmail, FirebaseUIError, completeEmailLinkSignIn, sendPasswordResetEmail, verifyPhoneNumber, signInWithMultiFactorAssertion, formatPhoneNumber, enrollWithMultiFactorAssertion, generateTotpSecret, generateTotpQrCode, countryData, confirmPhoneNumber, signInWithEmailAndPassword, hasBehavior, createUserWithEmailAndPassword, signInWithProvider, registerFramework } from '@firebase-oss/ui-core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import { injectField, injectForm, injectStore, TanStackField, TanStackAppField } from '@tanstack/angular-form';
 import { buttonVariant } from '@firebase-oss/ui-styles';
 import { FirebaseApps } from '@angular/fire/app';
-import { PhoneAuthProvider, PhoneMultiFactorGenerator, TotpMultiFactorGenerator } from 'firebase/auth';
+import { Auth, authState, GoogleAuthProvider, FacebookAuthProvider, OAuthProvider, TwitterAuthProvider, GithubAuthProvider } from '@angular/fire/auth';
+import { PhoneAuthProvider, PhoneMultiFactorGenerator, TotpMultiFactorGenerator, multiFactor, FactorId } from 'firebase/auth';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { GoogleAuthProvider, FacebookAuthProvider, OAuthProvider, TwitterAuthProvider, GithubAuthProvider } from '@angular/fire/auth';
 
 /**
  * Copyright 2025 Google LLC
@@ -25,7 +25,11 @@ import { GoogleAuthProvider, FacebookAuthProvider, OAuthProvider, TwitterAuthPro
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A customizable button component with multiple variants.
+ */
 class ButtonComponent {
+    /** The visual variant of the button. */
     variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
     get getButtonClasses() {
         return buttonVariant({ variant: this.variant() });
@@ -45,16 +49,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                 args: ["class"]
             }] } });
 
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A component that displays form field metadata, such as validation errors.
+ */
 class FormMetadataComponent {
+    /** The form field API instance. */
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
     errors = computed(() => this.field()
         .state.meta.errors.map((error) => error.message)
         .join(", "), ...(ngDevMode ? [{ debugName: "errors" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormMetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FormMetadataComponent, isStandalone: true, selector: "fui-form-metadata", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FormMetadataComponent, isStandalone: true, selector: "fui-form-metadata", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     @if (field().state.meta.isTouched && errors().length > 0) {
       <div>
-        <div role="alert" aria-live="polite" class="fui-form__error">
+        <div role="alert" aria-live="polite" class="fui-error">
           {{ errors() }}
         </div>
       </div>
@@ -66,10 +89,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{
                     selector: "fui-form-metadata",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     @if (field().state.meta.isTouched && errors().length > 0) {
       <div>
-        <div role="alert" aria-live="polite" class="fui-form__error">
+        <div role="alert" aria-live="polite" class="fui-error">
           {{ errors() }}
         </div>
       </div>
@@ -77,17 +103,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
   `,
                 }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
+/**
+ * A form input component with label, description, and validation support.
+ */
 class FormInputComponent {
     field = injectField();
+    /** The label text for the input field. */
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** The input type (e.g., "text", "email", "password"). */
     type = input("text", ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /** Optional description text displayed below the label. */
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: FormInputComponent, isStandalone: true, selector: "fui-form-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FormInputComponent, isStandalone: true, selector: "fui-form-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <label [for]="field.api.name">
       <div data-input-label>
         <div>{{ label() }}</div>
         <div><ng-content select="input-action" /></div>
       </div>
+      @if (description()) {
+        <div data-input-description>{{ description() }}</div>
+      }
       <div data-input-group>
         <ng-content select="input-before" />
         <input
@@ -111,12 +147,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-form-input",
                     standalone: true,
                     imports: [FormMetadataComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <label [for]="field.api.name">
       <div data-input-label>
         <div>{{ label() }}</div>
         <div><ng-content select="input-action" /></div>
       </div>
+      @if (description()) {
+        <div data-input-description>{{ description() }}</div>
+      }
       <div data-input-group>
         <ng-content select="input-before" />
         <input
@@ -134,7 +176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+/**
+ * A button component for form actions (e.g., "Forgot Password?" link).
+ */
 class FormActionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: FormActionComponent, isStandalone: true, selector: "button[fui-form-action]", host: { attributes: { "type": "button" }, classAttribute: "fui-form__action" }, ngImport: i0, template: `<ng-content></ng-content> `, isInline: true });
@@ -151,12 +196,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     template: `<ng-content></ng-content> `,
                 }]
         }] });
+/**
+ * A submit button component for forms.
+ *
+ * Automatically disables when the form is submitting.
+ */
 class FormSubmitComponent {
+    /** Optional additional CSS classes. */
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
+    /** The form state for tracking submission status. */
     state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
     isSubmitting = computed(() => this.state().isSubmitting, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormSubmitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: FormSubmitComponent, isStandalone: true, selector: "fui-form-submit", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "submit" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: FormSubmitComponent, isStandalone: true, selector: "fui-form-submit", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "submit" }, styleAttribute: "display: block;" }, ngImport: i0, template: `
     <button fui-button class="fui-form__action" [class]="class()" [disabled]="isSubmitting()">
       <ng-content></ng-content>
     </button>
@@ -170,6 +222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     imports: [ButtonComponent],
                     host: {
                         type: "submit",
+                        style: "display: block;",
                     },
                     template: `
     <button fui-button class="fui-form__action" [class]="class()" [disabled]="isSubmitting()">
@@ -178,7 +231,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
   `,
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
+/**
+ * A component that displays form-level error messages.
+ *
+ * Shows errors from form submission, not validation errors.
+ */
 class FormErrorMessageComponent {
+    /** The form state containing error information. */
     state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
     errorMessage = computed(() => {
         const error = this.state().errorMap?.onSubmit;
@@ -189,9 +248,9 @@ class FormErrorMessageComponent {
         return undefined;
     }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FormErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FormErrorMessageComponent, isStandalone: true, selector: "fui-form-error-message", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: FormErrorMessageComponent, isStandalone: true, selector: "fui-form-error-message", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     @if (errorMessage()) {
-      <div class="fui-form__error">
+      <div class="fui-error">
         {{ errorMessage() }}
       </div>
     }
@@ -202,9 +261,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             args: [{
                     selector: "fui-form-error-message",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     @if (errorMessage()) {
-      <div class="fui-form__error">
+      <div class="fui-error">
         {{ errorMessage() }}
       </div>
     }
@@ -229,12 +291,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  */
 const FIREBASE_UI_STORE = new InjectionToken("firebaseui.store");
 const FIREBASE_UI_POLICIES = new InjectionToken("firebaseui.policies");
+/**
+ * Provides FirebaseUI configuration for the Angular application.
+ *
+ * This function must be called in your application's providers array to enable FirebaseUI functionality.
+ *
+ * @param uiFactory - Factory function that creates a FirebaseUIStore from Firebase apps.
+ * @returns Environment providers for FirebaseUI.
+ */
 function provideFirebaseUI(uiFactory) {
     const providers = [
         // TODO: This should depend on the FirebaseAuth provider via deps,
         // see https://github.com/angular/angularfire/blob/35e0a9859299010488852b1826e4083abe56528f/src/firestore/firestore.module.ts#L76
         {
             provide: FIREBASE_UI_STORE,
+            deps: [FirebaseApps, [new Optional(), Auth]],
             useFactory: () => {
                 const apps = inject(FirebaseApps);
                 if (!apps || apps.length === 0) {
@@ -246,10 +317,23 @@ function provideFirebaseUI(uiFactory) {
     ];
     return makeEnvironmentProviders(providers);
 }
+/**
+ * Provides policy configuration (terms of service and privacy policy URLs) for FirebaseUI components.
+ *
+ * @param factory - Factory function that returns the policy configuration.
+ * @returns Environment providers for FirebaseUI policies.
+ */
 function provideFirebaseUIPolicies(factory) {
     const providers = [{ provide: FIREBASE_UI_POLICIES, useFactory: factory }];
     return makeEnvironmentProviders(providers);
 }
+/**
+ * Injects the FirebaseUI store as a reactive signal.
+ *
+ * Returns a readonly signal that updates when the UI state changes.
+ *
+ * @returns A readonly signal containing the current FirebaseUI state.
+ */
 function injectUI() {
     const store = inject(FIREBASE_UI_STORE);
     const ui = signal(store.get(), ...(ngDevMode ? [{ debugName: "ui" }] : []));
@@ -258,9 +342,42 @@ function injectUI() {
     });
     return ui.asReadonly();
 }
+/**
+ * Injects a callback that is called when a user is authenticated.
+ *
+ * The callback is only triggered for non-anonymous users.
+ *
+ * @param onAuthenticated - Callback function called when a user is authenticated.
+ */
+function injectUserAuthenticated(onAuthenticated) {
+    const auth = inject(Auth);
+    const state = authState(auth);
+    effect((onCleanup) => {
+        const subscription = state.subscribe((user) => {
+            if (user && !user.isAnonymous) {
+                onAuthenticated(user);
+            }
+        });
+        onCleanup(() => {
+            subscription.unsubscribe();
+        });
+    });
+}
+/**
+ * Injects a reCAPTCHA verifier for phone authentication.
+ *
+ * Automatically renders the reCAPTCHA widget in the provided element when available.
+ *
+ * @param element - Function that returns the element reference where reCAPTCHA should be rendered.
+ * @returns A computed signal containing the reCAPTCHA verifier instance, or null if not available.
+ */
 function injectRecaptchaVerifier(element) {
     const ui = injectUI();
+    const platformId = inject(PLATFORM_ID);
     const verifier = computed(() => {
+        if (!isPlatformBrowser(platformId)) {
+            return null;
+        }
         const elementRef = element();
         if (!elementRef) {
             return null;
@@ -275,61 +392,151 @@ function injectRecaptchaVerifier(element) {
     });
     return verifier;
 }
+/**
+ * Injects a translation string as a reactive signal.
+ *
+ * The signal updates when the UI locale changes.
+ *
+ * @param category - The translation category (e.g., "labels", "errors", "prompts").
+ * @param key - The translation key within the category.
+ * @returns A computed signal containing the translated string.
+ */
 function injectTranslation(category, key) {
     const ui = injectUI();
     return computed(() => getTranslation(ui(), category, key));
 }
+/**
+ * Injects the sign-in authentication form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the sign-in form schema.
+ */
 function injectSignInAuthFormSchema() {
     const ui = injectUI();
     return computed(() => createSignInAuthFormSchema(ui()));
 }
+/**
+ * Injects the sign-up authentication form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the sign-up form schema.
+ */
 function injectSignUpAuthFormSchema() {
     const ui = injectUI();
     return computed(() => createSignUpAuthFormSchema(ui()));
 }
+/**
+ * Injects the forgot password authentication form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the forgot password form schema.
+ */
 function injectForgotPasswordAuthFormSchema() {
     const ui = injectUI();
     return computed(() => createForgotPasswordAuthFormSchema(ui()));
 }
+/**
+ * Injects the email link authentication form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the email link auth form schema.
+ */
 function injectEmailLinkAuthFormSchema() {
     const ui = injectUI();
     return computed(() => createEmailLinkAuthFormSchema(ui()));
 }
+/**
+ * Injects the phone authentication number form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the phone auth number form schema.
+ */
 function injectPhoneAuthFormSchema() {
     const ui = injectUI();
     return computed(() => createPhoneAuthNumberFormSchema(ui()));
 }
+/**
+ * Injects the phone authentication verification form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the phone auth verification form schema.
+ */
 function injectPhoneAuthVerifyFormSchema() {
     const ui = injectUI();
     return computed(() => createPhoneAuthVerifyFormSchema(ui()));
 }
+/**
+ * Injects the multi-factor phone authentication number form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the MFA phone auth number form schema.
+ */
 function injectMultiFactorPhoneAuthNumberFormSchema() {
     const ui = injectUI();
     return computed(() => createMultiFactorPhoneAuthNumberFormSchema(ui()));
 }
+/**
+ * Injects the multi-factor phone authentication assertion form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the MFA phone auth assertion form schema.
+ */
+function injectMultiFactorPhoneAuthAssertionFormSchema() {
+    const ui = injectUI();
+    return computed(() => createMultiFactorPhoneAuthAssertionFormSchema(ui()));
+}
+/**
+ * Injects the multi-factor phone authentication verification form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the MFA phone auth verification form schema.
+ */
 function injectMultiFactorPhoneAuthVerifyFormSchema() {
     const ui = injectUI();
     return computed(() => createMultiFactorPhoneAuthVerifyFormSchema(ui()));
 }
+/**
+ * Injects the multi-factor TOTP authentication number form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the MFA TOTP auth number form schema.
+ */
 function injectMultiFactorTotpAuthNumberFormSchema() {
     const ui = injectUI();
     return computed(() => createMultiFactorTotpAuthNumberFormSchema(ui()));
 }
+/**
+ * Injects the multi-factor TOTP authentication verification form schema as a reactive signal.
+ *
+ * @returns A computed signal containing the MFA TOTP auth verification form schema.
+ */
 function injectMultiFactorTotpAuthVerifyFormSchema() {
     const ui = injectUI();
     return computed(() => createMultiFactorTotpAuthVerifyFormSchema(ui()));
 }
+/**
+ * Injects the policy configuration (terms of service and privacy policy URLs).
+ *
+ * @returns The policy configuration, or null if not provided.
+ */
 function injectPolicies() {
     return inject(FIREBASE_UI_POLICIES, { optional: true });
 }
+/**
+ * Injects the list of allowed countries for phone authentication as a reactive signal.
+ *
+ * @returns A computed signal containing the array of allowed country data.
+ */
 function injectCountries() {
     const ui = injectUI();
     return computed(() => getBehavior(ui(), "countryCodes")().allowedCountries);
 }
+/**
+ * Injects the default country for phone authentication as a reactive signal.
+ *
+ * @returns A computed signal containing the default country data.
+ */
 function injectDefaultCountry() {
     const ui = injectUI();
     return computed(() => getBehavior(ui(), "countryCodes")().defaultCountry);
 }
+/**
+ * Injects the redirect error message as a reactive signal.
+ *
+ * Returns the error message if a redirect error occurred, undefined otherwise.
+ *
+ * @returns A computed signal containing the redirect error message, or undefined if no error.
+ */
 function injectRedirectError() {
     const ui = injectUI();
     return computed(() => {
@@ -356,6 +563,11 @@ function injectRedirectError() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A component that displays terms of service and privacy policy links.
+ *
+ * Parses the terms and privacy policy template and renders clickable links.
+ */
 class PoliciesComponent {
     policies = injectPolicies();
     termsText = injectTranslation("labels", "termsOfService");
@@ -364,6 +576,9 @@ class PoliciesComponent {
     tosUrl = this.policies?.termsOfServiceUrl;
     privacyPolicyUrl = this.policies?.privacyPolicyUrl;
     shouldShow = computed(() => this.policies !== null, ...(ngDevMode ? [{ debugName: "shouldShow" }] : []));
+    get displayStyle() {
+        return this.shouldShow() ? "block" : "none";
+    }
     policyParts = computed(() => {
         if (!this.shouldShow()) {
             return [];
@@ -394,23 +609,21 @@ class PoliciesComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "policyParts" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PoliciesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: PoliciesComponent, isStandalone: true, selector: "fui-policies", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: PoliciesComponent, isStandalone: true, selector: "fui-policies", host: { properties: { "style.display": "this.displayStyle" }, classAttribute: "fui-policies" }, ngImport: i0, template: `
     @if (shouldShow()) {
-      <div class="fui-policies">
-        @for (part of policyParts(); track $index) {
-          @if (part.type === "tos") {
-            <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
-              {{ part.text }}
-            </a>
-          } @else if (part.type === "privacy") {
-            <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
-              {{ part.text }}
-            </a>
-          } @else {
-            <span>{{ part.content }}</span>
-          }
+      @for (part of policyParts(); track $index) {
+        @if (part.type === "tos") {
+          <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
+            {{ part.text }}
+          </a>
+        } @else if (part.type === "privacy") {
+          <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
+            {{ part.text }}
+          </a>
+        } @else {
+          <span>{{ part.content }}</span>
         }
-      </div>
+      }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
@@ -418,29 +631,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             type: Component,
             args: [{
                     selector: "fui-policies",
+                    host: {
+                        class: "fui-policies",
+                    },
                     standalone: true,
                     imports: [CommonModule],
                     template: `
     @if (shouldShow()) {
-      <div class="fui-policies">
-        @for (part of policyParts(); track $index) {
-          @if (part.type === "tos") {
-            <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
-              {{ part.text }}
-            </a>
-          } @else if (part.type === "privacy") {
-            <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
-              {{ part.text }}
-            </a>
-          } @else {
-            <span>{{ part.content }}</span>
-          }
+      @for (part of policyParts(); track $index) {
+        @if (part.type === "tos") {
+          <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
+            {{ part.text }}
+          </a>
+        } @else if (part.type === "privacy") {
+          <a [attr.href]="part.url" target="_blank" rel="noopener noreferrer">
+            {{ part.text }}
+          </a>
+        } @else {
+          <span>{{ part.content }}</span>
         }
-      </div>
+      }
     }
   `,
                 }]
-        }] });
+        }], propDecorators: { displayStyle: [{
+                type: HostBinding,
+                args: ["style.display"]
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -457,6 +674,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for email link authentication.
+ *
+ * Sends a sign-in link to the user's email address and automatically completes sign-in
+ * if the user arrives via an email link.
+ */
 class EmailLinkAuthFormComponent {
     ui = injectUI();
     formSchema = injectEmailLinkAuthFormSchema();
@@ -465,8 +688,10 @@ class EmailLinkAuthFormComponent {
     sendSignInLinkLabel = injectTranslation("labels", "sendSignInLink");
     emailSentMessage = injectTranslation("messages", "signInLinkSent");
     unknownErrorLabel = injectTranslation("errors", "unknownError");
-    emailSent = output();
-    signIn = output();
+    /** Event emitter fired when sign-in link email is sent. */
+    emailSent = new EventEmitter();
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     form = injectForm({
         defaultValues: {
             email: "",
@@ -484,18 +709,18 @@ class EmailLinkAuthFormComponent {
             this.form.update({
                 validators: {
                     onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async ({ value }) => {
                         try {
                             await sendSignInLinkToEmail(this.ui(), value.email);
                             this.emailSentState.set(true);
-                            this.emailSent?.emit();
+                            this.emailSent.emit();
                             return;
                         }
                         catch (error) {
                             if (error instanceof FirebaseUIError) {
                                 return error.message;
                             }
+                            console.error(error);
                             return this.unknownErrorLabel();
                         }
                     },
@@ -506,13 +731,13 @@ class EmailLinkAuthFormComponent {
     async completeSignIn() {
         const credential = await completeEmailLinkSignIn(this.ui(), window.location.href);
         if (credential) {
-            this.signIn?.emit(credential);
+            this.signIn.emit(credential);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: EmailLinkAuthFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: EmailLinkAuthFormComponent, isStandalone: true, selector: "fui-email-link-auth-form", outputs: { emailSent: "emailSent", signIn: "signIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: EmailLinkAuthFormComponent, isStandalone: true, selector: "fui-email-link-auth-form", outputs: { emailSent: "emailSent", signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     @if (emailSentState()) {
-      <div class="fui-form__success">
+      <div class="fui-success">
         {{ emailSentMessage() }}
       </div>
     }
@@ -533,13 +758,16 @@ class EmailLinkAuthFormComponent {
         </fieldset>
       </form>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: EmailLinkAuthFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-email-link-auth-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -551,7 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     ],
                     template: `
     @if (emailSentState()) {
-      <div class="fui-form__success">
+      <div class="fui-success">
         {{ emailSentMessage() }}
       </div>
     }
@@ -574,7 +802,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { emailSent: [{ type: i0.Output, args: ["emailSent"] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { emailSent: [{
+                type: Output
+            }], signIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -591,6 +823,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for requesting a password reset email.
+ *
+ * Displays a success message after the email is sent.
+ */
 class ForgotPasswordAuthFormComponent {
     ui = injectUI();
     formSchema = injectForgotPasswordAuthFormSchema();
@@ -600,8 +837,10 @@ class ForgotPasswordAuthFormComponent {
     backToSignInLabel = injectTranslation("labels", "backToSignIn");
     checkEmailForResetMessage = injectTranslation("messages", "checkEmailForReset");
     unknownErrorLabel = injectTranslation("errors", "unknownError");
-    passwordSent = output();
-    backToSignIn = output();
+    /** Event emitter for back to sign in action. */
+    backToSignIn = input(...(ngDevMode ? [undefined, { debugName: "backToSignIn" }] : []));
+    /** Event emitter fired when password reset email is sent. */
+    passwordSent = new EventEmitter();
     form = injectForm({
         defaultValues: {
             email: "",
@@ -618,18 +857,18 @@ class ForgotPasswordAuthFormComponent {
             this.form.update({
                 validators: {
                     onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async ({ value }) => {
                         try {
                             await sendPasswordResetEmail(this.ui(), value.email);
                             this.emailSent.set(true);
-                            this.passwordSent?.emit();
+                            this.passwordSent.emit();
                             return;
                         }
                         catch (error) {
                             if (error instanceof FirebaseUIError) {
                                 return error.message;
                             }
+                            console.error(error);
                             return this.unknownErrorLabel();
                         }
                     },
@@ -638,9 +877,9 @@ class ForgotPasswordAuthFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForgotPasswordAuthFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ForgotPasswordAuthFormComponent, isStandalone: true, selector: "fui-forgot-password-auth-form", outputs: { passwordSent: "passwordSent", backToSignIn: "backToSignIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ForgotPasswordAuthFormComponent, isStandalone: true, selector: "fui-forgot-password-auth-form", inputs: { backToSignIn: { classPropertyName: "backToSignIn", publicName: "backToSignIn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passwordSent: "passwordSent" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     @if (emailSent()) {
-      <div class="fui-form__success">
+      <div class="fui-success">
         {{ checkEmailForResetMessage() }}
       </div>
     }
@@ -660,18 +899,21 @@ class ForgotPasswordAuthFormComponent {
           <fui-form-error-message [state]="state()" />
         </fieldset>
 
-        @if (backToSignIn) {
-          <button fui-form-action (click)="backToSignIn.emit()">{{ backToSignInLabel() }} &rarr;</button>
+        @if (backToSignIn()?.observed) {
+          <button fui-form-action (click)="backToSignIn()?.emit()">{{ backToSignInLabel() }} &rarr;</button>
         }
       </form>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: FormActionComponent, selector: "button[fui-form-action]" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: FormActionComponent, selector: "button[fui-form-action]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForgotPasswordAuthFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-forgot-password-auth-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -684,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     ],
                     template: `
     @if (emailSent()) {
-      <div class="fui-form__success">
+      <div class="fui-success">
         {{ checkEmailForResetMessage() }}
       </div>
     }
@@ -704,14 +946,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           <fui-form-error-message [state]="state()" />
         </fieldset>
 
-        @if (backToSignIn) {
-          <button fui-form-action (click)="backToSignIn.emit()">{{ backToSignInLabel() }} &rarr;</button>
+        @if (backToSignIn()?.observed) {
+          <button fui-form-action (click)="backToSignIn()?.emit()">{{ backToSignInLabel() }} &rarr;</button>
         }
       </form>
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { passwordSent: [{ type: i0.Output, args: ["passwordSent"] }], backToSignIn: [{ type: i0.Output, args: ["backToSignIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { backToSignIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "backToSignIn", required: false }] }], passwordSent: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -727,51 +971,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for requesting SMS verification code during MFA assertion.
+ */
 class SmsMultiFactorAssertionPhoneFormComponent {
     ui = injectUI();
-    formSchema = injectMultiFactorPhoneAuthNumberFormSchema();
+    /** The multi-factor info hint containing phone number details. */
     hint = input.required(...(ngDevMode ? [{ debugName: "hint" }] : []));
-    onSubmit = output();
-    phoneNumberLabel = injectTranslation("labels", "phoneNumber");
+    /** Event emitter fired when verification ID is received. */
+    onSubmit = new EventEmitter();
     sendCodeLabel = injectTranslation("labels", "sendCode");
-    unknownErrorLabel = injectTranslation("errors", "unknownError");
     recaptchaContainer = viewChild.required("recaptchaContainer");
     phoneNumber = computed(() => {
         const hint = this.hint();
         return hint.phoneNumber || "";
     }, ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
+    mfaSmsAssertionPrompt = computed(() => {
+        return getTranslation(this.ui(), "messages", "mfaSmsAssertionPrompt", { phoneNumber: this.phoneNumber() });
+    }, ...(ngDevMode ? [{ debugName: "mfaSmsAssertionPrompt" }] : []));
     recaptchaVerifier = injectRecaptchaVerifier(() => this.recaptchaContainer());
     form = injectForm({
-        defaultValues: {
-            phoneNumber: "",
-        },
+        defaultValues: {},
     });
     state = injectStore(this.form, (state) => state);
     constructor() {
-        effect(() => {
-            // Set the phone number value from the hint
-            this.form.setFieldValue("phoneNumber", this.phoneNumber());
-        });
         effect(() => {
             this.form.update({
                 validators: {
-                    onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async () => {
                         try {
                             const verifier = this.recaptchaVerifier();
                             if (!verifier) {
-                                return this.unknownErrorLabel();
+                                return "Recaptcha verifier not available";
                             }
                             const verificationId = await verifyPhoneNumber(this.ui(), "", verifier, undefined, this.hint());
                             this.onSubmit.emit(verificationId);
                             return;
                         }
                         catch (error) {
-                            if (error instanceof FirebaseUIError) {
-                                return error.message;
-                            }
-                            return this.unknownErrorLabel();
+                            return error instanceof FirebaseUIError ? error.message : String(error);
                         }
                     },
                 },
@@ -792,16 +1030,14 @@ class SmsMultiFactorAssertionPhoneFormComponent {
         this.form.handleSubmit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorAssertionPhoneFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.7", type: SmsMultiFactorAssertionPhoneFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-assertion-phone-form", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "recaptchaContainer", first: true, predicate: ["recaptchaContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.7", type: SmsMultiFactorAssertionPhoneFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-assertion-phone-form", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, host: { styleAttribute: "display: block;" }, viewQueries: [{ propertyName: "recaptchaContainer", first: true, predicate: ["recaptchaContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
-        <fui-form-input
-          name="phoneNumber"
-          tanstack-app-field
-          [tanstackField]="form"
-          label="{{ phoneNumberLabel() }}"
-          type="tel"
-        ></fui-form-input>
+        <label>
+          <div data-input-description>
+            {{ mfaSmsAssertionPrompt() }}
+          </div>
+        </label>
       </fieldset>
       <fieldset>
         <div class="fui-recaptcha-container" #recaptchaContainer></div>
@@ -813,31 +1049,25 @@ class SmsMultiFactorAssertionPhoneFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorAssertionPhoneFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-sms-multi-factor-assertion-phone-form",
                     standalone: true,
-                    imports: [
-                        CommonModule,
-                        TanStackField,
-                        TanStackAppField,
-                        FormInputComponent,
-                        FormSubmitComponent,
-                        FormErrorMessageComponent,
-                    ],
+                    imports: [CommonModule, FormSubmitComponent, FormErrorMessageComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
-        <fui-form-input
-          name="phoneNumber"
-          tanstack-app-field
-          [tanstackField]="form"
-          label="{{ phoneNumberLabel() }}"
-          type="tel"
-        ></fui-form-input>
+        <label>
+          <div data-input-description>
+            {{ mfaSmsAssertionPrompt() }}
+          </div>
+        </label>
       </fieldset>
       <fieldset>
         <div class="fui-recaptcha-container" #recaptchaContainer></div>
@@ -851,14 +1081,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </form>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], recaptchaContainer: [{ type: i0.ViewChild, args: ["recaptchaContainer", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], onSubmit: [{
+                type: Output
+            }], recaptchaContainer: [{ type: i0.ViewChild, args: ["recaptchaContainer", { isSignal: true }] }] } });
+/**
+ * A form component for verifying SMS code during MFA assertion.
+ */
 class SmsMultiFactorAssertionVerifyFormComponent {
     ui = injectUI();
     formSchema = injectMultiFactorPhoneAuthVerifyFormSchema();
+    /** The verification ID received from the phone form. */
     verificationId = input.required(...(ngDevMode ? [{ debugName: "verificationId" }] : []));
-    onSuccess = output();
+    /** Event emitter for successful MFA assertion. */
+    onSuccess = new EventEmitter();
     verificationCodeLabel = injectTranslation("labels", "verificationCode");
     verifyCodeLabel = injectTranslation("labels", "verifyCode");
+    smsVerificationPrompt = injectTranslation("prompts", "smsVerificationPrompt");
     unknownErrorLabel = injectTranslation("errors", "unknownError");
     form = injectForm({
         defaultValues: {
@@ -880,15 +1118,12 @@ class SmsMultiFactorAssertionVerifyFormComponent {
                         try {
                             const credential = PhoneAuthProvider.credential(value.verificationId, value.verificationCode);
                             const assertion = PhoneMultiFactorGenerator.assertion(credential);
-                            await signInWithMultiFactorAssertion(this.ui(), assertion);
-                            this.onSuccess.emit();
+                            const result = await signInWithMultiFactorAssertion(this.ui(), assertion);
+                            this.onSuccess.emit(result);
                             return;
                         }
                         catch (error) {
-                            if (error instanceof FirebaseUIError) {
-                                return error.message;
-                            }
-                            return this.unknownErrorLabel();
+                            return error instanceof FirebaseUIError ? error.message : String(error);
                         }
                     },
                 },
@@ -901,14 +1136,15 @@ class SmsMultiFactorAssertionVerifyFormComponent {
         this.form.handleSubmit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorAssertionVerifyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: SmsMultiFactorAssertionVerifyFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-assertion-verify-form", inputs: { verificationId: { classPropertyName: "verificationId", publicName: "verificationId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSuccess: "onSuccess" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: SmsMultiFactorAssertionVerifyFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-assertion-verify-form", inputs: { verificationId: { classPropertyName: "verificationId", publicName: "verificationId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSuccess: "onSuccess" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
         <fui-form-input
           name="verificationCode"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ verificationCodeLabel() }}"
+          [label]="verificationCodeLabel()"
+          [description]="smsVerificationPrompt()"
           type="text"
         ></fui-form-input>
       </fieldset>
@@ -919,13 +1155,16 @@ class SmsMultiFactorAssertionVerifyFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorAssertionVerifyFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-sms-multi-factor-assertion-verify-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -941,7 +1180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           name="verificationCode"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ verificationCodeLabel() }}"
+          [label]="verificationCodeLabel()"
+          [description]="smsVerificationPrompt()"
           type="text"
         ></fui-form-input>
       </fieldset>
@@ -954,21 +1194,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </form>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { verificationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "verificationId", required: true }] }], onSuccess: [{ type: i0.Output, args: ["onSuccess"] }] } });
+        }], ctorParameters: () => [], propDecorators: { verificationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "verificationId", required: true }] }], onSuccess: [{
+                type: Output
+            }] } });
+/**
+ * A form component for SMS multi-factor authentication assertion.
+ *
+ * Manages the flow between requesting and verifying SMS codes for MFA.
+ */
 class SmsMultiFactorAssertionFormComponent {
+    /** The multi-factor info hint containing phone number details. */
     hint = input.required(...(ngDevMode ? [{ debugName: "hint" }] : []));
-    onSuccess = output();
+    /** Event emitter for successful MFA assertion. */
+    onSuccess = new EventEmitter();
     verification = signal(null, ...(ngDevMode ? [{ debugName: "verification" }] : []));
     handlePhoneSubmit(verificationId) {
         this.verification.set({ verificationId });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorAssertionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SmsMultiFactorAssertionFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-assertion-form", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSuccess: "onSuccess" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SmsMultiFactorAssertionFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-assertion-form", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSuccess: "onSuccess" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <div class="fui-content">
       @if (verification()) {
         <fui-sms-multi-factor-assertion-verify-form
           [verificationId]="verification()!.verificationId"
-          (onSuccess)="onSuccess.emit()"
+          (onSuccess)="onSuccess.emit($event)"
         />
       } @else {
         <fui-sms-multi-factor-assertion-phone-form [hint]="hint()" (onSubmit)="handlePhoneSubmit($event)" />
@@ -982,12 +1231,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-sms-multi-factor-assertion-form",
                     standalone: true,
                     imports: [CommonModule, SmsMultiFactorAssertionPhoneFormComponent, SmsMultiFactorAssertionVerifyFormComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <div class="fui-content">
       @if (verification()) {
         <fui-sms-multi-factor-assertion-verify-form
           [verificationId]="verification()!.verificationId"
-          (onSuccess)="onSuccess.emit()"
+          (onSuccess)="onSuccess.emit($event)"
         />
       } @else {
         <fui-sms-multi-factor-assertion-phone-form [hint]="hint()" (onSubmit)="handlePhoneSubmit($event)" />
@@ -995,7 +1247,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], onSuccess: [{ type: i0.Output, args: ["onSuccess"] }] } });
+        }], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], onSuccess: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -1011,14 +1265,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for TOTP multi-factor authentication assertion.
+ *
+ * Allows users to enter a TOTP code from their authenticator app.
+ */
 class TotpMultiFactorAssertionFormComponent {
     ui = injectUI();
     formSchema = injectMultiFactorTotpAuthVerifyFormSchema();
+    /** The multi-factor info hint containing TOTP details. */
     hint = input.required(...(ngDevMode ? [{ debugName: "hint" }] : []));
-    onSuccess = output();
+    /** Event emitter for successful MFA assertion. */
+    onSuccess = new EventEmitter();
     verificationCodeLabel = injectTranslation("labels", "verificationCode");
     verifyCodeLabel = injectTranslation("labels", "verifyCode");
-    unknownErrorLabel = injectTranslation("errors", "unknownError");
+    enterVerificationCodePrompt = injectTranslation("prompts", "enterVerificationCode");
     form = injectForm({
         defaultValues: {
             verificationCode: "",
@@ -1030,19 +1291,15 @@ class TotpMultiFactorAssertionFormComponent {
             this.form.update({
                 validators: {
                     onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async ({ value }) => {
                         try {
                             const assertion = TotpMultiFactorGenerator.assertionForSignIn(this.hint().uid, value.verificationCode);
-                            await signInWithMultiFactorAssertion(this.ui(), assertion);
-                            this.onSuccess.emit();
+                            const result = await signInWithMultiFactorAssertion(this.ui(), assertion);
+                            this.onSuccess.emit(result);
                             return;
                         }
                         catch (error) {
-                            if (error instanceof FirebaseUIError) {
-                                return error.message;
-                            }
-                            return this.unknownErrorLabel();
+                            return error instanceof FirebaseUIError ? error.message : String(error);
                         }
                     },
                 },
@@ -1055,14 +1312,15 @@ class TotpMultiFactorAssertionFormComponent {
         this.form.handleSubmit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorAssertionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: TotpMultiFactorAssertionFormComponent, isStandalone: true, selector: "fui-totp-multi-factor-assertion-form", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSuccess: "onSuccess" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: TotpMultiFactorAssertionFormComponent, isStandalone: true, selector: "fui-totp-multi-factor-assertion-form", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSuccess: "onSuccess" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
         <fui-form-input
           name="verificationCode"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ verificationCodeLabel() }}"
+          [label]="verificationCodeLabel()"
+          [description]="enterVerificationCodePrompt()"
           type="text"
           placeholder="123456"
           maxlength="6"
@@ -1075,13 +1333,16 @@ class TotpMultiFactorAssertionFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorAssertionFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-totp-multi-factor-assertion-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -1097,7 +1358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           name="verificationCode"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ verificationCodeLabel() }}"
+          [label]="verificationCodeLabel()"
+          [description]="enterVerificationCodePrompt()"
           type="text"
           placeholder="123456"
           maxlength="6"
@@ -1112,7 +1374,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </form>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], onSuccess: [{ type: i0.Output, args: ["onSuccess"] }] } });
+        }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }], onSuccess: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -1129,8 +1393,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for multi-factor authentication assertion.
+ *
+ * Allows users to select and complete MFA verification using SMS or TOTP.
+ */
 class MultiFactorAuthAssertionFormComponent {
     ui = injectUI();
+    constructor() {
+        effect((onCleanup) => {
+            // Cleanup the multi-factor resolver when the component unmounts.
+            onCleanup(() => {
+                this.ui().setMultiFactorResolver();
+            });
+        });
+    }
+    /** Event emitter for successful MFA assertion. */
+    onSuccess = new EventEmitter();
     resolver = computed(() => {
         const resolver = this.ui().multiFactorResolver;
         if (!resolver) {
@@ -1139,30 +1418,31 @@ class MultiFactorAuthAssertionFormComponent {
         return resolver;
     }, ...(ngDevMode ? [{ debugName: "resolver" }] : []));
     selectedHint = signal(this.resolver().hints.length === 1 ? this.resolver().hints[0] : undefined, ...(ngDevMode ? [{ debugName: "selectedHint" }] : []));
-    phoneFactorId = computed(() => PhoneMultiFactorGenerator.FACTOR_ID, ...(ngDevMode ? [{ debugName: "phoneFactorId" }] : []));
-    totpFactorId = computed(() => TotpMultiFactorGenerator.FACTOR_ID, ...(ngDevMode ? [{ debugName: "totpFactorId" }] : []));
+    phoneFactorId = PhoneMultiFactorGenerator.FACTOR_ID;
+    totpFactorId = TotpMultiFactorGenerator.FACTOR_ID;
     smsVerificationLabel = injectTranslation("labels", "mfaSmsVerification");
     totpVerificationLabel = injectTranslation("labels", "mfaTotpVerification");
+    mfaAssertionFactorPrompt = injectTranslation("prompts", "mfaAssertionFactorPrompt");
     selectHint(hint) {
         this.selectedHint.set(hint);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthAssertionFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MultiFactorAuthAssertionFormComponent, isStandalone: true, selector: "fui-multi-factor-auth-assertion-form", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MultiFactorAuthAssertionFormComponent, isStandalone: true, selector: "fui-multi-factor-auth-assertion-form", outputs: { onSuccess: "onSuccess" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <div class="fui-content">
       @if (selectedHint()) {
-        @if (selectedHint()!.factorId === phoneFactorId()) {
-          <fui-sms-multi-factor-assertion-form [hint]="selectedHint()!" />
-        } @else if (selectedHint()!.factorId === totpFactorId()) {
-          <fui-totp-multi-factor-assertion-form [hint]="selectedHint()!" />
+        @if (selectedHint()!.factorId === phoneFactorId) {
+          <fui-sms-multi-factor-assertion-form [hint]="selectedHint()!" (onSuccess)="onSuccess.emit($event)" />
+        } @else if (selectedHint()!.factorId === totpFactorId) {
+          <fui-totp-multi-factor-assertion-form [hint]="selectedHint()!" (onSuccess)="onSuccess.emit($event)" />
         }
       } @else {
-        <p>TODO: Select a multi-factor authentication method</p>
+        <p>{{ mfaAssertionFactorPrompt() }}</p>
         @for (hint of resolver().hints; track hint.factorId) {
-          @if (hint.factorId === totpFactorId()) {
+          @if (hint.factorId === totpFactorId) {
             <button fui-button (click)="selectHint(hint)">
               {{ totpVerificationLabel() }}
             </button>
-          } @else if (hint.factorId === phoneFactorId()) {
+          } @else if (hint.factorId === phoneFactorId) {
             <button fui-button (click)="selectHint(hint)">
               {{ smsVerificationLabel() }}
             </button>
@@ -1178,22 +1458,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-multi-factor-auth-assertion-form",
                     standalone: true,
                     imports: [CommonModule, SmsMultiFactorAssertionFormComponent, TotpMultiFactorAssertionFormComponent, ButtonComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <div class="fui-content">
       @if (selectedHint()) {
-        @if (selectedHint()!.factorId === phoneFactorId()) {
-          <fui-sms-multi-factor-assertion-form [hint]="selectedHint()!" />
-        } @else if (selectedHint()!.factorId === totpFactorId()) {
-          <fui-totp-multi-factor-assertion-form [hint]="selectedHint()!" />
+        @if (selectedHint()!.factorId === phoneFactorId) {
+          <fui-sms-multi-factor-assertion-form [hint]="selectedHint()!" (onSuccess)="onSuccess.emit($event)" />
+        } @else if (selectedHint()!.factorId === totpFactorId) {
+          <fui-totp-multi-factor-assertion-form [hint]="selectedHint()!" (onSuccess)="onSuccess.emit($event)" />
         }
       } @else {
-        <p>TODO: Select a multi-factor authentication method</p>
+        <p>{{ mfaAssertionFactorPrompt() }}</p>
         @for (hint of resolver().hints; track hint.factorId) {
-          @if (hint.factorId === totpFactorId()) {
+          @if (hint.factorId === totpFactorId) {
             <button fui-button (click)="selectHint(hint)">
               {{ totpVerificationLabel() }}
             </button>
-          } @else if (hint.factorId === phoneFactorId()) {
+          } @else if (hint.factorId === phoneFactorId) {
             <button fui-button (click)="selectHint(hint)">
               {{ smsVerificationLabel() }}
             </button>
@@ -1203,7 +1486,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </div>
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { onSuccess: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -1220,9 +1505,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A country selector component for phone number input.
+ *
+ * Displays a dropdown with country flags, dial codes, and names for selecting a country.
+ */
 class CountrySelectorComponent {
     countries = injectCountries();
     defaultCountry = injectDefaultCountry();
+    /** The selected country code (two-way binding). */
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     selected = computed(() => {
         if (!this.value()) {
@@ -1237,7 +1528,7 @@ class CountrySelectorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CountrySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CountrySelectorComponent, isStandalone: true, selector: "fui-country-selector", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CountrySelectorComponent, isStandalone: true, selector: "fui-country-selector", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <div class="fui-country-selector">
       <div class="fui-country-selector__wrapper">
         <span class="fui-country-selector__flag">{{ selected().emoji }}</span>
@@ -1248,7 +1539,7 @@ class CountrySelectorComponent {
             [ngModel]="selected().code"
             (ngModelChange)="handleCountryChange($event)"
           >
-            @for (country of countries(); track country.code) {
+            @for (country of countries(); track $index) {
               <option [value]="country.code">{{ country.dialCode }} ({{ country.name }})</option>
             }
           </select>
@@ -1263,6 +1554,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-country-selector",
                     standalone: true,
                     imports: [CommonModule, FormsModule],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <div class="fui-country-selector">
       <div class="fui-country-selector__wrapper">
@@ -1274,7 +1568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             [ngModel]="selected().code"
             (ngModelChange)="handleCountryChange($event)"
           >
-            @for (country of countries(); track country.code) {
+            @for (country of countries(); track $index) {
               <option [value]="country.code">{{ country.dialCode }} ({{ country.name }})</option>
             }
           </select>
@@ -1300,42 +1594,712 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class PhoneNumberFormComponent {
+/**
+ * A form component for SMS multi-factor authentication enrollment.
+ *
+ * Manages the flow between phone number entry and verification code entry for MFA enrollment.
+ */
+class SmsMultiFactorEnrollmentFormComponent {
     ui = injectUI();
-    formSchema = injectPhoneAuthFormSchema();
-    onSubmit = output();
-    country = signal(countryData[0].code, ...(ngDevMode ? [{ debugName: "country" }] : []));
+    phoneFormSchema = injectMultiFactorPhoneAuthNumberFormSchema();
+    verificationFormSchema = injectMultiFactorPhoneAuthVerifyFormSchema();
+    defaultCountry = injectDefaultCountry();
+    verificationId = signal(null, ...(ngDevMode ? [{ debugName: "verificationId" }] : []));
+    country = signal(this.defaultCountry().code, ...(ngDevMode ? [{ debugName: "country" }] : []));
+    displayName = signal("", ...(ngDevMode ? [{ debugName: "displayName" }] : []));
+    displayNameLabel = injectTranslation("labels", "displayName");
     phoneNumberLabel = injectTranslation("labels", "phoneNumber");
     sendCodeLabel = injectTranslation("labels", "sendCode");
-    unknownErrorLabel = injectTranslation("errors", "unknownError");
+    verificationCodeLabel = injectTranslation("labels", "verificationCode");
+    verifyCodeLabel = injectTranslation("labels", "verifyCode");
+    smsVerificationPrompt = injectTranslation("prompts", "smsVerificationPrompt");
+    /** Event emitter fired when MFA enrollment is completed. */
+    onEnrollment = new EventEmitter();
     recaptchaContainer = viewChild.required("recaptchaContainer");
     recaptchaVerifier = injectRecaptchaVerifier(() => this.recaptchaContainer());
-    form = injectForm({
+    phoneForm = injectForm({
         defaultValues: {
+            displayName: "",
             phoneNumber: "",
         },
     });
-    state = injectStore(this.form, (state) => state);
+    verificationForm = injectForm({
+        defaultValues: {
+            verificationCode: "",
+        },
+    });
+    phoneState = injectStore(this.phoneForm, (state) => state);
+    verificationState = injectStore(this.verificationForm, (state) => state);
     constructor() {
+        if (!this.ui().auth.currentUser) {
+            throw new Error("User must be authenticated to enroll with multi-factor authentication");
+        }
         effect(() => {
-            this.form.update({
+            this.phoneForm.update({
                 validators: {
-                    onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
+                    onBlur: this.phoneFormSchema(),
+                    onSubmit: this.phoneFormSchema(),
                     onSubmitAsync: async ({ value }) => {
-                        const selectedCountry = countryData.find((c) => c.code === this.country());
-                        const formattedNumber = formatPhoneNumber(value.phoneNumber, selectedCountry);
                         try {
                             const verifier = this.recaptchaVerifier();
                             if (!verifier) {
-                                return this.unknownErrorLabel();
+                                return "Recaptcha verifier not available";
                             }
-                            const verificationId = await verifyPhoneNumber(this.ui(), formattedNumber, verifier);
-                            this.onSubmit.emit({ verificationId, phoneNumber: formattedNumber });
+                            const currentUser = this.ui().auth.currentUser;
+                            const mfaUser = multiFactor(currentUser);
+                            const formattedPhoneNumber = formatPhoneNumber(value.phoneNumber, this.defaultCountry());
+                            const verificationId = await verifyPhoneNumber(this.ui(), formattedPhoneNumber, verifier, mfaUser);
+                            this.displayName.set(value.displayName);
+                            this.verificationId.set(verificationId);
                             return;
                         }
                         catch (error) {
-                            if (error instanceof FirebaseUIError) {
+                            return error instanceof FirebaseUIError ? error.message : String(error);
+                        }
+                    },
+                },
+            });
+        });
+        effect(() => {
+            this.verificationForm.update({
+                validators: {
+                    onBlur: this.verificationFormSchema(),
+                    onSubmit: this.verificationFormSchema(),
+                    onSubmitAsync: async ({ value }) => {
+                        try {
+                            const credential = PhoneAuthProvider.credential(this.verificationId(), value.verificationCode);
+                            const assertion = PhoneMultiFactorGenerator.assertion(credential);
+                            await enrollWithMultiFactorAssertion(this.ui(), assertion, this.displayName());
+                            this.onEnrollment.emit();
+                            return;
+                        }
+                        catch (error) {
+                            return error instanceof FirebaseUIError ? error.message : String(error);
+                        }
+                    },
+                },
+            });
+        });
+    }
+    async handlePhoneSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.phoneForm.handleSubmit();
+    }
+    async handleVerificationSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.verificationForm.handleSubmit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorEnrollmentFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SmsMultiFactorEnrollmentFormComponent, isStandalone: true, selector: "fui-sms-multi-factor-enrollment-form", outputs: { onEnrollment: "onEnrollment" }, host: { styleAttribute: "display: block;" }, viewQueries: [{ propertyName: "recaptchaContainer", first: true, predicate: ["recaptchaContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="fui-form-container">
+      @if (!verificationId()) {
+        <form (submit)="handlePhoneSubmit($event)" class="fui-form">
+          <fieldset>
+            <fui-form-input
+              name="displayName"
+              tanstack-app-field
+              [tanstackField]="phoneForm"
+              [label]="displayNameLabel()"
+              type="text"
+            />
+          </fieldset>
+          <fieldset>
+            <fui-form-input
+              name="phoneNumber"
+              tanstack-app-field
+              [tanstackField]="phoneForm"
+              [label]="phoneNumberLabel()"
+              type="tel"
+            >
+              <fui-country-selector [(value)]="country" ngProjectAs="input-before" />
+            </fui-form-input>
+          </fieldset>
+          <fieldset>
+            <div class="fui-recaptcha-container" #recaptchaContainer></div>
+          </fieldset>
+          <fieldset>
+            <fui-form-submit [state]="phoneState()">
+              {{ sendCodeLabel() }}
+            </fui-form-submit>
+            <fui-form-error-message [state]="phoneState()" />
+          </fieldset>
+        </form>
+      } @else {
+        <form (submit)="handleVerificationSubmit($event)" class="fui-form">
+          <fieldset>
+            <fui-form-input
+              name="verificationCode"
+              tanstack-app-field
+              [tanstackField]="verificationForm"
+              [label]="verificationCodeLabel()"
+              [description]="smsVerificationPrompt()"
+              type="text"
+            ></fui-form-input>
+          </fieldset>
+          <fieldset>
+            <fui-form-submit [state]="verificationState()">
+              {{ verifyCodeLabel() }}
+            </fui-form-submit>
+            <fui-form-error-message [state]="verificationState()" />
+          </fieldset>
+        </form>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: CountrySelectorComponent, selector: "fui-country-selector", inputs: ["value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SmsMultiFactorEnrollmentFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-sms-multi-factor-enrollment-form",
+                    standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
+                    imports: [
+                        CommonModule,
+                        TanStackField,
+                        TanStackAppField,
+                        FormInputComponent,
+                        FormSubmitComponent,
+                        FormErrorMessageComponent,
+                        CountrySelectorComponent,
+                    ],
+                    template: `
+    <div class="fui-form-container">
+      @if (!verificationId()) {
+        <form (submit)="handlePhoneSubmit($event)" class="fui-form">
+          <fieldset>
+            <fui-form-input
+              name="displayName"
+              tanstack-app-field
+              [tanstackField]="phoneForm"
+              [label]="displayNameLabel()"
+              type="text"
+            />
+          </fieldset>
+          <fieldset>
+            <fui-form-input
+              name="phoneNumber"
+              tanstack-app-field
+              [tanstackField]="phoneForm"
+              [label]="phoneNumberLabel()"
+              type="tel"
+            >
+              <fui-country-selector [(value)]="country" ngProjectAs="input-before" />
+            </fui-form-input>
+          </fieldset>
+          <fieldset>
+            <div class="fui-recaptcha-container" #recaptchaContainer></div>
+          </fieldset>
+          <fieldset>
+            <fui-form-submit [state]="phoneState()">
+              {{ sendCodeLabel() }}
+            </fui-form-submit>
+            <fui-form-error-message [state]="phoneState()" />
+          </fieldset>
+        </form>
+      } @else {
+        <form (submit)="handleVerificationSubmit($event)" class="fui-form">
+          <fieldset>
+            <fui-form-input
+              name="verificationCode"
+              tanstack-app-field
+              [tanstackField]="verificationForm"
+              [label]="verificationCodeLabel()"
+              [description]="smsVerificationPrompt()"
+              type="text"
+            ></fui-form-input>
+          </fieldset>
+          <fieldset>
+            <fui-form-submit [state]="verificationState()">
+              {{ verifyCodeLabel() }}
+            </fui-form-submit>
+            <fui-form-error-message [state]="verificationState()" />
+          </fieldset>
+        </form>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onEnrollment: [{
+                type: Output
+            }], recaptchaContainer: [{ type: i0.ViewChild, args: ["recaptchaContainer", { isSignal: true }] }] } });
+
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A form component for generating a TOTP secret and display name during MFA enrollment.
+ */
+class TotpMultiFactorSecretGenerationFormComponent {
+    ui = injectUI();
+    formSchema = injectMultiFactorTotpAuthNumberFormSchema();
+    /** Event emitter fired when TOTP secret is generated. */
+    onSubmit = new EventEmitter();
+    displayNameLabel = injectTranslation("labels", "displayName");
+    generateQrCodeLabel = injectTranslation("labels", "generateQrCode");
+    form = injectForm({
+        defaultValues: {
+            displayName: "",
+        },
+    });
+    state = injectStore(this.form, (state) => state);
+    constructor() {
+        effect(() => {
+            this.form.update({
+                validators: {
+                    onBlur: this.formSchema(),
+                    onSubmit: this.formSchema(),
+                    onSubmitAsync: async ({ value }) => {
+                        try {
+                            const secret = await generateTotpSecret(this.ui());
+                            this.onSubmit.emit({ secret, displayName: value.displayName });
+                            return;
+                        }
+                        catch (error) {
+                            return error instanceof FirebaseUIError ? error.message : String(error);
+                        }
+                    },
+                },
+            });
+        });
+    }
+    async handleSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.form.handleSubmit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorSecretGenerationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: TotpMultiFactorSecretGenerationFormComponent, isStandalone: true, selector: "fui-totp-multi-factor-secret-generation-form", outputs: { onSubmit: "onSubmit" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <form (submit)="handleSubmit($event)" class="fui-form">
+      <fieldset>
+        <fui-form-input
+          name="displayName"
+          tanstack-app-field
+          [tanstackField]="form"
+          [label]="displayNameLabel()"
+          type="text"
+        ></fui-form-input>
+      </fieldset>
+      <fieldset>
+        <fui-form-submit [state]="state()">
+          {{ generateQrCodeLabel() }}
+        </fui-form-submit>
+        <fui-form-error-message [state]="state()" />
+      </fieldset>
+    </form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorSecretGenerationFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-totp-multi-factor-secret-generation-form",
+                    standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
+                    imports: [
+                        CommonModule,
+                        TanStackField,
+                        TanStackAppField,
+                        FormInputComponent,
+                        FormSubmitComponent,
+                        FormErrorMessageComponent,
+                    ],
+                    template: `
+    <form (submit)="handleSubmit($event)" class="fui-form">
+      <fieldset>
+        <fui-form-input
+          name="displayName"
+          tanstack-app-field
+          [tanstackField]="form"
+          [label]="displayNameLabel()"
+          type="text"
+        ></fui-form-input>
+      </fieldset>
+      <fieldset>
+        <fui-form-submit [state]="state()">
+          {{ generateQrCodeLabel() }}
+        </fui-form-submit>
+        <fui-form-error-message [state]="state()" />
+      </fieldset>
+    </form>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onSubmit: [{
+                type: Output
+            }] } });
+/**
+ * A form component for verifying TOTP code during MFA enrollment.
+ *
+ * Displays a QR code and allows users to verify their authenticator app setup.
+ */
+class TotpMultiFactorVerificationFormComponent {
+    ui = injectUI();
+    formSchema = injectMultiFactorTotpAuthVerifyFormSchema();
+    /** The TOTP secret generated in the previous step. */
+    secret = input.required(...(ngDevMode ? [{ debugName: "secret" }] : []));
+    /** The display name for the TOTP factor. */
+    displayName = input.required(...(ngDevMode ? [{ debugName: "displayName" }] : []));
+    /** Event emitter fired when MFA enrollment is completed. */
+    onEnrollment = new EventEmitter();
+    verificationCodeLabel = injectTranslation("labels", "verificationCode");
+    verifyCodeLabel = injectTranslation("labels", "verifyCode");
+    mfaTotpQrCodePrompt = injectTranslation("prompts", "mfaTotpQrCodePrompt");
+    mfaTotpEnrollmentVerificationPrompt = injectTranslation("prompts", "mfaTotpEnrollmentVerificationPrompt");
+    form = injectForm({
+        defaultValues: {
+            verificationCode: "",
+        },
+    });
+    state = injectStore(this.form, (state) => state);
+    qrCodeDataUrl = computed(() => {
+        return generateTotpQrCode(this.ui(), this.secret(), this.displayName());
+    }, ...(ngDevMode ? [{ debugName: "qrCodeDataUrl" }] : []));
+    constructor() {
+        effect(() => {
+            this.form.update({
+                validators: {
+                    onBlur: this.formSchema(),
+                    onSubmit: this.formSchema(),
+                    onSubmitAsync: async ({ value }) => {
+                        try {
+                            const assertion = TotpMultiFactorGenerator.assertionForEnrollment(this.secret(), value.verificationCode);
+                            await enrollWithMultiFactorAssertion(this.ui(), assertion, this.displayName());
+                            this.onEnrollment.emit();
+                            return;
+                        }
+                        catch (error) {
+                            return error instanceof FirebaseUIError ? error.message : String(error);
+                        }
+                    },
+                },
+            });
+        });
+    }
+    async handleSubmit(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.form.handleSubmit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorVerificationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: TotpMultiFactorVerificationFormComponent, isStandalone: true, selector: "fui-totp-multi-factor-verification-form", inputs: { secret: { classPropertyName: "secret", publicName: "secret", isSignal: true, isRequired: true, transformFunction: null }, displayName: { classPropertyName: "displayName", publicName: "displayName", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onEnrollment: "onEnrollment" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <div class="fui-qr-code-container">
+      <img [src]="qrCodeDataUrl()" alt="TOTP QR Code" />
+      <code>{{ secret().secretKey.toString() }}</code>
+      <p>{{ mfaTotpQrCodePrompt() }}</p>
+    </div>
+    <form (submit)="handleSubmit($event)" class="fui-form">
+      <fieldset>
+        <fui-form-input
+          name="verificationCode"
+          tanstack-app-field
+          [tanstackField]="form"
+          [label]="verificationCodeLabel()"
+          [description]="mfaTotpEnrollmentVerificationPrompt()"
+          type="text"
+        ></fui-form-input>
+      </fieldset>
+      <fieldset>
+        <fui-form-submit [state]="state()">
+          {{ verifyCodeLabel() }}
+        </fui-form-submit>
+        <fui-form-error-message [state]="state()" />
+      </fieldset>
+    </form>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorVerificationFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-totp-multi-factor-verification-form",
+                    standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
+                    imports: [
+                        CommonModule,
+                        TanStackField,
+                        TanStackAppField,
+                        FormInputComponent,
+                        FormSubmitComponent,
+                        FormErrorMessageComponent,
+                    ],
+                    template: `
+    <div class="fui-qr-code-container">
+      <img [src]="qrCodeDataUrl()" alt="TOTP QR Code" />
+      <code>{{ secret().secretKey.toString() }}</code>
+      <p>{{ mfaTotpQrCodePrompt() }}</p>
+    </div>
+    <form (submit)="handleSubmit($event)" class="fui-form">
+      <fieldset>
+        <fui-form-input
+          name="verificationCode"
+          tanstack-app-field
+          [tanstackField]="form"
+          [label]="verificationCodeLabel()"
+          [description]="mfaTotpEnrollmentVerificationPrompt()"
+          type="text"
+        ></fui-form-input>
+      </fieldset>
+      <fieldset>
+        <fui-form-submit [state]="state()">
+          {{ verifyCodeLabel() }}
+        </fui-form-submit>
+        <fui-form-error-message [state]="state()" />
+      </fieldset>
+    </form>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { secret: [{ type: i0.Input, args: [{ isSignal: true, alias: "secret", required: true }] }], displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayName", required: true }] }], onEnrollment: [{
+                type: Output
+            }] } });
+/**
+ * A form component for TOTP multi-factor authentication enrollment.
+ *
+ * Manages the flow between secret generation and verification for TOTP MFA enrollment.
+ */
+class TotpMultiFactorEnrollmentFormComponent {
+    ui = injectUI();
+    enrollment = signal(null, ...(ngDevMode ? [{ debugName: "enrollment" }] : []));
+    /** Event emitter fired when MFA enrollment is completed. */
+    onEnrollment = new EventEmitter();
+    constructor() {
+        if (!this.ui().auth.currentUser) {
+            throw new Error("User must be authenticated to enroll with multi-factor authentication");
+        }
+    }
+    handleSecretGeneration(data) {
+        this.enrollment.set(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorEnrollmentFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: TotpMultiFactorEnrollmentFormComponent, isStandalone: true, selector: "fui-totp-multi-factor-enrollment-form", outputs: { onEnrollment: "onEnrollment" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <div class="fui-form-container">
+      @if (!enrollment()) {
+        <fui-totp-multi-factor-secret-generation-form (onSubmit)="handleSecretGeneration($event)" />
+      } @else {
+        <fui-totp-multi-factor-verification-form
+          [secret]="enrollment()!.secret"
+          [displayName]="enrollment()!.displayName"
+          (onEnrollment)="onEnrollment.emit()"
+        />
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TotpMultiFactorSecretGenerationFormComponent, selector: "fui-totp-multi-factor-secret-generation-form", outputs: ["onSubmit"] }, { kind: "component", type: TotpMultiFactorVerificationFormComponent, selector: "fui-totp-multi-factor-verification-form", inputs: ["secret", "displayName"], outputs: ["onEnrollment"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TotpMultiFactorEnrollmentFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-totp-multi-factor-enrollment-form",
+                    standalone: true,
+                    imports: [CommonModule, TotpMultiFactorSecretGenerationFormComponent, TotpMultiFactorVerificationFormComponent],
+                    host: {
+                        style: "display: block;",
+                    },
+                    template: `
+    <div class="fui-form-container">
+      @if (!enrollment()) {
+        <fui-totp-multi-factor-secret-generation-form (onSubmit)="handleSecretGeneration($event)" />
+      } @else {
+        <fui-totp-multi-factor-verification-form
+          [secret]="enrollment()!.secret"
+          [displayName]="enrollment()!.displayName"
+          (onEnrollment)="onEnrollment.emit()"
+        />
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onEnrollment: [{
+                type: Output
+            }] } });
+
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A form component for multi-factor authentication enrollment.
+ *
+ * Allows users to enroll in MFA using SMS or TOTP methods.
+ */
+class MultiFactorAuthEnrollmentFormComponent {
+    /** The available MFA factor types for enrollment. */
+    hints = input([FactorId.TOTP, FactorId.PHONE], ...(ngDevMode ? [{ debugName: "hints" }] : []));
+    /** Event emitter fired when MFA enrollment is completed. */
+    onEnrollment = new EventEmitter();
+    selectedHint = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedHint" }] : []));
+    phoneFactorId = FactorId.PHONE;
+    totpFactorId = FactorId.TOTP;
+    smsVerificationLabel = injectTranslation("labels", "mfaSmsVerification");
+    totpVerificationLabel = injectTranslation("labels", "mfaTotpVerification");
+    validatedHint = computed(() => {
+        const hint = this.selectedHint();
+        if (hint && hint !== this.phoneFactorId && hint !== this.totpFactorId) {
+            throw new Error(`Unknown multi-factor enrollment type: ${hint}`);
+        }
+        return hint;
+    }, ...(ngDevMode ? [{ debugName: "validatedHint" }] : []));
+    ngOnInit() {
+        const hints = this.hints();
+        if (hints.length === 0) {
+            throw new Error("MultiFactorAuthEnrollmentForm must have at least one hint");
+        }
+        // Auto-select single hint after component initialization
+        if (hints.length === 1) {
+            this.selectedHint.set(hints[0]);
+        }
+    }
+    selectHint(hint) {
+        this.selectedHint.set(hint);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthEnrollmentFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: MultiFactorAuthEnrollmentFormComponent, isStandalone: true, selector: "fui-multi-factor-auth-enrollment-form", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEnrollment: "onEnrollment" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <div class="fui-content">
+      @if (validatedHint()) {
+        @if (validatedHint() === phoneFactorId) {
+          <fui-sms-multi-factor-enrollment-form (onEnrollment)="onEnrollment.emit()" />
+        } @else if (validatedHint() === totpFactorId) {
+          <fui-totp-multi-factor-enrollment-form (onEnrollment)="onEnrollment.emit()" />
+        }
+      } @else {
+        @for (hint of hints(); track hint) {
+          @if (hint === totpFactorId) {
+            <button fui-button [variant]="'secondary'" (click)="selectHint(hint)">
+              {{ totpVerificationLabel() }}
+            </button>
+          } @else if (hint === phoneFactorId) {
+            <button fui-button [variant]="'secondary'" (click)="selectHint(hint)">
+              {{ smsVerificationLabel() }}
+            </button>
+          }
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SmsMultiFactorEnrollmentFormComponent, selector: "fui-sms-multi-factor-enrollment-form", outputs: ["onEnrollment"] }, { kind: "component", type: TotpMultiFactorEnrollmentFormComponent, selector: "fui-totp-multi-factor-enrollment-form", outputs: ["onEnrollment"] }, { kind: "component", type: ButtonComponent, selector: "button[fui-button]", inputs: ["variant"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthEnrollmentFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-multi-factor-auth-enrollment-form",
+                    standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
+                    imports: [
+                        CommonModule,
+                        SmsMultiFactorEnrollmentFormComponent,
+                        TotpMultiFactorEnrollmentFormComponent,
+                        ButtonComponent,
+                    ],
+                    template: `
+    <div class="fui-content">
+      @if (validatedHint()) {
+        @if (validatedHint() === phoneFactorId) {
+          <fui-sms-multi-factor-enrollment-form (onEnrollment)="onEnrollment.emit()" />
+        } @else if (validatedHint() === totpFactorId) {
+          <fui-totp-multi-factor-enrollment-form (onEnrollment)="onEnrollment.emit()" />
+        }
+      } @else {
+        @for (hint of hints(); track hint) {
+          @if (hint === totpFactorId) {
+            <button fui-button [variant]="'secondary'" (click)="selectHint(hint)">
+              {{ totpVerificationLabel() }}
+            </button>
+          } @else if (hint === phoneFactorId) {
+            <button fui-button [variant]="'secondary'" (click)="selectHint(hint)">
+              {{ smsVerificationLabel() }}
+            </button>
+          }
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], onEnrollment: [{
+                type: Output
+            }] } });
+
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A form component for entering a phone number and requesting a verification code.
+ */
+class PhoneNumberFormComponent {
+    ui = injectUI();
+    formSchema = injectPhoneAuthFormSchema();
+    /** Event emitter fired when phone number is verified and verification ID is received. */
+    onSubmit = new EventEmitter();
+    /** The selected country code for phone number formatting. */
+    country = signal(countryData[0].code, ...(ngDevMode ? [{ debugName: "country" }] : []));
+    phoneNumberLabel = injectTranslation("labels", "phoneNumber");
+    sendCodeLabel = injectTranslation("labels", "sendCode");
+    unknownErrorLabel = injectTranslation("errors", "unknownError");
+    recaptchaContainer = viewChild.required("recaptchaContainer");
+    recaptchaVerifier = injectRecaptchaVerifier(() => this.recaptchaContainer());
+    form = injectForm({
+        defaultValues: {
+            phoneNumber: "",
+        },
+    });
+    state = injectStore(this.form, (state) => state);
+    constructor() {
+        effect(() => {
+            this.form.update({
+                validators: {
+                    onBlur: this.formSchema(),
+                    onSubmitAsync: async ({ value }) => {
+                        const selectedCountry = countryData.find((c) => c.code === this.country());
+                        const formattedNumber = formatPhoneNumber(value.phoneNumber, selectedCountry);
+                        try {
+                            const verifier = this.recaptchaVerifier();
+                            if (!verifier) {
+                                return this.unknownErrorLabel();
+                            }
+                            const verificationId = await verifyPhoneNumber(this.ui(), formattedNumber, verifier);
+                            this.onSubmit.emit({ verificationId, phoneNumber: formattedNumber });
+                            return;
+                        }
+                        catch (error) {
+                            if (error instanceof FirebaseUIError) {
                                 return error.message;
                             }
                             return this.unknownErrorLabel();
@@ -1359,16 +2323,18 @@ class PhoneNumberFormComponent {
         this.form.handleSubmit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PhoneNumberFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.7", type: PhoneNumberFormComponent, isStandalone: true, selector: "fui-phone-number-form", outputs: { onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "recaptchaContainer", first: true, predicate: ["recaptchaContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.7", type: PhoneNumberFormComponent, isStandalone: true, selector: "fui-phone-number-form", outputs: { onSubmit: "onSubmit" }, host: { styleAttribute: "display: block;" }, viewQueries: [{ propertyName: "recaptchaContainer", first: true, predicate: ["recaptchaContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
-        <fui-country-selector [(value)]="country"></fui-country-selector>
         <fui-form-input
           name="phoneNumber"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ phoneNumberLabel() }}"
-        ></fui-form-input>
+          [label]="phoneNumberLabel()"
+          type="tel"
+        >
+          <fui-country-selector [(value)]="country" ngProjectAs="input-before" />
+        </fui-form-input>
       </fieldset>
       <fieldset>
         <div class="fui-recaptcha-container" #recaptchaContainer></div>
@@ -1381,13 +2347,16 @@ class PhoneNumberFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: CountrySelectorComponent, selector: "fui-country-selector", inputs: ["value"], outputs: ["valueChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: CountrySelectorComponent, selector: "fui-country-selector", inputs: ["value"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PhoneNumberFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-phone-number-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -1401,13 +2370,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
-        <fui-country-selector [(value)]="country"></fui-country-selector>
         <fui-form-input
           name="phoneNumber"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ phoneNumberLabel() }}"
-        ></fui-form-input>
+          [label]="phoneNumberLabel()"
+          type="tel"
+        >
+          <fui-country-selector [(value)]="country" ngProjectAs="input-before" />
+        </fui-form-input>
       </fieldset>
       <fieldset>
         <div class="fui-recaptcha-container" #recaptchaContainer></div>
@@ -1422,14 +2393,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </form>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], recaptchaContainer: [{ type: i0.ViewChild, args: ["recaptchaContainer", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { onSubmit: [{
+                type: Output
+            }], recaptchaContainer: [{ type: i0.ViewChild, args: ["recaptchaContainer", { isSignal: true }] }] } });
+/**
+ * A form component for entering and verifying the SMS verification code.
+ */
 class VerificationFormComponent {
     ui = injectUI();
     formSchema = injectPhoneAuthVerifyFormSchema();
+    /** The verification ID received from the phone number form. */
     verificationId = input.required(...(ngDevMode ? [{ debugName: "verificationId" }] : []));
-    signIn = output();
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     verificationCodeLabel = injectTranslation("labels", "verificationCode");
     verifyCodeLabel = injectTranslation("labels", "verifyCode");
+    smsVerificationPrompt = injectTranslation("prompts", "smsVerificationPrompt");
     unknownErrorLabel = injectTranslation("errors", "unknownError");
     form = injectForm({
         defaultValues: {
@@ -1446,7 +2425,6 @@ class VerificationFormComponent {
             this.form.update({
                 validators: {
                     onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async ({ value }) => {
                         try {
                             const credential = await confirmPhoneNumber(this.ui(), this.verificationId(), value.verificationCode);
@@ -1470,14 +2448,16 @@ class VerificationFormComponent {
         this.form.handleSubmit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: VerificationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: VerificationFormComponent, isStandalone: true, selector: "fui-verification-form", inputs: { verificationId: { classPropertyName: "verificationId", publicName: "verificationId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { signIn: "signIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: VerificationFormComponent, isStandalone: true, selector: "fui-verification-form", inputs: { verificationId: { classPropertyName: "verificationId", publicName: "verificationId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
         <fui-form-input
           name="verificationCode"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ verificationCodeLabel() }}"
+          [label]="verificationCodeLabel()"
+          [description]="smsVerificationPrompt()"
+          type="text"
         ></fui-form-input>
       </fieldset>
 
@@ -1490,13 +2470,16 @@ class VerificationFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: VerificationFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-verification-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -1513,7 +2496,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           name="verificationCode"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ verificationCodeLabel() }}"
+          [label]="verificationCodeLabel()"
+          [description]="smsVerificationPrompt()"
+          type="text"
         ></fui-form-input>
       </fieldset>
 
@@ -1528,15 +2513,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </form>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { verificationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "verificationId", required: true }] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { verificationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "verificationId", required: true }] }], signIn: [{
+                type: Output
+            }] } });
+/**
+ * A form component for phone number authentication.
+ *
+ * Manages the flow between phone number entry and verification code entry.
+ */
 class PhoneAuthFormComponent {
     verificationId = signal(null, ...(ngDevMode ? [{ debugName: "verificationId" }] : []));
-    signIn = output();
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     handlePhoneSubmit(data) {
         this.verificationId.set(data.verificationId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PhoneAuthFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: PhoneAuthFormComponent, isStandalone: true, selector: "fui-phone-auth-form", outputs: { signIn: "signIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: PhoneAuthFormComponent, isStandalone: true, selector: "fui-phone-auth-form", outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <div class="fui-form-container">
       @if (verificationId()) {
         <fui-verification-form [verificationId]="verificationId()!" (signIn)="signIn.emit($event)" />
@@ -1552,6 +2545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-phone-auth-form",
                     standalone: true,
                     imports: [CommonModule, PhoneNumberFormComponent, VerificationFormComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <div class="fui-form-container">
       @if (verificationId()) {
@@ -1562,7 +2558,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], propDecorators: { signIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -1579,6 +2577,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for signing in with email and password.
+ */
 class SignInAuthFormComponent {
     ui = injectUI();
     formSchema = injectSignInAuthFormSchema();
@@ -1589,9 +2590,12 @@ class SignInAuthFormComponent {
     noAccountLabel = injectTranslation("prompts", "noAccount");
     signUpLabel = injectTranslation("labels", "signUp");
     unknownErrorLabel = injectTranslation("errors", "unknownError");
-    forgotPassword = output();
-    signUp = output();
-    signIn = output();
+    /** Event emitter for forgot password action. */
+    forgotPassword = input(...(ngDevMode ? [undefined, { debugName: "forgotPassword" }] : []));
+    /** Event emitter for sign up action. */
+    signUp = input(...(ngDevMode ? [undefined, { debugName: "signUp" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     form = injectForm({
         defaultValues: {
             email: "",
@@ -1608,19 +2612,18 @@ class SignInAuthFormComponent {
         effect(() => {
             this.form.update({
                 validators: {
-                    onChange: this.formSchema(),
                     onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async ({ value }) => {
                         try {
                             const credential = await signInWithEmailAndPassword(this.ui(), value.email, value.password);
-                            this.signIn?.emit(credential);
+                            this.signIn.emit(credential);
                             return;
                         }
                         catch (error) {
                             if (error instanceof FirebaseUIError) {
                                 return error.message;
                             }
+                            console.error(error);
                             return this.unknownErrorLabel();
                         }
                     },
@@ -1629,14 +2632,15 @@ class SignInAuthFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignInAuthFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignInAuthFormComponent, isStandalone: true, selector: "fui-sign-in-auth-form", outputs: { forgotPassword: "forgotPassword", signUp: "signUp", signIn: "signIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignInAuthFormComponent, isStandalone: true, selector: "fui-sign-in-auth-form", inputs: { forgotPassword: { classPropertyName: "forgotPassword", publicName: "forgotPassword", isSignal: true, isRequired: false, transformFunction: null }, signUp: { classPropertyName: "signUp", publicName: "signUp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
         <fui-form-input
           name="email"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ emailLabel() }}"
+          [label]="emailLabel()"
+          type="email"
         ></fui-form-input>
       </fieldset>
       <fieldset>
@@ -1644,11 +2648,11 @@ class SignInAuthFormComponent {
           name="password"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ passwordLabel() }}"
+          [label]="passwordLabel()"
           type="password"
         >
-          @if (forgotPassword) {
-            <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword.emit()">
+          @if (forgotPassword()?.observed) {
+            <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword()?.emit()">
               {{ forgotPasswordLabel() }}
             </button>
           }
@@ -1664,17 +2668,20 @@ class SignInAuthFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
 
-      @if (signUp) {
-        <button fui-form-action (click)="signUp.emit()">{{ noAccountLabel() }} {{ signUpLabel() }}</button>
+      @if (signUp()?.observed) {
+        <button fui-form-action (click)="signUp()?.emit()">{{ noAccountLabel() }} {{ signUpLabel() }}</button>
       }
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: FormActionComponent, selector: "button[fui-form-action]" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: FormActionComponent, selector: "button[fui-form-action]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignInAuthFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-sign-in-auth-form",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -1692,7 +2699,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           name="email"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ emailLabel() }}"
+          [label]="emailLabel()"
+          type="email"
         ></fui-form-input>
       </fieldset>
       <fieldset>
@@ -1700,11 +2708,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           name="password"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ passwordLabel() }}"
+          [label]="passwordLabel()"
           type="password"
         >
-          @if (forgotPassword) {
-            <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword.emit()">
+          @if (forgotPassword()?.observed) {
+            <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword()?.emit()">
               {{ forgotPasswordLabel() }}
             </button>
           }
@@ -1720,13 +2728,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
         <fui-form-error-message [state]="state()" />
       </fieldset>
 
-      @if (signUp) {
-        <button fui-form-action (click)="signUp.emit()">{{ noAccountLabel() }} {{ signUpLabel() }}</button>
+      @if (signUp()?.observed) {
+        <button fui-form-action (click)="signUp()?.emit()">{{ noAccountLabel() }} {{ signUpLabel() }}</button>
       }
     </form>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }], signUp: [{ type: i0.Output, args: ["signUp"] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { forgotPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotPassword", required: false }] }], signUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "signUp", required: false }] }], signIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -1743,6 +2753,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A form component for signing up with email and password.
+ *
+ * Optionally includes a display name field if the requireDisplayName behavior is enabled.
+ */
 class SignUpAuthFormComponent {
     ui = injectUI();
     formSchema = injectSignUpAuthFormSchema();
@@ -1756,8 +2771,10 @@ class SignUpAuthFormComponent {
     haveAccountLabel = injectTranslation("prompts", "haveAccount");
     signInLabel = injectTranslation("labels", "signIn");
     unknownErrorLabel = injectTranslation("errors", "unknownError");
-    signUp = output();
-    signIn = output();
+    /** Event emitter for sign in action. */
+    signIn = input(...(ngDevMode ? [undefined, { debugName: "signIn" }] : []));
+    /** Event emitter for successful sign-up. */
+    signUp = new EventEmitter();
     form = injectForm({
         defaultValues: {
             email: "",
@@ -1776,17 +2793,17 @@ class SignUpAuthFormComponent {
             this.form.update({
                 validators: {
                     onBlur: this.formSchema(),
-                    onSubmit: this.formSchema(),
                     onSubmitAsync: async ({ value }) => {
                         try {
                             const credential = await createUserWithEmailAndPassword(this.ui(), value.email, value.password, value.displayName);
-                            this.signUp?.emit(credential);
+                            this.signUp.emit(credential);
                             return;
                         }
                         catch (error) {
                             if (error instanceof FirebaseUIError) {
                                 return error.message;
                             }
+                            console.error(error);
                             return this.unknownErrorLabel();
                         }
                     },
@@ -1795,27 +2812,22 @@ class SignUpAuthFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignUpAuthFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignUpAuthFormComponent, isStandalone: true, selector: "fui-sign-up-auth-form", outputs: { signUp: "signUp", signIn: "signIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignUpAuthFormComponent, isStandalone: true, selector: "fui-sign-up-auth-form", inputs: { signIn: { classPropertyName: "signIn", publicName: "signIn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signUp: "signUp" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       @if (requireDisplayNameField()) {
         <fieldset>
-          <fui-form-input
-            name="displayName"
-            tanstack-app-field
-            [tanstackField]="form"
-            label="{{ displayNameLabel() }}"
-          />
+          <fui-form-input name="displayName" tanstack-app-field [tanstackField]="form" [label]="displayNameLabel()" />
         </fieldset>
       }
       <fieldset>
-        <fui-form-input name="email" tanstack-app-field [tanstackField]="form" label="{{ emailLabel() }}" />
+        <fui-form-input name="email" tanstack-app-field [tanstackField]="form" [label]="emailLabel()" type="email" />
       </fieldset>
       <fieldset>
         <fui-form-input
           name="password"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ passwordLabel() }}"
+          [label]="passwordLabel()"
           type="password"
         />
       </fieldset>
@@ -1827,16 +2839,20 @@ class SignUpAuthFormComponent {
         <fui-form-error-message [state]="state()" />
       </fieldset>
 
-      @if (signIn) {
-        <button fui-form-action (click)="signIn.emit()">{{ haveAccountLabel() }} {{ signInLabel() }} &rarr;</button>
+      @if (signIn()?.observed) {
+        <button fui-form-action (click)="signIn()?.emit()">{{ haveAccountLabel() }} {{ signInLabel() }}</button>
       }
     </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: FormActionComponent, selector: "button[fui-form-action]" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TanStackField, selector: "[tanstackField]", inputs: ["name", "defaultValue", "asyncDebounceMs", "asyncAlways", "tanstackField", "validators", "listeners", "defaultMeta", "mode", "disableErrorFlat"], exportAs: ["field"] }, { kind: "directive", type: TanStackAppField, selector: "[tanstack-app-field]" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: FormInputComponent, selector: "fui-form-input", inputs: ["label", "type", "description"] }, { kind: "component", type: FormSubmitComponent, selector: "fui-form-submit", inputs: ["class", "state"] }, { kind: "component", type: FormErrorMessageComponent, selector: "fui-form-error-message", inputs: ["state"] }, { kind: "component", type: FormActionComponent, selector: "button[fui-form-action]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignUpAuthFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-sign-up-auth-form",
+                    standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         TanStackField,
@@ -1851,23 +2867,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
     <form (submit)="handleSubmit($event)" class="fui-form">
       @if (requireDisplayNameField()) {
         <fieldset>
-          <fui-form-input
-            name="displayName"
-            tanstack-app-field
-            [tanstackField]="form"
-            label="{{ displayNameLabel() }}"
-          />
+          <fui-form-input name="displayName" tanstack-app-field [tanstackField]="form" [label]="displayNameLabel()" />
         </fieldset>
       }
       <fieldset>
-        <fui-form-input name="email" tanstack-app-field [tanstackField]="form" label="{{ emailLabel() }}" />
+        <fui-form-input name="email" tanstack-app-field [tanstackField]="form" [label]="emailLabel()" type="email" />
       </fieldset>
       <fieldset>
         <fui-form-input
           name="password"
           tanstack-app-field
           [tanstackField]="form"
-          label="{{ passwordLabel() }}"
+          [label]="passwordLabel()"
           type="password"
         />
       </fieldset>
@@ -1879,14 +2890,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
         <fui-form-error-message [state]="state()" />
       </fieldset>
 
-      @if (signIn) {
-        <button fui-form-action (click)="signIn.emit()">{{ haveAccountLabel() }} {{ signInLabel() }} &rarr;</button>
+      @if (signIn()?.observed) {
+        <button fui-form-action (click)="signIn()?.emit()">{{ haveAccountLabel() }} {{ signInLabel() }}</button>
       }
     </form>
   `,
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { signUp: [{ type: i0.Output, args: ["signUp"] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { signIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "signIn", required: false }] }], signUp: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -1903,15 +2915,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A generic OAuth button component for signing in with any OAuth provider.
+ */
 class OAuthButtonComponent {
     ui = injectUI();
-    unknownErrorLabel = injectTranslation("errors", "unknownError");
+    /** The OAuth provider to use for sign-in. */
     provider = input.required(...(ngDevMode ? [{ debugName: "provider" }] : []));
-    error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Whether to use themed styling. */
+    themed = input(...(ngDevMode ? [undefined, { debugName: "themed" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
+    buttonVariant = computed(() => {
+        return this.themed() ? "primary" : "secondary";
+    }, ...(ngDevMode ? [{ debugName: "buttonVariant" }] : []));
     async handleOAuthSignIn() {
-        this.error.set(undefined);
+        this.error.set(null);
         try {
-            await signInWithProvider(this.ui(), this.provider());
+            const credential = await signInWithProvider(this.ui(), this.provider());
+            this.signIn.emit(credential);
         }
         catch (error) {
             if (error instanceof FirebaseUIError) {
@@ -1919,16 +2942,18 @@ class OAuthButtonComponent {
                 return;
             }
             console.error(error);
-            this.error.set(this.unknownErrorLabel());
+            this.error.set(getTranslation(this.ui(), "errors", "unknownError"));
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: OAuthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: OAuthButtonComponent, isStandalone: true, selector: "fui-oauth-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: OAuthButtonComponent, isStandalone: true, selector: "fui-oauth-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: true, transformFunction: null }, themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <div>
       <button
         fui-button
         type="button"
         (click)="handleOAuthSignIn()"
+        [variant]="buttonVariant()"
+        [attr.data-themed]="themed()"
         [disabled]="ui().state !== 'idle'"
         [attr.data-provider]="provider().providerId"
         class="fui-provider__button"
@@ -1937,7 +2962,7 @@ class OAuthButtonComponent {
       </button>
 
       @if (error()) {
-        <div class="fui-form__error">{{ error() }}</div>
+        <div class="fui-error">{{ error() }}</div>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "button[fui-button]", inputs: ["variant"] }] });
@@ -1948,12 +2973,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-oauth-button",
                     standalone: true,
                     imports: [CommonModule, ButtonComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     <div>
       <button
         fui-button
         type="button"
         (click)="handleOAuthSignIn()"
+        [variant]="buttonVariant()"
+        [attr.data-themed]="themed()"
         [disabled]="ui().state !== 'idle'"
         [attr.data-provider]="provider().providerId"
         class="fui-provider__button"
@@ -1962,12 +2992,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
       </button>
 
       @if (error()) {
-        <div class="fui-form__error">{{ error() }}</div>
+        <div class="fui-error">{{ error() }}</div>
       }
     </div>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: true }] }] } });
+        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: true }] }], themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2054,21 +3084,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A button component for signing in with Google.
+ */
 class GoogleSignInButtonComponent {
     ui = injectUI();
     signInWithGoogleLabel = injectTranslation("labels", "signInWithGoogle");
+    /** Whether to use themed styling. */
+    themed = input(false, ...(ngDevMode ? [{ debugName: "themed" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
     defaultProvider = new GoogleAuthProvider();
+    /** Optional custom OAuth provider configuration. */
     provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : []));
     get googleProvider() {
         return this.provider() || this.defaultProvider;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GoogleSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: GoogleSignInButtonComponent, isStandalone: true, selector: "fui-google-sign-in-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <fui-oauth-button [provider]="googleProvider">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: GoogleSignInButtonComponent, isStandalone: true, selector: "fui-google-sign-in-button", inputs: { themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-oauth-button [provider]="googleProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-google-logo />
       <span>{{ signInWithGoogleLabel() }}</span>
     </fui-oauth-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider"] }, { kind: "component", type: GoogleLogoComponent, selector: "fui-google-logo", inputs: ["width", "height", "className"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider", "themed"], outputs: ["signIn"] }, { kind: "component", type: GoogleLogoComponent, selector: "fui-google-logo", inputs: ["width", "height", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GoogleSignInButtonComponent, decorators: [{
             type: Component,
@@ -2076,14 +3114,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-google-sign-in-button",
                     standalone: true,
                     imports: [CommonModule, OAuthButtonComponent, GoogleLogoComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
-    <fui-oauth-button [provider]="googleProvider">
+    <fui-oauth-button [provider]="googleProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-google-logo />
       <span>{{ signInWithGoogleLabel() }}</span>
     </fui-oauth-button>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
+        }], propDecorators: { themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2107,7 +3148,7 @@ class FacebookLogoComponent {
     className = input("", ...(ngDevMode ? [{ debugName: "className" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacebookLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: FacebookLogoComponent, isStandalone: true, selector: "fui-facebook-logo", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fui-provider__icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fui-provider__icon">
       <path
         fill="currentColor"
         d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z"
@@ -2121,7 +3162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-facebook-logo",
                     standalone: true,
                     template: `
-    <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fui-provider__icon">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fui-provider__icon">
       <path
         fill="currentColor"
         d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z"
@@ -2146,21 +3187,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A button component for signing in with Facebook.
+ */
 class FacebookSignInButtonComponent {
     ui = injectUI();
     signInWithFacebookLabel = injectTranslation("labels", "signInWithFacebook");
+    /** Whether to use themed styling. */
+    themed = input(false, ...(ngDevMode ? [{ debugName: "themed" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
     defaultProvider = new FacebookAuthProvider();
+    /** Optional custom OAuth provider configuration. */
     provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : []));
     get facebookProvider() {
         return this.provider() || this.defaultProvider;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacebookSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: FacebookSignInButtonComponent, isStandalone: true, selector: "fui-facebook-sign-in-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <fui-oauth-button [provider]="facebookProvider">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: FacebookSignInButtonComponent, isStandalone: true, selector: "fui-facebook-sign-in-button", inputs: { themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-oauth-button [provider]="facebookProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-facebook-logo />
       <span>{{ signInWithFacebookLabel() }}</span>
     </fui-oauth-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider"] }, { kind: "component", type: FacebookLogoComponent, selector: "fui-facebook-logo", inputs: ["width", "height", "className"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider", "themed"], outputs: ["signIn"] }, { kind: "component", type: FacebookLogoComponent, selector: "fui-facebook-logo", inputs: ["width", "height", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: FacebookSignInButtonComponent, decorators: [{
             type: Component,
@@ -2168,14 +3217,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-facebook-sign-in-button",
                     standalone: true,
                     imports: [CommonModule, OAuthButtonComponent, FacebookLogoComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
-    <fui-oauth-button [provider]="facebookProvider">
+    <fui-oauth-button [provider]="facebookProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-facebook-logo />
       <span>{{ signInWithFacebookLabel() }}</span>
     </fui-oauth-button>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
+        }], propDecorators: { themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2238,21 +3290,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A button component for signing in with Apple.
+ */
 class AppleSignInButtonComponent {
     ui = injectUI();
     signInWithAppleLabel = injectTranslation("labels", "signInWithApple");
+    /** Whether to use themed styling. */
+    themed = input(false, ...(ngDevMode ? [{ debugName: "themed" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
     defaultProvider = new OAuthProvider("apple.com");
+    /** Optional custom OAuth provider configuration. */
     provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : []));
     get appleProvider() {
         return this.provider() || this.defaultProvider;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AppleSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: AppleSignInButtonComponent, isStandalone: true, selector: "fui-apple-sign-in-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <fui-oauth-button [provider]="appleProvider">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: AppleSignInButtonComponent, isStandalone: true, selector: "fui-apple-sign-in-button", inputs: { themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-oauth-button [provider]="appleProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-apple-logo />
       <span>{{ signInWithAppleLabel() }}</span>
     </fui-oauth-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider"] }, { kind: "component", type: AppleLogoComponent, selector: "fui-apple-logo", inputs: ["width", "height", "className"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider", "themed"], outputs: ["signIn"] }, { kind: "component", type: AppleLogoComponent, selector: "fui-apple-logo", inputs: ["width", "height", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: AppleSignInButtonComponent, decorators: [{
             type: Component,
@@ -2260,14 +3320,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-apple-sign-in-button",
                     standalone: true,
                     imports: [CommonModule, OAuthButtonComponent, AppleLogoComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
-    <fui-oauth-button [provider]="appleProvider">
+    <fui-oauth-button [provider]="appleProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-apple-logo />
       <span>{{ signInWithAppleLabel() }}</span>
     </fui-oauth-button>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
+        }], propDecorators: { themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2330,20 +3393,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A button component for signing in with Microsoft.
+ */
 class MicrosoftSignInButtonComponent {
     signInWithMicrosoftLabel = injectTranslation("labels", "signInWithMicrosoft");
+    /** Whether to use themed styling. */
+    themed = input(false, ...(ngDevMode ? [{ debugName: "themed" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
     defaultProvider = new OAuthProvider("microsoft.com");
+    /** Optional custom OAuth provider configuration. */
     provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : []));
     get microsoftProvider() {
         return this.provider() || this.defaultProvider;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MicrosoftSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: MicrosoftSignInButtonComponent, isStandalone: true, selector: "fui-microsoft-sign-in-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <fui-oauth-button [provider]="microsoftProvider">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: MicrosoftSignInButtonComponent, isStandalone: true, selector: "fui-microsoft-sign-in-button", inputs: { themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-oauth-button [provider]="microsoftProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-microsoft-logo />
       <span>{{ signInWithMicrosoftLabel() }}</span>
     </fui-oauth-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider"] }, { kind: "component", type: MicrosoftLogoComponent, selector: "fui-microsoft-logo", inputs: ["width", "height", "className"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider", "themed"], outputs: ["signIn"] }, { kind: "component", type: MicrosoftLogoComponent, selector: "fui-microsoft-logo", inputs: ["width", "height", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MicrosoftSignInButtonComponent, decorators: [{
             type: Component,
@@ -2351,14 +3422,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-microsoft-sign-in-button",
                     standalone: true,
                     imports: [CommonModule, OAuthButtonComponent, MicrosoftLogoComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
-    <fui-oauth-button [provider]="microsoftProvider">
+    <fui-oauth-button [provider]="microsoftProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-microsoft-logo />
       <span>{{ signInWithMicrosoftLabel() }}</span>
     </fui-oauth-button>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
+        }], propDecorators: { themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2419,20 +3493,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A button component for signing in with Twitter/X.
+ */
 class TwitterSignInButtonComponent {
     signInWithTwitterLabel = injectTranslation("labels", "signInWithTwitter");
+    /** Whether to use themed styling. */
+    themed = input(false, ...(ngDevMode ? [{ debugName: "themed" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
     defaultProvider = new TwitterAuthProvider();
+    /** Optional custom OAuth provider configuration. */
     provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : []));
     get twitterProvider() {
         return this.provider() || this.defaultProvider;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TwitterSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: TwitterSignInButtonComponent, isStandalone: true, selector: "fui-twitter-sign-in-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <fui-oauth-button [provider]="twitterProvider">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: TwitterSignInButtonComponent, isStandalone: true, selector: "fui-twitter-sign-in-button", inputs: { themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-oauth-button [provider]="twitterProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-twitter-logo />
       <span>{{ signInWithTwitterLabel() }}</span>
     </fui-oauth-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider"] }, { kind: "component", type: TwitterLogoComponent, selector: "fui-twitter-logo", inputs: ["width", "height", "className"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider", "themed"], outputs: ["signIn"] }, { kind: "component", type: TwitterLogoComponent, selector: "fui-twitter-logo", inputs: ["width", "height", "className"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: TwitterSignInButtonComponent, decorators: [{
             type: Component,
@@ -2440,14 +3522,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-twitter-sign-in-button",
                     standalone: true,
                     imports: [CommonModule, OAuthButtonComponent, TwitterLogoComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
-    <fui-oauth-button [provider]="twitterProvider">
+    <fui-oauth-button [provider]="twitterProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-twitter-logo />
       <span>{{ signInWithTwitterLabel() }}</span>
     </fui-oauth-button>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
+        }], propDecorators: { themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2508,35 +3593,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GithubSignInButtonComponent {
-    signInWithGithubLabel = injectTranslation("labels", "signInWithGithub");
+/**
+ * A button component for signing in with GitHub.
+ */
+class GitHubSignInButtonComponent {
+    signInWithGitHubLabel = injectTranslation("labels", "signInWithGitHub");
+    /** Whether to use themed styling. */
+    themed = input(false, ...(ngDevMode ? [{ debugName: "themed" }] : []));
+    /** Event emitter for successful sign-in. */
+    signIn = output();
     defaultProvider = new GithubAuthProvider();
+    /** Optional custom OAuth provider configuration. */
     provider = input(...(ngDevMode ? [undefined, { debugName: "provider" }] : []));
     get githubProvider() {
         return this.provider() || this.defaultProvider;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GithubSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: GithubSignInButtonComponent, isStandalone: true, selector: "fui-github-sign-in-button", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <fui-oauth-button [provider]="githubProvider">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GitHubSignInButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: GitHubSignInButtonComponent, isStandalone: true, selector: "fui-github-sign-in-button", inputs: { themed: { classPropertyName: "themed", publicName: "themed", isSignal: true, isRequired: false, transformFunction: null }, provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-oauth-button [provider]="githubProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-github-logo />
-      <span>{{ signInWithGithubLabel() }}</span>
+      <span>{{ signInWithGitHubLabel() }}</span>
     </fui-oauth-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider"] }, { kind: "component", type: GithubLogoComponent, selector: "fui-github-logo", inputs: ["width", "height", "className"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OAuthButtonComponent, selector: "fui-oauth-button", inputs: ["provider", "themed"], outputs: ["signIn"] }, { kind: "component", type: GithubLogoComponent, selector: "fui-github-logo", inputs: ["width", "height", "className"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GithubSignInButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: GitHubSignInButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-github-sign-in-button",
                     standalone: true,
                     imports: [CommonModule, OAuthButtonComponent, GithubLogoComponent],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
-    <fui-oauth-button [provider]="githubProvider">
+    <fui-oauth-button [provider]="githubProvider" [themed]="themed()" (signIn)="signIn.emit($event)">
       <fui-github-logo />
-      <span>{{ signInWithGithubLabel() }}</span>
+      <span>{{ signInWithGitHubLabel() }}</span>
     </fui-oauth-button>
   `,
                 }]
-        }], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
+        }], propDecorators: { themed: [{ type: i0.Input, args: [{ isSignal: true, alias: "themed", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2553,13 +3649,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A card container component for grouping related content.
+ */
 class CardComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardComponent, isStandalone: true, selector: "fui-card", ngImport: i0, template: `
-    <div class="fui-card">
-      <ng-content select="fui-card-header"></ng-content>
-      <ng-content select="fui-card-content"></ng-content>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardComponent, isStandalone: true, selector: "fui-card", host: { styleAttribute: "display: block;", classAttribute: "fui-card" }, ngImport: i0, template: `
+    <ng-content select="fui-card-header"></ng-content>
+    <ng-content select="fui-card-content"></ng-content>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardComponent, decorators: [{
@@ -2568,21 +3665,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-card",
                     standalone: true,
                     imports: [],
+                    host: {
+                        class: "fui-card",
+                        style: "display: block;",
+                    },
                     template: `
-    <div class="fui-card">
-      <ng-content select="fui-card-header"></ng-content>
-      <ng-content select="fui-card-content"></ng-content>
-    </div>
+    <ng-content select="fui-card-header"></ng-content>
+    <ng-content select="fui-card-content"></ng-content>
   `,
                 }]
         }] });
+/**
+ * The header section of a card.
+ */
 class CardHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardHeaderComponent, isStandalone: true, selector: "fui-card-header", ngImport: i0, template: `
-    <div class="fui-card__header">
-      <ng-content select="fui-card-title"></ng-content>
-      <ng-content select="fui-card-subtitle"></ng-content>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardHeaderComponent, isStandalone: true, selector: "fui-card-header", host: { styleAttribute: "display: block;", classAttribute: "fui-card__header" }, ngImport: i0, template: `
+    <ng-content select="fui-card-title"></ng-content>
+    <ng-content select="fui-card-subtitle"></ng-content>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardHeaderComponent, decorators: [{
@@ -2591,18 +3691,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-card-header",
                     standalone: true,
                     imports: [CommonModule],
+                    host: {
+                        class: "fui-card__header",
+                        style: "display: block;",
+                    },
                     template: `
-    <div class="fui-card__header">
-      <ng-content select="fui-card-title"></ng-content>
-      <ng-content select="fui-card-subtitle"></ng-content>
-    </div>
+    <ng-content select="fui-card-title"></ng-content>
+    <ng-content select="fui-card-subtitle"></ng-content>
   `,
                 }]
         }] });
+/**
+ * The title of a card.
+ */
 class CardTitleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardTitleComponent, isStandalone: true, selector: "fui-card-title", ngImport: i0, template: `
-    <h2 class="fui-card__title">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardTitleComponent, isStandalone: true, selector: "fui-card-title", host: { styleAttribute: "display: block;", classAttribute: "fui-card__title" }, ngImport: i0, template: `
+    <h2>
       <ng-content></ng-content>
     </h2>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -2613,17 +3718,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-card-title",
                     standalone: true,
                     imports: [CommonModule],
+                    host: {
+                        class: "fui-card__title",
+                        style: "display: block;",
+                    },
                     template: `
-    <h2 class="fui-card__title">
+    <h2>
       <ng-content></ng-content>
     </h2>
   `,
                 }]
         }] });
+/**
+ * The subtitle of a card.
+ */
 class CardSubtitleComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardSubtitleComponent, isStandalone: true, selector: "fui-card-subtitle", ngImport: i0, template: `
-    <p class="fui-card__subtitle">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardSubtitleComponent, isStandalone: true, selector: "fui-card-subtitle", host: { styleAttribute: "display: block;", classAttribute: "fui-card__subtitle" }, ngImport: i0, template: `
+    <p>
       <ng-content></ng-content>
     </p>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -2634,20 +3746,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-card-subtitle",
                     standalone: true,
                     imports: [CommonModule],
+                    host: {
+                        class: "fui-card__subtitle",
+                        style: "display: block;",
+                    },
                     template: `
-    <p class="fui-card__subtitle">
+    <p>
       <ng-content></ng-content>
     </p>
   `,
                 }]
         }] });
+/**
+ * The content section of a card.
+ */
 class CardContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardContentComponent, isStandalone: true, selector: "fui-card-content", ngImport: i0, template: `
-    <div class="fui-card__content">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: CardContentComponent, isStandalone: true, selector: "fui-card-content", host: { styleAttribute: "display: block;", classAttribute: "fui-card__content" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
@@ -2655,13 +3770,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-card-content",
                     standalone: true,
                     imports: [CommonModule],
+                    host: {
+                        class: "fui-card__content",
+                        style: "display: block;",
+                    },
+                    template: ` <ng-content></ng-content> `,
+                }]
+        }] });
+
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A screen component for multi-factor authentication assertion.
+ *
+ * Displays the MFA assertion form for completing multi-factor verification.
+ */
+class MultiFactorAuthAssertionScreenComponent {
+    /** Event emitter for successful MFA assertion. */
+    onSuccess = new EventEmitter();
+    titleText = injectTranslation("labels", "multiFactorAssertion");
+    subtitleText = injectTranslation("prompts", "mfaAssertionPrompt");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthAssertionScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: MultiFactorAuthAssertionScreenComponent, isStandalone: true, selector: "fui-multi-factor-auth-assertion-screen", outputs: { onSuccess: "onSuccess" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <div class="fui-screen">
+      <fui-card>
+        <fui-card-header>
+          <fui-card-title>{{ titleText() }}</fui-card-title>
+          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+        </fui-card-header>
+        <fui-card-content>
+          <fui-multi-factor-auth-assertion-form (onSuccess)="onSuccess.emit($event)" />
+        </fui-card-content>
+      </fui-card>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: MultiFactorAuthAssertionFormComponent, selector: "fui-multi-factor-auth-assertion-form", outputs: ["onSuccess"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthAssertionScreenComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-multi-factor-auth-assertion-screen",
+                    standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
+                    imports: [
+                        CommonModule,
+                        CardComponent,
+                        CardHeaderComponent,
+                        CardTitleComponent,
+                        CardSubtitleComponent,
+                        CardContentComponent,
+                        MultiFactorAuthAssertionFormComponent,
+                    ],
                     template: `
-    <div class="fui-card__content">
-      <ng-content></ng-content>
+    <div class="fui-screen">
+      <fui-card>
+        <fui-card-header>
+          <fui-card-title>{{ titleText() }}</fui-card-title>
+          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+        </fui-card-header>
+        <fui-card-content>
+          <fui-multi-factor-auth-assertion-form (onSuccess)="onSuccess.emit($event)" />
+        </fui-card-content>
+      </fui-card>
     </div>
   `,
                 }]
-        }] });
+        }], propDecorators: { onSuccess: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2677,12 +3867,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A component that displays redirect error messages.
+ *
+ * Shows errors that occurred during OAuth redirect flows.
+ */
 class RedirectErrorComponent {
     error = injectRedirectError();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: RedirectErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: RedirectErrorComponent, isStandalone: true, selector: "fui-redirect-error", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: RedirectErrorComponent, isStandalone: true, selector: "fui-redirect-error", host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     @if (error()) {
-      <div class="fui-form__error">{{ error() }}</div>
+      <div class="fui-error">{{ error() }}</div>
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
@@ -2692,9 +3887,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     selector: "fui-redirect-error",
                     standalone: true,
                     imports: [CommonModule],
+                    host: {
+                        style: "display: block;",
+                    },
                     template: `
     @if (error()) {
-      <div class="fui-form__error">{{ error() }}</div>
+      <div class="fui-error">{{ error() }}</div>
     }
   `,
                 }]
@@ -2715,33 +3913,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A screen component for email link authentication.
+ *
+ * Automatically displays the MFA assertion screen if a multi-factor resolver is present.
+ */
 class EmailLinkAuthScreenComponent {
+    ui = injectUI();
+    mfaResolver = computed(() => this.ui().multiFactorResolver, ...(ngDevMode ? [{ debugName: "mfaResolver" }] : []));
     titleText = injectTranslation("labels", "signIn");
     subtitleText = injectTranslation("prompts", "signInToAccount");
-    emailSent = output();
-    signIn = output();
+    constructor() {
+        injectUserAuthenticated((user) => {
+            this.signIn.emit(user);
+        });
+    }
+    /** Event emitter fired when sign-in link email is sent. */
+    emailSent = new EventEmitter();
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: EmailLinkAuthScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: EmailLinkAuthScreenComponent, isStandalone: true, selector: "fui-email-link-auth-screen", outputs: { emailSent: "emailSent", signIn: "signIn" }, ngImport: i0, template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          <fui-email-link-auth-form (emailSent)="emailSent.emit()" (signIn)="signIn.emit($event)" />
-          <fui-redirect-error />
-          <ng-content></ng-content>
-        </fui-card-content>
-      </fui-card>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: EmailLinkAuthFormComponent, selector: "fui-email-link-auth-form", outputs: ["emailSent", "signIn"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: EmailLinkAuthScreenComponent, isStandalone: true, selector: "fui-email-link-auth-screen", outputs: { emailSent: "emailSent", signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-email-link-auth-form (emailSent)="emailSent.emit()" (signIn)="signIn.emit($event.user)" />
+            <ng-content></ng-content>
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: EmailLinkAuthFormComponent, selector: "fui-email-link-auth-form", outputs: ["emailSent", "signIn"] }, { kind: "component", type: MultiFactorAuthAssertionScreenComponent, selector: "fui-multi-factor-auth-assertion-screen", outputs: ["onSuccess"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: EmailLinkAuthScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-email-link-auth-screen",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         CardComponent,
@@ -2750,25 +3969,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         CardSubtitleComponent,
                         CardContentComponent,
                         EmailLinkAuthFormComponent,
+                        MultiFactorAuthAssertionScreenComponent,
                         RedirectErrorComponent,
                     ],
                     template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          <fui-email-link-auth-form (emailSent)="emailSent.emit()" (signIn)="signIn.emit($event)" />
-          <fui-redirect-error />
-          <ng-content></ng-content>
-        </fui-card-content>
-      </fui-card>
-    </div>
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-email-link-auth-form (emailSent)="emailSent.emit()" (signIn)="signIn.emit($event.user)" />
+            <ng-content></ng-content>
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
   `,
                 }]
-        }], propDecorators: { emailSent: [{ type: i0.Output, args: ["emailSent"] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { emailSent: [{
+                type: Output
+            }], signIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2785,13 +4013,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A screen component for requesting a password reset.
+ */
 class ForgotPasswordAuthScreenComponent {
     titleText = injectTranslation("labels", "resetPassword");
     subtitleText = injectTranslation("prompts", "enterEmailToReset");
-    passwordSent = output();
-    backToSignIn = output();
+    /** Event emitter fired when password reset email is sent. */
+    passwordSent = new EventEmitter();
+    /** Event emitter for back to sign in action. */
+    backToSignIn = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForgotPasswordAuthScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ForgotPasswordAuthScreenComponent, isStandalone: true, selector: "fui-forgot-password-auth-screen", outputs: { passwordSent: "passwordSent", backToSignIn: "backToSignIn" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ForgotPasswordAuthScreenComponent, isStandalone: true, selector: "fui-forgot-password-auth-screen", outputs: { passwordSent: "passwordSent", backToSignIn: "backToSignIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
     <div class="fui-screen">
       <fui-card>
         <fui-card-header>
@@ -2799,18 +4032,20 @@ class ForgotPasswordAuthScreenComponent {
           <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
         </fui-card-header>
         <fui-card-content>
-          <fui-forgot-password-auth-form (passwordSent)="passwordSent.emit()" (backToSignIn)="backToSignIn.emit()" />
-          <fui-redirect-error />
+          <fui-forgot-password-auth-form [backToSignIn]="backToSignIn" (passwordSent)="passwordSent.emit()" />
         </fui-card-content>
       </fui-card>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: ForgotPasswordAuthFormComponent, selector: "fui-forgot-password-auth-form", outputs: ["passwordSent", "backToSignIn"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: ForgotPasswordAuthFormComponent, selector: "fui-forgot-password-auth-form", inputs: ["backToSignIn"], outputs: ["passwordSent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForgotPasswordAuthScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-forgot-password-auth-screen",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         CardComponent,
@@ -2819,7 +4054,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         CardSubtitleComponent,
                         CardContentComponent,
                         ForgotPasswordAuthFormComponent,
-                        RedirectErrorComponent,
                     ],
                     template: `
     <div class="fui-screen">
@@ -2829,14 +4063,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
           <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
         </fui-card-header>
         <fui-card-content>
-          <fui-forgot-password-auth-form (passwordSent)="passwordSent.emit()" (backToSignIn)="backToSignIn.emit()" />
-          <fui-redirect-error />
+          <fui-forgot-password-auth-form [backToSignIn]="backToSignIn" (passwordSent)="passwordSent.emit()" />
         </fui-card-content>
       </fui-card>
     </div>
   `,
                 }]
-        }], propDecorators: { passwordSent: [{ type: i0.Output, args: ["passwordSent"] }], backToSignIn: [{ type: i0.Output, args: ["backToSignIn"] }] } });
+        }], propDecorators: { passwordSent: [{
+                type: Output
+            }], backToSignIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2853,76 +4090,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DividerComponent {
-    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: DividerComponent, isStandalone: true, selector: "fui-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="fui-divider my-6">
-      <div class="fui-divider__line"></div>
-      @if (label()) {
-        <div class="fui-divider__text">{{ label() }}</div>
-        <div class="fui-divider__line"></div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DividerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "fui-divider",
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    <div class="fui-divider my-6">
-      <div class="fui-divider__line"></div>
-      @if (label()) {
-        <div class="fui-divider__text">{{ label() }}</div>
-        <div class="fui-divider__line"></div>
-      }
-    </div>
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
-
 /**
- * Copyright 2025 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
+ * A screen component for multi-factor authentication enrollment.
  *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+ * Displays the MFA enrollment form for setting up multi-factor authentication.
  */
-class ContentComponent {
-    dividerOrLabel = injectTranslation("messages", "dividerOr");
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ContentComponent, isStandalone: true, selector: "fui-content", ngImport: i0, template: `
-    <fui-divider [label]="dividerOrLabel()" />
-    <div class="fui-screen__children">
-      <ng-content></ng-content>
+class MultiFactorAuthEnrollmentScreenComponent {
+    /** The available MFA factor types for enrollment. */
+    hints = input([FactorId.TOTP, FactorId.PHONE], ...(ngDevMode ? [{ debugName: "hints" }] : []));
+    /** Event emitter fired when MFA enrollment is completed. */
+    onEnrollment = new EventEmitter();
+    titleText = injectTranslation("labels", "multiFactorEnrollment");
+    subtitleText = injectTranslation("prompts", "mfaEnrollmentPrompt");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthEnrollmentScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.7", type: MultiFactorAuthEnrollmentScreenComponent, isStandalone: true, selector: "fui-multi-factor-auth-enrollment-screen", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onEnrollment: "onEnrollment" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <div class="fui-screen">
+      <fui-card>
+        <fui-card-header>
+          <fui-card-title>{{ titleText() }}</fui-card-title>
+          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+        </fui-card-header>
+        <fui-card-content>
+          <fui-multi-factor-auth-enrollment-form [hints]="hints()" (onEnrollment)="onEnrollment.emit()" />
+        </fui-card-content>
+      </fui-card>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DividerComponent, selector: "fui-divider", inputs: ["label"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: MultiFactorAuthEnrollmentFormComponent, selector: "fui-multi-factor-auth-enrollment-form", inputs: ["hints"], outputs: ["onEnrollment"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: MultiFactorAuthEnrollmentScreenComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "fui-content",
+                    selector: "fui-multi-factor-auth-enrollment-screen",
                     standalone: true,
-                    imports: [DividerComponent],
+                    host: {
+                        style: "display: block;",
+                    },
+                    imports: [
+                        CommonModule,
+                        CardComponent,
+                        CardHeaderComponent,
+                        CardTitleComponent,
+                        CardSubtitleComponent,
+                        CardContentComponent,
+                        MultiFactorAuthEnrollmentFormComponent,
+                    ],
                     template: `
-    <fui-divider [label]="dividerOrLabel()" />
-    <div class="fui-screen__children">
-      <ng-content></ng-content>
+    <div class="fui-screen">
+      <fui-card>
+        <fui-card-header>
+          <fui-card-title>{{ titleText() }}</fui-card-title>
+          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+        </fui-card-header>
+        <fui-card-content>
+          <fui-multi-factor-auth-enrollment-form [hints]="hints()" (onEnrollment)="onEnrollment.emit()" />
+        </fui-card-content>
+      </fui-card>
     </div>
   `,
                 }]
-        }] });
+        }], propDecorators: { hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], onEnrollment: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -2939,39 +4167,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A screen component for OAuth authentication.
+ *
+ * Automatically displays the MFA assertion screen if a multi-factor resolver is present.
+ * Use this screen to display OAuth sign-in buttons.
+ */
 class OAuthScreenComponent {
     ui = injectUI();
     mfaResolver = computed(() => this.ui().multiFactorResolver, ...(ngDevMode ? [{ debugName: "mfaResolver" }] : []));
     titleText = injectTranslation("labels", "signIn");
     subtitleText = injectTranslation("prompts", "signInToAccount");
+    constructor() {
+        injectUserAuthenticated((user) => {
+            this.onSignIn.emit(user);
+        });
+    }
+    /** Event emitter for successful sign-in. */
+    onSignIn = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: OAuthScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: OAuthScreenComponent, isStandalone: true, selector: "fui-oauth-screen", ngImport: i0, template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-content>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: OAuthScreenComponent, isStandalone: true, selector: "fui-oauth-screen", outputs: { onSignIn: "onSignIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <div class="fui-screen__children">
               <ng-content></ng-content>
-            </fui-content>
-            <fui-redirect-error />
-            <fui-policies />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: ContentComponent, selector: "fui-content" }, { kind: "component", type: MultiFactorAuthAssertionFormComponent, selector: "fui-multi-factor-auth-assertion-form" }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
+              <fui-redirect-error />
+              <fui-policies />
+            </div>
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: PoliciesComponent, selector: "fui-policies" }, { kind: "component", type: MultiFactorAuthAssertionScreenComponent, selector: "fui-multi-factor-auth-assertion-screen", outputs: ["onSuccess"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: OAuthScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-oauth-screen",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         CardComponent,
@@ -2980,33 +4224,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         CardSubtitleComponent,
                         CardContentComponent,
                         PoliciesComponent,
-                        ContentComponent,
-                        MultiFactorAuthAssertionFormComponent,
+                        MultiFactorAuthAssertionScreenComponent,
                         RedirectErrorComponent,
                     ],
                     template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-content>
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <div class="fui-screen__children">
               <ng-content></ng-content>
-            </fui-content>
-            <fui-redirect-error />
-            <fui-policies />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
+              <fui-redirect-error />
+              <fui-policies />
+            </div>
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
   `,
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { onSignIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -3023,39 +4268,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A screen component for phone number authentication.
+ *
+ * Automatically displays the MFA assertion screen if a multi-factor resolver is present.
+ */
 class PhoneAuthScreenComponent {
     ui = injectUI();
     mfaResolver = computed(() => this.ui().multiFactorResolver, ...(ngDevMode ? [{ debugName: "mfaResolver" }] : []));
     titleText = injectTranslation("labels", "signIn");
     subtitleText = injectTranslation("prompts", "signInToAccount");
-    resendDelay = input(30, ...(ngDevMode ? [{ debugName: "resendDelay" }] : []));
-    signIn = output();
+    constructor() {
+        injectUserAuthenticated((user) => {
+            this.signIn.emit(user);
+        });
+    }
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PhoneAuthScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: PhoneAuthScreenComponent, isStandalone: true, selector: "fui-phone-auth-screen", inputs: { resendDelay: { classPropertyName: "resendDelay", publicName: "resendDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signIn: "signIn" }, ngImport: i0, template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-phone-auth-form (signIn)="signIn.emit($event)" />
-            <fui-redirect-error />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: PhoneAuthScreenComponent, isStandalone: true, selector: "fui-phone-auth-screen", outputs: { signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-phone-auth-form (signIn)="signIn.emit($event.user)" />
             <ng-content />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: PhoneAuthFormComponent, selector: "fui-phone-auth-form", outputs: ["signIn"] }, { kind: "component", type: MultiFactorAuthAssertionFormComponent, selector: "fui-multi-factor-auth-assertion-form" }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: PhoneAuthFormComponent, selector: "fui-phone-auth-form", outputs: ["signIn"] }, { kind: "component", type: MultiFactorAuthAssertionScreenComponent, selector: "fui-multi-factor-auth-assertion-screen", outputs: ["onSuccess"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: PhoneAuthScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-phone-auth-screen",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         CardComponent,
@@ -3064,30 +4322,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         CardSubtitleComponent,
                         CardContentComponent,
                         PhoneAuthFormComponent,
-                        MultiFactorAuthAssertionFormComponent,
+                        MultiFactorAuthAssertionScreenComponent,
                         RedirectErrorComponent,
                     ],
                     template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-phone-auth-form (signIn)="signIn.emit($event)" />
-            <fui-redirect-error />
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-phone-auth-form (signIn)="signIn.emit($event.user)" />
             <ng-content />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
   `,
                 }]
-        }], propDecorators: { resendDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendDelay", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { signIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -3104,44 +4364,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A screen component for email/password sign-in.
+ *
+ * Automatically displays the MFA assertion screen if a multi-factor resolver is present.
+ */
 class SignInAuthScreenComponent {
     ui = injectUI();
     mfaResolver = computed(() => this.ui().multiFactorResolver, ...(ngDevMode ? [{ debugName: "mfaResolver" }] : []));
     titleText = injectTranslation("labels", "signIn");
     subtitleText = injectTranslation("prompts", "signInToAccount");
-    forgotPassword = output();
-    signUp = output();
-    signIn = output();
+    constructor() {
+        injectUserAuthenticated((user) => {
+            this.signIn.emit(user);
+        });
+    }
+    /** Event emitter for forgot password action. */
+    forgotPassword = new EventEmitter();
+    /** Event emitter for sign up action. */
+    signUp = new EventEmitter();
+    /** Event emitter for successful sign-in. */
+    signIn = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignInAuthScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignInAuthScreenComponent, isStandalone: true, selector: "fui-sign-in-auth-screen", outputs: { forgotPassword: "forgotPassword", signUp: "signUp", signIn: "signIn" }, ngImport: i0, template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-sign-in-auth-form
-              (forgotPassword)="forgotPassword.emit()"
-              (signUp)="signUp.emit()"
-              (signIn)="signIn.emit($event)"
-            />
-            <fui-redirect-error />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignInAuthScreenComponent, isStandalone: true, selector: "fui-sign-in-auth-screen", outputs: { forgotPassword: "forgotPassword", signUp: "signUp", signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-sign-in-auth-form [forgotPassword]="forgotPassword" [signUp]="signUp" />
             <ng-content />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: SignInAuthFormComponent, selector: "fui-sign-in-auth-form", outputs: ["forgotPassword", "signUp", "signIn"] }, { kind: "component", type: MultiFactorAuthAssertionFormComponent, selector: "fui-multi-factor-auth-assertion-form" }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: SignInAuthFormComponent, selector: "fui-sign-in-auth-form", inputs: ["forgotPassword", "signUp"], outputs: ["signIn"] }, { kind: "component", type: MultiFactorAuthAssertionScreenComponent, selector: "fui-multi-factor-auth-assertion-screen", outputs: ["onSuccess"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignInAuthScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-sign-in-auth-screen",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         CardComponent,
@@ -3150,34 +4422,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         CardSubtitleComponent,
                         CardContentComponent,
                         SignInAuthFormComponent,
-                        MultiFactorAuthAssertionFormComponent,
+                        MultiFactorAuthAssertionScreenComponent,
                         RedirectErrorComponent,
                     ],
                     template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-sign-in-auth-form
-              (forgotPassword)="forgotPassword.emit()"
-              (signUp)="signUp.emit()"
-              (signIn)="signIn.emit($event)"
-            />
-            <fui-redirect-error />
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-sign-in-auth-form [forgotPassword]="forgotPassword" [signUp]="signUp" />
             <ng-content />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
   `,
                 }]
-        }], propDecorators: { forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }], signUp: [{ type: i0.Output, args: ["signUp"] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }], ctorParameters: () => [], propDecorators: { forgotPassword: [{
+                type: Output
+            }], signUp: [{
+                type: Output
+            }], signIn: [{
+                type: Output
+            }] } });
 
 /**
  * Copyright 2025 Google LLC
@@ -3194,39 +4468,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/**
+ * A screen component for email/password sign-up.
+ *
+ * Automatically displays the MFA assertion screen if a multi-factor resolver is present.
+ */
 class SignUpAuthScreenComponent {
     ui = injectUI();
     mfaResolver = computed(() => this.ui().multiFactorResolver, ...(ngDevMode ? [{ debugName: "mfaResolver" }] : []));
     titleText = injectTranslation("labels", "signUp");
     subtitleText = injectTranslation("prompts", "enterDetailsToCreate");
-    signUp = output();
-    signIn = output();
+    constructor() {
+        injectUserAuthenticated((user) => {
+            this.signUp.emit(user);
+        });
+    }
+    /** Event emitter for successful sign-up. */
+    signUp = new EventEmitter();
+    /** Event emitter for sign in action. */
+    signIn = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignUpAuthScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignUpAuthScreenComponent, isStandalone: true, selector: "fui-sign-up-auth-screen", outputs: { signUp: "signUp", signIn: "signIn" }, ngImport: i0, template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-sign-up-auth-form (signIn)="signIn.emit()" (signUp)="signUp.emit($event)" />
-            <fui-redirect-error />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: SignUpAuthScreenComponent, isStandalone: true, selector: "fui-sign-up-auth-screen", outputs: { signUp: "signUp", signIn: "signIn" }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-sign-up-auth-form [signIn]="signIn" (signUp)="signUp.emit($event.user)" />
             <ng-content />
-          }
-        </fui-card-content>
-      </fui-card>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: SignUpAuthFormComponent, selector: "fui-sign-up-auth-form", outputs: ["signUp", "signIn"] }, { kind: "component", type: MultiFactorAuthAssertionFormComponent, selector: "fui-multi-factor-auth-assertion-form" }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CardComponent, selector: "fui-card" }, { kind: "component", type: CardHeaderComponent, selector: "fui-card-header" }, { kind: "component", type: CardTitleComponent, selector: "fui-card-title" }, { kind: "component", type: CardSubtitleComponent, selector: "fui-card-subtitle" }, { kind: "component", type: CardContentComponent, selector: "fui-card-content" }, { kind: "component", type: SignUpAuthFormComponent, selector: "fui-sign-up-auth-form", inputs: ["signIn"], outputs: ["signUp"] }, { kind: "component", type: MultiFactorAuthAssertionScreenComponent, selector: "fui-multi-factor-auth-assertion-screen", outputs: ["onSuccess"] }, { kind: "component", type: RedirectErrorComponent, selector: "fui-redirect-error" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: SignUpAuthScreenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "fui-sign-up-auth-screen",
                     standalone: true,
+                    host: {
+                        style: "display: block;",
+                    },
                     imports: [
                         CommonModule,
                         CardComponent,
@@ -3235,30 +4524,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                         CardSubtitleComponent,
                         CardContentComponent,
                         SignUpAuthFormComponent,
-                        MultiFactorAuthAssertionFormComponent,
+                        MultiFactorAuthAssertionScreenComponent,
                         RedirectErrorComponent,
                     ],
                     template: `
-    <div class="fui-screen">
-      <fui-card>
-        <fui-card-header>
-          <fui-card-title>{{ titleText() }}</fui-card-title>
-          <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
-        </fui-card-header>
-        <fui-card-content>
-          @if (mfaResolver()) {
-            <fui-multi-factor-auth-assertion-form />
-          } @else {
-            <fui-sign-up-auth-form (signIn)="signIn.emit()" (signUp)="signUp.emit($event)" />
-            <fui-redirect-error />
+    @if (mfaResolver()) {
+      <fui-multi-factor-auth-assertion-screen />
+    } @else {
+      <div class="fui-screen">
+        <fui-card>
+          <fui-card-header>
+            <fui-card-title>{{ titleText() }}</fui-card-title>
+            <fui-card-subtitle>{{ subtitleText() }}</fui-card-subtitle>
+          </fui-card-header>
+          <fui-card-content>
+            <fui-sign-up-auth-form [signIn]="signIn" (signUp)="signUp.emit($event.user)" />
             <ng-content />
-          }
-        </fui-card-content>
-      </fui-card>
+            <fui-redirect-error />
+          </fui-card-content>
+        </fui-card>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { signUp: [{
+                type: Output
+            }], signIn: [{
+                type: Output
+            }] } });
+
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A divider component that can display a line or a line with text in the middle.
+ */
+class DividerComponent {
+    /** Optional label text to display in the center of the divider. */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: DividerComponent, isStandalone: true, selector: "fui-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <div class="fui-divider my-6">
+      <div class="fui-divider__line"></div>
+      @if (label()) {
+        <div class="fui-divider__text">{{ label() }}</div>
+        <div class="fui-divider__line"></div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-divider",
+                    standalone: true,
+                    imports: [CommonModule],
+                    host: {
+                        style: "display: block;",
+                    },
+                    template: `
+    <div class="fui-divider my-6">
+      <div class="fui-divider__line"></div>
+      @if (label()) {
+        <div class="fui-divider__text">{{ label() }}</div>
+        <div class="fui-divider__line"></div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A content wrapper component that displays a divider and children content.
+ */
+class ContentComponent {
+    dividerOrLabel = injectTranslation("messages", "dividerOr");
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.7", type: ContentComponent, isStandalone: true, selector: "fui-content", host: { styleAttribute: "display: block;" }, ngImport: i0, template: `
+    <fui-divider [label]="dividerOrLabel()" />
+    <div class="fui-screen__children">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: DividerComponent, selector: "fui-divider", inputs: ["label"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "fui-content",
+                    standalone: true,
+                    imports: [DividerComponent],
+                    host: {
+                        style: "display: block;",
+                    },
+                    template: `
+    <fui-divider [label]="dividerOrLabel()" />
+    <div class="fui-screen__children">
+      <ng-content></ng-content>
     </div>
   `,
                 }]
-        }], propDecorators: { signUp: [{ type: i0.Output, args: ["signUp"] }], signIn: [{ type: i0.Output, args: ["signIn"] }] } });
+        }] });
 
 /**
  * Copyright 2025 Google LLC
@@ -3284,5 +4676,5 @@ if (!isDevMode()) {
  * Generated bundle index. Do not edit.
  */
 
-export { AppleSignInButtonComponent, ButtonComponent, CardComponent, ContentComponent, CountrySelectorComponent, DividerComponent, EmailLinkAuthFormComponent, EmailLinkAuthScreenComponent, FacebookSignInButtonComponent, ForgotPasswordAuthFormComponent, ForgotPasswordAuthScreenComponent, GithubSignInButtonComponent, GoogleSignInButtonComponent, MicrosoftSignInButtonComponent, MultiFactorAuthAssertionFormComponent, OAuthButtonComponent, OAuthScreenComponent, PhoneAuthFormComponent, PhoneAuthScreenComponent, PoliciesComponent, RedirectErrorComponent, SignInAuthFormComponent, SignInAuthScreenComponent, SignUpAuthFormComponent, SignUpAuthScreenComponent, SmsMultiFactorAssertionFormComponent, SmsMultiFactorAssertionPhoneFormComponent, SmsMultiFactorAssertionVerifyFormComponent, TotpMultiFactorAssertionFormComponent, TwitterSignInButtonComponent, injectCountries, injectDefaultCountry, injectEmailLinkAuthFormSchema, injectForgotPasswordAuthFormSchema, injectMultiFactorPhoneAuthNumberFormSchema, injectMultiFactorPhoneAuthVerifyFormSchema, injectMultiFactorTotpAuthNumberFormSchema, injectMultiFactorTotpAuthVerifyFormSchema, injectPhoneAuthFormSchema, injectPhoneAuthVerifyFormSchema, injectPolicies, injectRecaptchaVerifier, injectRedirectError, injectSignInAuthFormSchema, injectSignUpAuthFormSchema, injectTranslation, injectUI, provideFirebaseUI, provideFirebaseUIPolicies };
+export { AppleSignInButtonComponent, ButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardSubtitleComponent, CardTitleComponent, ContentComponent, CountrySelectorComponent, DividerComponent, EmailLinkAuthFormComponent, EmailLinkAuthScreenComponent, FacebookSignInButtonComponent, ForgotPasswordAuthFormComponent, ForgotPasswordAuthScreenComponent, GitHubSignInButtonComponent, GoogleSignInButtonComponent, MicrosoftSignInButtonComponent, MultiFactorAuthAssertionFormComponent, MultiFactorAuthAssertionScreenComponent, MultiFactorAuthEnrollmentFormComponent, MultiFactorAuthEnrollmentScreenComponent, OAuthButtonComponent, OAuthScreenComponent, PhoneAuthFormComponent, PhoneAuthScreenComponent, PoliciesComponent, RedirectErrorComponent, SignInAuthFormComponent, SignInAuthScreenComponent, SignUpAuthFormComponent, SignUpAuthScreenComponent, SmsMultiFactorAssertionFormComponent, SmsMultiFactorAssertionPhoneFormComponent, SmsMultiFactorAssertionVerifyFormComponent, SmsMultiFactorEnrollmentFormComponent, TotpMultiFactorAssertionFormComponent, TotpMultiFactorEnrollmentFormComponent, TwitterSignInButtonComponent, injectCountries, injectDefaultCountry, injectEmailLinkAuthFormSchema, injectForgotPasswordAuthFormSchema, injectMultiFactorPhoneAuthAssertionFormSchema, injectMultiFactorPhoneAuthNumberFormSchema, injectMultiFactorPhoneAuthVerifyFormSchema, injectMultiFactorTotpAuthNumberFormSchema, injectMultiFactorTotpAuthVerifyFormSchema, injectPhoneAuthFormSchema, injectPhoneAuthVerifyFormSchema, injectPolicies, injectRecaptchaVerifier, injectRedirectError, injectSignInAuthFormSchema, injectSignUpAuthFormSchema, injectTranslation, injectUI, injectUserAuthenticated, provideFirebaseUI, provideFirebaseUIPolicies };
 //# sourceMappingURL=firebase-oss-ui-angular.mjs.map