@authhero/widget 0.4.1 → 0.6.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D0xitTOL.js');
+var index = require('./index-Db4bZu99.js');
 
 /**
  * AuthHero Widget - Branding Utilities
@@ -167,39 +167,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.buttons_text?.bold) {
-            vars['--ah-font-weight-btn'] = '600';
+        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.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
@@ -216,9 +237,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
@@ -251,7 +290,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}`;
 
 const AuthheroWidget = class {
     constructor(hostRef) {
@@ -509,6 +548,13 @@ const AuthheroWidget = class {
         }
     };
     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) => {
@@ -546,6 +592,20 @@ const AuthheroWidget = class {
             .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 (index.h("div", { class: "widget-container" }, index.h("div", { class: "loading-spinner" })));
@@ -556,9 +616,13 @@ const AuthheroWidget = class {
         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 (index.h("div", { class: "widget-container", part: "container" }, logoUrl && index.h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }), this._screen.title && (index.h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (index.h("p", { class: "description", part: "description" }, this._screen.description)), screenErrors.map((err) => (index.h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (index.h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), index.h("form", { onSubmit: this.handleSubmit, part: "form" }, components.map((component) => (index.h("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 && (index.h("div", { class: "links", part: "links" }, this._screen.links.map((link) => (index.h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (index.h("span", null, link.text, ' ', index.h("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))) : (index.h("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 (index.h("div", { class: "widget-container", part: "container" }, index.h("header", { class: "widget-header", part: "header" }, logoUrl && (index.h("div", { class: "logo-wrapper", part: "logo-wrapper" }, index.h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (index.h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (index.h("p", { class: "description", part: "description" }, this._screen.description))), index.h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (index.h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (index.h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), index.h("form", { onSubmit: this.handleSubmit, part: "form" }, index.h("div", { class: "form-content" }, socialComponents.length > 0 && (index.h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (index.h("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 && (index.h("div", { class: "divider", part: "divider" }, index.h("span", { class: "divider-text" }, "Or"))), index.h("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (index.h("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 && (index.h("div", { class: "links", part: "links" }, this._screen.links.map((link) => (index.h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (index.h("span", null, link.text, ' ', index.h("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))) : (index.h("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": [{

package/dist/cjs/authhero-widget.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D0xitTOL.js');
+var index = require('./index-Db4bZu99.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"_screen":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}]}]]]], options);
+  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4],"passwordVisible":[32]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"_screen":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-D0xitTOL.js → index-Db4bZu99.js}

@@ -252,6 +252,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";
@@ -2793,7 +2797,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;
@@ -2890,14 +2894,21 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } 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,
       newVNode2.$tag$
-    );
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -2910,6 +2921,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -3045,8 +3063,12 @@ 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$;
   if (text === null) {
+    {
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+    }
     {
       updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
     }
@@ -3065,6 +3087,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 (oldVNode.$text$ !== text) {
     elm.data = text;
   }