@authhero/widget 0.40.2 → 0.41.0

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

@@ -515,7 +515,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, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{width:var(--ah-widget-max-width, 400px);margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);border:var(--ah-widget-border-width, 0) solid     var(--ah-widget-border-color, transparent);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);font-weight:var(--ah-font-weight-subtitle, 400);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)}.fields-list{display:flex;flex-direction:column}.fields-list-scroll{max-height:var(--ah-choice-list-max-height, 320px);overflow-y:auto;gap:var(--ah-choice-list-gap, 8px);padding-right:4px}.choice-list-search{width:100%;padding:16px;margin-bottom:12px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;box-sizing:border-box;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out}.choice-list-search:hover{border-color:var(--ah-color-border-hover, #65676e)}.choice-list-search:focus{border-color:var(--ah-color-primary, var(--ah-color-link, #635dff))}.choice-list-empty{padding:16px;text-align:center;font-size:14px;color:var(--ah-color-text-muted, #65676e)}.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:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 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-focus-ring, 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-focus-ring, 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(:not([floating])){display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}:host(:not([floating])) .widget-container{box-shadow:none;border-radius:0;border:0;width:100%;margin:0}:host([floating]) .widget-container{width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
+const authheroWidgetCss = () => `:host{display:block;font-family:var(     --ah-font-family,     "ulp-font",     -apple-system,     BlinkMacSystemFont,     Roboto,     Helvetica,     sans-serif   );font-size:var(--ah-font-size-base, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{width:var(--ah-widget-max-width, 400px);margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);border:var(--ah-widget-border-width, 0) solid     var(--ah-widget-border-color, transparent);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);font-weight:var(--ah-font-weight-subtitle, 400);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-footer,.secondary-actions,.prompt-partial{display:flex;flex-direction:column}.prompt-partial .ulp-field{display:flex;flex-direction:column;gap:6px;position:relative;margin-top:8px;margin-bottom:16px}.prompt-partial label{font-size:var(--ah-font-size-label, 14px);font-weight:var(--ah-font-weight-label, 400);color:var(--ah-color-text, #1e212a)}.prompt-partial .ulp-error input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.prompt-partial .ulp-error select,.prompt-partial .ulp-error textarea{border-color:var(--ah-color-error, #d03c38)}.prompt-partial .ulp-error input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,.prompt-partial .ulp-error select:focus,.prompt-partial .ulp-error textarea:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.prompt-partial .ulp-error-info{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:-2px;line-height:1.4}.prompt-partial .required{color:var(--ah-color-error, #d03c38);margin-left:2px}.prompt-partial .ulp-field>input+label,.prompt-partial .ulp-field>select+label,.prompt-partial .ulp-field>textarea+label{position:absolute;left:16px;top:50%;z-index:1;padding:0;background-color:transparent;color:var(--ah-color-text-muted, #65676e);pointer-events:none;transform:translateY(-50%);transition:all 0.15s ease-out}.prompt-partial .ulp-field>input:focus+label,.prompt-partial .ulp-field>input:not(:placeholder-shown)+label,.prompt-partial .ulp-field>select+label,.prompt-partial .ulp-field>textarea:focus+label,.prompt-partial .ulp-field>textarea:not(:placeholder-shown)+label{top:-8px;left:12px;padding:0 4px;background-color:var(--ah-color-bg, #ffffff);color:var(--ah-color-text-muted, #65676e);font-size:12px;transform:translateY(0)}.prompt-partial .ulp-field>input:focus+label,.prompt-partial .ulp-field>select:focus+label,.prompt-partial .ulp-field>textarea:focus+label{color:var(--ah-color-primary, #635dff)}.prompt-partial input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.prompt-partial select,.prompt-partial textarea{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;box-sizing:border-box;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out}.prompt-partial input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,.prompt-partial select:hover,.prompt-partial textarea:hover{border-color:var(--ah-color-border-hover, #65676e)}.prompt-partial input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,.prompt-partial select:focus,.prompt-partial textarea:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.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)}.fields-list{display:flex;flex-direction:column}.fields-list-scroll{max-height:var(--ah-choice-list-max-height, 320px);overflow-y:auto;gap:var(--ah-choice-list-gap, 8px);padding-right:4px}.choice-list-search{width:100%;padding:16px;margin-bottom:12px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid     var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;box-sizing:border-box;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out}.choice-list-search:hover{border-color:var(--ah-color-border-hover, #65676e)}.choice-list-search:focus{border-color:var(--ah-color-primary, var(--ah-color-link, #635dff))}.choice-list-empty{padding:16px;text-align:center;font-size:14px;color:var(--ah-color-text-muted, #65676e)}.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:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 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-focus-ring, 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-focus-ring, 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(:not([floating])){display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}:host(:not([floating])) .widget-container{box-shadow:none;border-radius:0;border:0;width:100%;margin:0}:host([floating]) .widget-container{width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
 
 /**
  * When a screen's field section is made up entirely of choice buttons
@@ -530,6 +530,19 @@ const CHOICE_LIST_SEARCH_THRESHOLD = 5;
  * (CARDS, FILE, RECAPTCHA, …) can carry `required` in the schema too, and
  * gating on them would leave Continue disabled with no way to satisfy it.
  */
+/**
+ * Field types rendered as a single plain text input whose value maps 1:1 to
+ * formData. Composite fields (TEL, DATE) and choice/checkbox fields keep
+ * internal state, so they're not adopted from pre-hydration markup.
+ */
+const PREHYDRATION_TEXT_TYPES = new Set([
+    "TEXT",
+    "EMAIL",
+    "CODE",
+    "PASSWORD",
+    "NUMBER",
+    "URL",
+]);
 const FILLABLE_FIELD_TYPES = new Set([
     "TEXT",
     "EMAIL",
@@ -910,7 +923,24 @@ const AuthheroWidget = class {
      * actually in the DOM before measuring its height.
      */
     pendingRenderResolvers = [];
+    /**
+     * Number of `swapScreen` calls still running (rendering or animating the
+     * card height). A counter rather than a flag because a newer swap can start
+     * before a superseded one has settled.
+     */
+    activeSwaps = 0;
+    updateReadyAttribute() {
+        {
+            this.el.toggleAttribute("data-ready", !this.loading && this.activeSwaps === 0);
+        }
+    }
     componentDidRender() {
+        // `data-ready` marks the widget as interactive: hydrated in the browser
+        // (the SSR markup already carries Stencil's `hydrated` class, so that
+        // can't tell server and client apart) and not mid-submit or mid-swap.
+        // Stencil defers this hook until child nodes have rendered, so the
+        // fields are live too. E2E tests wait on `authhero-widget[data-ready]`.
+        this.updateReadyAttribute();
         if (this.pendingRenderResolvers.length === 0)
             return;
         const resolvers = this.pendingRenderResolvers;
@@ -958,6 +988,18 @@ const AuthheroWidget = class {
             apply();
             return;
         }
+        // Hold `data-ready` off until the new screen has rendered and the height
+        // animation has finished; `apply()` clears `loading` before either.
+        this.activeSwaps++;
+        try {
+            await this.animateSwap(card, apply);
+        }
+        finally {
+            this.activeSwaps--;
+            this.updateReadyAttribute();
+        }
+    }
+    async animateSwap(card, apply) {
         // Lock the current height and clip, so swapping the content doesn't jump
         // before the animation runs.
         const startHeight = card.getBoundingClientRect().height;
@@ -1122,6 +1164,9 @@ const AuthheroWidget = class {
         if (!this._authParams) {
             this.watchAuthParams(this.authParams ?? this.readJsonScript("auth-params"));
         }
+        if (this._screen) {
+            this.adoptPrehydrationValues(this._screen);
+        }
         // Load persisted state if available
         this.loadPersistedState();
         // Fetch screen from API if URL provided and no screen prop
@@ -1129,6 +1174,41 @@ const AuthheroWidget = class {
             await this.fetchScreen(this.screenId);
         }
     }
+    /**
+     * Carry over text the user (or a password manager, or a test driver) put
+     * into the server-rendered inputs before the client bundle loaded. Those
+     * inputs had no `onInput` handler yet, so `formData` never saw the value:
+     * the first client render would reset them to "" and keep the submit
+     * button disabled. The declarative shadow roots are still the SSR ones
+     * here — `componentWillLoad` runs before the first client render.
+     */
+    adoptPrehydrationValues(screen) {
+        const root = this.el.shadowRoot;
+        if (!root)
+            return;
+        const roots = [root];
+        root.querySelectorAll("authhero-node").forEach((node) => {
+            if (node.shadowRoot)
+                roots.push(node.shadowRoot);
+        });
+        const adopted = {};
+        for (const component of screen.components ?? []) {
+            if (!PREHYDRATION_TEXT_TYPES.has(component.type))
+                continue;
+            for (const r of roots) {
+                const input = Array.from(r.querySelectorAll("input[name]")).find((el) => el.name === component.id && el.type !== "hidden");
+                // Adopt "" too: a prefilled default the user cleared before
+                // hydration must not be restored by the client render.
+                if (input) {
+                    adopted[component.id] = input.value;
+                    break;
+                }
+            }
+        }
+        if (Object.keys(adopted).length > 0) {
+            this.formData = { ...this.formData, ...adopted };
+        }
+    }
     /**
      * Fetch screen configuration from the API
      * @param screenIdOverride Optional screen ID to fetch (overrides this.screenId)
@@ -1230,14 +1310,44 @@ const AuthheroWidget = class {
         e.preventDefault();
         if (!this._screen || this.loading)
             return;
-        let submitData = { ...this.formData, ...(overrideData || {}) };
-        // Merge hidden input values from DOM (may have been set programmatically
-        // by inline scripts, e.g. passkey management buttons)
         const form = this.el.shadowRoot?.querySelector("form");
+        if (this._screen.partials &&
+            form?.reportValidity &&
+            !form.reportValidity()) {
+            return;
+        }
+        const submitData = {
+            ...this.formData,
+            ...(overrideData || {}),
+        };
+        // Native fields in prompt partials are direct descendants of this form,
+        // unlike authhero-node inputs in nested shadow roots. Read them through
+        // FormData so standard HTML controls and successful-control semantics are
+        // preserved (disabled controls are skipped, repeated names are kept as
+        // arrays). FormData also covers enabled hidden inputs for ulp-* names.
+        const nativeNames = new Set();
+        if (form && this._screen.partials) {
+            const nativeValues = {};
+            new FormData(form).forEach((value, key) => {
+                if (typeof value === "string" && key.startsWith("ulp-")) {
+                    (nativeValues[key] ??= []).push(value);
+                }
+            });
+            for (const [key, values] of Object.entries(nativeValues)) {
+                nativeNames.add(key);
+                submitData[key] = values.length > 1 ? values : values[0];
+            }
+        }
+        // Legacy behaviour for inline scripts that fill hidden inputs: merge
+        // enabled ones, but never overwrite what FormData already collected.
         if (form) {
-            const hiddenInputs = form.querySelectorAll('input[type="hidden"]');
-            hiddenInputs.forEach((input) => {
-                if (input.name && input.value) {
+            form
+                .querySelectorAll('input[type="hidden"]')
+                .forEach((input) => {
+                if (input.name &&
+                    input.value &&
+                    !input.disabled &&
+                    !nativeNames.has(input.name)) {
                     submitData[input.name] = input.value;
                 }
             });
@@ -1391,6 +1501,11 @@ const AuthheroWidget = class {
         if (!form)
             return;
         form.submit = () => {
+            if (this._screen?.partials &&
+                form.reportValidity &&
+                !form.reportValidity()) {
+                return;
+            }
             const formData = new FormData(form);
             const data = {};
             formData.forEach((value, key) => {
@@ -1995,6 +2110,27 @@ const AuthheroWidget = class {
         const config = component.config;
         return config?.text ?? "";
     }
+    renderPromptPartial(screen, insertionPoint) {
+        const html = screen.partials?.[insertionPoint];
+        if (!html)
+            return null;
+        // Prompt partials intentionally contain tenant-authored form controls, so
+        // the widget must keep their input attributes intact.
+        return (h("div", { class: `prompt-partial prompt-partial-${insertionPoint}`, part: `prompt-partial prompt-partial-${insertionPoint}`, "data-insertion-point": insertionPoint, innerHTML: html }));
+    }
+    renderScreenLinks(screen) {
+        if (!screen.links?.length)
+            return null;
+        return (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", 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))) : (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)))))));
+    }
     render() {
         const screen = this._screen;
         if (this.loading && !screen) {
@@ -2021,13 +2157,20 @@ const AuthheroWidget = class {
             ? components.find((c) => this.isDividerComponent(c))
             : undefined;
         const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && c !== dividerComponent);
+        const hasPromptPartials = Object.values(screen.partials ?? {}).some((html) => !!html);
+        const footerComponents = hasPromptPartials
+            ? fieldComponents.filter((component) => component.id === "submit" && component.type === "NEXT_BUTTON")
+            : [];
+        const contentFieldComponents = hasPromptPartials
+            ? fieldComponents.filter((component) => !footerComponents.includes(component))
+            : fieldComponents;
         const hasDivider = !!dividerComponent;
         const dividerText = dividerComponent?.config?.text || "Or";
         // A "choice list" screen is one whose entire field section is pick-one
         // buttons (e.g. tenant selection). When the list is long, render it as a
         // searchable, scrollable list instead of a tall column of buttons.
-        const choiceButtons = fieldComponents.filter((c) => c.type === "NEXT_BUTTON");
-        const isSearchableChoiceList = choiceButtons.length === fieldComponents.length &&
+        const choiceButtons = contentFieldComponents.filter((c) => c.type === "NEXT_BUTTON");
+        const isSearchableChoiceList = choiceButtons.length === contentFieldComponents.length &&
             choiceButtons.length > CHOICE_LIST_SEARCH_THRESHOLD;
         // Hold the primary action button disabled until every required field has
         // a value.
@@ -2068,7 +2211,7 @@ const AuthheroWidget = class {
         };
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, action: screen.action, method: screen.method || "POST", part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, 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 &&
+        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, action: screen.action, method: screen.method || "POST", part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, this.renderPromptPartial(screen, "form-content-start"), socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, 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 && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, dividerText))), h("div", { class: "fields-section", part: "fields-section" }, isSearchableChoiceList && (h("input", { type: "text", class: "choice-list-search", part: "choice-list-search", placeholder: "Search", "aria-label": "Search", autocomplete: "off", value: this.listFilter, onInput: (e) => (this.listFilter = e.target.value), onKeyDown: (e) => {
                 // The search box lives inside the form; Enter would
@@ -2081,19 +2224,14 @@ const AuthheroWidget = class {
                 ? "fields-list fields-list-scroll"
                 : "fields-list" }, (isSearchableChoiceList
             ? visibleChoiceButtons
-            : fieldComponents).map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading ||
+            : contentFieldComponents).map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading ||
                 (component.type === "NEXT_BUTTON" &&
                     component.config?.skip_validation !== true &&
                     requiredFieldsMissing) }))), isSearchableChoiceList &&
-            visibleChoiceButtons.length === 0 && (h("div", { class: "choice-list-empty", part: "choice-list-empty" }, "No matches")))))), screen.links && screen.links.length > 0 && (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", 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))) : (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))))))), screen.footer && (h("div", { class: "widget-footer", part: "footer", innerHTML: sanitizeHtml(screen.footer) })))));
+            visibleChoiceButtons.length === 0 && (h("div", { class: "choice-list-empty", part: "choice-list-empty" }, "No matches")))), this.renderPromptPartial(screen, "form-content-end"), hasPromptPartials && (h("div", { class: "form-footer", part: "form-footer" }, this.renderPromptPartial(screen, "form-footer-start"), footerComponents.map((component) => (h("authhero-node", { key: component.id, component: component, locale: this.locale, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading ||
+                (component.type === "NEXT_BUTTON" &&
+                    component.config?.skip_validation !== true &&
+                    requiredFieldsMissing) }))), this.renderPromptPartial(screen, "form-footer-end")))), hasPromptPartials && (h("div", { class: "secondary-actions", part: "secondary-actions" }, this.renderPromptPartial(screen, "secondary-actions-start"), this.renderScreenLinks(screen), this.renderPromptPartial(screen, "secondary-actions-end")))), !hasPromptPartials && this.renderScreenLinks(screen), screen.footer && (h("div", { class: "widget-footer", part: "footer", innerHTML: sanitizeHtml(screen.footer) })))));
     }
     static get watchers() { return {
         "screenId": [{