@authhero/widget 0.29.0 → 0.29.2

package/dist/esm/authhero-widget.entry.js

@@ -631,6 +631,11 @@ const AuthheroWidget = class {
      * Form data collected from inputs.
      */
     formData = {};
+    /**
+     * AbortController for an in-flight conditional mediation request.
+     * Aborted on screen change or component disconnect.
+     */
+    conditionalMediationAbort;
     /**
      * Emitted when the form is submitted.
      * The consuming application should handle the submission unless autoSubmit is true.
@@ -665,6 +670,9 @@ const AuthheroWidget = class {
      */
     screenChange;
     watchScreen(newValue) {
+        // Abort any in-flight conditional mediation when screen changes
+        this.conditionalMediationAbort?.abort();
+        this.conditionalMediationAbort = undefined;
         if (typeof newValue === "string") {
             try {
                 this._screen = JSON.parse(newValue);
@@ -898,6 +906,8 @@ const AuthheroWidget = class {
     }
     disconnectedCallback() {
         window.removeEventListener("popstate", this.handlePopState);
+        this.conditionalMediationAbort?.abort();
+        this.conditionalMediationAbort = undefined;
     }
     async componentWillLoad() {
         // Parse initial props - this prevents unnecessary state changes during hydration that cause flashes
@@ -986,6 +996,10 @@ const AuthheroWidget = class {
                     this.updateDataScreenAttribute();
                     this.persistState();
                     this.focusFirstInput();
+                    // Start WebAuthn ceremony if returned with the screen (e.g. conditional mediation)
+                    if (data.ceremony) {
+                        this.performWebAuthnCeremony(data.ceremony);
+                    }
                     return true;
                 }
             }
@@ -1177,9 +1191,19 @@ const AuthheroWidget = class {
             console.error("Invalid WebAuthn ceremony payload", ceremony);
             return;
         }
+        if (ceremony.type === "webauthn-authentication-conditional") {
+            // Conditional mediation runs in the background, no requestAnimationFrame needed
+            this.executeWebAuthnConditionalMediation(ceremony);
+            return;
+        }
         requestAnimationFrame(() => {
             this.overrideFormSubmit();
-            this.executeWebAuthnRegistration(ceremony);
+            if (ceremony.type === "webauthn-authentication") {
+                this.executeWebAuthnAuthentication(ceremony);
+            }
+            else {
+                this.executeWebAuthnRegistration(ceremony);
+            }
         });
     }
     /**
@@ -1190,8 +1214,6 @@ const AuthheroWidget = class {
         if (typeof data !== "object" || data === null)
             return false;
         const obj = data;
-        if (obj.type !== "webauthn-registration")
-            return false;
         if (typeof obj.successAction !== "string")
             return false;
         const opts = obj.options;
@@ -1200,23 +1222,30 @@ const AuthheroWidget = class {
         const o = opts;
         if (typeof o.challenge !== "string")
             return false;
-        const rp = o.rp;
-        if (typeof rp !== "object" || rp === null)
-            return false;
-        if (typeof rp.id !== "string" ||
-            typeof rp.name !== "string")
-            return false;
-        const user = o.user;
-        if (typeof user !== "object" || user === null)
-            return false;
-        const u = user;
-        if (typeof u.id !== "string" ||
-            typeof u.name !== "string" ||
-            typeof u.displayName !== "string")
-            return false;
-        if (!Array.isArray(o.pubKeyCredParams))
-            return false;
-        return true;
+        if (obj.type === "webauthn-registration") {
+            const rp = o.rp;
+            if (typeof rp !== "object" || rp === null)
+                return false;
+            if (typeof rp.id !== "string" ||
+                typeof rp.name !== "string")
+                return false;
+            const user = o.user;
+            if (typeof user !== "object" || user === null)
+                return false;
+            const u = user;
+            if (typeof u.id !== "string" ||
+                typeof u.name !== "string" ||
+                typeof u.displayName !== "string")
+                return false;
+            if (!Array.isArray(o.pubKeyCredParams))
+                return false;
+            return true;
+        }
+        if (obj.type === "webauthn-authentication" ||
+            obj.type === "webauthn-authentication-conditional") {
+            return true;
+        }
+        return false;
     }
     /**
      * Perform the WebAuthn navigator.credentials.create() ceremony and submit
@@ -1329,6 +1358,193 @@ const AuthheroWidget = class {
             }
         }
     }
+    /**
+     * Perform the WebAuthn navigator.credentials.get() ceremony (explicit modal)
+     * and submit the credential result via the form.
+     */
+    async executeWebAuthnAuthentication(ceremony) {
+        const opts = ceremony.options;
+        const b64uToBuf = (s) => {
+            s = s.replace(/-/g, "+").replace(/_/g, "/");
+            while (s.length % 4)
+                s += "=";
+            const b = atob(s);
+            const a = new Uint8Array(b.length);
+            for (let i = 0; i < b.length; i++)
+                a[i] = b.charCodeAt(i);
+            return a.buffer;
+        };
+        const bufToB64u = (b) => {
+            const a = new Uint8Array(b);
+            let s = "";
+            for (let i = 0; i < a.length; i++)
+                s += String.fromCharCode(a[i]);
+            return btoa(s)
+                .replace(/\+/g, "-")
+                .replace(/\//g, "_")
+                .replace(/=+$/, "");
+        };
+        const findForm = () => {
+            const shadowRoot = this.el?.shadowRoot;
+            if (shadowRoot) {
+                const f = shadowRoot.querySelector("form");
+                if (f)
+                    return f;
+            }
+            return document.querySelector("form");
+        };
+        try {
+            const publicKey = {
+                challenge: b64uToBuf(opts.challenge),
+                rpId: opts.rpId,
+                timeout: opts.timeout,
+                userVerification: opts.userVerification || "preferred",
+            };
+            if (opts.allowCredentials?.length) {
+                publicKey.allowCredentials = opts.allowCredentials.map((c) => ({
+                    id: b64uToBuf(c.id),
+                    type: c.type,
+                    transports: (c.transports || []),
+                }));
+            }
+            const cred = (await navigator.credentials.get({
+                publicKey,
+            }));
+            const response = cred.response;
+            const resp = {
+                id: cred.id,
+                rawId: bufToB64u(cred.rawId),
+                type: cred.type,
+                response: {
+                    authenticatorData: bufToB64u(response.authenticatorData),
+                    clientDataJSON: bufToB64u(response.clientDataJSON),
+                    signature: bufToB64u(response.signature),
+                },
+                clientExtensionResults: cred.getClientExtensionResults(),
+                authenticatorAttachment: cred.authenticatorAttachment || undefined,
+            };
+            if (response.userHandle) {
+                resp.response.userHandle = bufToB64u(response.userHandle);
+            }
+            const form = findForm();
+            if (form) {
+                const cf = form.querySelector('[name="credential-field"]') ||
+                    form.querySelector("#credential-field");
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (cf)
+                    cf.value = JSON.stringify(resp);
+                if (af)
+                    af.value = ceremony.successAction;
+                form.submit();
+            }
+        }
+        catch (e) {
+            console.error("WebAuthn authentication error:", e);
+            const form = findForm();
+            if (form) {
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (af)
+                    af.value = "error";
+                form.submit();
+            }
+        }
+    }
+    /**
+     * Execute WebAuthn conditional mediation (autofill-assisted passkeys).
+     * Runs in the background — the browser shows passkey suggestions in the
+     * username field's autofill dropdown. Silently ignored if unsupported.
+     */
+    async executeWebAuthnConditionalMediation(ceremony) {
+        // Feature detection
+        if (!window.PublicKeyCredential ||
+            !PublicKeyCredential.isConditionalMediationAvailable) {
+            return;
+        }
+        const available = await PublicKeyCredential.isConditionalMediationAvailable();
+        if (!available)
+            return;
+        // Abort any previous conditional mediation request
+        this.conditionalMediationAbort?.abort();
+        const abortController = new AbortController();
+        this.conditionalMediationAbort = abortController;
+        const opts = ceremony.options;
+        const b64uToBuf = (s) => {
+            s = s.replace(/-/g, "+").replace(/_/g, "/");
+            while (s.length % 4)
+                s += "=";
+            const b = atob(s);
+            const a = new Uint8Array(b.length);
+            for (let i = 0; i < b.length; i++)
+                a[i] = b.charCodeAt(i);
+            return a.buffer;
+        };
+        const bufToB64u = (b) => {
+            const a = new Uint8Array(b);
+            let s = "";
+            for (let i = 0; i < a.length; i++)
+                s += String.fromCharCode(a[i]);
+            return btoa(s)
+                .replace(/\+/g, "-")
+                .replace(/\//g, "_")
+                .replace(/=+$/, "");
+        };
+        try {
+            const cred = (await navigator.credentials.get({
+                mediation: "conditional",
+                signal: abortController.signal,
+                publicKey: {
+                    challenge: b64uToBuf(opts.challenge),
+                    rpId: opts.rpId,
+                    timeout: opts.timeout,
+                    userVerification: opts.userVerification ||
+                        "preferred",
+                },
+            }));
+            const response = cred.response;
+            const resp = {
+                id: cred.id,
+                rawId: bufToB64u(cred.rawId),
+                type: cred.type,
+                response: {
+                    authenticatorData: bufToB64u(response.authenticatorData),
+                    clientDataJSON: bufToB64u(response.clientDataJSON),
+                    signature: bufToB64u(response.signature),
+                },
+                clientExtensionResults: cred.getClientExtensionResults(),
+                authenticatorAttachment: cred.authenticatorAttachment || undefined,
+            };
+            if (response.userHandle) {
+                resp.response.userHandle = bufToB64u(response.userHandle);
+            }
+            // Submit via the widget's form handling
+            this.formData["credential-field"] = JSON.stringify(resp);
+            this.formData["action-field"] = ceremony.successAction;
+            // Ensure form submit override is set up, then submit
+            this.overrideFormSubmit();
+            const shadowRoot = this.el?.shadowRoot;
+            const form = shadowRoot?.querySelector("form");
+            if (form) {
+                // Set the hidden input values directly
+                const cf = form.querySelector('[name="credential-field"]') ||
+                    form.querySelector("#credential-field");
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (cf)
+                    cf.value = JSON.stringify(resp);
+                if (af)
+                    af.value = ceremony.successAction;
+                form.submit();
+            }
+        }
+        catch (e) {
+            // Silently ignore AbortError and NotAllowedError
+            if (e?.name === "AbortError" || e?.name === "NotAllowedError")
+                return;
+            console.error("Conditional mediation error:", e);
+        }
+    }
     handleButtonClick = (detail) => {
         // If this is a submit button click, trigger form submission
         if (detail.type === "submit") {

package/dist/types/components/authhero-widget/authhero-widget.d.ts

@@ -173,6 +173,11 @@ export declare class AuthheroWidget {
      * Form data collected from inputs.
      */
     formData: Record<string, string>;
+    /**
+     * AbortController for an in-flight conditional mediation request.
+     * Aborted on screen change or component disconnect.
+     */
+    private conditionalMediationAbort?;
     /**
      * Emitted when the form is submitted.
      * The consuming application should handle the submission unless autoSubmit is true.
@@ -282,6 +287,17 @@ export declare class AuthheroWidget {
      * the credential result via the form.
      */
     private executeWebAuthnRegistration;
+    /**
+     * Perform the WebAuthn navigator.credentials.get() ceremony (explicit modal)
+     * and submit the credential result via the form.
+     */
+    private executeWebAuthnAuthentication;
+    /**
+     * Execute WebAuthn conditional mediation (autofill-assisted passkeys).
+     * Runs in the background — the browser shows passkey suggestions in the
+     * username field's autofill dropdown. Silently ignored if unsupported.
+     */
+    private executeWebAuthnConditionalMediation;
     private handleButtonClick;
     /**
      * Handle social login redirect

package/hydrate/index.js

@@ -5557,20 +5557,21 @@ class AuthheroNode {
     renderTextField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const { multiline, max_length } = component.config ?? {};
+        const { multiline, max_length, autocomplete } = component.config ?? {};
         const effectiveValue = this.getEffectiveValue();
         const hasValue = !!(effectiveValue && effectiveValue.length > 0);
         if (multiline) {
             return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, effectiveValue ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
         }
-        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, autoComplete: autocomplete, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderEmailField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
         const effectiveValue = this.getEffectiveValue();
         const hasValue = !!(effectiveValue && effectiveValue.length > 0);
-        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "email", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const { autocomplete } = (component.config ?? {});
+        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "email", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: autocomplete || "email", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderPasswordField(component) {
         const inputId = `input-${component.id}`;
@@ -6435,6 +6436,11 @@ class AuthheroWidget {
      * Form data collected from inputs.
      */
     formData = {};
+    /**
+     * AbortController for an in-flight conditional mediation request.
+     * Aborted on screen change or component disconnect.
+     */
+    conditionalMediationAbort;
     /**
      * Emitted when the form is submitted.
      * The consuming application should handle the submission unless autoSubmit is true.
@@ -6469,6 +6475,9 @@ class AuthheroWidget {
      */
     screenChange;
     watchScreen(newValue) {
+        // Abort any in-flight conditional mediation when screen changes
+        this.conditionalMediationAbort?.abort();
+        this.conditionalMediationAbort = undefined;
         if (typeof newValue === "string") {
             try {
                 this._screen = JSON.parse(newValue);
@@ -6702,6 +6711,8 @@ class AuthheroWidget {
     }
     disconnectedCallback() {
         window.removeEventListener("popstate", this.handlePopState);
+        this.conditionalMediationAbort?.abort();
+        this.conditionalMediationAbort = undefined;
     }
     async componentWillLoad() {
         // Parse initial props - this prevents unnecessary state changes during hydration that cause flashes
@@ -6790,6 +6801,10 @@ class AuthheroWidget {
                     this.updateDataScreenAttribute();
                     this.persistState();
                     this.focusFirstInput();
+                    // Start WebAuthn ceremony if returned with the screen (e.g. conditional mediation)
+                    if (data.ceremony) {
+                        this.performWebAuthnCeremony(data.ceremony);
+                    }
                     return true;
                 }
             }
@@ -6981,9 +6996,19 @@ class AuthheroWidget {
             console.error("Invalid WebAuthn ceremony payload", ceremony);
             return;
         }
+        if (ceremony.type === "webauthn-authentication-conditional") {
+            // Conditional mediation runs in the background, no requestAnimationFrame needed
+            this.executeWebAuthnConditionalMediation(ceremony);
+            return;
+        }
         requestAnimationFrame(() => {
             this.overrideFormSubmit();
-            this.executeWebAuthnRegistration(ceremony);
+            if (ceremony.type === "webauthn-authentication") {
+                this.executeWebAuthnAuthentication(ceremony);
+            }
+            else {
+                this.executeWebAuthnRegistration(ceremony);
+            }
         });
     }
     /**
@@ -6994,8 +7019,6 @@ class AuthheroWidget {
         if (typeof data !== "object" || data === null)
             return false;
         const obj = data;
-        if (obj.type !== "webauthn-registration")
-            return false;
         if (typeof obj.successAction !== "string")
             return false;
         const opts = obj.options;
@@ -7004,23 +7027,30 @@ class AuthheroWidget {
         const o = opts;
         if (typeof o.challenge !== "string")
             return false;
-        const rp = o.rp;
-        if (typeof rp !== "object" || rp === null)
-            return false;
-        if (typeof rp.id !== "string" ||
-            typeof rp.name !== "string")
-            return false;
-        const user = o.user;
-        if (typeof user !== "object" || user === null)
-            return false;
-        const u = user;
-        if (typeof u.id !== "string" ||
-            typeof u.name !== "string" ||
-            typeof u.displayName !== "string")
-            return false;
-        if (!Array.isArray(o.pubKeyCredParams))
-            return false;
-        return true;
+        if (obj.type === "webauthn-registration") {
+            const rp = o.rp;
+            if (typeof rp !== "object" || rp === null)
+                return false;
+            if (typeof rp.id !== "string" ||
+                typeof rp.name !== "string")
+                return false;
+            const user = o.user;
+            if (typeof user !== "object" || user === null)
+                return false;
+            const u = user;
+            if (typeof u.id !== "string" ||
+                typeof u.name !== "string" ||
+                typeof u.displayName !== "string")
+                return false;
+            if (!Array.isArray(o.pubKeyCredParams))
+                return false;
+            return true;
+        }
+        if (obj.type === "webauthn-authentication" ||
+            obj.type === "webauthn-authentication-conditional") {
+            return true;
+        }
+        return false;
     }
     /**
      * Perform the WebAuthn navigator.credentials.create() ceremony and submit
@@ -7133,6 +7163,193 @@ class AuthheroWidget {
             }
         }
     }
+    /**
+     * Perform the WebAuthn navigator.credentials.get() ceremony (explicit modal)
+     * and submit the credential result via the form.
+     */
+    async executeWebAuthnAuthentication(ceremony) {
+        const opts = ceremony.options;
+        const b64uToBuf = (s) => {
+            s = s.replace(/-/g, "+").replace(/_/g, "/");
+            while (s.length % 4)
+                s += "=";
+            const b = atob(s);
+            const a = new Uint8Array(b.length);
+            for (let i = 0; i < b.length; i++)
+                a[i] = b.charCodeAt(i);
+            return a.buffer;
+        };
+        const bufToB64u = (b) => {
+            const a = new Uint8Array(b);
+            let s = "";
+            for (let i = 0; i < a.length; i++)
+                s += String.fromCharCode(a[i]);
+            return btoa(s)
+                .replace(/\+/g, "-")
+                .replace(/\//g, "_")
+                .replace(/=+$/, "");
+        };
+        const findForm = () => {
+            const shadowRoot = this.el?.shadowRoot;
+            if (shadowRoot) {
+                const f = shadowRoot.querySelector("form");
+                if (f)
+                    return f;
+            }
+            return document.querySelector("form");
+        };
+        try {
+            const publicKey = {
+                challenge: b64uToBuf(opts.challenge),
+                rpId: opts.rpId,
+                timeout: opts.timeout,
+                userVerification: opts.userVerification || "preferred",
+            };
+            if (opts.allowCredentials?.length) {
+                publicKey.allowCredentials = opts.allowCredentials.map((c) => ({
+                    id: b64uToBuf(c.id),
+                    type: c.type,
+                    transports: (c.transports || []),
+                }));
+            }
+            const cred = (await navigator.credentials.get({
+                publicKey,
+            }));
+            const response = cred.response;
+            const resp = {
+                id: cred.id,
+                rawId: bufToB64u(cred.rawId),
+                type: cred.type,
+                response: {
+                    authenticatorData: bufToB64u(response.authenticatorData),
+                    clientDataJSON: bufToB64u(response.clientDataJSON),
+                    signature: bufToB64u(response.signature),
+                },
+                clientExtensionResults: cred.getClientExtensionResults(),
+                authenticatorAttachment: cred.authenticatorAttachment || undefined,
+            };
+            if (response.userHandle) {
+                resp.response.userHandle = bufToB64u(response.userHandle);
+            }
+            const form = findForm();
+            if (form) {
+                const cf = form.querySelector('[name="credential-field"]') ||
+                    form.querySelector("#credential-field");
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (cf)
+                    cf.value = JSON.stringify(resp);
+                if (af)
+                    af.value = ceremony.successAction;
+                form.submit();
+            }
+        }
+        catch (e) {
+            console.error("WebAuthn authentication error:", e);
+            const form = findForm();
+            if (form) {
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (af)
+                    af.value = "error";
+                form.submit();
+            }
+        }
+    }
+    /**
+     * Execute WebAuthn conditional mediation (autofill-assisted passkeys).
+     * Runs in the background — the browser shows passkey suggestions in the
+     * username field's autofill dropdown. Silently ignored if unsupported.
+     */
+    async executeWebAuthnConditionalMediation(ceremony) {
+        // Feature detection
+        if (!window.PublicKeyCredential ||
+            !PublicKeyCredential.isConditionalMediationAvailable) {
+            return;
+        }
+        const available = await PublicKeyCredential.isConditionalMediationAvailable();
+        if (!available)
+            return;
+        // Abort any previous conditional mediation request
+        this.conditionalMediationAbort?.abort();
+        const abortController = new AbortController();
+        this.conditionalMediationAbort = abortController;
+        const opts = ceremony.options;
+        const b64uToBuf = (s) => {
+            s = s.replace(/-/g, "+").replace(/_/g, "/");
+            while (s.length % 4)
+                s += "=";
+            const b = atob(s);
+            const a = new Uint8Array(b.length);
+            for (let i = 0; i < b.length; i++)
+                a[i] = b.charCodeAt(i);
+            return a.buffer;
+        };
+        const bufToB64u = (b) => {
+            const a = new Uint8Array(b);
+            let s = "";
+            for (let i = 0; i < a.length; i++)
+                s += String.fromCharCode(a[i]);
+            return btoa(s)
+                .replace(/\+/g, "-")
+                .replace(/\//g, "_")
+                .replace(/=+$/, "");
+        };
+        try {
+            const cred = (await navigator.credentials.get({
+                mediation: "conditional",
+                signal: abortController.signal,
+                publicKey: {
+                    challenge: b64uToBuf(opts.challenge),
+                    rpId: opts.rpId,
+                    timeout: opts.timeout,
+                    userVerification: opts.userVerification ||
+                        "preferred",
+                },
+            }));
+            const response = cred.response;
+            const resp = {
+                id: cred.id,
+                rawId: bufToB64u(cred.rawId),
+                type: cred.type,
+                response: {
+                    authenticatorData: bufToB64u(response.authenticatorData),
+                    clientDataJSON: bufToB64u(response.clientDataJSON),
+                    signature: bufToB64u(response.signature),
+                },
+                clientExtensionResults: cred.getClientExtensionResults(),
+                authenticatorAttachment: cred.authenticatorAttachment || undefined,
+            };
+            if (response.userHandle) {
+                resp.response.userHandle = bufToB64u(response.userHandle);
+            }
+            // Submit via the widget's form handling
+            this.formData["credential-field"] = JSON.stringify(resp);
+            this.formData["action-field"] = ceremony.successAction;
+            // Ensure form submit override is set up, then submit
+            this.overrideFormSubmit();
+            const shadowRoot = this.el?.shadowRoot;
+            const form = shadowRoot?.querySelector("form");
+            if (form) {
+                // Set the hidden input values directly
+                const cf = form.querySelector('[name="credential-field"]') ||
+                    form.querySelector("#credential-field");
+                const af = form.querySelector('[name="action-field"]') ||
+                    form.querySelector("#action-field");
+                if (cf)
+                    cf.value = JSON.stringify(resp);
+                if (af)
+                    af.value = ceremony.successAction;
+                form.submit();
+            }
+        }
+        catch (e) {
+            // Silently ignore AbortError and NotAllowedError
+            if (e?.name === "AbortError" || e?.name === "NotAllowedError")
+                return;
+            console.error("Conditional mediation error:", e);
+        }
+    }
     handleButtonClick = (detail) => {
         // If this is a submit button click, trigger form submission
         if (detail.type === "submit") {