@authhero/widget 0.32.41 → 0.33.0

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

@@ -105,8 +105,8 @@ function brandingToCssVars(branding) {
     // Primary color
     if (branding.colors?.primary) {
         vars["--ah-color-primary"] = branding.colors.primary;
-        // Generate hover variant (slightly darker)
-        vars["--ah-color-primary-hover"] = branding.colors.primary;
+        // Hover variant is derived in CSS (color-mix darken) unless the theme
+        // sets an explicit base_hover_color; don't pin it to the base color here.
     }
     // Page background
     if (branding.colors?.page_background) {
@@ -173,7 +173,6 @@ function themeToCssVars(theme) {
         // Primary button
         if (c.primary_button) {
             vars["--ah-color-primary"] = c.primary_button;
-            vars["--ah-color-primary-hover"] = c.primary_button;
             // Honor explicit primary_button_label when set; otherwise auto-pick.
             if (c.primary_button_label) {
                 vars["--ah-color-text-on-primary"] = c.primary_button_label;
@@ -517,7 +516,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);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-header, #1e212a);line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:14px;color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.widget-footer{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.widget-footer a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:12px;transition:color 150ms ease}.widget-footer a:hover{text-decoration:underline}.widget-footer a:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;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-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: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{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
 
 const AuthheroWidget = class {
     constructor(hostRef) {
@@ -636,6 +635,11 @@ const AuthheroWidget = class {
      * Aborted on screen change or component disconnect.
      */
     conditionalMediationAbort;
+    /**
+     * URL of the custom font stylesheet currently injected into the document
+     * head, tracked so it can be removed when the theme/branding changes.
+     */
+    loadedFontUrl;
     /**
      * Emitted when the form is submitted.
      * The consuming application should handle the submission unless autoSubmit is true.
@@ -793,6 +797,39 @@ const AuthheroWidget = class {
     applyThemeStyles() {
         const vars = mergeThemeVars(this._branding, this._theme);
         applyCssVars(this.el, vars);
+        this.loadCustomFont();
+    }
+    /**
+     * Load the custom font stylesheet referenced by the theme/branding.
+     * The stylesheet is expected to define the `ulp-font` family (Auth0
+     * convention), which the component CSS already falls back to. @font-face
+     * rules must live in the document (not the shadow DOM) to take effect, so
+     * the <link> is injected into the document head, de-duplicated by href.
+     */
+    loadCustomFont() {
+        if (typeof document === "undefined") {
+            return;
+        }
+        const fontUrl = this._theme?.fonts?.font_url || this._branding?.font?.url;
+        if (fontUrl === this.loadedFontUrl) {
+            return;
+        }
+        // Remove any previously injected font stylesheet so old fonts don't
+        // persist across tenant/theme switches. Match by dataset attribute
+        // rather than interpolating the URL into a selector string.
+        for (const link of Array.from(document.head.querySelectorAll("link[data-authhero-font]"))) {
+            link.remove();
+        }
+        this.loadedFontUrl = undefined;
+        if (!fontUrl) {
+            return;
+        }
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = fontUrl;
+        link.setAttribute("data-authhero-font", fontUrl);
+        document.head.appendChild(link);
+        this.loadedFontUrl = fontUrl;
     }
     /**
      * Focus the first input field in the form.
@@ -818,6 +855,94 @@ const AuthheroWidget = class {
             }
         });
     }
+    /**
+     * Pending resolvers awaiting the next render, flushed by
+     * `componentDidRender`. Lets `swapScreen` wait until the new screen is
+     * actually in the DOM before measuring its height.
+     */
+    pendingRenderResolvers = [];
+    componentDidRender() {
+        if (this.pendingRenderResolvers.length === 0)
+            return;
+        const resolvers = this.pendingRenderResolvers;
+        this.pendingRenderResolvers = [];
+        resolvers.forEach((resolve) => resolve());
+    }
+    /**
+     * Resolves after Stencil flushes the next render, so `swapScreen` waits for
+     * the new screen to be in the DOM before measuring its height.
+     */
+    nextRender() {
+        return new Promise((resolve) => {
+            let settled = false;
+            const done = () => {
+                if (settled)
+                    return;
+                settled = true;
+                resolve();
+            };
+            this.pendingRenderResolvers.push(done);
+            // Safety net: a screen swap always triggers a render here, but never
+            // hang the swap if one somehow doesn't fire — resolve after a couple of
+            // frames at the latest.
+            requestAnimationFrame(() => requestAnimationFrame(done));
+        });
+    }
+    /**
+     * Apply a screen swap, animating the widget card's height to the next
+     * screen's size (Stripe-style): lock the current height, swap the content,
+     * measure the new natural height, then animate between them. The content
+     * itself doesn't fade — the card just resizes.
+     *
+     * The card (.widget-container) is animated rather than the host because it
+     * carries the background, so its resize is visible; clipping its content
+     * (not the host) also keeps the card's drop-shadow intact.
+     *
+     * Degrades to an immediate swap when the Web Animations API is unavailable
+     * or the user prefers reduced motion.
+     */
+    async swapScreen(apply) {
+        const card = this.el.shadowRoot?.querySelector(".widget-container");
+        const prefersReducedMotion = typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (!card || typeof card.animate !== "function" || prefersReducedMotion) {
+            apply();
+            return;
+        }
+        // Lock the current height and clip, so swapping the content doesn't jump
+        // before the animation runs.
+        const startHeight = card.getBoundingClientRect().height;
+        card.style.height = `${startHeight}px`;
+        card.style.overflow = "hidden";
+        apply();
+        // Wait for the new screen to render before measuring its height.
+        await this.nextRender();
+        const cleanup = () => {
+            card.style.height = "";
+            card.style.overflow = "";
+        };
+        // Measure the new content's natural height without painting: toggle to
+        // auto, read, restore — all synchronous, so there's no visible jump.
+        card.style.height = "auto";
+        const endHeight = card.getBoundingClientRect().height;
+        card.style.height = `${startHeight}px`;
+        card.getBoundingClientRect(); // force reflow from startHeight
+        if (Math.abs(endHeight - startHeight) < 1) {
+            cleanup();
+            return;
+        }
+        const animation = card.animate([{ height: `${startHeight}px` }, { height: `${endHeight}px` }], { duration: 520, easing: "cubic-bezier(0.22, 1, 0.36, 1)" });
+        try {
+            await animation.finished;
+        }
+        catch {
+            // Animation cancelled (e.g. superseded by a newer swap); the final
+            // DOM state is already correct, so just fall through to cleanup.
+        }
+        finally {
+            cleanup();
+        }
+    }
     /**
      * Get the effective autoNavigate value (defaults to autoSubmit if not set)
      */
@@ -1120,45 +1245,55 @@ const AuthheroWidget = class {
                 }
                 else if (!response.ok && result.screen) {
                     // Handle validation errors (400 response) — preserve user input
-                    this._screen = result.screen;
-                    this.initFormDataFromDefaults(result.screen);
-                    this.screenChange.emit(result.screen);
-                    this.updateDataScreenAttribute();
-                    this.focusFirstInput();
+                    await this.swapScreen(() => {
+                        // Clear loading first so the captured "after" snapshot doesn't
+                        // freeze a disabled button into the cross-fade.
+                        this.loading = false;
+                        this._screen = result.screen;
+                        this.initFormDataFromDefaults(result.screen);
+                        this.screenChange.emit(result.screen);
+                        this.updateDataScreenAttribute();
+                        this.focusFirstInput();
+                    });
                 }
                 else if (result.screen) {
                     // Next screen (success)
-                    this._screen = result.screen;
-                    this.formData = {};
-                    this.initFormDataFromDefaults(result.screen);
-                    this.screenChange.emit(result.screen);
-                    this.updateDataScreenAttribute();
-                    // Update screenId if returned in response
-                    if (result.screenId) {
-                        this.screenId = result.screenId;
-                    }
-                    // Persist state (especially for session storage mode)
-                    this.persistState();
-                    // Update URL path if navigateUrl is provided (client-side navigation)
-                    if (result.navigateUrl && this.shouldAutoNavigate) {
-                        window.history.pushState({ screen: result.screenId, state: this.state }, "", result.navigateUrl);
-                    }
-                    // Apply branding if included
-                    if (result.branding) {
-                        this._branding = result.branding;
-                        this.applyThemeStyles();
-                    }
-                    // Update state if returned
-                    if (result.state) {
-                        this.state = result.state;
+                    await this.swapScreen(() => {
+                        // Clear loading first so the captured "after" snapshot doesn't
+                        // freeze a disabled button into the cross-fade.
+                        this.loading = false;
+                        this._screen = result.screen;
+                        this.formData = {};
+                        this.initFormDataFromDefaults(result.screen);
+                        this.screenChange.emit(result.screen);
+                        this.updateDataScreenAttribute();
+                        // Update screenId if returned in response
+                        if (result.screenId) {
+                            this.screenId = result.screenId;
+                        }
+                        // Persist state (especially for session storage mode)
                         this.persistState();
-                    }
-                    // Perform WebAuthn ceremony if present (structured data, not script)
-                    if (result.ceremony) {
-                        this.performWebAuthnCeremony(result.ceremony);
-                    }
-                    // Focus first input on new screen
-                    this.focusFirstInput();
+                        // Update URL path if navigateUrl is provided (client-side navigation)
+                        if (result.navigateUrl && this.shouldAutoNavigate) {
+                            window.history.pushState({ screen: result.screenId, state: this.state }, "", result.navigateUrl);
+                        }
+                        // Apply branding if included
+                        if (result.branding) {
+                            this._branding = result.branding;
+                            this.applyThemeStyles();
+                        }
+                        // Update state if returned
+                        if (result.state) {
+                            this.state = result.state;
+                            this.persistState();
+                        }
+                        // Perform WebAuthn ceremony if present (structured data, not script)
+                        if (result.ceremony) {
+                            this.performWebAuthnCeremony(result.ceremony);
+                        }
+                        // Focus first input on new screen
+                        this.focusFirstInput();
+                    });
                 }
                 else if (result.complete) {
                     // Flow complete without redirect

package/dist/collection/components/authhero-node/authhero-node.css

@@ -39,7 +39,7 @@
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 16px;
+  font-size: var(--ah-font-size-label, 16px);
   font-weight: var(--ah-font-weight-label, 400);
   color: var(--ah-color-text-muted, #65676e);
   pointer-events: none;
@@ -83,9 +83,9 @@ input[type="date"].input-field+.input-label {
   padding: 16px;
   font-size: 16px;
   font-family: inherit;
-  color: var(--ah-color-text, #1e212a);
+  color: var(--ah-color-input-text, var(--ah-color-text, #1e212a));
   background-color: var(--ah-color-input-bg, #ffffff);
-  border: 1px solid var(--ah-color-border, #c9cace);
+  border: var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);
   border-radius: var(--ah-input-radius, 3px);
   outline: none;
   transition:
@@ -145,12 +145,12 @@ input[type="date"].input-field+.input-label {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--ah-color-text-muted, #65676e);
+  color: var(--ah-color-icon, var(--ah-color-text-muted, #65676e));
   transition: color 0.15s ease;
 }
 
 .password-toggle:hover {
-  color: var(--ah-color-text, #1e212a);
+  color: var(--ah-color-icon, var(--ah-color-text, #1e212a));
 }
 
 .password-toggle svg {
@@ -188,7 +188,7 @@ input[type="date"].input-field+.input-label {
 .field-link a {
   color: var(--ah-color-link, #635dff);
   text-decoration: var(--ah-link-decoration, none);
-  font-size: 14px;
+  font-size: var(--ah-font-size-link, 14px);
   font-weight: var(--ah-font-weight-link, 400);
 }
 
@@ -219,7 +219,8 @@ input[type="date"].input-field+.input-label {
 }
 
 .checkbox-label {
-  font-size: 14px;
+  font-size: var(--ah-font-size-body, 14px);
+  font-weight: var(--ah-font-weight-body, 400);
   color: var(--ah-color-text, #1e212a);
   line-height: 1.5;
 }
@@ -236,7 +237,7 @@ input[type="date"].input-field+.input-label {
   gap: 10px;
   width: 100%;
   padding: 14px 20px;
-  font-size: 16px;
+  font-size: var(--ah-font-size-btn, 16px);
   font-weight: var(--ah-font-weight-btn, 400);
   font-family: inherit;
   line-height: 1.25;
@@ -262,7 +263,7 @@ input[type="date"].input-field+.input-label {
 }
 
 .btn:focus-visible {
-  outline: 2px solid var(--ah-color-primary, #635dff);
+  outline: 2px solid var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));
   outline-offset: 2px;
 }
 
@@ -274,14 +275,14 @@ input[type="date"].input-field+.input-label {
 }
 
 .btn-primary:not(:disabled):hover {
-  filter: brightness(0.85);
+  background-color: var(--ah-color-primary-hover, color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black));
 }
 
 /* Secondary Button (Social/OIDC) */
 .btn-secondary {
   background-color: var(--ah-color-bg, #ffffff);
-  color: var(--ah-color-text, #1e212a);
-  border: 1px solid var(--ah-color-border, #c9cace);
+  color: var(--ah-btn-secondary-text, var(--ah-color-text, #1e212a));
+  border: var(--ah-btn-border-width, 1px) solid var(--ah-btn-secondary-border, var(--ah-color-border, #c9cace));
 }
 
 .btn-secondary:not(:disabled):hover {
@@ -321,11 +322,11 @@ input[type="date"].input-field+.input-label {
   padding: 12px 8px;
   font-size: var(--ah-font-size-body, 16px);
   font-family: var(--ah-font-family, inherit);
-  border: 1px solid var(--ah-color-border, #c9cace);
+  border: var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);
   border-right: none;
-  border-radius: var(--ah-border-radius-input, 4px) 0 0 var(--ah-border-radius-input, 4px);
-  background-color: var(--ah-color-surface, #fff);
-  color: var(--ah-color-text, #1e212a);
+  border-radius: var(--ah-input-radius, 4px) 0 0 var(--ah-input-radius, 4px);
+  background-color: var(--ah-color-input-bg, var(--ah-color-surface, #fff));
+  color: var(--ah-color-input-text, var(--ah-color-text, #1e212a));
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
@@ -352,7 +353,7 @@ input[type="date"].input-field+.input-label {
 }
 
 .phone-input-wrapper .input-field {
-  border-radius: 0 var(--ah-border-radius-input, 4px) var(--ah-border-radius-input, 4px) 0;
+  border-radius: 0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0;
 }
 
 .phone-input-wrapper .input-label.floating,
@@ -450,9 +451,9 @@ input[type="date"].input-field+.input-label {
    ========================================================================== */
 
 .text-title {
-  font-size: 20px;
-  font-weight: 400;
-  color: var(--ah-color-text, #1e212a);
+  font-size: var(--ah-font-size-title, 20px);
+  font-weight: var(--ah-font-weight-title, 400);
+  color: var(--ah-color-text-header, var(--ah-color-header, #1e212a));
   margin: 8px 0;
   line-height: 1.3;
 }
@@ -462,7 +463,8 @@ input[type="date"].input-field+.input-label {
 }
 
 .text-description {
-  font-size: 14px;
+  font-size: var(--ah-font-size-subtitle, 14px);
+  font-weight: var(--ah-font-weight-subtitle, 400);
   color: var(--ah-color-text-muted, #65676e);
   margin: 4px 0;
   line-height: 1.5;
@@ -495,7 +497,7 @@ input[type="date"].input-field+.input-label {
 .link {
   color: var(--ah-color-link, #635dff);
   text-decoration: var(--ah-link-decoration, none);
-  font-size: 14px;
+  font-size: var(--ah-font-size-link, 14px);
   transition: color 0.15s ease;
 }
 
@@ -504,7 +506,7 @@ input[type="date"].input-field+.input-label {
 }
 
 .link:focus-visible {
-  outline: 2px solid var(--ah-color-link, #635dff);
+  outline: 2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -568,7 +570,8 @@ input[type="date"].input-field+.input-label {
    ========================================================================== */
 
 .rich-text {
-  font-size: 14px;
+  font-size: var(--ah-font-size-body, 14px);
+  font-weight: var(--ah-font-weight-body, 400);
   line-height: 1.5;
   color: var(--ah-color-text, #1e212a);
 }

package/dist/collection/components/authhero-widget/authhero-widget.css

@@ -26,6 +26,7 @@
   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;
 }
@@ -77,12 +78,13 @@
   font-weight: var(--ah-font-weight-title, 700);
   text-align: var(--ah-title-align, center);
   margin: var(--ah-title-margin, 24px 0 24px);
-  color: var(--ah-color-header, #1e212a);
+  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);
@@ -185,14 +187,15 @@ form {
 }
 
 .link-wrapper {
-  font-size: 14px;
+  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: 14px;
+  font-size: var(--ah-font-size-link, 14px);
   font-weight: var(--ah-font-weight-link, 400);
   transition: color 150ms ease;
 }
@@ -202,7 +205,7 @@ form {
 }
 
 .link:focus-visible {
-  outline: 2px solid var(--ah-color-link, #635dff);
+  outline: 2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -231,7 +234,7 @@ form {
 }
 
 .widget-footer a:focus-visible {
-  outline: 2px solid var(--ah-color-link, #635dff);
+  outline: 2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));
   outline-offset: 2px;
   border-radius: 2px;
 }