@authhero/widget 0.32.42 → 0.34.0

package/dist/types/types/components.d.ts

@@ -4,5 +4,5 @@
  * Re-exported from @authhero/adapter-interfaces for consistency.
  * @see https://auth0.com/docs/customize/forms/forms-schema
  */
-export type { ComponentMessage, FormNodeComponent as FormComponent, RuntimeComponent, BlockComponent, WidgetComponent, FieldComponent, DividerComponent, HtmlComponent, ImageComponent, JumpButtonComponent, ResendButtonComponent, NextButtonComponent, PreviousButtonComponent, RichTextComponent, VerifiableCredentialsWidget, GmapsAddressWidget, RecaptchaWidget, BooleanField, CardsField, ChoiceField, CountryField, CustomField, DateField, DropdownField, EmailField, FileField, LegalField, NumberField, PasswordField, PaymentField, SocialField, TelField, TextField, UrlField, ScreenLink, UiScreen, } from "@authhero/adapter-interfaces";
+export type { ComponentMessage, FormNodeComponent as FormComponent, RuntimeComponent, BlockComponent, WidgetComponent, FieldComponent, DividerComponent, HtmlComponent, ImageComponent, JumpButtonComponent, ResendButtonComponent, NextButtonComponent, PreviousButtonComponent, RichTextComponent, VerifiableCredentialsWidget, GmapsAddressWidget, RecaptchaWidget, BooleanField, CardsField, ChoiceField, CodeField, CountryField, CustomField, DateField, DropdownField, EmailField, FileField, LegalField, NumberField, PasswordField, PaymentField, SocialField, TelField, TextField, UrlField, ScreenLink, UiScreen, } from "@authhero/adapter-interfaces";
 export { isBlockComponent, isWidgetComponent, isFieldComponent, } from "@authhero/adapter-interfaces";

package/hydrate/index.js

@@ -5500,7 +5500,7 @@ function getCountryByCode(code) {
         countries.find((c) => c.code === "US"));
 }
 
-const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);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;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-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;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,     border-color 0.15s ease,     transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black))}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);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{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-right:none;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;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{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}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{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}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s 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}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{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)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}`;
+const authheroNodeCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;position:relative;margin-top:8px;margin-bottom:16px}.input-container{position:relative;width:100%}.input-label{position:absolute;left:16px;top:50%;transform:translateY(-50%);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;transition:all 0.15s ease-out;background-color:transparent;padding:0;z-index:1}.input-label.floating,.input-field:focus+.input-label,.input-field:not(:placeholder-shown)+.input-label,select.input-field+.input-label,input[type="date"].input-field+.input-label{top:-8px;transform:translateY(0);font-size:12px;background-color:var(--ah-color-bg, #ffffff);padding:0 4px;left:12px;color:var(--ah-color-text-muted, #65676e)}.input-field:focus+.input-label{color:var(--ah-color-primary, #635dff)}.required{color:var(--ah-color-error, #d03c38);margin-left:2px}.input-field{width:100%;padding:16px;font-size:16px;font-family:inherit;color:var(--ah-color-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;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.input-field::placeholder{color:transparent}.input-field:hover{border-color:var(--ah-color-border-hover, #65676e)}.input-field:focus{border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.input-field.has-error{border-color:var(--ah-color-error, #d03c38)}.input-field.has-error:focus{box-shadow:inset 0 0 0 1px var(--ah-color-error, #d03c38)}.input-field:disabled{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3);cursor:not-allowed;opacity:0.7}.password-container{position:relative;display:flex;align-items:center}.password-container .input-field{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--ah-color-icon, var(--ah-color-text-muted, #65676e));transition:color 0.15s ease}.password-toggle:hover{color:var(--ah-color-icon, var(--ah-color-text, #1e212a))}.password-toggle svg{width:20px;height:20px}.error-text{font-size:12px;color:var(--ah-color-error, #d03c38);margin-top:4px;line-height:1.4}.helper-text{font-size:12px;color:var(--ah-color-text-muted, #65676e);margin-top:4px;line-height:1.4}.field-link{display:block;text-align:left;margin-top:8px;margin-bottom:16px}.field-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400)}.field-link a:hover{text-decoration:underline}.checkbox-wrapper{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:16px}.checkbox-wrapper input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--ah-color-primary, #635dff);cursor:pointer;flex-shrink:0}.checkbox-label{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a);line-height:1.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;font-size:var(--ah-font-size-btn, 16px);font-weight:var(--ah-font-weight-btn, 400);font-family:inherit;line-height:1.25;text-align:center;text-decoration:none;border:none;border-radius:var(--ah-btn-radius, 3px);cursor:pointer;transition:background-color 0.15s ease,     border-color 0.15s ease,     transform 0.1s ease;box-sizing:border-box}.btn:disabled{opacity:0.6;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(0.98)}.btn:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-primary, #635dff));outline-offset:2px}.btn-primary{background-color:var(--ah-color-primary, #635dff);color:var(--ah-color-text-on-primary, #ffffff);margin-top:12px}.btn-primary:not(:disabled):hover{background-color:var(--ah-color-primary-hover, color-mix(in srgb, var(--ah-color-primary, #635dff) 85%, black))}.btn-secondary{background-color:var(--ah-color-bg, #ffffff);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{background-color:var(--ah-color-bg-hover, #f5f5f5);border-color:var(--ah-color-border-hover, #65676e)}.btn-link{background:none;border:none;color:var(--ah-color-link, #635dff);padding:8px 0;font-weight:var(--ah-font-weight-link, 400);text-decoration:none}.btn-link:hover{text-decoration:underline}.phone-input-wrapper{display:flex;align-items:stretch;gap:0;width:100%}.country-select{flex-shrink:0;width:auto;padding:12px 8px;font-size:var(--ah-font-size-body, 16px);font-family:var(--ah-font-family, inherit);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-right:none;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;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}.country-select:focus{outline:none;border-color:var(--ah-color-primary, #635dff);box-shadow:0 0 0 1px var(--ah-color-primary, #635dff)}.country-select:disabled{opacity:0.5;cursor:not-allowed}.phone-input-wrapper .input-container{flex:1;min-width:0}.phone-input-wrapper .input-field{border-radius:0 var(--ah-input-radius, 4px) var(--ah-input-radius, 4px) 0}.phone-input-wrapper .input-label.floating,.phone-input-wrapper .input-field:focus+.input-label,.phone-input-wrapper .input-field:not(:placeholder-shown)+.input-label{left:8px}.social-buttons{display:flex;flex-direction:column;gap:12px}.btn-social{display:flex;align-items:center;justify-content:center;gap:12px}.btn-social-content{display:flex;flex-direction:column;align-items:center;text-align:center}.btn-social-subtitle{font-size:12px;font-style:italic;opacity:0.8;margin-top:2px}.btn-social-subtitle:empty{display:none}.social-icon{width:20px;height:20px;flex-shrink:0}@media (max-width: 480px){.social-buttons:has(.btn-social:nth-child(3)){flex-direction:row;flex-wrap:nowrap;justify-content:stretch;gap:8px}.social-buttons:has(.btn-social:nth-child(3)) .btn-social{width:auto;min-width:0;padding:12px;flex:1 1 0}.social-buttons:has(.btn-social:nth-child(3)) .btn-social span{display:none}.social-buttons:has(.btn-social:nth-child(3)) .social-icon{width:24px;height:24px}}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-icon img{width:100%;height:100%;object-fit:contain}.text-title{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}.text-title.text-success{color:var(--ah-color-success, #13a769)}.text-description{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}.image{display:block;max-width:100%;height:auto;border-radius:4px}.image-centered{margin:0 auto 16px;width:52px;height:52px;object-fit:contain}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);transition:color 0.15s 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}.node-error{padding:12px 16px;background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38);border-radius:0;font-size:14px;margin-bottom:16px}.node-success{padding:12px 16px;background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769);border-radius:0;font-size:14px;margin-bottom:16px}.divider{display:flex;align-items:center;text-align:center;margin:16px 0}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0.5px}.rich-text{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)}.rich-text a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);transition:color 0.15s ease}.rich-text a:hover{text-decoration:underline}.rich-text .terms-text{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.rich-text .terms-text a{font-size:12px}.rich-text .forgot-password-link{text-align:right;font-size:13px;margin-top:4px}.rich-text .forgot-password-link a{font-size:13px;color:var(--ah-color-link, #635dff)}.rich-text .passwordless-link{margin-top:16px;text-align:center;font-size:14px}.rich-text .passwordless-link a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none)}.rich-text .passwordless-link a:hover{text-decoration:underline}.rich-text .signup-link{margin-top:16px;text-align:center;font-size:14px;color:var(--ah-color-text, #1e212a)}.code-field{position:relative}.code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;background:transparent;color:transparent;caret-color:transparent;font-family:inherit;letter-spacing:0;outline:none;cursor:text;-webkit-text-fill-color:transparent}.code-boxes{display:flex;align-items:center;gap:var(--ah-code-group-gap, 12px);justify-content:center}.code-group{display:flex;gap:0}.code-separator{color:var(--ah-color-text-muted, #65676e);font-size:var(--ah-code-font-size, 24px);user-select:none}.code-box-placeholder{color:var(--ah-color-text-muted, #65676e);opacity:0.4}.code-box{position:relative;flex:0 0 auto;width:var(--ah-code-box-width, 48px);height:var(--ah-code-box-height, 56px);display:flex;align-items:center;justify-content:center;font-size:var(--ah-code-font-size, 24px);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:0;transition:border-color 0.15s ease-out,     box-shadow 0.15s ease-out;box-sizing:border-box}.code-box+.code-box{margin-left:calc(-1 * var(--ah-input-border-width, 1px))}.code-group .code-box:first-child{border-top-left-radius:var(--ah-input-radius, 3px);border-bottom-left-radius:var(--ah-input-radius, 3px)}.code-group .code-box:last-child{border-top-right-radius:var(--ah-input-radius, 3px);border-bottom-right-radius:var(--ah-input-radius, 3px)}.code-field:focus-within .code-box.is-active{z-index:1;border-color:var(--ah-color-primary, #635dff);box-shadow:inset 0 0 0 1px var(--ah-color-primary, #635dff)}.code-field.has-error .code-box{border-color:var(--ah-color-error, #d03c38)}.code-input:disabled{cursor:not-allowed}.code-input:disabled~.code-boxes .code-box{background-color:var(--ah-color-bg-disabled, #f5f5f5);border-color:var(--ah-color-border-disabled, #e0e1e3)}`;
 
 class AuthheroNode {
     constructor(hostRef) {
@@ -5508,10 +5508,7 @@ class AuthheroNode {
         this.fieldChange = createEvent(this, "fieldChange");
         this.buttonClick = createEvent(this, "buttonClick");
     }
-    /**
-     * The component configuration to render.
-     * Follows Auth0 Forms component schema.
-     */
+    get host() { return getElement(this); }
     component;
     /**
      * Current value for field components.
@@ -5561,6 +5558,16 @@ class AuthheroNode {
         this.initCountryFromConfig();
         this.initTelValue();
     }
+    componentDidLoad() {
+        // Auto-focus a code field so the caret starts in the first (leftmost) box.
+        if (this.component?.type === "CODE" && !this.disabled) {
+            const value = this.getEffectiveValue() ?? "";
+            if (value.length === 0) {
+                const input = this.host.shadowRoot?.querySelector("input.code-input");
+                input?.focus();
+            }
+        }
+    }
     initCountryFromConfig() {
         if (this.component?.type === "TEL") {
             const config = this.component.config;
@@ -5719,6 +5726,20 @@ class AuthheroNode {
             }
         }
     };
+    handleCodeInput = (e, length, mode, autoSubmit) => {
+        const target = e.target;
+        const disallowed = mode === "alphanumeric" ? /[^a-zA-Z0-9]/g : /\D/g;
+        const cleaned = target.value.replace(disallowed, "").slice(0, length);
+        // Reflect the sanitized value back so the visible boxes never show
+        // characters we stripped (e.g. a pasted "123-456").
+        if (cleaned !== target.value) {
+            target.value = cleaned;
+        }
+        this.fieldChange.emit({ id: this.component.id, value: cleaned });
+        if (autoSubmit && cleaned.length === length) {
+            this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
+        }
+    };
     handleCheckbox = (e) => {
         const target = e.target;
         this.fieldChange.emit({
@@ -5865,6 +5886,60 @@ class AuthheroNode {
         }
         return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: "input-container" }, hAsync("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, autoComplete: autocomplete, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
     }
+    /**
+     * Segmented one-time-code input (e.g. SMS/email verification codes).
+     *
+     * Rendered as a SINGLE real <input> overlaid (transparent) on a row of
+     * presentational boxes. This keeps native paste, iOS/Android SMS autofill
+     * (`autocomplete="one-time-code"`) and screen-reader behaviour working —
+     * all of which break when using one <input> per digit.
+     */
+    renderCodeField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const hasError = errors.length > 0;
+        const config = (component.config ?? {});
+        const length = config.length ?? 6;
+        const mode = config.mode ?? "numeric";
+        const autoSubmit = config.auto_submit !== false;
+        const groupSize = config.group_size ?? 3;
+        const separator = config.separator ?? "-";
+        const placeholder = config.placeholder;
+        // Apply the same mode sanitization used on input (handleCodeInput) so a
+        // persisted/default value with invalid characters (e.g. "12-3a" in numeric
+        // mode) doesn't render until edited.
+        const disallowed = mode === "alphanumeric" ? /[^a-zA-Z0-9]/g : /\D/g;
+        const value = (this.getEffectiveValue() ?? "")
+            .replace(disallowed, "")
+            .slice(0, length);
+        const boxClass = (i) => {
+            let cls = "code-box";
+            if (i < value.length)
+                cls += " is-filled";
+            // Highlight the next empty box as the "caret" position while focused.
+            if (!this.disabled && i === value.length)
+                cls += " is-active";
+            return cls;
+        };
+        const renderBox = (i) => (hAsync("div", { class: boxClass(i), part: "code-box" }, value[i] ??
+            (placeholder ? (hAsync("span", { class: "code-box-placeholder" }, placeholder)) : (""))));
+        // Split into groups of `groupSize` (e.g. 3 → "123 - 456"); a non-positive
+        // or >= length size means a single ungrouped row.
+        const useGroups = groupSize > 0 && groupSize < length;
+        const groups = [];
+        if (useGroups) {
+            for (let start = 0; start < length; start += groupSize) {
+                groups.push(Array.from({ length: Math.min(groupSize, length - start) }, (_, j) => start + j));
+            }
+        }
+        else {
+            groups.push(Array.from({ length }, (_, i) => i));
+        }
+        return (hAsync("div", { class: "input-wrapper", part: "input-wrapper" }, hAsync("div", { class: hasError ? "code-field has-error" : "code-field", part: "code-field" }, hAsync("input", { id: inputId, class: "code-input", part: "input code-input", type: "text", name: component.id, "data-input-name": component.id, value: value, inputMode: mode === "numeric" ? "numeric" : "text", autoComplete: "one-time-code", autoCapitalize: "off", autoCorrect: "off", spellcheck: false, maxLength: length, required: component.required, disabled: this.disabled, "aria-label": component.label, "aria-invalid": hasError ? "true" : "false", onInput: (e) => this.handleCodeInput(e, length, mode, autoSubmit), onKeyDown: this.handleKeyDown }), hAsync("div", { class: "code-boxes", part: "code-boxes", "aria-hidden": "true" }, groups.map((group, gi) => [
+            gi > 0 && separator ? (hAsync("span", { class: "code-separator", part: "code-separator" }, separator)) : null,
+            hAsync("div", { class: "code-group", part: "code-group" }, group.map((i) => renderBox(i))),
+        ]))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
     renderEmailField(component) {
         const inputId = `input-${component.id}`;
         const errors = this.getErrors();
@@ -6037,6 +6112,8 @@ class AuthheroNode {
                 return this.renderTextField(this.component);
             case "EMAIL":
                 return this.renderEmailField(this.component);
+            case "CODE":
+                return this.renderCodeField(this.component);
             case "PASSWORD":
                 return this.renderPasswordField(this.component);
             case "NUMBER":
@@ -6958,6 +7035,94 @@ class AuthheroWidget {
             }
         });
     }
+    /**
+     * 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)
      */
@@ -7260,45 +7425,55 @@ class AuthheroWidget {
                 }
                 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