@authhero/widget 0.4.0 → 0.5.0

package/hydrate/index.js

@@ -470,6 +470,10 @@ var require_brace_expansion = __commonJS({
     }
   }
 });
+
+// src/utils/constants.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HTML_NS = "http://www.w3.org/1999/xhtml";
 var PrimitiveType = /* @__PURE__ */ ((PrimitiveType2) => {
   PrimitiveType2["Undefined"] = "undefined";
   PrimitiveType2["Null"] = "null";
@@ -3293,7 +3297,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   } else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && true) {
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -3419,14 +3423,21 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       updateElement(null, newVNode2, isSvgMode);
     }
   } else {
+    if (!isSvgMode) {
+      isSvgMode = newVNode2.$tag$ === "svg";
+    }
     if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = win.document.createElement(
+    elm = newVNode2.$elm$ = win.document.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
-    );
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -3442,6 +3453,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   {
@@ -3661,9 +3679,13 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
   if (text === null) {
+    {
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+    }
     {
       updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
     }
@@ -3682,6 +3704,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     } else if (isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) {
       newVNode2.$children$ = oldChildren;
     }
+    if (isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
   } else if ((defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
   } else if (oldVNode.$text$ !== text) {
@@ -5009,7 +5034,7 @@ var setScopedSSR = (opts) => {
 var needsScopedSSR = () => scopedSSR;
 var scopedSSR = false;
 
-const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;gap:var(--ah-space-1, 0.25rem)}.input-label{font-size:var(--ah-font-size-sm, 0.875rem);font-weight:var(--ah-font-weight-medium, 500);color:var(--ah-color-text-label, #374151);line-height:var(--ah-line-height-normal, 1.5)}.required{color:var(--ah-color-error, #dc2626);margin-left:var(--ah-space-1, 0.25rem)}.input-field{padding:var(--ah-input-padding-y, 0.75rem) var(--ah-input-padding-x, 1rem);font-size:var(--ah-font-size-base, 1rem);font-family:inherit;color:var(--ah-color-text, #1f2937);background-color:var(--ah-color-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #d1d5db);border-radius:var(--ah-input-radius, 6px);outline:none;transition:border-color var(--ah-transition-base, 200ms ease),               box-shadow var(--ah-transition-base, 200ms ease)}.input-field::placeholder{color:var(--ah-color-text-muted, #9ca3af)}.input-field:focus{border-color:var(--ah-color-primary, #0066cc);box-shadow:0 0 0 3px var(--ah-color-primary-focus-ring, rgba(0, 102, 204, 0.1))}.input-field.has-error{border-color:var(--ah-color-error, #dc2626)}.input-field.has-error:focus{box-shadow:0 0 0 3px rgba(220, 38, 38, 0.1)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f3f4f6);cursor:not-allowed;opacity:0.7}.error-text{font-size:var(--ah-font-size-xs, 0.75rem);color:var(--ah-color-error, #dc2626);margin-top:var(--ah-space-1, 0.25rem)}.helper-text{font-size:var(--ah-font-size-xs, 0.75rem);color:var(--ah-color-text-muted, #6b7280);margin-top:var(--ah-space-1, 0.25rem)}.checkbox-wrapper{display:flex;align-items:flex-start;gap:var(--ah-space-2, 0.5rem);cursor:pointer}.checkbox-wrapper input[type='checkbox']{width:1rem;height:1rem;margin-top:0.125rem;accent-color:var(--ah-color-primary, #0066cc);cursor:pointer}.checkbox-label{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-label, #374151);line-height:var(--ah-line-height-normal, 1.5)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ah-space-2, 0.5rem);width:100%;padding:var(--ah-btn-padding-y, 0.875rem) var(--ah-btn-padding-x, 1.5rem);font-size:var(--ah-font-size-base, 1rem);font-weight:var(--ah-btn-font-weight, 500);font-family:inherit;line-height:var(--ah-line-height-tight, 1.25);text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 8px);cursor:pointer;transition:background-color var(--ah-transition-base, 200ms ease),               transform var(--ah-transition-fast, 150ms ease),               box-shadow var(--ah-transition-base, 200ms ease)}.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, #0066cc);outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #0066cc);color:var(--ah-color-text-on-primary, #ffffff)}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, #0052a3)}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text, #374151);border:1px solid var(--ah-color-border-muted, #e5e7eb)}.btn-secondary:not(:disabled):hover{background-color:var(--ah-color-bg-muted, #f9fafb);border-color:var(--ah-color-border, #d1d5db)}.text-title{font-size:var(--ah-font-size-xl, 1.25rem);font-weight:var(--ah-font-weight-semibold, 600);color:var(--ah-color-text, #1f2937);margin:var(--ah-space-2, 0.5rem) 0;line-height:var(--ah-line-height-tight, 1.25)}.text-title.text-success{color:var(--ah-color-success, #16a34a)}.text-description{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #6b7280);margin:var(--ah-space-1, 0.25rem) 0;line-height:var(--ah-line-height-normal, 1.5)}.image{display:block;max-width:100%;height:auto;border-radius:var(--ah-radius-lg, 8px)}.image-centered{margin:0 auto var(--ah-space-4, 1rem);width:var(--ah-logo-size, 48px);height:var(--ah-logo-size, 48px);object-fit:contain}.link{color:var(--ah-color-primary, #0066cc);text-decoration:none;font-size:var(--ah-font-size-sm, 0.875rem);transition:color var(--ah-transition-fast, 150ms ease)}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-primary, #0066cc);outline-offset:2px}.node-error{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);background-color:var(--ah-color-error-bg, #fee2e2);color:var(--ah-color-error, #dc2626);border:1px solid var(--ah-color-error-border, #fecaca);border-radius:var(--ah-radius-md, 6px);font-size:var(--ah-font-size-sm, 0.875rem)}.node-success{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);background-color:var(--ah-color-success-bg, #dcfce7);color:var(--ah-color-success, #16a34a);border:1px solid var(--ah-color-success-border, #bbf7d0);border-radius:var(--ah-radius-md, 6px);font-size:var(--ah-font-size-sm, 0.875rem)}.divider{display:flex;align-items:center;text-align:center;margin:var(--ah-space-4, 1rem) 0}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #e5e7eb)}.divider-text{padding:0 var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #9ca3af);text-transform:uppercase;letter-spacing:0.05em}`;
+const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;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{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, 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, border-color 0.15s ease, 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:8px}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover);filter:brightness(0.9)}.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}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.social-icon{width:20px;height:20px;flex-shrink:0}.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}`;
 
 class AuthheroNode {
     constructor(hostRef) {
@@ -5030,6 +5055,10 @@ class AuthheroNode {
      * Whether the component is disabled.
      */
     disabled = false;
+    /**
+     * Whether the password field is visible.
+     */
+    passwordVisible = false;
     /**
      * Emitted when a field value changes.
      */
@@ -5055,6 +5084,9 @@ class AuthheroNode {
         }
         this.buttonClick.emit({ id: this.component.id, type, value });
     };
+    togglePasswordVisibility = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
     /**
      * Get error messages from the component.
      */
@@ -5063,13 +5095,32 @@ class AuthheroNode {
         return (runtimeComp.messages?.filter((m) => m.type === "error") || []);
     }
     /**
-     * Render a label for a field.
+     * Render a floating label for a field.
+     */
+    renderFloatingLabel(text, inputId, required, hasValue) {
+        if (!text)
+            return null;
+        return (hAsync("label", { class: { "input-label": true, floating: !!hasValue }, part: "label", htmlFor: inputId }, text, required && hAsync("span", { class: "required" }, "*")));
+    }
+    /**
+     * Render a label for a field (non-floating version for checkboxes etc).
      */
     renderLabel(text, inputId, required) {
         if (!text)
             return null;
         return (hAsync("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && hAsync("span", { class: "required" }, "*")));
     }
+    /**
+     * Render the eye icon for password visibility toggle.
+     */
+    renderPasswordToggle() {
+        if (this.passwordVisible) {
+            // Eye-off icon (password is visible, click to hide)
+            return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), hAsync("line", { x1: "1", y1: "1", x2: "23", y2: "23" })));
+        }
+        // Eye icon (password is hidden, click to show)
+        return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), hAsync("circle", { cx: "12", cy: "12", r: "3" })));
+    }
     /**
      * Render error messages.
      */
@@ -5121,21 +5172,25 @@ class AuthheroNode {
     renderTextField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        const { placeholder, multiline, max_length } = component.config ?? {};
+        const { multiline, max_length } = component.config ?? {};
+        const hasValue = !!(this.value && this.value.length > 0);
         if (multiline) {
-            return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+            return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
         }
-        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderEmailField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const hasValue = !!(this.value && this.value.length > 0);
+        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
     renderPasswordField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
-        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), hAsync("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "password", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        const hasValue = !!(this.value && this.value.length > 0);
+        const forgotPasswordLink = component.config?.forgot_password_link;
+        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container password-container" }, hAsync("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, value: this.value ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), hAsync("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (hAsync("div", { class: "field-link", part: "field-link" }, hAsync("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
     }
     renderNumberField(component) {
         const inputId = `input-${component.id}`;
@@ -5182,7 +5237,65 @@ class AuthheroNode {
     }
     renderSocialField(component) {
         const providers = component.config?.providers ?? [];
-        return (hAsync("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (hAsync("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "social", provider), key: provider }, "Continue with ", provider.charAt(0).toUpperCase() + provider.slice(1))))));
+        // Map provider IDs to display names
+        const getProviderDisplayName = (provider) => {
+            const displayNames = {
+                "google-oauth2": "Google",
+                facebook: "Facebook",
+                twitter: "Twitter",
+                github: "GitHub",
+                linkedin: "LinkedIn",
+                apple: "Apple",
+                microsoft: "Microsoft",
+                windowslive: "Microsoft",
+                amazon: "Amazon",
+                dropbox: "Dropbox",
+                bitbucket: "Bitbucket",
+                spotify: "Spotify",
+                slack: "Slack",
+                discord: "Discord",
+                twitch: "Twitch",
+                line: "LINE",
+                shopify: "Shopify",
+                paypal: "PayPal",
+                "paypal-sandbox": "PayPal",
+                box: "Box",
+                salesforce: "Salesforce",
+                "salesforce-sandbox": "Salesforce",
+                yahoo: "Yahoo",
+                auth0: "Auth0",
+            };
+            return (displayNames[provider.toLowerCase()] ||
+                provider
+                    .split("-")
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(" "));
+        };
+        // Get provider icon SVG
+        const getProviderIcon = (provider) => {
+            const p = provider.toLowerCase();
+            if (p === "google-oauth2" || p === "google") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }), hAsync("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }), hAsync("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }), hAsync("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })));
+            }
+            if (p === "facebook") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z", fill: "#1877F2" })));
+            }
+            if (p === "apple") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z", fill: "#000000" })));
+            }
+            if (p === "github") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z", fill: "#181717" })));
+            }
+            if (p === "microsoft" || p === "windowslive") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M0 0h11.377v11.372H0V0z", fill: "#f25022" }), hAsync("path", { d: "M12.623 0H24v11.372H12.623V0z", fill: "#7fba00" }), hAsync("path", { d: "M0 12.623h11.377V24H0v-11.377z", fill: "#00a4ef" }), hAsync("path", { d: "M12.623 12.623H24V24H12.623v-11.377z", fill: "#ffb900" })));
+            }
+            if (p === "linkedin") {
+                return (hAsync("svg", { class: "social-icon", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z", fill: "#0A66C2" })));
+            }
+            // Default: no icon
+            return null;
+        };
+        return (hAsync("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (hAsync("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "social", provider), key: provider }, getProviderIcon(provider), hAsync("span", null, "Continue with ", getProviderDisplayName(provider)))))));
     }
     // ===========================================================================
     // Main Render
@@ -5263,7 +5376,8 @@ class AuthheroNode {
         "$members$": {
             "component": [16],
             "value": [1],
-            "disabled": [4]
+            "disabled": [4],
+            "passwordVisible": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -5436,39 +5550,60 @@ function themeToCssVars(theme) {
     // Fonts
     if (theme.fonts) {
         const f = theme.fonts;
+        // reference_text_size is the base font size in pixels (default 16px)
+        const baseSize = f.reference_text_size || 16;
         if (f.font_url) {
             vars['--ah-font-url'] = f.font_url;
         }
         if (f.reference_text_size) {
             vars['--ah-font-size-base'] = `${f.reference_text_size}px`;
         }
+        // Title, subtitle, etc. sizes are percentages of the base size
         if (f.title?.size) {
-            vars['--ah-font-size-title'] = `${f.title.size}px`;
+            const titlePx = Math.round((f.title.size / 100) * baseSize);
+            vars['--ah-font-size-title'] = `${titlePx}px`;
         }
         if (f.subtitle?.size) {
-            vars['--ah-font-size-subtitle'] = `${f.subtitle.size}px`;
+            const subtitlePx = Math.round((f.subtitle.size / 100) * baseSize);
+            vars['--ah-font-size-subtitle'] = `${subtitlePx}px`;
         }
         if (f.body_text?.size) {
-            vars['--ah-font-size-body'] = `${f.body_text.size}px`;
+            const bodyPx = Math.round((f.body_text.size / 100) * baseSize);
+            vars['--ah-font-size-body'] = `${bodyPx}px`;
         }
         if (f.input_labels?.size) {
-            vars['--ah-font-size-label'] = `${f.input_labels.size}px`;
+            const labelPx = Math.round((f.input_labels.size / 100) * baseSize);
+            vars['--ah-font-size-label'] = `${labelPx}px`;
         }
         if (f.buttons_text?.size) {
-            vars['--ah-font-size-btn'] = `${f.buttons_text.size}px`;
+            const btnPx = Math.round((f.buttons_text.size / 100) * baseSize);
+            vars['--ah-font-size-btn'] = `${btnPx}px`;
         }
         if (f.links?.size) {
-            vars['--ah-font-size-link'] = `${f.links.size}px`;
+            const linkPx = Math.round((f.links.size / 100) * baseSize);
+            vars['--ah-font-size-link'] = `${linkPx}px`;
         }
         if (f.links_style === 'underlined') {
             vars['--ah-link-decoration'] = 'underline';
         }
-        // Font weights
-        if (f.title?.bold) {
-            vars['--ah-font-weight-title'] = '700';
+        // Font weights - bold option sets font-weight to 700
+        if (f.title?.bold !== undefined) {
+            vars['--ah-font-weight-title'] = f.title.bold ? '700' : '400';
+        }
+        if (f.subtitle?.bold !== undefined) {
+            vars['--ah-font-weight-subtitle'] = f.subtitle.bold ? '700' : '400';
+        }
+        if (f.body_text?.bold !== undefined) {
+            vars['--ah-font-weight-body'] = f.body_text.bold ? '700' : '400';
         }
-        if (f.buttons_text?.bold) {
-            vars['--ah-font-weight-btn'] = '600';
+        if (f.input_labels?.bold !== undefined) {
+            vars['--ah-font-weight-label'] = f.input_labels.bold ? '700' : '400';
+        }
+        if (f.buttons_text?.bold !== undefined) {
+            vars['--ah-font-weight-btn'] = f.buttons_text.bold ? '600' : '400';
+        }
+        if (f.links?.bold !== undefined) {
+            vars['--ah-font-weight-link'] = f.links.bold ? '700' : '400';
         }
     }
     // Widget settings
@@ -5485,9 +5620,27 @@ function themeToCssVars(theme) {
                 center: 'center',
                 left: 'flex-start',
                 right: 'flex-end',
-                none: 'none',
             };
-            vars['--ah-logo-align'] = positionMap[w.logo_position] ?? 'center';
+            if (w.logo_position === 'none') {
+                vars['--ah-logo-display'] = 'none';
+            }
+            else {
+                vars['--ah-logo-align'] = positionMap[w.logo_position] ?? 'center';
+            }
+        }
+        if (w.social_buttons_layout) {
+            // 'top' means social buttons above fields, 'bottom' means below
+            // Divider is always order 1 (middle)
+            if (w.social_buttons_layout === 'top') {
+                vars['--ah-social-order'] = '0';
+                vars['--ah-divider-order'] = '1';
+                vars['--ah-fields-order'] = '2';
+            }
+            else {
+                vars['--ah-social-order'] = '2';
+                vars['--ah-divider-order'] = '1';
+                vars['--ah-fields-order'] = '0';
+            }
         }
     }
     // Page background
@@ -5520,7 +5673,7 @@ function applyCssVars(element, vars) {
     });
 }
 
-const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)}.widget-container{max-width:var(--ah-widget-max-width, 400px);margin:0 auto;padding:var(--ah-widget-padding, 2rem);background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 8px);box-shadow:var(--ah-widget-shadow, 0 2px 10px rgba(0, 0, 0, 0.1))}.logo{display:block;width:var(--ah-logo-size, 48px);height:var(--ah-logo-size, 48px);margin:0 auto var(--ah-space-6, 1.5rem);object-fit:contain;border-radius:var(--ah-logo-radius, 8px)}.title{font-size:var(--ah-font-size-2xl, 1.5rem);font-weight:var(--ah-font-weight-semibold, 600);text-align:center;margin:0 0 var(--ah-space-8, 2rem);color:var(--ah-color-text, #111827);line-height:var(--ah-line-height-tight, 1.25)}.message{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);border-radius:var(--ah-radius-md, 4px);margin-bottom:var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);line-height:var(--ah-line-height-normal, 1.5)}.message-error{background-color:var(--ah-color-error-bg, #fee2e2);color:var(--ah-color-error, #dc2626);border:1px solid var(--ah-color-error-border, #fecaca)}.message-success{background-color:var(--ah-color-success-bg, #dcfce7);color:var(--ah-color-success, #16a34a);border:1px solid var(--ah-color-success-border, #bbf7d0)}form{display:flex;flex-direction:column;gap:var(--ah-space-4, 1rem)}.links{display:flex;flex-direction:column;align-items:center;gap:var(--ah-space-2, 0.5rem);margin-top:var(--ah-space-6, 1.5rem);padding-top:var(--ah-space-4, 1rem)}.link-wrapper{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #6b7280)}.link{color:var(--ah-color-primary, #0066cc);text-decoration:none;font-size:var(--ah-font-size-sm, 0.875rem);transition:color var(--ah-transition-fast, 150ms ease)}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-primary, #0066cc);outline-offset:2px}.divider{display:flex;align-items:center;text-align:center;margin:var(--ah-space-2, 0.5rem) 0}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #e5e7eb)}.divider-text{padding:0 var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #9ca3af);text-transform:uppercase;letter-spacing:0.05em}.loading-spinner{width:40px;height:40px;margin:var(--ah-space-8, 2rem) auto;border:3px solid var(--ah-color-border-muted, #f3f3f3);border-top:3px solid var(--ah-color-primary, #0066cc);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #dc2626);padding:var(--ah-space-4, 1rem)}`;
+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 40px 24px)}.widget-body{padding:var(--ah-body-padding, 0 40px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center)}.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 16px);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);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}.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}`;
 
 class AuthheroWidget {
     constructor(hostRef) {
@@ -5778,6 +5931,13 @@ class AuthheroWidget {
         }
     };
     handleButtonClick = (detail) => {
+        // If this is a submit button click, trigger form submission
+        if (detail.type === 'submit') {
+            // Create a synthetic submit event and call handleSubmit
+            const syntheticEvent = { preventDefault: () => { } };
+            this.handleSubmit(syntheticEvent);
+            return;
+        }
         this.buttonClick.emit(detail);
     };
     handleLinkClick = (e, link) => {
@@ -5815,6 +5975,20 @@ class AuthheroWidget {
             .filter((c) => c.visible !== false)
             .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
     }
+    /**
+     * Check if a component is a social button.
+     */
+    isSocialComponent(component) {
+        // Check the type property directly - FormComponent has a 'type' field
+        // SocialField has type 'SOCIAL'
+        return component.type === 'SOCIAL';
+    }
+    /**
+     * Check if a component is a divider.
+     */
+    isDividerComponent(component) {
+        return component.type === 'DIVIDER';
+    }
     render() {
         if (this.loading && !this._screen) {
             return (hAsync("div", { class: "widget-container" }, hAsync("div", { class: "loading-spinner" })));
@@ -5825,9 +5999,13 @@ class AuthheroWidget {
         const screenErrors = this.getScreenErrors();
         const screenSuccesses = this.getScreenSuccesses();
         const components = this.getOrderedComponents();
-        // Get logo URL from branding props
-        const logoUrl = this._branding?.logo_url;
-        return (hAsync("div", { class: "widget-container", part: "container" }, logoUrl && hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }), this._screen.title && (hAsync("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (hAsync("p", { class: "description", part: "description" }, this._screen.description)), screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, components.map((component) => (hAsync("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))), this._screen.links && this._screen.links.length > 0 && (hAsync("div", { class: "links", part: "links" }, this._screen.links.map((link) => (hAsync("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (hAsync("span", null, link.text, ' ', hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.linkText || link.text }) }, link.linkText))) : (hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.text }) }, link.text)))))))));
+        // Separate social, divider, and field components for layout ordering
+        const socialComponents = components.filter(c => this.isSocialComponent(c));
+        const fieldComponents = components.filter(c => !this.isSocialComponent(c) && !this.isDividerComponent(c));
+        const hasDivider = components.some(c => this.isDividerComponent(c));
+        // Get logo URL from theme.widget (takes precedence) or branding
+        const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
+        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (hAsync("p", { class: "description", part: "description" }, this._screen.description))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading }))))), socialComponents.length > 0 && fieldComponents.length > 0 && hasDivider && (hAsync("div", { class: "divider", part: "divider" }, hAsync("span", { class: "divider-text" }, "Or"))), hAsync("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (hAsync("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))))), this._screen.links && this._screen.links.length > 0 && (hAsync("div", { class: "links", part: "links" }, this._screen.links.map((link) => (hAsync("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (hAsync("span", null, link.text, ' ', hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.linkText || link.text }) }, link.linkText))) : (hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.text }) }, link.text))))))))));
     }
     static get watchers() { return {
         "screen": [{