@authhero/widget 0.20.0 → 0.21.0

package/hydrate/index.js

@@ -5360,7 +5360,9 @@ class AuthheroNode {
                 const dialLocal = this.detectDialCodeFromInput(value);
                 if (dialLocal !== null) {
                     // Dial code matched — strip it from the input and show only local part
-                    const cleanedLocal = dialLocal.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "");
+                    const cleanedLocal = dialLocal
+                        .replace(/[^+\d\s\-()]/g, "")
+                        .replace(/\+/g, "");
                     target.value = cleanedLocal;
                     this.localPhoneNumber = cleanedLocal;
                     const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
@@ -5596,7 +5598,7 @@ class AuthheroNode {
         // Calculate dynamic width: flag + space + dial code + small padding for dropdown arrow
         const selectedText = `${this.selectedCountry.flag} ${this.selectedCountry.dialCode}`;
         const selectWidth = `${selectedText.length + 1}ch`;
-        const countrySelect = showCountryPicker ? (hAsync("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (hAsync("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, country.flag, " ", country.dialCode))))) : null;
+        const countrySelect = showCountryPicker ? (hAsync("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (hAsync("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, `${country.flag} ${country.dialCode}`))))) : null;
         const inputType = allowEmail && this.telEmailMode ? "text" : "tel";
         return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: showCountryPicker ? "phone-input-wrapper" : "", part: "phone-input-wrapper" }, countrySelect, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: inputType, name: component.id, "data-input-name": component.id, value: this.localPhoneNumber, placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: allowEmail && this.telEmailMode ? "email" : "tel-national", onInput: this.handlePhoneInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
@@ -5675,7 +5677,21 @@ class AuthheroNode {
             const safeProvider = this.sanitizeForCssToken(provider);
             const strategy = getProviderStrategy(provider);
             const icon = getProviderIcon(provider);
-            return (hAsync("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, hAsync("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, hAsync("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), hAsync("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` }))));
+            const details = detailsMap.get(provider);
+            const btnClass = `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`;
+            const btnPart = `button button-secondary button-social button-social-${safeProvider}`;
+            const content = [
+                icon,
+                hAsync("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, hAsync("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), hAsync("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` })),
+            ];
+            if (details?.href) {
+                return (hAsync("a", { href: this.disabled ? undefined : details.href, class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, key: provider, "aria-disabled": this.disabled ? "true" : undefined, tabindex: this.disabled ? -1 : undefined, onClick: (e) => {
+                        if (this.disabled) {
+                            e.preventDefault();
+                        }
+                    } }, content));
+            }
+            return (hAsync("button", { type: "button", class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, content));
         })));
     }
     // ===========================================================================
@@ -5783,6 +5799,76 @@ class AuthheroNode {
  *
  * Converts AuthHero branding and theme configurations to CSS custom properties.
  */
+// --- Inline WCAG contrast utilities (small footprint, no external deps) ---
+function parseHexColor(hex) {
+    const match = hex.match(/^#([0-9a-f]{3})$/i) || hex.match(/^#([0-9a-f]{6})$/i);
+    if (!match)
+        return null;
+    let clean = match[1];
+    if (clean.length === 3) {
+        clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
+    }
+    const num = parseInt(clean, 16);
+    return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+}
+function srgbLuminance(hex) {
+    const rgb = parseHexColor(hex);
+    if (!rgb)
+        return NaN;
+    const [r, g, b] = rgb.map((c) => {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function wcagContrastRatio(hex1, hex2) {
+    const l1 = srgbLuminance(hex1);
+    const l2 = srgbLuminance(hex2);
+    if (isNaN(l1) || isNaN(l2))
+        return NaN;
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+function autoTextColor(backgroundHex, mode = "light") {
+    const blackContrast = wcagContrastRatio(backgroundHex, "#000000");
+    const whiteContrast = wcagContrastRatio(backgroundHex, "#ffffff");
+    const BIAS = 1.35;
+    if (mode === "light") {
+        return blackContrast > whiteContrast * BIAS ? "#000000" : "#ffffff";
+    }
+    return blackContrast * BIAS > whiteContrast ? "#000000" : "#ffffff";
+}
+function darkenHex(hex, percent) {
+    const rgb = parseHexColor(hex);
+    if (!rgb)
+        return hex;
+    const [r, g, b] = rgb;
+    const toHex = (v) => Math.max(0, Math.round(v * (1 - percent)))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lightenHex(hex, percent) {
+    const rgb = parseHexColor(hex);
+    if (!rgb)
+        return hex;
+    const [r, g, b] = rgb;
+    const toHex = (v) => Math.min(255, Math.round(v + (255 - v) * percent))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function ensureContrastColor(fg, bg, minRatio = 4.5) {
+    if (wcagContrastRatio(fg, bg) >= minRatio)
+        return fg;
+    const shouldDarken = srgbLuminance(bg) > 0.5;
+    let adjusted = fg;
+    for (let i = 1; i <= 10; i++) {
+        adjusted = shouldDarken ? darkenHex(fg, i * 0.1) : lightenHex(fg, i * 0.1);
+        if (wcagContrastRatio(adjusted, bg) >= minRatio)
+            return adjusted;
+    }
+    return shouldDarken ? "#000000" : "#ffffff";
+}
 /**
  * Convert a style enum to border radius value
  */
@@ -5879,9 +5965,22 @@ function themeToCssVars(theme) {
         if (c.primary_button) {
             vars["--ah-color-primary"] = c.primary_button;
             vars["--ah-color-primary-hover"] = c.primary_button;
+            // Auto-compute text-on-primary for contrast
+            const hasGoodExplicit = c.primary_button_label &&
+                wcagContrastRatio(c.primary_button_label, c.primary_button) >= 4.5;
+            if (hasGoodExplicit) {
+                vars["--ah-color-text-on-primary"] = c.primary_button_label;
+            }
+            else {
+                vars["--ah-color-text-on-primary"] = autoTextColor(c.primary_button, "light");
+                const darkText = autoTextColor(c.primary_button, "dark");
+                if (darkText !== vars["--ah-color-text-on-primary"]) {
+                    vars["--ah-color-text-on-primary-dark"] = darkText;
+                }
+            }
         }
-        if (c.primary_button_label) {
-            vars["--ah-btn-primary-text"] = c.primary_button_label;
+        else if (c.primary_button_label) {
+            vars["--ah-color-text-on-primary"] = c.primary_button_label;
         }
         // Secondary button
         if (c.secondary_button_border) {
@@ -5918,9 +6017,10 @@ function themeToCssVars(theme) {
         if (c.input_border) {
             vars["--ah-color-border"] = c.input_border;
         }
-        // Links
+        // Links — ensure contrast against widget background
         if (c.links_focused_components) {
-            vars["--ah-color-link"] = c.links_focused_components;
+            const widgetBg = c.widget_background || "#ffffff";
+            vars["--ah-color-link"] = ensureContrastColor(c.links_focused_components, widgetBg);
         }
         // Focus/hover
         if (c.base_focus_color) {
@@ -5946,6 +6046,10 @@ function themeToCssVars(theme) {
         const f = theme.fonts;
         // reference_text_size is the base font size in pixels (default 16px)
         const baseSize = f.reference_text_size || 16;
+        // Font sizes can be stored as percentages (Auth0 convention, e.g. 150 = 150% of base)
+        // or as absolute pixel values (e.g. 24 = 24px). Values >= 50 are treated as
+        // percentages; values < 50 are treated as direct pixel values.
+        const fontSizePx = (size) => size >= 50 ? Math.round((size / 100) * baseSize) : size;
         if (f.font_url) {
             vars["--ah-font-url"] = f.font_url;
         }
@@ -5954,28 +6058,22 @@ function themeToCssVars(theme) {
         }
         // Title, subtitle, etc. sizes are percentages of the base size
         if (f.title?.size) {
-            const titlePx = Math.round((f.title.size / 100) * baseSize);
-            vars["--ah-font-size-title"] = `${titlePx}px`;
+            vars["--ah-font-size-title"] = `${fontSizePx(f.title.size)}px`;
         }
         if (f.subtitle?.size) {
-            const subtitlePx = Math.round((f.subtitle.size / 100) * baseSize);
-            vars["--ah-font-size-subtitle"] = `${subtitlePx}px`;
+            vars["--ah-font-size-subtitle"] = `${fontSizePx(f.subtitle.size)}px`;
         }
         if (f.body_text?.size) {
-            const bodyPx = Math.round((f.body_text.size / 100) * baseSize);
-            vars["--ah-font-size-body"] = `${bodyPx}px`;
+            vars["--ah-font-size-body"] = `${fontSizePx(f.body_text.size)}px`;
         }
         if (f.input_labels?.size) {
-            const labelPx = Math.round((f.input_labels.size / 100) * baseSize);
-            vars["--ah-font-size-label"] = `${labelPx}px`;
+            vars["--ah-font-size-label"] = `${fontSizePx(f.input_labels.size)}px`;
         }
         if (f.buttons_text?.size) {
-            const btnPx = Math.round((f.buttons_text.size / 100) * baseSize);
-            vars["--ah-font-size-btn"] = `${btnPx}px`;
+            vars["--ah-font-size-btn"] = `${fontSizePx(f.buttons_text.size)}px`;
         }
         if (f.links?.size) {
-            const linkPx = Math.round((f.links.size / 100) * baseSize);
-            vars["--ah-font-size-link"] = `${linkPx}px`;
+            vars["--ah-font-size-link"] = `${fontSizePx(f.links.size)}px`;
         }
         if (f.links_style === "underlined") {
             vars["--ah-link-decoration"] = "underline";
@@ -6803,6 +6901,18 @@ class AuthheroWidget {
         this.buttonClick.emit(detail);
         // Handle social login if autoNavigate is enabled
         if (detail.type === "SOCIAL" && detail.value && this.shouldAutoNavigate) {
+            // Check if this provider has an href (e.g. passwordless connections)
+            const providerHref = this.getProviderHref(detail.value);
+            if (providerHref) {
+                const screenId = this.extractScreenIdFromHref(providerHref);
+                if (screenId && this.apiUrl) {
+                    this.navigateToScreen(screenId, providerHref);
+                }
+                else {
+                    window.location.href = providerHref;
+                }
+                return;
+            }
             this.handleSocialLogin(detail.value);
             return;
         }
@@ -6926,6 +7036,23 @@ class AuthheroWidget {
             window.location.href = displayUrl;
         }
     }
+    /**
+     * Look up the href for a social provider from the current screen's SOCIAL components.
+     * Returns the href if found (e.g. for passwordless connections), or null.
+     */
+    getProviderHref(connectionName) {
+        if (!this._screen)
+            return null;
+        for (const comp of this._screen.components) {
+            const c = comp;
+            if (c.type === "SOCIAL" && c.config?.provider_details) {
+                const match = c.config.provider_details.find((d) => d.name === connectionName);
+                if (match?.href)
+                    return match.href;
+            }
+        }
+        return null;
+    }
     /**
      * Check if a component is a social button.
      */

package/hydrate/index.mjs

@@ -5358,7 +5358,9 @@ class AuthheroNode {
                 const dialLocal = this.detectDialCodeFromInput(value);
                 if (dialLocal !== null) {
                     // Dial code matched — strip it from the input and show only local part
-                    const cleanedLocal = dialLocal.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "");
+                    const cleanedLocal = dialLocal
+                        .replace(/[^+\d\s\-()]/g, "")
+                        .replace(/\+/g, "");
                     target.value = cleanedLocal;
                     this.localPhoneNumber = cleanedLocal;
                     const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
@@ -5594,7 +5596,7 @@ class AuthheroNode {
         // Calculate dynamic width: flag + space + dial code + small padding for dropdown arrow
         const selectedText = `${this.selectedCountry.flag} ${this.selectedCountry.dialCode}`;
         const selectWidth = `${selectedText.length + 1}ch`;
-        const countrySelect = showCountryPicker ? (hAsync("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (hAsync("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, country.flag, " ", country.dialCode))))) : null;
+        const countrySelect = showCountryPicker ? (hAsync("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (hAsync("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, `${country.flag} ${country.dialCode}`))))) : null;
         const inputType = allowEmail && this.telEmailMode ? "text" : "tel";
         return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: showCountryPicker ? "phone-input-wrapper" : "", part: "phone-input-wrapper" }, countrySelect, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: inputType, name: component.id, "data-input-name": component.id, value: this.localPhoneNumber, placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: allowEmail && this.telEmailMode ? "email" : "tel-national", onInput: this.handlePhoneInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
@@ -5673,7 +5675,21 @@ class AuthheroNode {
             const safeProvider = this.sanitizeForCssToken(provider);
             const strategy = getProviderStrategy(provider);
             const icon = getProviderIcon(provider);
-            return (hAsync("button", { type: "button", class: `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`, part: `button button-secondary button-social button-social-${safeProvider}`, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, icon, hAsync("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, hAsync("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), hAsync("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` }))));
+            const details = detailsMap.get(provider);
+            const btnClass = `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`;
+            const btnPart = `button button-secondary button-social button-social-${safeProvider}`;
+            const content = [
+                icon,
+                hAsync("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, hAsync("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), hAsync("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` })),
+            ];
+            if (details?.href) {
+                return (hAsync("a", { href: this.disabled ? undefined : details.href, class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, key: provider, "aria-disabled": this.disabled ? "true" : undefined, tabindex: this.disabled ? -1 : undefined, onClick: (e) => {
+                        if (this.disabled) {
+                            e.preventDefault();
+                        }
+                    } }, content));
+            }
+            return (hAsync("button", { type: "button", class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, content));
         })));
     }
     // ===========================================================================
@@ -5781,6 +5797,76 @@ class AuthheroNode {
  *
  * Converts AuthHero branding and theme configurations to CSS custom properties.
  */
+// --- Inline WCAG contrast utilities (small footprint, no external deps) ---
+function parseHexColor(hex) {
+    const match = hex.match(/^#([0-9a-f]{3})$/i) || hex.match(/^#([0-9a-f]{6})$/i);
+    if (!match)
+        return null;
+    let clean = match[1];
+    if (clean.length === 3) {
+        clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
+    }
+    const num = parseInt(clean, 16);
+    return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+}
+function srgbLuminance(hex) {
+    const rgb = parseHexColor(hex);
+    if (!rgb)
+        return NaN;
+    const [r, g, b] = rgb.map((c) => {
+        const s = c / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function wcagContrastRatio(hex1, hex2) {
+    const l1 = srgbLuminance(hex1);
+    const l2 = srgbLuminance(hex2);
+    if (isNaN(l1) || isNaN(l2))
+        return NaN;
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+function autoTextColor(backgroundHex, mode = "light") {
+    const blackContrast = wcagContrastRatio(backgroundHex, "#000000");
+    const whiteContrast = wcagContrastRatio(backgroundHex, "#ffffff");
+    const BIAS = 1.35;
+    if (mode === "light") {
+        return blackContrast > whiteContrast * BIAS ? "#000000" : "#ffffff";
+    }
+    return blackContrast * BIAS > whiteContrast ? "#000000" : "#ffffff";
+}
+function darkenHex(hex, percent) {
+    const rgb = parseHexColor(hex);
+    if (!rgb)
+        return hex;
+    const [r, g, b] = rgb;
+    const toHex = (v) => Math.max(0, Math.round(v * (1 - percent)))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lightenHex(hex, percent) {
+    const rgb = parseHexColor(hex);
+    if (!rgb)
+        return hex;
+    const [r, g, b] = rgb;
+    const toHex = (v) => Math.min(255, Math.round(v + (255 - v) * percent))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function ensureContrastColor(fg, bg, minRatio = 4.5) {
+    if (wcagContrastRatio(fg, bg) >= minRatio)
+        return fg;
+    const shouldDarken = srgbLuminance(bg) > 0.5;
+    let adjusted = fg;
+    for (let i = 1; i <= 10; i++) {
+        adjusted = shouldDarken ? darkenHex(fg, i * 0.1) : lightenHex(fg, i * 0.1);
+        if (wcagContrastRatio(adjusted, bg) >= minRatio)
+            return adjusted;
+    }
+    return shouldDarken ? "#000000" : "#ffffff";
+}
 /**
  * Convert a style enum to border radius value
  */
@@ -5877,9 +5963,22 @@ function themeToCssVars(theme) {
         if (c.primary_button) {
             vars["--ah-color-primary"] = c.primary_button;
             vars["--ah-color-primary-hover"] = c.primary_button;
+            // Auto-compute text-on-primary for contrast
+            const hasGoodExplicit = c.primary_button_label &&
+                wcagContrastRatio(c.primary_button_label, c.primary_button) >= 4.5;
+            if (hasGoodExplicit) {
+                vars["--ah-color-text-on-primary"] = c.primary_button_label;
+            }
+            else {
+                vars["--ah-color-text-on-primary"] = autoTextColor(c.primary_button, "light");
+                const darkText = autoTextColor(c.primary_button, "dark");
+                if (darkText !== vars["--ah-color-text-on-primary"]) {
+                    vars["--ah-color-text-on-primary-dark"] = darkText;
+                }
+            }
         }
-        if (c.primary_button_label) {
-            vars["--ah-btn-primary-text"] = c.primary_button_label;
+        else if (c.primary_button_label) {
+            vars["--ah-color-text-on-primary"] = c.primary_button_label;
         }
         // Secondary button
         if (c.secondary_button_border) {
@@ -5916,9 +6015,10 @@ function themeToCssVars(theme) {
         if (c.input_border) {
             vars["--ah-color-border"] = c.input_border;
         }
-        // Links
+        // Links — ensure contrast against widget background
         if (c.links_focused_components) {
-            vars["--ah-color-link"] = c.links_focused_components;
+            const widgetBg = c.widget_background || "#ffffff";
+            vars["--ah-color-link"] = ensureContrastColor(c.links_focused_components, widgetBg);
         }
         // Focus/hover
         if (c.base_focus_color) {
@@ -5944,6 +6044,10 @@ function themeToCssVars(theme) {
         const f = theme.fonts;
         // reference_text_size is the base font size in pixels (default 16px)
         const baseSize = f.reference_text_size || 16;
+        // Font sizes can be stored as percentages (Auth0 convention, e.g. 150 = 150% of base)
+        // or as absolute pixel values (e.g. 24 = 24px). Values >= 50 are treated as
+        // percentages; values < 50 are treated as direct pixel values.
+        const fontSizePx = (size) => size >= 50 ? Math.round((size / 100) * baseSize) : size;
         if (f.font_url) {
             vars["--ah-font-url"] = f.font_url;
         }
@@ -5952,28 +6056,22 @@ function themeToCssVars(theme) {
         }
         // Title, subtitle, etc. sizes are percentages of the base size
         if (f.title?.size) {
-            const titlePx = Math.round((f.title.size / 100) * baseSize);
-            vars["--ah-font-size-title"] = `${titlePx}px`;
+            vars["--ah-font-size-title"] = `${fontSizePx(f.title.size)}px`;
         }
         if (f.subtitle?.size) {
-            const subtitlePx = Math.round((f.subtitle.size / 100) * baseSize);
-            vars["--ah-font-size-subtitle"] = `${subtitlePx}px`;
+            vars["--ah-font-size-subtitle"] = `${fontSizePx(f.subtitle.size)}px`;
         }
         if (f.body_text?.size) {
-            const bodyPx = Math.round((f.body_text.size / 100) * baseSize);
-            vars["--ah-font-size-body"] = `${bodyPx}px`;
+            vars["--ah-font-size-body"] = `${fontSizePx(f.body_text.size)}px`;
         }
         if (f.input_labels?.size) {
-            const labelPx = Math.round((f.input_labels.size / 100) * baseSize);
-            vars["--ah-font-size-label"] = `${labelPx}px`;
+            vars["--ah-font-size-label"] = `${fontSizePx(f.input_labels.size)}px`;
         }
         if (f.buttons_text?.size) {
-            const btnPx = Math.round((f.buttons_text.size / 100) * baseSize);
-            vars["--ah-font-size-btn"] = `${btnPx}px`;
+            vars["--ah-font-size-btn"] = `${fontSizePx(f.buttons_text.size)}px`;
         }
         if (f.links?.size) {
-            const linkPx = Math.round((f.links.size / 100) * baseSize);
-            vars["--ah-font-size-link"] = `${linkPx}px`;
+            vars["--ah-font-size-link"] = `${fontSizePx(f.links.size)}px`;
         }
         if (f.links_style === "underlined") {
             vars["--ah-link-decoration"] = "underline";
@@ -6801,6 +6899,18 @@ class AuthheroWidget {
         this.buttonClick.emit(detail);
         // Handle social login if autoNavigate is enabled
         if (detail.type === "SOCIAL" && detail.value && this.shouldAutoNavigate) {
+            // Check if this provider has an href (e.g. passwordless connections)
+            const providerHref = this.getProviderHref(detail.value);
+            if (providerHref) {
+                const screenId = this.extractScreenIdFromHref(providerHref);
+                if (screenId && this.apiUrl) {
+                    this.navigateToScreen(screenId, providerHref);
+                }
+                else {
+                    window.location.href = providerHref;
+                }
+                return;
+            }
             this.handleSocialLogin(detail.value);
             return;
         }
@@ -6924,6 +7034,23 @@ class AuthheroWidget {
             window.location.href = displayUrl;
         }
     }
+    /**
+     * Look up the href for a social provider from the current screen's SOCIAL components.
+     * Returns the href if found (e.g. for passwordless connections), or null.
+     */
+    getProviderHref(connectionName) {
+        if (!this._screen)
+            return null;
+        for (const comp of this._screen.components) {
+            const c = comp;
+            if (c.type === "SOCIAL" && c.config?.provider_details) {
+                const match = c.config.provider_details.find((d) => d.name === connectionName);
+                if (match?.href)
+                    return match.href;
+            }
+        }
+        return null;
+    }
     /**
      * Check if a component is a social button.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/widget",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Server-Driven UI widget for AuthHero authentication flows",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     }
   },
   "dependencies": {
-    "@authhero/adapter-interfaces": "0.146.0"
+    "@authhero/adapter-interfaces": "0.147.0"
   },
   "devDependencies": {
     "@hono/node-server": "^1.14.1",

package/dist/authhero-widget/p-a92fa18e.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,g as i,h as s}from"./p-BFP_5sHV.js";function o(t,e){if(void 0!==e)return`${e}px`;switch(t){case"pill":return"9999px";case"rounded":return"8px";case"sharp":return"0";default:return}}function r(t){if(!t)return{};const e={};if(t.colors?.primary&&(e["--ah-color-primary"]=t.colors.primary,e["--ah-color-primary-hover"]=t.colors.primary),t.colors?.page_background){const i=t.colors.page_background;"solid"===i.type&&i.start?e["--ah-page-bg"]=i.start:"gradient"===i.type&&i.start&&i.end&&(e["--ah-page-bg"]=`linear-gradient(${i.angle_deg??180}deg, ${i.start}, ${i.end})`)}return t.logo_url&&(e["--ah-logo-url"]=`url(${t.logo_url})`),t.font?.url&&(e["--ah-font-url"]=t.font.url),e}function n(t){if(!t)return{};const e={};if(t.borders){const i=t.borders;void 0!==i.widget_corner_radius&&(e["--ah-widget-radius"]=`${i.widget_corner_radius}px`),void 0!==i.widget_border_weight&&(e["--ah-widget-border-width"]=`${i.widget_border_weight}px`),!1===i.show_widget_shadow&&(e["--ah-widget-shadow"]="none");const s=o(i.buttons_style,i.button_border_radius);s&&(e["--ah-btn-radius"]=s),void 0!==i.button_border_weight&&(e["--ah-btn-border-width"]=`${i.button_border_weight}px`);const r=o(i.inputs_style,i.input_border_radius);r&&(e["--ah-input-radius"]=r),void 0!==i.input_border_weight&&(e["--ah-input-border-width"]=`${i.input_border_weight}px`)}if(t.colors){const i=t.colors;i.primary_button&&(e["--ah-color-primary"]=i.primary_button,e["--ah-color-primary-hover"]=i.primary_button),i.primary_button_label&&(e["--ah-btn-primary-text"]=i.primary_button_label),i.secondary_button_border&&(e["--ah-btn-secondary-border"]=i.secondary_button_border),i.secondary_button_label&&(e["--ah-btn-secondary-text"]=i.secondary_button_label),i.body_text&&(e["--ah-color-text"]=i.body_text),i.header&&(e["--ah-color-text-header"]=i.header),i.input_labels_placeholders&&(e["--ah-color-text-label"]=i.input_labels_placeholders,e["--ah-color-text-muted"]=i.input_labels_placeholders),i.input_filled_text&&(e["--ah-color-input-text"]=i.input_filled_text),i.widget_background&&(e["--ah-color-bg"]=i.widget_background),i.input_background&&(e["--ah-color-input-bg"]=i.input_background),i.widget_border&&(e["--ah-widget-border-color"]=i.widget_border),i.input_border&&(e["--ah-color-border"]=i.input_border),i.links_focused_components&&(e["--ah-color-link"]=i.links_focused_components),i.base_focus_color&&(e["--ah-color-focus-ring"]=i.base_focus_color),i.base_hover_color&&(e["--ah-color-primary-hover"]=i.base_hover_color),i.error&&(e["--ah-color-error"]=i.error),i.success&&(e["--ah-color-success"]=i.success),i.icons&&(e["--ah-color-icon"]=i.icons)}if(t.fonts){const i=t.fonts,s=i.reference_text_size||16;if(i.font_url&&(e["--ah-font-url"]=i.font_url),i.reference_text_size&&(e["--ah-font-size-base"]=`${i.reference_text_size}px`),i.title?.size){const t=Math.round(i.title.size/100*s);e["--ah-font-size-title"]=`${t}px`}if(i.subtitle?.size){const t=Math.round(i.subtitle.size/100*s);e["--ah-font-size-subtitle"]=`${t}px`}if(i.body_text?.size){const t=Math.round(i.body_text.size/100*s);e["--ah-font-size-body"]=`${t}px`}if(i.input_labels?.size){const t=Math.round(i.input_labels.size/100*s);e["--ah-font-size-label"]=`${t}px`}if(i.buttons_text?.size){const t=Math.round(i.buttons_text.size/100*s);e["--ah-font-size-btn"]=`${t}px`}if(i.links?.size){const t=Math.round(i.links.size/100*s);e["--ah-font-size-link"]=`${t}px`}"underlined"===i.links_style&&(e["--ah-link-decoration"]="underline"),void 0!==i.title?.bold&&(e["--ah-font-weight-title"]=i.title.bold?"700":"400"),void 0!==i.subtitle?.bold&&(e["--ah-font-weight-subtitle"]=i.subtitle.bold?"700":"400"),void 0!==i.body_text?.bold&&(e["--ah-font-weight-body"]=i.body_text.bold?"700":"400"),void 0!==i.input_labels?.bold&&(e["--ah-font-weight-label"]=i.input_labels.bold?"700":"400"),void 0!==i.buttons_text?.bold&&(e["--ah-font-weight-btn"]=i.buttons_text.bold?"600":"400"),void 0!==i.links?.bold&&(e["--ah-font-weight-link"]=i.links.bold?"700":"400")}if(t.widget){const i=t.widget;if(i.header_text_alignment&&(e["--ah-title-align"]=i.header_text_alignment),i.logo_height&&(e["--ah-logo-height"]=`${i.logo_height}px`),i.logo_position){const t={center:"center",left:"flex-start",right:"flex-end"};"none"===i.logo_position?e["--ah-logo-display"]="none":e["--ah-logo-align"]=t[i.logo_position]??"center"}i.social_buttons_layout&&("top"===i.social_buttons_layout?(e["--ah-social-order"]="0",e["--ah-divider-order"]="1",e["--ah-fields-order"]="2"):(e["--ah-social-order"]="2",e["--ah-divider-order"]="1",e["--ah-fields-order"]="0"))}if(t.page_background){const i=t.page_background;i.background_color&&(e["--ah-page-bg"]=i.background_color),i.background_image_url&&(e["--ah-page-bg-image"]=`url(${i.background_image_url})`)}return e}const a={br:[],em:[],i:[],strong:[],b:[],u:[],span:["class"],a:["href","class"]};function c(t){if(!t)return"";if(!t.includes("<"))return t;let e=t;e=e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;");for(const[t,i]of Object.entries(a)){if("br"===t){e=e.replace(/&lt;br\s*\/?&gt;/gi,"<br>");continue}const s=new RegExp(`&lt;${t}((?:\\s+[a-z-]+(?:=&quot;[^&]*&quot;|=&#39;[^&]*&#39;)?)*)\\s*&gt;`,"gi");e=e.replace(s,((e,s)=>{const o=[];if(s){const t=s.replace(/&quot;/g,'"').replace(/&#39;/g,"'").replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">"),e=/([a-z-]+)=["']([^"']*)["']/gi;let r;for(;null!==(r=e.exec(t));){const[,t,e]=r;t&&i.includes(t.toLowerCase())&&("href"===t.toLowerCase()?h(e||"")&&o.push(`${t}="${l(e||"")}"`):o.push(`${t}="${l(e||"")}"`))}}"a"===t&&(o.push('target="_blank"'),o.push('rel="noopener noreferrer"'));const r=o.length?" "+o.join(" "):"";return`<${t}${r}>`}));const o=new RegExp(`&lt;/${t}&gt;`,"gi");e=e.replace(o,`</${t}>`)}return e}function h(t){if(!t)return!1;if(t.startsWith("/")||t.startsWith("#")||t.startsWith("?"))return!0;try{const e=new URL(t,"https://example.com");return"http:"===e.protocol||"https:"===e.protocol}catch{return!1}}function l(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const d=class{constructor(i){t(this,i),this.formSubmit=e(this,"formSubmit"),this.buttonClick=e(this,"buttonClick"),this.linkClick=e(this,"linkClick"),this.navigate=e(this,"navigate"),this.flowComplete=e(this,"flowComplete"),this.flowError=e(this,"flowError"),this.screenChange=e(this,"screenChange")}get el(){return i(this)}screen;apiUrl;baseUrl;state;screenId;watchScreenId(){this.updateDataScreenAttribute()}authParams;statePersistence="memory";storageKey="authhero_widget";branding;theme;loading=!1;autoSubmit=!1;autoNavigate;_screen;_authParams;_branding;_theme;formData={};formSubmit;buttonClick;linkClick;navigate;flowComplete;flowError;screenChange;watchScreen(t){if("string"==typeof t)try{this._screen=JSON.parse(t)}catch{console.error("Failed to parse screen JSON")}else this._screen=t;this._screen&&(this.formData={},this.initFormDataFromDefaults(this._screen),this.screenChange.emit(this._screen),this.updateDataScreenAttribute())}initFormDataFromDefaults(t){const e={};for(const i of t.components||[])if("config"in i&&i.config&&"default_value"in i.config&&i.config.default_value){const t=i.config.default_value;"string"==typeof t&&""!==t&&(e[i.id]=t)}Object.keys(e).length>0&&(this.formData={...e,...this.formData})}updateDataScreenAttribute(){const t=this._screen?.name||this.screenId;t?this.el.setAttribute("data-screen",t):this.el.removeAttribute("data-screen");const e=this.el.closest("[data-authhero-widget-container]");e&&(t?e.setAttribute("data-screen",t):e.removeAttribute("data-screen"))}watchBranding(t){if("string"==typeof t)try{this._branding=JSON.parse(t)}catch{console.error("Failed to parse branding JSON")}else this._branding=t;this.applyThemeStyles()}watchTheme(t){if("string"==typeof t)try{this._theme=JSON.parse(t)}catch{console.error("Failed to parse theme JSON")}else this._theme=t;this.applyThemeStyles()}watchAuthParams(t){if("string"==typeof t)try{this._authParams=JSON.parse(t)}catch{console.error("Failed to parse authParams JSON")}else this._authParams=t}applyThemeStyles(){const t=(e=this._theme,{...r(this._branding),...n(e)});var e;!function(t,e){Object.entries(e).forEach((([e,i])=>{t.style.setProperty(e,i)}))}(this.el,t)}focusFirstInput(){requestAnimationFrame((()=>{const t=this.el.shadowRoot;if(!t)return;const e=t.querySelectorAll("authhero-node");for(const t of Array.from(e)){const e=t.shadowRoot;if(e){const t=e.querySelector('input:not([type="hidden"]):not([type="checkbox"]):not([disabled]), textarea:not([disabled])');if(t)return void t.focus()}}}))}get shouldAutoNavigate(){return this.autoNavigate??this.autoSubmit}buildUrl(t){return this.baseUrl?new URL(t,this.baseUrl).toString():t}loadPersistedState(){if("url"===this.statePersistence){const t=new URL(window.location.href).searchParams.get("state");t&&!this.state&&(this.state=t)}else if("session"===this.statePersistence)try{const t=sessionStorage.getItem(`${this.storageKey}_state`);t&&!this.state&&(this.state=t);const e=sessionStorage.getItem(`${this.storageKey}_screenId`);e&&!this.screenId&&(this.screenId=e)}catch{}}persistState(){if("url"===this.statePersistence){const t=new URL(window.location.href);this.state&&t.searchParams.set("state",this.state),this.screenId&&t.searchParams.set("screen",this.screenId),window.history.replaceState({},"",t.toString())}else if("session"===this.statePersistence)try{this.state&&sessionStorage.setItem(`${this.storageKey}_state`,this.state),this.screenId&&sessionStorage.setItem(`${this.storageKey}_screenId`,this.screenId)}catch{}}handlePopState=t=>{if(!this.apiUrl)return;t.state?.state&&(this.state=t.state.state);const e=t.state?.screen??this.extractScreenIdFromHref(location.href);e&&this.fetchScreen(e)};connectedCallback(){window.addEventListener("popstate",this.handlePopState)}disconnectedCallback(){window.removeEventListener("popstate",this.handlePopState)}async componentWillLoad(){if(!this._screen){const t=this.screen||this.el?.getAttribute("screen");t&&this.watchScreen(t)}this._branding||this.watchBranding(this.branding),this._theme||this.watchTheme(this.theme),this._authParams||this.watchAuthParams(this.authParams),this.loadPersistedState(),this.apiUrl&&!this._screen&&await this.fetchScreen(this.screenId)}async fetchScreen(t,e){if(!this.apiUrl)return!1;const i=t||this.screenId;let s=this.apiUrl;i&&s.includes("{screenId}")&&(s=s.replace("{screenId}",encodeURIComponent(i)));const o=new URL(s,this.baseUrl||window.location.origin);this.state&&o.searchParams.set("state",this.state),e&&o.searchParams.set("nodeId",e),this.loading=!0;try{const t=await fetch(this.buildUrl(o.pathname+o.search),{credentials:"include",headers:{Accept:"application/json"}});if(t.ok){const e=await t.json();if(e.screen?(this._screen=e.screen,e.branding&&(this._branding=e.branding,this.applyThemeStyles()),e.state&&(this.state=e.state),e.screenId&&(this.screenId=e.screenId)):this._screen=e,this._screen)return i&&i!==this.screenId&&(this.screenId=i),this.initFormDataFromDefaults(this._screen),this.screenChange.emit(this._screen),this.updateDataScreenAttribute(),this.persistState(),this.focusFirstInput(),!0}else{const e=await t.json().catch((()=>({message:"Failed to load screen"})));this.flowError.emit({message:e.message||"Failed to load screen"})}}catch(t){console.error("Failed to fetch screen:",t),this.flowError.emit({message:t instanceof Error?t.message:"Failed to fetch screen"})}finally{this.loading=!1}return!1}handleInputChange=(t,e)=>{this.formData={...this.formData,[t]:e}};handleSubmit=async t=>{if(t.preventDefault(),this._screen&&(this.formSubmit.emit({screen:this._screen,data:this.formData}),this.autoSubmit)){this.loading=!0;try{const t=await fetch(this.buildUrl(this._screen.action),{method:this._screen.method,credentials:"include",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({data:this.formData})}),e=t.headers.get("content-type");if(e?.includes("application/json")){const e=await t.json();e.redirect?(this.flowComplete.emit({redirectUrl:e.redirect}),this.navigate.emit({url:e.redirect}),this.shouldAutoNavigate&&(window.location.href=e.redirect)):!t.ok&&e.screen?(this._screen=e.screen,this.initFormDataFromDefaults(e.screen),this.screenChange.emit(e.screen),this.updateDataScreenAttribute(),this.focusFirstInput()):e.screen?(this._screen=e.screen,this.formData={},this.initFormDataFromDefaults(e.screen),this.screenChange.emit(e.screen),this.updateDataScreenAttribute(),e.screenId&&(this.screenId=e.screenId),this.persistState(),e.navigateUrl&&this.shouldAutoNavigate&&window.history.pushState({screen:e.screenId,state:this.state},"",e.navigateUrl),e.branding&&(this._branding=e.branding,this.applyThemeStyles()),e.state&&(this.state=e.state,this.persistState()),this.focusFirstInput()):e.complete&&this.flowComplete.emit({})}}catch(t){console.error("Form submission failed:",t),this.flowError.emit({message:t instanceof Error?t.message:"Form submission failed"})}finally{this.loading=!1}}};handleButtonClick=t=>{"submit"!==t.type?(this.buttonClick.emit(t),"SOCIAL"===t.type&&t.value&&this.shouldAutoNavigate?this.handleSocialLogin(t.value):"RESEND_BUTTON"===t.type&&this.shouldAutoNavigate&&this.handleResend()):this.handleSubmit({preventDefault:()=>{}})};handleSocialLogin(t){const e=this._authParams||{},i={connection:t};this.state?i.state=this.state:e.state&&(i.state=e.state),e.client_id&&(i.client_id=e.client_id),e.redirect_uri&&(i.redirect_uri=e.redirect_uri),e.scope&&(i.scope=e.scope),e.audience&&(i.audience=e.audience),e.nonce&&(i.nonce=e.nonce),e.response_type&&(i.response_type=e.response_type);const s=this.buildUrl("/authorize?"+new URLSearchParams(i).toString());this.navigate.emit({url:s}),window.location.href=s}async handleResend(){if(this._screen?.action)try{const t=this._screen.action+(this._screen.action.includes("?")?"&":"?")+"action=resend";await fetch(this.buildUrl(t),{method:"POST",credentials:"include"})}catch(t){console.error("Resend failed:",t)}}extractScreenIdFromHref(t){try{const e=new URL(t,window.location.origin).pathname,i=e.match(/\/u2\/login\/([^/]+)$/);if(i)return i[1];const s=e.match(/\/u2\/([^/]+)$/);return s&&"login"!==s[1]&&"screen"!==s[1]?s[1]:null}catch{return null}}handleLinkClick=(t,e)=>{if(this.linkClick.emit({id:e.id,href:e.href,text:e.text}),!this.shouldAutoNavigate)return void t.preventDefault();const i=this.extractScreenIdFromHref(e.href);return i&&this.apiUrl?(t.preventDefault(),void this.navigateToScreen(i,e.href)):void 0};async navigateToScreen(t,e){await this.fetchScreen(t)?window.history.pushState({screen:t,state:this.state},"",e):window.location.href=e}isSocialComponent(t){return"SOCIAL"===t.type}isDividerComponent(t){return"DIVIDER"===t.type}render(){const t=this._screen;if(this.loading&&!t)return s("div",{class:"widget-container"},s("div",{class:"loading-spinner"}));if(!t)return s("div",{class:"widget-container"},s("div",{class:"error-message"},"No screen configuration provided"));const e=t.messages?.filter((t=>"error"===t.type))||[],i=t.messages?.filter((t=>"success"===t.type))||[],o=[...t.components??[]].filter((t=>!1!==t.visible)).sort(((t,e)=>(t.order??0)-(e.order??0))),r=o.filter((t=>this.isSocialComponent(t))),n=o.filter((t=>!this.isSocialComponent(t)&&!this.isDividerComponent(t))),a=o.find((t=>this.isDividerComponent(t))),h=!!a,l=a?.config?.text||"Or",d=t=>{const e=t.config;return["social-buttons","button","button-secondary","button-social","button-social-content","button-social-text","button-social-subtitle","social-icon",...(e?.providers??[]).flatMap((t=>{const e=t.replace(/[^a-zA-Z0-9-]/g,"-");return[`button-social-${e}`,`button-social-content-${e}`,`button-social-text-${e}`,`button-social-subtitle-${e}`,`social-icon-${e}`]}))].join(", ")},p=this._theme?.widget?.logo_url||this._branding?.logo_url;return s("div",{class:"widget-container",part:"container","data-authstack-container":!0},s("header",{class:"widget-header",part:"header"},p&&s("div",{class:"logo-wrapper",part:"logo-wrapper"},s("img",{class:"logo",part:"logo",src:p,alt:"Logo"})),t.title&&s("h1",{class:"title",part:"title",innerHTML:c(t.title)}),t.description&&s("p",{class:"description",part:"description",innerHTML:c(t.description)})),s("div",{class:"widget-body",part:"body"},e.map((t=>s("div",{class:"message message-error",part:"message message-error",key:t.id??t.text},t.text))),i.map((t=>s("div",{class:"message message-success",part:"message message-success",key:t.id??t.text},t.text))),s("form",{onSubmit:this.handleSubmit,part:"form"},s("div",{class:"form-content"},r.length>0&&s("div",{class:"social-section",part:"social-section"},r.map((t=>s("authhero-node",{key:t.id,component:t,value:this.formData[t.id],onFieldChange:t=>this.handleInputChange(t.detail.id,t.detail.value),onButtonClick:t=>this.handleButtonClick(t.detail),disabled:this.loading,exportparts:d(t)})))),r.length>0&&n.length>0&&h&&s("div",{class:"divider",part:"divider"},s("span",{class:"divider-text"},l)),s("div",{class:"fields-section",part:"fields-section"},n.map((t=>s("authhero-node",{key:t.id,component:t,value:this.formData[t.id],onFieldChange:t=>this.handleInputChange(t.detail.id,t.detail.value),onButtonClick:t=>this.handleButtonClick(t.detail),disabled:this.loading})))))),t.links&&t.links.length>0&&s("div",{class:"links",part:"links"},t.links.map((t=>s("span",{class:"link-wrapper",part:"link-wrapper",key:t.id??t.href},t.linkText?s("span",null,t.text," ",s("a",{href:t.href,class:"link",part:"link",onClick:e=>this.handleLinkClick(e,{id:t.id,href:t.href,text:t.linkText||t.text})},t.linkText)):s("a",{href:t.href,class:"link",part:"link",onClick:e=>this.handleLinkClick(e,{id:t.id,href:t.href,text:t.text})},t.text))))),t.footer&&s("div",{class:"widget-footer",part:"footer",innerHTML:c(t.footer)})))}static get watchers(){return{screenId:[{watchScreenId:0}],screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}],authParams:[{watchAuthParams:0}]}}};d.style=":host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{max-width:var(--ah-widget-max-width, 400px);width:100%;margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-header, #1e212a);line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:14px;color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.widget-footer{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.widget-footer a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:12px;transition:color 150ms ease}.widget-footer a:hover{text-decoration:underline}.widget-footer a:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;max-width:none;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}";export{d as authhero_widget}