@authhero/widget 0.19.2 → 0.20.0

package/hydrate/index.js

@@ -3264,6 +3264,23 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
+  } else if (memberName === "style") {
+    {
+      for (const prop in oldValue) {
+        if (!newValue || newValue[prop] == null) {
+          {
+            elm.style[prop] = "";
+          }
+        }
+      }
+    }
+    for (const prop in newValue) {
+      if (!oldValue || newValue[prop] !== oldValue[prop]) {
+        {
+          elm.style[prop] = newValue[prop];
+        }
+      }
+    }
   } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
@@ -4947,7 +4964,243 @@ var setScopedSSR = (opts) => {
 var needsScopedSSR = () => scopedSSR;
 var scopedSSR = false;
 
-const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n    box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-text, #1e212a)}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:14px;color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:16px;font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,\\n    border-color 0.15s ease,\\n    transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-primary, #635dff);outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid var(--ah-color-border, #c9cace)}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.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.5px}.rich-text{font-size:14px;line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
+/**
+ * Country data for phone number input with country code selector.
+ * Each entry contains:
+ * - code: ISO 3166-1 alpha-2 country code
+ * - dialCode: International dialing prefix
+ * - flag: Unicode flag emoji
+ * - name: Country name in English
+ */
+/**
+ * Get flag emoji from ISO 3166-1 alpha-2 country code.
+ * Uses Unicode Regional Indicator Symbol Letters.
+ */
+function flagEmoji(code) {
+    return String.fromCodePoint(...code
+        .toUpperCase()
+        .split("")
+        .map((c) => 0x1f1e6 - 65 + c.charCodeAt(0)));
+}
+/**
+ * Full list of countries with dial codes, sorted by dial code (numerically)
+ * with secondary sort by country code for ties.
+ */
+const countries = [
+    { code: "US", dialCode: "+1", name: "United States" },
+    { code: "CA", dialCode: "+1", name: "Canada" },
+    { code: "AG", dialCode: "+1", name: "Antigua and Barbuda" },
+    { code: "BS", dialCode: "+1", name: "Bahamas" },
+    { code: "BB", dialCode: "+1", name: "Barbados" },
+    { code: "DM", dialCode: "+1", name: "Dominica" },
+    { code: "DO", dialCode: "+1", name: "Dominican Republic" },
+    { code: "GD", dialCode: "+1", name: "Grenada" },
+    { code: "JM", dialCode: "+1", name: "Jamaica" },
+    { code: "KN", dialCode: "+1", name: "Saint Kitts and Nevis" },
+    { code: "LC", dialCode: "+1", name: "Saint Lucia" },
+    { code: "VC", dialCode: "+1", name: "Saint Vincent and the Grenadines" },
+    { code: "TT", dialCode: "+1", name: "Trinidad and Tobago" },
+    { code: "PR", dialCode: "+1", name: "Puerto Rico" },
+    { code: "KZ", dialCode: "+7", name: "Kazakhstan" },
+    { code: "RU", dialCode: "+7", name: "Russia" },
+    { code: "EG", dialCode: "+20", name: "Egypt" },
+    { code: "ZA", dialCode: "+27", name: "South Africa" },
+    { code: "GR", dialCode: "+30", name: "Greece" },
+    { code: "NL", dialCode: "+31", name: "Netherlands" },
+    { code: "BE", dialCode: "+32", name: "Belgium" },
+    { code: "FR", dialCode: "+33", name: "France" },
+    { code: "ES", dialCode: "+34", name: "Spain" },
+    { code: "HU", dialCode: "+36", name: "Hungary" },
+    { code: "IT", dialCode: "+39", name: "Italy" },
+    { code: "RO", dialCode: "+40", name: "Romania" },
+    { code: "CH", dialCode: "+41", name: "Switzerland" },
+    { code: "AT", dialCode: "+43", name: "Austria" },
+    { code: "GB", dialCode: "+44", name: "United Kingdom" },
+    { code: "DK", dialCode: "+45", name: "Denmark" },
+    { code: "SE", dialCode: "+46", name: "Sweden" },
+    { code: "NO", dialCode: "+47", name: "Norway" },
+    { code: "PL", dialCode: "+48", name: "Poland" },
+    { code: "DE", dialCode: "+49", name: "Germany" },
+    { code: "PE", dialCode: "+51", name: "Peru" },
+    { code: "MX", dialCode: "+52", name: "Mexico" },
+    { code: "CU", dialCode: "+53", name: "Cuba" },
+    { code: "AR", dialCode: "+54", name: "Argentina" },
+    { code: "BR", dialCode: "+55", name: "Brazil" },
+    { code: "CL", dialCode: "+56", name: "Chile" },
+    { code: "CO", dialCode: "+57", name: "Colombia" },
+    { code: "VE", dialCode: "+58", name: "Venezuela" },
+    { code: "MY", dialCode: "+60", name: "Malaysia" },
+    { code: "AU", dialCode: "+61", name: "Australia" },
+    { code: "ID", dialCode: "+62", name: "Indonesia" },
+    { code: "PH", dialCode: "+63", name: "Philippines" },
+    { code: "NZ", dialCode: "+64", name: "New Zealand" },
+    { code: "SG", dialCode: "+65", name: "Singapore" },
+    { code: "TH", dialCode: "+66", name: "Thailand" },
+    { code: "JP", dialCode: "+81", name: "Japan" },
+    { code: "KR", dialCode: "+82", name: "South Korea" },
+    { code: "VN", dialCode: "+84", name: "Vietnam" },
+    { code: "CN", dialCode: "+86", name: "China" },
+    { code: "TR", dialCode: "+90", name: "Turkey" },
+    { code: "IN", dialCode: "+91", name: "India" },
+    { code: "PK", dialCode: "+92", name: "Pakistan" },
+    { code: "AF", dialCode: "+93", name: "Afghanistan" },
+    { code: "LK", dialCode: "+94", name: "Sri Lanka" },
+    { code: "MM", dialCode: "+95", name: "Myanmar" },
+    { code: "IR", dialCode: "+98", name: "Iran" },
+    { code: "SS", dialCode: "+211", name: "South Sudan" },
+    { code: "MA", dialCode: "+212", name: "Morocco" },
+    { code: "DZ", dialCode: "+213", name: "Algeria" },
+    { code: "TN", dialCode: "+216", name: "Tunisia" },
+    { code: "LY", dialCode: "+218", name: "Libya" },
+    { code: "GM", dialCode: "+220", name: "Gambia" },
+    { code: "SN", dialCode: "+221", name: "Senegal" },
+    { code: "MR", dialCode: "+222", name: "Mauritania" },
+    { code: "ML", dialCode: "+223", name: "Mali" },
+    { code: "GN", dialCode: "+224", name: "Guinea" },
+    { code: "CI", dialCode: "+225", name: "Ivory Coast" },
+    { code: "BF", dialCode: "+226", name: "Burkina Faso" },
+    { code: "NE", dialCode: "+227", name: "Niger" },
+    { code: "TG", dialCode: "+228", name: "Togo" },
+    { code: "BJ", dialCode: "+229", name: "Benin" },
+    { code: "MU", dialCode: "+230", name: "Mauritius" },
+    { code: "LR", dialCode: "+231", name: "Liberia" },
+    { code: "SL", dialCode: "+232", name: "Sierra Leone" },
+    { code: "GH", dialCode: "+233", name: "Ghana" },
+    { code: "NG", dialCode: "+234", name: "Nigeria" },
+    { code: "TD", dialCode: "+235", name: "Chad" },
+    { code: "CF", dialCode: "+236", name: "Central African Republic" },
+    { code: "CM", dialCode: "+237", name: "Cameroon" },
+    { code: "CV", dialCode: "+238", name: "Cape Verde" },
+    { code: "ST", dialCode: "+239", name: "São Tomé and Príncipe" },
+    { code: "GQ", dialCode: "+240", name: "Equatorial Guinea" },
+    { code: "GA", dialCode: "+241", name: "Gabon" },
+    { code: "CG", dialCode: "+242", name: "Congo" },
+    { code: "CD", dialCode: "+243", name: "Congo (DRC)" },
+    { code: "AO", dialCode: "+244", name: "Angola" },
+    { code: "GW", dialCode: "+245", name: "Guinea-Bissau" },
+    { code: "SC", dialCode: "+248", name: "Seychelles" },
+    { code: "SD", dialCode: "+249", name: "Sudan" },
+    { code: "RW", dialCode: "+250", name: "Rwanda" },
+    { code: "ET", dialCode: "+251", name: "Ethiopia" },
+    { code: "SO", dialCode: "+252", name: "Somalia" },
+    { code: "DJ", dialCode: "+253", name: "Djibouti" },
+    { code: "KE", dialCode: "+254", name: "Kenya" },
+    { code: "TZ", dialCode: "+255", name: "Tanzania" },
+    { code: "UG", dialCode: "+256", name: "Uganda" },
+    { code: "BI", dialCode: "+257", name: "Burundi" },
+    { code: "MZ", dialCode: "+258", name: "Mozambique" },
+    { code: "ZM", dialCode: "+260", name: "Zambia" },
+    { code: "MG", dialCode: "+261", name: "Madagascar" },
+    { code: "RE", dialCode: "+262", name: "Réunion" },
+    { code: "ZW", dialCode: "+263", name: "Zimbabwe" },
+    { code: "NA", dialCode: "+264", name: "Namibia" },
+    { code: "MW", dialCode: "+265", name: "Malawi" },
+    { code: "LS", dialCode: "+266", name: "Lesotho" },
+    { code: "BW", dialCode: "+267", name: "Botswana" },
+    { code: "SZ", dialCode: "+268", name: "Eswatini" },
+    { code: "KM", dialCode: "+269", name: "Comoros" },
+    { code: "ER", dialCode: "+291", name: "Eritrea" },
+    { code: "PT", dialCode: "+351", name: "Portugal" },
+    { code: "LU", dialCode: "+352", name: "Luxembourg" },
+    { code: "IE", dialCode: "+353", name: "Ireland" },
+    { code: "IS", dialCode: "+354", name: "Iceland" },
+    { code: "AL", dialCode: "+355", name: "Albania" },
+    { code: "MT", dialCode: "+356", name: "Malta" },
+    { code: "CY", dialCode: "+357", name: "Cyprus" },
+    { code: "FI", dialCode: "+358", name: "Finland" },
+    { code: "BG", dialCode: "+359", name: "Bulgaria" },
+    { code: "LT", dialCode: "+370", name: "Lithuania" },
+    { code: "LV", dialCode: "+371", name: "Latvia" },
+    { code: "EE", dialCode: "+372", name: "Estonia" },
+    { code: "MD", dialCode: "+373", name: "Moldova" },
+    { code: "AM", dialCode: "+374", name: "Armenia" },
+    { code: "BY", dialCode: "+375", name: "Belarus" },
+    { code: "AD", dialCode: "+376", name: "Andorra" },
+    { code: "MC", dialCode: "+377", name: "Monaco" },
+    { code: "SM", dialCode: "+378", name: "San Marino" },
+    { code: "UA", dialCode: "+380", name: "Ukraine" },
+    { code: "RS", dialCode: "+381", name: "Serbia" },
+    { code: "ME", dialCode: "+382", name: "Montenegro" },
+    { code: "XK", dialCode: "+383", name: "Kosovo" },
+    { code: "HR", dialCode: "+385", name: "Croatia" },
+    { code: "SI", dialCode: "+386", name: "Slovenia" },
+    { code: "BA", dialCode: "+387", name: "Bosnia and Herzegovina" },
+    { code: "MK", dialCode: "+389", name: "North Macedonia" },
+    { code: "CZ", dialCode: "+420", name: "Czech Republic" },
+    { code: "SK", dialCode: "+421", name: "Slovakia" },
+    { code: "LI", dialCode: "+423", name: "Liechtenstein" },
+    { code: "FK", dialCode: "+500", name: "Falkland Islands" },
+    { code: "BZ", dialCode: "+501", name: "Belize" },
+    { code: "GT", dialCode: "+502", name: "Guatemala" },
+    { code: "SV", dialCode: "+503", name: "El Salvador" },
+    { code: "HN", dialCode: "+504", name: "Honduras" },
+    { code: "NI", dialCode: "+505", name: "Nicaragua" },
+    { code: "CR", dialCode: "+506", name: "Costa Rica" },
+    { code: "PA", dialCode: "+507", name: "Panama" },
+    { code: "HT", dialCode: "+509", name: "Haiti" },
+    { code: "GP", dialCode: "+590", name: "Guadeloupe" },
+    { code: "BO", dialCode: "+591", name: "Bolivia" },
+    { code: "GY", dialCode: "+592", name: "Guyana" },
+    { code: "EC", dialCode: "+593", name: "Ecuador" },
+    { code: "GF", dialCode: "+594", name: "French Guiana" },
+    { code: "PY", dialCode: "+595", name: "Paraguay" },
+    { code: "MQ", dialCode: "+596", name: "Martinique" },
+    { code: "SR", dialCode: "+597", name: "Suriname" },
+    { code: "UY", dialCode: "+598", name: "Uruguay" },
+    { code: "TL", dialCode: "+670", name: "Timor-Leste" },
+    { code: "BN", dialCode: "+673", name: "Brunei" },
+    { code: "NR", dialCode: "+674", name: "Nauru" },
+    { code: "PG", dialCode: "+675", name: "Papua New Guinea" },
+    { code: "TO", dialCode: "+676", name: "Tonga" },
+    { code: "SB", dialCode: "+677", name: "Solomon Islands" },
+    { code: "VU", dialCode: "+678", name: "Vanuatu" },
+    { code: "FJ", dialCode: "+679", name: "Fiji" },
+    { code: "PW", dialCode: "+680", name: "Palau" },
+    { code: "WS", dialCode: "+685", name: "Samoa" },
+    { code: "KI", dialCode: "+686", name: "Kiribati" },
+    { code: "FM", dialCode: "+691", name: "Micronesia" },
+    { code: "MH", dialCode: "+692", name: "Marshall Islands" },
+    { code: "KP", dialCode: "+850", name: "North Korea" },
+    { code: "HK", dialCode: "+852", name: "Hong Kong" },
+    { code: "MO", dialCode: "+853", name: "Macau" },
+    { code: "KH", dialCode: "+855", name: "Cambodia" },
+    { code: "LA", dialCode: "+856", name: "Laos" },
+    { code: "BD", dialCode: "+880", name: "Bangladesh" },
+    { code: "TW", dialCode: "+886", name: "Taiwan" },
+    { code: "MV", dialCode: "+960", name: "Maldives" },
+    { code: "LB", dialCode: "+961", name: "Lebanon" },
+    { code: "JO", dialCode: "+962", name: "Jordan" },
+    { code: "SY", dialCode: "+963", name: "Syria" },
+    { code: "IQ", dialCode: "+964", name: "Iraq" },
+    { code: "KW", dialCode: "+965", name: "Kuwait" },
+    { code: "SA", dialCode: "+966", name: "Saudi Arabia" },
+    { code: "YE", dialCode: "+967", name: "Yemen" },
+    { code: "OM", dialCode: "+968", name: "Oman" },
+    { code: "PS", dialCode: "+970", name: "Palestine" },
+    { code: "AE", dialCode: "+971", name: "United Arab Emirates" },
+    { code: "IL", dialCode: "+972", name: "Israel" },
+    { code: "BH", dialCode: "+973", name: "Bahrain" },
+    { code: "QA", dialCode: "+974", name: "Qatar" },
+    { code: "BT", dialCode: "+975", name: "Bhutan" },
+    { code: "MN", dialCode: "+976", name: "Mongolia" },
+    { code: "NP", dialCode: "+977", name: "Nepal" },
+    { code: "TJ", dialCode: "+992", name: "Tajikistan" },
+    { code: "TM", dialCode: "+993", name: "Turkmenistan" },
+    { code: "AZ", dialCode: "+994", name: "Azerbaijan" },
+    { code: "GE", dialCode: "+995", name: "Georgia" },
+    { code: "KG", dialCode: "+996", name: "Kyrgyzstan" },
+    { code: "UZ", dialCode: "+998", name: "Uzbekistan" },
+].map((c) => ({ ...c, flag: flagEmoji(c.code) }));
+/**
+ * Find a country by its ISO code, defaulting to US.
+ */
+function getCountryByCode(code) {
+    const upper = code.toUpperCase();
+    return (countries.find((c) => c.code === upper) ||
+        countries.find((c) => c.code === "US"));
+}
+
+const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text-muted, #65676e);pointer-events:none;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-text, #1e212a);background-color:var(--ah-color-input-bg, #ffffff);border:1px solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;transition:border-color 0.15s ease-out,\\n    box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-text-muted, #65676e);transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-text, #1e212a)}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:14px;color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:16px;font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,\\n    border-color 0.15s ease,\\n    transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-primary, #635dff);outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{filter:brightness(0.85)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #1e212a);border:1px solid var(--ah-color-border, #c9cace)}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:1px solid var(--ah-color-border, #c9cace);border-right:none;border-radius:var(--ah-border-radius-input, 4px) 0 0 var(--ah-border-radius-input, 4px);background-color:var(--ah-color-surface, #fff);color:var(--ah-color-text, #1e212a);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-border-radius-input, 4px) var(--ah-border-radius-input, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{font-size:20px;font-weight:400;color:var(--ah-color-text, #1e212a);margin:8px 0;line-height:1.3}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{font-size:14px;color:var(--ah-color-text-muted, #65676e);margin:4px 0;line-height:1.5}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;transition:color 0.15s ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.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.5px}.rich-text{font-size:14px;line-height:1.5;color:var(--ah-color-text, #1e212a)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
 
 class AuthheroNode {
     constructor(hostRef) {
@@ -4972,6 +5225,23 @@ class AuthheroNode {
      * Whether the password field is visible.
      */
     passwordVisible = false;
+    /**
+     * Selected country for TEL input with country selector.
+     */
+    selectedCountry = getCountryByCode("US");
+    /**
+     * Local phone number (without dial code) for TEL input.
+     */
+    localPhoneNumber = "";
+    /**
+     * Whether the country dropdown is open.
+     */
+    countryDropdownOpen = false;
+    /**
+     * Whether the TEL field is currently in email mode (allow_email config).
+     * When true, the value is emitted as-is without dial code prefix.
+     */
+    telEmailMode = false;
     /**
      * Emitted when a field value changes.
      */
@@ -4980,6 +5250,153 @@ class AuthheroNode {
      * Emitted when a button is clicked.
      */
     buttonClick;
+    componentChanged() {
+        this.initCountryFromConfig();
+        this.initTelValue();
+    }
+    valueChanged() {
+        this.initTelValue();
+    }
+    componentWillLoad() {
+        this.initCountryFromConfig();
+        this.initTelValue();
+    }
+    initCountryFromConfig() {
+        if (this.component?.type === "TEL") {
+            const config = this.component.config;
+            const defaultCountry = config?.default_country;
+            if (defaultCountry) {
+                this.selectedCountry = getCountryByCode(defaultCountry);
+            }
+            // For allow_email mode, start in email/text mode (no country picker)
+            // until the user starts typing digits
+            if (config?.allow_email === true) {
+                this.telEmailMode = true;
+            }
+        }
+    }
+    /**
+     * Hydrate localPhoneNumber (and selectedCountry) from the effective value
+     * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
+     * e.g. "+15551234567".
+     */
+    initTelValue() {
+        if (this.component?.type !== "TEL")
+            return;
+        const config = this.component.config;
+        const allowEmail = config?.allow_email === true;
+        const fullValue = this.getEffectiveValue();
+        if (!fullValue) {
+            this.localPhoneNumber = "";
+            if (allowEmail) {
+                this.telEmailMode = true;
+            }
+            return;
+        }
+        // Try to match a country by dial code (longest match first)
+        if (fullValue.startsWith("+")) {
+            const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
+            for (const country of sorted) {
+                if (fullValue.startsWith(country.dialCode)) {
+                    this.selectedCountry = country;
+                    this.localPhoneNumber = fullValue.slice(country.dialCode.length);
+                    if (allowEmail) {
+                        this.telEmailMode = false;
+                    }
+                    return;
+                }
+            }
+        }
+        // No dial code match — check if it looks like an email or a phone number
+        this.localPhoneNumber = fullValue;
+        if (allowEmail) {
+            const looksLikePhone = /^[+\d]/.test(fullValue);
+            this.telEmailMode = !looksLikePhone;
+        }
+    }
+    handleCountryChange = (e) => {
+        const target = e.target;
+        this.selectedCountry = getCountryByCode(target.value);
+        // Re-emit the full phone number with new dial code
+        const fullNumber = this.localPhoneNumber
+            ? `${this.selectedCountry.dialCode}${this.localPhoneNumber}`
+            : "";
+        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+    };
+    /**
+     * Try to detect a dial code prefix in the raw input (e.g. "+46", "0046")
+     * and update selectedCountry accordingly. Returns the local number portion
+     * (after the dial code) if a match was found, or null if no match.
+     */
+    detectDialCodeFromInput(raw) {
+        // Normalise "00" international prefix to "+"
+        const normalized = raw.startsWith("00") ? "+" + raw.slice(2) : raw;
+        if (!normalized.startsWith("+"))
+            return null;
+        // Match longest dial code first
+        const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
+        for (const country of sorted) {
+            if (normalized.startsWith(country.dialCode)) {
+                this.selectedCountry = country;
+                return normalized.slice(country.dialCode.length);
+            }
+        }
+        return null;
+    }
+    handlePhoneInput = (e) => {
+        const target = e.target;
+        const value = target.value;
+        const config = this.component.config;
+        const allowEmail = config?.allow_email === true;
+        if (allowEmail) {
+            // Detect phone mode: value starts with digit or '+', and no '@'.
+            // When the field is empty, revert to neutral (email) mode so the
+            // country picker disappears and the user can start fresh.
+            const looksLikePhone = value.length > 0 && /^[+\d]/.test(value) && !value.includes("@");
+            this.telEmailMode = !looksLikePhone;
+            if (!this.telEmailMode) {
+                // Phone mode — first try dial code detection before stripping '+'
+                // so that typing +46 or 0046 can match a country
+                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, "");
+                    target.value = cleanedLocal;
+                    this.localPhoneNumber = cleanedLocal;
+                    const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
+                    this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+                }
+                else {
+                    // No dial code — strip non-phone chars and '+' (picker provides the prefix)
+                    const cleaned = value.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "");
+                    if (cleaned !== value) {
+                        target.value = cleaned;
+                    }
+                    this.localPhoneNumber = cleaned;
+                    const fullNumber = cleaned
+                        ? `${this.selectedCountry.dialCode}${cleaned}`
+                        : "";
+                    this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+                }
+            }
+            else {
+                // Email or text — emit as-is
+                this.localPhoneNumber = value;
+                this.fieldChange.emit({ id: this.component.id, value });
+            }
+            return;
+        }
+        // Standard phone-only mode — strip '+' since the picker provides the prefix
+        const cleaned = value.replace(/[^\d\s\-()]/g, "");
+        if (cleaned !== value) {
+            target.value = cleaned;
+        }
+        this.localPhoneNumber = cleaned;
+        const fullNumber = cleaned
+            ? `${this.selectedCountry.dialCode}${cleaned}`
+            : "";
+        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
+    };
     handleInput = (e) => {
         const target = e.target;
         this.fieldChange.emit({ id: this.component.id, value: target.value });
@@ -4989,6 +5406,16 @@ class AuthheroNode {
             e.preventDefault();
             this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
         }
+        // In combined TEL+email mode, backspace on an empty field exits phone mode
+        if (e.key === "Backspace" && !this.telEmailMode) {
+            const target = e.target;
+            const config = this.component.config;
+            if (config?.allow_email === true && target.value.length === 0) {
+                this.telEmailMode = true;
+                this.localPhoneNumber = "";
+                this.fieldChange.emit({ id: this.component.id, value: "" });
+            }
+        }
     };
     handleCheckbox = (e) => {
         const target = e.target;
@@ -5161,8 +5588,17 @@ class AuthheroNode {
     renderTelField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const effectiveValue = this.getEffectiveValue();
-        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "tel", name: component.id, value: effectiveValue ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "tel", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const config = component.config;
+        const allowEmail = config?.allow_email === true;
+        const hasValue = this.localPhoneNumber.length > 0;
+        // In allow_email mode, show the country picker only when the user is typing a phone number
+        const showCountryPicker = allowEmail ? !this.telEmailMode : true;
+        // 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 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)));
     }
     renderUrlField(component) {
         const inputId = `input-${component.id}`;
@@ -5314,6 +5750,14 @@ class AuthheroNode {
                 return null;
         }
     }
+    static get watchers() { return {
+        "component": [{
+                "componentChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
     static get style() { return authheroNodeCss(); }
     static get cmpMeta() { return {
         "$flags$": 521,
@@ -5322,7 +5766,11 @@ class AuthheroNode {
             "component": [16],
             "value": [1],
             "disabled": [4],
-            "passwordVisible": [32]
+            "passwordVisible": [32],
+            "selectedCountry": [32],
+            "localPhoneNumber": [32],
+            "countryDropdownOpen": [32],
+            "telEmailMode": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5752,7 +6200,7 @@ function escapeAttr(value) {
         .replace(/>/g, ">");
 }
 
-const authheroWidgetCss = () => `: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, 14px);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-description, 14px);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}}`;
+const authheroWidgetCss = () => `: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}}`;
 
 class AuthheroWidget {
     constructor(hostRef) {
@@ -6115,6 +6563,25 @@ class AuthheroWidget {
             }
         }
     }
+    handlePopState = (event) => {
+        if (!this.apiUrl)
+            return;
+        // Restore the widget state token from history if present
+        if (event.state?.state) {
+            this.state = event.state.state;
+        }
+        // Derive screen from history state or from the current URL
+        const screen = event.state?.screen ?? this.extractScreenIdFromHref(location.href);
+        if (screen) {
+            this.fetchScreen(screen);
+        }
+    };
+    connectedCallback() {
+        window.addEventListener("popstate", this.handlePopState);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("popstate", this.handlePopState);
+    }
     async componentWillLoad() {
         // Parse initial props - this prevents unnecessary state changes during hydration that cause flashes
         // Also check the element attribute as a fallback for hydration scenarios
@@ -6147,7 +6614,7 @@ class AuthheroWidget {
      */
     async fetchScreen(screenIdOverride, nodeId) {
         if (!this.apiUrl)
-            return;
+            return false;
         const currentScreenId = screenIdOverride || this.screenId;
         // Build the API URL, replacing {screenId} placeholder if present
         let url = this.apiUrl;
@@ -6202,6 +6669,7 @@ class AuthheroWidget {
                     this.updateDataScreenAttribute();
                     this.persistState();
                     this.focusFirstInput();
+                    return true;
                 }
             }
             else {
@@ -6222,6 +6690,7 @@ class AuthheroWidget {
         finally {
             this.loading = false;
         }
+        return false;
     }
     handleInputChange = (name, value) => {
         this.formData = {
@@ -6397,6 +6866,30 @@ class AuthheroWidget {
             console.error("Resend failed:", error);
         }
     }
+    /**
+     * Extract screen ID from a u2 link href.
+     * Handles patterns like /u2/login/{screenId}?state=... and /u2/{screenId}?state=...
+     * Returns the screen ID or null if the href doesn't match a known pattern.
+     */
+    extractScreenIdFromHref(href) {
+        try {
+            const url = new URL(href, window.location.origin);
+            const path = url.pathname;
+            // Match /u2/login/{screenId} (e.g., /u2/login/identifier)
+            const loginMatch = path.match(/\/u2\/login\/([^/]+)$/);
+            if (loginMatch)
+                return loginMatch[1];
+            // Match /u2/{screenId} (e.g., /u2/signup, /u2/enter-password)
+            const u2Match = path.match(/\/u2\/([^/]+)$/);
+            if (u2Match && u2Match[1] !== "login" && u2Match[1] !== "screen") {
+                return u2Match[1];
+            }
+            return null;
+        }
+        catch {
+            return null;
+        }
+    }
     handleLinkClick = (e, link) => {
         // Emit the event so the consuming app can handle it
         this.linkClick.emit({
@@ -6404,12 +6897,35 @@ class AuthheroWidget {
             href: link.href,
             text: link.text,
         });
-        // If autoNavigate is enabled, let the browser handle the navigation
-        // Otherwise, prevent default and let the app decide
+        // If autoNavigate is not enabled, prevent default and let the app decide
         if (!this.shouldAutoNavigate) {
             e.preventDefault();
+            return;
+        }
+        // Try client-side navigation: extract screen ID and fetch via API
+        const screenId = this.extractScreenIdFromHref(link.href);
+        if (screenId && this.apiUrl) {
+            e.preventDefault();
+            this.navigateToScreen(screenId, link.href);
+            return;
         }
+        // Fall back to browser navigation for non-u2 links
     };
+    /**
+     * Navigate to a screen client-side by fetching it from the API.
+     * Updates the widget state and browser URL without a full page reload.
+     */
+    async navigateToScreen(screenId, displayUrl) {
+        const success = await this.fetchScreen(screenId);
+        if (success) {
+            // Push browser history so back/forward works
+            window.history.pushState({ screen: screenId, state: this.state }, "", displayUrl);
+        }
+        else {
+            // On failure, fall back to hard navigation
+            window.location.href = displayUrl;
+        }
+    }
     /**
      * Check if a component is a social button.
      */