@authhero/widget 0.11.0 → 0.13.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-I1frl4Am.js');
+var index = require('./index-vX5cgLV-.js');
 
 /**
  * AuthHero Widget - Branding Utilities
@@ -423,7 +423,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 8px);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}.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, 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 8px);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 AuthheroWidget = class {
     constructor(hostRef) {
@@ -465,6 +465,9 @@ const AuthheroWidget = class {
      * When statePersistence is 'url', this is synced with the URL.
      */
     screenId;
+    watchScreenId() {
+        this.updateDataScreenAttribute();
+    }
     /**
      * OAuth/OIDC parameters for social login redirects.
      * Can be passed as a JSON string or object.
@@ -581,6 +584,19 @@ const AuthheroWidget = class {
         }
         if (this._screen) {
             this.screenChange.emit(this._screen);
+            this.updateDataScreenAttribute();
+        }
+    }
+    /**
+     * Updates the data-screen attribute on the host element.
+     * This allows external CSS to target different screens using attribute selectors.
+     */
+    updateDataScreenAttribute() {
+        if (this.screenId) {
+            this.el.setAttribute("data-screen", this.screenId);
+        }
+        else {
+            this.el.removeAttribute("data-screen");
         }
     }
     watchBranding(newValue) {
@@ -631,6 +647,30 @@ const AuthheroWidget = class {
         const vars = mergeThemeVars(this._branding, this._theme);
         applyCssVars(this.el, vars);
     }
+    /**
+     * Focus the first input field in the form.
+     * Called after screen changes to ensure keyboard navigation works properly.
+     */
+    focusFirstInput() {
+        // Use requestAnimationFrame to ensure DOM has updated
+        requestAnimationFrame(() => {
+            const shadowRoot = this.el.shadowRoot;
+            if (!shadowRoot)
+                return;
+            // Find all authhero-node components and look for inputs in their shadow DOMs
+            const nodes = shadowRoot.querySelectorAll("authhero-node");
+            for (const node of Array.from(nodes)) {
+                const nodeShadow = node.shadowRoot;
+                if (nodeShadow) {
+                    const input = nodeShadow.querySelector('input:not([type="hidden"]):not([type="checkbox"]):not([disabled]), textarea:not([disabled])');
+                    if (input) {
+                        input.focus();
+                        return;
+                    }
+                }
+            }
+        });
+    }
     /**
      * Get the effective autoNavigate value (defaults to autoSubmit if not set)
      */
@@ -702,11 +742,23 @@ const AuthheroWidget = class {
         }
     }
     async componentWillLoad() {
-        // Parse initial props
-        this.watchScreen(this.screen);
-        this.watchBranding(this.branding);
-        this.watchTheme(this.theme);
-        this.watchAuthParams(this.authParams);
+        // Parse initial props - this prevents unnecessary state changes during hydration that cause flashes
+        // Also check the element attribute as a fallback for hydration scenarios
+        if (!this._screen) {
+            const screenValue = this.screen || this.el?.getAttribute("screen");
+            if (screenValue) {
+                this.watchScreen(screenValue);
+            }
+        }
+        if (!this._branding) {
+            this.watchBranding(this.branding);
+        }
+        if (!this._theme) {
+            this.watchTheme(this.theme);
+        }
+        if (!this._authParams) {
+            this.watchAuthParams(this.authParams);
+        }
         // Load persisted state if available
         this.loadPersistedState();
         // Fetch screen from API if URL provided and no screen prop
@@ -772,7 +824,9 @@ const AuthheroWidget = class {
                         this.screenId = currentScreenId;
                     }
                     this.screenChange.emit(this._screen);
+                    this.updateDataScreenAttribute();
                     this.persistState();
+                    this.focusFirstInput();
                 }
             }
             else {
@@ -844,6 +898,7 @@ const AuthheroWidget = class {
                     this._screen = result.screen;
                     this.formData = {};
                     this.screenChange.emit(result.screen);
+                    this.updateDataScreenAttribute();
                     // Update screenId if returned in response
                     if (result.screenId) {
                         this.screenId = result.screenId;
@@ -864,6 +919,8 @@ const AuthheroWidget = class {
                         this.state = result.state;
                         this.persistState();
                     }
+                    // Focus first input on new screen
+                    this.focusFirstInput();
                 }
                 else if (result.complete) {
                     // Flow complete without redirect
@@ -873,6 +930,8 @@ const AuthheroWidget = class {
                 if (!response.ok && result.screen) {
                     this._screen = result.screen;
                     this.screenChange.emit(result.screen);
+                    this.updateDataScreenAttribute();
+                    this.focusFirstInput();
                 }
             }
         }
@@ -974,28 +1033,6 @@ const AuthheroWidget = class {
             e.preventDefault();
         }
     };
-    /**
-     * Get error messages from the screen-level messages array.
-     */
-    getScreenErrors() {
-        return this._screen?.messages?.filter((m) => m.type === "error") || [];
-    }
-    /**
-     * Get success messages from the screen-level messages array.
-     */
-    getScreenSuccesses() {
-        return this._screen?.messages?.filter((m) => m.type === "success") || [];
-    }
-    /**
-     * Sort components by order.
-     */
-    getOrderedComponents() {
-        if (!this._screen)
-            return [];
-        return [...this._screen.components]
-            .filter((c) => c.visible !== false)
-            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-    }
     /**
      * Check if a component is a social button.
      */
@@ -1011,24 +1048,54 @@ const AuthheroWidget = class {
         return component.type === "DIVIDER";
     }
     render() {
-        if (this.loading && !this._screen) {
+        const screen = this._screen;
+        if (this.loading && !screen) {
             return (index.h("div", { class: "widget-container" }, index.h("div", { class: "loading-spinner" })));
         }
-        if (!this._screen) {
+        if (!screen) {
             return (index.h("div", { class: "widget-container" }, index.h("div", { class: "error-message" }, "No screen configuration provided")));
         }
-        const screenErrors = this.getScreenErrors();
-        const screenSuccesses = this.getScreenSuccesses();
-        const components = this.getOrderedComponents();
+        // Use the local screen variable for all rendering
+        const screenErrors = screen.messages?.filter((m) => m.type === "error") || [];
+        const screenSuccesses = screen.messages?.filter((m) => m.type === "success") || [];
+        const components = [...(screen.components ?? [])]
+            .filter((c) => c.visible !== false)
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
         // 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));
+        // Build dynamic exportparts for social buttons including provider-specific parts
+        const getExportParts = (component) => {
+            const baseParts = [
+                "social-buttons",
+                "button",
+                "button-secondary",
+                "button-social",
+                "button-social-content",
+                "button-social-text",
+                "button-social-subtitle",
+                "social-icon",
+            ];
+            const config = component.config;
+            const providers = config?.providers ?? [];
+            const providerParts = providers.flatMap((p) => {
+                const safe = p.replace(/[^a-zA-Z0-9-]/g, "-");
+                return [
+                    `button-social-${safe}`,
+                    `button-social-content-${safe}`,
+                    `button-social-text-${safe}`,
+                    `button-social-subtitle-${safe}`,
+                    `social-icon-${safe}`,
+                ];
+            });
+            return [...baseParts, ...providerParts].join(", ");
+        };
         // 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", innerHTML: sanitizeHtml(this._screen.title) })), this._screen.description && (index.h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(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 &&
+        return (index.h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, 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" }))), screen.title && (index.h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (index.h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(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, exportparts: getExportParts(component) }))))), 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, {
+            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 })))))), screen.links && screen.links.length > 0 && (index.h("div", { class: "links", part: "links" }, 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,
@@ -1036,9 +1103,12 @@ const AuthheroWidget = class {
                 id: link.id,
                 href: link.href,
                 text: link.text,
-            }) }, link.text))))))))));
+            }) }, link.text))))))), screen.footer && (index.h("div", { class: "widget-footer", part: "footer", innerHTML: sanitizeHtml(screen.footer) })))));
     }
     static get watchers() { return {
+        "screenId": [{
+                "watchScreenId": 0
+            }],
         "screen": [{
                 "watchScreen": 0
             }],

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-I1frl4Am.js');
+var index = require('./index-vX5cgLV-.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.42.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.40.1 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -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],"passwordVisible":[32]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":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"],"baseUrl":[1,"base-url"],"state":[1025],"screenId":[1025,"screen-id"],"authParams":[1,"auth-params"],"statePersistence":[1,"state-persistence"],"storageKey":[1,"storage-key"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"autoNavigate":[4,"auto-navigate"],"_screen":[32],"_authParams":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screenId":[{"watchScreenId":0}],"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}],"authParams":[{"watchAuthParams":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;